npm - create-zerotal - Versions diffs - 1.0.0 → 1.0.2 - Mend

create-zerotal 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (126) hide show

package/CHANGELOG.md +30 -0
package/package.json +1 -1
package/src/prompts.ts +6 -6
package/src/scaffold.ts +9 -3
package/templates/admin/README.md +41 -0
package/templates/admin/_env.example +17 -0
package/templates/admin/app/admin/index.ts +6 -0
package/templates/admin/app/auth/passwords.ts +79 -0
package/templates/admin/config/database.ts +4 -3
package/templates/admin/database/migrations/0001_create_password_reset_tokens_table.ts +26 -0
package/templates/admin/package.json +9 -1
package/templates/admin/tsconfig.json +7 -2
package/templates/api/README.md +39 -0
package/templates/api/_env.example +13 -0
package/templates/api/app/controllers/AuthController.ts +11 -8
package/templates/api/app/controllers/WelcomeController.ts +1 -1
package/templates/api/app/middleware/RequireAuth.ts +1 -1
package/templates/api/app/models/User.ts +2 -2
package/templates/api/bootstrap/app.ts +6 -6
package/templates/api/config/app.ts +1 -1
package/templates/api/config/database.ts +12 -3
package/templates/api/config/notifications.ts +1 -1
package/templates/api/config/queue.ts +1 -1
package/templates/api/config/session.ts +2 -2
package/templates/api/database/migrations/0001_create_users_table.ts +8 -8
package/templates/api/package.json +9 -1
package/templates/api/routes/index.ts +23 -8
package/templates/api/tests/auth.test.ts +6 -3
package/templates/api/tests/helpers.ts +6 -6
package/templates/api/tsconfig.json +7 -3
package/templates/flow/README.md +39 -0
package/templates/flow/_env.example +17 -0
package/templates/flow/app/auth/passwords.ts +79 -0
package/templates/flow/app/flow/layouts/app.tsx +10 -1
package/templates/flow/app/flow/pages/forgot-password.tsx +69 -0
package/templates/flow/app/flow/pages/login.tsx +88 -0
package/templates/flow/app/flow/pages/profile.tsx +194 -0
package/templates/flow/app/flow/pages/register.tsx +120 -0
package/templates/flow/app/flow/pages/reset-password.tsx +103 -0
package/templates/flow/app/flow/ui.ts +27 -0
package/templates/flow/app/models/User.ts +17 -0
package/templates/flow/bootstrap/app.ts +8 -0
package/templates/flow/bootstrap/providers.ts +6 -1
package/templates/flow/config/auth.ts +7 -0
package/templates/flow/config/database.ts +18 -0
package/templates/flow/config/session.ts +14 -0
package/templates/flow/database/migrations/0001_create_users_table.ts +18 -0
package/templates/flow/database/migrations/0002_create_password_reset_tokens_table.ts +23 -0
package/templates/flow/package.json +10 -4
package/templates/flow/tests/smoke.test.ts +21 -1
package/templates/flow/tsconfig.json +10 -3
package/templates/minimal/README.md +39 -0
package/templates/minimal/_env.example +9 -0
package/templates/minimal/bootstrap/app.ts +2 -2
package/templates/minimal/package.json +10 -5
package/templates/minimal/tests/smoke.test.ts +1 -1
package/templates/minimal/tsconfig.json +13 -4
package/templates/react/README.md +40 -0
package/templates/react/_env.example +18 -0
package/templates/react/app/auth/passwords.ts +79 -0
package/templates/react/app/models/User.ts +17 -0
package/templates/react/app/routes/forgot-password.ts +24 -0
package/templates/react/app/routes/login.ts +32 -0
package/templates/react/app/routes/logout.ts +12 -0
package/templates/react/app/routes/profile/password.ts +30 -0
package/templates/react/app/routes/profile.ts +39 -0
package/templates/react/app/routes/register.ts +39 -0
package/templates/react/app/routes/reset-password.ts +37 -0
package/templates/react/bootstrap/app.ts +8 -0
package/templates/react/bootstrap/providers.ts +7 -4
package/templates/react/config/auth.ts +7 -0
package/templates/react/config/database.ts +18 -0
package/templates/react/database/migrations/0001_create_users_table.ts +18 -0
package/templates/react/database/migrations/0002_create_password_reset_tokens_table.ts +23 -0
package/templates/react/package.json +8 -2
package/templates/react/resources/js/Layouts/AppLayout.tsx +12 -2
package/templates/react/resources/js/pages/forgot-password.tsx +65 -0
package/templates/react/resources/js/pages/login.tsx +92 -0
package/templates/react/resources/js/pages/profile.tsx +147 -0
package/templates/react/resources/js/pages/register.tsx +101 -0
package/templates/react/resources/js/pages/reset-password.tsx +80 -0
package/templates/react/resources/js/pages.generated.ts +5 -0
package/templates/react/tests/smoke.test.ts +58 -2
package/templates/react/tsconfig.json +10 -3
package/templates/vue/README.md +40 -0
package/templates/vue/_env.example +18 -0
package/templates/vue/app/auth/passwords.ts +79 -0
package/templates/vue/app/exceptions/Handler.ts +55 -0
package/templates/vue/app/models/User.ts +17 -0
package/templates/vue/app/routes/forgot-password.ts +24 -0
package/templates/vue/app/routes/login.ts +32 -0
package/templates/vue/app/routes/logout.ts +12 -0
package/templates/vue/app/routes/profile/password.ts +30 -0
package/templates/vue/app/routes/profile.ts +39 -0
package/templates/vue/app/routes/register.ts +39 -0
package/templates/vue/app/routes/reset-password.ts +37 -0
package/templates/vue/bootstrap/app.ts +15 -3
package/templates/vue/bootstrap/providers.ts +8 -1
package/templates/vue/config/auth.ts +7 -0
package/templates/vue/config/database.ts +18 -0
package/templates/vue/config/session.ts +11 -0
package/templates/vue/database/migrations/0001_create_users_table.ts +18 -0
package/templates/vue/database/migrations/0002_create_password_reset_tokens_table.ts +23 -0
package/templates/vue/package.json +8 -2
package/templates/vue/public/zt.svg +17 -0
package/templates/vue/resources/app.html +27 -1
package/templates/vue/resources/css/app.css +205 -0
package/templates/vue/resources/js/Components/Button.vue +49 -0
package/templates/vue/resources/js/Components/Card.vue +23 -0
package/templates/vue/resources/js/Components/FlashToasts.vue +81 -0
package/templates/vue/resources/js/Components/Icon.vue +40 -0
package/templates/vue/resources/js/Components/TextField.vue +66 -0
package/templates/vue/resources/js/Components/ThemeToggle.vue +46 -0
package/templates/vue/resources/js/Layouts/AppLayout.vue +140 -25
package/templates/vue/resources/js/lib/cn.ts +13 -0
package/templates/vue/resources/js/lib/site.ts +11 -0
package/templates/vue/resources/js/pages/error.vue +47 -0
package/templates/vue/resources/js/pages/forgot-password.vue +47 -0
package/templates/vue/resources/js/pages/login.vue +67 -0
package/templates/vue/resources/js/pages/profile.vue +119 -0
package/templates/vue/resources/js/pages/register.vue +77 -0
package/templates/vue/resources/js/pages/reset-password.vue +58 -0
package/templates/vue/resources/js/pages.generated.ts +10 -4
package/templates/vue/resources/js/types.ts +17 -0
package/templates/vue/tests/smoke.test.ts +50 -1
package/templates/vue/tsconfig.json +10 -3

