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

package/src/lib/components/ui/index.ts

@@ -1,5 +1,6 @@
-export * from './auth-layout';
-export * from './login-form';
-export * from './register-form';
-export * from './reset-password';
-export * from './forgot-password';
+export * as Auth from './auth-layout/index.ts';
+export * as Login from './login-form/index.ts';
+export * as ForgotPassword from './forgot-password/index.ts';
+export * as Register from './register-form/index.ts';
+export * as ResetPassword from './reset-password/index.ts';
+// export * from './forgot-password/index.ts';

package/src/lib/components/ui/login-form/index.ts

@@ -1,3 +1,27 @@
-import LoginForm from './login-form.svelte';
+import Form from './login-form.svelte';
+import Provider from './login-provider.svelte';
+import Header from './login-header.svelte';
+import { loginSchema as schema, type LoginSchema } from './login.schema.ts';
+import Container from './login-container.svelte';
+import ForgotPasswordLink from './login-forgot-password.svelte';
+import Submit from './login-submit.svelte';
+import UserInput from './login-user-input.svelte';
+import PasswordInput from './login-password-input.svelte';
+// import { Field } from '@tanglemedia/svelte-starter-form-shadcn';
 
-export { LoginForm };
+export * from './login-context.ts';
+
+// const PasswordField = Field.PasswordField;
+
+export {
+  Form,
+  Provider,
+  Header,
+  Container,
+  schema,
+  ForgotPasswordLink,
+  Submit,
+  UserInput,
+  PasswordInput,
+  type LoginSchema,
+};

package/src/lib/components/ui/login-form/login-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/login-form/login-context.ts

@@ -0,0 +1,16 @@
+import { useForm } from '@tanglemedia/svelte-starter-form-shadcn';
+export { useForm };
+// import { getContext, setContext } from 'svelte';
+// import type { SuperForm } from 'sveltekit-superforms';
+
+// const ctx = '--auth-superform';
+
+// export function setForm<T extends Record<string, unknown>>(
+//   superform: SuperForm<T>
+// ) {
+//   setContext(ctx, superform);
+// }
+
+// export function useForm<T extends Record<string, unknown>>() {
+//   return getContext<SuperForm<T>>(ctx);
+// }

package/src/lib/components/ui/login-form/login-forgot-password.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { cn } from "$lib/utils.js";
+  import type { Snippet } from "svelte";
+
+  type LoginForgotPasswordProps = {
+    href: string;
+    class?: string;
+    children?: Snippet;
+  };
+  const { href, class: cls, children }: LoginForgotPasswordProps = $props();
+</script>
+
+<a {href} class={cn("ml-auto inline-block text-sm underline", cls)}>
+  {#if children}
+    {@render children?.()}
+  {:else}
+    Forgot your password?
+  {/if}
+</a>

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

@@ -1,134 +1,95 @@
 <script lang="ts">
-  import { Button, Card, Input, Label, Form } from '@tanglemedia/svelte-starter-ui-shadcn';
-  import type { Snippet } from 'svelte';
+  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 LoginContainer from "./login-container.svelte";
+  import LoginForgotPassword from "./login-forgot-password.svelte";
+  import LoginHeader from "./login-header.svelte";
+  import LoginPasswordInput from "./login-password-input.svelte";
+  import LoginProvider from "./login-provider.svelte";
+  import LoginSubmit from "./login-submit.svelte";
+  import LoginUserInput from "./login-user-input.svelte";
+  import { loginSchema, type LoginSchema } from "./login.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<LoginSchema>> | null;
     card?: boolean;
-    cardClass?: string;
+    // cardClass?: string;
     title?: string;
     description?: string;
-    forgotPassword?: boolean;
+    // forgotPassword?: boolean;
     forgotPasswordLink?: string;
     register?: boolean;
     registerLink?: string;
-    formTail?: Snippet;
-    formHead?: Snippet;
+    lead?: Snippet;
+    tail?: Snippet;
     children?: Snippet;
+    form?: SuperValidated<Infer<LoginSchema>>;
+    action?: string;
+
+    debug?: boolean;
   }
 
