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

package/src/lib/components/types.ts

@@ -0,0 +1,24 @@
+import type { FsSuperForm } from 'formsnap';
+import type { WithChild } from 'svelte-toolbelt';
+import type { SuperForm } from 'sveltekit-superforms';
+
+export type FsSuperFormPrimitive<T extends Record<string, unknown>> =
+  FsSuperForm<T>;
+
+export type LoginProviderProps<T extends Record<string, unknown>> = WithChild<
+  {
+    superforms: SuperForm<T>;
+    action?: string;
+    method?:
+      | 'dialog'
+      | 'get'
+      | 'post'
+      | 'DIALOG'
+      | 'GET'
+      | 'POST'
+      | null
+      | undefined;
+    // children: Snippet;
+  },
+  { props: { superforms: SuperForm<T> } }
+>;

package/src/lib/components/ui/auth-layout/auth-layout-content-top.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { cn } from "@tanglemedia/svelte-starter-ui-shadcn";
+  import type { Snippet } from "svelte";
+
+  type Props = {
+    children?: Snippet<[]>;
+    class?: string;
+  };
+
+  const { children, class: cls }: Props = $props();
+</script>
+
+<div class={cn("flex justify-center gap-2 md:justify-start", cls)}>
+  {@render children?.()}
+</div>

package/src/lib/components/ui/auth-layout/auth-layout-content.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { cn } from "@tanglemedia/svelte-starter-ui-shadcn";
+  import type { Snippet } from "svelte";
+
+  type Props = {
+    children?: Snippet<[]>;
+    class?: string;
+  };
+
+  const { children, class: cls }: Props = $props();
+</script>
+
+<div class={cn("flex flex-col gap-4 p-6 md:p-10", cls)}>
+  {@render children?.()}
+</div>

