Skip to content

Commit 1407856

Browse files
kRxZykRxZykRxZykRxZy
authored
Update account.html
1 parent a0567ff commit 1407856

File tree

1 file changed

+47
-70
lines changed

1 file changed

+47
-70
lines changed

‎account.html

Lines changed: 47 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -12,25 +13,30 @@
1213
background-color: #f4f4f4;
1314
text-align: center;
1415
}
16+
1517
.header {
1618
background-color: #c04d4d;
1719
color: white;
1820
padding: 20px;
1921
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
2022
}
21-
.content, .container {
23+
24+
.content,
25+
.container {
2226
padding: 20px;
2327
max-width: 600px;
2428
margin: 20px auto;
2529
background-color: white;
2630
border-radius: 8px;
2731
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
2832
}
33+
2934
.message {
3035
color: red;
3136
font-weight: bold;
3237
margin-top: 10px;
3338
}
39+
3440
button {
3541
width: 100%;
3642
padding: 12px 20px;
@@ -43,9 +49,11 @@
4349
color: white;
4450
transition: background-color 0.3s;
4551
}
52+
4653
button:hover {
4754
background-color: #a03a3a;
4855
}
56+
4957
input {
5058
width: 100%;
5159
padding: 12px;
@@ -54,27 +62,31 @@
5462
border-radius: 5px;
5563
font-size: 16px;
5664
}
65+
5766
p {
5867
line-height: 1.5;
5968
}
69+
6070
a {
6171
text-decoration: none;
6272
color: white;
6373
}
74+
6475
a.kRxZy-link {
6576
color: #4CAF50;
6677
font-weight: bold;
6778
}
79+
6880
a.kRxZy-link:hover {
6981
color: #388E3C;
7082
}
83+
84+
#loggedInContent {
85+
display: none;
86+
padding: 20px;
87+
}
7188
</style>
7289
<script>
73-
// Generate a random 3-digit number
74-
function generateThreeDigitCode() {
75-
return Math.floor(100 + Math.random() * 900);
76-
}
77-
7890
let secretCode;
7991
if (!localStorage.getItem('baseCode')) {
8092
secretCode = '972';
@@ -83,7 +95,6 @@
8395
secretCode = localStorage.getItem('baseCode');
8496
}
8597

86-
// Generate a key by shifting the baseKey based on the secret code
8798
function generateKeyFromCode(code) {
8899
const baseKey = 'abcdefghijklmnopqrstuvwxyz0123456789';
89100
let shiftedKey = '';
@@ -94,7 +105,6 @@
94105
return shiftedKey;
95106
}
96107

97-
// Encode the username using the generated key
98108
function encodeUsername(username, key) {
99109
const baseKey = 'abcdefghijklmnopqrstuvwxyz0123456789';
100110
let encoded = '';
@@ -109,7 +119,6 @@
109119
return encoded;
110120
}
111121

112-
// Decode the username using the generated key
113122
function decodeUsername(encodedUsername, key) {
114123
const baseKey = 'abcdefghijklmnopqrstuvwxyz0123456789';
115124
let decoded = '';
@@ -132,48 +141,27 @@
132141
const key = generateKeyFromCode(secretCode);
133142
const username = decodeUsername(usernameEncoded, key);
134143

135-
const textElements = document.querySelectorAll('.text');
136-
const loggedIn = document.getElementById('loggedIn');
137-
const tlogged = document.getElementById('hide');
138-
const mainText = document.getElementById('mainText');
139-
140-
// Hide all elements with the class "text"
141-
textElements.forEach(function (element) {
142-
element.style.display = 'none';
143-
});
144+
document.getElementById('authSection').style.display = 'none';
145+
document.getElementById('loggedInContent').style.display = 'block';
146+
document.getElementById('welcomeMessage').textContent = `Welcome to your account, ${username}!`;
144147

145148
const res = await fetch(`https://scratchgems.onrender.com/api/data/${username}`);
146-
if (!res.ok) {
147-
throw new Error('Failed to fetch data');
148-
}
149-
const data = await res.json();
149+
if (!res.ok) throw new Error('Failed to fetch data');
150150

151-
// Show the welcome message
152-
loggedIn.style.display = 'block';
153-
loggedIn.textContent = `Welcome to your account, ${username}!`;
154-
tlogged.style.display = 'none';
155-
156-
if (data && data.pendingorders !== undefined && data.completedorders !== undefined) {
157-
mainText.innerHTML = `
158-
<p>Pending Orders: ${data.pendingorders}</p>
159-
<br>
160-
<p>Completed Orders: ${data.completedorders}</p>
161-
<br>
162-
`;
163-
} else {
164-
mainText.innerHTML = `<p>Error loading order data.</p>`;
165-
}
151+
const data = await res.json();
152+
document.getElementById('mainText').innerHTML = `
153+
<p>Pending Orders: ${data.pendingorders}</p>
154+
<p>Completed Orders: ${data.completedorders}</p>
155+
`;
166156
} else {
167157
checkAuth();
168158
}
169159
} catch (error) {
170160
console.error(error);
171-
const mainText = document.getElementById('mainText');
172-
mainText.innerHTML = `<p>Something went wrong! Please try again later.</p>`;
161+
document.getElementById('mainText').innerHTML = `<p>Something went wrong! Please try again later.</p>`;
173162
}
174163
};
175164

