Add accordion style dialog for account creation

diff --git a/css/bootstrap/_variables.scss b/css/bootstrap/_variables.scss
index c7649aa..a989e15 100644 (file)
--- a/css/bootstrap/_variables.scss
+++ b/css/bootstrap/_variables.scss
@@ -843,9 +843,9 @@ $card-spacer-y:                     .75rem !default;
 $card-spacer-x:                     1.25rem !default;
 $card-border-width:                 $border-width !default;
 $card-border-radius:                $border-radius !default;
-$card-border-color:                 rgba($black, .125) !default;
+$card-border-color:                 $gray-400 !default; //rgba($black, .125) !default;
 $card-inner-border-radius:          subtract($card-border-radius, $card-border-width) !default;
-$card-cap-bg:                       rgba($black, .03) !default;
+$card-cap-bg:                       $gray-200 !default; //rgba($black, .03) !default;
 $card-cap-color:                    null !default;
 $card-height:                       null !default;
 $card-color:                        null !default;

diff --git a/my_account/sign_up/index.html.jst b/my_account/sign_up/index.html.jst
index abe98d4..cfd6eee 100644 (file)
--- a/my_account/sign_up/index.html.jst
+++ b/my_account/sign_up/index.html.jst
@@ -12,85 +12,106 @@ return async env => {
 
       p {'Signing up allows you to leave comments on our blog and receive communications from us.'}
 
-      p {'Note: If your name is one word or does not fit given names/family name pattern, then please enter given names only. We will address you by your given names. Your given names will be visible to other users if you comment on our blog. Your email and family name will remain private.'}
-
-      div.row {
-        div.col-md-6 {
-          div.form-group {
-            label.form-label(for="given-names") {'Given names *'}
-            input.form-control#given-names(type="text" placeholder="Your given names" required="required" maxlength=256) {}
-          }
-        }
-        div.col-md-6 {
-          div.form-group {
-            label.form-label(for="family-name") {'Family name'}
-            input.form-control#family-name(type="text" placeholder="Your family name" maxlength=256) {}
+      div.accordion#accordion(role="tablist" aria-multiselectable="true") {
+        div.card {
+          div.card-header#step-1-heading(role="tab") {
+            a.h5(data-toggle="collapse" data-parent="#accordion" href="#step-1-collapse" aria-expanded="true" aria-controls="step-1-collapse") {
+              'Your details'
+            }
           }
-        }
-      }
-      div.row {
-        div.col-md-6 {
-          div.form-group {
-            label.form-label(for="email") {'Email *'}
-            input.form-control#email(type="email" placeholder="Your email address" required="required" maxlength=256) {}
+          div#step-1-collapse.collapse.show(role="tabpanel" aria-labelledby="step-1-heading" data-parent="#accordion") {
+            div.card-body {
+              div.row {
+                div.col-md-6 {
+                  div.form-group {
+                    label.form-label(for="given-names") {'Given names *'}
+                    input.form-control#given-names(type="text" placeholder="Your given names" required="required" maxlength=256) {}
+                  }
+                }
+                div.col-md-6 {
+                  div.form-group {
+                    label.form-label(for="family-name") {'Family name'}
+                    input.form-control#family-name(type="text" placeholder="Your family name" maxlength=256) {}
+                  }
+                }
+              }
+              div.row {
+                div.col-md-6 {
+                  div.form-group {
+                    label.form-label(for="email") {'Email *'}
+                    input.form-control#email(type="email" placeholder="Your email address" required="required" maxlength=256) {}
+                  }
+                }
+                div.col-md-6 {
+                  div.form-group {
+                    label.form-label(for="password") {'Password *'}
+                    input.form-control#password(type="password" placeholder="New password" required="required" minlength=8 maxlength=256) {}
+                  }
+                }
+              }
+              div.row {
+                div.col-md-12 {
+                  div.custom-control.custom-checkbox {
+                    input.custom-control-input#contact-me(type="checkbox" checked="checked") {}
+                    ' '
+                    label.custom-control-label(for="contact-me") {
+                      'Contact me by email with updates and special offers'
+                    }
+                  }
+                }
+              }
+              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="Type the code shown to the right" required="required" minlength=6 maxlength=6) {}
+                  }
+                }
+                div.'col-md-4' {
+                  img#verification-image(src="/api/verification_image.png?seq=0" width=300 height=150) {}
+                }
+                div.'col-md-2'.my-auto.text-center {
+                  input.btn.btn-outline-secondary#'new-code'(type="button" value="New code") {}
+                }
+              }
+
+              p.mt-3 {'Note: If your name is one word or does not fit given names/family name pattern, then please enter given names only. Your given names are visible to other users if you comment on our blog. Your email and family name remain private.'}
+
+              input.btn.btn-success#step-1-continue(type="button" value="Continue") {}
+            }
           }
         }
