BradNut/boredgame
1
0
Fork 0
mirror of https://github.com/BradNut/boredgame synced 2025-09-08 17:40:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Updating auth and zod schemas.

Browse source
This commit is contained in:
Bradley Shellnut 2023-05-25 22:10:31 -07:00
parent 20d7a4f7eb
commit 3d5ad975ec
3 changed files with 250 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
src/lib/components/signin.svelte
View file

@ -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>

181
src/lib/components/signup.svelte
View file

@ -1,6 +1,5 @@
<script lang="ts"> <script lang="ts">
import { superForm } from 'sveltekit-superforms/client'; import { superForm } from 'sveltekit-superforms/client';
//import SuperDebug from 'sveltekit-superforms/client/SuperDebug.svelte';
import { userSchema } from '$lib/config/zod-schemas'; import { userSchema } from '$lib/config/zod-schemas';
export let data; export let data;
@ -20,94 +19,94 @@
// $: termsValue = $form.terms as Writable<boolean>; // $: termsValue = $form.terms as Writable<boolean>;
</script> </script>
<form method="POST" action="/auth/signup" use:enhance> <form method="POST" action="/auth/signup" use:enhance>
<h1>Signup user</h1> <h1>Signup user</h1>
<label class="label"> <label class="label">
<span class="sr-only">First Name</span> <span class="sr-only">First Name</span>
<input <input
id="firstName" id="firstName"
name="firstName" name="firstName"
type="text" type="text"
placeholder="First Name" placeholder="First Name"
autocomplete="given-name" autocomplete="given-name"
data-invalid={$errors.firstName} data-invalid={$errors.firstName}
bind:value={$form.firstName} bind:value={$form.firstName}
class="input" class="input"
class:input-error={$errors.firstName} class:input-error={$errors.firstName}
/> />
{#if $errors.firstName} {#if $errors.firstName}
<small>{$errors.firstName}</small> <small>{$errors.firstName}</small>
{/if} {/if}
</label> </label>
<label class="label"> <label class="label">
<span class="sr-only">Last Name</span> <span class="sr-only">Last Name</span>
<input <input
id="lastName" id="lastName"
name="lastName" name="lastName"
type="text" type="text"
placeholder="Last Name" placeholder="Last Name"
autocomplete="family-name" autocomplete="family-name"
data-invalid={$errors.lastName} data-invalid={$errors.lastName}
bind:value={$form.lastName} bind:value={$form.lastName}
class="input" class="input"
class:input-error={$errors.lastName} class:input-error={$errors.lastName}
/> />
{#if $errors.lastName} {#if $errors.lastName}
<small>{$errors.lastName}</small> <small>{$errors.lastName}</small>
{/if} {/if}
</label> </label>
<label class="label"> <label class="label">
<span class="sr-only">Email</span> <span class="sr-only">Email</span>
<input <input
id="email" id="email"
name="email" name="email"
type="email" type="email"
placeholder="Email" placeholder="Email"
autocomplete="email" autocomplete="email"
data-invalid={$errors.email} data-invalid={$errors.email}
bind:value={$form.email} bind:value={$form.email}
class="input" class="input"
class:input-error={$errors.email} class:input-error={$errors.email}
/> />
{#if $errors.email} {#if $errors.email}
<small>{$errors.email}</small> <small>{$errors.email}</small>
{/if} {/if}
</label> </label>
<label class="label"> <label class="label">
<span class="sr-only">Username</span> <span class="sr-only">Username</span>
<input <input
id="username" id="username"
name="username" name="username"
type="username" type="username"
placeholder="Username" placeholder="Username"
autocomplete="uername" autocomplete="uername"
data-invalid={$errors.username} data-invalid={$errors.username}
bind:value={$form.username} bind:value={$form.username}
class="input" class="input"
class:input-error={$errors.username} class:input-error={$errors.username}
/> />
{#if $errors.username} {#if $errors.username}
<small>{$errors.username}</small> <small>{$errors.username}</small>
{/if} {/if}
</label> </label>
<label class="label"> <label class="label">
<span class="sr-only">password</span> <span class="sr-only">password</span>
<input <input
id="password" id="password"
name="password" name="password"
type="password" type="password"
placeholder="password" placeholder="password"
data-invalid={$errors.password} data-invalid={$errors.password}
bind:value={$form.password} bind:value={$form.password}
class="input" class="input"
class:input-error={$errors.password} class:input-error={$errors.password}
/> />
{#if $errors.password} {#if $errors.password}
<small>{$errors.password}</small> <small>{$errors.password}</small>
{/if} {/if}
</label> </label>
<button type="submit">Signup</button> <button type="submit">Signup</button>
<a class="back" href="/"> or Cancel </a> <a class="back" href="/"> or Cancel </a>
</form> </form>

78
src/lib/zodValidation.ts
View file

@ -136,6 +136,8 @@ export const search_result_schema = z.object({
fields: z.string() fields: z.string()
}); });
export type SearchResultSchema = typeof search_result_schema;
export const game_schema = z.object({ export const game_schema = z.object({
id: z.string(), id: z.string(),
handle: z.string(), handle: z.string(),
@ -158,6 +160,82 @@ export const game_schema = z.object({
playtime: z.string() 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, { // export const game_raw_schema_json = zodToJsonSchema(game_schema, {
// $refStrategy: 'none', // $refStrategy: 'none',
// }); // });