In /lib/navbar.jst rework sign in to be similar to feedback

diff --git a/_lib/navbar.jst b/_lib/navbar.jst
index da759f9..53305ef 100644 (file)
--- 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')