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')
6 let session_cookie = await _require('/_lib/session_cookie.jst')
8 // preload draft details if any
10 if (Object.prototype.hasOwnProperty.call(env.parsed_url.query, 'email'))
11 details.email = decodeURIComponent(env.parsed_url.query.email)
12 console.log('details', JSON.stringify(details))
20 await breadcrumbs(env, _out)
22 p {'Please verify your email address before signing in. Check your email for next steps, or re-send the email verification link below.'}
24 div.accordion#accordion.mb-5(role="tablist" aria-multiselectable="true") {
26 div.card-header#step-1-heading(role="tab") {
27 span#step-1-tick(style="display: none;") {
28 span.icon-color.pr-3 {_out.push(icon_tick)}
30 span#step-1-cross(style="display: none;") {
31 span.icon-color.pr-3 {_out.push(icon_cross)}
33 //span#step-1-spinner(style="display: none;") {
34 // span.icon-color.pr-3 {
35 // div.spinner-border(role="status") {
36 // span.sr-only {'Loading...'}
40 a.h5(data-toggle="collapse" data-parent="#accordion" href="#step-1-collapse" aria-expanded="true" aria-controls="step-1-collapse") {
44 div#step-1-collapse.collapse.show(role="tabpanel" aria-labelledby="step-1-heading" data-parent="#accordion") {
49 label.form-label(for="email") {'Email *'}
50 input.form-control#email(type="email" value=details.email || '' placeholder="Account email address" required="required" maxlength=256) {}
55 button.btn.btn-success#step-1-continue(type="button") {'Continue'}
56 p.'mt-3'.mb-0 {'* This field is required.'}
61 div.card-header#step-2-heading(role="tab") {
62 span#step-2-tick(style="display: none;") {
63 span.icon-color.pr-3 {_out.push(icon_tick)}
65 span#step-2-cross(style="display: none;") {
66 span.icon-color.pr-3 {_out.push(icon_cross)}
68 span#step-2-spinner(style="display: none;") {
69 span.icon-color.pr-3 {
70 div.spinner-border(role="status") {
71 span.sr-only {'Loading...'}
75 a.h5.collapsed(data-toggle="collapse" data-parent="#accordion" href="#step-2-collapse" aria-expanded="false" aria-controls="step-2-collapse") {
76 'Send email verification link'
79 div#step-2-collapse.collapse(role="tabpanel" aria-labelledby="step-2-heading" data-parent="#accordion") {
81 p#step-2-message {'Please enter account details first.'}
83 button.btn.btn-outline-secondary#step-2-back(type="button") {'Back'}
84 button.btn.btn-outline-secondary.ml-3#step-2-resend-email(type="button") {'Re-send email'}
92 //script(src="/js/api_call.js") {}
95 let api_account_sign_up_send_email_verification_link = async (...args) => api_call(
96 '/api/account/sign_up/send_email_verification_link.json',
100 let step_1 = async () => {
101 if (!document.getElementById('email').reportValidity()) {
102 $('#step-1-tick').hide()
103 $('#step-1-cross').show()
104 //$('#step-1-spinner').hide()
107 $('#step-1-tick').show()
108 $('#step-1-cross').hide()
109 //$('#step-1-spinner').hide()
113 let step_2 = async () => {
114 $('#step-2-tick').hide()
115 $('#step-2-cross').hide()
116 $('#step-2-spinner').show()
117 document.getElementById('step-1').scrollIntoView()
121 email = document.getElementById('email').value.slice(0, 256).toLowerCase()
122 await api_account_sign_up_send_email_verification_link(email)
126 error instanceof Problem ?
132 (error.stack || error.message).toString()
137 $('#step-2-tick').hide()
138 $('#step-2-cross').show()
139 $('#step-2-spinner').hide()
141 document.getElementById('step-2-message').textContent = problem.detail
142 $('#step-2-collapse').collapse('show')
145 $('#step-2-tick').show()
146 $('#step-2-cross').hide()
147 $('#step-2-spinner').hide()
149 document.getElementById('step-2-message').textContent = `Email verification link has been sent to "${email}". Please check your email for next steps.`
153 document.addEventListener(
156 document.getElementById('step-1-continue').addEventListener(
159 if (await step_1() && await step_2())
160 $('#step-2-collapse').collapse('show')
164 document.getElementById('step-2-back').addEventListener(
166 () => {$('#step-1-collapse').collapse('show')}
169 document.getElementById('step-2-resend-email').addEventListener(
173 $('#step-3-collapse').collapse('show')