register.html 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <pstm-uri>/register</pstm-uri>
  5. <pstm-template>main</pstm-template>
  6. <script>
  7. // Surface error notifications inline instead of via alert().
  8. if (window.statum) {
  9. statum.onNotifyHandler = function (kind, message) {
  10. var area = document.getElementById('register-error');
  11. if (kind === 'error' && area) {
  12. area.hidden = false;
  13. area.textContent = message;
  14. return;
  15. }
  16. window.alert(message);
  17. };
  18. }
  19. </script>
  20. </head>
  21. <body>
  22. <section>
  23. <h2>Create an account</h2>
  24. <p id="register-error" class="error" hidden></p>
  25. <form stm-action="page.register">
  26. <div class="form-row">
  27. <label for="register-username">Username</label>
  28. <input id="register-username" name="username" required autocomplete="username">
  29. </div>
  30. <div class="form-row">
  31. <label for="register-email">Email</label>
  32. <input id="register-email" type="email" name="email" required autocomplete="email">
  33. </div>
  34. <div class="form-row">
  35. <label for="register-forename">First name</label>
  36. <input id="register-forename" name="forename" required autocomplete="given-name">
  37. </div>
  38. <div class="form-row">
  39. <label for="register-surname">Last name</label>
  40. <input id="register-surname" name="surname" required autocomplete="family-name">
  41. </div>
  42. <div class="form-row">
  43. <label for="register-date-of-birth">Date of birth</label>
  44. <input id="register-date-of-birth" type="date" name="date_of_birth" required autocomplete="bday">
  45. </div>
  46. <div class="form-row">
  47. <label for="register-password">Password</label>
  48. <input id="register-password" type="password" name="password" required autocomplete="new-password">
  49. </div>
  50. <div class="form-row">
  51. <label for="register-confirm-password">Confirm password</label>
  52. <input id="register-confirm-password" type="password" name="confirm_password" required autocomplete="new-password">
  53. </div>
  54. <button type="submit">Create account</button>
  55. </form>
  56. <p>Already registered? <a href="/login">Log in</a>.</p>
  57. </section>
  58. </body>
  59. </html>