In /my_account/sign_up/index.html.jst improve layout around verification code

diff --git a/my_account/sign_up/index.html.jst b/my_account/sign_up/index.html.jst
index a3fd849..05c6ce9 100644 (file)
--- a/my_account/sign_up/index.html.jst
+++ b/my_account/sign_up/index.html.jst
@@ -94,8 +94,8 @@ return async env => {
                     }
                   }
                 }
-                div.row {
-                  div.col-md-12 {
+                div.row/*.align-items-center*/ {
+                  div.col-md-6 {
                     div.custom-control.custom-checkbox {
                       if (sign_up_draft === null || sign_up_draft.contact_me)
                         input.custom-control-input#contact-me(type="checkbox" checked) {}
@@ -107,36 +107,38 @@ return async env => {
                       }
                     }
                   }
-                }
-                div.row.align-items-center {
                   div.col-md-6 {
                     div.form-group {
                       label.form-label(for="verification-code") {'Verification code *'}
-                      input.form-control#verification-code(type="text" placeholder='xxxxxx' required minlength=6 maxlength=6) {}
-                      div.invalid-feedback {'Please enter the 6 characters from the verification image to right or below. We need this to protect us from spam and bots.'}
+                      div.mb-3 {
+                        img#verification-image(src="/api/verification_image.png?seq=0" width="300px" height="150px") {}
+                      }
+                      div.input-group#valid-workaround(style="width: 300px;") {
+                        input.form-control#verification-code(type="text" placeholder='xxxxxx' required minlength=6 maxlength=6) {}
+                        div.input-group-append {
+                          button.btn.btn-outline-secondary#'card-1-new'(type="button") {
+                            div.icon24-outer.mr-2 {
+                              div.icon24-inner {_out.push(fa_redo)}
+                            }
+                            'New'
+                          }
+                        }
+                      }
+                      div.invalid-feedback(for="verification-code") {'Please enter the 6 characters from the verification image above. We need this to protect us from spam and bots.'}
                     }
                   }
-                  div.'col-md-6'.my-3 {
-                    img#verification-image(src="/api/verification_image.png?seq=0" width=300 height=150) {}
-                  }
                 }
               }
 
-              button.btn.btn-outline-secondary#'card-1-new-code'(type="button") {
-                div.icon24-outer.mr-2 {
-                  div.icon24-inner {_out.push(fa_redo)}
-                }
-                'New code'
-              }
               if (sign_up_draft !== null)
-                button.btn.btn-success.ml-3#card-1-create-account(type="button") {
+                button.btn.btn-success#card-1-create-account(type="button") {
                   div.icon24-outer.mr-2 {
                     div.icon24-inner {_out.push(fa_user_plus)}
                   }
                   'Create account'
                 }
               else
-                button.btn.btn-success.ml-3#card-1-create-account(type="button" disabled) {
+                button.btn.btn-success#card-1-create-account(type="button" disabled) {
                   div.icon24-outer.mr-2 {
                     div.icon24-inner {_out.push(fa_user_plus)}
                   }
@@ -202,7 +204,7 @@ return async env => {
             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_code = document.getElementById('card-1-new-code')
+            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')
@@ -220,6 +222,7 @@ return async env => {
             let id_form = document.getElementById('form')
             let id_given_names = document.getElementById('given-names')
             let id_password = document.getElementById('password')
+            let id_valid_workaround = document.getElementById('valid-workaround')
             let id_verification_code = document.getElementById('verification-code')
             let id_verification_image = document.getElementById('verification-image')
 
@@ -280,10 +283,23 @@ return async env => {
               //id_card_1_message.hidden = true
 
               if (!id_form.checkValidity()) {
+                // workaround for https://github.com/twbs/bootstrap/issues/23454
+                if (id_verification_code.validity.valid) {
+                  id_valid_workaround.classList.add('is-valid')
+                  id_valid_workaround.classList.remove('is-invalid')
+                }
+                else {
+                  id_valid_workaround.classList.remove('is-valid')
+                  id_valid_workaround.classList.add('is-invalid')
+                }
                 id_form.classList.add('was-validated');
+
                 id_card_1_cross.hidden = false
                 return false
               }
+              // workaround for https://github.com/twbs/bootstrap/issues/23454
+              id_valid_workaround.classList.remove('is-valid')
+              id_valid_workaround.classList.remove('is-invalid')
               id_form.classList.remove('was-validated');
 
               details = {
@@ -391,10 +407,11 @@ return async env => {
             )
 
             let image_seq = 1
-            id_card_1_new_code.addEventListener(
+            id_card_1_new.addEventListener(
               'click',
               () => {
-                id_verification_image.src = `/api/verification_image.png?seq=${image_seq}`
+                id_verification_image.src =
+                  `/api/verification_image.png?seq=${image_seq}`
                 image_seq += 1
               }
             )