feat: Signout Button
This commit is contained in:
parent
fb825a0d16
commit
d17a806783
2 changed files with 142 additions and 0 deletions
23
src/routes/account/+page.server.ts
Normal file
23
src/routes/account/+page.server.ts
Normal file
|
@ -0,0 +1,23 @@
|
|||
import { fail, redirect } from '@sveltejs/kit';
|
||||
|
||||
import type { Actions, PageServerLoad } from './$types';
|
||||
|
||||
export const load: PageServerLoad = async ({ locals: { authReq } }) => {
|
||||
const session = await authReq.validate();
|
||||
if (!session) throw redirect(302, '/login');
|
||||
return {
|
||||
username: session.user.username
|
||||
};
|
||||
};
|
||||
|
||||
export const actions: Actions = {
|
||||
signout: async ({ locals: { auth, authReq } }) => {
|
||||
const session = await authReq.validate();
|
||||
if (!session) return fail(401);
|
||||
|
||||
await auth.invalidateSession(session.sessionId);
|
||||
authReq.setSession(null); // remove cookie
|
||||
|
||||
throw redirect(302, '/login');
|
||||
}
|
||||
};
|
119
src/routes/account/+page.svelte
Normal file
119
src/routes/account/+page.svelte
Normal file
|
@ -0,0 +1,119 @@
|
|||
<script lang="ts">
|
||||
import { enhance } from '$app/forms';
|
||||
|
||||
export let data;
|
||||
export let form;
|
||||
|
||||
let currentPassword = '';
|
||||
let newPassword = '';
|
||||
let confirmPassword = '';
|
||||
|
||||
let { username } = data;
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Account | Roll With It</title>
|
||||
</svelte:head>
|
||||
|
||||
<main class="container">
|
||||
<h1>Account</h1>
|
||||
<section>
|
||||
<form method="POST" action="?/updateAccount">
|
||||
{#if form?.type === 'updateAccount'}
|
||||
<small style="color: {form?.success ? 'green' : 'red'}">{form?.message}</small>
|
||||
{/if}
|
||||
<label for="username">
|
||||
Username
|
||||
<input
|
||||
type="text"
|
||||
name="username"
|
||||
placeholder="Username"
|
||||
value={form?.username ?? username}
|
||||
aria-label="Email"
|
||||
autocomplete="email"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
|
||||
<!-- Needed for spacing -->
|
||||
<br />
|
||||
|
||||
<button type="submit">Save Changes</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<form method="POST" action="?/changePassword" use:enhance>
|
||||
{#if form?.type === 'changePassword'}
|
||||
<small style="color: {form?.success ? 'green' : 'red'}">{form.message}</small>
|
||||
{/if}
|
||||
<label for="current-password">
|
||||
Current Password
|
||||
<input
|
||||
type="password"
|
||||
name="current-password"
|
||||
placeholder="Current password"
|
||||
aria-label="Current Password"
|
||||
autocomplete="current-password"
|
||||
bind:value={currentPassword}
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div class="grid">
|
||||
<label for="new-password">
|
||||
New Password
|
||||
<input
|
||||
type="password"
|
||||
name="new-password"
|
||||
placeholder="Leave empty to keep your current password"
|
||||
aria-label="New Password"
|
||||
autocomplete="new-password"
|
||||
bind:value={newPassword}
|
||||
aria-invalid={newPassword.length === 0 ? null : newPassword.length < 8 ? true : false}
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
<label for="confirm-password">
|
||||
Confirm New Password
|
||||
<input
|
||||
type="password"
|
||||
name="confirm-password"
|
||||
placeholder="Confirm your new password"
|
||||
aria-label="Confirm Password"
|
||||
autocomplete="new-password"
|
||||
bind:value={confirmPassword}
|
||||
aria-invalid={confirmPassword.length === 0
|
||||
? null
|
||||
: newPassword !== confirmPassword
|
||||
? true
|
||||
: false}
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={currentPassword.length === 0 ||
|
||||
newPassword.length < 8 ||
|
||||
newPassword !== confirmPassword
|
||||
? true
|
||||
: false}
|
||||
>
|
||||
Change Password
|
||||
</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<hgroup>
|
||||
<h3>Billing Information</h3>
|
||||
<h4>Thank you for your support!</h4>
|
||||
</hgroup>
|
||||
</section>
|
||||
|
||||
<form method="POST" action="?/signout" use:enhance>
|
||||
<button class="secondary" type="submit">Logout</button>
|
||||
</form>
|
||||
</main>
|
Loading…
Reference in a new issue