package/templates/vue/resources/js/Components/Icon.vue ADDED Viewed

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+/**
+ * The handful of icons this starter needs, inlined.
+ *
+ * One component with a `name` rather than one file per glyph: in Vue an SFC is
+ * a file, and fourteen files for fourteen `<path>` elements is more ceremony
+ * than the icons are worth. Same paths and same stroke treatment as the React
+ * template, so both render identically.
+ *
+ * They inherit `currentColor`, so they follow the theme with no extra wiring.
+ */
+const props = withDefaults(defineProps<{ name: IconName; class?: string }>(), {});
+type IconName = "sun" | "moon" | "menu" | "close" | "check" | "arrow-right";
+const PATHS: Record<IconName, string> = {
+  sun: "M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4",
+  moon: "M21 12.8A9 9 0 1 1 11.2 3 7 7 0 0 0 21 12.8z",
+  menu: "M4 7h16M4 12h16M4 17h16",
+  close: "M18 6 6 18M6 6l12 12",
+  check: "m20 6-11 11-5-5",
+  "arrow-right": "M5 12h14M13 6l6 6-6 6",
+};
+</script>
+<template>
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    :class="props.class"
+  >
+    <circle v-if="name === 'sun'" cx="12" cy="12" r="4" />
+    <path :d="PATHS[name]" />
+  </svg>
+</template>

