migration to new backend
This commit is contained in:
Sean Morley
80
frontend/src/routes/signup/+page.server.ts
Normal file
80
frontend/src/routes/signup/+page.server.ts
Normal file
@@ -0,0 +1,80 @@
|
||||
import { error, fail, redirect } from '@sveltejs/kit';
|
||||
|
||||
import type { Actions, PageServerLoad } from './$types';
|
||||
const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
|
||||
|
||||
export const load: PageServerLoad = async (event) => {
|
||||
if (event.locals.user) {
|
||||
return redirect(302, '/');
|
||||
}
|
||||
};
|
||||
|
||||
export const actions: Actions = {
|
||||
default: async (event) => {
|
||||
const formData = await event.request.formData();
|
||||
const formUsername = formData.get('username');
|
||||
const password1 = formData.get('password1');
|
||||
const password2 = formData.get('password2');
|
||||
const email = formData.get('email');
|
||||
const first_name = formData.get('first_name');
|
||||
const last_name = formData.get('last_name');
|
||||
|
||||
let username = formUsername?.toString().toLocaleLowerCase();
|
||||
|
||||
const serverEndpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
|
||||
const csrfTokenFetch = await event.fetch(`${serverEndpoint}/csrf/`);
|
||||
|
||||
if (!csrfTokenFetch.ok) {
|
||||
event.locals.user = null;
|
||||
return fail(500, { message: 'Failed to fetch CSRF token' });
|
||||
}
|
||||
|
||||
const tokenPromise = await csrfTokenFetch.json();
|
||||
const csrfToken = tokenPromise.csrfToken;
|
||||
|
||||
const loginFetch = await event.fetch(`${serverEndpoint}/auth/registration/`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'X-CSRFToken': csrfToken,
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
username: username,
|
||||
password1: password1,
|
||||
password2: password2,
|
||||
email: email,
|
||||
first_name,
|
||||
last_name
|
||||
})
|
||||
});
|
||||
const loginResponse = await loginFetch.json();
|
||||
|
||||
if (!loginFetch.ok) {
|
||||
// get the value of the first key in the object
|
||||
const firstKey = Object.keys(loginResponse)[0] || 'error';
|
||||
const error =
|
||||
loginResponse[firstKey][0] || 'Failed to register user. Check your inputs and try again.';
|
||||
return fail(400, {
|
||||
message: error
|
||||
});
|
||||
} else {
|
||||
const token = loginResponse.access;
|
||||
const tokenFormatted = `auth=${token}`;
|
||||
const refreshToken = `${loginResponse.refresh}`;
|
||||
event.cookies.set('auth', tokenFormatted, {
|
||||
httpOnly: true,
|
||||
sameSite: 'lax',
|
||||
expires: new Date(Date.now() + 60 * 60 * 1000), // 60 minutes
|
||||
path: '/'
|
||||
});
|
||||
event.cookies.set('refresh', refreshToken, {
|
||||
httpOnly: true,
|
||||
sameSite: 'lax',
|
||||
expires: new Date(Date.now() + 365 * 24 * 60 * 60 * 1000), // 1 year
|
||||
path: '/'
|
||||
});
|
||||
|
||||
return redirect(302, '/');
|
||||
}
|
||||
}
|
||||
};
|
||||
104
frontend/src/routes/signup/+page.svelte
Normal file
104
frontend/src/routes/signup/+page.svelte
Normal file
@@ -0,0 +1,104 @@
|
||||
<script lang="ts">
|
||||
import { enhance } from '$app/forms';
|
||||
import { goto } from '$app/navigation';
|
||||
import { getRandomQuote } from '$lib';
|
||||
import { redirect, type SubmitFunction } from '@sveltejs/kit';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
export let data;
|
||||
console.log(data);
|
||||
|
||||
import { page } from '$app/stores';
|
||||
|
||||
let quote: string = '';
|
||||
let errors: { message?: string } = {};
|
||||
let backgroundImageUrl =
|
||||
'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5?q=80&w=2942&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D';
|
||||
|
||||
onMount(async () => {
|
||||
quote = getRandomQuote();
|
||||
});
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="min-h-screen bg-no-repeat bg-cover flex items-center justify-center"
|
||||
style="background-image: url('{backgroundImageUrl}')"
|
||||
>
|
||||
<div class="card card-compact w-96 bg-base-100 shadow-xl p-6 mt-4 mb-4">
|
||||
<article class="text-center text-4xl font-extrabold">
|
||||
<h1>Signup</h1>
|
||||
</article>
|
||||
|
||||
<div class="flex justify-center">
|
||||
<form method="post" use:enhance class="w-full max-w-xs">
|
||||
<label for="username">Username</label>
|
||||
<input
|
||||
name="username"
|
||||
id="username"
|
||||
class="block mb-2 input input-bordered w-full max-w-xs"
|
||||
/><br />
|
||||
<label for="first_name">Email</label>
|
||||
<input
|
||||
name="email"
|
||||
id="email"
|
||||
type="email"
|
||||
class="block mb-2 input input-bordered w-full max-w-xs"
|
||||
/><br />
|
||||
<label for="first_name">First Name</label>
|
||||
<input
|
||||
name="first_name"
|
||||
id="first_name"
|
||||
type="text"
|
||||
class="block mb-2 input input-bordered w-full max-w-xs"
|
||||
/><br />
|
||||
<label for="first_name">Last Name</label>
|
||||
<input
|
||||
name="last_name"
|
||||
id="last_name"
|
||||
type="text"
|
||||
class="block mb-2 input input-bordered w-full max-w-xs"
|
||||
/><br />
|
||||
<label for="password">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
name="password1"
|
||||
id="password1"
|
||||
class="block mb-2 input input-bordered w-full max-w-xs"
|
||||
/><br /><label for="password">Confirm Password</label>
|
||||
<input
|
||||
type="password"
|
||||
name="password2"
|
||||
id="password2"
|
||||
class="block mb-2 input input-bordered w-full max-w-xs"
|
||||
/><br />
|
||||
<button class="py-2 px-4 btn btn-primary">Signup</button>
|
||||
{#if $page.form?.message}
|
||||
<div class="text-center text-error mt-4">{$page.form?.message}</div>
|
||||
{/if}
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{#if errors.message}
|
||||
<div class="text-center text-error mt-4">
|
||||
{errors.message}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="flex justify-center mt-12 mr-25 ml-25">
|
||||
<blockquote class="w-80 text-center text-lg break-words">
|
||||
{#if quote != ''}
|
||||
{quote}
|
||||
{/if}
|
||||
<!-- <footer class="text-sm">- Steve Jobs</footer> -->
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<svelte:head>
|
||||
<title>Login | AdventureLog</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Login to your AdventureLog account to start logging your adventures!"
|
||||
/>
|
||||
</svelte:head>
|
||||
Reference in New Issue
Block a user