login works and looks good

This commit is contained in:
Bryce
2025-08-03 22:39:10 -07:00
parent 9de5413e5a
commit c13b22234b
2 changed files with 159 additions and 174 deletions

View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" data-theme="cupcake">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -7,74 +7,64 @@
<script src="https://unpkg.com/htmx.org@1.9.12"></script> <script src="https://unpkg.com/htmx.org@1.9.12"></script>
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" /> <link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" /> <link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head> </head>
<body class="min-h-screen flex bg-base-200"> <body class="min-h-screen bg-base-200 flex items-center justify-center p-4">
<div class="flex flex-col justify-center items-center min-h-screen w-full p-4"> <div class="card bg-base-100 shadow-xl w-full max-w-sm">
<div class="card bg-base-100 shadow-xl w-full max-w-md"> <div class="card-body p-6">
<div class="card-body"> <div class="text-center mb-6">
<div class="text-center mb-6"> <h1 class="text-2xl font-bold text-primary">
<h1 class="text-3xl font-bold text-primary"> <i class="fas fa-envelope mr-2"></i>
<i class="fas fa-envelope mr-2"></i> Email Organizer
Email Organizer </h1>
</h1> <p class="text-base-content/70 text-sm mt-1">Sign in to your account</p>
<p class="text-base-content/70 mt-2">Sign in to your account</p> </div>
</div>
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class="alert alert-{{ 'error' if category == 'error' else 'success' }} mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span>{{ message }}</span>
</div>
{% endfor %}
{% endif %}
{% endwith %}
<form method="POST" action="{{ url_for('auth.login') }}" class="space-y-4">
<label for="email" class="floating-label">
<span class="label-text text-sm font-medium">Email</span>
<input type="email" id="email" name="email" class="input input-bordered w-full" placeholder="Enter your email" required>
</label>
{% with messages = get_flashed_messages(with_categories=true) %} <label for="password" class="floating-label">
{% if messages %} <span class="label-text text-sm font-medium">Password</span>
{% for category, message in messages %} <input type="password" id="password" name="password" class="input input-bordered w-full"
<div class="alert alert-{{ 'error' if category == 'error' else 'success' }} mb-4"> placeholder="Enter your password" required>
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"> </label>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span>{{ message }}</span>
</div>
{% endfor %}
{% endif %}
{% endwith %}
<form method="POST" action="{{ url_for('auth.login') }}"> <label class="label cursor-pointer justify-start">
<div class="form-control mb-4"> <input type="checkbox" name="remember" class="checkbox checkbox-primary">
<label class="label"> <span class="label-text text-sm">Remember me</span>
<span class="label-text">Email</span> </label>
</label>
<input type="email" name="email" class="input input-bordered w-full"
placeholder="Enter your email" required>
</div>
<div class="form-control mb-4">
<label class="label">
<span class="label-text">Password</span>
</label>
<input type="password" name="password" class="input input-bordered w-full"
placeholder="Enter your password" required>
</div>
<div class="form-control mb-6">
<label class="label cursor-pointer">
<span class="label-text">Remember me</span>
<input type="checkbox" name="remember" class="checkbox checkbox-primary">
</label>
</div>
<div class="form-control">
<button type="submit" class="btn btn-primary w-full">
<i class="fas fa-sign-in-alt mr-2"></i>
Sign In
</button>
</div>
</form>
<div class="text-center mt-6"> <button type="submit" class="btn btn-primary w-full">
<p class="text-base-content/70"> <i class="fas fa-sign-in-alt mr-2"></i>
Don't have an account? Sign In
<a href="{{ url_for('auth.signup') }}" class="link link-primary"> </button>
Sign up </form>
</a>
</p> <div class="text-center mt-6">
</div> <p class="text-base-content/70 text-sm">
Don't have an account?
<a href="{{ url_for('auth.signup') }}" class="link link-primary">
Sign up
</a>
</p>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -8,121 +8,116 @@
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" /> <link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" /> <link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head> </head>
<body class="min-h-screen flex bg-base-200"> <body class="min-h-screen bg-base-200 flex items-center justify-center p-4">
<div class="flex flex-col justify-center items-center min-h-screen w-full p-4"> <div class="card bg-base-100 shadow-xl w-full max-w-md">
<div class="card bg-base-100 shadow-xl w-full max-w-md"> <div class="card-body p-6 max-w-sm">
<div class="card-body"> <div class="text-center mb-6">
<div class="text-center mb-6"> <h1 class="text-2xl font-bold text-primary">
<h1 class="text-3xl font-bold text-primary"> <i class="fas fa-envelope mr-2"></i>
<i class="fas fa-envelope mr-2"></i> Email Organizer
Email Organizer </h1>
</h1> <p class="text-base-content/70 text-sm mt-1">Create your account</p>
<p class="text-base-content/70 mt-2">Create your account</p> </div>
</div>
{% with messages = get_flashed_messages(with_categories=true) %}
{% with messages = get_flashed_messages(with_categories=true) %} {% if messages %}
{% if messages %} {% for category, message in messages %}
{% for category, message in messages %} <div class="alert alert-{{ 'error' if category == 'error' else 'success' }} mb-4">
<div class="alert alert-{{ 'error' if category == 'error' else 'success' }} mb-4"> <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg>
</svg> <span>{{ message }}</span>
<span>{{ message }}</span> </div>
</div> {% endfor %}
{% endfor %}
{% endif %}
{% endwith %}
{% if errors %}
<div class="alert alert-error mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span>Please fix the following errors:</span>
</div>
<ul class="text-error text-sm mb-4">
{% for error in errors %}
<li>• {{ error }}</li>
{% endfor %}
</ul>
{% endif %} {% endif %}
{% endwith %}
<form method="POST" action="{{ url_for('auth.signup') }}">
<div class="form-control mb-4"> {% if errors %}
<label class="label"> <div class="alert alert-error mb-4">
<span class="label-text">First Name</span> <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
</label> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
<input type="text" name="first_name" class="input input-bordered w-full" </svg>
placeholder="Enter your first name" value="{{ first_name or '' }}" required> <span>Please fix the following errors:</span>
</div>
<div class="form-control mb-4">
<label class="label">
<span class="label-text">Last Name</span>
</label>
<input type="text" name="last_name" class="input input-bordered w-full"
placeholder="Enter your last name" value="{{ last_name or '' }}" required>
</div>
<div class="form-control mb-4">
<label class="label">
<span class="label-text">Email</span>
</label>
<input type="email" name="email" class="input input-bordered w-full"
placeholder="Enter your email" value="{{ email or '' }}" required>
</div>
<div class="form-control mb-4">
<label class="label">
<span class="label-text">Password</span>
</label>
<input type="password" name="password" class="input input-bordered w-full"
placeholder="Create a password" required>
<label class="label">
<span class="label-text-alt text-xs text-base-content/50">
Password must be at least 8 characters with uppercase, lowercase, and numbers
</span>
</label>
</div>
<div class="form-control mb-6">
<label class="label">
<span class="label-text">Confirm Password</span>
</label>
<input type="password" name="confirm_password" class="input input-bordered w-full"
placeholder="Confirm your password" required>
</div>
<div class="form-control mb-6">
<label class="label cursor-pointer">
<input type="checkbox" name="terms" class="checkbox checkbox-primary" required>
<span class="label-text">
I agree to the
<a href="#" class="link link-primary">Terms of Service</a>
and
<a href="#" class="link link-primary">Privacy Policy</a>
</span>
</label>
</div>
<div class="form-control">
<button type="submit" class="btn btn-primary w-full">
<i class="fas fa-user-plus mr-2"></i>
Create Account
</button>
</div>
</form>
<div class="text-center mt-6">
<p class="text-base-content/70">
Already have an account?
<a href="{{ url_for('auth.login') }}" class="link link-primary">
Sign in
</a>
</p>
</div> </div>
<ul class="text-error text-sm mb-4">
{% for error in errors %}
<li>• {{ error }}</li>
{% endfor %}
</ul>
{% endif %}
<form method="POST" action="{{ url_for('auth.signup') }}" class="space-y-4">
<div class="form-control">
<label for="first_name" class="label">
<span class="label-text text-sm font-medium">First Name</span>
</label>
<input type="text" id="first_name" name="first_name" class="input input-bordered w-full"
placeholder="Enter your first name" value="{{ first_name or '' }}" required>
</div>
<div class="form-control">
<label for="last_name" class="label">
<span class="label-text text-sm font-medium">Last Name</span>
</label>
<input type="text" id="last_name" name="last_name" class="input input-bordered w-full"
placeholder="Enter your last name" value="{{ last_name or '' }}" required>
</div>
<div class="form-control">
<label for="email" class="label">
<span class="label-text text-sm font-medium">Email</span>
</label>
<input type="email" id="email" name="email" class="input input-bordered w-full"
placeholder="Enter your email" value="{{ email or '' }}" required>
</div>
<div class="form-control">
<label for="password" class="label">
<span class="label-text text-sm font-medium">Password</span>
</label>
<input type="password" id="password" name="password" class="input input-bordered w-full"
placeholder="Create a password" required>
<span class="label-text-alt text-xs text-base-content/50">
Password must be at least 8 characters with uppercase, lowercase, and numbers
</span>
</div>
<div class="form-control">
<label for="confirm_password" class="label">
<span class="label-text text-sm font-medium">Confirm Password</span>
</label>
<input type="password" id="confirm_password" name="confirm_password" class="input input-bordered w-full"
placeholder="Confirm your password" required>
</div>
<div class="form-control">
<label class="label cursor-pointer justify-start">
<input type="checkbox" name="terms" class="checkbox checkbox-primary" required>
<span class="label-text text-sm">
I agree to the
<a href="#" class="link link-primary">Terms of Service</a>
and
<a href="#" class="link link-primary">Privacy Policy</a>
</span>
</label>
</div>
<button type="submit" class="btn btn-primary w-full">
<i class="fas fa-user-plus mr-2"></i>
Create Account
</button>
</form>
<div class="text-center mt-6">
<p class="text-base-content/70 text-sm">
Already have an account?
<a href="{{ url_for('auth.login') }}" class="link link-primary">
Sign in
</a>
</p>
</div> </div>
</div> </div>
</div> </div>