chaas/imc-vibe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Christoph Haas 2026-03-23 22:29:18 +01:00
parent 629c66cc34
commit c459cc1efb
1 changed files with 58 additions and 95 deletions
Download patch file Download diff file Expand all files Collapse all files

153
frontend/src/routes/auth/change-password/+page.svelte
View file

@ -1,9 +1,4 @@
<script lang="ts"> <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 oldPassword = $state('');
let newPassword = $state(''); let newPassword = $state('');
let confirmPassword = $state(''); let confirmPassword = $state('');
@ -11,19 +6,6 @@
let success = $state(false); let success = $state(false);
let loading = $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) { async function handleSubmit(e: Event) {
e.preventDefault(); e.preventDefault();
error = ''; error = '';
@ -67,95 +49,76 @@
loading = false; loading = false;
} }
} }
function handleLogout() {
localStorage.removeItem('token');
goto('/auth/login');
}
</script> </script>
<div class="min-h-screen bg-base-200" data-theme="light"> <div class="max-w-md mx-auto p-6">
<header class="bg-base-100 shadow"> <div class="card bg-base-100 shadow">
<div class="max-w-2xl mx-auto px-6 py-4 flex justify-between items-center"> <div class="card-body">
<h1 class="text-xl font-bold">Change Password</h1> <h2 class="card-title mb-4">Change Password</h2>
<div class="flex items-center gap-4">
{#if user} {#if error}
<span class="text-base-content/60">Logged in as <strong>{user.username}</strong></span> <div class="alert alert-error mb-4">
{/if} <span>{error}</span>
<button class="btn btn-error btn-sm" onclick={handleLogout}>Logout</button> </div>
</div> {/if}
</div>
</header>
<main class="max-w-md mx-auto mt-8 p-6"> {#if success}
<div class="card bg-base-100 shadow"> <div class="alert alert-success mb-4">
<div class="card-body"> <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
{#if error} <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" />
<div class="alert alert-error mb-4"> </svg>
<span>{error}</span> <span>Password changed successfully!</span>
</div> </div>
{/if} {/if}
{#if success} <form onsubmit={handleSubmit} class="space-y-4">
<div class="alert alert-success mb-4"> <fieldset class="fieldset">
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"> <legend class="fieldset-legend">Current Password</legend>
<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" /> <input
</svg> type="password"
<span>Password changed successfully!</span> class="input input-bordered w-full"
</div> bind:value={oldPassword}
{/if} placeholder="Enter current password"
required
disabled={loading}
/>
</fieldset>
<form onsubmit={handleSubmit} class="space-y-4"> <fieldset class="fieldset">
<fieldset class="fieldset"> <legend class="fieldset-legend">New Password</legend>
<legend class="fieldset-legend">Current Password</legend> <input
<input type="password"
type="password" class="input input-bordered w-full"
class="input input-bordered w-full" bind:value={newPassword}
bind:value={oldPassword} placeholder="Enter new password (min 8 characters)"
placeholder="Enter current password" required
required disabled={loading}
disabled={loading} />
/> </fieldset>
</fieldset>
<fieldset class="fieldset"> <fieldset class="fieldset">
<legend class="fieldset-legend">New Password</legend> <legend class="fieldset-legend">Confirm New Password</legend>
<input <input
type="password" type="password"
class="input input-bordered w-full" class="input input-bordered w-full"
bind:value={newPassword} bind:value={confirmPassword}
placeholder="Enter new password (min 8 characters)" placeholder="Confirm new password"
required required
disabled={loading} disabled={loading}
/> />
</fieldset> </fieldset>
<fieldset class="fieldset"> <div class="flex gap-2 justify-end">
<legend class="fieldset-legend">Confirm New Password</legend> <a href="/" class="btn btn-ghost">Cancel</a>
<input <button type="submit" class="btn btn-primary" disabled={loading}>
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} {#if loading}
<span class="loading loading-spinner loading-sm"></span> <span class="loading loading-spinner loading-sm"></span>
Changing...
{:else} {:else}
Change Password Change
{/if} {/if}
</button> </button>
</form>
<div class="text-center mt-4">
<a href="/" class="link link-primary">Back to Dashboard</a>
</div> </div>
</div> </form>
</div> </div>
</main> </div>
</div> </div>