From 3d5ad975ec8378cfe7aef7c49ae1635a6fda5449 Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@pm.me>
Date: Thu, 25 May 2023 22:10:31 -0700
Subject: [PATCH] Updating auth and zod schemas.

---
 src/lib/components/signin.svelte |  82 ++++++++++++++
 src/lib/components/signup.svelte | 181 +++++++++++++++----------------
 src/lib/zodValidation.ts         |  78 +++++++++++++
 3 files changed, 250 insertions(+), 91 deletions(-)

diff --git a/src/lib/components/signin.svelte b/src/lib/components/signin.svelte
index e69de29..4ac41d8 100644
--- a/src/lib/components/signin.svelte
+++ b/src/lib/components/signin.svelte
@@ -0,0 +1,82 @@
+<script lang="ts">
+	import { ConicGradient } from '@skeletonlabs/skeleton';
+	import type { ConicStop } from '@skeletonlabs/skeleton';
+	import { superForm } from 'sveltekit-superforms/client';
+	//import SuperDebug from 'sveltekit-superforms/client/SuperDebug.svelte';
+	import { userSchema } from '$lib/config/zod-schemas';
+	import { AlertTriangle } from 'lucide-svelte';
+	import { i } from "@inlang/sdk-js";
+	export let data;
+	const signInSchema = userSchema.pick({ email: true, password: true });
+	const { form, errors, enhance, delayed } = superForm(data.form, {
+		taintedMessage: null,
+		validators: signInSchema,
+		delayMs: 0
+	});
+	const conicStops: ConicStop[] = [
+		{ color: 'transparent', start: 0, end: 25 },
+		{ color: 'rgb(var(--color-primary-900))', start: 75, end: 100 }
+	];
+</script>
+
+<form method="POST" action="/auth/sign-in" use:enhance>
+	<!--<SuperDebug data={$form} />-->
+	{#if $errors._errors}
+		<aside class="alert variant-filled-error mt-6">
+			<!-- Icon -->
+			<div><AlertTriangle size="42" /></div>
+			<!-- Message -->
+			<div class="alert-message">
+				<h3 class="h3">{i("signinProblem")}</h3>
+				<p>{$errors._errors}</p>
+			</div>
+		</aside>
+	{/if}
+	<div class="mt-6">
+		<label class="label">
+			<span class="sr-only">{i("email")}</span>
+			<input
+				id="email"
+				name="email"
+				type="email"
+				placeholder="{i("email")}"
+				autocomplete="email"
+				data-invalid={$errors.email}
+				bind:value={$form.email}
+				class="input"
+				class:input-error={$errors.email}
+			/>
+			{#if $errors.email}
+				<small>{$errors.email}</small>
+			{/if}
+		</label>
+	</div>
+
+	<div class="mt-6">
+		<label class="label">
+			<span class="sr-only">{i("password")}</span>
+			<input
+				id="password"
+				name="password"
+				type="password"
+				placeholder="{i("password")}"
+				data-invalid={$errors.password}
+				bind:value={$form.password}
+				class="input"
+				class:input-error={$errors.password}
+			/>
+			{#if $errors.password}
+				<small>{$errors.password}</small>
+			{/if}
+		</label>
+	</div>
+
+	<div class="mt-6">
+		<button type="submit" class="btn variant-filled-primary w-full"
+			>{#if $delayed}<ConicGradient stops={conicStops} spin width="w-6" />{:else}{i("signin")}{/if}</button
+		>
+	</div>
+	<div class="flex flex-row justify-center items-center mt-10">
+		<a href="/auth/password/reset" class="font-semibold">{i("forgotPassword")}</a>
+	</div>
+</form>
diff --git a/src/lib/components/signup.svelte b/src/lib/components/signup.svelte
index 7914324..4b99527 100644
--- a/src/lib/components/signup.svelte
+++ b/src/lib/components/signup.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { superForm } from 'sveltekit-superforms/client';
-	//import SuperDebug from 'sveltekit-superforms/client/SuperDebug.svelte';
 	import { userSchema } from '$lib/config/zod-schemas';
 	export let data;
 
@@ -20,94 +19,94 @@
 	// $: termsValue = $form.terms as Writable<boolean>;
 </script>
 
-	<form method="POST" action="/auth/signup" use:enhance>
-    <h1>Signup user</h1>
-    <label class="label">
-			<span class="sr-only">First Name</span>
-			<input
-				id="firstName"
-				name="firstName"
-				type="text"
-				placeholder="First Name"
-				autocomplete="given-name"
-				data-invalid={$errors.firstName}
-				bind:value={$form.firstName}
-				class="input"
-				class:input-error={$errors.firstName}
-			/>
-			{#if $errors.firstName}
-				<small>{$errors.firstName}</small>
-			{/if}
-		</label>
-    <label class="label">
-			<span class="sr-only">Last Name</span>
-			<input
-				id="lastName"
-				name="lastName"
-				type="text"
-				placeholder="Last Name"
-				autocomplete="family-name"
-				data-invalid={$errors.lastName}
-				bind:value={$form.lastName}
-				class="input"
-				class:input-error={$errors.lastName}
-			/>
-			{#if $errors.lastName}
-				<small>{$errors.lastName}</small>
-			{/if}
-		</label>
-    <label class="label">
-			<span class="sr-only">Email</span>
-			<input
-				id="email"
-				name="email"
-				type="email"
-				placeholder="Email"
-				autocomplete="email"
-				data-invalid={$errors.email}
-				bind:value={$form.email}
-				class="input"
-				class:input-error={$errors.email}
-			/>
-			{#if $errors.email}
-				<small>{$errors.email}</small>
-			{/if}
-		</label>
-    <label class="label">
-			<span class="sr-only">Username</span>
-			<input
-				id="username"
-				name="username"
-				type="username"
-				placeholder="Username"
-				autocomplete="uername"
-				data-invalid={$errors.username}
-				bind:value={$form.username}
-				class="input"
-				class:input-error={$errors.username}
-			/>
-			{#if $errors.username}
-				<small>{$errors.username}</small>
-			{/if}
-		</label>
-    <label class="label">
-			<span class="sr-only">password</span>
-			<input
-				id="password"
-				name="password"
-				type="password"
-				placeholder="password"
-				data-invalid={$errors.password}
-				bind:value={$form.password}
-				class="input"
-				class:input-error={$errors.password}
-			/>
-			{#if $errors.password}
-				<small>{$errors.password}</small>
-			{/if}
-		</label>
-    
-    <button type="submit">Signup</button>
+<form method="POST" action="/auth/signup" use:enhance>
+	<h1>Signup user</h1>
+	<label class="label">
+		<span class="sr-only">First Name</span>
+		<input
+			id="firstName"
+			name="firstName"
+			type="text"
+			placeholder="First Name"
+			autocomplete="given-name"
+			data-invalid={$errors.firstName}
+			bind:value={$form.firstName}
+			class="input"
+			class:input-error={$errors.firstName}
+		/>
+		{#if $errors.firstName}
+			<small>{$errors.firstName}</small>
+		{/if}
+	</label>
+	<label class="label">
+		<span class="sr-only">Last Name</span>
+		<input
+			id="lastName"
+			name="lastName"
+			type="text"
+			placeholder="Last Name"
+			autocomplete="family-name"
+			data-invalid={$errors.lastName}
+			bind:value={$form.lastName}
+			class="input"
+			class:input-error={$errors.lastName}
+		/>
+		{#if $errors.lastName}
+			<small>{$errors.lastName}</small>
+		{/if}
+	</label>
+	<label class="label">
+		<span class="sr-only">Email</span>
+		<input
+			id="email"
+			name="email"
+			type="email"
+			placeholder="Email"
+			autocomplete="email"
+			data-invalid={$errors.email}
+			bind:value={$form.email}
+			class="input"
+			class:input-error={$errors.email}
+		/>
+		{#if $errors.email}
+			<small>{$errors.email}</small>
+		{/if}
+	</label>
+	<label class="label">
+		<span class="sr-only">Username</span>
+		<input
+			id="username"
+			name="username"
+			type="username"
+			placeholder="Username"
+			autocomplete="uername"
+			data-invalid={$errors.username}
+			bind:value={$form.username}
+			class="input"
+			class:input-error={$errors.username}
+		/>
+		{#if $errors.username}
+			<small>{$errors.username}</small>
+		{/if}
+	</label>
+	<label class="label">
+		<span class="sr-only">password</span>
+		<input
+			id="password"
+			name="password"
+			type="password"
+			placeholder="password"
+			data-invalid={$errors.password}
+			bind:value={$form.password}
+			class="input"
+			class:input-error={$errors.password}
+		/>
+		{#if $errors.password}
+			<small>{$errors.password}</small>
+		{/if}
+	</label>
+	
+	<button type="submit">Signup</button>
 
-    <a class="back" href="/"> or Cancel </a>
-  </form>
+	<a class="back" href="/"> or Cancel </a>
+</form>
diff --git a/src/lib/zodValidation.ts b/src/lib/zodValidation.ts
index edb461c..050fcb8 100644
--- a/src/lib/zodValidation.ts
+++ b/src/lib/zodValidation.ts
@@ -136,6 +136,8 @@ export const search_result_schema = z.object({
 	fields: z.string()
 });
 
+export type SearchResultSchema = typeof search_result_schema;
+
 export const game_schema = z.object({
 	id: z.string(),
 	handle: z.string(),
@@ -158,6 +160,82 @@ export const game_schema = z.object({
 	playtime: z.string()
 });
 
+export const category_schema = z.object({
+	id: z.string(),
+	name: z.string()
+});
+
+export const mechanics_schema = z.object({
+	id: z.string(),
+	name: z.string(),
+	description: z.string().optional()
+});
+
+const gameSchema = z.object({
+	id: z.string(),
+	name: z.string(),
+	description: z.string().optional(),
+	year_published: z.number().optional(),
+	min_players: z.number().optional(),
+	max_players: z.number().optional(),
+	min_playtime: z.number().optional(),
+	max_playtime: z.number().optional(),
+	min_age: z.number().optional(),
+	image_url: z.string().optional(),
+	thumb_url: z.string().optional(),
+	url: z.string().optional(),
+	rules_url: z.string().optional(),
+	weight_amount: z.number().optional(),
+	weight_units: z.enum(['Medium', 'Heavy']).optional(),
+	categories: z.array(category_schema).optional(),
+	mechanics: z.array(mechanics_schema).optional(),
+	designers: z
+		.array(
+			z.object({
+				id: z.string(),
+				name: z.string()
+			})
+		)
+		.optional(),
+	publishers: z
+		.array(
+			z.object({
+				id: z.string(),
+				name: z.string()
+			})
+		)
+		.optional(),
+	artists: z
+		.array(
+			z.object({
+				id: z.string(),
+				name: z.string()
+			})
+		)
+		.optional(),
+	names: z.array(z.string()).optional(),
+	expansions: z
+		.array(
+			z.object({
+				id: z.string(),
+				name: z.string(),
+				year_published: z.number().optional()
+			})
+		)
+		.optional(),
+	primary_publisher: z
+		.object({
+			id: z.string(),
+			name: z.string()
+		})
+		.optional()
+});
+
+const searchResultSchema = z.object({
+	games: z.array(gameSchema),
+	count: z.number()
+});
+
 // export const game_raw_schema_json = zodToJsonSchema(game_schema, {
 //   $refStrategy: 'none',
 // });