Update account.html

kRxZykRxZy · web-flow · commit 4bdef2029b06 · 2025-03-21T16:43:55.000Z
diff --git a/account.html b/account.html
@@ -53,7 +53,7 @@
         }
     </style>
     <script>
-        function registerUser() {
+        function registerScratchAuth() {
             const messageBox = document.getElementById("message");
 
             const redirectLocation = encodeURIComponent(window.location.href);
@@ -90,7 +90,27 @@ <h1>Scratch Authentication</h1>
     </div>
     <div class="content">
         <h2>Welcome! Please log in to continue.</h2>
-        <button onclick="registerUser()">Register</button>
+        <button onclick="registerScratchAuth()">Register With ScratchAuth (Currently not working.)</button>
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Login</title>
+  <style>
+    body { font-family: Arial, sans-serif; background: #f4f4f4; display: flex; align-items: center; justify-content: center; height: 100vh; }
+    .container { background: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); text-align: center; width: 350px; }
+    input, button { width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ddd; border-radius: 5px; font-size: 16px; }
+    button { background: #007bff; color: white; border: none; cursor: pointer; }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <button onclick="login()">Login With APIAuth (Made by <a href="scratch.mit.edu/users/kRxZy_kRxZy>kRxZy_kRxZy</a>)</button>
+    <p id="codeMessage"></p>
+    <button onclick="verifyCode()">Done</button>
+  </div>
         <p id="message" class="message" aria-live="polite"></p>
         <p>
             Please note: You will be redirected to an external site (Scratch Auth) for authentication. Once there, 
@@ -102,6 +122,51 @@ <h2>Welcome! Please log in to continue.</h2>
         <a href="https://github.com/Scratch-Coding-Hut/Scratch-Coding-Hut.github.io/issues/new">
             <button>Having trouble signing in? Report an issue</button>
         </a>
+  <script>
+    const serverUrl = 'https://image-hoster.onrender.com';
+
+    if (localStorage.getItem('verifiedUser')) {
+      window.location.href = 'index';
+    }
+
+    async function login() {
+      let username = document.getElementById('username').value.trim().toLowerCase();
+      if (!username) return alert('Enter your Scratch username.');
+
+      const response = await fetch(`${serverUrl}/login`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ username })
+      });
+
+      const result = await response.json();
+      if (result.verified) {
+        localStorage.setItem('verifiedUser', username);
+        window.location.href = 'upload.html';
+      } else {
+        document.getElementById('codeMessage').textContent = result.message;
+      }
+    }
+
+    async function verifyCode() {
+      let username = document.getElementById('username').value.trim().toLowerCase();
+      if (!username) return alert('Enter your username first.');
+
+      const response = await fetch(`${serverUrl}/verify`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ username })
+      });
+
+      const result = await response.json();
+      if (result.verified) {
+        localStorage.setItem('verifiedUser', username);
+        window.location.href = 'index.html';
+      } else {
+        alert(result.message || 'Verification failed.');
+      }
+    }
+  </script>
     </div>
 </body>
 </html>