package/templates/vue/resources/js/Components/TextField.vue ADDED Viewed

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+/**
+ * Labelled text input with error and hint slots — the Vue twin of the React
+ * template's TextField, including its accessibility wiring: the label points at
+ * the control, and an error is announced via role="alert" and aria-describedby.
+ */
+import { computed, useId } from "vue";
+import { cn } from "../lib/cn";
+const props = withDefaults(
+  defineProps<{
+    label: string;
+    modelValue: string;
+    error?: string | undefined;
+    hint?: string | undefined;
+    type?: string;
+    autocomplete?: string;
+    required?: boolean;
+    class?: string;
+  }>(),
+  { type: "text", required: false },
+);
+defineEmits<{ "update:modelValue": [value: string] }>();
+const uid = useId();
+const controlId = `${uid}-control`;
+const errorId = `${uid}-error`;
+const hintId = `${uid}-hint`;
+const CONTROL =
+  "w-full rounded-lg border bg-card px-3 py-2 text-sm text-foreground shadow-sm " +
+  "transition-colors placeholder:text-muted-foreground focus:outline-none " +
+  "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring";
+const controlClass = computed(() =>
+  cn(CONTROL, props.error ? "border-destructive" : "border-input", props.class),
+);
+</script>
+<template>
+  <div class="space-y-1.5">
+    <label :for="controlId" class="block text-sm font-medium text-foreground">
+      {{ label }}
+    </label>
+    <input
+      :id="controlId"
+      :type="type"
+      :value="modelValue"
+      :autocomplete="autocomplete"
+      :required="required"
+      :aria-invalid="error ? true : undefined"
+      :aria-describedby="error ? errorId : hint ? hintId : undefined"
+      :class="controlClass"
+      @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+    />
+    <p v-if="error" :id="errorId" role="alert" class="text-sm text-destructive">
+      {{ error }}
+    </p>
+    <p v-else-if="hint" :id="hintId" class="text-sm text-muted-foreground">
+      {{ hint }}
+    </p>
+  </div>
+</template>

package/templates/vue/resources/js/Components/ThemeToggle.vue ADDED Viewed

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+/**
+ * Light/dark switch.
+ *
+ * The class on `<html>` is the single source of truth — every colour is a CSS
+ * custom property that `.dark` redefines, so flipping the class re-themes the
+ * page with no re-render and no `dark:` variants through the components. The
+ * choice is persisted under the same key the no-flash script in
+ * resources/app.html reads on boot, so an app and its admin panel agree.
+ */
+import { ref } from "vue";
+import Icon from "./Icon.vue";
+const STORAGE_KEY = "zerotal-theme";
+function isDark(): boolean {
+  return typeof document !== "undefined" && document.documentElement.classList.contains("dark");
+}
+const dark = ref(isDark());
+function toggle(): void {
+  const next = !isDark();
+  document.documentElement.classList.toggle("dark", next);
+  try {
+    localStorage.setItem(STORAGE_KEY, next ? "dark" : "light");
+  } catch {
+    // Storage can be unavailable (private mode). The class is still applied,
+    // the choice just won't survive a reload.
+  }
+  dark.value = next;
+}
+</script>
+<template>
+  <button
+    type="button"
+    :aria-pressed="dark"
+    :aria-label="dark ? 'Switch to light theme' : 'Switch to dark theme'"
+    :title="dark ? 'Switch to light theme' : 'Switch to dark theme'"
+    class="grid size-9 place-items-center rounded-lg border border-border bg-card text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+    @click="toggle"
+  >
+    <Icon :name="dark ? 'moon' : 'sun'" class="size-4.5" />
+  </button>
+</template>

package/templates/vue/resources/js/Layouts/AppLayout.vue CHANGED Viewed

@@ -1,63 +1,178 @@
 <script setup lang="ts">
-import { computed } from "vue";
-import { Link, usePage } from "@inertiajs/vue3";
 /**
- * Shared application shell — sticky header with active-aware navigation.
+ * Shared application shell — decorative backdrop, sticky header with
+ * active-aware navigation, and a footer.
  *
  * Use it as an Inertia persistent layout so the header survives client-side
  * navigations and only the page body re-renders — in a page's script setup:
  *   defineOptions({ layout: AppLayout });
+ *
+ * Header, content and footer all share the same `max-w-5xl px-6` container, so
+ * the nav and the page body line up at every breakpoint.
  */
