Hugging Face's logo

Spaces:
Arkm20
/
authapi
Sleeping

App Files Community
Arkm20 commited on
Commit
14c25b5
·
verified ·
1 Parent(s): 1c3d615

Create static/login.html

Browse files
Files changed (1) hide show
  1. static/login.html +121 -0
static/login.html ADDED
@@ -0,0 +1,121 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
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>Login / Signup</title>
7
+ <style>
8
+ :root {
9
+ --bg-dark: #1C1C1E;
10
+ /* For the gradient, assuming --bg-dark is rgb(28, 28, 30) */
11
+ --bg-dark-rgb: 28, 28, 30;
12
+ --bg-content-area: #2C2C2E;
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: var(--bg-content-elements); cursor: pointer; font-size: 1rem; }
28
+ button:hover { background-color: var(--accent-color-active); }
29
+ #signupBtn { margin-top: .5rem; }
30
+ #message { margin-top: 1rem; text-align: center; color: red; font-weight: bold; }
31
+ </style>
32
+ </head>
33
+ <body>
34
+ <div class="container">
35
+ <h2>Animex</h2>
36
+ <form id="loginForm">
37
+ <div class="form-group">
38
+ <label for="username">Username</label>
39
+ <input type="text" id="username" name="username" required>
40
+ </div>
41
+ <div class="form-group">
42
+ <label for="password">Password</label>
43
+ <input type="password" id="password" name="password" required>
44
+ </div>
45
+ <button type="submit">Login</button>
46
+ <button type="button" id="signupBtn">Sign Up</button>
47
+ </form>
48
+ <p id="message"></p>
49
+ </div>
50
+
51
+ <script>
52
+ // In a Hugging Face Space, the API is at the same origin, so no base URL is needed.
53
+ const API_BASE_URL = '';
54
+
55
+ const loginForm = document.getElementById('loginForm');
56
+ const signupBtn = document.getElementById('signupBtn');
57
+ const messageEl = document.getElementById('message');
58
+
59
+ loginForm.addEventListener('submit', async (e) => {
60
+ e.preventDefault();
61
+ messageEl.textContent = '';
62
+
63
+ const formData = new FormData();
64
+ formData.append('username', e.target.username.value);
65
+ formData.append('password', e.target.password.value);
66
+
67
+ try {
68
+ const response = await fetch(`${API_BASE_URL}/token`, {
69
+ method: 'POST',
70
+ body: formData
71
+ });
72
+
73
+ if (response.ok) {
74
+ const data = await response.json();
75
+ localStorage.setItem('accessToken', data.access_token);
76
+ messageEl.style.color = 'green';
77
+ messageEl.textContent = 'Login successful! Redirecting...';
78
+ // Redirect to the settings page after successful login
79
+ window.location.href = '/Settings.html';
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
+ });
89
+
90
+ signupBtn.addEventListener('click', async () => {
91
+ messageEl.textContent = '';
92
+ const username = loginForm.username.value;
93
+ const password = loginForm.password.value;
94
+
95
+ if (!username || !password) {
96
+ messageEl.textContent = 'Please enter username and password to sign up.';
97
+ return;
98
+ }
99
+
100
+ try {
101
+ const response = await fetch(`${API_BASE_URL}/signup`, {
102
+ method: 'POST',
103
+ headers: { 'Content-Type': 'application/json' },
104
+ body: JSON.stringify({ username, password })
105
+ });
106
+
107
+ if (response.status === 201) {
108
+ messageEl.style.color = 'green';
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
+ });
119
+ </script>
120
+ </body>
121
+ </html>