Skip to content

Commit 85068fe

Browse files
mcgdjmcgdj
authored
Update account.html
General improvements; bugfixes related to Issue #2
1 parent fe9423a commit 85068fe

File tree

1 file changed

+151
-13
lines changed

1 file changed

+151
-13
lines changed

‎account.html

Lines changed: 151 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,122 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="en">
33
<head>
4-
<title>Login | Scratch Auth</title>
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;
12+
background-color: #f4f4f4;
13+
}
14+
15+
.header {
16+
background-color: #c04d4d;
17+
color: white;
18+
text-align: center;
19+
padding: 20px;
20+
}
21+
22+
.header h1 {
23+
margin: 0;
24+
}
25+
26+
.menu-container {
27+
position: relative;
28+
display: flex;
29+
justify-content: space-between;
30+
background: #c04d4d;
31+
padding: 20px;
32+
color: #fff;
33+
box-sizing: border-box;
34+
}
35+
36+
.menu-logo img {
37+
max-height: 40px;
38+
max-width: 100px;
39+
}
40+
41+
.menu-container a {
42+
text-decoration: none;
43+
color: #ffffff;
44+
transition: color 0.3s ease;
45+
}
46+
47+
.menu-container a:hover {
48+
color: #50e3c2;
49+
}
50+
51+
.menu ul {
52+
list-style: none;
53+
display: flex;
54+
padding: 0;
55+
margin: 0;
56+
}
57+
58+
.menu li {
59+
padding: 0 20px;
60+
font-size: 22px;
61+
}
62+
63+
.content {
64+
padding: 20px;
65+
text-align: center;
66+
}
67+
68+
.logout-btn {
69+
background-color: #c04d4d;
70+
color: white;
71+
padding: 10px 20px;
72+
border: none;
73+
cursor: pointer;
74+
font-size: 16px;
75+
margin-top: 20px;
76+
}
77+
78+
.logout-btn:hover {
79+
background-color: #a03b3b;
80+
}
81+
82+
/* Form Styles */
83+
input[type="text"] {
84+
padding: 10px;
85+
margin: 10px 0;
86+
font-size: 16px;
87+
border: 1px solid #ccc;
88+
width: 250px;
89+
border-radius: 4px;
90+
}
91+
92+
button {
93+
background-color: #50e3c2;
94+
color: white;
95+
padding: 10px 20px;
96+
font-size: 16px;
97+
border: none;
98+
cursor: pointer;
99+
border-radius: 4px;
100+
}
101+
102+
button:hover {
103+
background-color: #3ec1a0;
104+
}
105+
</style>
5106
<script>
6107
async function registerUser() {
7108
const username = document.getElementById("username").value.trim();
8109
if (!username) {
9110
alert("Please enter a Scratch username.");
10111
return;
11112
}
12-
113+
13114
const response = await fetch("server.php", {
14115
method: "POST",
15116
headers: { "Content-Type": "application/x-www-form-urlencoded" },
16117
body: `username=${encodeURIComponent(username)}`
17118
});
18-
119+
19120
const data = await response.json();
20121
if (data.error) {
21122
alert(data.error);
@@ -31,29 +132,66 @@
31132
alert("No private key found. Please register first.");
32133
return;
33134
}
34-
135+
35136
const response = await fetch("server.php", {
36137
method: "POST",
37138
headers: { "Content-Type": "application/x-www-form-urlencoded" },
38139
body: `challengeResponse=${btoa(privateKey)}`
39140
});
40-
141+
41142
const data = await response.json();
42143
if (data.success) {
43144
alert("Authentication successful!");
44-
window.location.href = "dashboard.html"; // Redirect if needed
145+
window.location.href = "#dashboard"; // Redirect to dashboard
45146
} else {
46147
alert(data.error);
47148
}
48149
}
150+
151+
function logout() {
152+
// Clear the private key from local storage
153+
localStorage.removeItem("privateKey");
154+
155+
// Redirect to login page
156+
window.location.href = "#login"; // Redirect to login page
157+
}
49158
</script>
50159
</head>
51160
<body>
52-
<h1>Scratch Authentication</h1>
53-
<label>Scratch Username:</label>
54-
<input type="text" id="username" placeholder="Enter your Scratch username" />
55-
<button onclick="registerUser()">Register</button>
56-
<br /><br />
57-
<button onclick="authenticateUser()">Login with Key</button>
161+
<!-- Login Form -->
162+
<div id="login">
163+
<div class="header">
164+
<h1>Scratch Authentication</h1>
165+
</div>
166+
167+
<div class="content">
168+
<label for="username">Scratch Username:</label>
169+
<input type="text" id="username" placeholder="Enter your Scratch username" />
170+
<br />
171+
<button onclick="registerUser()">Register</button>
172+
<br /><br />
173+
<button onclick="authenticateUser()">Login with Key</button>
174+
</div>
175+
</div>
176+
177+
<!-- Dashboard -->
178+
<div id="dashboard" style="display: none;">
179+
<div class="header">
180+
<h1>Welcome to Your Dashboard!</h1>
181+
</div>
182+
183+
<div class="content">
184+
<p>You're successfully logged in with your private key. You can now access your personalized settings and manage your account.</p>
185+
<button class="logout-btn" onclick="logout()">Logout</button>
186+
</div>
187+
</div>
188+
189+
<script>
190+
// Check if user is already authenticated
191+
if (localStorage.getItem("privateKey")) {
192+
document.getElementById("login").style.display = "none";
193+
document.getElementById("dashboard").style.display = "block";
194+
}
195+
</script>
58196
</body>
59197
</html>

0 commit comments

Comments
 (0)