In /my_account/sign_up/index.html.jst use variables id_XXX instead of document.getEle...

diff --git a/ids.sh b/ids.sh
new file mode 100755 (executable)
index 0000000..1b3d62e
--- /dev/null
+++ b/ids.sh
@@ -0,0 +1,5 @@
+#!/bin/sh
+sed -e 's/#/\n#/g' |sed -ne "s/#'\?\([A-Za-z0-9_-]\+\).*/\1/p" |LC_ALL=C sort |uniq >temp.a
+sed -e 's/-/_/g' <temp.a >temp.b
+paste temp.a temp.b |sed -e "s/\(.*\)\t\(.*\)/let id_\2 = document.getElementById('\1')/"
+rm -f temp.a temp.b

diff --git a/my_account/sign_up/index.html.jst b/my_account/sign_up/index.html.jst
index 006d9a7..2aa7166 100644 (file)
--- a/my_account/sign_up/index.html.jst
+++ b/my_account/sign_up/index.html.jst
@@ -192,182 +192,210 @@ return async env => {
       //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())
@@ -375,12 +403,12 @@ return async env => {
               }
             )
 
-            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())