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/utils.js") {}
  92
  93       script {
  94         let step_1 = async () => {
  95           if (!document.getElementById('email').reportValidity()) {
  96             $('#step-1-tick').hide()
  97             $('#step-1-cross').show()
  98             //$('#step-1-spinner').hide()
  99             return false
 100           }
 101           $('#step-1-tick').show()
 102           $('#step-1-cross').hide()
 103           //$('#step-1-spinner').hide()
 104           return true
 105         }
 106
 107         let step_2 = async () => {
 108           $('#step-2-tick').hide()
 109           $('#step-2-cross').hide()
 110           $('#step-2-spinner').show()
 111           document.getElementById('step-1').scrollIntoView()
 112
 113           let email
 114           try {
 115             email = document.getElementById('email').value.slice(0, 256).toLowerCase()
 116             await api_call(
 117               '/api/account/sign_up/send_email_verification_link.json',
 118               email
 119             )
 120           }
 121           catch (error) {
 122             let problem = Problem.from(error)
 123
 124             $('#step-2-tick').hide()
 125             $('#step-2-cross').show()
 126             $('#step-2-spinner').hide()
 127
 128             document.getElementById('step-2-message').textContent = problem.detail
 129             $('#step-2-collapse').collapse('show')
 130             return false
 131           }
 132           $('#step-2-tick').show()
 133           $('#step-2-cross').hide()
 134           $('#step-2-spinner').hide()
 135
 136           document.getElementById('step-2-message').textContent = `Email verification link has been sent to "${email}". Please check your email for next steps.`
 137           return true
 138         }
 139
 140         document.addEventListener(
 141           'DOMContentLoaded',
 142           () => {
 143             document.getElementById('step-1-continue').addEventListener(
 144               'click',
 145               async () => {
 146                 if (await step_1() && await step_2())
 147                   $('#step-2-collapse').collapse('show')
 148               }
 149             )
 150
 151             document.getElementById('step-2-back').addEventListener(
 152               'click',
 153               () => {$('#step-1-collapse').collapse('show')}
 154             )
 155
 156             document.getElementById('step-2-resend-email').addEventListener(
 157               'click',
 158               async () => {
 159                 if (await step_2())
 160                   $('#step-3-collapse').collapse('show')
 161               }
 162             )
 163           }
 164         )
 165       }
 166     }
 167   )
 168 }