From 44a91fb2c48e773347336e3aac394280eb30a05f Mon Sep 17 00:00:00 2001 From: Nick Downing Date: Wed, 26 Jan 2022 12:46:05 +1100 Subject: [PATCH] Update /my_account/verify_password/index.html.jst to latest way, no accordion --- my_account/verify_password/index.html.jst | 283 ++++++++++++---------- 1 file changed, 149 insertions(+), 134 deletions(-) diff --git a/my_account/verify_password/index.html.jst b/my_account/verify_password/index.html.jst index a7c9925..9615cfd 100644 --- a/my_account/verify_password/index.html.jst +++ b/my_account/verify_password/index.html.jst @@ -1,24 +1,43 @@ return async env => { let breadcrumbs = await _require('/_lib/breadcrumbs.jst') + let fa_user_check = await env.site.get_min_svg('/_svg/fa_user-check.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) - if ( - Object.prototype.hasOwnProperty.call( + // 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 + } + + // preload URL details if any + let email = + Object.prototype.hasOwnProperty.call( + env.parsed_url.query, + 'email' + ) ? + decodeURIComponent(env.parsed_url.query.email) : + '' + let link_code = + Object.prototype.hasOwnProperty.call( env.parsed_url.query, 'link_code' - ) - ) - details.link_code = - decodeURIComponent(env.parsed_url.query.link_code) - console.log('details', JSON.stringify(details)) + ) ? + decodeURIComponent(env.parsed_url.query.link_code) : + '' - await navbar( + await navbar( env, // head async _out => {}, @@ -28,152 +47,148 @@ return async env => { p {'You will need to verify your new password via an emailed link before you can use it to sign in to your account.'} - 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)} + form#form { + div.row { + div.col-md-6 { + div.form-group { + label.form-label(for="email") {'Email *'} + 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.'} } - //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") { - 'Link details' + } + div.col-md-6 { + div.form-group { + label.form-label(for="link-code") {'Link code *'} + input.form-control#link-code(type="text" value=link_code placeholder="00000000000000000000000000000000" required="required" minlength=32 maxlength=32) {} + div.invalid-feedback {'Please enter the 32-character code from the link we have emailed to you.'} } } - 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-6 { - div.form-group { - label.form-label(for="link-code") {'Link code *'} - input.form-control#link-code(type="text" value=details.link_code || '' placeholder="Type the code from the email link" required="required" minlength=32 maxlength=32) {} - } - } - } + } + } - button.btn.btn-success#step-1-continue(type="button") {'Continue'} - p.'mt-3'.mb-0 {'* These fields are required.'} + if (email.length || details.length) + button.btn.btn-success#verify-password(type="button") { + div.icon24-outer.mr-2#icon { + div.icon24-inner {_out.push(fa_user_check)} + } + 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") {} } } + 'Verify password' } - 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...'} - } - } - } - a.h5.collapsed(data-toggle="collapse" data-parent="#accordion" href="#step-2-collapse" aria-expanded="false" aria-controls="step-2-collapse") { - 'Verify password' - } + else + button.btn.btn-success#verify-password(type="button" disabled) { + div.icon24-outer.mr-2#icon { + div.icon24-inner {_out.push(fa_user_check)} } - div#step-2-collapse.collapse(role="tabpanel" aria-labelledby="step-2-heading" data-parent="#accordion") { - div.card-body { - p#step-2-message {'Please enter link details first.'} - - button.btn.btn-outline-secondary#step-2-back(type="button") {'Back'} - button.btn.btn-outline-secondary.ml-2#step-2-sign-in(type="button") {'Sign in'} + 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") {} } } + 'Verify password' } - } + + p.'mt-3'.mb-0#message(hidden) {} + + p.text-muted.mt-3 {'* These fields are required.'} }, // scripts async _out => { //script(src="/js/utils.js") {} script { - let step_1 = async () => { - if ( - !document.getElementById('email').reportValidity() || - !document.getElementById('link-code').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/verify_password.json', - email, - document.getElementById('link-code').value.slice(0, 32).toLowerCase() - ) - } - 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 = `New password for "${email}" has been verified. You can now sign in.` - return true - } - document.addEventListener( 'DOMContentLoaded', () => { - document.getElementById('step-1-continue').addEventListener( + 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_link_code = document.getElementById('link-code') + let id_message = document.getElementById('message') + let id_spinner = document.getElementById('spinner') + let id_tick = document.getElementById('tick') + let id_verify_password = document.getElementById('verify-password') + + let edited = () => { + id_verify_password.disabled = + id_email.value.length === 0 && + id_link_code.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) + id_link_code.addEventListener('input', edited) + + id_verify_password.addEventListener( 'click', async () => { - if (await step_1() && await step_2()) - $('#step-2-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 - document.getElementById('step-2-back').addEventListener( - 'click', - () => {$('#step-1-collapse').collapse('show')} - ) + if (!id_form.checkValidity()) { + id_form.classList.add('was-validated'); - document.getElementById('step-2-sign-in').addEventListener( - 'click', - () => {document.getElementById('sign-in').click()} + id_icon.hidden = true + id_cross.hidden = false + return + } + id_form.classList.remove('was-validated'); + + let email = id_email.value.slice(0, 256).toLowerCase() + let link_code = id_link_code.value.slice(0, 32) + + id_icon.hidden = true + id_spinner.hidden = false + try { + await api_call( + '/api/account/verify_password.json', + email, + link_code + ) + } + 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 = `New password for "${email}" has been verified. You can now sign in.` + //id_message.classList.add('text-success') + id_message.classList.remove('text-danger') + id_message.hidden = false + } ) } ) -- 2.34.1