1 files changed, 105 insertions, 0 deletions
diff --git a/api/templates/login.html b/api/templates/login.html
new file mode 100644
index 0000000..8e59481
--- /dev/null
+++ b/api/templates/login.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LinkLogger | Login</title>
+</head>
+<body>
+    <div>
+        <p id="error">Incorrect username/password. Please try again.</p>
+        <form action="/login" method="POST">
+            <input type="text" name="username" placeholder="Username" required>
+            <input type="password" name="password" placeholder="Password" required>
+            <button type="submit">Login</button>
+        </form>
+        <hr>
+        <p>Don't have an account? <a href="/signup">Create one now</a></p>
+    </div>
+</body>
+</html>
+
+<style>
+    body {
+        margin: 0;
+        padding: 0;
+        font-family: Arial, sans-serif;
+        background-color: #2c3338;
+    }
+
+    div {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        text-align: center;
+    }
+
+    input {
+        display: block;
+        margin: 10px auto;
+        width: 300px;
+        border-radius: 5px;
+        padding: 15px;
+        color: #ccc;
+        background-color: #3b4148;
+        border: none;
+        font-size: 17px;
+    }
+
+    button {
+        display: block;
+        margin: 10px auto;
+        width: 100%;
+        border-radius: 5px;
+        padding: 15px;
+        color: #ccc;
+        background-color: #415eac;
+        border: none;
+        font-size: 17px;
+        cursor: pointer;
+    }
+
+    hr {
+        color: #606468;
+    }
+
+    p {
+        color: #606468;
+    }
+
+    #error {
+        font-size: 15px;
+        color: #f55757;
+        display: none;
+    }
+
+    a {
+        color: #ccc;
+        text-decoration: none;
+    }
+
+    a:hover {
+        text-decoration: underline;
+    }
+</style>
+
+<script>
+    document.querySelector('form').addEventListener('submit', async function(event) {
+        // Prevent default form submission
+        event.preventDefault();
+
+        const formData = new FormData(this);
+        // Send POST request to /token containing form data
+        const response = await fetch('/api/auth/token', {
+            method: 'POST',
+            body: formData
+        });
+
+        if (response.status != 200) {
+            document.getElementById('error').style.display = 'block';
+        } else {
+            window.location.href = '/dashboard';
+        }
+    });
+</script>
+\ No newline at end of file