From 6def1e111ec26b6a520b75f140dc3826f537ab6f Mon Sep 17 00:00:00 2001 From: Nick Downing Date: Tue, 25 Jan 2022 13:00:14 +1100 Subject: [PATCH] Disable the "Create account" button and null draft when sign up form is blank --- api/account/sign_up/get_draft.json.jst | 16 ++---- my_account/sign_up/index.html.jst | 70 +++++++++++++++++--------- 2 files changed, 49 insertions(+), 37 deletions(-) diff --git a/api/account/sign_up/get_draft.json.jst b/api/account/sign_up/get_draft.json.jst index 829cbe3..cf696b8 100644 --- a/api/account/sign_up/get_draft.json.jst +++ b/api/account/sign_up/get_draft.json.jst @@ -15,18 +15,10 @@ return async env => { let root = await transaction.get({}) let session = await get_session(env, root) - let sign_up_draft = await session.get('sign_up_draft') - return ( - sign_up_draft !== undefined && - XDate.now() < await sign_up_draft.get_json('expires') ? - { - email: await sign_up_draft.get_json('email'), - given_names: await sign_up_draft.get_json('given_names'), - family_name: await sign_up_draft.get_json('family_name'), - contact_me: await sign_up_draft.get_json('contact_me') - } : - null - ) + let sign_up_draft = await session.get_json('sign_up_draft') + if (sign_up_draft === undefined || env.now >= sign_up_draft.expires) + sign_up_draft = null + return sign_up_draft } finally { transaction.rollback() diff --git a/my_account/sign_up/index.html.jst b/my_account/sign_up/index.html.jst index 6d6206c..a7415f1 100644 --- a/my_account/sign_up/index.html.jst +++ b/my_account/sign_up/index.html.jst @@ -13,10 +13,12 @@ return async env => { try { let root = await transaction.get({}) let session = await get_session(env, root) + placeholder = await get_placeholder(env, session) + sign_up_draft = await session.get_json('sign_up_draft') if (sign_up_draft === undefined || env.now >= sign_up_draft.expires) - sign_up_draft = {} + sign_up_draft = null transaction.commit() } catch (error) { @@ -63,14 +65,14 @@ return async env => { div.col-md-6 { div.form-group { label.form-label(for="given-names") {'Given names *'} - input.form-control#given-names(type="text" value=sign_up_draft.given_names || '' placeholder=placeholder.given_names required maxlength=256) {} + input.form-control#given-names(type="text" value=sign_up_draft !== null ? sign_up_draft.given_names : '' placeholder=placeholder.given_names required maxlength=256) {} div.invalid-feedback {'Please enter a name we can address you by.'} } } div.col-md-6 { div.form-group { label.form-label(for="family-name") {'Family name'} - input.form-control#family-name(type="text" value=sign_up_draft.family_name || '' placeholder=placeholder.family_name maxlength=256) {} + input.form-control#family-name(type="text" value=sign_up_draft !== null ? sign_up_draft.family_name : '' placeholder=placeholder.family_name maxlength=256) {} } } } @@ -78,7 +80,7 @@ return async env => { div.col-md-6 { div.form-group { label.form-label(for="email") {'Email *'} - input.form-control#email(type="email" value=sign_up_draft.email || '' placeholder=placeholder.email required maxlength=256) {} + input.form-control#email(type="email" value=sign_up_draft !== null ? sign_up_draft.email : '' placeholder=placeholder.email required maxlength=256) {} div.invalid-feedback {'Please enter an email address we can contact you on.'} } } @@ -93,7 +95,7 @@ return async env => { div.row { div.col-md-12 { div.custom-control.custom-checkbox { - if (sign_up_draft.contact_me !== false) + if (sign_up_draft === null || sign_up_draft.contact_me) input.custom-control-input#contact-me(type="checkbox" checked) {} else input.custom-control-input#contact-me(type="checkbox") {} @@ -119,7 +121,10 @@ return async env => { } button.btn.btn-outline-secondary#'card-1-new-code'(type="button") {'New code'} - button.btn.btn-success.ml-3#card-1-create-account(type="button") {'Create account'} + if (sign_up_draft !== null) + button.btn.btn-success.ml-3#card-1-create-account(type="button") {'Create account'} + else + button.btn.btn-success.ml-3#card-1-create-account(type="button" disabled) {'Create account'} p.'mt-3'.mb-0#card-1-message(style="display: none;") {} } @@ -147,7 +152,7 @@ return async env => { div#card-2-collapse.collapse(role="tabpanel" aria-labelledby="card-2-heading" data-parent="#accordion") { div.card-body { button.btn.btn-outline-secondary#card-2-back(type="button") {'Back'} - button.btn.btn-outline-secondary.ml-3#card-2-resend-email(type="button") {'Re-send email'} + button.btn.btn-outline-secondary.ml-3#card-2-resend-email(type="button" disabled) {'Re-send email'} p.'mt-3'.mb-0#card-2-message(style="display: none;") {} } @@ -171,17 +176,30 @@ return async env => { input_semaphore.try_acquire() await api_call( '/api/account/sign_up/set_draft.json', - { - email: document.getElementById('email').value.slice(0, 256).toLowerCase(), - given_names: document.getElementById('given-names').value.slice(0, 256), - family_name: document.getElementById('family-name').value.slice(0, 256), - contact_me: document.getElementById('contact-me').checked ? true : false - } + document.getElementById('card-1-create-account').disabled ? + null : + { + email: document.getElementById('email').value.slice(0, 256).toLowerCase(), + given_names: document.getElementById('given-names').value.slice(0, 256), + family_name: document.getElementById('family-name').value.slice(0, 256), + contact_me: document.getElementById('contact-me').checked ? true : false + } ) } } )() // ignore returned promise (start thread) + let card_1_edited = in_draft => { + if (in_draft) + input_semaphore.release() + document.getElementById('card-1-create-account').disabled = + document.getElementById('given-names').value.length === 0 && + document.getElementById('family-name').value.length === 0 && + document.getElementById('contact-me').checked && + document.getElementById('email').value.length === 0 && + document.getElementById('verification-code').value.length === 0 + } + let details let card_1 = async () => { if (!document.getElementById('form').checkValidity()) { @@ -230,6 +248,8 @@ return async env => { //document.getElementById('card-1-message').classList.add('text-success') document.getElementById('card-1-message').classList.remove('text-danger') $('#card-1-message').show() + + document.getElementById('card-2-resend-email').disabled = false return true } @@ -276,28 +296,28 @@ return async env => { () => { document.getElementById('given-names').addEventListener( 'input', - () => {input_semaphore.release()} + () => {card_1_edited(true)} ) document.getElementById('family-name').addEventListener( 'input', - () => {input_semaphore.release()} + () => {card_1_edited(true)} ) document.getElementById('email').addEventListener( 'input', - () => {input_semaphore.release()} + () => {card_1_edited(true)} + ) + document.getElementById('password').addEventListener( + 'input', + () => {card_1_edited(false)} ) - //document.getElementById('password').addEventListener( - // 'input', - // () => {input_semaphore.release()} - //) document.getElementById('contact-me').addEventListener( 'input', - () => {input_semaphore.release()} + () => {card_1_edited(true)} + ) + document.getElementById('verification-code').addEventListener( + 'input', + () => {card_1_edited(false)} ) - //document.getElementById('verification-code').addEventListener( - // 'input', - // () => {input_semaphore.release()} - //) let image_seq = 1 document.getElementById('card-1-new-code').addEventListener( -- 2.34.1