-  let { 
-    superform, 
-    card = false, 
-    cardClass = "mx-auto max-w-sm", 
-    title = "Login", 
-    description = "Enter your information below to register a new account",
-    forgotPassword = true,
+  let {
+    debug = false,
+    form,
+    superform: superforms = $bindable(null),
+    card = true,
+    title = "Login",
+    description = "Enter your credentails below",
+    // forgotPassword = true,
     forgotPasswordLink = "/forgot-password",
     register = true,
     registerLink = "/register",
-    formTail,
-    formHead,
-    children
+    lead,
+    tail,
+    action = "?/login",
   }: Props = $props();
 
-  const { form: formData, enhance } = superform;
+  // https://github.com/ciscoheat/sveltekit-superforms/issues/630
+  superforms = superforms || superForm(form || defaults(zod4(loginSchema)));
+
+  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>
+<LoginProvider {superforms} {action}>
+  <LoginContainer {card}>
+    <LoginHeader text={title} desc={description} />
     <Card.Content>
-      <form method="POST" use:enhance class="grid gap-4">
-        {@render formHead?.()}
-        {#if children}
-          {@render children?.()}
-        {:else}
-          <Form.Field form={superform} name="email">
-            <Form.Control>
-              {#snippet children({ props })}
-                <Form.Label>Email</Form.Label>
-                <Input {...props} bind:value={$formData.email} type="email" required />
-              {/snippet}
-            </Form.Control>
-            <Form.FieldErrors />
-          </Form.Field>
-          <Form.Field form={superform} name="password">
-            <Form.Control>
-              {#snippet children({ props })}
-              <div class="flex items-center">
-                  <Form.Label>Password</Form.Label>
-                  {#if forgotPassword}
-                    <a href={forgotPasswordLink} class="ml-auto inline-block text-sm underline">
-                      Forgot your password?
-                    </a>
-                  {/if}
-                </div>
-                <Input {...props} bind:value={$formData.password} type="password" required />
-              {/snippet}
-            </Form.Control>
-            <Form.FieldErrors />
-          </Form.Field>
-        {/if}
-        <Form.Button type="submit" class="w-full">Login</Form.Button>
-        {@render formTail?.()}
-      </form>
+      {@render lead?.()}
+      <ServerError class="mb-4" />
+      <LoginUserInput autocomplete="username" name={"username"} />
+      <LoginPasswordInput name={"password"} label={"Password"}>
+        {#snippet asideLabel()}
+          <LoginForgotPassword href={forgotPasswordLink} />
+        {/snippet}
+      </LoginPasswordInput>
+      <LoginSubmit />
       {#if register}
         <div class="mt-4 text-center text-sm">
           Don't have an account?
           <a href={registerLink} class="underline"> Sign up </a>
         </div>
       {/if}
-    </Card.Content>
-  </Card.Root>
-{:else}
-  <div class={cardClass}>
-    <div class="flex flex-col space-y-1.5 p-6 pb-0">
-      <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 p-6">
-      {@render formHead?.()}
-      {#if children}
-        {@render children?.()}
-      {:else}
-        <Form.Field form={superform} name="email">
-          <Form.Control>
-            {#snippet children({ props })}
-              <Form.Label>Email</Form.Label>
-              <Input {...props} bind:value={$formData.email} type="email" required />
-            {/snippet}
-          </Form.Control>
-          <Form.FieldErrors />
-        </Form.Field>
-        <Form.Field form={superform} name="password">
-          <Form.Control>
-            {#snippet children({ props })}
-            <div class="flex items-center">
-                <Form.Label>Password</Form.Label>
-                {#if forgotPassword}
-                  <a href={forgotPasswordLink} class="ml-auto inline-block text-sm underline">
-                    Forgot your password?
-                  </a>
-                {/if}
-              </div>
-              <Input {...props} bind:value={$formData.password} type="password" required />
-            {/snippet}
-          </Form.Control>
-          <Form.FieldErrors />
-        </Form.Field>
+      {@render tail?.()}
+
+      {#if debug}
+        <div class="mb-6">
+          <h4>Errors</h4>
+          <SuperDebug data={errors} />
+        </div>
+        <h4>Message</h4>
+        <SuperDebug data={$message} />
       {/if}
-      <Form.Button type="submit" class="w-full">Login</Form.Button>
-      {@render formTail?.()}
-    </form>
-    {#if register}
-      <div class="mt-4 text-center text-sm">
-        Don't have an account?
-        <a href={registerLink} class="underline"> Sign up </a>
-      </div>
-    {/if}
-  </div>
-{/if}
+    </Card.Content>
+  </LoginContainer>
+</LoginProvider>

package/src/lib/components/ui/login-form/login-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/login-form/login-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/login-form/login-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/login-form/login-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}
+    Login
+  {/if}
+</Form.Submit>

package/src/lib/components/ui/login-form/login-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/login-form/login.schema.ts

@@ -0,0 +1,8 @@
+import { z } from "zod";
+ 
+export const loginSchema = z.object({
+  username: z.string().min(1, { error: "Username is required" }),
+  password: z.string().min(1, { error: "Password is required" }),
+});
+ 
+export type LoginSchema = typeof loginSchema;

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

@@ -1,3 +1,22 @@
-import RegisterForm from './register-form.svelte';
+import Form from './register-form.svelte';
+import Provider from './register-provider.svelte';
+import Header from './register-header.svelte';
+import { registerSchema as schema, type RegisterSchema } from './register.schema.ts';
+import Container from './register-container.svelte';
+import Submit from './register-submit.svelte';
+import UserInput from './register-user-input.svelte';
+import PasswordInput from './register-password-input.svelte';
+import NameInput from './register-name-input.svelte';
 
-export { RegisterForm };
+export {
+  Form,
+  Provider,
+  Header,
+  Container,
+  schema,
+  Submit,
+  UserInput,
+  PasswordInput,
+  NameInput,
+  type RegisterSchema,
+};

package/src/lib/components/ui/register-form/register-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}