From eebd44faf80706d405d732a45baebbe26bae3c37 Mon Sep 17 00:00:00 2001
From: Drake Marino <drake@marinodev.com>
Date: Thu, 19 Jun 2025 22:12:51 -0500
Subject: [PATCH] fix signin, apply, and other

---
 src/lib/shared.server.ts                      |   2 +-
 src/routes/+layout.svelte                     |  61 ++++----
 src/routes/account/+page.svelte               |  26 ++--
 src/routes/postings/[posting]/+page.svelte    |   2 +-
 .../postings/[posting]/apply/+page.svelte     | 141 ++++++++++--------
 src/routes/signin/+page.svelte                |  86 +++++------
 6 files changed, 173 insertions(+), 145 deletions(-)

diff --git a/src/lib/shared.server.ts b/src/lib/shared.server.ts
index aa4db1b..cc2a4e4 100644
--- a/src/lib/shared.server.ts
+++ b/src/lib/shared.server.ts
@@ -21,5 +21,5 @@ export function setJWT(cookies: Cookies, user: User) {
 
 	const maxAge = 60 * 60 * 24 * 30; // 30 days
 	const JWT = jwt.sign(payload, process.env.JWT_SECRET, { expiresIn: '30d' });
-	cookies.set('jwt', JWT, { maxAge, path: '/', httpOnly: secure, secure: secure });
+	cookies.set('jwt', JWT, { maxAge, path: '/', httpOnly: false, secure: secure });
 }
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index d3de951..a1a5299 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -147,8 +147,9 @@
 				>
 			{/if}
 			<a
-				class="hover-bg-color block h-min p-1 pr-2 align-top"
+				class="hover-bg-color block h-min p-1 px-2 align-top"
 				href={userState.id !== null ? '/account' : '/signin'}
+				onclick={toggleMenu}
 			>
 				<span class="material-symbols-outlined h-min align-top">
 					{userState.id !== null ? 'account_circle' : 'login'}
@@ -170,38 +171,36 @@
 			: 'block'} h-min w-full justify-between p-2 text-center"
 	>
 		<div class="{largeScreen.current ? 'inline-block' : 'block'} text-left align-top">
