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(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(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(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(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.form-group {
  48             input.form-check-input#contact-me(type="checkbox" checked="checked") {}
  49             ' '
  50             label(for="contact-me") {
  51               'Contact me by email with updates and special offers'
  52             }
  53           }
  54         }
  55       }
  56       div.row {
  57         div.'col-md-6'.vcenter {
  58           div.form-group {
  59             label(for="verification") {'Verification *'}
  60             input.form-control#verification(type="text" placeholder="Type the verification code shown to the right" required="required" minlength=6 maxlength=6) {}
  61           }
  62         }
  63         div.'col-md-3'.vcenter {
  64           img#verification-image(src="/api/verification_image.png" width=300 height=150) {}
  65         }
  66         div.'col-md-3'.vcenter.text-center {
  67           input.btn.btn-default#'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 {} // fix this later
  76       p.text-muted {
  77         strong {'*'}
  78         'These fields are required.'
  79       }
  80
  81       // hidden part
  82       div#message-modal.modal.fade(role="dialog") {
  83         div.modal-dialog {
  84           div.modal-content {
  85             div.modal-header {
  86               //button.close(type="button" data-dismiss="modal") {
  87               //  '�'
  88               //}
  89               h5.modal-title {'Message'}
  90             }
  91             div#message-modal-message.modal-body {
  92             }
  93             div.modal-footer {
  94               button.btn.btn-default(type="button" data-dismiss="modal") {
  95                 'Close'
  96               }
  97             }
  98           }
  99         }
 100       }
 101     },
 102     // scripts
 103     async _out => {
 104       script(src="/api/sign_up.js") {}
 105
 106       script {
 107         $(document).ready(
 108           () => {
 109             $('#submit').click(
 110               async () => {
 111                 if (
 112                   document.getElementById('given-names').reportValidity() &&
 113                     document.getElementById('family-name').reportValidity() &&
 114                     document.getElementById('email').reportValidity() &&
 115                     document.getElementById('password').reportValidity() &&
 116                     document.getElementById('verification').reportValidity()
 117                 ) {
 118                   try {
 119                     await sign_up(
 120                       document.getElementById('email').value,
 121                       document.getElementById('verification').value
 122                       document.getElementById('given-names').value,
 123                       document.getElementById('family-name').value,
 124                       document.getElementById('password').value
 125                     )
 126                   }
 127                   catch (e) {
 128                     $('#message-modal-message').text(e.message)
 129                     $('#message-modal').modal('show')
 130                     return
 131                   }
 132                   $('#message-modal-message').text(`Your account with email "${document.getElementById('email').value}" has been created.`)
 133                   $('#message-modal').modal('show')
 134                 }
 135               }
 136             )
 137
 138             let image_seq = 0
 139             $('#generate-new-code').click(
 140               () => {
 141                 document.getElementById('verification-image').src = `/api/verification_image.png?seq=${image_seq}`
 142                 image_seq += 1
 143               }
 144             )
 145           }
 146         )
 147       }
 148     }
 149   )
 150 }