algorithm-visualizer/auth.html at main · lsomoza6464/algorithm-visualizer · 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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Login - Debug Visualizer</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center font-sans">
  <div class="bg-white p-10 rounded-lg shadow-md text-center w-full max-w-md">
    <h1 class="text-3xl font-bold mb-8 text-gray-800">Debug Visualizer</h1>

    <div id="logged-in" class="hidden">
      <div class="mb-6">
        <img id="user-avatar" src="" alt="User Avatar" class="w-20 h-20 rounded-full mx-auto mb-4">
        <h2 class="text-2xl font-semibold text-gray-700" id="user-name">Welcome!</h2>
        <p class="text-gray-600" id="user-email"></p>
      </div>

      <div class="space-y-4">
        <a href="index.html">
          <button class="w-full bg-blue-600 text-white text-lg font-semibold py-3 rounded-md hover:bg-blue-700 transition">
            Go to Visualizer
          </button>
        </a>

        <a href="history.html">
          <button class="w-full bg-green-600 text-white text-lg font-semibold py-3 rounded-md hover:bg-green-700 transition">
            View My History
          </button>
        </a>

        <button id="logout-btn" class="w-full bg-red-600 text-white text-lg font-semibold py-3 rounded-md hover:bg-red-700 transition">
          Logout
        </button>
      </div>
    </div>

    <div id="logged-out">
      <p class="text-gray-600 mb-6">Sign in to save your visualizations and track your LeetCode progress</p>

      <div class="space-y-4">
        <button id="google-login" class="w-full bg-white border border-gray-300 text-gray-700 text-lg font-semibold py-3 rounded-md hover:bg-gray-50 transition flex items-center justify-center">
          <svg class="w-6 h-6 mr-2" viewBox="0 0 24 24">
            <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
            <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
            <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
            <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
          </svg>
          Sign in with Google
        </button>

        <button id="github-login" class="w-full bg-gray-800 text-white text-lg font-semibold py-3 rounded-md hover:bg-gray-900 transition flex items-center justify-center">
          <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24">
            <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"/>
          </svg>
          Sign in with GitHub
        </button>

        <a href="index.html" class="block">
          <button class="w-full bg-gray-300 text-gray-700 text-lg font-semibold py-3 rounded-md hover:bg-gray-400 transition">
            Continue as Guest
          </button>
        </a>
      </div>
    </div>
  </div>

  <!-- Environment configuration -->
  <script src="config.js"></script>

  <script>
    // Extract token from URL if present
    function extractTokenFromURL() {
      const urlParams = new URLSearchParams(window.location.search);
      const token = urlParams.get('token');
      if (token) {
        localStorage.setItem('session_token', token);
        // Clean up URL
        window.history.replaceState({}, document.title, window.location.pathname);
      }
    }

    async function checkAuth() {
      try {
        const token = localStorage.getItem('session_token');
        const headers = {};
        if (token) {
          headers['Authorization'] = `Bearer ${token}`;
        }

        const response = await fetch(`${API_BASE}/api/auth/me`, {
          credentials: 'include',
          headers: headers
        });

        if (response.ok) {
          const user = await response.json();
          showLoggedIn(user);
        } else {
          // If auth fails, clear the token
          localStorage.removeItem('session_token');
          showLoggedOut();
        }
      } catch (error) {
        console.error('Error checking auth:', error);
        localStorage.removeItem('session_token');
        showLoggedOut();
      }
    }

    function showLoggedIn(user) {
      document.getElementById('logged-in').classList.remove('hidden');
      document.getElementById('logged-out').classList.add('hidden');

      document.getElementById('user-name').textContent = user.display_name || user.username;
      document.getElementById('user-email').textContent = user.email;

      if (user.avatar_url) {
        document.getElementById('user-avatar').src = user.avatar_url;
      } else {
        document.getElementById('user-avatar').src = `https://ui-avatars.com/api/?name=${encodeURIComponent(user.display_name || user.username)}&background=random`;
      }
    }

    function showLoggedOut() {
      document.getElementById('logged-in').classList.add('hidden');
      document.getElementById('logged-out').classList.remove('hidden');
    }

    document.getElementById('google-login').addEventListener('click', () => {
      // Use direct backend URL for OAuth redirect
      window.location.href = `${AUTH_BASE}/api/auth/login/google`;
    });

    document.getElementById('github-login').addEventListener('click', () => {
      // Use direct backend URL for OAuth redirect
      window.location.href = `${AUTH_BASE}/api/auth/login/github`;
    });

    document.getElementById('logout-btn').addEventListener('click', async () => {
      try {
        const token = localStorage.getItem('session_token');
        const headers = {};
        if (token) {
          headers['Authorization'] = `Bearer ${token}`;
        }

        await fetch(`${API_BASE}/api/auth/logout`, {
          method: 'POST',
          credentials: 'include',
          headers: headers
        });
        localStorage.removeItem('session_token');
        window.location.reload();
      } catch (error) {
        console.error('Error logging out:', error);
      }
    });

    // Extract token from URL and check authentication status on page load
    extractTokenFromURL();
    checkAuth();
  </script>
</body>
</html>