Update static/login.html
Browse files- static/login.html +18 -26
static/login.html
CHANGED
@@ -5,34 +5,22 @@
|
|
5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
6 |
<title>Login / Signup</title>
|
7 |
<style>
|
8 |
-
|
9 |
-
|
10 |
-
|
11 |
-
|
12 |
-
|
13 |
-
--bg-content-elements: #3A3A3C;
|
14 |
-
--text-primary: #FFFFFF;
|
15 |
-
--text-secondary: #EBEBF599;
|
16 |
-
--text-tertiary: #8A8A8E;
|
17 |
-
--accent-color-active: #FF9500; /* Or your specific orange like #E7753B */
|
18 |
-
--border-color: #38383A;
|
19 |
-
--button-bg: #4A4A4F;
|
20 |
-
}
|
21 |
-
body { font-family: sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #1C1C1E; }
|
22 |
-
.container { background: #2C2C2E; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); width: 300px; }
|
23 |
-
h2 { text-align: center; color: var(--accent-color-active); }
|
24 |
-
.form-group { margin-bottom: 1rem; }
|
25 |
-
label { display: block; margin-bottom: .5rem; color: var(--text-primary); }
|
26 |
input { width: 100%; padding: .5rem; box-sizing: border-box; border: 1px solid #ddd; border-radius: 4px; }
|
27 |
-
button { width: 100%; padding: .7rem; border: none; border-radius: 4px; color: white; background-color:
|
28 |
-
button:hover { background-color:
|
29 |
-
#signupBtn { margin-top: .5rem; }
|
30 |
-
#
|
|
|
31 |
</style>
|
32 |
</head>
|
33 |
<body>
|
34 |
<div class="container">
|
35 |
-
<h2>
|
36 |
<form id="loginForm">
|
37 |
<div class="form-group">
|
38 |
<label for="username">Username</label>
|
@@ -74,15 +62,17 @@
|
|
74 |
const data = await response.json();
|
75 |
localStorage.setItem('accessToken', data.access_token);
|
76 |
messageEl.style.color = 'green';
|
77 |
-
messageEl.textContent = 'Login successful!
|
78 |
-
//
|
79 |
-
|
80 |
} else {
|
81 |
const errorData = await response.json();
|
|
|
82 |
messageEl.textContent = errorData.detail || 'Login failed.';
|
83 |
}
|
84 |
} catch (error) {
|
85 |
console.error('Login error:', error);
|
|
|
86 |
messageEl.textContent = 'An error occurred. Check console.';
|
87 |
}
|
88 |
});
|
@@ -109,10 +99,12 @@
|
|
109 |
messageEl.textContent = 'Signup successful! Please log in now.';
|
110 |
} else {
|
111 |
const errorData = await response.json();
|
|
|
112 |
messageEl.textContent = errorData.detail || 'Signup failed.';
|
113 |
}
|
114 |
} catch (error) {
|
115 |
console.error('Signup error:', error);
|
|
|
116 |
messageEl.textContent = 'An error occurred. Check console.';
|
117 |
}
|
118 |
});
|
|
|
5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
6 |
<title>Login / Signup</title>
|
7 |
<style>
|
8 |
+
body { font-family: sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f2f5; }
|
9 |
+
.container { background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); width: 300px; text-align: center; }
|
10 |
+
h2 { color: #333; }
|
11 |
+
.form-group { margin-bottom: 1rem; text-align: left; }
|
12 |
+
label { display: block; margin-bottom: .5rem; color: #555; }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
13 |
input { width: 100%; padding: .5rem; box-sizing: border-box; border: 1px solid #ddd; border-radius: 4px; }
|
14 |
+
button { width: 100%; padding: .7rem; border: none; border-radius: 4px; color: white; background-color: #007bff; cursor: pointer; font-size: 1rem; }
|
15 |
+
button:hover { background-color: #0056b3; }
|
16 |
+
#signupBtn { background-color: #28a745; margin-top: .5rem; }
|
17 |
+
#signupBtn:hover { background-color: #218838; }
|
18 |
+
#message { margin-top: 1rem; font-weight: bold; }
|
19 |
</style>
|
20 |
</head>
|
21 |
<body>
|
22 |
<div class="container">
|
23 |
+
<h2>Login</h2>
|
24 |
<form id="loginForm">
|
25 |
<div class="form-group">
|
26 |
<label for="username">Username</label>
|
|
|
62 |
const data = await response.json();
|
63 |
localStorage.setItem('accessToken', data.access_token);
|
64 |
messageEl.style.color = 'green';
|
65 |
+
messageEl.textContent = 'Login successful! You can now open your local Settings.html file.';
|
66 |
+
// We no longer redirect, as the file is not on the server.
|
67 |
+
// The user will open it manually.
|
68 |
} else {
|
69 |
const errorData = await response.json();
|
70 |
+
messageEl.style.color = 'red';
|
71 |
messageEl.textContent = errorData.detail || 'Login failed.';
|
72 |
}
|
73 |
} catch (error) {
|
74 |
console.error('Login error:', error);
|
75 |
+
messageEl.style.color = 'red';
|
76 |
messageEl.textContent = 'An error occurred. Check console.';
|
77 |
}
|
78 |
});
|
|
|
99 |
messageEl.textContent = 'Signup successful! Please log in now.';
|
100 |
} else {
|
101 |
const errorData = await response.json();
|
102 |
+
messageEl.style.color = 'red';
|
103 |
messageEl.textContent = errorData.detail || 'Signup failed.';
|
104 |
}
|
105 |
} catch (error) {
|
106 |
console.error('Signup error:', error);
|
107 |
+
messageEl.style.color = 'red';
|
108 |
messageEl.textContent = 'An error occurred. Check console.';
|
109 |
}
|
110 |
});
|