VidyaGyan-SIH/signup.html at main · Tushyent/VidyaGyan-SIH · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign Up</title>
    <script src="https://accounts.google.com/gsi/client" async defer></script>
    <script src="translate.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jwt-decode/build/jwt-decode.min.js"></script>
    <style>
        body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background-color:#eef2f7;display:flex;justify-content:center;align-items:center;height:100vh;margin:0;color:#333}.auth-container{background:#fff;padding:2.5rem;border-radius:12px;box-shadow:0 10px 25px rgba(0,0,0,.1);text-align:center;width:380px;max-width:90%}h2{margin-bottom:2rem;color:#2c3e50;font-size:2rem}.input-group{margin-bottom:1.5rem;text-align:left}.input-group label{display:block;margin-bottom:.5rem;font-weight:600;color:#555}.input-group input{width:100%;padding:12px;border:1px solid #ddd;border-radius:8px;box-sizing:border-box;font-size:1rem;transition:border-color .3s}.input-group input:focus{outline:none;border-color:#4a90e2}.auth-button{width:100%;padding:12px;border:none;border-radius:8px;background-color:#4a90e2;color:#fff;font-size:1rem;font-weight:700;cursor:pointer;transition:background-color .3s,transform .2s}.auth-button:hover{background-color:#357bd8;transform:translateY(-2px)}.separator{margin:1.5rem 0;display:flex;align-items:center;text-align:center;color:#999}.separator:after,.separator:before{content:'';flex:1;border-bottom:1px solid #ddd}.separator:not(:empty):before{margin-right:.75em}.separator:not(:empty):after{margin-left:.75em}.google-btn-container{display:flex;justify-content:center;margin-bottom:1.5rem}.switch-link{display:block;margin-top:1rem;color:#4a90e2;text-decoration:none;transition:text-decoration .2s}.switch-link:hover{text-decoration:underline}
    </style>
</head>
<body>

<div class="auth-container">
    <h2>Create Account</h2>
    <form id="signup-form">
        <div class="input-group">
            <label for="name">Full Name</label>
            <input type="text" id="name" required>
        </div>
        <div class="input-group">
            <label for="username">Username</label>
            <input type="text" id="username" required>
        </div>
        <div class="input-group">
            <label for="password">Password</label>
            <input type="password" id="password" required>
        </div>
        <button type="submit" class="auth-button">Sign Up</button>
    </form>
    <div class="separator">or</div>
    <div class="google-btn-container">
        <div id="googleLoginBtn"></div>
    </div>
    <a href="login.html" class="switch-link">Already have an account? Log In</a>
</div>

<script>
    const backend = 'http://localhost:3000';

    document.getElementById('signup-form').addEventListener('submit', async (e) => {
        e.preventDefault();
        const name = document.getElementById('name').value;
        const username = document.getElementById('username').value;
        const password = document.getElementById('password').value;
        try {
            const res = await fetch(backend + '/signup', {
                method: 'POST',
                headers: {'Content-Type':'application/json'},
                body: JSON.stringify({ name, username, password })
            });
            const data = await res.json();
            if(res.ok){
                // --- CHANGE: Immediately "log in" the user and go to assessment ---
                sessionStorage.setItem('loggedInUser', JSON.stringify({ name: name, username: username }));
                window.location.href = 'assessment_test.html';
            } else {
                alert(data.error);
            }
        } catch(err){ alert('Server error'); console.error(err);}
    });

    // Google signup
    window.onload = function() {
        google.accounts.id.initialize({
            client_id: "709858001016-1ejbevrnot4n6tl77la9htdk9ktsfkl6.apps.googleusercontent.com",
            callback: handleCredentialResponse
        });
        google.accounts.id.renderButton(
            document.getElementById("googleLoginBtn"),
            { theme: "outline", size: "large", type: "standard", text: "signup_with" }
        );
    };

    async function handleCredentialResponse(response){
        const decoded = jwt_decode(response.credential);
        const googleUser = { name: decoded.name, email: decoded.email };
        try {
            const res = await fetch(backend + '/google-signup', {
                method:'POST',
                headers:{'Content-Type':'application/json'},
                body: JSON.stringify(googleUser)
            });
            const data = await res.json();
            if(res.ok){
                // --- CHANGE: Save both name and unique username ---
                sessionStorage.setItem('loggedInUser', JSON.stringify({ name: data.user.name, username: data.user.username }));

                if (data.isLogin) { // If the Google user already existed
                    await checkAndRedirect(data.user.username);
                } else { // If it's a new Google user
                    window.location.href = 'assessment_test.html';
                }
            } else {
                alert(data.error);
            }
        } catch(err){ alert('Server error'); console.error(err);}
    }

    async function checkAndRedirect(username) {
        try {
            const res = await fetch(`${backend}/check-assessment/${username}`);
            const data = await res.json();
            if (res.ok && data.hasTakenAssessment) {
                window.location.href = 'profile.html'; // Or foryou.html, your choice
            } else {
                window.location.href = 'assessment_test.html';
            }
        } catch (err) {
            console.error('Failed to check assessment status:', err);
            window.location.href = 'assessment_test.html';
        }
    }
</script>

</body>
</html>