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 div.accordion#accordion(role="tablist" aria-multiselectable="true") {
17 div.card-header#step-1-heading(role="tab") {
18 a.h5(data-toggle="collapse" data-parent="#accordion" href="#step-1-collapse" aria-expanded="true" aria-controls="step-1-collapse") {
22 div#step-1-collapse.collapse.show(role="tabpanel" aria-labelledby="step-1-heading" data-parent="#accordion") {
27 label.form-label(for="given-names") {'Given names *'}
28 input.form-control#given-names(type="text" placeholder="Your given names" required="required" maxlength=256) {}
33 label.form-label(for="family-name") {'Family name'}
34 input.form-control#family-name(type="text" placeholder="Your family name" maxlength=256) {}
41 label.form-label(for="email") {'Email *'}
42 input.form-control#email(type="email" placeholder="Your email address" required="required" maxlength=256) {}
47 label.form-label(for="password") {'Password *'}
48 input.form-control#password(type="password" placeholder="New password" required="required" minlength=8 maxlength=256) {}
54 div.custom-control.custom-checkbox {
55 input.custom-control-input#contact-me(type="checkbox" checked="checked") {}
57 label.custom-control-label(for="contact-me") {
58 'Contact me by email with updates and special offers'
63 div.row.align-items-center {
66 label.form-label(for="verification-code") {'Verification code *'}
67 input.form-control#verification-code(type="text" placeholder="Type the code shown to the right" required="required" minlength=6 maxlength=6) {}
71 img#verification-image(src="/api/verification_image.png?seq=0" width=300 height=150) {}
73 div.'col-md-2'.my-auto.text-center {
74 input.btn.btn-outline-secondary#'new-code'(type="button" value="New code") {}
78 p.mt-3 {'Note: If your name is one word or does not fit given names/family name pattern, then please enter given names only. Your given names are visible to other users if you comment on our blog. Your email and family name remain private.'}
80 input.btn.btn-success#step-1-continue(type="button" value="Continue") {}
85 div.card-header#step-2-heading(role="tab") {
86 a.h5.collapsed(data-toggle="collapse" data-parent="#accordion" href="#step-2-collapse" aria-expanded="false" aria-controls="step-2-collapse") {
90 div#step-2-collapse.collapse(role="tabpanel" aria-labelledby="step-2-heading" data-parent="#accordion") {
92 p#step-2-message {'Please enter your details first.'}
94 input.btn.btn-outline-secondary#step-2-back(type="button" value="Back") {}
99 div.card-header#step-3-heading(role="tab") {
100 a.h5.collapsed(data-toggle="collapse" data-parent="#accordion" href="#step-3-collapse" aria-expanded="false" aria-controls="step-3-collapse") {
101 'Send verification email'
104 div#step-3-collapse.collapse(role="tabpanel" aria-labelledby="step-3-heading" data-parent="#accordion") {
106 p#step-3-message {'Please create your account first.'}
108 input.btn.btn-outline-secondary#step-3-back(type="button" value="Back") {}
114 p.mt-2 {'* These fields are required.'}
118 script(src="/api/sign_up.js") {}
123 $('#step-1-continue').click(
126 document.getElementById('given-names').reportValidity() &&
127 document.getElementById('family-name').reportValidity() &&
128 document.getElementById('email').reportValidity() &&
129 document.getElementById('password').reportValidity() &&
130 document.getElementById('verification-code').reportValidity()
134 document.getElementById('email').value,
135 document.getElementById('verification-code').value
136 document.getElementById('given-names').value,
137 document.getElementById('family-name').value,
138 document.getElementById('password').value
142 $('#step-2-message').text(e.message)
143 $('#step-2-collapse').collapse('show')
146 $('#step-2-message').text(`Your account with email "${document.getElementById('email').value}" has been created.`)
147 $('#step-2-collapse').collapse('show')
152 $('#step-2-back').click(
153 () => {$('#step-1-collapse').collapse('show')}
156 $('#step-3-back').click(
157 () => {$('#step-2-collapse').collapse('show')}
162 $('#new-code').click(
164 document.getElementById('verification-image').src = `/api/verification_image.png?seq=${image_seq}`