Simplify change-password page: remove duplicate header, use main layout navbar, align buttons right

This commit is contained in:
Christoph Haas 2026-03-23 22:29:18 +01:00
parent 629c66cc34
commit c459cc1efb

View file

@ -1,9 +1,4 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { onMount } from 'svelte';
import { decodeJWT } from '$lib/auth';
let user: { username?: string } | null = $state(null);
let oldPassword = $state('');
let newPassword = $state('');
let confirmPassword = $state('');
@ -11,19 +6,6 @@
let success = $state(false);
let loading = $state(false);
onMount(async () => {
const token = localStorage.getItem('token');
if (!token) {
await goto('/auth/login');
return;
}
const payload = decodeJWT(token);
if (payload) {
user = { username: payload.username };
}
});
async function handleSubmit(e: Event) {
e.preventDefault();
error = '';
@ -67,95 +49,76 @@
loading = false;
}
}
function handleLogout() {
localStorage.removeItem('token');
goto('/auth/login');
}
</script>
<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 class="text-base-content/60">Logged in as <strong>{user.username}</strong></span>
{/if}
<button class="btn btn-error btn-sm" onclick={handleLogout}>Logout</button>
</div>
</div>
</header>
<div class="max-w-md mx-auto p-6">
<div class="card bg-base-100 shadow">
<div class="card-body">
<h2 class="card-title mb-4">Change Password</h2>
{#if error}
<div class="alert alert-error mb-4">
<span>{error}</span>
</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="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}
{#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>
<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">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>
<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}>
<div class="flex gap-2 justify-end">
<a href="/" class="btn btn-ghost">Cancel</a>
<button type="submit" class="btn btn-primary" disabled={loading}>
{#if loading}
<span class="loading loading-spinner loading-sm"></span>
Changing...
{:else}
Change Password
Change
{/if}
</button>
</form>
<div class="text-center mt-4">
<a href="/" class="link link-primary">Back to Dashboard</a>
</div>
</div>
</form>
</div>
</main>
</div>
</div>