NotyCaption-Official/callback.html at Website · NotY215/NotyCaption-Official · 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">
    <title>Processing Login - NotyCaption</title>
    <style>
        body {
            font-family: monospace;
            background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            margin: 0;
            padding: 20px;
        }
        .container {
            text-align: center;
            background: rgba(255,255,255,0.1);
            backdrop-filter: blur(10px);
            padding: 40px;
            border-radius: 20px;
        }
        .spinner {
            width: 50px;
            height: 50px;
            border: 3px solid rgba(255,255,255,0.3);
            border-radius: 50%;
            border-top-color: #00e5ff;
            animation: spin 1s ease-in-out infinite;
            margin: 20px auto;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        .success { color: #00c853; }
        .error { color: #ff4081; }
    </style>
</head>
<body>
    <div class="container">
        <h2>🔐 NotyCaption Pro</h2>
        <div class="spinner"></div>
        <p id="message">Processing login...</p>
    </div>

    <script>
        async function processCallback() {
            const messageEl = document.getElementById('message');

            let hash = window.location.hash.substring(1);
            if (!hash && window.location.search) {
                hash = window.location.search.substring(1);
            }

            console.log('Callback processing hash:', hash);

            if (!hash) {
                messageEl.innerHTML = '<span class="error">❌ No authentication data found</span>';
                setTimeout(() => {
                    window.location.href = 'index.html';
                }, 2000);
                return;
            }

            const params = new URLSearchParams(hash);
            const access_token = params.get('access_token');
            const expires_in = params.get('expires_in');
            const error = params.get('error');

            if (error) {
                messageEl.innerHTML = `<span class="error">❌ Login Error: ${decodeURIComponent(error)}</span>`;
                setTimeout(() => {
                    window.location.href = 'index.html';
                }, 3000);
                return;
            }

            if (access_token && expires_in) {
                messageEl.innerHTML = '✅ Authentication successful!<br>Saving your session...';

                // Save to localStorage
                localStorage.setItem('notycaption_access_token', access_token);
                localStorage.setItem('notycaption_token_expiry', (Date.now() + (parseInt(expires_in) * 1000)).toString());

                // Save to cookies
                document.cookie = `notycaption_access_token=${access_token};path=/;max-age=${parseInt(expires_in)}`;
                document.cookie = `notycaption_token_expiry=${Date.now() + (parseInt(expires_in) * 1000)};path=/;max-age=${parseInt(expires_in)}`;

                messageEl.innerHTML = '✅ Token saved!<br>Fetching your profile...';

                try {
                    const userResponse = await fetch('https://www.googleapis.com/oauth2/v2/userinfo', {
                        headers: { 'Authorization': `Bearer ${access_token}` }
                    });

                    if (userResponse.ok) {
                        const userInfo = await userResponse.json();
                        localStorage.setItem('notycaption_user_info', JSON.stringify(userInfo));
                        document.cookie = `notycaption_user_info=${JSON.stringify(userInfo)};path=/;max-age=${parseInt(expires_in)}`;

                        messageEl.innerHTML = `<span class="success">✅ Welcome, ${userInfo.name || 'User'}!</span><br>Email: ${userInfo.email}<br>Redirecting to app...`;

                        setTimeout(() => {
                            window.location.href = 'app.html#web';
                        }, 1500);
                    } else {
                        messageEl.innerHTML = '<span class="error">⚠️ Could not fetch profile</span>';
                        setTimeout(() => {
                            window.location.href = 'app.html#web';
                        }, 1500);
                    }
                } catch (err) {
                    console.error('Error:', err);
                    messageEl.innerHTML = '<span class="error">⚠️ Profile fetch failed</span>';
                    setTimeout(() => {
                        window.location.href = 'app.html#web';
                    }, 1500);
                }
            } else {
                messageEl.innerHTML = '<span class="error">❌ Invalid authentication response</span>';
                setTimeout(() => {
                    window.location.href = 'index.html';
                }, 2000);
            }
        }

        processCallback();
    </script>
</body>
</html>