EcoTrack/signup.html at main · ParthMozarkar/EcoTrack · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign Up - Carbon Footprint Tracker</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body class="auth-page">
    <div class="auth-container">
        <div class="auth-card">
            <div class="auth-header">
                <h1>Carbon Footprint Tracker</h1>
                <p class="subtitle">Create your account</p>
            </div>

            <form id="signupForm" class="auth-form">
                <div class="form-group">
                    <label for="name">Name</label>
                    <input type="text" id="name" name="name" required autocomplete="name" placeholder="Your name">
                </div>

                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="email" id="email" name="email" required autocomplete="email" placeholder="your@email.com">
                </div>

                <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" id="password" name="password" required autocomplete="new-password" placeholder="At least 6 characters" minlength="6">
                </div>

                <div class="form-group">
                    <label for="confirmPassword">Confirm Password</label>
                    <input type="password" id="confirmPassword" name="confirmPassword" required autocomplete="new-password" placeholder="Re-enter your password">
                </div>

                <div id="signupError" class="error-message" style="display: none;"></div>

                <button type="submit" id="signupBtn" class="btn-primary">Create Account</button>
            </form>

            <div class="auth-footer">
                <p>Already have an account? <a href="login.html">Sign in</a></p>
            </div>
        </div>
    </div>

    <script src="auth.js"></script>
    <script>
        // Redirect if already logged in
        document.addEventListener('DOMContentLoaded', () => {
            redirectIfAuthenticated();

            const form = document.getElementById('signupForm');
            const errorDiv = document.getElementById('signupError');
            const signupBtn = document.getElementById('signupBtn');

            // Password confirmation validation
            const passwordInput = document.getElementById('password');
            const confirmPasswordInput = document.getElementById('confirmPassword');

            function validatePasswords() {
                if (confirmPasswordInput.value && passwordInput.value !== confirmPasswordInput.value) {
                    confirmPasswordInput.setCustomValidity('Passwords do not match');
                } else {
                    confirmPasswordInput.setCustomValidity('');
                }
            }

            passwordInput.addEventListener('input', validatePasswords);
            confirmPasswordInput.addEventListener('input', validatePasswords);

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

                const name = document.getElementById('name').value.trim();
                const email = document.getElementById('email').value.trim();
                const password = document.getElementById('password').value;
                const confirmPassword = document.getElementById('confirmPassword').value;

                errorDiv.style.display = 'none';

                // Validate passwords match
                if (password !== confirmPassword) {
                    errorDiv.textContent = 'Passwords do not match';
                    errorDiv.style.display = 'block';
                    return;
                }

                signupBtn.disabled = true;
                signupBtn.textContent = 'Creating account...';

                const result = signupUser(email, password, name);

                if (result.success) {
                    window.location.href = 'index.html';
                } else {
                    errorDiv.textContent = result.error || 'Signup failed';
                    errorDiv.style.display = 'block';
                    signupBtn.disabled = false;
                    signupBtn.textContent = 'Create Account';
                }
            });
        });
    </script>
</body>
</html>