-        div.col-md-6 {
-          div.form-group {
-            label.form-label(for="password") {'Password *'}
-            input.form-control#password(type="password" placeholder="New password" required="required" minlength=8 maxlength=256) {}
+        div.card {
+          div.card-header#step-2-heading(role="tab") {
+            a.h5.collapsed(data-toggle="collapse" data-parent="#accordion" href="#step-2-collapse" aria-expanded="false" aria-controls="step-2-collapse") {
+              'Create account'
+            }
           }
-        }
-      }
-      div.row {
-        div.col-md-12 {
-          div.custom-control.custom-checkbox {
-            input.custom-control-input#contact-me(type="checkbox" checked="checked") {}
-            ' '
-            label.custom-control-label(for="contact-me") {
-              'Contact me by email with updates and special offers'
+          div#step-2-collapse.collapse(role="tabpanel" aria-labelledby="step-2-heading" data-parent="#accordion") {
+            div.card-body {
+              p#step-2-message {'Please enter your details first.'}
+
+              input.btn.btn-outline-secondary#step-2-back(type="button" value="Back") {}
             }
           }
         }
-      }
-      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="Type the code shown to the right" required="required" minlength=6 maxlength=6) {}
+        div.card {
+          div.card-header#step-3-heading(role="tab") {
+            a.h5.collapsed(data-toggle="collapse" data-parent="#accordion" href="#step-3-collapse" aria-expanded="false" aria-controls="step-3-collapse") {
+              'Send verification email'
+            }
           }
-        }
-        div.'col-md-3' {
-          img#verification-image(src="/api/verification_image.png?seq=0" width=300 height=150) {}
-        }
-        div.'col-md-3'.my-auto.text-center {
-          input.btn.btn-outline-secondary#'generate-new-code'(type="button" value="Generate new code") {}
-        }
-      }
-      div.row {
-        div.col-md-12 {
-          input.btn.btn-success#submit(type="button" value="Create account") {}
-        }
-      }
-      p.mt-2 {'* These fields are required.'}
+          div#step-3-collapse.collapse(role="tabpanel" aria-labelledby="step-3-heading" data-parent="#accordion") {
+            div.card-body {
+              p#step-3-message {'Please create your account first.'}
 
-      // hidden part
-      div#message-modal.modal.fade(role="dialog") {
-        div.modal-dialog {
-          div.modal-content {
-            div.modal-header {
-              span.h5.modal-title {'Message'}
-            }
-            div#message-modal-message.modal-body {
-            }
-            div.modal-footer {
-              button.btn.btn-outline-secondary(type="button" data-dismiss="modal") {
-                'Close'
-              }
+              input.btn.btn-outline-secondary#step-3-back(type="button" value="Back") {}
             }
           }
         }
       }
+
+      p.mt-2 {'* These fields are required.'}
     },
     // scripts
     async _out => {
@@ -99,7 +120,7 @@ return async env => {
       script {
         $(document).ready(
           () => {
-            $('#submit').click(
+            $('#step-1-continue').click(
               async () => {
                 if (
                   document.getElementById('given-names').reportValidity() &&
@@ -118,18 +139,27 @@ return async env => {
                     )
                   }
                   catch (e) {
-                    $('#message-modal-message').text(e.message)
-                    $('#message-modal').modal('show')
+                    $('#step-2-message').text(e.message)
+                    $('#step-2-collapse').collapse('show')
                     return
                   }
-                  $('#message-modal-message').text(`Your account with email "${document.getElementById('email').value}" has been created.`)
-                  $('#message-modal').modal('show')
+                  $('#step-2-message').text(`Your account with email "${document.getElementById('email').value}" has been created.`)
+                  $('#step-2-collapse').collapse('show')
                 } 
               }
             )
 
+            $('#step-2-back').click(
+              () => {$('#step-1-collapse').collapse('show')}
+            )
+
+            $('#step-3-back').click(
+              () => {$('#step-2-collapse').collapse('show')}
+            )
+
+
             let image_seq = 1
-            $('#generate-new-code').click(
+            $('#new-code').click(
               () => {
                 document.getElementById('verification-image').src = `/api/verification_image.png?seq=${image_seq}`
                 image_seq += 1