Get nodemailers working, make all forms use div.alert#alert not p#message

diff --git a/_config/globals.json b/_config/globals.json
index a37f593..06857d0 100644 (file)
--- a/_config/globals.json
+++ b/_config/globals.json
@@ -2,9 +2,9 @@
   "site_url": "https://nick.downing.id",
   "site_title": "nick.downing.id",
   "contact_from": "nick.downing.id contact <contact@nick.downing.id>",
-  "contact_to": "Nick Downing <nick@nick.downing.id>",
+  "contact_to": "Nick Downing <nick@downing.id>",
   "feedback_from": "nick.downing.id feedback <feedback@nick.downing.id>",
-  "feedback_to": "Nick Downing <nick@nick.downing.id>",
+  "feedback_to": "Nick Downing <nick@downing.id>",
   "noreply_from": "nick.downing.id <noreply@nick.downing.id>",
   "noreply_signature": "Nick",
   "copyright": "Nick Downing and contributors"

diff --git a/_config/nodemailers.json b/_config/nodemailers.json
index ca93c17..382b7fd 100644 (file)
--- a/_config/nodemailers.json
+++ b/_config/nodemailers.json
@@ -4,7 +4,7 @@
     "port": 587,
     "secure": false,
     "auth": {
-      "user": "contact@ndcode.org",
+      "user": "contact@nick.downing.id",
       "pass": "XXXContact12"
     },
     "requireTLS": true
@@ -14,7 +14,7 @@
     "port": 587,
     "secure": false,
     "auth": {
-      "user": "feedback@ndcode.org",
+      "user": "feedback@nick.downing.id",
       "pass": "XXXFeedback12"
     },
     "requireTLS": true
@@ -24,7 +24,7 @@
     "port": 587,
     "secure": false,
     "auth": {
-      "user": "noreply@ndcode.org",
+      "user": "noreply@nick.downing.id",
       "pass": "XXXNoreply12"
     },
     "requireTLS": true

