fairshare/reset-password.html at main · PhilipRosedale/fairshare · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <title>Union — Reset Password</title>

    <link rel="icon" type="image/svg+xml" href="./favicon.svg">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css?v=2">
</head>
<body>

<div class="auth-container" id="resetContainer">
    <h2>Reset Password</h2>

    <div id="resetStatus" class="hidden" style="text-align:center;color:var(--dark-gray);padding:0.5rem 0 1rem;"></div>

    <form id="resetForm" class="hidden" onsubmit="handleResetSubmit(event)">
        <p style="font-size:0.9rem;color:var(--dark-gray);margin-bottom:1rem;">
            Enter a new password for your Union account.
        </p>
        <div class="form-group">
            <label>New password</label>
            <input type="password" id="newPassword" required placeholder="At least 6 characters" minlength="6" autocomplete="new-password">
        </div>
        <div class="form-group">
            <label>Confirm new password</label>
            <input type="password" id="confirmPassword" required placeholder="Re-enter password" minlength="6" autocomplete="new-password">
        </div>
        <div class="form-actions">
            <button type="submit" class="btn btn-primary" id="resetSubmitBtn">Set new password</button>
        </div>
    </form>

    <div id="resetDone" class="hidden" style="text-align:center;padding:1rem 0;">
        <p style="color:var(--dark-gray);margin-bottom:1rem;">Your password has been updated.</p>
        <a href="/" class="btn btn-primary" style="display:inline-block;text-decoration:none;">Continue to Union</a>
    </div>

    <div id="resetError" class="hidden" style="text-align:center;padding:1rem 0;">
        <p id="resetErrorText" style="color:var(--error-color,#c0392b);margin-bottom:1rem;"></p>
        <a href="/" style="color:var(--primary-color);">Back to log in</a>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/dist/umd/supabase.min.js"></script>
<script src="js/config.js"></script>
<script>
(function () {
    const client = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
    window._resetClient = client;

    const statusEl = document.getElementById('resetStatus');
    const formEl = document.getElementById('resetForm');
    const doneEl = document.getElementById('resetDone');
    const errorEl = document.getElementById('resetError');
    const errorTextEl = document.getElementById('resetErrorText');

    function showError(msg) {
        formEl.classList.add('hidden');
        statusEl.classList.add('hidden');
        errorTextEl.textContent = msg;
        errorEl.classList.remove('hidden');
    }

    function showForm() {
        statusEl.classList.add('hidden');
        errorEl.classList.add('hidden');
        formEl.classList.remove('hidden');
    }

    let recoveryReady = false;

    // supabase-js parses the recovery hash on load and fires PASSWORD_RECOVERY.
    client.auth.onAuthStateChange((event) => {
        if (event === 'PASSWORD_RECOVERY') {
            recoveryReady = true;
            showForm();
        }
    });

    // Fallback: if the hash is already gone (e.g. supabase-js consumed it
    // before we attached the listener), check getSession directly.
    (async () => {
        statusEl.textContent = 'Validating reset link…';
        statusEl.classList.remove('hidden');
        // Give onAuthStateChange a tick to fire if it's going to.
        await new Promise(r => setTimeout(r, 400));
        if (recoveryReady) return;
        try {
            const { data, error } = await client.auth.getSession();
            if (error) {
                showError(error.message);
                return;
            }
            if (data?.session) {
                showForm();
            } else {
                showError('This password reset link is invalid or has expired. Please request a new one.');
            }
        } catch (e) {
            showError(e?.message || 'Could not validate reset link.');
        }
    })();

    window.handleResetSubmit = async function (e) {
        e.preventDefault();
        const pw = document.getElementById('newPassword').value;
        const confirm = document.getElementById('confirmPassword').value;
        if (pw !== confirm) {
            alert('Passwords do not match.');
            return;
        }
        const btn = document.getElementById('resetSubmitBtn');
        btn.disabled = true;
        btn.textContent = 'Saving…';
        const { error } = await client.auth.updateUser({ password: pw });
        btn.disabled = false;
        btn.textContent = 'Set new password';
        if (error) {
            alert(error.message);
            return;
        }
        formEl.classList.add('hidden');
        doneEl.classList.remove('hidden');
    };
})();
</script>
</body>
</html>