feat signin form

This commit is contained in:
Per Stark
2024-12-27 01:08:39 +01:00
parent 61e81ca894
commit a3984ab348
4 changed files with 61 additions and 53 deletions

View File

@@ -1,47 +0,0 @@
{% block content %}
<div class="max-w-md mx-auto">
<h2 class="text-2xl font-bold text-center mb-8">Sign in to your account</h2>
<form hx-post="/signin" hx-target="#signin-result" hx-indicator="#spinner" class="space-y-6">
<div class="form-control">
<label class="label">
<span class="label-text">Email</span>
</label>
<input type="email" name="email" placeholder="Enter your email" class="input input-bordered w-full" required
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" />
</div>
<div class="form-control">
<label class="label">
<span class="label-text">Password</span>
</label>
<input type="password" name="password" placeholder="Enter your password" class="input input-bordered w-full"
required />
</div>
<div class="flex items-center justify-between">
<label class="label cursor-pointer">
<input type="checkbox" name="remember" class="checkbox checkbox-primary checkbox-sm mr-2" />
<span class="label-text">Remember me</span>
</label>
<a href="/forgot-password" class="link link-primary text-sm">Forgot password?</a>
</div>
<div class="form-control mt-6">
<button class="btn btn-primary w-full">
Sign in
<span id="spinner" class="loading loading-spinner text-primary htmx-indicator"></span>
</button>
</div>
<div id="signin-result"></div>
<div class="divider">OR</div>
<div class="text-center text-sm">
Don't have an account?
<a href="/signup" class="link link-primary">Create one</a>
</div>
</form>
</div>
{% endblock %}

View File

@@ -0,0 +1,45 @@
{% extends "head_base.html" %}
{% block body %}
<style>
form.htmx-request {
opacity: 0.5;
}
</style>
<div class="min-h-screen grid place-items-center place-content-center">
<div class="max-w-lg mx-auto">
<h2 class="text-2xl font-bold text-center mb-8">Login to your account</h2>
<form hx-post="/signin">
<div class="form-control">
<label class="label">
<span class="label-text">Email</span>
</label>
<input type="email" name="email" placeholder="Enter your email" class="input input-bordered w-full" required />
</div>
<div class="form-control">
<label class="label">
<span class="label-text">Password</span>
</label>
<input type="password" name="password" placeholder="Enter your password" class="input input-bordered w-full"
required minlength="8" />
</div>
<div class="form-control mt-4">
<label class="label cursor-pointer justify-start gap-2">
<input type="checkbox" name="remember_me" class="checkbox checkbox-primary" />
<span class="label-text">Remember me</span>
</label>
</div>
<div class="form-control mt-6">
<button id="submit-btn" class="btn btn-primary w-full">
Login
</button>
</div>
<div id="login-result"></div>
</form>
<div class="divider">OR</div>
<div class="text-center text-sm">
Don't have an account?
<a href="/signup" class="link link-primary">Sign up</a>
</div>
</div>
</div>
{% endblock %}