migration to new backend
This commit is contained in:
Sean Morley
145
frontend/src/routes/settings/+page.server.ts
Normal file
145
frontend/src/routes/settings/+page.server.ts
Normal file
@@ -0,0 +1,145 @@
|
||||
import { fail, redirect, type Actions } from '@sveltejs/kit';
|
||||
import type { PageServerLoad } from '../$types';
|
||||
const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
|
||||
import type { User } from '$lib/types';
|
||||
const endpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
|
||||
|
||||
export const load: PageServerLoad = async (event) => {
|
||||
if (!event.locals.user) {
|
||||
return redirect(302, '/');
|
||||
}
|
||||
if (!event.cookies.get('auth')) {
|
||||
return redirect(302, '/');
|
||||
}
|
||||
let res = await fetch(`${endpoint}/auth/user/`, {
|
||||
headers: {
|
||||
Cookie: event.cookies.get('auth') || ''
|
||||
}
|
||||
});
|
||||
let user = (await res.json()) as User;
|
||||
|
||||
if (!res.ok) {
|
||||
return redirect(302, '/');
|
||||
}
|
||||
|
||||
return {
|
||||
props: {
|
||||
user
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
export const actions: Actions = {
|
||||
changeDetails: async (event) => {
|
||||
if (!event.locals.user) {
|
||||
return redirect(302, '/');
|
||||
}
|
||||
if (!event.cookies.get('auth')) {
|
||||
return redirect(302, '/');
|
||||
}
|
||||
|
||||
try {
|
||||
const formData = await event.request.formData();
|
||||
|
||||
let username = formData.get('username') as string | null | undefined;
|
||||
let first_name = formData.get('first_name') as string | null | undefined;
|
||||
let last_name = formData.get('last_name') as string | null | undefined;
|
||||
let profile_pic = formData.get('profile_pic') as File | null | undefined;
|
||||
|
||||
const resCurrent = await fetch(`${endpoint}/auth/user/`, {
|
||||
headers: {
|
||||
Cookie: event.cookies.get('auth') || ''
|
||||
}
|
||||
});
|
||||
|
||||
if (!resCurrent.ok) {
|
||||
return fail(resCurrent.status, await resCurrent.json());
|
||||
}
|
||||
|
||||
let currentUser = (await resCurrent.json()) as User;
|
||||
|
||||
if (username === currentUser.username) {
|
||||
username = undefined;
|
||||
}
|
||||
if (first_name === currentUser.first_name) {
|
||||
first_name = undefined;
|
||||
}
|
||||
if (last_name === currentUser.last_name) {
|
||||
last_name = undefined;
|
||||
}
|
||||
if (currentUser.profile_pic && !profile_pic) {
|
||||
profile_pic = undefined;
|
||||
}
|
||||
|
||||
let formDataToSend = new FormData();
|
||||
if (username) {
|
||||
formDataToSend.append('username', username);
|
||||
}
|
||||
if (first_name) {
|
||||
formDataToSend.append('first_name', first_name);
|
||||
}
|
||||
if (last_name) {
|
||||
formDataToSend.append('last_name', last_name);
|
||||
}
|
||||
if (profile_pic) {
|
||||
formDataToSend.append('profile_pic', profile_pic);
|
||||
}
|
||||
|
||||
let res = await fetch(`${endpoint}/auth/user/`, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
Cookie: event.cookies.get('auth') || ''
|
||||
},
|
||||
body: formDataToSend
|
||||
});
|
||||
|
||||
let response = await res.json();
|
||||
|
||||
if (!res.ok) {
|
||||
// change the first key in the response to 'message' for the fail function
|
||||
response = { message: Object.values(response)[0] };
|
||||
return fail(res.status, response);
|
||||
}
|
||||
|
||||
let user = response as User;
|
||||
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
console.error('Error:', error);
|
||||
return { error: 'An error occurred while processing your request.' };
|
||||
}
|
||||
},
|
||||
changePassword: async (event) => {
|
||||
if (!event.locals.user) {
|
||||
return redirect(302, '/');
|
||||
}
|
||||
if (!event.cookies.get('auth')) {
|
||||
return redirect(302, '/');
|
||||
}
|
||||
console.log('changePassword');
|
||||
const formData = await event.request.formData();
|
||||
|
||||
const password1 = formData.get('password1') as string | null | undefined;
|
||||
const password2 = formData.get('password2') as string | null | undefined;
|
||||
|
||||
if (password1 !== password2) {
|
||||
return fail(400, { message: 'Passwords do not match' });
|
||||
}
|
||||
|
||||
let res = await fetch(`${endpoint}/auth/password/change/`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
Cookie: event.cookies.get('auth') || '',
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
new_password1: password1,
|
||||
new_password2: password2
|
||||
})
|
||||
});
|
||||
if (!res.ok) {
|
||||
return fail(res.status, await res.json());
|
||||
}
|
||||
return { success: true };
|
||||
}
|
||||
};
|
||||
133
frontend/src/routes/settings/+page.svelte
Normal file
133
frontend/src/routes/settings/+page.svelte
Normal file
@@ -0,0 +1,133 @@
|
||||
<script lang="ts">
|
||||
import { enhance } from '$app/forms';
|
||||
import { goto, invalidateAll } from '$app/navigation';
|
||||
import { page } from '$app/stores';
|
||||
import { addToast } from '$lib/toasts';
|
||||
import type { User } from '$lib/types.js';
|
||||
import { onMount } from 'svelte';
|
||||
import { browser } from '$app/environment';
|
||||
|
||||
export let data;
|
||||
let user: User;
|
||||
if (data.user) {
|
||||
user = data.user;
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
if (browser) {
|
||||
const queryParams = new URLSearchParams($page.url.search);
|
||||
const pageParam = queryParams.get('page');
|
||||
|
||||
if (pageParam === 'success') {
|
||||
addToast('success', 'Settings updated successfully!');
|
||||
console.log('Settings updated successfully!');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$: {
|
||||
if (browser && $page.form?.success) {
|
||||
window.location.href = '/settings?page=success';
|
||||
}
|
||||
if (browser && $page.form?.error) {
|
||||
addToast('error', 'Error updating settings');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<h1 class="text-center font-extrabold text-4xl mb-6">Settings Page</h1>
|
||||
|
||||
<h1 class="text-center font-extrabold text-xl">User Account Settings</h1>
|
||||
<div class="flex justify-center">
|
||||
<form
|
||||
method="post"
|
||||
action="?/changeDetails"
|
||||
use:enhance
|
||||
class="w-full max-w-xs"
|
||||
enctype="multipart/form-data"
|
||||
>
|
||||
<label for="username">Username</label>
|
||||
<input
|
||||
bind:value={user.username}
|
||||
name="username"
|
||||
id="username"
|
||||
class="block mb-2 input input-bordered w-full max-w-xs"
|
||||
/><br />
|
||||
<label for="first_name">First Name</label>
|
||||
<input
|
||||
type="text"
|
||||
bind:value={user.first_name}
|
||||
name="first_name"
|
||||
id="first_name"
|
||||
class="block mb-2 input input-bordered w-full max-w-xs"
|
||||
/><br />
|
||||
|
||||
<label for="last_name">Last Name</label>
|
||||
<input
|
||||
type="text"
|
||||
bind:value={user.last_name}
|
||||
name="last_name"
|
||||
id="last_name"
|
||||
class="block mb-2 input input-bordered w-full max-w-xs"
|
||||
/><br />
|
||||
<!-- <label for="first_name">Email</label>
|
||||
<input
|
||||
type="email"
|
||||
bind:value={user.email}
|
||||
name="email"
|
||||
id="email"
|
||||
class="block mb-2 input input-bordered w-full max-w-xs"
|
||||
/><br /> -->
|
||||
<label for="profilePicture">Profile Picture</label>
|
||||
<input
|
||||
type="file"
|
||||
name="profile_pic"
|
||||
id="profile_pic"
|
||||
class="file-input file-input-bordered w-full max-w-xs mb-2"
|
||||
/><br />
|
||||
<button class="py-2 mt-2 px-4 btn btn-primary">Update</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{#if $page.form?.message}
|
||||
<div class="text-center text-error mt-4">
|
||||
{$page.form?.message}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<h1 class="text-center font-extrabold text-xl mt-4 mb-2">Password Change</h1>
|
||||
<div class="flex justify-center">
|
||||
<form action="?/changePassword" method="post" class="w-full max-w-xs">
|
||||
<input
|
||||
type="password"
|
||||
name="password1"
|
||||
placeholder="New Password"
|
||||
id="password1"
|
||||
class="block mb-2 input input-bordered w-full max-w-xs"
|
||||
/>
|
||||
<br />
|
||||
<input
|
||||
type="password"
|
||||
name="password2"
|
||||
id="password2"
|
||||
placeholder="Confirm New Password"
|
||||
class="block mb-2 input input-bordered w-full max-w-xs"
|
||||
/>
|
||||
<button class="py-2 px-4 btn btn-primary mt-2">Change Password</button>
|
||||
<br />
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<small class="text-center"
|
||||
><b>For Debug Use:</b> Server PK={user.pk} | Date Joined: {user.date_joined
|
||||
? new Date(user.date_joined).toDateString()
|
||||
: ''} | Staff user: {user.is_staff}</small
|
||||
>
|
||||
|
||||
<svelte:head>
|
||||
<title>User Settings | AdventureLog</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Update your user account settings here. Change your username, first name, last name, and profile icon."
|
||||
/>
|
||||
</svelte:head>
|
||||
30
frontend/src/routes/settings/forgot-password/+page.server.ts
Normal file
30
frontend/src/routes/settings/forgot-password/+page.server.ts
Normal file
@@ -0,0 +1,30 @@
|
||||
import { fail, type Actions } from '@sveltejs/kit';
|
||||
|
||||
const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
|
||||
const endpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
|
||||
|
||||
export const actions: Actions = {
|
||||
forgotPassword: async (event) => {
|
||||
const formData = await event.request.formData();
|
||||
|
||||
const email = formData.get('email') as string | null | undefined;
|
||||
|
||||
if (!email) {
|
||||
return fail(400, { message: 'Email is required' });
|
||||
}
|
||||
|
||||
let res = await fetch(`${endpoint}/auth/password/reset/`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
email
|
||||
})
|
||||
});
|
||||
if (!res.ok) {
|
||||
return fail(res.status, { message: await res.json() });
|
||||
}
|
||||
return { success: true };
|
||||
}
|
||||
};
|
||||
30
frontend/src/routes/settings/forgot-password/+page.svelte
Normal file
30
frontend/src/routes/settings/forgot-password/+page.svelte
Normal file
@@ -0,0 +1,30 @@
|
||||
<script lang="ts">
|
||||
import { enhance } from '$app/forms';
|
||||
import { page } from '$app/stores';
|
||||
</script>
|
||||
|
||||
<h1 class="text-center font-extrabold text-4xl mb-6">Reset Password</h1>
|
||||
|
||||
<div class="flex justify-center">
|
||||
<form method="post" action="?/forgotPassword" class="w-full max-w-xs">
|
||||
<label for="email">Email</label>
|
||||
<input
|
||||
name="email"
|
||||
type="email"
|
||||
id="email"
|
||||
class="block mb-2 input input-bordered w-full max-w-xs"
|
||||
/><br />
|
||||
<button class="py-2 px-4 btn btn-primary mr-2">Reset Password</button>
|
||||
{#if $page.form?.message}
|
||||
<div class="text-center text-error mt-4">
|
||||
{$page.form?.message}
|
||||
</div>
|
||||
{/if}
|
||||
{#if $page.form?.success}
|
||||
<div class="text-center text-success mt-4">
|
||||
If the email address you provided is associated with an account, you will receive an email
|
||||
with instructions to reset your password!
|
||||
</div>
|
||||
{/if}
|
||||
</form>
|
||||
</div>
|
||||
Reference in New Issue
Block a user