added login

2025-10-09 10:05:59 +01:00
parent edc7567d15
commit 4f72cc6abe
6 changed files with 228 additions and 41 deletions
@@ -0,0 +1,159 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Discord Clone - Sign Up</title>
+        <link rel="stylesheet" href="static/css/index.css"/>
+    </head>
+    <body>
+        <div class="signup-container">
+            <div class="signup-header">
+                <div class="logo">DC</div>
+                <h1>Login</h1>
+                <p>Enter the chat</p>
+            </div>
+
+            <div class="signup-form">
+                <div class="success-message" id="successMessage">
+                    Login successful, Redirecting
+                </div>
+
+                <div class="form-group">
+                    <label for="username">Username</label>
+                    <input
+                        type="text"
+                        id="username"
+                        name="username"
+                        placeholder="Enter your username"
+                        required
+                    />
+                    <div class="error-message">Username is required</div>
+                </div>
+
+                <div class="form-group">
+                    <label for="password">Password</label>
+                    <div class="input-wrapper">
+                        <input
+                            type="password"
+                            id="password"
+                            name="password"
+                            placeholder="Enter your password"
+                            required
+                        />
+                        <button
+                            type="button"
+                            class="password-toggle"
+                            id="passwordToggle"
+                        >
+                            SHOW
+                        </button>
+                    </div>
+                    <div class="error-message">
+                        Password must be at least 8 characters
+                    </div>
+                </div>
+
+                <button type="button" class="submit-button" id="submitButton">
+                    Login
+                </button>
+            </div>
+
+            <div class="signup-footer">
+                Already have an account? <a href="/login">Log in</a>
+            </div>
+        </div>
+
+        <script>
+            const form = {
+                username: document.getElementById("username"),
+                password: document.getElementById("password"),
+            };
+
+            const submitButton = document.getElementById("submitButton");
+            const successMessage = document.getElementById("successMessage");
+
+            // Password toggle functionality
+            const passwordToggle = document.getElementById("passwordToggle");
+
+            passwordToggle.addEventListener("click", function () {
+                const type =
+                    form.password.type === "password" ? "text" : "password";
+                form.password.type = type;
+                this.textContent = type === "password" ? "SHOW" : "HIDE";
+            });
+
+            function toggleError(input, hasError) {
+                const formGroup = input.closest(".form-group");
+                if (hasError) {
+                    formGroup.classList.add("error");
+                } else {
+                    formGroup.classList.remove("error");
+                }
+            }
+
+            // Form submission
+            submitButton.addEventListener("click", async function () {
+
+                // Disable button and show loading
+                submitButton.disabled = true;
+                submitButton.innerHTML =
+                    '<span class="loading-spinner"></span>Creating Account...';
+
+                // Prepare data
+                const formData = {
+                    username: form.username.value.trim(),
+                    password: form.password.value,
+                };
+
+                try {
+                    // Replace with your actual backend endpoint
+                    const response = await fetch(
+                        "http://localhost:8000/login",
+                        {
+                            method: "POST",
+                            headers: {
+                                "Content-Type": "application/json",
+                            },
+                            body: JSON.stringify(formData),
+                        },
+                    );
+
+                    if (response.ok) {
+                        // Show success message
+                        successMessage.classList.add("show");
+                        submitButton.innerHTML = "Logged in!!";
+
+                        // Optional: Redirect after success
+                        setTimeout(() => {
+                            // window.location.href = '/chat';
+                            console.log("Redirecting to chat...");
+                        }, 2000);
+                    } else {
+                        const error = await response.json();
+                        throw new Error(error.message || "Login failed");
+                    }
+                } catch (error) {
+                    console.error("Login error:", error);
+                    alert(
+                        error.message ||
+                            "Failed to login. Please try again.",
+                    );
+                    submitButton.disabled = false;
+                    submitButton.innerHTML = "Login";
+                }
+            });
+
+            // Allow Enter key to submit
+            Object.values(form).forEach((input) => {
+                if (input.tagName === "INPUT") {
+                    input.addEventListener("keypress", function (e) {
+                        if (e.key === "Enter") {
+                            submitButton.click();
+                        }
+                    });
+                }
+            });
+        </script>
+    </body>
+</html>