diff --git a/_lib/get_nodemailer.jst b/_lib/get_nodemailer.jst
index fefa21a..4a1848a 100644 (file)
--- a/_lib/get_nodemailer.jst
+++ b/_lib/get_nodemailer.jst
@@ -4,15 +4,16 @@ let nodemailer = require('nodemailer')
 return async (root, name) => {
   let nodemailers = await root.get('nodemailers')
   if (nodemailers === undefined)
-    throw new Problem(
+    throw new jst_server.Problem(
       'Nodemailer error',
       'Please import the nodemailers data into the database.',
       509
     )
   let _nodemailer = await nodemailers.get_json(name)
-    throw new Problem(
+  if (_nodemailer === undefined)
+    throw new jst_server.Problem(
       'Nodemailer error',
-      `Can't find the nodemailer "${name}" in the nodemailers data.',
+      `Can't find the nodemailer "${name}" in the nodemailers data.`,
       509
     )
   return nodemailer.createTransport(_nodemailer)

diff --git a/_lib/navbar.jst b/_lib/navbar.jst
index 0650c11..cabffb2 100644 (file)
--- a/_lib/navbar.jst
+++ b/_lib/navbar.jst
@@ -245,7 +245,7 @@ return async (env, head, body, scripts) => {
               span.h4.modal-title {'Sign in'}
             }
             div.modal-body {
-              form#navbar-sign-in-form {
+              form.mb-2#navbar-sign-in-form {
                 div.row {
                   div.col-md-12 {
                     div.form-group {
@@ -266,7 +266,7 @@ return async (env, head, body, scripts) => {
                 }
               }
 
-              p.mt-2 {
+              p {
                 'No account yet? '
                 a(href="/my_account/sign_up/index.html") {'Sign up'}
               }
@@ -276,7 +276,7 @@ return async (env, head, body, scripts) => {
                 a(href="/my_account/password_reset/index.html") {'Password reset'}
               }
 
-              p.'mt-3'.mb-0#navbar-sign-in-message(hidden) {}
+              div.alert.alert-danger.'mt-3'.mb-0#navbar-sign-in-alert(hidden) {}
             }
             div.modal-footer {
               button.btn.btn-outline-secondary(type="button" data-dismiss="modal") {
@@ -322,8 +322,8 @@ return async (env, head, body, scripts) => {
                 div.row {
                   div.col-md-12 {
                     div.form-group {
-                      label.form-label(for="navbar-feedback-message1") {'Message'}
-                      textarea.form-control#navbar-feedback-message1(placeholder="I noticed that..." required rows=4 maxlength=65536) {
+                      label.form-label(for="navbar-feedback-message") {'Message'}
+                      textarea.form-control#navbar-feedback-message(placeholder="I noticed that..." required rows=4 maxlength=65536) {
                         if (feedback_draft)
                           `${feedback_draft.message}`
                       }
@@ -333,7 +333,7 @@ return async (env, head, body, scripts) => {
                 }
               }
 
-              p.'mt-3'.mb-0#navbar-feedback-message(hidden) {}
+              div.alert.alert-danger.'mt-3'.mb-0#navbar-feedback-alert(hidden) {}
             }
             div.modal-footer {
               button.btn.btn-outline-secondary(type="button" data-dismiss="modal") {
@@ -416,11 +416,11 @@ return async (env, head, body, scripts) => {
         document.addEventListener(
           'DOMContentLoaded',
           () => {
+            let id_navbar_feedback_alert = document.getElementById('navbar-feedback-alert')
             let id_navbar_feedback_cross = document.getElementById('navbar-feedback-cross')
             let id_navbar_feedback_form = document.getElementById('navbar-feedback-form')
             let id_navbar_feedback_icon = document.getElementById('navbar-feedback-icon')
             let id_navbar_feedback_message = document.getElementById('navbar-feedback-message')
-            let id_navbar_feedback_message1 = document.getElementById('navbar-feedback-message1')
             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')
@@ -432,11 +432,11 @@ return async (env, head, body, scripts) => {
             let id_navbar_sidebar_inner = document.getElementById('navbar-sidebar-inner')
             let id_navbar_sidebar_outer = document.getElementById('navbar-sidebar-outer')
             let id_navbar_sign_in = document.getElementById('navbar-sign-in')
+            let id_navbar_sign_in_alert = document.getElementById('navbar-sign-in-alert')
             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_sign_in = document.getElementById('navbar-sign-in-sign-in')
@@ -474,7 +474,7 @@ return async (env, head, body, scripts) => {
               //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_alert.hidden = true
             }
 
             id_navbar_sign_in_email.addEventListener(
@@ -493,8 +493,8 @@ return async (env, head, body, scripts) => {
                 //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
+                // the below causes an ugly flicker, so just keep the alert
+                //id_navbar_sign_in_alert.hidden = true
 
                 if (!id_navbar_sign_in_form.checkValidity()) {
                   id_navbar_sign_in_form.classList.add('was-validated');
@@ -527,18 +527,18 @@ return async (env, head, body, scripts) => {
                   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
+                  id_navbar_sign_in_alert.textContent = problem.detail
+                  //id_navbar_sign_in_alert.classList.remove('alert-success')
+                  //id_navbar_sign_in_alert.classList.add('alert-danger')
+                  id_navbar_sign_in_alert.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_sign_in_alert.textContent = `You are now signed in as "${email}".`
+                //id_navbar_sign_in_alert.classList.add('alert-success')
+                //id_navbar_sign_in_alert.classList.remove('alert-danger')
+                //id_navbar_sign_in_alert.hidden = false
 
                 if (sign_in_out(true))
                   // if location has been changed, leave the spinner and do
@@ -552,7 +552,7 @@ return async (env, head, body, scripts) => {
 
                 id_navbar_sign_in_icon.hidden = false
                 id_navbar_sign_in_spinner.hidden = true
-                id_navbar_sign_in_message.hidden = true
+                id_navbar_sign_in_alert.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')
@@ -598,9 +598,9 @@ return async (env, head, body, scripts) => {
               'click',
               () => {
                 // hack to move cursor to end of textarea
-                let temp = id_navbar_feedback_message1.value
-                id_navbar_feedback_message1.value = ''
-                id_navbar_feedback_message1.value = temp
+                let temp = id_navbar_feedback_message.value
+                id_navbar_feedback_message.value = ''
+                id_navbar_feedback_message.value = temp
 
                 $('#navbar-feedback-modal').modal('show')
                 return false
@@ -609,7 +609,7 @@ return async (env, head, body, scripts) => {
 
             $('#navbar-feedback-modal').on(
               'shown.bs.modal',
-              () => {id_navbar_feedback_message1.focus()}
+              () => {id_navbar_feedback_message.focus()}
             )
 
             let feedback_input_semaphore = new BinarySemaphore(false)
@@ -621,10 +621,10 @@ return async (env, head, body, scripts) => {
                   feedback_input_semaphore.try_acquire()
                   await api_call(
                     '/api/feedback/set_draft.json',
-                    id_navbar_feedback_message1.value.length === 0 ?
+                    id_navbar_feedback_message.value.length === 0 ?
                       null :
                       {
-                        message: id_navbar_feedback_message1.value.slice(0, 65536)
+                        message: id_navbar_feedback_message.value.slice(0, 65536)
                       }
                   )
                 }
@@ -635,15 +635,15 @@ return async (env, head, body, scripts) => {
               feedback_input_semaphore.release()
 
               id_navbar_feedback_send_message.disabled =
-                id_navbar_feedback_message1.value.length === 0
+                id_navbar_feedback_message.value.length === 0
               id_navbar_feedback_icon.hidden = false
               //id_navbar_feedback_tick.hidden = true
               id_navbar_feedback_cross.hidden = true
               id_navbar_feedback_spinner.hidden = true
-              id_navbar_feedback_message.hidden = true
+              id_navbar_feedback_alert.hidden = true
             }
 
-            id_navbar_feedback_message1.addEventListener(
+            id_navbar_feedback_message.addEventListener(
               'input',
               feedback_edited
             )
@@ -655,8 +655,8 @@ return async (env, head, body, scripts) => {
                 //id_navbar_feedback_tick.hidden = true
                 id_navbar_feedback_cross.hidden = true
                 id_navbar_feedback_spinner.hidden = true
-                // the below causes an ugly flicker, so just keep the message
-                //id_navbar_feedback_message.hidden = true
+                // the below causes an ugly flicker, so just keep the alert
+                //id_navbar_feedback_alert.hidden = true
 
                 if (!id_navbar_feedback_form.checkValidity()) {
                   id_navbar_feedback_form.classList.add('was-validated');
@@ -673,7 +673,7 @@ return async (env, head, body, scripts) => {
                   await api_call(
                     '/api/feedback/send_message.json',
                     location.href,
-                    id_navbar_feedback_message1.value.slice(0, 65536)
+                    id_navbar_feedback_message.value.slice(0, 65536)
                   )
                 }
                 catch (error) {
@@ -682,22 +682,22 @@ return async (env, head, body, scripts) => {
                   id_navbar_feedback_cross.hidden = false
                   id_navbar_feedback_spinner.hidden = true
 
-                  id_navbar_feedback_message.textContent = problem.detail
-                  //id_navbar_feedback_message.classList.remove('text-success')
-                  id_navbar_feedback_message.classList.add('text-danger')
-                  id_navbar_feedback_message.hidden = false
+                  id_navbar_feedback_alert.textContent = problem.detail
+                  //id_navbar_feedback_alert.classList.remove('alert-success')
+                  //id_navbar_feedback_alert.classList.add('alert-danger')
+                  id_navbar_feedback_alert.hidden = false
                   return
                 }
                 //id_navbar_feedback_tick.hidden = false
                 //id_navbar_feedback_spinner.hidden = true
-                //id_navbar_feedback_message.textContent = 'We have received your message. We will be in touch as soon as possible.'
-                //id_navbar_feedback_message.classList.add('text-success')
-                //id_navbar_feedback_message.classList.remove('text-danger')
-                //id_navbar_feedback_message.hidden = false
+                //id_navbar_feedback_alert.alertContent = 'We have received your message. We will be in touch as soon as possible.'
+                //id_navbar_feedback_alert.classList.add('alert-success')
+                //id_navbar_feedback_alert.classList.remove('alert-danger')
+                //id_navbar_feedback_alert.hidden = false
 
                 id_navbar_feedback_icon.hidden = false
                 id_navbar_feedback_spinner.hidden = true
-                id_navbar_feedback_message.hidden = true
+                id_navbar_feedback_alert.hidden = true
                 id_navbar_message_modal_message.textContent = 'Thanks! We have received your feedback.'
                 $('#navbar-feedback-modal').modal('hide')
                 $('#navbar-message-modal').modal('show')

diff --git a/contact/index.html.jst b/contact/index.html.jst
index 0744e23..fb865fa 100644 (file)
--- a/contact/index.html.jst
+++ b/contact/index.html.jst
@@ -72,8 +72,8 @@ return async env => {
         div.row {
           div.col-md-12 {
             div.form-group {
-              label.form-label(for="message1") {'Message *'}
-              textarea.form-control#message1(placeholder="I am interested in..." required rows=6 maxlength=65536) {
+              label.form-label(for="message") {'Message *'}
+              textarea.form-control#message(placeholder="I am interested in..." required rows=6 maxlength=65536) {
                 if (contact_draft)
                   `${contact_draft.message}`
               }
@@ -84,7 +84,7 @@ return async env => {
       }
 
       if (contact_draft !== null)
-        button.btn.btn-success#send-enquiry(type="button") {
+        button.btn.btn-success.mb-3#send-enquiry(type="button") {
           div.icon24-outer.mr-2#icon {
             div.icon24-inner {_out.push(fa_envelope)}
           }
@@ -102,7 +102,7 @@ return async env => {
           'Send enquiry'
         }
       else
-        button.btn.btn-success#send-enquiry(type="button" disabled) {
+        button.btn.btn-success.mb-3#send-enquiry(type="button" disabled) {
           div.icon24-outer.mr-2#icon {
             div.icon24-inner {_out.push(fa_envelope)}
           }
@@ -120,9 +120,9 @@ return async env => {
           'Send enquiry'
         }
 
-      p.'mt-3'.mb-0#message(hidden) {}
+      div.alert#alert(hidden) {}
 
-      p.text-muted.mt-3 {'* These fields are required.'}
+      p.text-muted {'* These fields are required.'}
     },
     // scripts
     async _out => {
@@ -132,6 +132,7 @@ return async env => {
         document.addEventListener(
           'DOMContentLoaded',
           () => {
+            let id_alert = document.getElementById('alert')
             let id_company = document.getElementById('company')
             let id_cross = document.getElementById('cross')
             let id_email = document.getElementById('email')
@@ -140,7 +141,6 @@ return async env => {
             let id_given_names = document.getElementById('given-names')
             let id_icon = document.getElementById('icon')
             let id_message = document.getElementById('message')
-            let id_message1 = document.getElementById('message1')
             let id_send_enquiry = document.getElementById('send-enquiry')
             let id_spinner = document.getElementById('spinner')
             let id_tick = document.getElementById('tick')
@@ -158,14 +158,14 @@ return async env => {
                       id_family_name.value.length === 0 &&
                       id_company.value.length === 0 &&
                       id_email.value.length === 0 &&
-                      id_message1.value.length === 0 ?
+                      id_message.value.length === 0 ?
                       null :
                       {
                         given_names: id_given_names.value.slice(0, 256),
                         family_name: id_family_name.value.slice(0, 256),
                         company: id_company.value.slice(0, 256),
                         email: id_email.value.slice(0, 256).toLowerCase(),
-                        message: id_message1.value.slice(0, 65536)
+                        message: id_message.value.slice(0, 65536)
                       }
                   )
                 }
@@ -180,19 +180,19 @@ return async env => {
                   id_family_name.value.length === 0 &&
                   id_company.value.length === 0 &&
                   id_email.value.length === 0 &&
-                  id_message1.value.length === 0
+                  id_message.value.length === 0
               id_icon.hidden = false
               id_tick.hidden = true
               id_cross.hidden = true
               id_spinner.hidden = true
-              id_message.hidden = true
+              id_alert.hidden = true
             }
 
             id_given_names.addEventListener('input', edited)
             id_family_name.addEventListener('input', edited)
             id_company.addEventListener('input', edited)
             id_email.addEventListener('input', edited)
-            id_message1.addEventListener('input', edited)
+            id_message.addEventListener('input', edited)
 
             id_send_enquiry.addEventListener(
               'click',
@@ -201,8 +201,8 @@ return async env => {
                 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
+                // the below causes an ugly flicker, so just keep the alert
+                //id_alert.hidden = true
 
                 if (!id_form.checkValidity()) {
                   id_form.classList.add('was-validated');
@@ -223,7 +223,7 @@ return async env => {
                       family_name: id_family_name.value.slice(0, 256),
                       company: id_company.value.slice(0, 256),
                       email: id_email.value.slice(0, 256).toLowerCase(),
-                      message: id_message1.value.slice(0, 65536)
+                      message: id_message.value.slice(0, 65536)
                     }
                   )
                 }
@@ -233,18 +233,18 @@ return async env => {
                   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
+                  id_alert.textContent = problem.detail
+                  id_alert.classList.remove('alert-success')
+                  id_alert.classList.add('alert-danger')
+                  id_alert.hidden = false
                   return
                 }
                 id_tick.hidden = false
                 id_spinner.hidden = true
-                id_message.textContent = 'We have received your enquiry. We will be in touch as soon as possible.'
-                //id_message.classList.add('text-success')
-                id_message.classList.remove('text-danger')
-                id_message.hidden = false
+                id_alert.textContent = 'We have received your enquiry. We will be in touch as soon as possible.'
+                id_alert.classList.add('alert-success')
+                id_alert.classList.remove('alert-danger')
+                id_alert.hidden = false
               }
             )
           }

diff --git a/my_account/index.html.jst b/my_account/index.html.jst
index 6176b3f..a14b9c1 100644 (file)
--- a/my_account/index.html.jst
+++ b/my_account/index.html.jst
@@ -160,7 +160,7 @@ return async env => {
                     'Save'
                   }
 
-                p.'mt-3'.mb-0#card-1-message(hidden) {}
+                div.alert.alert-danger.'mt-3'.mb-0#card-1-alert(hidden) {}
               }
             }
           }
@@ -215,7 +215,7 @@ return async env => {
                   'Save'
                 }
 
-                p.'mt-3'.mb-0#card-2-message(hidden) {}
+                div.alert.alert-danger.'mt-3'.mb-0#card-2-alert(hidden) {}
               }
             }
           }
@@ -286,24 +286,24 @@ return async env => {
             () => {
               let id_accordion = document.getElementById('accordion')
               let id_card_1 = document.getElementById('card-1')
+              let id_card_1_alert = document.getElementById('card-1-alert')
               let id_card_1_collapse = document.getElementById('card-1-collapse')
               let id_card_1_cross = document.getElementById('card-1-cross')
               let id_card_1_form = document.getElementById('card-1-form')
               let id_card_1_heading = document.getElementById('card-1-heading')
               let id_card_1_icon = document.getElementById('card-1-icon')
-              let id_card_1_message = document.getElementById('card-1-message')
               let id_card_1_revert = document.getElementById('card-1-revert')
               let id_card_1_save = document.getElementById('card-1-save')
               let id_card_1_spinner = document.getElementById('card-1-spinner')
               let id_card_1_tick = document.getElementById('card-1-tick')
               let id_card_2 = document.getElementById('card-2')
+              let id_card_2_alert = document.getElementById('card-2-alert')
               let id_card_2_clear = document.getElementById('card-2-clear')
               let id_card_2_collapse = document.getElementById('card-2-collapse')
               let id_card_2_cross = document.getElementById('card-2-cross')
               let id_card_2_form = document.getElementById('card-2-form')
               let id_card_2_heading = document.getElementById('card-2-heading')
               let id_card_2_icon = document.getElementById('card-2-icon')
-              let id_card_2_message = document.getElementById('card-2-message')
               let id_card_2_save = document.getElementById('card-2-save')
               let id_card_2_spinner = document.getElementById('card-2-spinner')
               let id_card_2_tick = document.getElementById('card-2-tick')
@@ -353,7 +353,7 @@ return async env => {
                 id_card_1_tick.hidden = true
                 id_card_1_cross.hidden = true
                 id_card_1_spinner.hidden = true
-                id_card_1_message.hidden = true
+                id_card_1_alert.hidden = true
               }
 
               id_given_names.addEventListener('input', card_1_edited)
@@ -376,7 +376,7 @@ return async env => {
                   id_card_1_tick.hidden = true
                   id_card_1_cross.hidden = true
                   id_card_1_spinner.hidden = true
-                  id_card_1_message.hidden = true
+                  id_card_1_alert.hidden = true
                 }
               )
 
@@ -387,8 +387,8 @@ return async env => {
                   id_card_1_tick.hidden = true
                   id_card_1_cross.hidden = true
                   id_card_1_spinner.hidden = true
-                  // the below causes an ugly flicker, so just keep the message
-                  //id_card_1_message.hidden = true
+                  // the below causes an ugly flicker, so just keep the alert
+                  //id_card_1_alert.hidden = true
 
                   if (!id_card_1_form.checkValidity()) {
                     id_card_1_form.classList.add('was-validated');
@@ -417,10 +417,10 @@ return async env => {
                     id_card_1_cross.hidden = false
                     id_card_1_spinner.hidden = true
 
-                    id_card_1_message.textContent = problem.detail
-                    //id_card_1_message.classList.remove('text-success')
-                    id_card_1_message.classList.add('text-danger')
-                    id_card_1_message.hidden = false
+                    id_card_1_alert.textContent = problem.detail
+                    //id_card_1_alert.classList.remove('alert-success')
+                    //id_card_1_alert.classList.add('alert-danger')
+                    id_card_1_alert.hidden = false
                     return
                   }
                   id_card_1_tick.hidden = false
@@ -439,7 +439,7 @@ return async env => {
                   //id_card_1_tick.hidden = true
                   //id_card_1_cross.hidden = true
                   //id_card_1_spinner.hidden = true
-                  id_card_1_message.hidden = true
+                  id_card_1_alert.hidden = true
                 }
               )
 
@@ -454,7 +454,7 @@ return async env => {
                 id_card_2_tick.hidden = true
                 id_card_2_cross.hidden = true
                 id_card_2_spinner.hidden = true
-                id_card_2_message.hidden = true
+                id_card_2_alert.hidden = true
               }
 
               id_old_password.addEventListener('input', card_2_edited)
@@ -473,7 +473,7 @@ return async env => {
                   id_card_2_tick.hidden = true
                   id_card_2_cross.hidden = true
                   id_card_2_spinner.hidden = true
-                  id_card_2_message.hidden = true
+                  id_card_2_alert.hidden = true
                 }
               )
 
@@ -484,8 +484,8 @@ return async env => {
                   id_card_2_tick.hidden = true
                   id_card_2_cross.hidden = true
                   id_card_2_spinner.hidden = true
-                  // the below causes an ugly flicker, so just keep the message
-                  //id_card_2_message.hidden = true
+                  // the below causes an ugly flicker, so just keep the alert
+                  //id_card_2_alert.hidden = true
 
                   if (!id_card_2_form.checkValidity()) {
                     id_card_2_form.classList.add('was-validated');
@@ -511,10 +511,10 @@ return async env => {
                     id_card_2_cross.hidden = false
                     id_card_2_spinner.hidden = true
 
-                    id_card_2_message.textContent = problem.detail
-                    //id_card_2_message.classList.remove('text-success')
-                    id_card_2_message.classList.add('text-danger')
-                    id_card_2_message.hidden = false
+                    id_card_2_alert.textContent = problem.detail
+                    //id_card_2_alert.classList.remove('alert-success')
+                    //id_card_2_alert.classList.add('alert-danger')
+                    id_card_2_alert.hidden = false
                     return
                   }
                   id_card_2_tick.hidden = false
@@ -530,7 +530,7 @@ return async env => {
                   //id_card_2_tick.hidden = true
                   //id_card_2_cross.hidden = true
                   //id_card_2_spinner.hidden = true
-                  id_card_2_message.hidden = true
+                  id_card_2_alert.hidden = true
                 }
               )
             }

diff --git a/my_account/password_reset/index.html.jst b/my_account/password_reset/index.html.jst
index f87a51e..8fa627d 100644 (file)
--- a/my_account/password_reset/index.html.jst
+++ b/my_account/password_reset/index.html.jst
@@ -60,7 +60,7 @@ return async env => {
       }
 
       if (email.length)
-        button.btn.btn-success#password-reset(type="button") {
+        button.btn.btn-success.mb-3#password-reset(type="button") {
           div.icon24-outer.mr-2#icon {
             div.icon24-inner {_out.push(fa_envelope)}
           }
@@ -78,7 +78,7 @@ return async env => {
           'Password reset'
         }
       else
-        button.btn.btn-success#password-reset(type="button" disabled) {
+        button.btn.btn-success.mb-3#password-reset(type="button" disabled) {
           div.icon24-outer.mr-2#icon {
             div.icon24-inner {_out.push(fa_envelope)}
           }
@@ -96,9 +96,9 @@ return async env => {
           'Password reset'
         }
 
-      p.'mt-3'.mb-0#message(hidden) {}
+      div.alert#alert(hidden) {}
 
-      p.text-muted.mt-3 {'* These fields are required.'}
+      p.text-muted {'* These fields are required.'}
     },
     // scripts
     async _out => {
@@ -108,11 +108,11 @@ return async env => {
         document.addEventListener(
           'DOMContentLoaded',
           () => {
+            let id_alert = document.getElementById('alert')
             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_new_password = document.getElementById('new-password')
             let id_password_reset = document.getElementById('password-reset')
             let id_spinner = document.getElementById('spinner')
@@ -126,7 +126,7 @@ return async env => {
               id_tick.hidden = true
               id_cross.hidden = true
               id_spinner.hidden = true
-              id_message.hidden = true
+              id_alert.hidden = true
             }
 
             id_email.addEventListener('input', edited)
@@ -139,8 +139,8 @@ return async env => {
                 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
+                // the below causes an ugly flicker, so just keep the alert
+                //id_alert.hidden = true
 
                 if (!id_form.checkValidity()) {
                   id_form.classList.add('was-validated');
@@ -169,18 +169,18 @@ return async env => {
                   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
+                  id_alert.textContent = problem.detail
+                  id_alert.classList.remove('alert-success')
+                  id_alert.classList.add('alert-danger')
+                  id_alert.hidden = false
                   return
                 }
                 id_tick.hidden = false
                 id_spinner.hidden = true
-                id_message.textContent = `Password reset 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
+                id_alert.textContent = `Password reset link has been sent to "${email}". Please check your email for next steps.`
+                id_alert.classList.add('alert-success')
+                id_alert.classList.remove('alert-danger')
+                id_alert.hidden = false
               }
             )
           }

diff --git a/my_account/send_verification_email/index.html.jst b/my_account/send_verification_email/index.html.jst
index 101f265..0882ef4 100644 (file)
--- a/my_account/send_verification_email/index.html.jst
+++ b/my_account/send_verification_email/index.html.jst
@@ -92,7 +92,7 @@ return async env => {
         }
       }
 
-      p#message(hidden) {}
+      div.alert#alert(hidden) {}
     },
     // scripts
     async _out => {
@@ -102,11 +102,11 @@ return async env => {
         document.addEventListener(
           'DOMContentLoaded',
           () => {
+            let id_alert = document.getElementById('alert')
             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')
@@ -118,7 +118,7 @@ return async env => {
               id_tick.hidden = true
               id_cross.hidden = true
               id_spinner.hidden = true
-              id_message.hidden = true
+              id_alert.hidden = true
             }
 
             id_email.addEventListener('input', edited)
@@ -130,8 +130,8 @@ return async env => {
                 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
+                // the below causes an ugly flicker, so just keep the alert
+                //id_alert.hidden = true
 
                 if (!id_form.checkValidity()) {
                   id_form.classList.add('was-validated');
@@ -158,18 +158,18 @@ return async env => {
                   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
+                  id_alert.textContent = problem.detail
+                  id_alert.classList.remove('alert-success')
+                  id_alert.classList.add('alert-danger')
+                  id_alert.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
+                id_alert.textContent = `Email verification link has been sent to "${email}". Please check your email for next steps.`
+                id_alert.classList.add('alert-success')
+                id_alert.classList.remove('alert-danger')
+                id_alert.hidden = false
               }
             )
           }

diff --git a/my_account/sign_up/index.html.jst b/my_account/sign_up/index.html.jst
index a592a45..116b863 100644 (file)
--- a/my_account/sign_up/index.html.jst
+++ b/my_account/sign_up/index.html.jst
@@ -146,7 +146,7 @@ return async env => {
                   'Create account'
                 }
 
-              p.'mt-3'.mb-0#card-1-message(hidden) {}
+              div.alert.'mt-3'.mb-0#card-1-alert(hidden) {}
             }
           }
         }
@@ -182,7 +182,7 @@ return async env => {
                 'Re-send email'
               }
 
-              p.'mt-3'.mb-0#card-2-message(hidden) {}
+              div.alert.'mt-3'.mb-0#card-2-alert(hidden) {}
             }
           }
         }
@@ -200,20 +200,20 @@ return async env => {
           () => {
             let id_accordion = document.getElementById('accordion')
             let id_card_1 = document.getElementById('card-1')
+            let id_card_1_alert = document.getElementById('card-1-alert')
             let id_card_1_collapse = document.getElementById('card-1-collapse')
             let id_card_1_create_account = document.getElementById('card-1-create-account')
             let id_card_1_cross = document.getElementById('card-1-cross')
             let id_card_1_heading = document.getElementById('card-1-heading')
-            let id_card_1_message = document.getElementById('card-1-message')
             let id_card_1_new = document.getElementById('card-1-new')
             let id_card_1_spinner = document.getElementById('card-1-spinner')
             let id_card_1_tick = document.getElementById('card-1-tick')
             let id_card_2 = document.getElementById('card-2')
+            let id_card_2_alert = document.getElementById('card-2-alert')
             let id_card_2_back = document.getElementById('card-2-back')
             let id_card_2_collapse = document.getElementById('card-2-collapse')
             let id_card_2_cross = document.getElementById('card-2-cross')
             let id_card_2_heading = document.getElementById('card-2-heading')
-            let id_card_2_message = document.getElementById('card-2-message')
             let id_card_2_resend_email = document.getElementById('card-2-resend-email')
             let id_card_2_spinner = document.getElementById('card-2-spinner')
             let id_card_2_tick = document.getElementById('card-2-tick')
@@ -266,13 +266,13 @@ return async env => {
               id_card_1_tick.hidden = true
               id_card_1_cross.hidden = true
               id_card_1_spinner.hidden = true
-              id_card_1_message.hidden = true
+              id_card_1_alert.hidden = true
 
               id_card_2_resend_email.disabled = true
               id_card_2_tick.hidden = true
               id_card_2_cross.hidden = true
               id_card_2_spinner.hidden = true
-              id_card_2_message.hidden = true
+              id_card_2_alert.hidden = true
             }
 
             let details
@@ -280,8 +280,8 @@ return async env => {
               id_card_1_tick.hidden = true
               id_card_1_cross.hidden = true
               id_card_1_spinner.hidden = true
-              // the below causes an ugly flicker, so just keep the message
-              //id_card_1_message.hidden = true
+              // the below causes an ugly flicker, so just keep the alert
+              //id_card_1_alert.hidden = true
 
               if (!id_form.checkValidity()) {
                 // workaround for https://github.com/twbs/bootstrap/issues/23454
@@ -325,20 +325,20 @@ return async env => {
                 id_card_1_cross.hidden = false
                 id_card_1_spinner.hidden = true
 
-                id_card_1_message.textContent = problem.detail
-                //id_card_1_message.classList.remove('text-success')
-                id_card_1_message.classList.add('text-danger')
-                id_card_1_message.hidden = false
+                id_card_1_alert.textContent = problem.detail
+                id_card_1_alert.classList.remove('alert-success')
+                id_card_1_alert.classList.add('alert-danger')
+                id_card_1_alert.hidden = false
 
                 $('#card-1-collapse').collapse('show')
                 return false
               }
               id_card_1_tick.hidden = false
               id_card_1_spinner.hidden = true
-              id_card_1_message.textContent = `Your account with email "${details.email}" has been created.`
-              //id_card_1_message.classList.add('text-success')
-              id_card_1_message.classList.remove('text-danger')
-              id_card_1_message.hidden = false
+              id_card_1_alert.textContent = `Your account with email "${details.email}" has been created.`
+              id_card_1_alert.classList.add('alert-success')
+              id_card_1_alert.classList.remove('alert-danger')
+              id_card_1_alert.hidden = false
 
               id_card_2_resend_email.disabled = false
               id_card_2.scrollIntoView()
@@ -349,8 +349,8 @@ return async env => {
               id_card_2_tick.hidden = true
               id_card_2_cross.hidden = true
               id_card_2_spinner.hidden = false
-              // the below causes an ugly flicker, so just keep the message
-              //id_card_2_message.hidden = true
+              // the below causes an ugly flicker, so just keep the alert
+              //id_card_2_alert.hidden = true
 
               try {
                 await api_call(
@@ -364,10 +364,10 @@ return async env => {
                 id_card_2_cross.hidden = false
                 id_card_2_spinner.hidden = true
 
-                id_card_2_message.textContent = problem.detail
-                //id_card_2_message.classList.remove('text-success')
-                id_card_2_message.classList.add('text-danger')
-                id_card_2_message.hidden = false
+                id_card_2_alert.textContent = problem.detail
+                id_card_2_alert.classList.remove('alert-success')
+                id_card_2_alert.classList.add('alert-danger')
+                id_card_2_alert.hidden = false
 
                 $('#card-2-collapse').collapse('show')
                 return false
@@ -375,10 +375,10 @@ return async env => {
               id_card_2_tick.hidden = false
               id_card_2_spinner.hidden = true
 
-              id_card_2_message.textContent = `Email verification link has been sent to "${details.email}". Please check your email for next steps.`
-              //id_card_2_message.classList.add('text-success')
-              id_card_2_message.classList.remove('text-danger')
-              id_card_2_message.hidden = false
+              id_card_2_alert.textContent = `Email verification link has been sent to "${details.email}". Please check your email for next steps.`
+              id_card_2_alert.classList.add('alert-success')
+              id_card_2_alert.classList.remove('alert-danger')
+              id_card_2_alert.hidden = false
               return true
             }
 

diff --git a/my_account/verify_email/index.html.jst b/my_account/verify_email/index.html.jst
index 438f214..0e68551 100644 (file)
--- a/my_account/verify_email/index.html.jst
+++ b/my_account/verify_email/index.html.jst
@@ -67,7 +67,7 @@ return async env => {
       }
 
       if (email.length || details.length)
-        button.btn.btn-success#verify-email(type="button") {
+        button.btn.btn-success.mb-3#verify-email(type="button") {
           div.icon24-outer.mr-2#icon {
             div.icon24-inner {_out.push(fa_user_check)}
           }
@@ -85,7 +85,7 @@ return async env => {
           'Verify email'
         }
       else
-        button.btn.btn-success#verify-email(type="button" disabled) {
+        button.btn.btn-success.mb-3#verify-email(type="button" disabled) {
           div.icon24-outer.mr-2#icon {
             div.icon24-inner {_out.push(fa_user_check)}
           }
@@ -103,9 +103,9 @@ return async env => {
           'Verify email'
         }
 
-      p.'mt-3'.mb-0#message(hidden) {}
+      div.alert#alert(hidden) {}
 
-      p.text-muted.mt-3 {'* These fields are required.'}
+      p.text-muted {'* These fields are required.'}
     },
     // scripts
     async _out => {
@@ -115,12 +115,12 @@ return async env => {
         document.addEventListener(
           'DOMContentLoaded',
           () => {
+            let id_alert = document.getElementById('alert')
             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_email = document.getElementById('verify-email')
@@ -133,7 +133,7 @@ return async env => {
               id_tick.hidden = true
               id_cross.hidden = true
               id_spinner.hidden = true
-              id_message.hidden = true
+              id_alert.hidden = true
             }
 
             id_email.addEventListener('input', edited)
@@ -146,8 +146,8 @@ return async env => {
                 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
+                // the below causes an ugly flicker, so just keep the alert
+                //id_alert.hidden = true
 
                 if (!id_form.checkValidity()) {
                   id_form.classList.add('was-validated');
@@ -176,18 +176,18 @@ return async env => {
                   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
+                  id_alert.textContent = problem.detail
+                  id_alert.classList.remove('alert-success')
+                  id_alert.classList.add('alert-danger')
+                  id_alert.hidden = false
                   return
                 }
                 id_tick.hidden = false
                 id_spinner.hidden = true
-                id_message.textContent = `Your email "${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
+                id_alert.textContent = `Your email "${email}" has been verified. You can now sign in.`
+                id_alert.classList.add('alert-success')
+                id_alert.classList.remove('alert-danger')
+                id_alert.hidden = false
               }
             )
           }

diff --git a/my_account/verify_password/index.html.jst b/my_account/verify_password/index.html.jst
index db9b773..35af0c0 100644 (file)
--- a/my_account/verify_password/index.html.jst
+++ b/my_account/verify_password/index.html.jst
@@ -67,7 +67,7 @@ return async env => {
       }
 
       if (email.length || details.length)
-        button.btn.btn-success#verify-password(type="button") {
+        button.btn.btn-success.mb-3#verify-password(type="button") {
           div.icon24-outer.mr-2#icon {
             div.icon24-inner {_out.push(fa_user_check)}
           }
@@ -85,7 +85,7 @@ return async env => {
           'Verify password'
         }
       else
-        button.btn.btn-success#verify-password(type="button" disabled) {
+        button.btn.btn-success.mb-3#verify-password(type="button" disabled) {
           div.icon24-outer.mr-2#icon {
             div.icon24-inner {_out.push(fa_user_check)}
           }
@@ -103,9 +103,9 @@ return async env => {
           'Verify password'
         }
 
-      p.'mt-3'.mb-0#message(hidden) {}
+      div.alert#alert(hidden) {}
 
-      p.text-muted.mt-3 {'* These fields are required.'}
+      p.text-muted {'* These fields are required.'}
     },
     // scripts
     async _out => {
@@ -115,12 +115,12 @@ return async env => {
         document.addEventListener(
           'DOMContentLoaded',
           () => {
+            let id_alert = document.getElementById('alert')
             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')
@@ -133,7 +133,7 @@ return async env => {
               id_tick.hidden = true
               id_cross.hidden = true
               id_spinner.hidden = true
-              id_message.hidden = true
+              id_alert.hidden = true
             }
 
             id_email.addEventListener('input', edited)
@@ -146,8 +146,8 @@ return async env => {
                 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
+                // the below causes an ugly flicker, so just keep the alert
+                //id_alert.hidden = true
 
                 if (!id_form.checkValidity()) {
                   id_form.classList.add('was-validated');
@@ -176,18 +176,18 @@ return async env => {
                   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
+                  id_alert.textContent = problem.detail
+                  id_alert.classList.remove('alert-success')
+                  id_alert.classList.add('alert-danger')
+                  id_alert.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
+                id_alert.textContent = `New password for "${email}" has been verified. You can now sign in.`
+                id_alert.classList.add('alert-success')
+                id_alert.classList.remove('alert-danger')
+                id_alert.hidden = false
               }
             )
           }