+import { computed, ref, watch } from "vue";
+import { Link, usePage } from "@inertiajs/vue3";
+import FlashToasts from "../Components/FlashToasts.vue";
+import ThemeToggle from "../Components/ThemeToggle.vue";
+import Icon from "../Components/Icon.vue";
+import { APP_NAME, DOCS_URL } from "../lib/site";
+import { cn } from "../lib/cn";
+import type { SharedProps } from "../types";
 const NAV = [
   { href: "/", label: "Home" },
   { href: "/about", label: "About" },
   { href: "/contact", label: "Contact" },
 ];
-const navLink =
-  "rounded-lg px-3 py-2 text-sm font-medium text-gray-600 transition hover:bg-gray-100 hover:text-gray-900";
-const activeLink = "bg-indigo-50 text-indigo-700";
+// Shown to signed-in visitors and guests respectively, so the header always
+// offers the next useful step rather than a link that would bounce them.
+const AUTHED_NAV = [{ href: "/profile", label: "Profile" }];
+const GUEST_NAV = [
+  { href: "/login", label: "Sign in" },
+  { href: "/register", label: "Register" },
+];
+const CONTAINER = "mx-auto w-full max-w-5xl px-6";
-const page = usePage();
+const page = usePage<SharedProps>();
 const url = computed(() => page.url);
+const signedIn = computed(() => Boolean(page.props.auth?.user));
+const navItems = computed(() => [...NAV, ...(signedIn.value ? AUTHED_NAV : GUEST_NAV)]);
+const menuOpen = ref(false);
+// Close the mobile menu once a visit lands, otherwise it stays open on top of
+// the page the user just navigated to.
+watch(url, () => (menuOpen.value = false));
 const isActive = (href: string): boolean =>
   href === "/" ? url.value === "/" : url.value.startsWith(href);
+const navLink = (href: string): string =>
+  cn(
+    "rounded-lg px-3 py-2 text-sm font-medium transition-colors",
+    isActive(href)
+      ? "bg-accent text-accent-foreground"
+      : "text-muted-foreground hover:bg-muted hover:text-foreground",
+  );
 </script>
 <template>
-  <div
-    class="min-h-screen bg-linear-to-b from-white via-white to-indigo-50 text-gray-900 antialiased"
-  >
-    <header
-      class="sticky top-0 z-10 border-b border-gray-200/70 bg-white/80 backdrop-blur"
+  <div class="relative flex min-h-dvh flex-col">
+    <!-- Decorative only: the grid and the glow. Fixed, inert, and behind everything. -->
+    <div aria-hidden="true" class="pointer-events-none fixed inset-0 -z-10 overflow-hidden">
+      <div class="absolute inset-0 bg-grid" />
+      <div class="absolute inset-x-0 top-0 h-136 bg-aurora" />
+    </div>
+    <a
+      href="#main"
+      class="sr-only focus:not-sr-only focus:absolute focus:top-3 focus:left-3 focus:z-50 focus:rounded-lg focus:border focus:border-border focus:bg-card focus:px-4 focus:py-2 focus:text-sm focus:font-medium"
     >
-      <nav class="mx-auto flex max-w-5xl items-center justify-between px-6 py-3">
-        <Link href="/" class="flex items-center gap-2 font-bold tracking-tight">
-          <span
-            class="grid h-7 w-7 place-items-center rounded-lg bg-indigo-600 text-sm text-white"
-          >
-            K
-          </span>
-          <span>Zerotal</span>
+      Skip to content
+    </a>
+    <header class="sticky top-0 z-40 border-b border-border bg-background/75 backdrop-blur-md">
+      <div :class="cn(CONTAINER, 'flex h-16 items-center justify-between gap-4')">
+        <Link
+          href="/"
+          class="flex min-w-0 items-center gap-2.5 font-semibold tracking-tight"
+          :aria-label="`${APP_NAME} home`"
+        >
+          <img src="/zt.svg" alt="" class="size-8 shrink-0 rounded-lg" />
+          <span class="truncate">{{ APP_NAME }}</span>
         </Link>
