//script(src="/js/utils.js") {}
script {
- let input_semaphore = new BinarySemaphore(false)
- ;(
- async () => {
- while (true) {
- await input_semaphore.acquire()
- await new Promise(resolve => setTimeout(resolve, 3000))
- input_semaphore.try_acquire()
- await api_call(
- '/api/account/sign_up/set_draft.json',
- document.getElementById('card-1-create-account').disabled ?
- null :
- {
- email: document.getElementById('email').value.slice(0, 256).toLowerCase(),
- given_names: document.getElementById('given-names').value.slice(0, 256),
- family_name: document.getElementById('family-name').value.slice(0, 256),
- contact_me: document.getElementById('contact-me').checked ? true : false
- }
- )
+ document.addEventListener(
+ 'DOMContentLoaded',
+ () => {
+ let id_accordion = document.getElementById('accordion')
+ let id_card_1 = document.getElementById('card-1')
+ let id_card_1_collapse = document.getElementById('card-1-collapse')
+ let id_card_1_create_account = document.getElementById('card-1-create-account')
+ let id_card_1_cross = document.getElementById('card-1-cross')
+ let id_card_1_heading = document.getElementById('card-1-heading')
+ let id_card_1_message = document.getElementById('card-1-message')
+ let id_card_1_new_code = document.getElementById('card-1-new-code')
+ let id_card_1_spinner = document.getElementById('card-1-spinner')
+ let id_card_1_tick = document.getElementById('card-1-tick')
+ let id_card_2 = document.getElementById('card-2')
+ let id_card_2_back = document.getElementById('card-2-back')
+ let id_card_2_collapse = document.getElementById('card-2-collapse')
+ let id_card_2_cross = document.getElementById('card-2-cross')
+ let id_card_2_heading = document.getElementById('card-2-heading')
+ let id_card_2_message = document.getElementById('card-2-message')
+ let id_card_2_resend_email = document.getElementById('card-2-resend-email')
+ let id_card_2_spinner = document.getElementById('card-2-spinner')
+ let id_card_2_tick = document.getElementById('card-2-tick')
+ let id_contact_me = document.getElementById('contact-me')
+ let id_email = document.getElementById('email')
+ let id_family_name = document.getElementById('family-name')
+ let id_form = document.getElementById('form')
+ let id_given_names = document.getElementById('given-names')
+ let id_password = document.getElementById('password')
+ let id_verification_code = document.getElementById('verification-code')
+ let id_verification_image = document.getElementById('verification-image')
+
+ let input_semaphore = new BinarySemaphore(false)
+ ;(
+ async () => {
+ while (true) {
+ await input_semaphore.acquire()
+ await new Promise(resolve => setTimeout(resolve, 3000))
+ input_semaphore.try_acquire()
+ await api_call(
+ '/api/account/sign_up/set_draft.json',
+ id_card_1_create_account.disabled ?
+ null :
+ {
+ email: id_email.value.slice(0, 256).toLowerCase(),
+ given_names: id_given_names.value.slice(0, 256),
+ family_name: id_family_name.value.slice(0, 256),
+ contact_me: id_contact_me.checked ? true : false
+ }
+ )
+ }
+ }
+ )() // ignore returned promise (start thread)
+
+ let card_1_edited = in_draft => {
+ if (in_draft)
+ input_semaphore.release()
+
+ id_card_1_create_account.disabled =
+ id_given_names.value.length === 0 &&
+ id_family_name.value.length === 0 &&
+ id_contact_me.checked &&
+ id_email.value.length === 0 &&
+ id_verification_code.value.length === 0
+ id_card_1_tick.hidden = true
+ id_card_1_cross.hidden = true
+ id_card_1_spinner.hidden = true
+ id_card_1_message.hidden = true
+
+ id_card_2_resend_email.disabled = true
+ id_card_2_tick.hidden = true
+ id_card_2_cross.hidden = true
+ id_card_2_spinner.hidden = true
+ id_card_2_message.hidden = true
}
- }
- )() // ignore returned promise (start thread)
-
- let card_1_edited = in_draft => {
- if (in_draft)
- input_semaphore.release()
-
- document.getElementById('card-1-create-account').disabled =
- document.getElementById('given-names').value.length === 0 &&
- document.getElementById('family-name').value.length === 0 &&
- document.getElementById('contact-me').checked &&
- document.getElementById('email').value.length === 0 &&
- document.getElementById('verification-code').value.length === 0
- document.getElementById('card-1-tick').hidden = true
- document.getElementById('card-1-cross').hidden = true
- document.getElementById('card-1-spinner').hidden = true
- document.getElementById('card-1-message').hidden = true
-
- document.getElementById('card-2-resend-email').disabled = true
- document.getElementById('card-2-tick').hidden = true
- document.getElementById('card-2-cross').hidden = true
- document.getElementById('card-2-spinner').hidden = true
- document.getElementById('card-2-message').hidden = true
- }
- let details
- let card_1 = async () => {
- document.getElementById('card-1-tick').hidden = true
- document.getElementById('card-1-cross').hidden = true
- document.getElementById('card-1-spinner').hidden = true
- // the below causes an ugly flicker, so just keep the message
- //document.getElementById('card-1-message').hidden = true
-
- if (!document.getElementById('form').checkValidity()) {
- document.getElementById('form').classList.add('was-validated');
- document.getElementById('card-1-cross').hidden = false
- return false
- }
- document.getElementById('form').classList.remove('was-validated');
-
- details = {
- email: document.getElementById('email').value.slice(0, 256).toLowerCase(),
- given_names: document.getElementById('given-names').value.slice(0, 256),
- family_name: document.getElementById('family-name').value.slice(0, 256),
- password: document.getElementById('password').value.slice(0, 256),
- contact_me: document.getElementById('contact-me').checked ? true : false
- }
+ let details
+ let card_1 = async () => {
+ id_card_1_tick.hidden = true
+ id_card_1_cross.hidden = true
+ id_card_1_spinner.hidden = true
+ // the below causes an ugly flicker, so just keep the message
+ //id_card_1_message.hidden = true
+
+ if (!id_form.checkValidity()) {
+ id_form.classList.add('was-validated');
+ id_card_1_cross.hidden = false
+ return false
+ }
+ id_form.classList.remove('was-validated');
+
+ details = {
+ email: id_email.value.slice(0, 256).toLowerCase(),
+ given_names: id_given_names.value.slice(0, 256),
+ family_name: id_family_name.value.slice(0, 256),
+ password: id_password.value.slice(0, 256),
+ contact_me: id_contact_me.checked ? true : false
+ }
- document.getElementById('card-1-spinner').hidden = false
- try {
- await api_call(
- '/api/account/sign_up/create_account.json',
- document.getElementById('verification-code').value.slice(0, 6).toLowerCase(),
- details
- )
- }
- catch (error) {
- let problem = Problem.from(error)
+ id_card_1_spinner.hidden = false
+ try {
+ await api_call(
+ '/api/account/sign_up/create_account.json',
+ id_verification_code.value.slice(0, 6).toLowerCase(),
+ details
+ )
+ }
+ catch (error) {
+ let problem = Problem.from(error)
- document.getElementById('card-1-cross').hidden = false
- document.getElementById('card-1-spinner').hidden = true
+ id_card_1_cross.hidden = false
+ id_card_1_spinner.hidden = true
- document.getElementById('card-1-message').textContent = problem.detail
- //document.getElementById('card-1-message').classList.remove('text-success')
- document.getElementById('card-1-message').classList.add('text-danger')
- document.getElementById('card-1-message').hidden = false
+ id_card_1_message.textContent = problem.detail
+ //id_card_1_message.classList.remove('text-success')
+ id_card_1_message.classList.add('text-danger')
+ id_card_1_message.hidden = false
- $('#card-1-collapse').collapse('show')
- return false
- }
- document.getElementById('card-1-tick').hidden = false
- document.getElementById('card-1-spinner').hidden = true
- document.getElementById('card-1-message').textContent = `Your account with email "${details.email}" has been created.`
- //document.getElementById('card-1-message').classList.add('text-success')
- document.getElementById('card-1-message').classList.remove('text-danger')
- document.getElementById('card-1-message').hidden = false
-
- document.getElementById('card-2-resend-email').disabled = false
- document.getElementById('card-2').scrollIntoView()
- return true
- }
+ $('#card-1-collapse').collapse('show')
+ return false
+ }
+ id_card_1_tick.hidden = false
+ id_card_1_spinner.hidden = true
+ id_card_1_message.textContent = `Your account with email "${details.email}" has been created.`
+ //id_card_1_message.classList.add('text-success')
+ id_card_1_message.classList.remove('text-danger')
+ id_card_1_message.hidden = false
+
+ id_card_2_resend_email.disabled = false
+ id_card_2.scrollIntoView()
+ return true
+ }
- let card_2 = async () => {
- document.getElementById('card-2-tick').hidden = true
- document.getElementById('card-2-cross').hidden = true
- document.getElementById('card-2-spinner').hidden = false
- // the below causes an ugly flicker, so just keep the message
- //document.getElementById('card-2-message').hidden = true
-
- try {
- await api_call(
- '/api/account/sign_up/send_email_verification_link.json',
- details.email
- )
- }
- catch (error) {
- let problem = Problem.from(error)
+ let card_2 = async () => {
+ id_card_2_tick.hidden = true
+ id_card_2_cross.hidden = true
+ id_card_2_spinner.hidden = false
+ // the below causes an ugly flicker, so just keep the message
+ //id_card_2_message.hidden = true
+
+ try {
+ await api_call(
+ '/api/account/sign_up/send_email_verification_link.json',
+ details.email
+ )
+ }
+ catch (error) {
+ let problem = Problem.from(error)
- document.getElementById('card-2-cross').hidden = false
- document.getElementById('card-2-spinner').hidden = true
+ id_card_2_cross.hidden = false
+ id_card_2_spinner.hidden = true
- document.getElementById('card-2-message').textContent = problem.detail
- //document.getElementById('card-2-message').classList.remove('text-success')
- document.getElementById('card-2-message').classList.add('text-danger')
- document.getElementById('card-2-message').hidden = false
+ id_card_2_message.textContent = problem.detail
+ //id_card_2_message.classList.remove('text-success')
+ id_card_2_message.classList.add('text-danger')
+ id_card_2_message.hidden = false
- $('#card-2-collapse').collapse('show')
- return false
- }
- document.getElementById('card-2-tick').hidden = false
- document.getElementById('card-2-spinner').hidden = true
-
- document.getElementById('card-2-message').textContent = `Email verification link has been sent to "${details.email}". Please check your email for next steps.`
- //document.getElementById('card-2-message').classList.add('text-success')
- document.getElementById('card-2-message').classList.remove('text-danger')
- document.getElementById('card-2-message').hidden = false
- return true
- }
+ $('#card-2-collapse').collapse('show')
+ return false
+ }
+ id_card_2_tick.hidden = false
+ id_card_2_spinner.hidden = true
+
+ id_card_2_message.textContent = `Email verification link has been sent to "${details.email}". Please check your email for next steps.`
+ //id_card_2_message.classList.add('text-success')
+ id_card_2_message.classList.remove('text-danger')
+ id_card_2_message.hidden = false
+ return true
+ }
- document.addEventListener(
- 'DOMContentLoaded',
- () => {
- document.getElementById('given-names').addEventListener(
+ id_given_names.addEventListener(
'input',
() => {card_1_edited(true)}
)
- document.getElementById('family-name').addEventListener(
+ id_family_name.addEventListener(
'input',
() => {card_1_edited(true)}
)
- document.getElementById('email').addEventListener(
+ id_email.addEventListener(
'input',
() => {card_1_edited(true)}
)
- document.getElementById('password').addEventListener(
+ id_password.addEventListener(
'input',
() => {card_1_edited(false)}
)
- document.getElementById('contact-me').addEventListener(
+ id_contact_me.addEventListener(
'input',
() => {card_1_edited(true)}
)
- document.getElementById('verification-code').addEventListener(
+ id_verification_code.addEventListener(
'input',
() => {card_1_edited(false)}
)
let image_seq = 1
- document.getElementById('card-1-new-code').addEventListener(
+ id_card_1_new_code.addEventListener(
'click',
() => {
- document.getElementById('verification-image').src = `/api/verification_image.png?seq=${image_seq}`
+ id_verification_image.src = `/api/verification_image.png?seq=${image_seq}`
image_seq += 1
}
)
- document.getElementById('card-1-create-account').addEventListener(
+ id_card_1_create_account.addEventListener(
'click',
async () => {
if (await card_1() && await card_2())
}
)
- document.getElementById('card-2-back').addEventListener(
+ id_card_2_back.addEventListener(
'click',
() => {$('#card-1-collapse').collapse('show')}
)
- document.getElementById('card-2-resend-email').addEventListener(
+ id_card_2_resend_email.addEventListener(
'click',
async () => {
if (await card_2())