Complete daisyUI migration with CSS fixes
- Migrate all pages to daisyUI components - Add data-theme="light" to app.html for proper theme - Fix config to load .env from multiple locations - Update avatar to use avatar-placeholder pattern - Use @tailwindcss/vite plugin instead of PostCSS
This commit is contained in:
parent
70aa813c7f
commit
0217f0b4c4
14 changed files with 739 additions and 1564 deletions
|
|
@ -1,8 +1,9 @@
|
|||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import { onMount } from 'svelte';
|
||||
import { decodeJWT } from '$lib/auth';
|
||||
|
||||
let user: { email?: string; username?: string } | null = $state(null);
|
||||
let user: { username?: string } | null = $state(null);
|
||||
let oldPassword = $state('');
|
||||
let newPassword = $state('');
|
||||
let confirmPassword = $state('');
|
||||
|
|
@ -17,20 +18,9 @@
|
|||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/auth/me', {
|
||||
headers: { Authorization: `Bearer ${token}` }
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
await goto('/auth/login');
|
||||
return;
|
||||
}
|
||||
|
||||
const data = await res.json();
|
||||
user = data.data;
|
||||
} catch {
|
||||
await goto('/auth/login');
|
||||
const payload = decodeJWT(token);
|
||||
if (payload) {
|
||||
user = { username: payload.username };
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -84,200 +74,88 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<div class="page-container">
|
||||
<header class="header">
|
||||
<div class="header-content">
|
||||
<h1>Change Password</h1>
|
||||
<div class="user-info">
|
||||
<div class="min-h-screen bg-base-200" data-theme="light">
|
||||
<header class="bg-base-100 shadow">
|
||||
<div class="max-w-2xl mx-auto px-6 py-4 flex justify-between items-center">
|
||||
<h1 class="text-xl font-bold">Change Password</h1>
|
||||
<div class="flex items-center gap-4">
|
||||
{#if user}
|
||||
<span>Logged in as <strong>{user.email || user.username}</strong></span>
|
||||
<span class="text-base-content/60">Logged in as <strong>{user.username}</strong></span>
|
||||
{/if}
|
||||
<button class="logout" onclick={handleLogout}>Logout</button>
|
||||
<button class="btn btn-error btn-sm" onclick={handleLogout}>Logout</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
{#if error}
|
||||
<div class="error">{error}</div>
|
||||
{/if}
|
||||
<main class="max-w-md mx-auto mt-8 p-6">
|
||||
<div class="card bg-base-100 shadow">
|
||||
<div class="card-body">
|
||||
{#if error}
|
||||
<div class="alert alert-error mb-4">
|
||||
<span>{error}</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if success}
|
||||
<div class="success">
|
||||
Password changed successfully!
|
||||
{#if success}
|
||||
<div class="alert alert-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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span>Password changed successfully!</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<form onsubmit={handleSubmit} class="space-y-4">
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend">Current Password</legend>
|
||||
<input
|
||||
type="password"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={oldPassword}
|
||||
placeholder="Enter current password"
|
||||
required
|
||||
disabled={loading}
|
||||
/>
|
||||
</fieldset>
|
||||
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend">New Password</legend>
|
||||
<input
|
||||
type="password"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={newPassword}
|
||||
placeholder="Enter new password (min 8 characters)"
|
||||
required
|
||||
disabled={loading}
|
||||
/>
|
||||
</fieldset>
|
||||
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend">Confirm New Password</legend>
|
||||
<input
|
||||
type="password"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={confirmPassword}
|
||||
placeholder="Confirm new password"
|
||||
required
|
||||
disabled={loading}
|
||||
/>
|
||||
</fieldset>
|
||||
|
||||
<button type="submit" class="btn btn-primary w-full" disabled={loading}>
|
||||
{#if loading}
|
||||
<span class="loading loading-spinner loading-sm"></span>
|
||||
Changing...
|
||||
{:else}
|
||||
Change Password
|
||||
{/if}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<a href="/" class="link link-primary">Back to Dashboard</a>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<form onsubmit={handleSubmit}>
|
||||
<label>
|
||||
Current Password
|
||||
<input
|
||||
type="password"
|
||||
bind:value={oldPassword}
|
||||
placeholder="Enter current password"
|
||||
required
|
||||
disabled={loading}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
New Password
|
||||
<input
|
||||
type="password"
|
||||
bind:value={newPassword}
|
||||
placeholder="Enter new password (min 8 characters)"
|
||||
required
|
||||
disabled={loading}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Confirm New Password
|
||||
<input
|
||||
type="password"
|
||||
bind:value={confirmPassword}
|
||||
placeholder="Confirm new password"
|
||||
required
|
||||
disabled={loading}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<button type="submit" disabled={loading}>
|
||||
{loading ? 'Changing...' : 'Change Password'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="links">
|
||||
<a href="/auth/dashboard">Back to Dashboard</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.page-container {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: white;
|
||||
padding: 1rem 2rem;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.logout {
|
||||
padding: 0.5rem 1rem;
|
||||
background: #e74c3c;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.content {
|
||||
max-width: 500px;
|
||||
margin: 2rem auto;
|
||||
padding: 2rem;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.error {
|
||||
background: #fee;
|
||||
color: #c00;
|
||||
padding: 0.75rem;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.success {
|
||||
background: #efe;
|
||||
color: #060;
|
||||
padding: 0.75rem;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
font-weight: 500;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0.75rem;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
button:hover:not(:disabled) {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.links {
|
||||
margin-top: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.links a {
|
||||
color: #667eea;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.links a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
let identifier = $state('');
|
||||
let error = $state('');
|
||||
let success = $state(false);
|
||||
|
|
@ -34,165 +32,57 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<div class="login-container">
|
||||
<div class="login-card">
|
||||
<h1>Reset Password</h1>
|
||||
|
||||
{#if error}
|
||||
<div class="error">{error}</div>
|
||||
{/if}
|
||||
<div class="min-h-screen flex items-center justify-center bg-base-200" data-theme="light">
|
||||
<div class="card bg-base-100 shadow-xl w-full max-w-md">
|
||||
<div class="card-body">
|
||||
<h1 class="text-2xl font-bold text-center mb-4">Reset Password</h1>
|
||||
|
||||
{#if error}
|
||||
<div class="alert alert-error mb-4">
|
||||
<span>{error}</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if success}
|
||||
<div class="success">
|
||||
<p>If an account exists with that email or username, a password reset link has been sent.</p>
|
||||
<p>Please check your inbox.</p>
|
||||
</div>
|
||||
<div class="links">
|
||||
<a href="/auth/login">Back to Login</a>
|
||||
</div>
|
||||
{:else}
|
||||
<p class="info">Enter your email address or username and we'll send you a link to reset your password.</p>
|
||||
{#if success}
|
||||
<div class="alert alert-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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span>If an account exists with that email or username, a password reset link has been sent.</span>
|
||||
</div>
|
||||
<div class="text-center mt-4">
|
||||
<a href="/auth/login" class="btn btn-primary">Back to Login</a>
|
||||
</div>
|
||||
{:else}
|
||||
<p class="text-base-content/60 text-center mb-6">Enter your email address or username and we'll send you a link to reset your password.</p>
|
||||
|
||||
<form onsubmit={handleSubmit}>
|
||||
<label>
|
||||
Email or Username
|
||||
<input
|
||||
type="text"
|
||||
bind:value={identifier}
|
||||
placeholder="user@example.org or username"
|
||||
required
|
||||
disabled={loading}
|
||||
/>
|
||||
</label>
|
||||
<form onsubmit={handleSubmit} class="space-y-4">
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend">Email or Username</legend>
|
||||
<input
|
||||
type="text"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={identifier}
|
||||
placeholder="user@example.org or username"
|
||||
required
|
||||
disabled={loading}
|
||||
/>
|
||||
</fieldset>
|
||||
|
||||
<button type="submit" disabled={loading}>
|
||||
{loading ? 'Sending...' : 'Send Reset Link'}
|
||||
</button>
|
||||
</form>
|
||||
<button type="submit" class="btn btn-primary w-full" disabled={loading}>
|
||||
{#if loading}
|
||||
<span class="loading loading-spinner loading-sm"></span>
|
||||
Sending...
|
||||
{:else}
|
||||
Send Reset Link
|
||||
{/if}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="links">
|
||||
<a href="/auth/login">Back to Login</a>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="text-center mt-4">
|
||||
<a href="/auth/login" class="link link-primary">Back to Login</a>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.login-container {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
background: white;
|
||||
padding: 2rem;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 0 0 1rem;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.info {
|
||||
color: #666;
|
||||
text-align: center;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.error {
|
||||
background: #fee;
|
||||
color: #c00;
|
||||
padding: 0.75rem;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.success {
|
||||
background: #efe;
|
||||
color: #060;
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.success p {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
font-weight: 500;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0.75rem;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
button:hover:not(:disabled) {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.links {
|
||||
margin-top: 1.5rem;
|
||||
text-align: center;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.links a {
|
||||
color: #667eea;
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.links a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -39,151 +39,56 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<div class="login-container">
|
||||
<div class="login-card">
|
||||
<h1>IMC Vibe</h1>
|
||||
<p class="subtitle">Mail Server Administration</p>
|
||||
<div class="min-h-screen flex items-center justify-center bg-base-200" data-theme="light">
|
||||
<div class="card bg-base-100 shadow-xl w-full max-w-md">
|
||||
<div class="card-body">
|
||||
<h1 class="text-2xl font-bold text-center mb-2">IMC Vibe</h1>
|
||||
<p class="text-center text-base-content/60 mb-6">Mail Server Administration</p>
|
||||
|
||||
{#if error}
|
||||
<div class="error">{error}</div>
|
||||
{/if}
|
||||
{#if error}
|
||||
<div class="alert alert-error mb-4">
|
||||
<span>{error}</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<form onsubmit={(e) => { e.preventDefault(); handleSubmit(); }}>
|
||||
<label>
|
||||
Email or Username
|
||||
<input
|
||||
type="text"
|
||||
bind:value={identifier}
|
||||
placeholder="user@example.org or username"
|
||||
required
|
||||
autocomplete="username"
|
||||
/>
|
||||
</label>
|
||||
<form onsubmit={(e) => { e.preventDefault(); handleSubmit(); }} class="space-y-4">
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend">Email or Username</legend>
|
||||
<input
|
||||
type="text"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={identifier}
|
||||
placeholder="user@example.org or username"
|
||||
required
|
||||
autocomplete="username"
|
||||
/>
|
||||
</fieldset>
|
||||
|
||||
<label>
|
||||
Password
|
||||
<input
|
||||
type="password"
|
||||
bind:value={password}
|
||||
placeholder="Enter password"
|
||||
required
|
||||
autocomplete="current-password"
|
||||
/>
|
||||
</label>
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend">Password</legend>
|
||||
<input
|
||||
type="password"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={password}
|
||||
placeholder="Enter password"
|
||||
required
|
||||
autocomplete="current-password"
|
||||
/>
|
||||
</fieldset>
|
||||
|
||||
<div class="forgot">
|
||||
<a href="/auth/forgot">Forgot password?</a>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<a href="/auth/forgot" class="link link-primary text-sm">Forgot password?</a>
|
||||
</div>
|
||||
|
||||
<button type="submit" disabled={loading}>
|
||||
{loading ? 'Signing in...' : 'Sign In'}
|
||||
</button>
|
||||
</form>
|
||||
<button type="submit" class="btn btn-primary w-full" disabled={loading}>
|
||||
{#if loading}
|
||||
<span class="loading loading-spinner loading-sm"></span>
|
||||
Signing in...
|
||||
{:else}
|
||||
Sign In
|
||||
{/if}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.login-container {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
|
||||
}
|
||||
|
||||
.login-card {
|
||||
background: white;
|
||||
padding: 3rem;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
text-align: center;
|
||||
color: #7f8c8d;
|
||||
margin: 0.5rem 0 2rem;
|
||||
}
|
||||
|
||||
.error {
|
||||
background: #fee;
|
||||
border: 1px solid #fcc;
|
||||
color: #c00;
|
||||
padding: 0.75rem;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
font-weight: 500;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: none;
|
||||
border-color: #3498db;
|
||||
}
|
||||
|
||||
.forgot {
|
||||
text-align: right;
|
||||
margin-top: -0.5rem;
|
||||
}
|
||||
|
||||
.forgot a {
|
||||
color: #3498db;
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.forgot a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0.875rem;
|
||||
background: #3498db;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
button:hover:not(:disabled) {
|
||||
background: #2980b9;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue