summaryrefslogtreecommitdiff
path: root/http/src/contact.upphtml
diff options
context:
space:
mode:
Diffstat (limited to 'http/src/contact.upphtml')
-rw-r--r--http/src/contact.upphtml96
1 files changed, 0 insertions, 96 deletions
diff --git a/http/src/contact.upphtml b/http/src/contact.upphtml
deleted file mode 100644
index 1f425a6..0000000
--- a/http/src/contact.upphtml
+++ /dev/null
@@ -1,96 +0,0 @@
-#!
-export TITLE="Contact"
-export DESCRIPTION="Contact Joe Carstairs"
-pp "${SHARE}"/components/meta.upphtml
-#!
-
-#!
-pp "${SHARE}"/components/otp-dialog.upphtml
-#!
-
-<form class=contact-form>
- <h1>Contact me</h1>
- <p hidden class=error></p>
- <label for=name>Name</label>
- <input id=name name=name type=text required>
- <label for=email>Email</label>
- <input id=email name=email type=email required>
- <label for=message>Message</label>
- <textarea id=message name=message required></textarea>
- <input type=submit value=Send>
-</form>
-
-<section class=success hidden=true>
- <h1>You sent me a message!</h1>
- <p>Thanks for that. I may be in touch.</p>
- <p>In case you forgot, your message was this:</p>
- <hr />
- <dl>
- <dt>Name</dt> <dd class=sentname>???</dd>
- <dt>Email</dt> <dd class=sentemail>???</dd>
- <dt>Message</dt> <dd class=sentmessage>???</dd>
- </dl>
-</section>
-
-<script type=module>
- import { resendOtp } from '/scripts/contact/resend-otp.js';
- import { submitContactForm } from '/scripts/contact/submit-contact-form.js';
- import { submitOtpForm } from '/scripts/contact/submit-otp-form.js';
-
- function locateOrPanic(selector, desc, root) {
- const elem = (root ?? document).querySelector(selector);
- if (!elem) {
- alert('Technical error: could not locate ' + desc + '. Please let Joe know if you have another means of contacting him.');
- throw new Error('Could not locate ' + desc);
- }
- return elem;
- }
-
- const contactForm = locateOrPanic('form.contact-form', 'contact form');
- const otpDialog = locateOrPanic('dialog.otp-dialog', 'OTP dialog');
- const otpForm = locateOrPanic('form.otp-form', 'OTP form');
- const successSection = document.querySelector('section.success');
- let resendButtonInterval = undefined;
-
- const selectors = {
- contactForm: {
- emailElem: () => locateOrPanic('input[name=email]', 'email input', contactForm),
- errorElem: () => contactForm.querySelector('.error'),
- nameElem: () => locateOrPanic('input[name=name]', 'name input', contactForm),
- messageElem: () => locateOrPanic('textarea[name=message]', 'message textarea', contactForm),
- self: () => contactForm,
- submitButton: () => contactForm.querySelector('input[type=submit]'),
- },
- otpDialog: {
- allOtpInputs: () => otpForm.querySelectorAll('input:not([type=submit])'),
- errorElem: () => otpDialog.querySelector('.error'),
- firstOtpInput: () => otpForm.querySelector('input:not([type=submit]):first-child'),
- otpForm: () => otpForm,
- otpRecipient: () => otpDialog.querySelector('.otp-recipient'),
- otpValidUntil: () => otpDialog.querySelector('.otp-valid-until'),
- resendButton: () => otpDialog.querySelector('button.resend-button'),
- self: () => otpDialog,
- submitButton: () => otpForm.querySelector('input[type=submit]'),
- },
- successSection: {
- email: () => successSection?.querySelector('.sentemail') ?? null,
- name: () => successSection?.querySelector('.sentname') ?? null,
- message: () => successSection?.querySelector('.sentmessage') ?? null,
- self: () => successSection,
- }
- };
-
- contactForm.addEventListener('submit', async (event) => {
- event.preventDefault();
- ({ resendButtonInterval } = await submitContactForm(selectors, resendButtonInterval));
- });
-
- selectors.otpDialog.resendButton()?.addEventListener('click', async () => {
- ({ resendButtonInterval } = await resendOtp(selectors, resendButtonInterval));
- });
-
- otpForm.addEventListener('submit', async (event) => {
- event.preventDefault();
- await submitOtpForm(selectors);
- });
-</script>