@tanglemedia/svelte-starter-auth-shadcn 0.0.2 → 0.1.0

package/src/lib/components/ui/register-form/register-form.svelte

@@ -1,197 +1,94 @@
 <script lang="ts">
-  import * as Card from '@tanglemedia/svelte-starter-ui-shadcn/Card';
-	import { Button } from '@tanglemedia/svelte-starter-ui-shadcn/Button';
-	import { Input } from '@tanglemedia/svelte-starter-ui-shadcn/Input';
-	import { Label } from '@tanglemedia/svelte-starter-ui-shadcn/Label';
-  import * as Form from '@tanglemedia/svelte-starter-ui-shadcn/Form';
+  import { Card } from "@tanglemedia/svelte-starter-ui-shadcn";
+  import type { Snippet } from "svelte";
+  import SuperDebug, {
+    defaults,
+    superForm,
+    type Infer,
+    type SuperForm,
+    type SuperValidated,
+  } from "sveltekit-superforms";
+  import { zod4 } from "sveltekit-superforms/adapters";
+
+  import RegisterProvider from "./register-provider.svelte";
+  import RegisterContainer from "./register-container.svelte";
+  import RegisterHeader from "./register-header.svelte";
+  import RegisterSubmit from "./register-submit.svelte";
+  import RegisterUserInput from "./register-user-input.svelte";
+  import RegisterPasswordInput from "./register-password-input.svelte";
+  import RegisterNameInput from "./register-name-input.svelte";
+  import { registerSchema, type RegisterSchema } from "./register.schema.js";
+
+  import { ServerError } from "@tanglemedia/svelte-starter-form-shadcn";
+  // import { Field } from "@tanglemedia/svelte-starter-form-shadcn";
 
   interface Props {
-    superform: any;
+    superform?: SuperForm<Infer<RegisterSchema>> | null;
     card?: boolean;
-    cardClass?: string;
+    // cardClass?: string;
     title?: string;
     description?: string;
+    // forgotPassword?: boolean;
     login?: boolean;
     loginLink?: string;
-    formTail?: Snippet;
-    formHead?: Snippet;
+    lead?: Snippet;
+    tail?: Snippet;
     children?: Snippet;
+    form?: SuperValidated<Infer<RegisterSchema>>;
+    action?: string;
+
+    debug?: boolean;
   }
 
