github.com/greenpau/go-authcrunch@v1.1.4/assets/portal/templates/basic/register.template (about) 1 <!DOCTYPE html> 2 <html lang="en" class="h-full bg-blue-100"> 3 <head> 4 <title>{{ .MetaTitle }} - {{ .PageTitle }}</title> 5 <!-- Required meta tags --> 6 <meta charset="utf-8" /> 7 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> 8 <meta name="description" content="{{ .MetaDescription }}" /> 9 <meta name="author" content="{{ .MetaAuthor }}" /> 10 <link rel="shortcut icon" href="{{ pathjoin .ActionEndpoint "/assets/images/favicon.png" }}" type="image/png" /> 11 <link rel="icon" href="{{ pathjoin .ActionEndpoint "/assets/images/favicon.png" }}" type="image/png" /> 12 <link rel="stylesheet" href="{{ pathjoin .ActionEndpoint "/assets/line-awesome/line-awesome.css" }}" /> 13 <link rel="stylesheet" href="{{ pathjoin .ActionEndpoint "/assets/google-webfonts/roboto.css" }}" /> 14 <link rel="stylesheet" href="{{ pathjoin .ActionEndpoint "/assets/google-webfonts/montserrat.css" }}" /> 15 <link rel="stylesheet" href="{{ pathjoin .ActionEndpoint "/assets/css/register.css" }}" /> 16 {{ if eq .Data.ui_options.custom_css_required "yes" }} 17 <link rel="stylesheet" href="{{ pathjoin .ActionEndpoint "/assets/css/custom.css" }}" /> 18 {{ end }} 19 </head> 20 21 <body class="h-full"> 22 <div class="app-page"> 23 <div class="app-content {{ if eq .Data.view "register" }}md:max-w-2xl lg:max-w-4xl{{ end }}"> 24 <div class="app-container"> 25 <div class="logo-col-box justify-center"> 26 {{ if .LogoURL }} 27 <div> 28 <img class="logo-img" src="{{ .LogoURL }}" alt="{{ .LogoDescription }}" /> 29 </div> 30 {{ end }} 31 <div> 32 <h2 class="logo-col-txt">{{ .PageTitle }}</h2> 33 </div> 34 </div> 35 36 {{ if .Message }} 37 <div id="alerts" class="rounded-md bg-red-50 p-4"> 38 <div class="flex items-center"> 39 <div class="flex-shrink-0"><i class="las la-exclamation-triangle text-2xl text-red-600"></i></div> 40 <div class="ml-3"><p class="text-sm font-medium text-red-800">{{ .Message }}</p></div> 41 <div class="ml-auto pl-3"> 42 <div class="-mx-1.5 -my-1.5"> 43 <button type="button" onclick="hideAlert(); return false;" class="app-alert-banner"> 44 <span class="sr-only">Dismiss</span> 45 <i class="las la-times text-2xl text-red-600"></i> 46 </button> 47 </div> 48 </div> 49 </div> 50 </div> 51 {{ end }} 52 53 <div class="mt-3"> 54 {{ if eq .Data.view "register" }} 55 <form method="POST" action="{{ pathjoin .ActionEndpoint "/register" }}" class="grid grid-cols-1 gap-y-6 sm:grid-cols-2 sm:gap-x-8"> 56 {{ end }} 57 58 {{ if eq .Data.view "ack" }} 59 <form method="POST" action="{{ pathjoin .ActionEndpoint "/register/ack" .Data.registration_id }}"> 60 {{ end }} 61 62 {{ if eq .Data.view "register" }} 63 <div> 64 <label for="registrant" class="app-gen-inp-lbl">Username</label> 65 <div class="mt-1"> 66 <input id="registrant" name="registrant" type="text" 67 class="app-gen-inp-txt validate" 68 pattern="{{ .Data.username_validate_pattern }}" 69 title="{{ .Data.username_validate_title }}" 70 autocorrect="off" autocapitalize="off" autocomplete="username" spellcheck="false" 71 required 72 /> 73 </div> 74 </div> 75 <div> 76 <label for="registrant_password" class="app-gen-inp-lbl">Password</label> 77 <div class="mt-1"> 78 <input type="password" name="registrant_password" id="registrant_password" 79 class="app-gen-inp-txt validate" 80 pattern="{{ .Data.password_validate_pattern }}" 81 title="{{ .Data.password_validate_title }}" 82 autocorrect="off" autocapitalize="off" autocomplete="new-password" spellcheck="false" 83 required 84 /> 85 </div> 86 </div> 87 <div> 88 <label for="registrant_email" class="app-gen-inp-lbl">Email</label> 89 <div class="mt-1"> 90 <input id="registrant_email" name="registrant_email" type="email" autocomplete="email" 91 class="app-gen-inp-txt validate" 92 autocorrect="off" autocapitalize="off" autocomplete="email" spellcheck="false" 93 required 94 /> 95 </div> 96 </div> 97 <div> 98 <label for="first_name" class="app-gen-inp-lbl">First name</label> 99 <div class="mt-1"> 100 <input type="text" name="first_name" id="first_name" 101 class="app-gen-inp-txt" 102 autocorrect="off" autocapitalize="off" autocomplete="given-name" spellcheck="false" 103 /> 104 </div> 105 </div> 106 <div> 107 <label for="last_name" class="app-gen-inp-lbl">Last name</label> 108 <div class="mt-1"> 109 <input type="text" name="last_name" id="last_name" 110 class="app-gen-inp-txt" 111 autocorrect="off" autocapitalize="off" autocomplete="family-name" spellcheck="false" 112 /> 113 </div> 114 </div> 115 116 {{ if .Data.require_registration_code }} 117 <div> 118 <label for="registrant_code" class="app-gen-inp-lbl">Registration Code</label> 119 <div class="mt-1"> 120 <input type="text" id="registrant_code" name="registrant_code" 121 class="app-gen-inp-txt validate" 122 autocorrect="off" autocapitalize="off" autocomplete="off" spellcheck="false" 123 /> 124 </div> 125 </div> 126 {{ end }} 127 128 {{ if .Data.require_accept_terms }} 129 <div class="sm:col-span-2"> 130 <div class="flex items-start"> 131 <div class="flex-shrink-0"> 132 <input id="accept_terms" name="accept_terms" type="checkbox" 133 aria-describedby="comments-description" 134 class="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded" 135 required 136 /> 137 </div> 138 <div class="ml-3"> 139 <p class="text-base text-gray-500"> 140 By selecting this, you agree to the 141 <a href="{{ .Data.terms_conditions_link }}" target="_blank" class="font-medium text-gray-700 underline">Terms and Conditions</a> 142 and 143 <a href="{{ .Data.privacy_policy_link }}" target="_blank" class="font-medium text-gray-700 underline">Privacy Policy</a>. 144 </p> 145 </div> 146 </div> 147 </div> 148 {{ end }} 149 {{ end }} 150 151 {{ if eq .Data.view "registered" }} 152 <div class="app-txt-section"> 153 <p>Thank you for registering and we hope you enjoy the experience!</p> 154 <p>Here are a few things to keep in mind:</p> 155 <ol class="list-decimal pl-8"> 156 <li>You should receive your confirmation email within the next 15 minutes.</li> 157 <li>If you still don't see it, please email support so we can resend it to you.</li> 158 </ol> 159 </div> 160 {{ end }} 161 162 {{ if eq .Data.view "ack" }} 163 <div class="pb-4"> 164 <label for="registration_code" class="app-inp-lbl">Passcode</label> 165 <div class="app-inp-box"> 166 <input id="registration_code" name="registration_code" type="text" 167 class="font-['Montserrat'] app-inp-code-txt validate" 168 pattern="[A-Za-z0-9]{6,8}" maxlength="8" 169 title="The registration code should be 6-8 characters long." 170 autocorrect="off" autocapitalize="off" spellcheck="false" autocomplete="off" 171 required /> 172 </div> 173 </div> 174 {{ end }} 175 176 {{ if eq .Data.view "ackfail" }} 177 <div class="app-txt-section"> 178 <p>Unfortunately, things did not go as expected. {{ .Data.message }}.</p> 179 </div> 180 {{ end }} 181 182 {{ if eq .Data.view "acked" }} 183 184 <div class="app-txt-section"> 185 <p>Thank you for confirming your registration and validating your email address!</p> 186 <p>At this point, once an administrator approves or disapproves your registration, 187 you will get an email about that decision. If approved, you will be able to login with your 188 credentials right away. 189 </p> 190 </div> 191 {{ end }} 192 193 <div class="sm:col-span-2"> 194 <div class="flex gap-4 justify-end"> 195 {{ if eq .Data.view "register" }} 196 <a href="{{ .ActionEndpoint }}"> 197 <button type="button" name="portal" class="app-btn-sec"> 198 <div><i class="las la-home"></i></div> 199 <div class="pl-1 pr-2"><span>Home</span></div> 200 </button> 201 </a> 202 <button type="reset" name="reset" class="app-btn-sec"> 203 <div><i class="las la-redo-alt"></i></i></div> 204 <div class="pl-1 pr-2"><span>Clear</span></div> 205 </button> 206 <button type="submit" name="submit" class="app-btn-pri"> 207 <div><i class="las la-check"></i></div> 208 <div class="pl-1 pr-2"><span>Submit</span></div> 209 </button> 210 {{ end }} 211 212 {{ if and (ne .Data.view "register") (ne .Data.view "ack") }} 213 <a href="{{ .ActionEndpoint }}"> 214 <button type="button" name="portal" class="app-btn-sec"> 215 <div><i class="las la-home"></i></div> 216 <div class="pl-1 pr-2"><span>Home</span></div> 217 </button> 218 </a> 219 {{ end }} 220 221 {{ if eq .Data.view "ack" }} 222 <a href="{{ .ActionEndpoint }}"> 223 <button type="button" name="portal" class="app-btn-sec"> 224 <div><i class="las la-home"></i></div> 225 </button> 226 </a> 227 <button type="reset" name="reset" class="app-btn-sec"> 228 <div><i class="las la-redo-alt"></i></i></div> 229 <div class="pl-1 pr-2"><span>Clear</span></div> 230 </button> 231 <button type="submit" name="submit" class="app-btn-pri"> 232 <div><i class="las la-check"></i></div> 233 <div class="pl-1 pr-2"><span>Submit</span></div> 234 </button> 235 {{ end }} 236 </div> 237 </div> 238 239 {{ if or (eq .Data.view "register") (eq .Data.view "ack") }} 240 </form> 241 {{ end }} 242 243 </div> 244 </div> 245 </div> 246 </div> 247 <!-- JavaScript --> 248 <script src="{{ pathjoin .ActionEndpoint "/assets/js/register.js" }}"></script> 249 {{ if eq .Data.ui_options.custom_js_required "yes" }} 250 <script src="{{ pathjoin .ActionEndpoint "/assets/js/custom.js" }}"></script> 251 {{ end }} 252 {{ if .Message }} 253 <script> 254 function hideAlert() { 255 document.getElementById("alerts").remove(); 256 } 257 </script> 258 {{ end }} 259 </body> 260 </html>