-			<!--{#if largeScreen.current}-->
-			<div class="inline-block pr-3">
-				<p class="font-semibold">Drake Marino:</p>
-				<a class="hyperlink-color hyperlink-underline" href="mailto:drake@marinodev.com"
-					>drake@marinodev.com</a
-				>
-			</div>
-			<div class="inline-block">
-				<p class="font-semibold">Chetan Malkan:</p>
-				<a class="hyperlink-color hyperlink-underline" href="mailto:chetan@marinodev.com"
-					>chetan@marinodev.com</a
-				>
-			</div>
-			<!--{/if}-->
+			{#if largeScreen.current}
+				<div class="inline-block pr-3">
+					<p class="font-semibold">Drake Marino:</p>
+					<a class="hyperlink-color hyperlink-underline" href="mailto:drake@marinodev.com"
+						>drake@marinodev.com</a
+					>
+				</div>
+				<div class="inline-block">
+					<p class="font-semibold">Chetan Malkan:</p>
+					<a class="hyperlink-color hyperlink-underline" href="mailto:chetan@marinodev.com"
+						>chetan@marinodev.com</a
+					>
+				</div>
+			{/if}
 		</div>
-		{#if largeScreen.current}
-			<div
-				class="{largeScreen.current ? 'inline-block' : 'block text-left'} align-top font-semibold"
-			>
-				<div class="font-semibold">MarinoDev</div>
-				<div class="font-normal">2025</div>
-			</div>
-		{/if}
+		<!--{#if largeScreen.current}-->
+		<div class="{largeScreen.current ? 'inline-block' : 'block'} align-top font-semibold">
+			<div class="font-semibold">MarinoDev</div>
+			<div class="font-normal">2025</div>
+		</div>
+		<!--{/if}-->
 		<div class="{largeScreen.current ? 'inline-block text-right' : 'block text-left'} align-top">
-			<!--{#if largeScreen.current}-->
-			<div class="font-semibold">Source Code:</div>
-			<a
-				class="hyperlink-color hyperlink-underline"
-				href="https://git.marinodev.com/MarinoDev/FBLA25"
-				>https://git.marinodev.com/MarinoDev/FBLA25</a
-			>
-			<!--{/if}-->
+			{#if largeScreen.current}
+				<div class="font-semibold">Source Code:</div>
+				<a
+					class="hyperlink-color hyperlink-underline"
+					href="https://git.marinodev.com/MarinoDev/FBLA25"
+					>https://git.marinodev.com/MarinoDev/FBLA25</a
+				>
+			{/if}
 		</div>
 	</footer>
 </div>
diff --git a/src/routes/account/+page.svelte b/src/routes/account/+page.svelte
index 0027421..2f9ef38 100644
--- a/src/routes/account/+page.svelte
+++ b/src/routes/account/+page.svelte
@@ -144,9 +144,9 @@
 </script>
 
 <div class="base-container">
-	<div class="content flex py-4">
+	<div class="content my-2 flex">
 		{#if largeScreen.current}
-			<div class="elevated separator-borders m-2 inline-block h-min min-w-max rounded align-top">
+			<div class="elevated separator-borders mr-2 inline-block h-min min-w-max rounded align-top">
 				<div class="inline-block p-4">
 					<img
 						alt="User avatar"
@@ -188,7 +188,7 @@
 			</div>
 		{/if}
 		<div class="inline-block w-full">
-			<div class="elevated separator-borders m-2 h-min w-full rounded">
+			<div class="elevated separator-borders h-min w-full rounded">
 				<div class="bottom-border flex place-content-between">
 					<div class="p-3 font-semibold">User Details</div>
 					<div class="flex">
@@ -204,6 +204,12 @@
 					<div class="font-semibold">
 						ID: <span class="font-normal">{data.user.id}</span>
 					</div>
+					<div class="font-semibold">
+						Username: <span class="font-normal">{data.user.username}</span>
+					</div>
+					<div class="font-semibold">
+						Full Name: <span class="font-normal">{data.user.fullName}</span>
+					</div>
 					<div class="font-semibold">
 						Account active: <span class="material-symbols-outlined align-middle"
 							>{data.user.active ? 'check' : 'cancel'}</span
@@ -214,11 +220,11 @@
 							>{data.user.lastSignIn?.toLocaleDateString('en-US', dateFormatOptions)}</span
 						>
 					</div>
-					{#if !data.user.company?.id}
-						<div class="pb-2 font-semibold">
-							Employer company: <span class="font-normal">N/A</span>
-						</div>
-					{/if}
+					<!--{#if !data.user.company?.id}-->
+					<!--	<div class="pb-2 font-semibold">-->
+					<!--		Employer company: <span class="font-normal">N/A</span>-->
+					<!--	</div>-->
+					<!--{/if}-->
 					{#if data.user.company?.id}
 						<div class="font-semibold">
 							Employer company:
@@ -251,7 +257,7 @@
 								><span class="material-symbols-outlined align-middle">upload</span> Upload new version
 							</button>
 						{:else}
-							<div class="">No résumé submitted.</div>
+							<!--							<div class="">No résumé submitted.</div>-->
 							<button class="dull-primary-bg-color mb-1 rounded-md px-2.5 py-1" onclick={openUpload}
 								><span class="material-symbols-outlined align-middle">upload</span> Upload
 							</button>
@@ -263,7 +269,7 @@
 				</div>
 			</div>
 			{#if data.applications}
-				<div class="elevated separator-borders m-2 inline-block h-min w-full rounded">
+				<div class="elevated separator-borders m-2 ml-0 inline-block h-min w-full rounded">
 					<div class="p-3 font-semibold">Pending applications</div>
 					{#each data.applications as application}
 						<button class="top-border accordion flex justify-between p-2">
diff --git a/src/routes/postings/[posting]/+page.svelte b/src/routes/postings/[posting]/+page.svelte
index f479b0f..7bb31cb 100644
--- a/src/routes/postings/[posting]/+page.svelte
+++ b/src/routes/postings/[posting]/+page.svelte
@@ -50,7 +50,7 @@
 					>
 				{/if}
 			</div>
-			<div class="scrollbar-on-elevated details-height overflow-y-scroll">
+			<div class="scrollbar-on-elevated overflow-y-scroll">
 				<h2 class="pt-2 font-semibold">Contact</h2>
 				<p>{data.posting.employer?.fullName} ({data.posting.employer?.username})</p>
 				<a class="hover-hyperlink block" href="mailto:{data.posting.employer?.email}"
diff --git a/src/routes/postings/[posting]/apply/+page.svelte b/src/routes/postings/[posting]/apply/+page.svelte
index b7e78ab..8a17734 100644
--- a/src/routes/postings/[posting]/apply/+page.svelte
+++ b/src/routes/postings/[posting]/apply/+page.svelte
@@ -3,6 +3,7 @@
 	import type { PageProps } from './$types';
 	import { employmentTypeDisplayName } from '$lib/shared.svelte';
 	import type { Posting } from '$lib/types';
+	import { MediaQuery } from 'svelte/reactivity';
 
 	const dateFormatOptions: Intl.DateTimeFormatOptions = {
 		year: 'numeric',
@@ -15,72 +16,89 @@
 			`https://ui-avatars.com/api/?background=random&format=svg&name=${encodeURIComponent(posting.company.name || 'COMPANY')}`;
 	}
 
+	const largeScreen = new MediaQuery('min-width: 1024px');
+
 	let { data, form }: PageProps = $props();
 </script>
 
-<div class="base-container">
-	<div class="content flex">
-		<div class="elevated separator-borders ml-4 mt-4 inline-block h-min w-1/2 rounded p-4">
-			<div class="bottom-border elevated-bg flex justify-between pb-2">
-				<div class="inline-block">
-					<img
-						alt="Company Logo"
-						class="inline-block rounded"
-						height="64"
-						onerror={(e) => logoFallback(e, data.posting)}
-						src="/uploads/logos/{data.posting?.company.id}.jpg"
-						width="64"
-					/>
-					<div class="inline-block pl-2 align-top">
-						<h1>{data.posting.title}</h1>
-						<h2>Company: {data.posting.company.name}</h2>
-					</div>
+{#snippet jobDetails()}
+	<div
+		class="elevated separator-borders my-2 h-min rounded p-4 {largeScreen.current
+			? 'mr-2 inline-block w-1/2'
+			: 'block w-full'}"
+	>
+		<div class="bottom-border elevated-bg flex justify-between pb-2">
+			<div class="inline-block">
+				<img
+					alt="Company Logo"
+					class="inline-block rounded"
+					height="64"
+					onerror={(e) => logoFallback(e, data.posting)}
+					src="/uploads/logos/{data.posting?.company.id}.jpg"
+					width="64"
+				/>
+				<div class="inline-block pl-2 align-top">
+					<h1>{data.posting.title}</h1>
+					<h2>Company: {data.posting.company.name}</h2>
 				</div>
 			</div>
-			<div class="scrollbar-on-elevated details-height overflow-y-scroll">
-				<h2 class="pt-2 font-semibold">Contact</h2>
-				<p>{data.posting.employer?.fullName} ({data.posting.employer?.username})</p>
-				<a class="hover-hyperlink" href="mailto:{data.posting.employer?.email}"
-					>{data.posting.employer?.email}</a
-				>
-				<a class="hover-hyperlink" href="tel:{data.posting.employer?.phone}"
-					>{data.posting.employer?.phone}</a
-				>
-				<h2 class="pt-2 font-semibold">Details</h2>
-				{#if data.posting.employmentType}
-					<p>{employmentTypeDisplayName(data.posting.employmentType)}</p>
-				{/if}
-				{#if data.posting.address}
-					<a
-						href="https://www.google.com/maps/search/?api=1&query={data.posting.address}"
-						class="block w-max"
-						>Address: <span class="hover-hyperlink">{data.posting.address}</span></a
-					>
-				{/if}
-				{#if data.posting.wage}
-					<p>Wage: {data.posting.wage}</p>
-				{/if}
-				{#if data.posting.createdAt}
-					<p>Posted: {data.posting.createdAt.toLocaleDateString('en-US', dateFormatOptions)}</p>
-				{/if}
-				{#if data.posting.link}
-					<a href={data.posting.link} class="block w-max"
-						>More information: <span class="hyperlink-color hyperlink-underline"
-							>{data.posting.link}</span
-						></a
-					>
-				{/if}
-				{#if data.posting.flyerLink}
-					<a href={data.posting.flyerLink} class="block w-max"
-						>Flyer: <span class="hyperlink-color hyperlink-underline">{data.posting.flyerLink}</span
-						></a
-					>
-				{/if}
-				<h2 class="pt-2 font-semibold">Job Description</h2>
-				<p class="whitespace-pre-wrap">{data.posting.description}</p>
-			</div>
 		</div>
-		<div class="elevated separator-borders m-4 inline-block h-min w-1/2 rounded">
+		<div class="scrollbar-on-elevated overflow-y-scroll">
+			<h2 class="pt-2 font-semibold">Contact</h2>
+			<p>{data.posting.employer?.fullName} ({data.posting.employer?.username})</p>
+			<a class="hover-hyperlink" href="mailto:{data.posting.employer?.email}"
+				>{data.posting.employer?.email}</a
+			>
+			<a class="hover-hyperlink" href="tel:{data.posting.employer?.phone}"
+				>{data.posting.employer?.phone}</a
+			>
+			<h2 class="pt-2 font-semibold">Details</h2>
+			{#if data.posting.employmentType}
+				<p>{employmentTypeDisplayName(data.posting.employmentType)}</p>
+			{/if}
+			{#if data.posting.address}
+				<a
+					href="https://www.google.com/maps/search/?api=1&query={data.posting.address}"
+					class="block"
+					>Address: <span class="hover-hyperlink break-words">{data.posting.address}</span></a
+				>
+			{/if}
+			{#if data.posting.wage}
+				<p>Wage: {data.posting.wage}</p>
+			{/if}
+			{#if data.posting.createdAt}
+				<p>Posted: {data.posting.createdAt.toLocaleDateString('en-US', dateFormatOptions)}</p>
+			{/if}
+			{#if data.posting.link}
+				<a href={data.posting.link} class="block"
+					>More information: <span class="hyperlink-color hyperlink-underline break-all"
+						>{data.posting.link}</span
+					></a
+				>
+			{/if}
+			{#if data.posting.flyerLink}
+				<a href={data.posting.flyerLink} class="block"
+					>Flyer: <span class="hyperlink-color hyperlink-underline break-all"
+						>{data.posting.flyerLink}</span
+					></a
+				>
+			{/if}
+			<h2 class="pt-2 font-semibold">Job Description</h2>
+			<p class="whitespace-pre-wrap break-words">{data.posting.description}</p>
+		</div>
+	</div>
+{/snippet}
+
+<div class="base-container">
+	<div class="content {largeScreen.current ? 'flex' : 'block'}">
+		{#if largeScreen.current}
+			{@render jobDetails()}
+		{/if}
+		<div
+			class="elevated separator-borders my-2 h-min rounded {largeScreen.current
+				? 'inline-block w-1/2'
+				: 'block w-full'}"
+		>
 			<div class="bottom-border flex place-content-between">
 				<div class="p-3 font-semibold">Apply</div>
 			</div>
@@ -113,5 +131,8 @@
 				</button>
 			</form>
 		</div>
+		{#if !largeScreen.current}
+			{@render jobDetails()}
+		{/if}
 	</div>
 </div>
diff --git a/src/routes/signin/+page.svelte b/src/routes/signin/+page.svelte
index dc1a550..450b765 100644
--- a/src/routes/signin/+page.svelte
+++ b/src/routes/signin/+page.svelte
@@ -28,53 +28,55 @@
 	let { data, form }: PageProps = $props();
 </script>
 
-<div class="signin-container place-items-center pt-8">
-	<div class="separator-borders elevated content rounded-md p-8">
-		<h1 class="text-weight-semibold mb-4 text-center">Welcome Back!</h1>
-		<form class="arrange-vertically" method="POST" use:enhance>
-			<div class="bg-color my-2 rounded">
-				<input
-					class="input-field w-full"
-					name="username"
-					placeholder="Username"
-					required
-					type="text"
-				/>
-			</div>
-			<div class="relative w-full">
-				<div class="bg-color mt-4 rounded">
+<div class="signin-container">
+	<div class="content my-2">
+		<div class="separator-borders elevated rounded-md px-2 py-8">
+			<h1 class="text-weight-semibold mb-4 text-center">Welcome Back!</h1>
+			<form class="arrange-vertically" method="POST" use:enhance>
+				<div class="bg-color my-2 rounded">
 					<input
-						class="input-field w-full pr-10"
-						name="password"
-						placeholder="Password"
+						class="input-field w-full"
+						name="username"
+						placeholder="Username"
 						required
-						type={passwordVisible ? 'text' : 'password'}
+						type="text"
 					/>
 				</div>
-				<button
-					class="absolute right-2.5 top-6 -translate-y-1/2 transform"
-					onclick={showPassword}
-					type="button"
-				>
-					<span class="material-symbols-outlined"
-						>{passwordVisible ? 'visibility' : 'visibility_off'}</span
+				<div class="relative w-full">
+					<div class="bg-color mt-4 rounded">
+						<input
+							class="input-field w-full pr-10"
+							name="password"
+							placeholder="Password"
+							required
+							type={passwordVisible ? 'text' : 'password'}
+						/>
+					</div>
+					<button
+						class="absolute right-2.5 top-6 -translate-y-1/2 transform"
+						onclick={showPassword}
+						type="button"
 					>
+						<span class="material-symbols-outlined"
+							>{passwordVisible ? 'visibility' : 'visibility_off'}</span
+						>
+					</button>
+				</div>
+
+				{#if form?.errorMessage}
+					<div class="my-2 text-red-500">{form.errorMessage}</div>
+				{/if}
+
+				<button
+					class="primary-bg-color mt-8 w-full rounded px-2 py-2"
+					formaction="?/signin"
+					type="submit"
+					>Sign In
 				</button>
-			</div>
-
-			{#if form?.errorMessage}
-				<div class="my-2 text-red-500">{form.errorMessage}</div>
-			{/if}
-
-			<button
-				class="primary-bg-color mt-8 w-full rounded px-2 py-2"
-				formaction="?/signin"
-				type="submit"
-				>Sign In
-			</button>
-			<a class="low-emphasis-text-button mt-2" href="/register"
-				>Don't have an account? Register here.</a
-			>
-		</form>
+				<a class="low-emphasis-text-button mt-2" href="/register"
+					>Don't have an account? Register here.</a
+				>
+			</form>
+		</div>
 	</div>
 </div>