my_account/sign_up/index.html.jst

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