|
1 | 1 | <!DOCTYPE html> |
2 | 2 | <html lang="en"> |
3 | | -<head> |
4 | | - <meta charset="UTF-8"> |
5 | | - <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
6 | | - <title>Scratch Auth | Login & Dashboard</title> |
7 | | - <style> |
8 | | - body { |
9 | | - font-family: Sans-Serif; |
10 | | - margin: 0; |
11 | | - padding: 0;<!DOCTYPE html> |
12 | | -<html lang="en"> |
13 | 3 | <head> |
14 | 4 | <meta charset="UTF-8"> |
15 | 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
111 | 101 | </div> |
112 | 102 | </div> |
113 | 103 | </body> |
114 | | -</html> |
115 | | - |
116 | | - background-color: #f4f4f4; |
117 | | - } |
118 | | - .header { |
119 | | - background-color: #c04d4d; |
120 | | - color: white; |
121 | | - text-align: center; |
122 | | - padding: 20px; |
123 | | - } |
124 | | - .content { |
125 | | - padding: 20px; |
126 | | - text-align: center; |
127 | | - } |
128 | | - input[type="text"], button { |
129 | | - padding: 10px; |
130 | | - margin: 10px 0; |
131 | | - font-size: 16px; |
132 | | - border-radius: 4px; |
133 | | - } |
134 | | - </style> |
135 | | - <script> |
136 | | - async function registerUser() { |
137 | | - const username = document.getElementById("username").value.trim(); |
138 | | - if (!username) { |
139 | | - alert("Please enter a Scratch username."); |
140 | | - return; |
141 | | - } |
142 | | - |
143 | | - const privateKey = Math.random().toString(36).substr(2, 10); |
144 | | - localStorage.setItem("privateKey", privateKey); |
145 | | - alert(`Post this key on your Scratch profile: ${privateKey}`); |
146 | | - } |
147 | | - |
148 | | - async function authenticateUser() { |
149 | | - const username = document.getElementById("username").value.trim(); |
150 | | - const privateKey = localStorage.getItem("privateKey"); |
151 | | - if (!username || !privateKey) { |
152 | | - alert("Make sure you have registered and saved your key."); |
153 | | - return; |
154 | | - } |
155 | | - |
156 | | - const response = await fetch(`https://api.scratch.mit.edu/users/${username}/`); |
157 | | - const data = await response.json(); |
158 | | - |
159 | | - if (data.profile?.bio.includes(privateKey)) { |
160 | | - alert("Authentication successful!"); |
161 | | - document.getElementById("login").style.display = "none"; |
162 | | - document.getElementById("dashboard").style.display = "block"; |
163 | | - } else { |
164 | | - alert("Key not found in bio. Make sure you've posted it and try again."); |
165 | | - } |
166 | | - } |
167 | | - |
168 | | - function logout() { |
169 | | - localStorage.removeItem("privateKey"); |
170 | | - document.getElementById("dashboard").style.display = "none"; |
171 | | - document.getElementById("login").style.display = "block"; |
172 | | - } |
173 | | - </script> |
174 | | -</head> |
175 | | -<body> |
176 | | - <div id="login"> |
177 | | - <div class="header"> |
178 | | - <h1>Scratch Authentication</h1> |
179 | | - </div> |
180 | | - <div class="content"> |
181 | | - <label for="username">Scratch Username:</label> |
182 | | - <input type="text" id="username" placeholder="Enter your Scratch username" /> |
183 | | - <br /> |
184 | | - <button onclick="registerUser()">Register</button> |
185 | | - <br /><br /> |
186 | | - <button onclick="authenticateUser()">Login with Scratch</button> |
187 | | - </div> |
188 | | - </div> |
189 | | - |
190 | | - <div id="dashboard" style="display: none;"> |
191 | | - <div class="header"> |
192 | | - <h1>Welcome to Your Dashboard!</h1> |
193 | | - </div> |
194 | | - <div class="content"> |
195 | | - <p>You're successfully logged in!</p> |
196 | | - <button onclick="logout()">Logout</button> |
197 | | - </div> |
198 | | - </div> |
199 | | -</body> |
200 | 104 | </html> |
0 commit comments