feat: first frontend implementation

2026-08-19 19:53:21 +02:00 · 2023-08-08 05:14:31 +02:00
parent 91d82b0ad7
commit dad0c906f0
9 changed files with 307 additions and 36 deletions
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Login Page</title>
+
+	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" defer></script>
+
+    <style>
+    </style>
+</head>
+<body>
+<h1>Home</h1>
+</body>
+</html>
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>GohCMS | Login</title>
+
+	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet"
+		  integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
+	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
+			integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"
+			defer></script>
+
+	<style>
+        .form-container {
+            max-width: 24rem;
+        }
+	</style>
+</head>
+<body class="d-flex min-vh-100 vw-100 justify-content-center align-items-center">
+
+<div class="container">
+	<div class="d-flex flex-column gap-5 m-auto form-container">
+		<h1>GohCMS</h1>
+		<form action="login" method="POST" class="">
+			<div class="d-flex flex-column gap-4">
+				<div class="form-floating">
+					<input
+							name="username"
+							type="text"
+							class="form-control {{ if .IsError }} is-invalid {{ end }}"
+							id="username"
+							placeholder="Votre nom d'utilisateur"
+							required>
+					<label for="username">Username</label>
+				</div>
+				<div class="form-floating">
+					<input name="password"
+						   type="password"
+						   class="form-control {{ if .IsError }} is-invalid {{ end }}"
+						   id="password"
+						   placeholder="Votre mot de passe"
+						   required>
+					<label for="password">Password</label>
+					<div class="invalid-feedback">
+						{{.Error}}
+					</div>
+				</div>
+				<button type="submit" class="btn btn-primary" disabled>Log in</button>
+			</div>
+		</form>
+	</div>
+</div>
+
+<script>
+    const button = document.querySelector("button[type=submit]")
+    const inputs = document.querySelectorAll('input')
+
+    function formFieldsEmpty() {
+        return Array.from(inputs).some((input) => input.value === "")
+    }
+
+    function setButtonDisabled() {
+        button.disabled = formFieldsEmpty() ? "disabled" : ""
+    }
+
+    window.addEventListener('input', (event) => {
+        if (event.target.tagName === "INPUT") setButtonDisabled()
+    })
+
+    setButtonDisabled()
+</script>
+
+</body>
+</html>