In /my_account/sign_up/index.html.jst improve tick, cross, spinner, message

diff --git a/my_account/sign_up/index.html.jst b/my_account/sign_up/index.html.jst
index d3951cd..4dfacc3 100644 (file)
--- a/my_account/sign_up/index.html.jst
+++ b/my_account/sign_up/index.html.jst
@@ -192,21 +192,30 @@ return async env => {
         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
+          document.getElementById('card-1-message').hidden = true
+
+          document.getElementById('card-2-resend-email').disabled = true
+          document.getElementById('card-2-message').hidden = true
         }
 
         let details
         let card_1 = async () => {
+          document.getElementById('card-1-tick').hidden = true
+          document.getElementById('card-1-cross').hidden = true
+          document.getElementById('card-1-spinner').hidden = true
+          document.getElementById('card-1-message').hidden = true
+          document.getElementById('card-1').scrollIntoView()
+
           if (!document.getElementById('form').checkValidity()) {
             document.getElementById('form').classList.add('was-validated');
-            document.getElementById('card-1-tick').hidden = true
             document.getElementById('card-1-cross').hidden = false
-            //document.getElementById('card-1-spinner').hidden = true
             return false
           }
           document.getElementById('form').classList.remove('was-validated');
@@ -219,6 +228,7 @@ return async env => {
             contact_me: document.getElementById('contact-me').checked ? true : false
           }
 
+          document.getElementById('card-1-spinner').hidden = false
           try {
             await api_call(
               '/api/account/sign_up/create_account.json',
@@ -229,7 +239,6 @@ return async env => {
           catch (error) {
             let problem = Problem.from(error)
 
-            document.getElementById('card-1-tick').hidden = true
             document.getElementById('card-1-cross').hidden = false
             document.getElementById('card-1-spinner').hidden = true
 
@@ -242,7 +251,6 @@ return async env => {
             return false
           }
           document.getElementById('card-1-tick').hidden = false
-          document.getElementById('card-1-cross').hidden = true
           document.getElementById('card-1-spinner').hidden = true
           document.getElementById('card-1-message').textContent = `Your account with email "${details.email}" has been created.`
           //document.getElementById('card-1-message').classList.add('text-success')
@@ -257,6 +265,7 @@ return async env => {
           document.getElementById('card-2-tick').hidden = true
           document.getElementById('card-2-cross').hidden = true
           document.getElementById('card-2-spinner').hidden = false
+          document.getElementById('card-2-message').hidden = true
           document.getElementById('card-2').scrollIntoView()
 
           try {
@@ -268,7 +277,6 @@ return async env => {
           catch (error) {
             let problem = Problem.from(error)
 
-            document.getElementById('card-2-tick').hidden = true
             document.getElementById('card-2-cross').hidden = false
             document.getElementById('card-2-spinner').hidden = true
 
@@ -281,7 +289,6 @@ return async env => {
             return false
           }
           document.getElementById('card-2-tick').hidden = false
-          document.getElementById('card-2-cross').hidden = true
           document.getElementById('card-2-spinner').hidden = true
 
           document.getElementById('card-2-message').textContent = `Email verification link has been sent to "${details.email}". Please check your email for next steps.`