From 075257c846260a489552849a2845fdb160b8c1f8 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Mon, 21 Oct 2024 19:42:46 -0400
Subject: [PATCH] Refactor login and signup pages to improve code readability
 and remove unused imports

---
 frontend/src/routes/login/+page.svelte     |   8 +-
 frontend/src/routes/signup/+page.server.ts |  36 ++--
 frontend/src/routes/signup/+page.svelte    | 237 +++++++++++++--------
 3 files changed, 174 insertions(+), 107 deletions(-)

diff --git a/frontend/src/routes/login/+page.svelte b/frontend/src/routes/login/+page.svelte
index 2e8b1c8..336359d 100644
--- a/frontend/src/routes/login/+page.svelte
+++ b/frontend/src/routes/login/+page.svelte
@@ -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>
diff --git a/frontend/src/routes/signup/+page.server.ts b/frontend/src/routes/signup/+page.server.ts
index 72c3ac6..1d3e6d0 100644
--- a/frontend/src/routes/signup/+page.server.ts
+++ b/frontend/src/routes/signup/+page.server.ts
@@ -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' });
diff --git a/frontend/src/routes/signup/+page.svelte b/frontend/src/routes/signup/+page.svelte
index 9a7fe42..f726ecb 100644
--- a/frontend/src/routes/signup/+page.svelte
+++ b/frontend/src/routes/signup/+page.svelte
@@ -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> -->