-        <div class="flex items-center gap-1">
+        <nav aria-label="Main" class="hidden items-center gap-1 sm:flex">
           <Link
-            v-for="item in NAV"
+            v-for="item in navItems"
             :key="item.href"
             :href="item.href"
-            :class="[navLink, isActive(item.href) ? activeLink : '']"
+            :aria-current="isActive(item.href) ? 'page' : undefined"
+            :class="navLink(item.href)"
           >
             {{ item.label }}
           </Link>
+        </nav>
+        <div class="flex items-center gap-2">
+          <a
+            :href="DOCS_URL"
+            target="_blank"
+            rel="noreferrer"
+            class="hidden rounded-lg px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground sm:block"
+          >
+            Docs
+          </a>
+          <ThemeToggle />
+          <button
+            type="button"
+            :aria-expanded="menuOpen"
+            aria-controls="mobile-nav"
+            :aria-label="menuOpen ? 'Close menu' : 'Open menu'"
+            class="grid size-9 place-items-center rounded-lg border border-border bg-card text-muted-foreground transition-colors hover:bg-muted hover:text-foreground sm:hidden"
+            @click="menuOpen = !menuOpen"
+          >
+            <Icon :name="menuOpen ? 'close' : 'menu'" class="size-4.5" />
+          </button>
         </div>
+      </div>
+      <nav
+        v-if="menuOpen"
+        id="mobile-nav"
+        aria-label="Main"
+        :class="cn(CONTAINER, 'flex flex-col gap-1 border-t border-border py-3 sm:hidden')"
+      >
+        <Link
+          v-for="item in navItems"
+          :key="item.href"
+          :href="item.href"
+          :aria-current="isActive(item.href) ? 'page' : undefined"
+          :class="navLink(item.href)"
+        >
+          {{ item.label }}
+        </Link>
+        <a
+          :href="DOCS_URL"
+          target="_blank"
+          rel="noreferrer"
+          class="rounded-lg px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+        >
+          Docs
+        </a>
       </nav>
     </header>
-    <main class="mx-auto max-w-3xl px-6 py-14">
+    <main id="main" :class="cn(CONTAINER, 'flex-1 py-14 sm:py-20')">
       <slot />
     </main>
+    <footer class="border-t border-border">
+      <div
+        :class="
+          cn(
+            CONTAINER,
+            'flex flex-col items-center justify-between gap-3 py-8 text-sm text-muted-foreground sm:flex-row',
+          )
+        "
+      >
+        <p>
+          Built with <span class="font-medium text-foreground">Zerotal</span> — the Bun-native
+          TypeScript framework.
+        </p>
+        <a
+          :href="DOCS_URL"
+          target="_blank"
+          rel="noreferrer"
+          class="font-medium transition-colors hover:text-foreground"
+        >
+          Documentation
+        </a>
+      </div>
+    </footer>
+    <FlashToasts />
   </div>
 </template>

package/templates/vue/resources/js/lib/cn.ts ADDED Viewed

@@ -0,0 +1,13 @@
+/**
+ * Join class names, dropping anything falsy.
+ *
+ * Deliberately tiny — this is the only thing the components here need from a
+ * class utility, and it keeps the starter free of a runtime dependency. Swap in
+ * `clsx` + `tailwind-merge` if you start composing conflicting utilities.
+ *
+ * @example
+ * cn("px-3 py-2", isActive && "bg-accent", className)
+ */
+export function cn(...parts: Array<string | false | null | undefined>): string {
+  return parts.filter(Boolean).join(" ");
+}

package/templates/vue/resources/js/lib/site.ts ADDED Viewed

@@ -0,0 +1,11 @@
+/**
+ * Site-wide constants the UI reads.
+ *
+ * `APP_NAME` is stamped in when the project is scaffolded — the same value as
+ * `name` in config/app.ts and the `<title>` suffix in resources/js/app.tsx.
+ * Change all three together when you rename the app.
+ */
+export const APP_NAME = "{{name}}";
+/** Where the header and footer "Docs" links point. */
+export const DOCS_URL = "https://github.com/zerotaldev/zerotal";

