my_account/sign_up/index.html.jst

   1 return async env => {
   2   let breadcrumbs = await _require('/breadcrumbs.jst')
   3   let navbar = await _require('/navbar.jst')
   4
   5   await navbar(
   6     env,
   7     // head
   8     async _out => {},
   9     // body
  10     async _out => {
  11       await breadcrumbs(env, _out)
  12
  13       p {'Signing up allows you to leave comments on our blog and receive communications from us.'}
  14
  15       div.accordion#accordion(role="tablist" aria-multiselectable="true") {
  16         div.card {
  17           div.card-header#step-1-heading(role="tab") {
  18             a.h5(data-toggle="collapse" data-parent="#accordion" href="#step-1-collapse" aria-expanded="true" aria-controls="step-1-collapse") {
  19               'Your details'
  20             }
  21           }
  22           div#step-1-collapse.collapse.show(role="tabpanel" aria-labelledby="step-1-heading" data-parent="#accordion") {
  23             div.card-body {
  24               div.row {
  25                 div.col-md-6 {
  26                   div.form-group {
  27                     label.form-label(for="given-names") {'Given names *'}
  28                     input.form-control#given-names(type="text" placeholder="Your given names" required="required" maxlength=256) {}
  29                   }
  30                 }
  31                 div.col-md-6 {
  32                   div.form-group {
  33                     label.form-label(for="family-name") {'Family name'}
  34                     input.form-control#family-name(type="text" placeholder="Your family name" maxlength=256) {}
  35                   }
  36                 }
  37               }
  38               div.row {
  39                 div.col-md-6 {
  40                   div.form-group {
  41                     label.form-label(for="email") {'Email *'}
  42                     input.form-control#email(type="email" placeholder="Your email address" required="required" maxlength=256) {}
  43                   }
  44                 }
  45                 div.col-md-6 {
  46                   div.form-group {
  47                     label.form-label(for="password") {'Password *'}
  48                     input.form-control#password(type="password" placeholder="New password" required="required" minlength=8 maxlength=256) {}
  49                   }
  50                 }
  51               }
  52               div.row {
  53                 div.col-md-12 {
  54                   div.custom-control.custom-checkbox {
  55                     input.custom-control-input#contact-me(type="checkbox" checked="checked") {}
  56                     ' '
  57                     label.custom-control-label(for="contact-me") {
  58                       'Contact me by email with updates and special offers'
  59                     }
  60                   }
  61                 }
  62               }
  63               div.row.align-items-center {
  64                 div.'col-md-6' {
  65                   div.form-group {
  66                     label.form-label(for="verification-code") {'Verification code *'}
  67                     input.form-control#verification-code(type="text" placeholder="Type the code shown to the right" required="required" minlength=6 maxlength=6) {}
  68                   }
  69                 }
  70                 div.'col-md-4' {
  71                   img#verification-image(src="/api/verification_image.png?seq=0" width=300 height=150) {}
  72                 }
  73                 div.'col-md-2'.my-auto.text-center {
  74                   input.btn.btn-outline-secondary#'new-code'(type="button" value="New code") {}
  75                 }
  76               }
  77
  78               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.'}
  79
  80               input.btn.btn-success#step-1-continue(type="button" value="Continue") {}
  81             }
  82           }
  83         }
  84         div.card {
  85           div.card-header#step-2-heading(role="tab") {
  86             a.h5.collapsed(data-toggle="collapse" data-parent="#accordion" href="#step-2-collapse" aria-expanded="false" aria-controls="step-2-collapse") {
  87               'Create account'
  88             }
  89           }
  90           div#step-2-collapse.collapse(role="tabpanel" aria-labelledby="step-2-heading" data-parent="#accordion") {
  91             div.card-body {
  92               p#step-2-message {'Please enter your details first.'}
  93
  94               input.btn.btn-outline-secondary#step-2-back(type="button" value="Back") {}
  95             }
  96           }
  97         }
  98         div.card {
  99           div.card-header#step-3-heading(role="tab") {
 100             a.h5.collapsed(data-toggle="collapse" data-parent="#accordion" href="#step-3-collapse" aria-expanded="false" aria-controls="step-3-collapse") {
 101               'Send verification email'
 102             }
 103           }
 104           div#step-3-collapse.collapse(role="tabpanel" aria-labelledby="step-3-heading" data-parent="#accordion") {
 105             div.card-body {
 106               p#step-3-message {'Please create your account first.'}
 107
 108               input.btn.btn-outline-secondary#step-3-back(type="button" value="Back") {}
 109             }
 110           }
 111         }
 112       }
 113
 114       p.mt-2 {'* These fields are required.'}
 115     },
 116     // scripts
 117     async _out => {
 118       script(src="/api/sign_up.js") {}
 119
 120       script {
 121         $(document).ready(
 122           () => {
 123             $('#step-1-continue').click(
 124               async () => {
 125                 if (
 126                   document.getElementById('given-names').reportValidity() &&
 127                     document.getElementById('family-name').reportValidity() &&
 128                     document.getElementById('email').reportValidity() &&
 129                     document.getElementById('password').reportValidity() &&
 130                     document.getElementById('verification-code').reportValidity()
 131                 ) {
 132                   try {
 133                     await sign_up(
 134                       document.getElementById('email').value,
 135                       document.getElementById('verification-code').value
 136                       document.getElementById('given-names').value,
 137                       document.getElementById('family-name').value,
 138                       document.getElementById('password').value
 139                     )
 140                   }
 141                   catch (e) {
 142                     $('#step-2-message').text(e.message)
 143                     $('#step-2-collapse').collapse('show')
 144                     return
 145                   }
 146                   $('#step-2-message').text(`Your account with email "${document.getElementById('email').value}" has been created.`)
 147                   $('#step-2-collapse').collapse('show')
 148                 }
 149               }
 150             )
 151
 152             $('#step-2-back').click(
 153               () => {$('#step-1-collapse').collapse('show')}
 154             )
 155
 156             $('#step-3-back').click(
 157               () => {$('#step-2-collapse').collapse('show')}
 158             )
 159
 160
 161             let image_seq = 1
 162             $('#new-code').click(
 163               () => {
 164                 document.getElementById('verification-image').src = `/api/verification_image.png?seq=${image_seq}`
 165                 image_seq += 1
 166               }
 167             )
 168           }
 169         )
 170       }
 171     }
 172   )
 173 }