Added login form html and styling

view/component/form/loginform.templ

@@ -0,0 +1,132 @@
+package form
+
+import "fmt"
+
+templ LoginForm(loginError string) {
+	{{
+	var errCreds string
+	if loginError == "Username or password is incorrect" {
+		errCreds = "true"
+	} else {
+		errCreds = "false"
+	}
+	xdata := fmt.Sprintf("{credentialError: %s, errorMessage: '%s'}", errCreds, loginError)
+	}}
+	<form>
+		<div
+			class="grid gap-y-4"
+			x-data={ xdata }
+		>
+			<!-- Form Group -->
+			<div>
+				<label
+					for="email"
+					class="block text-sm mb-2"
+				>Username</label>
+				<div class="relative">
+					<input
+						type="text"
+						id="username"
+						name="username"
+						class="py-3 px-4 block w-full rounded-lg text-sm
+                        focus:border-blue focus:ring-blue bg-base
+                        disabled:opacity-50 
+                        disabled:pointer-events-none"
+						required
+						aria-describedby="username-error"
+					/>
+					<div
+						class="absolute inset-y-0 end-0 
+                        pointer-events-none pe-3 pt-3"
+						x-show="credentialError"
+						x-cloak
+					>
+						<svg
+							class="size-5 text-red"
+							width="16"
+							height="16"
+							fill="currentColor"
+							viewBox="0 0 16 16"
+							aria-hidden="true"
+						>
+							<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"></path>
+						</svg>
+					</div>
+				</div>
+			</div>
+			<div>
+				<div class="flex justify-between items-center">
+					<label
+						for="password"
+						class="block text-sm mb-2"
+					>Password</label>
+					<a
+						class="inline-flex items-center gap-x-1 text-sm 
+                        text-blue decoration-2 hover:underline 
+                        focus:outline-none focus:underline font-medium"
+						href="/recover-account"
+					>Forgot password?</a>
+				</div>
+				<div class="relative">
+					<input
+						type="password"
+						id="password"
+						name="password"
+						class="py-3 px-4 block w-full rounded-lg text-sm
+                        focus:border-blue focus:ring-blue bg-base
+                        disabled:opacity-50 disabled:pointer-events-none"
+						required
+						aria-describedby="password-error"
+					/>
+					<div
+						class="absolute inset-y-0 end-0 
+                        pointer-events-none pe-3 pt-3"
+						x-show="credentialError"
+						x-cloak
+					>
+						<svg
+							class="size-5 text-red"
+							width="16"
+							height="16"
+							fill="currentColor"
+							viewBox="0 0 16 16"
+							aria-hidden="true"
+						>
+							<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"></path>
+						</svg>
+					</div>
+				</div>
+				<p
+					class="text-center text-xs text-red mt-2"
+					id="password-error"
+					x-show="errorMessage"
+					x-cloak
+					x-text="errorMessage"
+				></p>
+			</div>
+			<div class="flex items-center">
+				<div class="flex">
+					<input
+						id="remember-me"
+						name="remember-me"
+						type="checkbox"
+						class="shrink-0 mt-0.5 border-gray-200 rounded
+                        text-blue focus:ring-blue-500"
+					/>
+				</div>
+				<div class="ms-3">
+					<label
+						for="remember-me"
+						class="text-sm"
+					>Remember me</label>
+				</div>
+			</div>
+			<button
+				type="submit"
+				class="w-full py-3 px-4 inline-flex justify-center items-center 
+                    gap-x-2 rounded-lg border border-transparent transition
+                    bg-green hover:bg-green/75 text-mantle hover:cursor-pointer"
+			>Login</button>
+		</div>
+	</form>
+}