From 38a0ab7fa652bf1a886b70192128af9e34a9fe41 Mon Sep 17 00:00:00 2001 From: Nick Downing Date: Wed, 26 Jan 2022 23:11:46 +1100 Subject: [PATCH] In /lib/navbar.jst rework sign in to be similar to feedback --- _lib/navbar.jst | 119 +++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 97 insertions(+), 22 deletions(-) diff --git a/_lib/navbar.jst b/_lib/navbar.jst index da759f9..53305ef 100644 --- a/_lib/navbar.jst +++ b/_lib/navbar.jst @@ -234,19 +234,23 @@ return async (env, head, body, scripts) => { span.h4.modal-title {'Sign in'} } div.modal-body { - div.row { - div.col-md-12 { - div.form-group { - label.form-label(for="navbar-sign-in-email") {'Email'} - input.form-control#navbar-sign-in-email(type="text" placeholder="Account email address" required maxlength=256) {} + form#navbar-sign-in-form { + div.row { + div.col-md-12 { + div.form-group { + label.form-label(for="navbar-sign-in-email") {'Email'} + input.form-control#navbar-sign-in-email(type="email" required maxlength=256) {} + div.invalid-feedback {'Please enter your account\'s email address.'} + } } } - } - div.row { - div.col-md-12 { - div.form-group { - label.form-label(for="navbar-sign-in-password") {'Password'} - input.form-control#navbar-sign-in-password(type="password" placeholder="Account password" required minlength=8 maxlength=256) {} + div.row { + div.col-md-12 { + div.form-group { + label.form-label(for="navbar-sign-in-password") {'Password'} + input.form-control#navbar-sign-in-password(type="password" required minlength=8 maxlength=256) {} + div.invalid-feedback {'Please enter at least 8 characters.'} + } } } } @@ -256,10 +260,12 @@ return async (env, head, body, scripts) => { a(href="/my_account/sign_up/index.html") {'Sign up'} } - p { + p.mb-0 { 'Forgot password? ' a(href="/my_account/password_reset/index.html") {'Password reset'} } + + p.'mt-3'.mb-0#navbar-sign-in-message(hidden) {} } div.modal-footer { button.btn.btn-outline-secondary(type="button" data-dismiss="modal") { @@ -268,10 +274,21 @@ return async (env, head, body, scripts) => { } 'Back' } - button.btn.btn-primary#navbar-sign-in-submit(type="button") { - div.icon24-outer.mr-2 { + button.btn.btn-primary#navbar-sign-in-sign-in(type="button") { + div.icon24-outer.mr-2#navbar-sign-in-icon { div.icon24-inner {_out.push(fa_unlock_alt)} } + //div.icon24-outer.mr-2#navbar-sign-in-tick(hidden) { + // div.icon24-inner {_out.push(icon_tick)} + //} + div.icon24-outer.mr-2#navbar-sign-in-cross(hidden) { + div.icon24-inner {_out.push(icon_cross)} + } + div.icon24-outer.mr-2#navbar-sign-in-spinner(hidden) { + div.icon24-inner { + div.spinner-border.spinner-border-sm(role="status") {} + } + } 'Sign in' } } @@ -395,16 +412,22 @@ return async (env, head, body, scripts) => { let id_navbar_feedback_modal = document.getElementById('navbar-feedback-modal') let id_navbar_feedback_send_message = document.getElementById('navbar-feedback-send-message') let id_navbar_feedback_spinner = document.getElementById('navbar-feedback-spinner') - //let id_navbar_feedback_tick = document.getElementById('navbar-feedback-tick') + let id_navbar_feedback_tick = document.getElementById('navbar-feedback-tick') let id_navbar_give_feedback = document.getElementById('navbar-give-feedback') let id_navbar_message_modal = document.getElementById('navbar-message-modal') let id_navbar_message_modal_message = document.getElementById('navbar-message-modal-message') let id_navbar_search_button = document.getElementById('navbar-search-button') let id_navbar_sign_in = document.getElementById('navbar-sign-in') + let id_navbar_sign_in_cross = document.getElementById('navbar-sign-in-cross') let id_navbar_sign_in_email = document.getElementById('navbar-sign-in-email') + let id_navbar_sign_in_form = document.getElementById('navbar-sign-in-form') + let id_navbar_sign_in_icon = document.getElementById('navbar-sign-in-icon') + let id_navbar_sign_in_message = document.getElementById('navbar-sign-in-message') let id_navbar_sign_in_modal = document.getElementById('navbar-sign-in-modal') let id_navbar_sign_in_password = document.getElementById('navbar-sign-in-password') - let id_navbar_sign_in_submit = document.getElementById('navbar-sign-in-submit') + let id_navbar_sign_in_sign_in = document.getElementById('navbar-sign-in-sign-in') + let id_navbar_sign_in_spinner = document.getElementById('navbar-sign-in-spinner') + let id_navbar_sign_in_tick = document.getElementById('navbar-sign-in-tick') let id_navbar_sign_out = document.getElementById('navbar-sign-out') let id_navbar_sign_up = document.getElementById('navbar-sign-up') let id_navbar_signed_in_status = document.getElementById('navbar-signed-in-status') @@ -417,6 +440,7 @@ return async (env, head, body, scripts) => { () => { id_navbar_sign_in_email.value = '' id_navbar_sign_in_password.value = '' + id_navbar_sign_in_sign_in.disabled = true $('#navbar-sign-in-modal').modal('show') } ) @@ -426,12 +450,50 @@ return async (env, head, body, scripts) => { () => {id_navbar_sign_in_email.focus()} ) - id_navbar_sign_in_submit.addEventListener( + let sign_in_edited = () => { + id_navbar_sign_in_sign_in.disabled = + id_navbar_sign_in_email.value.length === 0 && + id_navbar_sign_in_password.value.length === 0 + id_navbar_sign_in_icon.hidden = false + //id_navbar_sign_in_tick.hidden = true + id_navbar_sign_in_cross.hidden = true + id_navbar_sign_in_spinner.hidden = true + id_navbar_sign_in_message.hidden = true + } + + id_navbar_sign_in_email.addEventListener( + 'input', + sign_in_edited + ) + id_navbar_sign_in_password.addEventListener( + 'input', + sign_in_edited + ) + + id_navbar_sign_in_sign_in.addEventListener( 'click', async () => { - let email + id_navbar_sign_in_icon.hidden = false + //id_navbar_sign_in_tick.hidden = true + id_navbar_sign_in_cross.hidden = true + id_navbar_sign_in_spinner.hidden = true + // the below causes an ugly flicker, so just keep the message + //id_navbar_sign_in_message.hidden = true + + if (!id_navbar_sign_in_form.checkValidity()) { + id_navbar_sign_in_form.classList.add('was-validated'); + + id_navbar_sign_in_icon.hidden = true + id_navbar_sign_in_cross.hidden = false + return + } + id_navbar_sign_in_form.classList.remove('was-validated'); + + let email = id_navbar_sign_in_email.value.slice(0, 256).toLowerCase() + + id_navbar_sign_in_icon.hidden = true + id_navbar_sign_in_spinner.hidden = false try { - email = id_navbar_sign_in_email.value.slice(0, 256).toLowerCase() await api_call( '/api/account/sign_in.json', email, @@ -446,11 +508,21 @@ return async (env, head, body, scripts) => { return } - id_navbar_message_modal_message.textContent = problem.detail - $('#navbar-sign-in-modal').modal('hide') - $('#navbar-message-modal').modal('show') + id_navbar_sign_in_cross.hidden = false + id_navbar_sign_in_spinner.hidden = true + + id_navbar_sign_in_message.textContent = problem.detail + //id_navbar_sign_in_message.classList.remove('text-success') + id_navbar_sign_in_message.classList.add('text-danger') + id_navbar_sign_in_message.hidden = false return } + //id_navbar_sign_in_tick.hidden = false + //id_navbar_sign_in_spinner.hidden = true + //id_navbar_sign_in_message.textContent = `You are now signed in as "${email}".` + //id_navbar_sign_in_message.classList.add('text-success') + //id_navbar_sign_in_message.classList.remove('text-danger') + //id_navbar_sign_in_message.hidden = false id_navbar_signed_in_status.textContent = 'Signed in.' //`Signed in as ${email}.` id_navbar_sign_in.hidden = true @@ -458,6 +530,9 @@ return async (env, head, body, scripts) => { id_navbar_sign_out.hidden = false sign_in_out(true) + id_navbar_sign_in_icon.hidden = false + id_navbar_sign_in_spinner.hidden = true + id_navbar_sign_in_message.hidden = true id_navbar_message_modal_message.textContent = `You are now signed in as "${email}".` $('#navbar-sign-in-modal').modal('hide') $('#navbar-message-modal').modal('show') -- 2.34.1