2 let breadcrumbs = await _require('/breadcrumbs.jst')
3 let navbar = await _require('/navbar.jst')
11 await breadcrumbs(env, _out)
13 p {'Signing up allows you to leave comments on our blog and receive communications from us.'}
15 p {'Note: If your name is one word or does not fit given names/family name pattern, then please enter given names only. We will address you by your given names. Your given names will be visible to other users if you comment on our blog. Your email and family name will remain private.'}
20 label(for="given-names") {'Given names *'}
21 input.form-control#given-names(type="text" placeholder="Your given names" required="required" maxlength=256) {}
26 label(for="family-name") {'Family name'}
27 input.form-control#family-name(type="text" placeholder="Your family name" maxlength=256) {}
34 label(for="email") {'Email *'}
35 input.form-control#email(type="email" placeholder="Your email address" required="required" maxlength=256) {}
40 label(for="password") {'Password *'}
41 input.form-control#password(type="password" placeholder="New password" required="required" minlength=8 maxlength=256) {}
48 input.form-check-input#contact-me(type="checkbox" checked="checked") {}
50 label.form-check-label(for="contact-me") {
51 'Contact me by email with updates and special offers'
56 div.row.align-items-center {
59 label(for="verification-code") {'Verification code *'}
60 input.form-control#verification-code(type="text" placeholder="Type the code shown to the right" required="required" minlength=6 maxlength=6) {}
64 img#verification-image(src="/api/verification_image.png?seq=0" width=300 height=150) {}
66 div.'col-md-3'.my-auto.text-center {
67 input.btn.btn-outline-secondary#'generate-new-code'(type="button" value="Generate new code") {}
72 input.btn.btn-success#submit(type="button" value="Create account") {}
75 p.mt-2 {'* These fields are required.'}
78 div#message-modal.modal.fade(role="dialog") {
82 span.h5.modal-title {'Message'}
84 div#message-modal-message.modal-body {
87 button.btn.btn-outline-secondary(type="button" data-dismiss="modal") {
97 script(src="/api/sign_up.js") {}
105 document.getElementById('given-names').reportValidity() &&
106 document.getElementById('family-name').reportValidity() &&
107 document.getElementById('email').reportValidity() &&
108 document.getElementById('password').reportValidity() &&
109 document.getElementById('verification').reportValidity()
113 document.getElementById('email').value,
114 document.getElementById('verification').value
115 document.getElementById('given-names').value,
116 document.getElementById('family-name').value,
117 document.getElementById('password').value
121 $('#message-modal-message').text(e.message)
122 $('#message-modal').modal('show')
125 $('#message-modal-message').text(`Your account with email "${document.getElementById('email').value}" has been created.`)
126 $('#message-modal').modal('show')
132 $('#generate-new-code').click(
134 document.getElementById('verification-image').src = `/api/verification_image.png?seq=${image_seq}`