register.html (2351B)
1 <div class="auth-page"> 2 <h2>Register</h2> 3 4 {% match error %} 5 {% when Some with (err) %} 6 <div class="error-message">{{ err }}</div> 7 {% when None %} 8 {% endmatch %} 9 10 <validation-enhancer> 11 <form method="post" action="/register" class="auth-form"> 12 <div class="form-group"> 13 <label for="username">Username</label> 14 <input type="text" id="username" name="username" value="{{ username }}" required minlength="2" maxlength="30" pattern="[a-zA-Z0-9_]+" autocomplete="username" aria-errormessage="username-error" validation-valueMissing="Username is required" validation-tooShort="Username must be at least 2 characters" validation-patternMismatch="Letters, numbers, and underscores only" /> 15 <small>2-30 characters, letters, numbers, and underscores only</small> 16 <div id="username-error" class="field-error"></div> 17 </div> 18 19 <div class="form-group"> 20 <label for="email">Email</label> 21 <input type="email" id="email" name="email" value="{{ email }}" required autocomplete="email" aria-errormessage="email-error" validation-valueMissing="Email is required" validation-typeMismatch="Please enter a valid email address" /> 22 <div id="email-error" class="field-error"></div> 23 </div> 24 25 <div class="form-group"> 26 <label for="password">Password</label> 27 <input type="password" id="password" name="password" required minlength="8" autocomplete="new-password" aria-errormessage="password-error" validation-valueMissing="Password is required" validation-tooShort="Password must be at least 8 characters" /> 28 <div id="password-error" class="field-error"></div> 29 </div> 30 31 <div class="form-group"> 32 <label for="password_confirm">Confirm Password</label> 33 <input type="password" id="password_confirm" name="password_confirm" required minlength="8" autocomplete="new-password" aria-errormessage="password-confirm-error" validation-valueMissing="Please confirm your password" validation-tooShort="Password must be at least 8 characters" /> 34 <div id="password-confirm-error" class="field-error"></div> 35 </div> 36 37 <div class="form-actions"> 38 <button type="submit">Register</button> 39 </div> 40 </form> 41 </validation-enhancer> 42 43 <p class="auth-link">Already have an account? <a href="/login">Login</a></p> 44 </div>