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