package/src/lib/components/ui/auth-layout/auth-layout-feature-info.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    logo?: string | null;
+    logoClass?: string | null;
+    name?: string | null;
+    quote?: string | null;
+    quoteAuthor?: string | null;
+    children?: Snippet;
+  }
+
+  let {
+    logo = null,
+    name = "Tangle Media Inc.",
+    quote = "",
+    quoteAuthor = "",
+    logoClass,
+    children,
+  }: Props = $props();
+</script>
+
+<div
+  class="text-white top-6 left-6 right-6 bottom-6 absolute text-lg font-medium text-shadow-lg"
+>
+  {@render renderLogoName()}
+  {@render children?.()}
+  <blockquote class="space-y-2 mt-2 lg:mt-0 mr-4 lg:mr-0 hidden lg:block lg:absolute bottom-6">
+    <p class="text-sm text-shadow-lg">
+      {quote}
+    </p>
+    <footer class="text-xs text-shadow-lg">{quoteAuthor}</footer>
+  </blockquote>
+</div>
+
+{#snippet renderLogoName()}
+  <div class="flex items-center gap-4">
+    {#if logo}
+      <img src={logo} alt="logo" class={logoClass} />
+    {/if}
+    {#if name}
+      {name}
+    {/if}
+  </div>
+{/snippet}

package/src/lib/components/ui/auth-layout/auth-layout-feature.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  interface Props {
+		image?: string | null;
+		children?: Snippet;
+	}
+
+	let {
+		image = "https://images.unsplash.com/photo-1590069261209-f8e9b8642343?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1376&q=80",
+		children,
+	}: Props = $props();
+</script>
+
+<div
+  class="absolute top-0 left-0 right-0 bottom-0 z-[-1]"
+  style="
+  background-image:
+    url({image});
+  background-size: cover;
+  background-position: center"
+>
+  {@render children?.()}
+</div>

package/src/lib/components/ui/auth-layout/auth-layout-logo.svelte

@@ -0,0 +1,99 @@
+<script lang="ts" module>
+  import { type VariantProps, tv } from 'tailwind-variants';
+
+  const authLogoSizeVariants = tv({
+    base: 'flex shrink-0 overflow-hidden rounded-lg',
+    variants: {
+      size: {
+        default: 'size-8',
+        lg: 'size-16',
+        xl: 'size-24',
+        '2xl': 'size-32',
+        '3xl': 'size-40',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  });
+
+  const authLogoTextSizeVariants = tv({
+    base: '',
+    variants: {
+      size: {
+        default: '',
+        lg: 'text-2xl',
+        xl: 'text-5xl',
+        '2xl': 'text-6xl',
+        '3xl': 'text-9xl',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  });
+
+  const authLogoAlignVariants = tv({
+    base: 'flex items-center gap-2 font-medium',
+    variants: {
+      align: {
+        default: 'self-auto',
+        left: 'self-start',
+        right: 'self-end',
+        center: 'self-center',
+      },
+    },
+    defaultVariants: {
+      align: 'default',
+    },
+  });
+
+  export type AuthLogoSize = VariantProps<typeof authLogoSizeVariants>['size'];
+  export type AuthLogoAlign = VariantProps<
+    typeof authLogoAlignVariants
+  >['align'];
+</script>
+
+<script lang="ts">
+  import { cn } from '@tanglemedia/svelte-starter-ui-shadcn';
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    children?: Snippet<[]>;
+    class?: string;
+    src?: string | null;
+    logoClass?: string | null;
+    href?: string;
+    size?: AuthLogoSize;
+    align?: AuthLogoAlign;
+  };
+
+  const {
+    children,
+    class: cls,
+    src,
+    logoClass,
+    href,
+    size,
+    align,
+  }: Props = $props();
+
+  // cn(authLogoVariants({ size }));
+</script>
+
+<svelte:element
+  this={href ? 'a' : 'span'}
+  class={cn(authLogoAlignVariants({ align }), cls)}
+  {href}
+>
+  <div class={cn(authLogoSizeVariants({ size }))}>
+    {#if src}
+      <img {src} alt="logo" class={cn('aspect-square size-full', logoClass)} />
+    {/if}
+  </div>
+  {#if children}
+    <div class={cn(authLogoTextSizeVariants({ size }))}>
+      {@render children?.()}
+    </div>
+  {/if}
+</svelte:element>

package/src/lib/components/ui/auth-layout/auth-layout-main.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { cn } from '@tanglemedia/svelte-starter-ui-shadcn';
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    children?: Snippet<[]>;
+    class?: string;
+  };
+
+  const { children, class: cls }: Props = $props();
+</script>
+
+<div class={cn('flex flex-1 items-center justify-center', cls)}>
+  <div class="w-full max-w-sm lg:max-w-md flex flex-col gap-6">
+    {@render children?.()}
+  </div>
+</div>

package/src/lib/components/ui/auth-layout/auth-layout.svelte

@@ -1,97 +1,31 @@
 <script lang="ts">
-	import { Button } from '@tanglemedia/svelte-starter-ui-shadcn/Button';
-	// import { getConfig } from '@tanglemedia/svelte-starter-core';
+	import type { Snippet } from "svelte";
 
 	interface Props {
-		logo?: string | null;
-		backgroundImage?: string | null;
-		name?: string | null;
-		quote?: string | null;
-		quoteAuthor?: string | null;
-		layoutMode?: string | null;
-		leftSideBackground?: string | null;
-		rightSideBackground?: string | null;
-		opacity?: number | null;
-		logoClass?: string | null;
-		filterClass?: string | null;
-		backgroundImageClass?: string | null;
+		side?: "left" | "right";
+		feature?: Snippet;
+		children: Snippet;
 	}
 
-  let { 
-		logo = null, 
-		backgroundImage = "https://images.unsplash.com/photo-1590069261209-f8e9b8642343?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1376&q=80",
-		name = "Tangle Media Inc.", 
-		quote = "", 
-		quoteAuthor = "", 
-		layoutMode, 
-		leftSideBackground, 
-		rightSideBackground, 
-		opacity, 
-		logoClass = "", 
-		filterClass, 
-		backgroundImageClass = "", 
-		children 
-	}: Props = $props();
+	let { side = "left", feature, children }: Props = $props();
 </script>
 
-<div
-	class="container relative h-[100vh] flex-col items-center justify-center grid lg:max-w-none lg:grid-cols-2 lg:px-0"
->
-	<div class="bg-muted relative hidden h-full flex-col p-10 text-white lg:flex dark:border-r">
-		<div
-			class="absolute inset-0 bg-background {backgroundImageClass}"
-			style="
-				background-image:
-					url({backgroundImage});"
-		></div>
-		<div class="relative z-20 flex items-center text-lg font-medium text-shadow-lg">
-			{#if logo}
-				<img src={logo} alt="logo" class={logoClass} />
-			{:else}
-				{name}
-			{/if}
-		</div>
-		<div class="relative z-20 mt-auto">
-			<blockquote class="space-y-2">
-				<p class="text-lg text-shadow-lg">
-					{quote}
-				</p>
-				<footer class="text-sm text-shadow-lg">{quoteAuthor}</footer>
-			</blockquote>
-		</div>
-    <div class="absolute top-0 bottom-0 left-0 right-0 bg-primary-500/10 filter blur(2px)"></div>
-	</div>
-  <div class="lg:hidden absolute top-0 left-0 right-0 bottom-1/2 z-[-1] {backgroundImageClass}" style="
-	mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
-  background-image:
-    url({backgroundImage});
-  background-size: cover;
-  background-position: center">
-    <div class="text-white top-6 left-6 absolute text-lg font-medium z-20 text-shadow-lg">
-      {#if logo}
-				<img src={logo} alt="logo" class={logoClass} />
-			{:else}
-				{name}
-			{/if}
-      <blockquote class="space-y-2 mt-2 mr-4">
-				<p class="text-sm text-shadow-lg">
-					{quote}
-				</p>
-				<footer class="text-xs text-shadow-lg">{quoteAuthor}</footer>
-			</blockquote>
-    </div>
-    <div class="absolute top-0 bottom-0 left-0 right-0 bg-primary-500/10 filter blur(2px)"></div>
-    <div class="absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-b from-gray-900/10 to-background transition duration-500 ease-in-out"></div>
-  </div>
-	<div class="lg:p-8">
-		<div class="mx-auto flex w-full flex-col justify-center space-y-6">
-			{@render children()}
-		</div>
-	</div>
+<div class="relative min-h-svh grid grid-cols-1 lg:grid-cols-2">
+	{#if side === "left"}
+		{#if feature}
+			{@render renderFeature()}
+		{/if}
+	{/if}
+	{@render children()}
+	{#if side === "right"}
+		{#if feature}
+			{@render renderFeature()}
+		{/if}
+	{/if}
 </div>
 
-<style lang="postcss">
-	.text-shadow-lg {
-		text-shadow: 0 2px 2px rgb(0 0 0 / 0.4);
-	}
-</style>
+{#snippet renderFeature()}
+	<div class="w-full absolute h-[50vh] lg:h-screen lg:relative lg:block">
+		{@render feature?.()}
+	</div>
+{/snippet}

package/src/lib/components/ui/auth-layout/index.ts

@@ -1,3 +1,21 @@
-import AuthLayout from './auth-layout.svelte';
+import Root from "./auth-layout.svelte";
+import Feature from "./auth-layout-feature.svelte";
+import Info from "./auth-layout-feature-info.svelte";
+import Content from './auth-layout-content.svelte';
+import Main from './auth-layout-main.svelte';
+import ContentTop from './auth-layout-content-top.svelte';
+import Logo from './auth-layout-logo.svelte';
 
-export { AuthLayout };
+export {
+  Root,
+  Feature,
+  Info,
+  Content,
+  ContentTop,
+  Main,
+  Logo,
+  //
+  Root as AuthLayout,
+  Feature as AuthLayoutFeature,
+  Info as AuthLayoutFeatureInfo
+};

package/src/lib/components/ui/forgot-password/forgot-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 ForgotPasswordContainerProps = Omit<WithChild, 'child'> & {
+    class?: string;
+    card?: boolean;
+  };
+
+  const {
+    children,
+    class: cls,
+    card = true,
+    ...rest
+  }: ForgotPasswordContainerProps = $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/forgot-password/forgot-password-form.svelte

@@ -1,102 +1,91 @@
 <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 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 ForgotPasswordContainer from "./forgot-password-container.svelte";
+  import ForgotPasswordUserInput from "./forgot-password-user-input.svelte";
+  import ForgotPasswordHeader from "./forgot-password-header.svelte";
+  import ForgotPasswordProvider from "./forgot-password-provider.svelte";
+  import ForgotPasswordSubmit from "./forgot-password-submit.svelte";
+  import ForgotPasswordLogin from "./forgot-password-login.svelte";
+  import { forgotPasswordSchema, type ForgotPasswordSchema } from "./forgot-password.schema.js";
+  import { ServerError } from "@tanglemedia/svelte-starter-form-shadcn";
 
   interface Props {
-    superform: any;
+    superform?: SuperForm<Infer<ForgotPasswordSchema>> | null;
     card?: boolean;
-    cardClass?: string;
+    // cardClass?: string;
     title?: string;
     description?: string;
-    login?: boolean;
+    // forgotPassword?: boolean;
     loginLink?: string;
-    formTail?: Snippet;
-    formHead?: Snippet;
+    register?: boolean;
+    registerLink?: string;
+    lead?: Snippet;
+    tail?: Snippet;
     children?: Snippet;
+    form?: SuperValidated<Infer<ForgotPasswordSchema>>;
+    action?: string;
+
+    debug?: boolean;
   }
 
-  let { 
-    superform, 
-    card = false, 
-    cardClass = "mx-auto max-w-sm", 
-    title = "Forgot Password", 
+  let {
+    debug = false,
+    form,
+    superform: superforms = $bindable(null),
+    card = true,
+    title = "Forgot Password",
     description = "Enter your email below to request a password reset",
-    login = true,
+    // forgotPassword = true,
     loginLink = "/login",
-    formTail,
-    formHead,
-    children
+    register = true,
+    registerLink = "/register",
+    lead,
+    tail,
+    action = "?/forgot-password",
   }: Props = $props();
 
-  const { form: formData, enhance } = superform;
+  superforms = superforms || superForm(form || defaults(zod4(forgotPasswordSchema)));
+
+  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>
+<ForgotPasswordProvider {superforms} {action}>
+  <ForgotPasswordContainer {card}>
+    <ForgotPasswordHeader 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>
-        {/if}
-        <Form.Button type="submit" class="w-full">Request Password</Form.Button>
-        {@render formTail?.()}
-      </form>
-      {#if login}
+      {@render lead?.()}
+      <ServerError class="mb-4" />
+      <ForgotPasswordUserInput name={"email"}>
+        {#snippet asideLabel()}
+          <ForgotPasswordLogin href={loginLink} />
+        {/snippet}
+      </ForgotPasswordUserInput>
+      <ForgotPasswordSubmit />
+      {#if register}
         <div class="mt-4 text-center text-sm">
-          Remember your password?
-          <a href={loginLink} class="underline"> Sign in </a>
+          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>
+      {@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">Request Password</Form.Button>
-      {@render formTail?.()}
-    </form>
-    {#if login}
-      <div class="mt-4 text-center text-sm">
-        Remember your password?
-        <a href={loginLink} class="underline"> Sign in </a>
-      </div>
-    {/if}
-  </div>
-{/if}
+    </Card.Content>
+  </ForgotPasswordContainer>
+</ForgotPasswordProvider>

package/src/lib/components/ui/forgot-password/forgot-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/forgot-password/forgot-password-login.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}
+    Back to login
+  {/if}
+</a>

package/src/lib/components/ui/forgot-password/forgot-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} />