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(for="contact-me") {
51 'Contact me by email with updates and special offers'
57 div.'col-md-6'.vcenter {
59 label(for="verification") {'Verification *'}
60 input.form-control#verification(type="text" placeholder="Type the verification code shown to the right" required="required" minlength=6 maxlength=6) {}
63 div.'col-md-3'.vcenter {
64 img#verification-image(src="/api/verification_image.png" width=300 height=150) {}
66 div.'col-md-3'.vcenter.text-center {
67 input.btn.btn-default#'generate-new-code'(type="button" value="Generate new code") {}
72 input.btn.btn-success#submit(type="button" value="Create account") {}
75 p {} // fix this later
78 'These fields are required.'
82 div#message-modal.modal.fade(role="dialog") {
86 //button.close(type="button" data-dismiss="modal") {
89 h5.modal-title {'Message'}
91 div#message-modal-message.modal-body {
94 button.btn.btn-default(type="button" data-dismiss="modal") {
104 script(src="/api/sign_up.js") {}
112 document.getElementById('given-names').reportValidity() &&
113 document.getElementById('family-name').reportValidity() &&
114 document.getElementById('email').reportValidity() &&
115 document.getElementById('password').reportValidity() &&
116 document.getElementById('verification').reportValidity()
120 document.getElementById('email').value,
121 document.getElementById('verification').value
122 document.getElementById('given-names').value,
123 document.getElementById('family-name').value,
124 document.getElementById('password').value
128 $('#message-modal-message').text(e.message)
129 $('#message-modal').modal('show')
132 $('#message-modal-message').text(`Your account with email "${document.getElementById('email').value}" has been created.`)
133 $('#message-modal').modal('show')
139 $('#generate-new-code').click(
141 document.getElementById('verification-image').src = `/api/verification_image.png?seq=${image_seq}`