cleanup finalize jwt auth

- Add sample login page
2025-01-17 01:14:59 +01:00
parent b3762373d4
commit e7961576ca
4 changed files with 111 additions and 7 deletions
--- a/src/main/resources/static/index.html
+++ b/src/main/resources/static/index.html
@ -0,0 +1,86 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Log in</title>
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <!-- jQuery -->
+    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
+</head>
+<body>
+
+<div class="container d-flex justify-content-center align-items-center min-vh-100">
+    <div class="card shadow p-4" style="width: 100%; max-width: 400px;">
+        <h3 class="text-center mb-4">Log In</h3>
+        <form id="loginForm">
+            <div class="mb-3">
+                <label for="username" class="form-label">Username</label>
+                <input type="text" class="form-control" id="username" name="username" required>
+            </div>
+            <div class="mb-3">
+                <label for="password" class="form-label">Password</label>
+                <input type="password" class="form-control" id="password" name="password" required>
+            </div>
+            <div class="d-flex justify-content-center">
+                <button type="submit" class="btn btn-primary w-100">Log In</button>
+            </div>
+        </form>
+        <div class="mt-3 text-center" id="loader" style="display: none;">
+            <div class="spinner-border" role="status">
+                <span class="visually-hidden">Loading...</span>
+            </div>
+        </div>
+        <div class="mt-3 text-center" id="response" style="display: none;"></div>
+    </div>
+</div>
+
+<script>
+    $(document).ready(function () {
+        $('#loginForm').on('submit', function (event) {
+            event.preventDefault();
+
+            // Hide previous messages and show loader
+            $('#response').hide().empty();
+            $('#loader').show();
+
+            // Get form data
+            const username = $('#username').val();
+            const password = $('#password').val();
+
+            // Send POST request
+            $.ajax({
+                url: 'http://localhost:665/api/v1/auth/login',
+                method: 'POST',
+                contentType: 'application/json',
+                data: JSON.stringify({ username, password }),
+                success: function (response) {
+                    // Hide loader and display token
+                    $('#loader').hide();
+                    $('#response').html(`<div class="alert alert-success">Token: ${response.token}</div>`).show();
+                },
+                error: function () {
+                    // Hide loader and show error message
+                    $('#loader').hide();
+                    $('#response').html('<div class="alert alert-danger">Failed to log in. Please try again.</div>').show();
+                }
+            });
+        });
+
+        // Allow pressing Enter to submit the form
+        $('#loginForm').on('keypress', function (event) {
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                $('#loginForm').submit();
+            }
+        });
+    });
+</script>
+
+<!-- Bootstrap Bundle with Popper -->
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>