Hugging Face's logo

Spaces:
deedrop1140
/
MachineLearningAlgorithms
Build error

App Files Community
deedrop1140 commited on
Commit
540eb9d
·
verified ·
1 Parent(s): c6e6998

Upload 6 files

Browse files
Files changed (6) hide show
  1. templates/api.html +21 -0
  2. templates/auth/forgot_password.html +32 -0
  3. templates/auth/login.html +70 -0
  4. templates/auth/register.html +36 -0
  5. templates/auth/reset_password.html +31 -0
  6. templates/auth/verify_otp.html +58 -0
templates/api.html ADDED
@@ -0,0 +1,21 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <script>
2
+ async function authFetch(url, options = {}) {
3
+ const token = localStorage.getItem("jwt_token");
4
+
5
+ options.headers = {
6
+ ...(options.headers || {}),
7
+ "Authorization": "Bearer " + token,
8
+ "Content-Type": "application/json"
9
+ };
10
+
11
+ const response = await fetch(url, options);
12
+
13
+ if (response.status === 401) {
14
+ alert("Session expired. Please login again.");
15
+ window.location.href = "/auth/login";
16
+ return;
17
+ }
18
+
19
+ return response.json();
20
+ }
21
+ </script>
templates/auth/forgot_password.html ADDED
@@ -0,0 +1,32 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Forgot Password</title>
6
+ <script src="https://cdn.tailwindcss.com"></script>
7
+ </head>
8
+ <body class="min-h-screen bg-gradient-to-br from-sky-500 to-blue-600 flex items-center justify-center">
9
+
10
+ <div class="bg-white w-full max-w-md rounded-2xl shadow-xl p-8">
11
+ <h2 class="text-3xl font-bold text-center text-gray-800">Forgot Password</h2>
12
+ <p class="text-center text-gray-500 mt-2">We’ll send an OTP to reset it</p>
13
+
14
+ <form method="POST" class="mt-6 space-y-4">
15
+ <input type="email" name="email" placeholder="Enter your email"
16
+ required
17
+ class="w-full px-4 py-3 rounded-lg border focus:ring-2 focus:ring-sky-500 outline-none">
18
+
19
+ <button
20
+ class="w-full bg-sky-600 hover:bg-sky-700 text-white py-3 rounded-lg font-semibold transition">
21
+ Send OTP
22
+ </button>
23
+ </form>
24
+
25
+ <p class="text-center text-sm text-gray-600 mt-4">
26
+ Back to
27
+ <a href="/auth/login" class="text-sky-600 hover:underline">Login</a>
28
+ </p>
29
+ </div>
30
+
31
+ </body>
32
+ </html>
templates/auth/login.html ADDED
@@ -0,0 +1,70 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Login</title>
6
+ <script src="https://cdn.tailwindcss.com"></script>
7
+ </head>
8
+ <body class="min-h-screen bg-gradient-to-br from-indigo-600 to-purple-700 flex items-center justify-center">
9
+
10
+ <div class="bg-white w-full max-w-md rounded-2xl shadow-xl p-8">
11
+ <h2 class="text-3xl font-bold text-center text-gray-800">Welcome Back</h2>
12
+ <p class="text-center text-gray-500 mt-2">Login to continue</p>
13
+
14
+ <form method="POST" class="mt-6 space-y-4">
15
+ <input type="email" name="email" placeholder="Email"
16
+ required
17
+ class="w-full px-4 py-3 rounded-lg border focus:ring-2 focus:ring-indigo-500 outline-none">
18
+
19
+ <input type="password" name="password" placeholder="Password"
20
+ required
21
+ class="w-full px-4 py-3 rounded-lg border focus:ring-2 focus:ring-indigo-500 outline-none">
22
+
23
+ <button
24
+ class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-3 rounded-lg font-semibold transition">
25
+ Login
26
+ </button>
27
+ </form>
28
+
29
+ <div class="flex justify-between text-sm mt-4 text-gray-600">
30
+ <a href="/auth/register" class="hover:underline">Create account</a>
31
+ <a href="/auth/forgot" class="hover:underline">Forgot password?</a>
32
+ </div>
33
+ </div>
34
+ <script>
35
+ const form = document.querySelector("form");
36
+
37
+ form.addEventListener("submit", async (e) => {
38
+ e.preventDefault();
39
+
40
+ const formData = new FormData(form);
41
+
42
+ const res = await fetch("/auth/login", {
43
+ method: "POST",
44
+ body: formData
45
+ });
46
+
47
+ const data = await res.json();
48
+
49
+ if (data.access_token) {
50
+ // ✅ SAVE JWT
51
+ localStorage.setItem("jwt_token", data.access_token);
52
+
53
+ // ✅ GO TO HOME
54
+ window.location.href = "/";
55
+ } else {
56
+ alert("Login failed");
57
+ }
58
+ });
59
+ </script>
60
+ <div id="alertBox"
61
+ class="hidden fixed top-5 right-5 max-w-sm px-5 py-4 rounded-lg shadow-lg text-white">
62
+ </div>
63
+ {% if success %}
64
+ <script>
65
+ showAlert("{{ success }}", "success");
66
+ </script>
67
+ {% endif %}
68
+
69
+ </body>
70
+ </html>
templates/auth/register.html ADDED
@@ -0,0 +1,36 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Register</title>
6
+ <script src="https://cdn.tailwindcss.com"></script>
7
+ </head>
8
+ <body class="min-h-screen bg-gradient-to-br from-emerald-500 to-teal-600 flex items-center justify-center">
9
+
10
+ <div class="bg-white w-full max-w-md rounded-2xl shadow-xl p-8">
11
+ <h2 class="text-3xl font-bold text-center text-gray-800">Create Account</h2>
12
+ <p class="text-center text-gray-500 mt-2">We’ll verify your email</p>
13
+
14
+ <form method="POST" class="mt-6 space-y-4">
15
+ <input type="email" name="email" placeholder="Email"
16
+ required
17
+ class="w-full px-4 py-3 rounded-lg border focus:ring-2 focus:ring-emerald-500 outline-none">
18
+
19
+ <input type="password" name="password" placeholder="Password"
20
+ required
21
+ class="w-full px-4 py-3 rounded-lg border focus:ring-2 focus:ring-emerald-500 outline-none">
22
+
23
+ <button
24
+ class="w-full bg-emerald-600 hover:bg-emerald-700 text-white py-3 rounded-lg font-semibold transition">
25
+ Register
26
+ </button>
27
+ </form>
28
+
29
+ <p class="text-center text-sm text-gray-600 mt-4">
30
+ Already have an account?
31
+ <a href="/auth/login" class="text-emerald-600 hover:underline">Login</a>
32
+ </p>
33
+ </div>
34
+
35
+ </body>
36
+ </html>
templates/auth/reset_password.html ADDED
@@ -0,0 +1,31 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Reset Password</title>
6
+ <script src="https://cdn.tailwindcss.com"></script>
7
+ </head>
8
+ <body class="min-h-screen bg-gradient-to-br from-fuchsia-500 to-pink-600 flex items-center justify-center">
9
+
10
+ <div class="bg-white w-full max-w-md rounded-2xl shadow-xl p-8">
11
+ <h2 class="text-3xl font-bold text-center text-gray-800">Reset Password</h2>
12
+ <p class="text-center text-gray-500 mt-2">OTP verification required</p>
13
+
14
+ <form method="POST" class="mt-6 space-y-4">
15
+ <input type="text" name="otp" placeholder="OTP"
16
+ required
17
+ class="w-full px-4 py-3 rounded-lg border focus:ring-2 focus:ring-pink-500 outline-none">
18
+
19
+ <input type="password" name="password" placeholder="New Password"
20
+ required
21
+ class="w-full px-4 py-3 rounded-lg border focus:ring-2 focus:ring-pink-500 outline-none">
22
+
23
+ <button
24
+ class="w-full bg-pink-600 hover:bg-pink-700 text-white py-3 rounded-lg font-semibold transition">
25
+ Reset Password
26
+ </button>
27
+ </form>
28
+ </div>
29
+
30
+ </body>
31
+ </html>
templates/auth/verify_otp.html ADDED
@@ -0,0 +1,58 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Verify OTP</title>
6
+ <script src="https://cdn.tailwindcss.com"></script>
7
+ </head>
8
+ <body class="min-h-screen bg-gradient-to-br from-orange-500 to-red-500 flex items-center justify-center">
9
+
10
+ <div class="bg-white w-full max-w-md rounded-2xl shadow-xl p-8 text-center">
11
+ <h2 class="text-3xl font-bold text-gray-800">Verify Email</h2>
12
+ {% if error %}
13
+ <script>
14
+ showAlert("{{ error }}", "error");
15
+ </script>
16
+ {% endif %}
17
+
18
+ <p class="text-gray-500 mt-2">Enter the 6-digit OTP sent to your email</p>
19
+
20
+ <form method="POST" class="mt-6 space-y-4">
21
+ <input type="text" name="otp" maxlength="6" placeholder="Enter OTP"
22
+ required
23
+ class="w-full text-center text-xl tracking-widest px-4 py-3 rounded-lg border focus:ring-2 focus:ring-orange-500 outline-none">
24
+
25
+ <button
26
+ class="w-full bg-orange-600 hover:bg-orange-700 text-white py-3 rounded-lg font-semibold transition">
27
+ Verify OTP
28
+ </button>
29
+ </form>
30
+
31
+ <a href="/auth/resend/{{ email }}"
32
+ class="block mt-4 text-sm text-orange-600 hover:underline">
33
+ Resend OTP
34
+ </a>
35
+ </div>
36
+ <div id="alertBox"
37
+ class="hidden fixed top-5 right-5 max-w-sm px-5 py-4 rounded-lg shadow-lg text-white">
38
+ </div>
39
+ <script>
40
+ function showAlert(message, type = "error") {
41
+ const alertBox = document.getElementById("alertBox");
42
+
43
+ alertBox.textContent = message;
44
+
45
+ alertBox.className =
46
+ "fixed top-5 right-5 max-w-sm px-5 py-4 rounded-lg shadow-lg text-white " +
47
+ (type === "success" ? "bg-green-600" : "bg-red-600");
48
+
49
+ alertBox.classList.remove("hidden");
50
+
51
+ setTimeout(() => {
52
+ alertBox.classList.add("hidden");
53
+ }, 3000);
54
+ }
55
+ </script>
56
+
57
+ </body>
58
+ </html>