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