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       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.'}
  16
  17       div.row {
  18         div.col-md-6 {
  19           div.form-group {
  20             label.form-label(for="given-names") {'Given names *'}
  21             input.form-control#given-names(type="text" placeholder="Your given names" required="required" maxlength=256) {}
  22           }
  23         }
  24         div.col-md-6 {
  25           div.form-group {
  26             label.form-label(for="family-name") {'Family name'}
  27             input.form-control#family-name(type="text" placeholder="Your family name" maxlength=256) {}
  28           }
  29         }
  30       }
  31       div.row {
  32         div.col-md-6 {
  33           div.form-group {
  34             label.form-label(for="email") {'Email *'}
  35             input.form-control#email(type="email" placeholder="Your email address" required="required" maxlength=256) {}
  36           }
  37         }
  38         div.col-md-6 {
  39           div.form-group {
  40             label.form-label(for="password") {'Password *'}
  41             input.form-control#password(type="password" placeholder="New password" required="required" minlength=8 maxlength=256) {}
  42           }
  43         }
  44       }
  45       div.row {
  46         div.col-md-12 {
  47           div.custom-control.custom-checkbox {
  48             input.custom-control-input#contact-me(type="checkbox" checked="checked") {}
  49             ' '
  50             label.custom-control-label(for="contact-me") {
  51               'Contact me by email with updates and special offers'
  52             }
  53           }
  54         }
  55       }
  56       div.row.align-items-center {
  57         div.'col-md-6' {
  58           div.form-group {
  59             label.form-label(for="verification-code") {'Verification code *'}
  60             input.form-control#verification-code(type="text" placeholder="Type the code shown to the right" required="required" minlength=6 maxlength=6) {}
  61           }
  62         }
  63         div.'col-md-3' {
  64           img#verification-image(src="/api/verification_image.png?seq=0" width=300 height=150) {}
  65         }
  66         div.'col-md-3'.my-auto.text-center {
  67           input.btn.btn-outline-secondary#'generate-new-code'(type="button" value="Generate new code") {}
  68         }
  69       }
  70       div.row {
  71         div.col-md-12 {
  72           input.btn.btn-success#submit(type="button" value="Create account") {}
  73         }
  74       }
  75       p.mt-2 {'* These fields are required.'}
  76
  77       // hidden part
  78       div#message-modal.modal.fade(role="dialog") {
  79         div.modal-dialog {
  80           div.modal-content {
  81             div.modal-header {
  82               span.h5.modal-title {'Message'}
  83             }
  84             div#message-modal-message.modal-body {
  85             }
  86             div.modal-footer {
  87               button.btn.btn-outline-secondary(type="button" data-dismiss="modal") {
  88                 'Close'
  89               }
  90             }
  91           }
  92         }
  93       }
  94     },
  95     // scripts
  96     async _out => {
  97       script(src="/api/sign_up.js") {}
  98
  99       script {
 100         $(document).ready(
 101           () => {
 102             $('#submit').click(
 103               async () => {
 104                 if (
 105                   document.getElementById('given-names').reportValidity() &&
 106                     document.getElementById('family-name').reportValidity() &&
 107                     document.getElementById('email').reportValidity() &&
 108                     document.getElementById('password').reportValidity() &&
 109                     document.getElementById('verification-code').reportValidity()
 110                 ) {
 111                   try {
 112                     await sign_up(
 113                       document.getElementById('email').value,
 114                       document.getElementById('verification-code').value
 115                       document.getElementById('given-names').value,
 116                       document.getElementById('family-name').value,
 117                       document.getElementById('password').value
 118                     )
 119                   }
 120                   catch (e) {
 121                     $('#message-modal-message').text(e.message)
 122                     $('#message-modal').modal('show')
 123                     return
 124                   }
 125                   $('#message-modal-message').text(`Your account with email "${document.getElementById('email').value}" has been created.`)
 126                   $('#message-modal').modal('show')
 127                 }
 128               }
 129             )
 130
 131             let image_seq = 1
 132             $('#generate-new-code').click(
 133               () => {
 134                 document.getElementById('verification-image').src = `/api/verification_image.png?seq=${image_seq}`
 135                 image_seq += 1
 136               }
 137             )
 138           }
 139         )
 140       }
 141     }
 142   )
 143 }