In /my_account/sign_up/index.html.jst use HTML5 hidden attribute, not jquery

diff --git a/my_account/sign_up/index.html.jst b/my_account/sign_up/index.html.jst
index a7415f1..d3951cd 100644 (file)
--- a/my_account/sign_up/index.html.jst
+++ b/my_account/sign_up/index.html.jst
@@ -41,19 +41,19 @@ return async env => {
       div.accordion#accordion(role="tablist" aria-multiselectable="true") {
         div.card#card-1 {
           div.card-header#card-1-heading(role="tab") {
-            span#card-1-tick(style="display: none;") {
+            span#card-1-tick(hidden) {
               span.icon-color.pr-3 {_out.push(icon_tick)}
             }
-            span#card-1-cross(style="display: none;") {
+            span#card-1-cross(hidden) {
               span.icon-color.pr-3 {_out.push(icon_cross)}
             }
-            //span#card-1-spinner(style="display: none;") {
-            //  span.icon-color.pr-3 {
-            //    div.spinner-border(role="status") {
-            //      span.sr-only {'Loading...'}
-            //    }
-            //  }
-            //}
+            span#card-1-spinner(hidden) {
+              span.icon-color.pr-3 {
+                div.spinner-border(role="status") {
+                  span.sr-only {'Loading...'}
+                }
+              }
+            }
             a.h5(data-toggle="collapse" data-parent="#accordion" href="#card-1-collapse" aria-expanded="true" aria-controls="card-1-collapse") {
               'Create account'
             }
@@ -126,19 +126,19 @@ return async env => {
              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;") {}
+              p.'mt-3'.mb-0#card-1-message(hidden) {}
             }
           }
         }
         div.card#card-2 {
           div.card-header#card-2-heading(role="tab") {
-            span#card-2-tick(style="display: none;") {
+            span#card-2-tick(hidden) {
               span.icon-color.pr-3 {_out.push(icon_tick)}
             }
-            span#card-2-cross(style="display: none;") {
+            span#card-2-cross(hidden) {
               span.icon-color.pr-3 {_out.push(icon_cross)}
             }
-            span#card-2-spinner(style="display: none;") {
+            span#card-2-spinner(hidden) {
               span.icon-color.pr-3 {
                 div.spinner-border(role="status") {
                   span.sr-only {'Loading...'}
@@ -154,7 +154,7 @@ return async env => {
               button.btn.btn-outline-secondary#card-2-back(type="button") {'Back'}
               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;") {}
+              p.'mt-3'.mb-0#card-2-message(hidden) {}
             }
           }
         }
@@ -204,9 +204,9 @@ return async env => {
         let card_1 = async () => {
           if (!document.getElementById('form').checkValidity()) {
             document.getElementById('form').classList.add('was-validated');
-            $('#card-1-tick').hide()
-            $('#card-1-cross').show()
-            //$('#card-1-spinner').hide()
+            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');
@@ -229,34 +229,34 @@ return async env => {
           catch (error) {
             let problem = Problem.from(error)
 
-            $('#card-1-tick').hide()
-            $('#card-1-cross').show()
-            $('#card-1-spinner').hide()
+            document.getElementById('card-1-tick').hidden = true
+            document.getElementById('card-1-cross').hidden = false
+            document.getElementById('card-1-spinner').hidden = true
 
             document.getElementById('card-1-message').textContent = problem.detail
             //document.getElementById('card-1-message').classList.remove('text-success')
             document.getElementById('card-1-message').classList.add('text-danger')
-            $('#card-1-message').show()
+            document.getElementById('card-1-message').hidden = false
 
             $('#card-1-collapse').collapse('show')
             return false
           }
-          $('#card-1-tick').show()
-          $('#card-1-cross').hide()
-          $('#card-1-spinner').hide()
+          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')
           document.getElementById('card-1-message').classList.remove('text-danger')
-          $('#card-1-message').show()
+          document.getElementById('card-1-message').hidden = false
 
           document.getElementById('card-2-resend-email').disabled = false
           return true
         }
 
         let card_2 = async () => {
-          $('#card-2-tick').hide()
-          $('#card-2-cross').hide()
-          $('#card-2-spinner').show()
+          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').scrollIntoView()
 
           try {
@@ -268,26 +268,26 @@ return async env => {
           catch (error) {
             let problem = Problem.from(error)
 
-            $('#card-2-tick').hide()
-            $('#card-2-cross').show()
-            $('#card-2-spinner').hide()
+            document.getElementById('card-2-tick').hidden = true
+            document.getElementById('card-2-cross').hidden = false
+            document.getElementById('card-2-spinner').hidden = true
 
             document.getElementById('card-2-message').textContent = problem.detail
             //document.getElementById('card-2-message').classList.remove('text-success')
             document.getElementById('card-2-message').classList.add('text-danger')
-            $('#card-2-message').show()
+            document.getElementById('card-2-message').hidden = false
 
             $('#card-2-collapse').collapse('show')
             return false
           }
-          $('#card-2-tick').show()
-          $('#card-2-cross').hide()
-          $('#card-2-spinner').hide()
+          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.`
           //document.getElementById('card-2-message').classList.add('text-success')
           document.getElementById('card-2-message').classList.remove('text-danger')
-          $('#card-2-message').show()
+          document.getElementById('card-2-message').hidden = false
           return true
         }