package/templates/vue/resources/js/pages/error.vue ADDED Viewed

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+/**
+ * The page behind every HTTP error the app renders to a browser.
+ *
+ * `app/exceptions/Handler.ts` picks the status and renders this component, so a
+ * missing URL lands inside the app's own shell instead of on a bare framework
+ * page. In development the framework's stack-trace page still wins for 500s —
+ * this is what production shows.
+ */
+import { computed } from "vue";
+import { Head, Link } from "@inertiajs/vue3";
+import AppLayout from "../Layouts/AppLayout.vue";
+import Button from "../Components/Button.vue";
+defineOptions({ layout: AppLayout });
+const props = defineProps<{ status: number }>();
+const COPY: Record<number, { title: string; body: string }> = {
+  403: { title: "Not allowed", body: "You are signed in, but this page is not yours to see." },
+  404: {
+    title: "No page here",
+    body: "The URL does not match any route. Check the address, or head back to the start.",
+  },
+  419: { title: "The page expired", body: "Load the page again and resubmit." },
+  500: { title: "Something broke", body: "That is on us. Try again in a moment." },
+};
+const copy = computed(
+  () => COPY[props.status] ?? { title: "Something went wrong", body: "Try again in a moment." },
+);
+</script>
+<template>
+  <Head :title="`${status} — ${copy.title}`" />
+  <div class="mx-auto max-w-lg text-center">
+    <p class="font-mono text-sm tracking-[0.2em] text-muted-foreground">{{ status }}</p>
+    <h1 class="mt-3 text-3xl font-bold tracking-tight text-balance sm:text-4xl">
+      {{ copy.title }}
+    </h1>
+    <p class="mt-4 text-lg leading-relaxed text-pretty text-muted-foreground">{{ copy.body }}</p>
+    <Link href="/" class="mt-8 inline-block">
+      <Button>Back to start</Button>
+    </Link>
+  </div>
+</template>

package/templates/vue/resources/js/pages/forgot-password.vue ADDED Viewed

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { Head, Link, useForm } from "@inertiajs/vue3";
+import AppLayout from "../Layouts/AppLayout.vue";
+import Button from "../Components/Button.vue";
+import Card from "../Components/Card.vue";
+import TextField from "../Components/TextField.vue";
+defineOptions({ layout: AppLayout });
+defineProps<{ title: string }>();
+const form = useForm({ email: "" });
+</script>
+<template>
+  <Head :title="title" />
+  <div class="mx-auto max-w-md">
+    <header>
+      <h1 class="text-3xl font-bold tracking-tight text-balance">{{ title }}</h1>
+      <p class="mt-2 text-muted-foreground">
+        Give us the address you signed up with and we will send a link.
+      </p>
+    </header>
+    <Card class="mt-8 p-6 sm:p-8">
+      <form class="space-y-5" @submit.prevent="form.post('/forgot-password')">
+        <TextField
+          v-model="form.email"
+          label="Email"
+          type="email"
+          autocomplete="email"
+          hint="In development the link is written to the server log rather than emailed."
+          :error="form.errors.email"
+          required
+        />
+        <Button type="submit" :disabled="form.processing">
+          {{ form.processing ? "Sending…" : "Send reset link" }}
+        </Button>
+      </form>
+    </Card>
+    <p class="mt-6 text-sm text-muted-foreground">
+      <Link href="/login" class="text-accent hover:underline">Back to sign in</Link>
+    </p>
+  </div>
+</template>

package/templates/vue/resources/js/pages/login.vue ADDED Viewed

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { Head, Link, useForm, usePage } from "@inertiajs/vue3";
+import AppLayout from "../Layouts/AppLayout.vue";
+import Button from "../Components/Button.vue";
+import Card from "../Components/Card.vue";
+import TextField from "../Components/TextField.vue";
+import type { SharedProps } from "../types";
+defineOptions({ layout: AppLayout });
+defineProps<{ title: string }>();
+const page = usePage<SharedProps>();
+const old = page.props.old;
+const form = useForm({
+  email: typeof old["email"] === "string" ? old["email"] : "",
+  password: "",
+  remember: false,
+});
+</script>
+<template>
+  <Head :title="title" />
+  <div class="mx-auto max-w-md">
+    <header>
+      <h1 class="text-3xl font-bold tracking-tight text-balance">{{ title }}</h1>
+      <p class="mt-2 text-muted-foreground">Enter your details to continue.</p>
+    </header>
+    <Card class="mt-8 p-6 sm:p-8">
+      <form class="space-y-5" @submit.prevent="form.post('/login')">
+        <TextField
+          v-model="form.email"
+          label="Email"
+          type="email"
+          autocomplete="email"
+          :error="form.errors.email"
+          required
+        />
+        <TextField
+          v-model="form.password"
+          label="Password"
+          type="password"
+          autocomplete="current-password"
+          :error="form.errors.password"
+          required
+        />
+        <label class="flex items-center gap-2 text-sm text-muted-foreground">
+          <input v-model="form.remember" type="checkbox" class="rounded border-input" />
+          Remember me
+        </label>
+        <Button type="submit" :disabled="form.processing">
+          {{ form.processing ? "Signing in…" : "Sign in" }}
+        </Button>
+      </form>
+    </Card>
+    <div class="mt-6 flex items-center justify-between text-sm">
+      <Link href="/forgot-password" class="text-accent hover:underline">Forgot your password?</Link>
+      <Link href="/register" class="text-accent hover:underline">Create an account</Link>
+    </div>
+  </div>
+</template>

