JsWorld/passwordreset.html at main · TriumphTega/JsWorld · 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
<!DOCTYPE html>
<html>
<head>
     <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Journaly</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
      <div class="login-box">
        <form id="resetForm">
            <div class="login-header">
                <h2>Reset Password</h2>
            </div>

            <div class="input-box">
                <span class="icon"></span>
                <input type="email" id="email" required>
                <label>Email</label>
            </div>

            <button type="submit">Send Reset Email</button>

            <div class="register-link">
                <p>Remembered your password? <a href="index.html">Login</a></p>
            </div>

            <div id="errorMessage" style="color: red; margin-top: 10px; display: none;"></div>
        </form>
    </div>
      <script type="module">
        import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js';
        import { getAuth, sendPasswordResetEmail } from 'https://www.gstatic.com/firebasejs/10.7.1/firebase-auth.js';

        const firebaseConfig = {
            apiKey: "AIzaSyAWmlQgPu34uIDOsBBy4J3bdPB4QFue1iI",
            authDomain: "journal-d2fcd.firebaseapp.com",
            projectId: "journal-d2fcd",
            storageBucket: "journal-d2fcd.firebasestorage.app",
            messagingSenderId: "279588365736",
            appId: "1:279588365736:web:47c252930b9fad19fd299d",
            measurementId: "G-6QHND3BWFR"
        };

        const app = initializeApp(firebaseConfig);
        const auth = getAuth(app);

        document.addEventListener('DOMContentLoaded', () => {
            const resetForm = document.getElementById('resetForm');
            const emailInput = document.getElementById('email');
            const errorDiv = document.getElementById('errorMessage');

            function showError(message) {
                errorDiv.textContent = message;
                errorDiv.style.display = 'block';
                alert(message);
            }

            function hideError() {
                errorDiv.style.display = 'none';
            }

            resetForm.addEventListener('submit', async (e) => {
                e.preventDefault();
                hideError();

                const email = emailInput.value.trim();

                if (!email) {
                    showError('Please enter your email');
                    return;
                }

                try {
                    await sendPasswordResetEmail(auth, email);
                    alert('Password reset email sent! Check your inbox.');
                    setTimeout(() => {
                        window.location.href = '/index.html';
                    }, 2000);
                } catch (error) {
                    console.error("❌ Reset error:", error.code);

                    let errorMessage = 'Failed to send reset email: ';
                    switch (error.code) {
                        case 'auth/invalid-email':
                            errorMessage += 'Invalid email address.';
                            break;
                        case 'auth/user-not-found':
                            errorMessage += 'No account with this email.';
                            break;
                        default:
                            errorMessage += error.message;
                    }
                    showError(errorMessage);
                }
            });
        });
    </script>
</body>
</html>