-  let { 
-    superform,
-    card = false, 
-    cardClass = "mx-auto max-w-sm", 
-    title = "Register", 
+  let {
+    debug = false,
+    form,
+    superform: superforms = $bindable(null),
+    card = true,
+    title = "Register",
     description = "Enter your information below to register a new account",
+    // forgotPassword = true,
     login = true,
     loginLink = "/login",
-    formTail,
-    formHead,
-    children
+    lead,
+    tail,
+    action = "?/register",
   }: Props = $props();
 
-  const { form: formData, enhance } = superform;
+  superforms = superforms || superForm(form || defaults(zod4(registerSchema)));
+
+  const { errors, message } = superforms;
 </script>
 
-{#if card}
-  <Card.Root class={cardClass}>
-    <Card.Header>
-      <Card.Title class="text-2xl">{title}</Card.Title>
-      <Card.Description>{description}</Card.Description>
-    </Card.Header>
+<RegisterProvider {superforms} {action}>
+  <RegisterContainer {card}>
+    <RegisterHeader text={title} desc={description} />
     <Card.Content>
-      <form method="POST" use:enhance class="grid gap-4">
-        {@render formHead?.()}
-        {#if children}
-          {@render children?.()}
-        {:else}
-          <div class="grid grid-cols-2 gap-4">
-            <Form.Field form={superform} name="first_name">
-              <Form.Control >
-                {#snippet children({ props })}
-                  <Form.Label>
-                    First Name
-                  </Form.Label>
-                  <Input {...props} bind:value={$formData.first_name}  />
-                {/snippet}
-              </Form.Control>
-              <Form.FieldErrors />
-            </Form.Field>
-            <Form.Field form={superform} name="last_name">
-              <Form.Control >
-                {#snippet children({ props })}
-                  <Form.Label>
-                    Last Name
-                  </Form.Label>
-                  <Input {...props} bind:value={$formData.last_name}  />
-                {/snippet}
-              </Form.Control>
-              <Form.FieldErrors />
-            </Form.Field>
-          </div>
-          <Form.Field form={superform} name="email">
-            <Form.Control >
-              {#snippet children({ props })}
-                <Form.Label>
-                  Email
-                </Form.Label>
-                <Input {...props} bind:value={$formData.email} type="email"  />
-              {/snippet}
-            </Form.Control>
-            <Form.FieldErrors />
-          </Form.Field>
-          <Form.Field form={superform} name="password">
-            <Form.Control >
-              {#snippet children({ props })}
-                <Form.Label>
-                  Password
-                </Form.Label>
-                <Input {...props} bind:value={$formData.password} type="password"  />
-              {/snippet}
-            </Form.Control>
-            <Form.FieldErrors />
-          </Form.Field>
-          <Form.Field form={superform} name="confirm_password">
-            <Form.Control >
-              {#snippet children({ props })}
-                <Form.Label>
-                  Confirm Password
-                </Form.Label>
-                <Input {...props} bind:value={$formData.confirm_password} type="password"  />
-              {/snippet}
-            </Form.Control>
-            <Form.FieldErrors />
-          </Form.Field>
-        {/if}
-        <Form.Button type="submit" class="w-full">Register</Form.Button>
-        {@render formTail?.()}
-      </form>
+      {@render lead?.()}
+      <ServerError class="mb-4" />
+      <div class="flex items-start gap-4 *:mb-0">
+        <RegisterNameInput name={"first_name"} label={"First Name"} />
+        <RegisterNameInput name={"last_name"} label={"Last Name"} />
+      </div>
+      <RegisterUserInput name={"username"} />
+      <RegisterPasswordInput name={"password"} label={"Password"} />
+      <RegisterSubmit />
       {#if login}
         <div class="mt-4 text-center text-sm">
           Already have an account?
           <a href={loginLink} class="underline"> Sign in </a>
         </div>
       {/if}
-    </Card.Content>
-  </Card.Root>
-{:else}
-  <div class={cardClass}>
-    <div class="flex flex-col space-y-1.5">
-      <h3 class="font-semibold tracking-tight text-2xl">{title}</h3>
-      <p class="text-muted-foreground text-sm">{description}</p>
-    </div>
-    <form method="POST" use:enhance class="grid gap-4">
-      {@render formHead?.()}
-      {#if children}
-        {@render children?.()}
-      {:else}
-        <div class="grid grid-cols-2 gap-4">
-          <Form.Field form={superform} name="first_name">
-            <Form.Control >
-              {#snippet children({ props })}
-                <Form.Label>
-                  First Name
-                </Form.Label>
-                <Input {...props} bind:value={$formData.first_name}  />
-              {/snippet}
-            </Form.Control>
-            <Form.FieldErrors />
-          </Form.Field>
-          <Form.Field form={superform} name="last_name">
-            <Form.Control >
-              {#snippet children({ props })}
-                <Form.Label>
-                  Last Name
-                </Form.Label>
-                <Input {...props} bind:value={$formData.last_name}  />
-              {/snippet}
-            </Form.Control>
-            <Form.FieldErrors />
-          </Form.Field>
+      {@render tail?.()}
+
+      {#if debug}
+        <div class="mb-6">
+          <h4>Errors</h4>
+          <SuperDebug data={errors} />
         </div>
-        <Form.Field form={superform} name="email">
-          <Form.Control >
-            {#snippet children({ props })}
-              <Form.Label>
-                Email
-              </Form.Label>
-              <Input {...props} bind:value={$formData.email} type="email"  />
-            {/snippet}
-          </Form.Control>
-          <Form.FieldErrors />
-        </Form.Field>
-        <Form.Field form={superform} name="password">
-          <Form.Control >
-            {#snippet children({ props })}
-              <Form.Label>
-                Password
-              </Form.Label>
-              <Input {...props} bind:value={$formData.password} type="password"  />
-            {/snippet}
-          </Form.Control>
-          <Form.FieldErrors />
-        </Form.Field>
-        <Form.Field form={superform} name="confirm_password">
-          <Form.Control >
-            {#snippet children({ props })}
-              <Form.Label>
-                Confirm Password
-              </Form.Label>
-              <Input {...props} bind:value={$formData.confirm_password} type="password"  />
-            {/snippet}
-          </Form.Control>
-          <Form.FieldErrors />
-        </Form.Field>
+        <h4>Message</h4>
+        <SuperDebug data={$message} />
       {/if}
-      <Form.Button type="submit" class="w-full">Register</Form.Button>
-      {@render formTail?.()}
-    </form>
-    {#if login}
-      <div class="mt-4 text-center text-sm">
-        Already have an account?
-        <a href={loginLink} class="underline"> Sign in </a>
-      </div>
-    {/if}
-  </div>
-{/if}
+    </Card.Content>
+  </RegisterContainer>
+</RegisterProvider>

package/src/lib/components/ui/register-form/register-header.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { Card } from '@tanglemedia/svelte-starter-ui-shadcn';
+  import type { Snippet } from 'svelte';
+
+  type LoginHeaderAttr = {
+    text?: string;
+    desc?: string;
+  };
+
+  type LoginHeaderProps = LoginHeaderAttr & {
+    title?: Snippet<[LoginHeaderAttr]>;
+    description?: Snippet<[LoginHeaderAttr]>;
+    children?: Snippet<[LoginHeaderAttr]>;
+  };
+
+  let { title, children, description, ...restProps }: LoginHeaderProps = $props();
+</script>
+
+<Card.Header>
+  <Card.Title class="text-2xl">
+    {#if title}
+      {@render title(restProps)}
+    {:else if children}
+      {@render children?.(restProps)}
+    {:else}
+      {restProps.text}
+    {/if}
+  </Card.Title>
+  {#if description}
+    <Card.Description>{@render description(restProps)}</Card.Description>
+  {:else if restProps.desc}
+    <Card.Description>{restProps.desc}</Card.Description>
+  {/if}
+</Card.Header>

package/src/lib/components/ui/register-form/register-name-input.svelte

@@ -0,0 +1,21 @@
+<script lang="ts" module>
+  import { type FormPathLeaves as _FormPathLeaves } from 'sveltekit-superforms';
+
+  type T = Record<string, unknown>;
+  type U = _FormPathLeaves<T, any>;
+</script>
+
+<script
+  lang="ts"
+  generics="T extends Record<string, unknown>, U extends _FormPathLeaves<T, any>"
+>
+  import {
+    Field,
+    type InputFieldProps,
+  } from '@tanglemedia/svelte-starter-form-shadcn';
+
+  type LoginUserInputProps = InputFieldProps<T, U>;
+  const { name = 'first_name' as U,  label, ...rest }: LoginUserInputProps = $props();
+</script>
+
+<Field.Input type={'text'} {name} label={label || 'Name'} {...rest}></Field.Input>

package/src/lib/components/ui/register-form/register-password-input.svelte

@@ -0,0 +1,21 @@
+<script lang="ts" module>
+  import { type FormPathLeaves as _FormPathLeaves } from 'sveltekit-superforms';
+
+  type T = Record<string, unknown>;
+  type U = _FormPathLeaves<T, any>;
+</script>
+
+<script
+  lang="ts"
+  generics="T extends Record<string, unknown>, U extends _FormPathLeaves<T, any>"
+>
+  import {
+    Field,
+    type PasswordFieldProps,
+  } from '@tanglemedia/svelte-starter-form-shadcn';
+
+  type LoginPasswordInputProps = PasswordFieldProps<T, U>;
+  const { name = 'password' as U, ...rest }: LoginPasswordInputProps = $props();
+</script>
+
+<Field.Password {name} {...rest}></Field.Password>

package/src/lib/components/ui/register-form/register-provider.svelte

@@ -0,0 +1,13 @@
+<script lang="ts" module>
+  type T = Record<string, unknown>;
+</script>
+
+<script lang="ts" generics="T extends Record<string, unknown>">
+  import {
+    Form,
+    type FormProviderProps,
+  } from "@tanglemedia/svelte-starter-form-shadcn";
+  let rest: FormProviderProps<T> = $props();
+</script>
+
+<Form.Provider {...rest} />

package/src/lib/components/ui/register-form/register-submit.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Form } from "@tanglemedia/svelte-starter-form-shadcn";
+  import type { Snippet } from "svelte";
+
+  type LoginSubmitProps = {
+    children?: Snippet;
+  };
+  const { children }: LoginSubmitProps = $props();
+</script>
+
+<Form.Submit class="w-full">
+  {#if children}
+    {@render children?.()}
+  {:else}
+    Register
+  {/if}
+</Form.Submit>

package/src/lib/components/ui/register-form/register-user-input.svelte

@@ -0,0 +1,21 @@
+<script lang="ts" module>
+  import { type FormPathLeaves as _FormPathLeaves } from 'sveltekit-superforms';
+
+  type T = Record<string, unknown>;
+  type U = _FormPathLeaves<T, any>;
+</script>
+
+<script
+  lang="ts"
+  generics="T extends Record<string, unknown>, U extends _FormPathLeaves<T, any>"
+>
+  import {
+    Field,
+    type InputFieldProps,
+  } from '@tanglemedia/svelte-starter-form-shadcn';
+
+  type LoginUserInputProps = InputFieldProps<T, U>;
+  const { name = 'username' as U,  label, ...rest }: LoginUserInputProps = $props();
+</script>
+
+<Field.Input type={'email'} {name} label={label || 'Username'} {...rest}></Field.Input>

package/src/lib/components/ui/register-form/register.schema.ts

@@ -0,0 +1,10 @@
+import { z } from "zod";
+
+export const registerSchema = z.object({
+  first_name: z.string().min(1, { error: "First name is required" }),
+  last_name: z.string().min(1, { error: "Last name is required" }),
+  username: z.string().min(1, { error: "Username is required" }),
+  password: z.string().min(1, { error: "Password is required" }),
+});
+
+export type RegisterSchema = typeof registerSchema;

package/src/lib/components/ui/reset-password/index.ts

@@ -1,3 +1,18 @@
-import ResetPasswordForm from './reset-form.svelte';
+import Form from './reset-password-form.svelte';
+import Provider from './reset-password-provider.svelte';
+import Header from './reset-password-header.svelte';
+import { resetPasswordSchema as schema, type ResetPasswordSchema } from './reset-password.schema.ts';
+import Container from './reset-password-container.svelte';
+import Submit from './reset-password-submit.svelte';
+import PasswordInput from './reset-password-password-input.svelte';
 
-export { ResetPasswordForm };
+export {
+  Form,
+  Provider,
+  Header,
+  Container,
+  schema,
+  Submit,
+  PasswordInput,
+  type ResetPasswordSchema,
+};

package/src/lib/components/ui/reset-password/reset-password-container.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { Card } from '@tanglemedia/svelte-starter-ui-shadcn';
+  import type { WithChild } from 'svelte-toolbelt';
+  import { cn } from '../../../utils.js';
+
+  type LoginContainerProps = Omit<WithChild, 'child'> & {
+    class?: string;
+    card?: boolean;
+  };
+
+  const {
+    children,
+    class: cls,
+    card = true,
+    ...rest
+  }: LoginContainerProps = $props();
+</script>
+
+{#if !card}
+  <div class={cn('mx-auto max-w-sm', cls)} {...rest}>
+    {@render children?.()}
+  </div>
+{:else}
+  <Card.Root class={cn('mx-auto max-w-sm', cls)} {...rest}>
+    {@render children?.()}
+  </Card.Root>
+{/if}

package/src/lib/components/ui/reset-password/reset-password-form.svelte

@@ -0,0 +1,91 @@
+<!-- title = "Reset Password", 
+description = "Enter your new password below to reset your password", -->
+
+<script lang="ts">
+  import { Card } from "@tanglemedia/svelte-starter-ui-shadcn";
+  import type { Snippet } from "svelte";
+  import SuperDebug, {
+    defaults,
+    superForm,
+    type Infer,
+    type SuperForm,
+    type SuperValidated,
+  } from "sveltekit-superforms";
+  import { zod4 } from "sveltekit-superforms/adapters";
+
+  import ResetPasswordProvider from "./reset-password-provider.svelte";
+  import ResetPasswordContainer from "./reset-password-container.svelte";
+  import ResetPasswordHeader from "./reset-password-header.svelte";
+  import ResetPasswordSubmit from "./reset-password-submit.svelte";
+  import ResetPasswordPasswordInput from "./reset-password-password-input.svelte";
+  import { resetPasswordSchema, type ResetPasswordSchema } from "./reset-password.schema.js";
+
+  import { ServerError } from "@tanglemedia/svelte-starter-form-shadcn";
+  // import { Field } from "@tanglemedia/svelte-starter-form-shadcn";
+
+  interface Props {
+    superform?: SuperForm<Infer<ResetPasswordSchema>> | null;
+    card?: boolean;
+    // cardClass?: string;
+    title?: string;
+    description?: string;
+    // forgotPassword?: boolean;
+    login?: boolean;
+    loginLink?: string;
+    lead?: Snippet;
+    tail?: Snippet;
+    children?: Snippet;
+    form?: SuperValidated<Infer<ResetPasswordSchema>>;
+    action?: string;
+
+    debug?: boolean;
+  }
+
+  let {
+    debug = false,
+    form,
+    superform: superforms = $bindable(null),
+    card = true,
+    title = "Reset Password",
+    description = "Enter your new password below to reset your password",
+    // forgotPassword = true,
+    login = true,
+    loginLink = "/login",
+    lead,
+    tail,
+    action = "?/register",
+  }: Props = $props();
+
+  superforms = superforms || superForm(form || defaults(zod4(resetPasswordSchema)));
+
+  const { errors, message } = superforms;
+</script>
+
+<ResetPasswordProvider {superforms} {action}>
+  <ResetPasswordContainer {card}>
+    <ResetPasswordHeader text={title} desc={description} />
+    <Card.Content>
+      {@render lead?.()}
+      <ServerError class="mb-4" />
+      <ResetPasswordPasswordInput name={"password"} label={"New Password"} />
+      <ResetPasswordPasswordInput name={"confirm_password"} label={"Confirm Password"} />
+      <ResetPasswordSubmit />
+      {#if login}
+        <div class="mt-4 text-center text-sm">
+          Remembered your password?
+          <a href={loginLink} class="underline"> Sign in </a>
+        </div>
+      {/if}
+      {@render tail?.()}
+
+      {#if debug}
+        <div class="mb-6">
+          <h4>Errors</h4>
+          <SuperDebug data={errors} />
+        </div>
+        <h4>Message</h4>
+        <SuperDebug data={$message} />
+      {/if}
+    </Card.Content>
+  </ResetPasswordContainer>
+</ResetPasswordProvider>

package/src/lib/components/ui/reset-password/reset-password-header.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { Card } from '@tanglemedia/svelte-starter-ui-shadcn';
+  import type { Snippet } from 'svelte';
+
+  type LoginHeaderAttr = {
+    text?: string;
+    desc?: string;
+  };
+
+  type LoginHeaderProps = LoginHeaderAttr & {
+    title?: Snippet<[LoginHeaderAttr]>;
+    description?: Snippet<[LoginHeaderAttr]>;
+    children?: Snippet<[LoginHeaderAttr]>;
+  };
+
+  let { title, children, description, ...restProps }: LoginHeaderProps = $props();
+</script>
+
+<Card.Header>
+  <Card.Title class="text-2xl">
+    {#if title}
+      {@render title(restProps)}
+    {:else if children}
+      {@render children?.(restProps)}
+    {:else}
+      {restProps.text}
+    {/if}
+  </Card.Title>
+  {#if description}
+    <Card.Description>{@render description(restProps)}</Card.Description>
+  {:else if restProps.desc}
+    <Card.Description>{restProps.desc}</Card.Description>
+  {/if}
+</Card.Header>

package/src/lib/components/ui/reset-password/reset-password-password-input.svelte

@@ -0,0 +1,21 @@
+<script lang="ts" module>
+  import { type FormPathLeaves as _FormPathLeaves } from 'sveltekit-superforms';
+
+  type T = Record<string, unknown>;
+  type U = _FormPathLeaves<T, any>;
+</script>
+
+<script
+  lang="ts"
+  generics="T extends Record<string, unknown>, U extends _FormPathLeaves<T, any>"
+>
+  import {
+    Field,
+    type PasswordFieldProps,
+  } from '@tanglemedia/svelte-starter-form-shadcn';
+
+  type LoginPasswordInputProps = PasswordFieldProps<T, U>;
+  const { name = 'password' as U, ...rest }: LoginPasswordInputProps = $props();
+</script>
+
+<Field.Password {name} {...rest}></Field.Password>

package/src/lib/components/ui/reset-password/reset-password-provider.svelte

@@ -0,0 +1,13 @@
+<script lang="ts" module>
+  type T = Record<string, unknown>;
+</script>
+
+<script lang="ts" generics="T extends Record<string, unknown>">
+  import {
+    Form,
+    type FormProviderProps,
+  } from "@tanglemedia/svelte-starter-form-shadcn";
+  let rest: FormProviderProps<T> = $props();
+</script>
+
+<Form.Provider {...rest} />

package/src/lib/components/ui/reset-password/reset-password-submit.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Form } from "@tanglemedia/svelte-starter-form-shadcn";
+  import type { Snippet } from "svelte";
+
+  type LoginSubmitProps = {
+    children?: Snippet;
+  };
+  const { children }: LoginSubmitProps = $props();
+</script>
+
+<Form.Submit class="w-full">
+  {#if children}
+    {@render children?.()}
+  {:else}
+    Reset
+  {/if}
+</Form.Submit>

package/src/lib/components/ui/reset-password/reset-password.schema.ts

@@ -0,0 +1,12 @@
+import { z } from "zod";
+
+export const resetPasswordSchema = z.object({
+  password: z.string().min(1, { error: "Password is required" }),
+  confirm_password: z
+    .string()
+    .min(1, { error: "Confirm password is required" })
+}).refine((schema) => {
+  return schema.password === schema.confirm_password
+}, "Passwords do not match")
+
+export type ResetPasswordSchema = typeof resetPasswordSchema;

package/src/lib/hooks/index.ts

@@ -0,0 +1 @@
+export * from './is-mobile.svelte';

package/src/lib/index.ts

@@ -0,0 +1,3 @@
+// export * from './utils.ts';
+export * from './hooks/index.ts';
+export * from './components/ui/index.ts';