package/templates/vue/resources/js/pages/profile.vue ADDED Viewed

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { Head, router, useForm, usePage } from "@inertiajs/vue3";
+import AppLayout from "../Layouts/AppLayout.vue";
+import Button from "../Components/Button.vue";
+import Card from "../Components/Card.vue";
+import TextField from "../Components/TextField.vue";
+import type { SharedProps } from "../types";
+defineOptions({ layout: AppLayout });
+defineProps<{ title: string }>();
+// `auth.user` is shared into every page by @zerotal/inertia, so this route does
+// not have to pass the signed-in user as a prop.
+const auth = usePage<SharedProps>().props.auth;
+const details = useForm({
+  name: auth.user?.name ?? "",
+  email: auth.user?.email ?? "",
+});
+const password = useForm({
+  current_password: "",
+  password: "",
+  password_confirmation: "",
+});
+function changePassword(): void {
+  // Clear the fields whichever way it goes — a failed attempt should not leave
+  // the old password sitting in the DOM.
+  password.post("/profile/password", {
+    preserveScroll: true,
+    onFinish: () => password.reset(),
+  });
+}
+</script>
+<template>
+  <Head :title="title" />
+  <div class="mx-auto max-w-2xl space-y-6">
+    <header>
+      <h1 class="text-3xl font-bold tracking-tight text-balance">{{ title }}</h1>
+      <p class="mt-2 text-muted-foreground">Update your details or change your password.</p>
+    </header>
+    <Card class="p-6 sm:p-8">
+      <h2 class="text-lg font-semibold">Details</h2>
+      <form
+        class="mt-4 space-y-5"
+        @submit.prevent="details.post('/profile', { preserveScroll: true })"
+      >
+        <TextField
+          v-model="details.name"
+          label="Name"
+          autocomplete="name"
+          :error="details.errors.name"
+          required
+        />
+        <TextField
+          v-model="details.email"
+          label="Email"
+          type="email"
+          autocomplete="email"
+          :error="details.errors.email"
+          required
+        />
+        <Button type="submit" :disabled="details.processing">
+          {{ details.processing ? "Saving…" : "Save details" }}
+        </Button>
+      </form>
+    </Card>
+    <Card class="p-6 sm:p-8">
+      <h2 class="text-lg font-semibold">Password</h2>
+      <form class="mt-4 space-y-5" @submit.prevent="changePassword">
+        <TextField
+          v-model="password.current_password"
+          label="Current password"
+          type="password"
+          autocomplete="current-password"
+          :error="password.errors.current_password"
+          required
+        />
+        <TextField
+          v-model="password.password"
+          label="New password"
+          type="password"
+          autocomplete="new-password"
+          hint="At least 8 characters."
+          :error="password.errors.password"
+          required
+        />
+        <TextField
+          v-model="password.password_confirmation"
+          label="Confirm new password"
+          type="password"
+          autocomplete="new-password"
+          :error="password.errors.password_confirmation"
+          required
+        />
+        <Button type="submit" :disabled="password.processing">
+          {{ password.processing ? "Updating…" : "Change password" }}
+        </Button>
+      </form>
+    </Card>
+    <Card class="p-6 sm:p-8">
+      <h2 class="text-lg font-semibold">Session</h2>
+      <p class="mt-1 text-sm text-muted-foreground">Sign out of this browser.</p>
+      <Button type="button" variant="secondary" class="mt-4" @click="router.post('/logout')">
+        Sign out
+      </Button>
+    </Card>
+  </div>
+</template>