my_account/send_verification_email/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   // preload draft details if any
   8   let details = {}
   9   if (Object.prototype.hasOwnProperty.call(env.parsed_url.query, 'email'))
  10     details.email = decodeURIComponent(env.parsed_url.query.email)
  11   console.log('details', JSON.stringify(details))
  12
  13   await navbar(
  14     env,
  15     // head
  16     async _out => {},
  17     // body
  18     async _out => {
  19       await breadcrumbs(env, _out)
  20
  21       p {'Please verify your email address before signing in. Check your email for next steps, or re-send the email verification link below.'}
  22
  23       div.accordion#accordion.mb-5(role="tablist" aria-multiselectable="true") {
  24         div.card#step-1 {
  25           div.card-header#step-1-heading(role="tab") {
  26             span#step-1-tick(style="display: none;") {
  27               span.icon-color.pr-3 {_out.push(icon_tick)}
  28             }
  29             span#step-1-cross(style="display: none;") {
  30               span.icon-color.pr-3 {_out.push(icon_cross)}
  31             }
  32             //span#step-1-spinner(style="display: none;") {
  33             //  span.icon-color.pr-3 {
  34             //    div.spinner-border(role="status") {
  35             //      span.sr-only {'Loading...'}
  36             //    }
  37             //  }
  38             //}
  39             a.h5(data-toggle="collapse" data-parent="#accordion" href="#step-1-collapse" aria-expanded="true" aria-controls="step-1-collapse") {
  40               'Account details'
  41             }
  42           }
  43           div#step-1-collapse.collapse.show(role="tabpanel" aria-labelledby="step-1-heading" data-parent="#accordion") {
  44             div.card-body {
  45               div.row {
  46                 div.col-md-6 {
  47                   div.form-group {
  48                    label.form-label(for="email") {'Email *'}
  49                     input.form-control#email(type="email" value=details.email || '' placeholder="Account email address" required="required" maxlength=256) {}
  50                   }
  51                 }
  52               }
  53
  54               button.btn.btn-success#step-1-continue(type="button") {'Continue'}
  55               p.'mt-3'.mb-0 {'* This field is required.'}
  56             }
  57           }
  58         }
  59         div.card#step-2 {
  60           div.card-header#step-2-heading(role="tab") {
  61             span#step-2-tick(style="display: none;") {
  62               span.icon-color.pr-3 {_out.push(icon_tick)}
  63             }
  64             span#step-2-cross(style="display: none;") {
  65               span.icon-color.pr-3 {_out.push(icon_cross)}
  66             }
  67             span#step-2-spinner(style="display: none;") {
  68               span.icon-color.pr-3 {
  69                 div.spinner-border(role="status") {
  70                   span.sr-only {'Loading...'}
  71                 }
  72               }
  73             }
  74             a.h5.collapsed(data-toggle="collapse" data-parent="#accordion" href="#step-2-collapse" aria-expanded="false" aria-controls="step-2-collapse") {
  75               'Send email verification link'
  76             }
  77           }
  78           div#step-2-collapse.collapse(role="tabpanel" aria-labelledby="step-2-heading" data-parent="#accordion") {
  79             div.card-body {
  80               p#step-2-message {'Please enter account details first.'}
  81
  82               button.btn.btn-outline-secondary#step-2-back(type="button") {'Back'}
  83               button.btn.btn-outline-secondary.ml-3#step-2-resend-email(type="button") {'Re-send email'}
  84             }
  85           }
  86         }
  87       }
  88     },
  89     // scripts
  90     async _out => {
  91       //script(src="/js/api_call.js") {}
  92
  93       script {
  94         let api_account_sign_up_send_email_verification_link = async (...args) => api_call(
  95           '/api/account/sign_up/send_email_verification_link.json',
  96           ...args
  97         )
  98
  99         let step_1 = async () => {
 100           if (!document.getElementById('email').reportValidity()) {
 101             $('#step-1-tick').hide()
 102             $('#step-1-cross').show()
 103             //$('#step-1-spinner').hide()
 104             return false
 105           }
 106           $('#step-1-tick').show()
 107           $('#step-1-cross').hide()
 108           //$('#step-1-spinner').hide()
 109           return true
 110         }
 111
 112         let step_2 = async () => {
 113           $('#step-2-tick').hide()
 114           $('#step-2-cross').hide()
 115           $('#step-2-spinner').show()
 116           document.getElementById('step-1').scrollIntoView()
 117
 118           let email
 119           try {
 120             email = document.getElementById('email').value.slice(0, 256).toLowerCase()
 121             await api_account_sign_up_send_email_verification_link(email)
 122           }
 123           catch (error) {
 124             let problem =
 125               error instanceof Problem ?
 126                 error :
 127                 new Problem(
 128                   // title
 129                   'Bad request',
 130                   // details
 131                   (error.stack || error.message).toString()
 132                   // status
 133                   400
 134                 )
 135
 136             $('#step-2-tick').hide()
 137             $('#step-2-cross').show()
 138             $('#step-2-spinner').hide()
 139
 140             document.getElementById('step-2-message').textContent = problem.detail
 141             $('#step-2-collapse').collapse('show')
 142             return false
 143           }
 144           $('#step-2-tick').show()
 145           $('#step-2-cross').hide()
 146           $('#step-2-spinner').hide()
 147
 148           document.getElementById('step-2-message').textContent = `Email verification link has been sent to "${email}". Please check your email for next steps.`
 149           return true
 150         }
 151
 152         document.addEventListener(
 153           'DOMContentLoaded',
 154           () => {
 155             document.getElementById('step-1-continue').addEventListener(
 156               'click',
 157               async () => {
 158                 if (await step_1() && await step_2())
 159                   $('#step-2-collapse').collapse('show')
 160               }
 161             )
 162
 163             document.getElementById('step-2-back').addEventListener(
 164               'click',
 165               () => {$('#step-1-collapse').collapse('show')}
 166             )
 167
 168             document.getElementById('step-2-resend-email').addEventListener(
 169               'click',
 170               async () => {
 171                 if (await step_2())
 172                   $('#step-3-collapse').collapse('show')
 173               }
 174             )
 175           }
 176         )
 177       }
 178     }
 179   )
 180 }