Disable the "Create account" button and null draft when sign up form is blank

diff --git a/api/account/sign_up/get_draft.json.jst b/api/account/sign_up/get_draft.json.jst
index 829cbe3..cf696b8 100644 (file)
--- 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 (file)
--- 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(