Updating auth and zod schemas.

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

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>

View file

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

View file

@ -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',
// });