my_account/send_verification_email/index.html.jst

   1 return async env => {
   2   let breadcrumbs = await _require('/_lib/breadcrumbs.jst')
   3   let fa_envelope = await env.site.get_min_svg('/_svg/fa_envelope.svg')
   4   let get_placeholder = await _require('/_lib/get_placeholder.jst')
   5   let get_session = await _require('/_lib/get_session.jst')
   6   let icon_cross = await env.site.get_min_svg('/_svg/icon_cross.svg')
   7   let icon_tick = await env.site.get_min_svg('/_svg/icon_tick.svg')
   8   let navbar = await _require('/_lib/navbar.jst')
   9
  10   // preload placeholder
  11   let transaction = await env.site.database.Transaction()
  12   let placeholder
  13   try {
  14     let root = await transaction.get()
  15     let session = await get_session(env, root)
  16     placeholder = await get_placeholder(env, session)
  17     await transaction.commit()
  18   }
  19   catch (error) {
  20     transaction.rollback()
  21     throw error
  22   }
  23
  24   // preload URL details if any
  25   let email =
  26     Object.prototype.hasOwnProperty.call(
  27       env.parsed_url.query,
  28       'email'
  29     ) ?
  30       decodeURIComponent(env.parsed_url.query.email) :
  31       ''
  32
  33    await navbar(
  34     env,
  35     // head
  36     async _out => {},
  37     // body
  38     async _out => {
  39       await breadcrumbs(env, _out)
  40
  41       p {'Your email is not yet verified. Check your email for next steps, or re-send the verification email below.'}
  42
  43       form#form {
  44         div.row.align-items-center {
  45           div.col-md-1 {
  46             label.form-label.mb-3(for="email") {'Email'}
  47           }
  48           div.col-md-6 {
  49             div.form-group {
  50               input.form-control#email(type="email" value=email placeholder=placeholder.email required="required" maxlength=256) {}
  51               div.invalid-feedback {'Please enter your account\'s email address.'}
  52             }
  53           }
  54           div.col-md-5 {
  55             if (email.length)
  56               button.btn.btn-success.mb-3#send-verification-email(type="button") {
  57                 div.icon24-outer.mr-2#icon {
  58                   div.icon24-inner {_out.push(fa_envelope)}
  59                 }
  60                 div.icon24-outer.mr-2#tick(hidden) {
  61                   div.icon24-inner {_out.push(icon_tick)}
  62                 }
  63                 div.icon24-outer.mr-2#cross(hidden) {
  64                   div.icon24-inner {_out.push(icon_cross)}
  65                 }
  66                 div.icon24-outer.mr-2#spinner(hidden) {
  67                   div.icon24-inner {
  68                     div.spinner-border.spinner-border-sm(role="status") {}
  69                   }
  70                 }
  71                 'Send verification email'
  72               }
  73             else
  74               button.btn.btn-success#send-verification-email(type="button" disabled) {
  75                 div.icon24-outer.mr-2#icon {
  76                   div.icon24-inner {_out.push(fa_envelope)}
  77                 }
  78                 div.icon24-outer.mr-2#tick(hidden) {
  79                   div.icon24-inner {_out.push(icon_tick)}
  80                 }
  81                 div.icon24-outer.mr-2#cross(hidden) {
  82                   div.icon24-inner {_out.push(icon_cross)}
  83                 }
  84                 div.icon24-outer.mr-2#spinner(hidden) {
  85                   div.icon24-inner {
  86                     div.spinner-border.spinner-border-sm(role="status") {}
  87                   }
  88                 }
  89                 'Send verification email'
  90               }
  91           }
  92         }
  93       }
  94
  95       p#message(hidden) {}
  96     },
  97     // scripts
  98     async _out => {
  99       //script(src="/js/utils.js") {}
 100
 101       script {
 102         document.addEventListener(
 103           'DOMContentLoaded',
 104           () => {
 105             let id_cross = document.getElementById('cross')
 106             let id_email = document.getElementById('email')
 107             let id_form = document.getElementById('form')
 108             let id_icon = document.getElementById('icon')
 109             let id_message = document.getElementById('message')
 110             let id_send_verification_email = document.getElementById('send-verification-email')
 111             let id_spinner = document.getElementById('spinner')
 112             let id_tick = document.getElementById('tick')
 113
 114             let edited = () => {
 115               id_send_verification_email.disabled =
 116                 id_email.value.length === 0
 117               id_icon.hidden = false
 118               id_tick.hidden = true
 119               id_cross.hidden = true
 120               id_spinner.hidden = true
 121               id_message.hidden = true
 122             }
 123
 124             id_email.addEventListener('input', edited)
 125
 126             id_send_verification_email.addEventListener(
 127               'click',
 128               async () => {
 129                 id_icon.hidden = false
 130                 id_tick.hidden = true
 131                 id_cross.hidden = true
 132                 id_spinner.hidden = true
 133                 // the below causes an ugly flicker, so just keep the message
 134                 //id_message.hidden = true
 135
 136                 if (!id_form.checkValidity()) {
 137                   id_form.classList.add('was-validated');
 138
 139                   id_icon.hidden = true
 140                   id_cross.hidden = false
 141                   return
 142                 }
 143                 id_form.classList.remove('was-validated');
 144
 145                 let email = id_email.value.slice(0, 256).toLowerCase()
 146
 147                 id_icon.hidden = true
 148                 id_spinner.hidden = false
 149                 try {
 150                   await api_call(
 151                     '/api/account/send_email_verification_link.json',
 152                     email
 153                   )
 154                 }
 155                 catch (error) {
 156                   let problem = Problem.from(error)
 157
 158                   id_cross.hidden = false
 159                   id_spinner.hidden = true
 160
 161                   id_message.textContent = problem.detail
 162                   //id_message.classList.remove('text-success')
 163                   id_message.classList.add('text-danger')
 164                   id_message.hidden = false
 165                   return
 166                 }
 167                 id_tick.hidden = false
 168                 id_spinner.hidden = true
 169                 id_message.textContent = `Email verification link has been sent to "${email}". Please check your email for next steps.`
 170                 //id_message.classList.add('text-success')
 171                 id_message.classList.remove('text-danger')
 172                 id_message.hidden = false
 173               }
 174             )
 175           }
 176         )
 177       }
 178     }
 179   )
 180 }