2 let breadcrumbs = await _require('/_lib/breadcrumbs.jst')
3 let icon_cross = await env.site.get_min_svg('/_svg/icon_cross.svg')
4 let icon_tick = await env.site.get_min_svg('/_svg/icon_tick.svg')
5 let navbar = await _require('/_lib/navbar.jst')
13 await breadcrumbs(env, _out)
15 p {'Signing up allows you to leave comments on our blog and receive communications from us.'}
17 div.accordion#accordion.mb-5(role="tablist" aria-multiselectable="true") {
19 div.card-header#step-1-heading(role="tab") {
20 span#step-1-tick(style="display: none;") {
21 span.icon-color.pr-3 {_out.push(icon_tick)}
23 span#step-1-cross(style="display: none;") {
24 span.icon-color.pr-3 {_out.push(icon_cross)}
26 //span#step-1-spinner(style="display: none;") {
27 // span.icon-color.pr-3 {
28 // div.spinner-border(role="status") {
29 // span.sr-only {'Loading...'}
33 a.h5(data-toggle="collapse" data-parent="#accordion" href="#step-1-collapse" aria-expanded="true" aria-controls="step-1-collapse") {
37 div#step-1-collapse.collapse.show(role="tabpanel" aria-labelledby="step-1-heading" data-parent="#accordion") {
42 label.form-label(for="given-names") {'Given names *'}
43 input.form-control#given-names(type="text" placeholder="Your given names" required="required" maxlength=256) {}
48 label.form-label(for="family-name") {'Family name'}
49 input.form-control#family-name(type="text" placeholder="Your family name" maxlength=256) {}
56 label.form-label(for="email") {'Email *'}
57 input.form-control#email(type="email" placeholder="Your email address" required="required" maxlength=256) {}
62 label.form-label(for="password") {'Password *'}
63 input.form-control#password(type="password" placeholder="New password" required="required" minlength=8 maxlength=256) {}
69 div.custom-control.custom-checkbox {
70 input.custom-control-input#contact-me(type="checkbox" checked="checked") {}
72 label.custom-control-label(for="contact-me") {
73 'Contact me by email with updates and special offers'
78 div.row.align-items-center {
81 label.form-label(for="verification-code") {'Verification code *'}
82 input.form-control#verification-code(type="text" placeholder="Type the code shown to the right" required="required" minlength=6 maxlength=6) {}
86 img#verification-image(src="/api/verification_image.png?seq=0" width=300 height=150) {}
88 div.'col-md-2'.my-auto.text-center {
89 input.btn.btn-outline-secondary#'new-code'(type="button" value="New code") {}
93 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.'}
95 input.btn.btn-success#step-1-continue(type="button" value="Continue") {}
96 p.'mt-3'.mb-0 {'* These fields are required.'}
101 div.card-header#step-2-heading(role="tab") {
102 span#step-2-tick(style="display: none;") {
103 span.icon-color.pr-3 {_out.push(icon_tick)}
105 span#step-2-cross(style="display: none;") {
106 span.icon-color.pr-3 {_out.push(icon_cross)}
108 span#step-2-spinner(style="display: none;") {
109 span.icon-color.pr-3 {
110 div.spinner-border(role="status") {
111 span.sr-only {'Loading...'}
115 a.h5.collapsed(data-toggle="collapse" data-parent="#accordion" href="#step-2-collapse" aria-expanded="false" aria-controls="step-2-collapse") {
119 div#step-2-collapse.collapse(role="tabpanel" aria-labelledby="step-2-heading" data-parent="#accordion") {
121 p#step-2-message {'Please enter your details first.'}
123 input.btn.btn-outline-secondary#step-2-back(type="button" value="Back") {}
128 div.card-header#step-3-heading(role="tab") {
129 span#step-3-tick(style="display: none;") {
130 span.icon-color.pr-3 {_out.push(icon_tick)}
132 span#step-3-cross(style="display: none;") {
133 span.icon-color.pr-3 {_out.push(icon_cross)}
135 span#step-3-spinner(style="display: none;") {
136 span.icon-color.pr-3 {
137 div.spinner-border(role="status") {
138 span.sr-only {'Loading...'}
142 a.h5.collapsed(data-toggle="collapse" data-parent="#accordion" href="#step-3-collapse" aria-expanded="false" aria-controls="step-3-collapse") {
143 'Send verification email'
146 div#step-3-collapse.collapse(role="tabpanel" aria-labelledby="step-3-heading" data-parent="#accordion") {
148 p#step-3-message {'Please create your account first.'}
150 input.btn.btn-outline-secondary#step-3-back(type="button" value="Back") {}
158 script(src="/js/api_call.js") {}
161 let sign_up_create_account = async (...arguments) => api_call(
162 '/api/sign_up/create_account.json',
168 $('#step-1-continue').click(
171 !document.getElementById('given-names').reportValidity() ||
172 !document.getElementById('family-name').reportValidity() ||
173 !document.getElementById('email').reportValidity() ||
174 !document.getElementById('password').reportValidity() ||
175 !document.getElementById('verification-code').reportValidity()
177 $('#step-1-tick').hide()
178 $('#step-1-cross').show()
179 //$('#step-1-spinner').hide()
182 $('#step-1-tick').show()
183 $('#step-1-cross').hide()
184 //$('#step-1-spinner').hide()
186 $('#step-2-tick').hide()
187 $('#step-2-cross').hide()
188 $('#step-2-spinner').show()
190 await sign_up_create_account(
192 document.getElementById('verification-code').value,
195 email: document.getElementById('email').value,
196 given_names: document.getElementById('given-names').value,
197 family_name: document.getElementById('family-name').value,
198 password: document.getElementById('password').value,
199 contact_me: document.getElementById('contact-me').value
204 $('#step-2-tick').hide()
205 $('#step-2-cross').show()
206 $('#step-2-spinner').hide()
208 $('#step-2-message').text(e.message)
209 $('#step-2-collapse').collapse('show')
212 $('#step-2-tick').show()
213 $('#step-2-cross').hide()
214 $('#step-2-spinner').hide()
216 $('#step-2-message').text(`Your account with email "${document.getElementById('email').value}" has been created.`)
217 $('#step-2-collapse').collapse('show')
221 $('#step-2-back').click(
222 () => {$('#step-1-collapse').collapse('show')}
225 $('#step-3-back').click(
226 () => {$('#step-2-collapse').collapse('show')}
230 $('#new-code').click(
232 document.getElementById('verification-image').src = `/api/verification_image.png?seq=${image_seq}`