first commit

2025-07-07 01:44:12 +02:00
commit bf68bde4ce
72 changed files with 29002 additions and 0 deletions
@@ -0,0 +1,133 @@
+package pages
+
+import "tankstopp/internal/views/components"
+
+templ AuthLayout(title string) {
+	<!DOCTYPE html>
+	<html lang="en">
+		<head>
+			<meta charset="UTF-8"/>
+			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+			<title>{ title } - TankStopp</title>
+			<link href="https://cdn.jsdelivr.net/npm/@tabler/core@1.0.0-beta17/dist/css/tabler.min.css" rel="stylesheet"/>
+			<link href="https://cdn.jsdelivr.net/npm/@tabler/icons@latest/icons-sprite.svg" rel="stylesheet"/>
+			<link href="/static/style.css" rel="stylesheet"/>
+		</head>
+		<body class="d-flex flex-column">
+			<div class="page page-center">
+				<div class="container container-tight py-4">
+					<div class="text-center mb-4">
+						<a href="/" class="navbar-brand navbar-brand-autodark">
+							@components.Icon("fuel", 48)
+							TankStopp
+						</a>
+					</div>
+					{ children... }
+				</div>
+			</div>
+			<script src="https://cdn.jsdelivr.net/npm/@tabler/core@1.0.0-beta17/dist/js/tabler.min.js"></script>
+			<script>
+            function togglePassword(fieldName) {
+                const passwordInput = document.querySelector(`input[name="${fieldName}"]`);
+                const icon = passwordInput.nextElementSibling.querySelector('svg');
+
+                if (passwordInput.type === 'password') {
+                    passwordInput.type = 'text';
+                    icon.innerHTML = `
+                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                        <line x1="3" y1="3" x2="21" y2="21"/>
+                        <path d="M10.584 10.587a2 2 0 0 0 2.828 2.83"/>
+                        <path d="M9.363 5.365a9.466 9.466 0 0 1 2.637 -.365c4 0 7.333 2.333 10 7c-.778 1.361 -1.612 2.524 -2.503 3.488m-2.14 1.861c-1.631 1.1 -3.415 1.651 -5.357 1.651c-4 0 -7.333 -2.333 -10 -7c1.369 -2.395 2.913 -4.175 4.632 -5.341"/>
+                    `;
+                } else {
+                    passwordInput.type = 'password';
+                    icon.innerHTML = `
+                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                        <circle cx="12" cy="12" r="2"/>
+                        <path d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7"/>
+                    `;
+                }
+            }
+        </script>
+		</body>
+	</html>
+}
+
+templ LoginPage(errorMessage string) {
+	@AuthLayout("Login") {
+		<div class="card card-md">
+			<div class="card-body">
+				<h2 class="h2 text-center mb-4">Login to your account</h2>
+				if errorMessage != "" {
+					@components.Alert("danger", errorMessage)
+				}
+				@components.Form("post", "/login") {
+					@components.FormGroup("Username", "") {
+						@components.Input("username", "text", "Enter your username", "", true)
+					}
+					@components.FormGroup("Password", "") {
+						@components.PasswordInput("password", "Enter your password", true)
+					}
+					<div class="form-footer">
+						<button type="submit" class="btn btn-primary w-100">
+							@components.Icon("lock", 24)
+							Sign in
+						</button>
+					</div>
+				}
+			</div>
+		</div>
+		<div class="text-center text-muted mt-3">
+			Don't have an account yet?
+			<a href="/register" tabindex="-1">Sign up</a>
+		</div>
+	}
+}
+
+templ RegisterPage(errorMessage string) {
+	@AuthLayout("Register") {
+		<div class="card card-md">
+			<div class="card-body">
+				<h2 class="h2 text-center mb-4">Create new account</h2>
+				if errorMessage != "" {
+					@components.Alert("danger", errorMessage)
+				}
+				@components.Form("post", "/register") {
+					@components.FormGroup("Username", "Choose a unique username") {
+						@components.Input("username", "text", "Enter your username", "", true)
+					}
+					@components.FormGroup("Email", "Enter a valid email address") {
+						@components.Input("email", "email", "Enter your email", "", true)
+					}
+					@components.FormGroup("Password", "Password must be at least 8 characters") {
+						@components.PasswordInput("password", "Enter your password", true)
+					}
+					@components.FormGroup("Confirm Password", "") {
+						@components.PasswordInput("confirm_password", "Confirm your password", true)
+					}
+					@components.FormGroup("Base Currency", "Choose your preferred currency for fuel prices") {
+						@components.Select("base_currency", true) {
+							@components.Option("EUR", "EUR - Euro", false)
+							@components.Option("USD", "USD - US Dollar", false)
+							@components.Option("GBP", "GBP - British Pound", false)
+							@components.Option("CHF", "CHF - Swiss Franc", false)
+							@components.Option("JPY", "JPY - Japanese Yen", false)
+							@components.Option("CAD", "CAD - Canadian Dollar", false)
+							@components.Option("AUD", "AUD - Australian Dollar", false)
+						}
+					}
+					<div class="form-footer">
+						<button type="submit" class="btn btn-primary w-100">
+							@components.Icon("user", 24)
+							Create account
+						</button>
+					</div>
+				}
+			</div>
+		</div>
+		<div class="text-center text-muted mt-3">
+			Already have an account?
+			<a href="/login" tabindex="-1">Sign in</a>
+		</div>
+	}
+}