feat: consistent styling

This commit is contained in:
Per Stark
2024-12-28 23:54:58 +01:00
parent bdf7a12e9c
commit 0110ffa5bf
18 changed files with 256 additions and 209 deletions

View File

@@ -1,49 +1,47 @@
{% extends "body_base.html" %}
{% block content %}
{% block main %}
<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">Account Settings</h2>
<div class="form-control">
<label class="label">
<span class="label-text">Email</span>
</label>
<input type="email" name="email" value="{{ user.email }}" class="input input-bordered w-full" disabled />
</div>
<div class="form-control">
<label class="label">
<span class="label-text">API key</span>
</label>
{% block api_key_section %}
{% if user.api_key %}
<input type="text" name="api-key" value="{{ user.api_key }}" class="input input-bordered w-full" disabled />
{% else %}
<button hx-post="/set-api-key" class="btn btn-secondary w-full" hx-swap="outerHTML">
Create API-Key
</button>
{% endif %}
{% endblock %}
</div>
<div class="form-control mt-4">
<button hx-post="/verify-email" class="btn btn-secondary w-full">
Verify Email
</button>
</div>
<div class="form-control mt-4">
<button hx-get="/change-password" class="btn btn-primary w-full">
Change Password
</button>
</div>
<div class="form-control mt-4">
<button hx-delete="/delete-account" class="btn btn-error w-full">
Delete Account
</button>
</div>
<div id="account-result" class="mt-4"></div>
<div class="max-w-lg w-full">
<h2 class="text-2xl font-bold text-center mb-8">Account Settings</h2>
<div class="form-control">
<label class="label">
<span class="label-text">Email</span>
</label>
<input type="email" name="email" value="{{ user.email }}" class="input input-bordered w-full" disabled />
</div>
<div class="form-control">
<label class="label">
<span class="label-text">API key</span>
</label>
{% block api_key_section %}
{% if user.api_key %}
<input type="text" name="api-key" value="{{ user.api_key }}" class="input input-bordered w-full" disabled />
{% else %}
<button hx-post="/set-api-key" class="btn btn-secondary w-full" hx-swap="outerHTML">
Create API-Key
</button>
{% endif %}
{% endblock %}
</div>
<div class="form-control mt-4">
<button hx-post="/verify-email" class="btn btn-secondary w-full">
Verify Email
</button>
</div>
<div class="form-control mt-4">
<button hx-get="/change-password" class="btn btn-primary w-full">
Change Password
</button>
</div>
<div class="form-control mt-4">
<button hx-delete="/delete-account" class="btn btn-error w-full">
Delete Account
</button>
</div>
<div id="account-result" class="mt-4"></div>
</div>
{% endblock %}

View File

@@ -5,41 +5,41 @@
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 class="min-h-screen container mx-auto max-w-md flex justify-center flex-col">
<h2 class="text-2xl font-bold text-center mb-8">Login to your account</h2>
<form hx-post="/signin" hx-target="#login-result">
<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-4">
<input type="checkbox" name="remember_me" class="checkbox checkbox-primary" />
<span class="label-text">Remember me</span>
</label>
</div>
<div class="mt-4" id="login-result"></div>
<div class="form-control mt-6">
<button id="submit-btn" class="btn btn-primary w-full">
Login
</button>
</div>
</form>
<div class="divider">OR</div>
<div class="text-center text-sm">
Don't have an account?
<a href="/signup" hx-boost="true" class="link link-primary">Sign up</a>
</div>
</div>
{% endblock %}

View File

@@ -6,41 +6,39 @@
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">Create your account</h2>
<form hx-post="/signup" hx-target="#signup-result" class="">
<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="min-h-screen container mx-auto max-w-md flex justify-center flex-col">
<h2 class="text-2xl font-bold text-center mb-8">Create your account</h2>
<div class="form-control">
<label class="label">
<span class="label-text">Password</span>
</label>
<input type="password" name="password" placeholder="Create a password" class="input input-bordered w-full"
required minlength="8" />
</div>
<div class="form-control mt-6">
<button id="submit-btn" class="btn btn-primary w-full">
Create Account
</button>
</div>
<div id="signup-result"></div>
</form>
<div class="divider">OR</div>
<div class="text-center text-sm">
Already have an account?
<a href="/signin" class="link link-primary">Sign in</a>
<form hx-post="/signup" hx-target="#signup-result" class="">
<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="Create a password" class="input input-bordered w-full"
required minlength="8" />
</div>
<div class="mt-4" id="signup-result"></div>
<div class="form-control mt-6">
<button id="submit-btn" class="btn btn-primary w-full">
Create Account
</button>
</div>
</form>
<div class="divider">OR</div>
<div class="text-center text-sm">
Already have an account?
<a href="/signin" hx-boost="true" class="link link-primary">Sign in</a>
</div>
</div>
{% endblock %}