Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-08-02 19:55:18 +02:00
Code Issues Releases Activity

Refactor login and signup pages to improve code readability and remove unused imports

Browse source
This commit is contained in:
Sean Morley 2024-10-21 19:42:46 -04:00
parent 1e67de6e14
commit 075257c846
3 changed files with 174 additions and 107 deletions
Download patch file Download diff file Expand all files Collapse all files

8
frontend/src/routes/login/+page.svelte
View file

@ -1,7 +1,5 @@
<script lang="ts">
import { enhance } from '$app/forms';
import { getRandomBackground, getRandomQuote } from '$lib';
import { onMount } from 'svelte';
export let data;
console.log(data);
@ -43,19 +41,19 @@
<input
name="username"
id="username"
class="block mb-2 input input-bordered w-full max-w-xs"
class="block input input-bordered w-full max-w-xs"
/><br />
<label for="password">Password</label>
<input
type="password"
name="password"
id="password"
class="block mb-2 input input-bordered w-full max-w-xs"
class="block input input-bordered w-full max-w-xs"
/><br />
<button class="py-2 px-4 btn btn-primary mr-2">Login</button>
<div class="flex justify-between mt-4">
<p><a href="/signup" class="underline">Sign Up</a></p>
<p><a href="/signup" class="underline">Signup</a></p>
<p><a href="/settings/forgot-password" class="underline">Forgot Password</a></p>
</div>
</form>

36
frontend/src/routes/signup/+page.server.ts
View file

@ -1,6 +1,7 @@
import { error, fail, redirect } from '@sveltejs/kit';
import type { Actions, PageServerLoad } from './$types';
import { getRandomBackground, getRandomQuote } from '$lib';
const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
const serverEndpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
@ -8,19 +9,20 @@ export const load: PageServerLoad = async (event) => {
if (event.locals.user) {
return redirect(302, '/');
}
let is_disabled = await event.fetch(`${serverEndpoint}/auth/is-registration-disabled/`);
let is_disabled_json = await is_disabled.json();
console.log(is_disabled_json);
if (is_disabled_json.is_disabled) {
return {
is_disabled: true,
message: is_disabled_json.message
};
} else {
return {
is_disabled: false
};
}
let is_disabled_fetch = await event.fetch(`${serverEndpoint}/auth/is-registration-disabled/`);
let is_disabled_json = await is_disabled_fetch.json();
let is_disabled = is_disabled_json.is_disabled;
const quote = getRandomQuote();
const background = getRandomBackground();
return {
props: {
is_disabled: is_disabled,
is_disabled_message: is_disabled_json.message,
quote,
background
}
};
};
export const actions: Actions = {
default: async (event) => {
@ -37,6 +39,14 @@ export const actions: Actions = {
const serverEndpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
const csrfTokenFetch = await event.fetch(`${serverEndpoint}/csrf/`);
// console log each form data
console.log('username: ', username);
console.log('password1: ', password1);
console.log('password2: ', password2);
console.log('email: ', email);
console.log('first_name: ', first_name);
console.log('last_name: ', last_name);
if (!csrfTokenFetch.ok) {
event.locals.user = null;
return fail(500, { message: 'Failed to fetch CSRF token' });

237
frontend/src/routes/signup/+page.svelte
View file

@ -1,116 +1,175 @@
<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 FileImageBox from '~icons/mdi/file-image-box';
let isImageInfoModalOpen: boolean = false;
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';
import ImageInfoModal from '$lib/components/ImageInfoModal.svelte';
import type { Background } from '$lib/types.js';
onMount(async () => {
quote = getRandomQuote();
});
let quote: { quote: string; author: string } = data.props.quote;
let background: Background = data.props.background;
let is_disabled = data.props.is_disabled as boolean;
let is_disabled_message = data.props.is_disabled_message as string;
</script>
{#if isImageInfoModalOpen}
<ImageInfoModal {background} on:close={() => (isImageInfoModalOpen = false)} />
{/if}
<div
class="min-h-screen bg-no-repeat bg-cover flex items-center justify-center"
style="background-image: url('{backgroundImageUrl}')"
style="background-image: url('{background.url}')"
>
{#if !data.is_disabled}
<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="card card-compact m-12 w-full max-w-4xl bg-base-100 shadow-xl p-6 flex flex-col md:flex-row"
>
<div class="flex-1">
{#if !is_disabled}
<h3 class="text-center">AdventureLog</h3>
<article class="text-center text-4xl mb-4 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>
<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 input input-bordered w-full max-w-xs"
/><br />
<label for="email">Email</label>
<input
name="email"
id="email"
type="email"
class="block 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 input input-bordered w-full max-w-xs"
/><br />
<label for="last_name">Last Name</label>
<input
name="last_name"
id="last_name"
type="text"
class="block input input-bordered w-full max-w-xs"
/><br />
<label for="password">Password</label>
<input
type="password"
name="password1"
id="password"
class="block input input-bordered w-full max-w-xs"
/><br />
<label for="password">Confirm Password</label>
<input
type="password"
name="password2"
id="password2"
class="block input input-bordered w-full max-w-xs"
/><br />
{#if errors.message}
<div class="text-center text-error mt-4">
{errors.message}
<button class="py-2 px-4 btn btn-primary mr-2">Signup</button>
<div class="flex justify-between mt-4">
<p><a href="/login" class="underline">Login</a></p>
<p><a href="/settings/forgot-password" class="underline">Forgot Password</a></p>
</div>
</form>
</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>
{:else}
<div class="card card-compact w-96 bg-base-100 shadow-xl p-6 mt-4 mb-4">
<article class="text-center">
<h1 class="text-4xl font-extrabold mb-6">Signup is disabled for this server.</h1>
<p>{data.message}</p>
</article>
{#if errors.message}
<div class="text-center text-error mt-4">
{errors.message}
{#if $page.form?.message}
<div class="text-center text-error mt-4">{$page.form?.message}</div>
{/if}
{:else}
<div class="flex justify-center">
<div class="text-center mb-4">
<h1 class="text-4xl font-extrabold">Registration is Disabled</h1>
<p class="text-lg mt-4">{is_disabled_message}</p>
</div>
</div>
{/if}
</div>
{/if}
<div class="flex-1 flex justify-center items-center mt-12 md:mt-0 md:ml-6">
<blockquote class="w-80 text-center text-2xl font-semibold break-words">
{#if quote != null}
{quote.quote}
{/if}
<footer class="text-sm mt-1">{quote.author}</footer>
</blockquote>
</div>
</div>
</div>
<div class="fixed bottom-4 right-4 z-[999]">
<div class="dropdown dropdown-left dropdown-end">
<button class="btn m-1 btn-circle btn-md" on:click={() => (isImageInfoModalOpen = true)}>
<FileImageBox class="w-4 h-4" />
</button>
</div>
</div>
<svelte:head>
<title>Signup</title>
<meta name="description" content="Signup for AdventureLog to explore the world!" />
</svelte:head>
<!-- <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> -->