From 1e216302b891f10d1c1960c9fe7cc4f858d9477a Mon Sep 17 00:00:00 2001 From: Nick Downing Date: Wed, 26 Jan 2022 13:13:37 +1100 Subject: [PATCH] Update /my_account/send_verification_email/index.html.jst to latest way, no accordion and now an inline form (need to improve label spacing when collapsed) --- .../send_email_verification_link.json.jst | 0 .../send_verification_email/index.html.jst | 256 +++++++++--------- my_account/sign_up/index.html.jst | 2 +- 3 files changed, 135 insertions(+), 123 deletions(-) rename api/account/{sign_up => }/send_email_verification_link.json.jst (100%) diff --git a/api/account/sign_up/send_email_verification_link.json.jst b/api/account/send_email_verification_link.json.jst similarity index 100% rename from api/account/sign_up/send_email_verification_link.json.jst rename to api/account/send_email_verification_link.json.jst diff --git a/my_account/send_verification_email/index.html.jst b/my_account/send_verification_email/index.html.jst index c9fe99b..b55ecce 100644 --- a/my_account/send_verification_email/index.html.jst +++ b/my_account/send_verification_email/index.html.jst @@ -1,16 +1,36 @@ return async env => { let breadcrumbs = await _require('/_lib/breadcrumbs.jst') + let fa_envelope = await env.site.get_min_svg('/_svg/fa_envelope.svg') + let get_placeholder = await _require('/_lib/get_placeholder.jst') + let get_session = await _require('/_lib/get_session.jst') let icon_cross = await env.site.get_min_svg('/_svg/icon_cross.svg') let icon_tick = await env.site.get_min_svg('/_svg/icon_tick.svg') let navbar = await _require('/_lib/navbar.jst') - // preload draft details if any - let details = {} - if (Object.prototype.hasOwnProperty.call(env.parsed_url.query, 'email')) - details.email = decodeURIComponent(env.parsed_url.query.email) - console.log('details', JSON.stringify(details)) + // preload placeholder + let transaction = await env.site.database.Transaction() + let placeholder + try { + let root = await transaction.get({}) + let session = await get_session(env, root) + placeholder = await get_placeholder(env, session) + transaction.commit() + } + catch (error) { + transaction.rollback() + throw error + } - await navbar( + // preload URL details if any + let email = + Object.prototype.hasOwnProperty.call( + env.parsed_url.query, + 'email' + ) ? + decodeURIComponent(env.parsed_url.query.email) : + '' + + await navbar( env, // head async _out => {}, @@ -18,146 +38,138 @@ return async env => { async _out => { await breadcrumbs(env, _out) - p {'Please verify your email address before signing in. Check your email for next steps, or re-send the email verification link below.'} + p {'Your email is not yet verified. Check your email for next steps, or re-send the verification email below.'} - div.accordion#accordion.mb-5(role="tablist" aria-multiselectable="true") { - div.card#step-1 { - div.card-header#step-1-heading(role="tab") { - span#step-1-tick(style="display: none;") { - span.icon-color.pr-3 {_out.push(icon_tick)} - } - span#step-1-cross(style="display: none;") { - span.icon-color.pr-3 {_out.push(icon_cross)} - } - //span#step-1-spinner(style="display: none;") { - // span.icon-color.pr-3 { - // div.spinner-border(role="status") { - // span.sr-only {'Loading...'} - // } - // } - //} - a.h5(data-toggle="collapse" data-parent="#accordion" href="#step-1-collapse" aria-expanded="true" aria-controls="step-1-collapse") { - 'Account details' + form#form { + div.row.align-items-center { + div.col-md-1 { + label.form-label.mb-3(for="email") {'Email'} + } + div.col-md-6 { + div.form-group { + input.form-control#email(type="email" value=email placeholder=placeholder.email required="required" maxlength=256) {} + div.invalid-feedback {'Please enter your account\'s email address.'} } } - div#step-1-collapse.collapse.show(role="tabpanel" aria-labelledby="step-1-heading" data-parent="#accordion") { - div.card-body { - div.row { - div.col-md-6 { - div.form-group { - label.form-label(for="email") {'Email *'} - input.form-control#email(type="email" value=details.email || '' placeholder="Account email address" required="required" maxlength=256) {} + div.col-md-5 { + if (email.length) + button.btn.btn-success.mb-3#send-verification-email(type="button") { + div.icon24-outer.mr-2#icon { + div.icon24-inner {_out.push(fa_envelope)} + } + div.icon24-outer.mr-2#tick(hidden) { + div.icon24-inner {_out.push(icon_tick)} + } + div.icon24-outer.mr-2#cross(hidden) { + div.icon24-inner {_out.push(icon_cross)} + } + div.icon24-outer.mr-2#spinner(hidden) { + div.icon24-inner { + div.spinner-border.spinner-border-sm(role="status") {} } } + 'Send verification email' } - - button.btn.btn-success#step-1-continue(type="button") {'Continue'} - p.'mt-3'.mb-0 {'* This field is required.'} - } - } - } - div.card#step-2 { - div.card-header#step-2-heading(role="tab") { - span#step-2-tick(style="display: none;") { - span.icon-color.pr-3 {_out.push(icon_tick)} - } - span#step-2-cross(style="display: none;") { - span.icon-color.pr-3 {_out.push(icon_cross)} - } - span#step-2-spinner(style="display: none;") { - span.icon-color.pr-3 { - div.spinner-border(role="status") { - span.sr-only {'Loading...'} + else + button.btn.btn-success#send-verification-email(type="button" disabled) { + div.icon24-outer.mr-2#icon { + div.icon24-inner {_out.push(fa_envelope)} } + div.icon24-outer.mr-2#tick(hidden) { + div.icon24-inner {_out.push(icon_tick)} + } + div.icon24-outer.mr-2#cross(hidden) { + div.icon24-inner {_out.push(icon_cross)} + } + div.icon24-outer.mr-2#spinner(hidden) { + div.icon24-inner { + div.spinner-border.spinner-border-sm(role="status") {} + } + } + 'Send verification email' } - } - a.h5.collapsed(data-toggle="collapse" data-parent="#accordion" href="#step-2-collapse" aria-expanded="false" aria-controls="step-2-collapse") { - 'Send email verification link' - } - } - div#step-2-collapse.collapse(role="tabpanel" aria-labelledby="step-2-heading" data-parent="#accordion") { - div.card-body { - p#step-2-message {'Please enter account details first.'} - - button.btn.btn-outline-secondary#step-2-back(type="button") {'Back'} - button.btn.btn-outline-secondary.ml-3#step-2-resend-email(type="button") {'Re-send email'} - } } } } + + p#message(hidden) {} }, // scripts async _out => { //script(src="/js/utils.js") {} script { - let step_1 = async () => { - if (!document.getElementById('email').reportValidity()) { - $('#step-1-tick').hide() - $('#step-1-cross').show() - //$('#step-1-spinner').hide() - return false - } - $('#step-1-tick').show() - $('#step-1-cross').hide() - //$('#step-1-spinner').hide() - return true - } - - let step_2 = async () => { - $('#step-2-tick').hide() - $('#step-2-cross').hide() - $('#step-2-spinner').show() - document.getElementById('step-1').scrollIntoView() - - let email - try { - email = document.getElementById('email').value.slice(0, 256).toLowerCase() - await api_call( - '/api/account/sign_up/send_email_verification_link.json', - email - ) - } - catch (error) { - let problem = Problem.from(error) - - $('#step-2-tick').hide() - $('#step-2-cross').show() - $('#step-2-spinner').hide() - - document.getElementById('step-2-message').textContent = problem.detail - $('#step-2-collapse').collapse('show') - return false - } - $('#step-2-tick').show() - $('#step-2-cross').hide() - $('#step-2-spinner').hide() - - document.getElementById('step-2-message').textContent = `Email verification link has been sent to "${email}". Please check your email for next steps.` - return true - } - document.addEventListener( 'DOMContentLoaded', () => { - document.getElementById('step-1-continue').addEventListener( - 'click', - async () => { - if (await step_1() && await step_2()) - $('#step-2-collapse').collapse('show') - } - ) + let id_cross = document.getElementById('cross') + let id_email = document.getElementById('email') + let id_form = document.getElementById('form') + let id_icon = document.getElementById('icon') + let id_message = document.getElementById('message') + let id_send_verification_email = document.getElementById('send-verification-email') + let id_spinner = document.getElementById('spinner') + let id_tick = document.getElementById('tick') - document.getElementById('step-2-back').addEventListener( - 'click', - () => {$('#step-1-collapse').collapse('show')} - ) + let edited = () => { + id_send_verification_email.disabled = + id_email.value.length === 0 + id_icon.hidden = false + id_tick.hidden = true + id_cross.hidden = true + id_spinner.hidden = true + id_message.hidden = true + } + + id_email.addEventListener('input', edited) - document.getElementById('step-2-resend-email').addEventListener( + id_send_verification_email.addEventListener( 'click', async () => { - if (await step_2()) - $('#step-3-collapse').collapse('show') + id_icon.hidden = false + id_tick.hidden = true + id_cross.hidden = true + id_spinner.hidden = true + // the below causes an ugly flicker, so just keep the message + //id_message.hidden = true + + if (!id_form.checkValidity()) { + id_form.classList.add('was-validated'); + + id_icon.hidden = true + id_cross.hidden = false + return + } + id_form.classList.remove('was-validated'); + + let email = id_email.value.slice(0, 256).toLowerCase() + + id_icon.hidden = true + id_spinner.hidden = false + try { + await api_call( + '/api/account/send_email_verification_link.json', + email + ) + } + catch (error) { + let problem = Problem.from(error) + + id_cross.hidden = false + id_spinner.hidden = true + + id_message.textContent = problem.detail + //id_message.classList.remove('text-success') + id_message.classList.add('text-danger') + id_message.hidden = false + return + } + id_tick.hidden = false + id_spinner.hidden = true + id_message.textContent = `Email verification link has been sent to "${email}". Please check your email for next steps.` + //id_message.classList.add('text-success') + id_message.classList.remove('text-danger') + id_message.hidden = false } ) } diff --git a/my_account/sign_up/index.html.jst b/my_account/sign_up/index.html.jst index 42681e4..2cd1c0e 100644 --- a/my_account/sign_up/index.html.jst +++ b/my_account/sign_up/index.html.jst @@ -353,7 +353,7 @@ return async env => { try { await api_call( - '/api/account/sign_up/send_email_verification_link.json', + '/api/account/send_email_verification_link.json', details.email ) } -- 2.34.1