my_account/sign_up/index.html.jst

   1 return async env => {
   2   let breadcrumbs = await _require('/_lib/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('/_lib/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="/js/api_call.js") {}
 159
 160       script {
 161         let sign_up_create_account = async (...arguments) => api_call(
 162           '/api/sign_up/create_account.json',
 163           ...arguments
 164         )
 165
 166         $(document).ready(
 167           () => {
 168             $('#step-1-continue').click(
 169               async () => {
 170                 if (
 171                   !document.getElementById('given-names').reportValidity() ||
 172                     !document.getElementById('family-name').reportValidity() ||
 173                     !document.getElementById('email').reportValidity() ||
 174                     !document.getElementById('password').reportValidity() ||
 175                     !document.getElementById('verification-code').reportValidity()
 176                 ) {
 177                   $('#step-1-tick').hide()
 178                   $('#step-1-cross').show()
 179                   //$('#step-1-spinner').hide()
 180                   return
 181                 }
 182                 $('#step-1-tick').show()
 183                 $('#step-1-cross').hide()
 184                 //$('#step-1-spinner').hide()
 185
 186                 $('#step-2-tick').hide()
 187                 $('#step-2-cross').hide()
 188                 $('#step-2-spinner').show()
 189                 try {
 190                   await sign_up_create_account(
 191                     // verification_code
 192                     document.getElementById('verification-code').value,
 193                     // details
 194                     {
 195                       email: document.getElementById('email').value,
 196                       given_names: document.getElementById('given-names').value,
 197                       family_name: document.getElementById('family-name').value,
 198                       password: document.getElementById('password').value,
 199                       contact_me: document.getElementById('contact-me').value
 200                     }
 201                   )
 202                 }
 203                 catch (e) {
 204                   $('#step-2-tick').hide()
 205                   $('#step-2-cross').show()
 206                   $('#step-2-spinner').hide()
 207
 208                   $('#step-2-message').text(e.message)
 209                   $('#step-2-collapse').collapse('show')
 210                   return
 211                 }
 212                 $('#step-2-tick').show()
 213                 $('#step-2-cross').hide()
 214                 $('#step-2-spinner').hide()
 215
 216                 $('#step-2-message').text(`Your account with email "${document.getElementById('email').value}" has been created.`)
 217                 $('#step-2-collapse').collapse('show')
 218               }
 219             )
 220
 221             $('#step-2-back').click(
 222               () => {$('#step-1-collapse').collapse('show')}
 223             )
 224
 225             $('#step-3-back').click(
 226               () => {$('#step-2-collapse').collapse('show')}
 227             )
 228
 229             let image_seq = 1
 230             $('#new-code').click(
 231               () => {
 232                 document.getElementById('verification-image').src = `/api/verification_image.png?seq=${image_seq}`
 233                 image_seq += 1
 234               }
 235             )
 236           }
 237         )
 238       }
 239     }
 240   )
 241 }