https://theserverside.com/auth/js/auth-forms.js

1// Wires a Register or Sign-in HTML form to Auth.register.* / Auth.signIn.*.
2//
3// Expects markup using data-register-* or data-signin-* attributes (see
4// auth/register.html and auth/login.html for the reference markup). This
5// file contains DOM wiring only - no Cognito calls happen here directly,
6// they all go through auth.js.
7(function () {
8    const ERROR_MESSAGES = {
9        EMAIL_IN_USE: 'That email is already registered. Try signing in instead.',
10        INVALID_CODE: 'That code is incorrect. Please try again.',
11        CODE_EXPIRED: 'That code has expired. Request a new one.',
12        TOO_MANY_ATTEMPTS: 'Too many attempts. Please wait a bit and try again.',
13        INVALID_INPUT: 'Please check your email address and try again.',
14        SIGNIN_FAILED: 'We could not sign you in with that email.',
15        NETWORK_ERROR: 'Could not reach the authentication service. Check your connection.',
16        NO_PENDING_REGISTRATION: 'Please enter your email again to continue.',
17        NO_PENDING_SIGNIN: 'Please enter your email again to continue.',
18        UNKNOWN: 'Something went wrong. Please try again.'
19    };
20
21    function friendlyError(err) {
22        return ERROR_MESSAGES[err && err.code] || ERROR_MESSAGES.UNKNOWN;
23    }
24
25    function setup(kind) {
26        const emailForm = document.querySelector(`[data-${kind}-email-form]`);
27        if (!emailForm) return;
28
29        const emailStep = document.querySelector(`[data-${kind}-email-step]`);
30        const codeStep = document.querySelector(`[data-${kind}-code-step]`);
31        const codeForm = document.querySelector(`[data-${kind}-code-form]`);
32        const destinationEl = document.querySelector(`[data-${kind}-destination]`);
33        const changeBtn = document.querySelector(`[data-${kind}-change]`);
34        const resendBtn = document.querySelector(`[data-${kind}-resend]`);
35        const statusEl = document.querySelector('[data-auth-status]');
36
37        const api = kind === 'register' ? Auth.register : Auth.signIn;
38
39        function showStatus(message, isError) {
40            if (!statusEl) return;
41            statusEl.textContent = message;
42            statusEl.hidden = !message;
43            statusEl.classList.toggle('alert-error', !!isError);
44            statusEl.classList.toggle('alert-info', !isError);
45        }
46
47        function showCodeStep(destination) {
48            if (destinationEl) destinationEl.textContent = destination;
49            if (emailStep) emailStep.hidden = true;
50            if (codeStep) codeStep.hidden = false;
51        }
52
53        function showEmailStep() {
54            if (codeStep) codeStep.hidden = true;
55            if (emailStep) emailStep.hidden = false;
56        }
57
58        function setBusy(form, busy) {
59            const button = form.querySelector('button[type="submit"]');
60            if (button) button.disabled = busy;
61        }
62
63        emailForm.addEventListener('submit', async (event) => {
64            event.preventDefault();
65            showStatus('', false);
66            const email = emailForm.querySelector(`[data-${kind}-email]`).value.trim();
67            if (!email) return;
68
69            setBusy(emailForm, true);
70            try {
71                const { destination } = await api.start(email);
72                showCodeStep(destination || email);
73            } catch (err) {
74                showStatus(friendlyError(err), true);
75            } finally {
76                setBusy(emailForm, false);
77            }
78        });
79
80        if (codeForm) {
81            codeForm.addEventListener('submit', async (event) => {
82                event.preventDefault();
83                showStatus('', false);
84                const code = codeForm.querySelector(`[data-${kind}-code]`).value.trim();
85                if (!code) return;
86
87                setBusy(codeForm, true);
88                try {
89                    const result = await api.confirm(code);
90                    if (kind === 'register' && result && result.authenticated === false) {
91                        showStatus('Almost done — we just sent you one more code.', false);
92                        codeForm.reset();
93                        return;
94                    }
95                    window.location.href = '/';
96                } catch (err) {
97                    showStatus(friendlyError(err), true);
98                } finally {
99                    setBusy(codeForm, false);
100                }
101            });
102        }
103
104        if (changeBtn) {
105            changeBtn.addEventListener('click', () => {
106                showStatus('', false);
107                if (codeForm) codeForm.reset();
108                showEmailStep();
109            });
110        }
111
112        if (resendBtn) {
113            resendBtn.addEventListener('click', async () => {
114                showStatus('', false);
115                resendBtn.disabled = true;
116                try {
117                    const { destination } = await api.resend();
118                    if (destinationEl && destination) destinationEl.textContent = destination;
119                    showStatus('A new code has been sent.', false);
120                } catch (err) {
121                    showStatus(friendlyError(err), true);
122                } finally {
123                    resendBtn.disabled = false;
124                }
125            });
126        }
127    }
128
129    // Wires any [data-mock-in] button to Auth.mockIn(), using whichever
130    // email field is present on the page. Auth.mockIn only exists at all
131    // when AUTH_CONFIG.mode === 'mock', so this is the one place that
132    // feature-detects it - no mode flag is checked anywhere else.
133    function setupMockIn() {
134        const button = document.querySelector('[data-mock-in]');
135        if (!button || typeof Auth.mockIn !== 'function') return;
136
137        button.hidden = false;
138        button.addEventListener('click', () => {
139            const emailInput = document.querySelector('[data-register-email], [data-signin-email]');
140            Auth.mockIn(emailInput ? emailInput.value : '');
141            window.location.href = '/';
142        });
143    }
144
145    document.addEventListener('DOMContentLoaded', () => {
146        setup('register');
147        setup('signin');
148        setupMockIn();
149    });

150})();