176-
// Check for authentication on page load
177165
function checkAuth() {
178166
const urlParams = new URLSearchParams(window.location.search);
179167
const authSuccess = urlParams.get('success');
@@ -182,7 +170,6 @@
182170
if (username) {
183171
const key = generateKeyFromCode(secretCode);
184172
const encodedUsername = encodeUsername(username.toLowerCase(), key);
185-
186173
localStorage.setItem('username', encodedUsername);
187174
localStorage.setItem('loggedIn', 'true');
188175
window.location.href = 'index.html';
@@ -194,83 +181,73 @@
194181
}
195182
}
196183

197-
// Redirect to ScratchAuth for authentication
198184
function registerScratchAuth() {
199185
const messageBox = document.getElementById("scratchMessage");
200186
const redirectLocation = encodeURIComponent(window.location.href);
201-
202187
const authUrl = `https://auth.itinerary.eu.org/auth/?redirect=${redirectLocation}&name=Coding%20Hut&sign_in_method=cloud`;
203188

204189
messageBox.style.color = "green";
205190
messageBox.textContent = "Redirecting to ScratchAuth... Follow the steps there.";
206-
207191
setTimeout(() => {
208192
window.location.href = authUrl;
209193
}, 2000);
210194
}
211195

212-
// Redirect to APIAuth for authentication
213196
function registerApiAuth() {
214197
const messageBox = document.getElementById("apiMessage");
215198
const redirectLocation = encodeURIComponent(window.location.href);
216-
217199
const authUrl = `https://ubbload.netlify.app/login?redirect=${redirectLocation}&code=${secretCode}`;
218200

219201
messageBox.style.color = "green";
220202
messageBox.textContent = "Redirecting to APIAuth login (ubbload)... Follow the steps there.";
221-
222203
setTimeout(() => {
223204
window.location.href = authUrl;
224205
}, 2000);
225206
}
226207

227-
// Logout function
228208
function logout() {
229209
localStorage.removeItem('loggedIn');
230210
localStorage.removeItem('username');
231211
window.location.href = 'login.html';
232212
}
233213
</script>
234214
</head>
215+
235216
<body>
236217
<!-- Header Content -->
237-
<div class="text header">
218+
<div class="header">
238219
<h1>Scratch Authentication</h1>
239220
</div>
240-
<div id="loggedIn" class="header" style="display: none;">
241-
<button onclick="logout()">Logout</button>
242-
</div>
243221

244-
<!-- Main Content -->
245-
<div id="mainText" class="text content" ></div>
246-
<div id="hide" class="text content">
247-
<div class="text content">
248-
<h2>Welcome! Please log in to continue.</h2>
249-
<button onclick="registerScratchAuth()">Sign In With ScratchAuth</button>
250-
<p id="scratchMessage" class="message" aria-live="polite"></p>
251-
<p>
252-
Please note: You will be redirected to an external site (ScratchAuth) for authentication. Once there,
253-
choose the "Cloud Data" option for the quickest sign-in method.
254-
</p>
222+
<!-- Logged In Section -->
223+
<div id="loggedInContent">
224+
<div class="container">
225+
<h2 id="welcomeMessage"></h2>
226+
<div id="mainText"></div>
227+
<button onclick="logout()">Logout</button>
255228
</div>
229+
</div>
230+
231+
<!-- Auth Section -->
232+
<div id="authSection" class="content">
233+
<h2>Welcome! Please log in to continue.</h2>
234+
<button onclick="registerScratchAuth()">Sign In With ScratchAuth</button>
235+
<p id="scratchMessage" class="message" aria-live="polite"></p>
236+
<p>Please note: You will be redirected to an external site (ScratchAuth) for authentication.</p>
256237

257-
<!-- APIAuth Section -->
258-
<div class="text container">
238+
<div class="container">
259239
<h2>Login Using APIAuth</h2>
260240
<button onclick="registerApiAuth()">Login With APIAuth (Made by
261241
<a href="https://scratch.mit.edu/users/kRxZy_kRxZy/" target="_blank" class="kRxZy-link">kRxZy_kRxZy</a>)</button>
262242
<p id="apiMessage" class="message" aria-live="polite"></p>
263-
<p>
264-
APIAuth, made by <a href="https://scratch.mit.edu/users/kRxZy_kRxZy/" target="_blank" class="kRxZy-link">kRxZy_kRxZy</a>, is the next generation of Scratch Authentication.
265-
</p>
266243
</div>
267244

268-
<!-- Report Issue Section -->
269-
<div class="text container">
245+
<div class="container">
270246
<a href="https://github.com/Scratch-Coding-Hut/Scratch-Coding-Hut.github.io/issues/new">
271247
<button>Having trouble signing in? Report an issue</button>
272248
</a>
273249
</div>
274250
</div>
275251
</body>
252+
276253
</html>

0 commit comments

Comments
 (0)