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

package/dist/lib/components/ui/login-form/login-forgot-password.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+type LoginForgotPasswordProps = {
+    href: string;
+    class?: string;
+    children?: Snippet;
+};
+declare const LoginForgotPassword: import("svelte").Component<LoginForgotPasswordProps, {}, "">;
+type LoginForgotPassword = ReturnType<typeof LoginForgotPassword>;
+export default LoginForgotPassword;

package/dist/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/dist/lib/components/ui/login-form/login-form.svelte.d.ts

@@ -1,18 +1,21 @@
-import type { Snippet } from 'svelte';
+import type { Snippet } from "svelte";
+import { type Infer, type SuperForm, type SuperValidated } from "sveltekit-superforms";
+import { type LoginSchema } from "./login.schema.js";
 interface Props {
-    superform: any;
+    superform?: SuperForm<Infer<LoginSchema>> | null;
     card?: boolean;
-    cardClass?: string;
     title?: string;
     description?: string;
-    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;
 }
-declare const LoginForm: import("svelte").Component<Props, {}, "">;
+declare const LoginForm: import("svelte").Component<Props, {}, "superform">;
 type LoginForm = ReturnType<typeof LoginForm>;
 export default LoginForm;

package/dist/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/dist/lib/components/ui/login-form/login-header.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type LoginHeaderAttr = {
+    text?: string;
+    desc?: string;
+};
+type LoginHeaderProps = LoginHeaderAttr & {
+    title?: Snippet<[LoginHeaderAttr]>;
+    description?: Snippet<[LoginHeaderAttr]>;
+    children?: Snippet<[LoginHeaderAttr]>;
+};
+declare const LoginHeader: import("svelte").Component<LoginHeaderProps, {}, "">;
+type LoginHeader = ReturnType<typeof LoginHeader>;
+export default LoginHeader;

package/dist/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/dist/lib/components/ui/login-form/login-password-input.svelte.d.ts

@@ -0,0 +1,26 @@
+import { type FormPathLeaves as _FormPathLeaves } from 'sveltekit-superforms';
+import { type PasswordFieldProps } from '@tanglemedia/svelte-starter-form-shadcn';
+declare function $$render<T extends Record<string, unknown>, U extends _FormPathLeaves<T, any>>(): {
+    props: PasswordFieldProps<T, U>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, unknown>, U extends _FormPathLeaves<T, any>> {
+    props(): ReturnType<typeof $$render<T, U>>['props'];
+    events(): ReturnType<typeof $$render<T, U>>['events'];
+    slots(): ReturnType<typeof $$render<T, U>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, unknown>, U extends _FormPathLeaves<T, any>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, U>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, U>['props']>, ReturnType<__sveltets_Render<T, U>['events']>, ReturnType<__sveltets_Render<T, U>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, U>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, U>['exports']>;
+    <T extends Record<string, unknown>, U extends _FormPathLeaves<T, any>>(internal: unknown, props: ReturnType<__sveltets_Render<T, U>['props']> & {}): ReturnType<__sveltets_Render<T, U>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const LoginPasswordInput: $$IsomorphicComponent;
+type LoginPasswordInput<T extends Record<string, unknown>, U extends _FormPathLeaves<T, any>> = InstanceType<typeof LoginPasswordInput<T, U>>;
+export default LoginPasswordInput;

package/dist/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/dist/lib/components/ui/login-form/login-provider.svelte.d.ts

@@ -0,0 +1,25 @@
+import { type FormProviderProps } from "@tanglemedia/svelte-starter-form-shadcn";
+declare function $$render<T extends Record<string, unknown>>(): {
+    props: FormProviderProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const LoginProvider: $$IsomorphicComponent;
+type LoginProvider<T extends Record<string, unknown>> = InstanceType<typeof LoginProvider<T>>;
+export default LoginProvider;

package/dist/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/dist/lib/components/ui/login-form/login-submit.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from "svelte";
+type LoginSubmitProps = {
+    children?: Snippet;
+};
+declare const LoginSubmit: import("svelte").Component<LoginSubmitProps, {}, "">;
+type LoginSubmit = ReturnType<typeof LoginSubmit>;
+export default LoginSubmit;

package/dist/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/dist/lib/components/ui/login-form/login-user-input.svelte.d.ts

@@ -0,0 +1,26 @@
+import { type FormPathLeaves as _FormPathLeaves } from 'sveltekit-superforms';
+import { type InputFieldProps } from '@tanglemedia/svelte-starter-form-shadcn';
+declare function $$render<T extends Record<string, unknown>, U extends _FormPathLeaves<T, any>>(): {
+    props: InputFieldProps<T, U>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, unknown>, U extends _FormPathLeaves<T, any>> {
+    props(): ReturnType<typeof $$render<T, U>>['props'];
+    events(): ReturnType<typeof $$render<T, U>>['events'];
+    slots(): ReturnType<typeof $$render<T, U>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, unknown>, U extends _FormPathLeaves<T, any>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, U>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, U>['props']>, ReturnType<__sveltets_Render<T, U>['events']>, ReturnType<__sveltets_Render<T, U>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, U>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, U>['exports']>;
+    <T extends Record<string, unknown>, U extends _FormPathLeaves<T, any>>(internal: unknown, props: ReturnType<__sveltets_Render<T, U>['props']> & {}): ReturnType<__sveltets_Render<T, U>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const LoginUserInput: $$IsomorphicComponent;
+type LoginUserInput<T extends Record<string, unknown>, U extends _FormPathLeaves<T, any>> = InstanceType<typeof LoginUserInput<T, U>>;
+export default LoginUserInput;

package/dist/lib/components/ui/login-form/login.schema.d.ts

@@ -0,0 +1,6 @@
+import { z } from "zod";
+export declare const loginSchema: z.ZodObject<{
+    username: z.ZodString;
+    password: z.ZodString;
+}, z.core.$strip>;
+export type LoginSchema = typeof loginSchema;

package/dist/lib/components/ui/login-form/login.schema.js

@@ -0,0 +1,5 @@
+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" }),
+});

package/dist/lib/components/ui/register-form/index.d.ts

@@ -1,2 +1,10 @@
-import RegisterForm from './register-form.svelte';
-export { RegisterForm };
+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 { Form, Provider, Header, Container, schema, Submit, UserInput, PasswordInput, NameInput, type RegisterSchema, };

package/dist/lib/components/ui/register-form/index.js

@@ -1,2 +1,10 @@
-import RegisterForm from './register-form.svelte';
-export { RegisterForm };
+import Form from './register-form.svelte';
+import Provider from './register-provider.svelte';
+import Header from './register-header.svelte';
+import { registerSchema as schema } from "./register.schema.js";
+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 { Form, Provider, Header, Container, schema, Submit, UserInput, PasswordInput, NameInput, };

package/dist/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}

package/dist/lib/components/ui/register-form/register-container.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { WithChild } from 'svelte-toolbelt';
+type LoginContainerProps = Omit<WithChild, 'child'> & {
+    class?: string;
+    card?: boolean;
+};
+declare const RegisterContainer: import("svelte").Component<LoginContainerProps, {}, "">;
+type RegisterContainer = ReturnType<typeof RegisterContainer>;
+export default RegisterContainer;