Refactor authentication, upgrade dependencies, and improve security

.env.example

@@ -8,3 +8,4 @@ CLOUDFLARE_DATABASE_ID=
 CLOUDFLARE_PRODUCTION_DATABASE_ID=
 CLOUDFLARE_STAGING_DATABASE_ID=
 CLOUDFLARE_D1_TOKEN=
+NUXT_SESSION_PASSWORD=

.github/workflows/ci.yaml

@@ -8,15 +8,19 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: checkout
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10
+      - name: node
+        uses: actions/setup-node@f4a67bbeca970f103397d3d2b9462cf787cd2980
+        with:
+          node-version: 24
       - name: bun
         uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6
         with:
           bun-version: 1.3.13
       - name: install
         run: bun install
       - name: trunk
-        uses: trunk-io/trunk-action@bf81325059d2534b31df5365182237788c5e0338
+        uses: trunk-io/trunk-action@04ba50e7658c81db7356da96657e6e77f220bfa3
       - name: typecheck
         run: bun run lint:types
       - name: build

.github/workflows/devskim.yaml

@@ -15,7 +15,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: checkout
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10
       - name: analysis
         uses: microsoft/DevSkim-Action@4b5047945a44163b94642a1cecc0d93a3f428cc6
       - name: upload

.gitignore

@@ -40,3 +40,6 @@ logs
 # Gemini
 .gemini/
 
+
+*storybook.log
+storybook-static

.node-version

@@ -1 +1 @@
-24.15.0
+24.16.0

.storybook/main.ts

@@ -0,0 +1,8 @@
+import type { StorybookConfig } from "@storybook-vue/nuxt";
+
+const config: StorybookConfig = {
+  stories: ["../app/components/**/__stories__/*.stories.@(js|jsx|ts|tsx|mdx)"],
+  addons: [],
+  framework: "@storybook-vue/nuxt",
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from "@storybook-vue/nuxt";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

.tool-versions

@@ -1 +1 @@
-nodejs 24.15.0
+nodejs 24.16.0

.trunk/trunk.yaml

@@ -7,31 +7,32 @@ cli:
 plugins:
   sources:
     - id: trunk
-      ref: v1.7.6
+      ref: v1.10.0
       uri: https://github.com/trunk-io/plugins
 # Many linters and tools depend on runtimes - configure them here. (https://docs.trunk.io/runtimes)
 runtimes:
   enabled:
     - go@1.21.0
     - node@22.16.0
-    - python@3.10.8
+    - python@3.14.4
 # This is the section where you manage your linters. (https://docs.trunk.io/check/configuration)
 lint:
   disabled:
     - osv-scanner
   enabled:
+    - grype@0.112.0
     - shellcheck@0.11.0
     - shfmt@3.6.0
     - trunk-toolbox@0.7.0
     - oxipng@10.1.1
     - actionlint@1.7.12
-    - checkov@3.2.525
-    - eslint@10.2.1
+    - checkov@3.3.1
+    - eslint@10.5.0
     - git-diff-check
-    - markdownlint@0.48.0
-    - prettier@3.8.3
+    - markdownlint@0.49.0
+    - prettier@3.8.4
     - taplo@0.10.0
-    - trufflehog@3.95.2
+    - trufflehog@3.95.3
     - yamllint@1.38.0
   ignore:
     - linters:

GETTING-STARTED.md

@@ -301,7 +301,7 @@ affirm/
 │   └── pages/                  #    File-based routing
 │
 ├── server/                     # ⚙️ Nitro server backend
-│   ├── api/                    #    API endpoints (e.g. /api/hello)
+│   ├── api/                    #    API endpoints (e.g. /api/ping)
 │   ├── database/               #    Drizzle schema and migrations
 │   └── utils/                  #    Auto-imported server utilities (e.g. useDB)
 │
@@ -378,7 +378,7 @@ All Vue components should use the **Composition API** with `<script setup lang="
 
 ```vue
 <script setup lang="ts">
-const { data } = await useFetch("/api/hello");
+const { data } = await useFetch("/api/ping");
 </script>
 
 <template>
@@ -411,15 +411,15 @@ Refer to the [DaisyUI documentation](https://daisyui.com/) for available compone
 Use `useFetch` for all data fetching in pages and components. It handles SSR hydration automatically:
 
 ```typescript
-const { data, pending, error } = await useFetch("/api/hello");
+const { data, pending, error } = await useFetch("/api/ping");
 ```
 
 ### Server API Routes
 
 Create API endpoints in `server/api/`. Export a default event handler:
 
 ```typescript
-// server/api/hello.ts
+// server/api/ping.ts
 export default defineEventHandler((event) => {
   return { message: "Hello from the server" };
 });

README.md

@@ -137,7 +137,7 @@ This project follows the **Nuxt 4** directory structure (source in `app/`).
   - **`middleware/`**: Route middleware.
   - **`assets/`**: CSS and static assets (Tailwind entry point).
 - **`server/`**: Nitro server backend.
-  - **`api/`**: API endpoints (e.g., `/api/hello`).
+  - **`api/`**: API endpoints (e.g., `/api/ping`).
   - **`database/`**: Drizzle schema and migrations.
   - **`utils/`**: Auto-imported server utilities (e.g., `useDB`).
 - **`shared/`**: Code shared between client and server.
@@ -162,7 +162,7 @@ This project follows the **Nuxt 4** directory structure (source in `app/`).
 
 - Use **`useFetch`** for data fetching in pages/components. It handles SSR hydration automatically.
   ```ts
-  const { data } = await useFetch("/api/hello");
+  const { data } = await useFetch("/api/ping");
   ```
 
 #### Server API

app/components/AppFooter.vue

@@ -1,5 +1,5 @@
 <template>
-  <footer class="footer footer-center bg-base-200 p-4 text-base-content">
+  <footer class="mt-12 p-4 text-base-content/60 text-sm text-center items-center">
     <aside>
       <p>&copy; {{ new Date().getFullYear() }} TEC. Built with Nuxt 4 + DaisyUI.</p>
     </aside>

app/components/AppHeader.vue

@@ -1,13 +1,18 @@
+<script setup lang="ts"></script>
+
 <template>
-  <header class="navbar bg-base-200">
-    <div class="flex-1">
-      <NuxtLink to="/" class="btn btn-ghost text-xl">Affirm</NuxtLink>
-    </div>
-    <nav class="flex-none">
-      <ul class="menu menu-horizontal px-1">
-        <li><NuxtLink to="/">Home</NuxtLink></li>
-        <li><NuxtLink to="/about">About</NuxtLink></li>
-      </ul>
-    </nav>
-  </header>
+  <nav>
+    <h1 class="mb-8 text-xl font-bold ml-4">Affirm</h1>
+    <ul class="menu menu-lg w-full p-0">
+      <li>
+        <NuxtLink to="/" class="link link-hover" active-class="menu-active">Home</NuxtLink>
+      </li>
+      <li>
+        <NuxtLink to="/about" class="link link-hover" active-class="menu-active">About</NuxtLink>
+      </li>
+      <li>
+        <NuxtLink to="/list" class="link link-hover" active-class="menu-active">List</NuxtLink>
+      </li>
+    </ul>
+  </nav>
 </template>

app/components/places/PlaceLink.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+defineProps<{
+  place: {
+    id: number;
+    name: string;
+    rating: number;
+    description: string;
+  };
+}>();
+</script>
+
+<template>
+  <NuxtLink
+    :to="`/place/${place.id}`"
+    class="block p-4 bg-base-200 border-base-300 rounded-box hover:bg-base-300 transition-colors"
+  >
+    <h2 class="text-lg font-semibold">{{ place.name }}</h2>
+    <p class="text-secondary-content">{{ place.description }}</p>
+    <div class="mt-2">
+      <PlacesRatingDisplay :rating="place.rating" />
+    </div>
+  </NuxtLink>
+</template>

app/components/places/RatingDisplay.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+defineProps<{
+  rating: number;
+}>();
+</script>
+
+<template>
+  <div class="flex items-center">
+    <span v-for="i in 5" :key="i" class="mr-1">
+      <span :class="i <= rating ? 'text-yellow-500' : 'text-base-content/50'">★</span>
+    </span>
+    <span class="ml-2 text-sm text-base-content/80">{{ rating }}</span>
+  </div>
+</template>

app/components/places/ReviewCard.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+defineProps<{
+  review: {
+    id: number;
+    author: string;
+    rating: number;
+    comment: string;
+    date: string;
+  };
+}>();
+</script>
+
+<template>
+  <div class="card card-border">
+    <div class="card-body space-y-1">
+      <div class="flex justify-between items-start">
+        <h3 class="font-semibold">{{ review.author }}</h3>
+        <span class="text-base-content/50">{{ review.date }}</span>
+      </div>
+      <p>{{ review.comment }}</p>
+      <PlacesRatingDisplay :rating="review.rating" />
+    </div>
+  </div>
+</template>

app/components/ui/Button.vue

@@ -0,0 +1,23 @@
+<template>
+  <NuxtLink v-if="isLink" :to="to" :class="buttonClasses" v-bind="$attrs">
+    <slot />
+  </NuxtLink>
+  <button v-else :class="buttonClasses" v-bind="$attrs" :type="buttonType">
+    <slot />
+  </button>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  type: "primary" | "secondary" | "accent";
+  isSubmit?: boolean;
+  to?: string;
+}>();
+
+const buttonType = computed(() => (props.isSubmit ? "submit" : "button"));
+const isLink = computed(() => !!props.to);
+
+const buttonClasses = computed(() => {
+  return ["btn", props.type === "primary" ? "btn-primary" : props.type === "accent" ? "btn-accent" : "btn-secondary"];
+});
+</script>

app/components/ui/Input.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    type?: string;
+    placeholder: string;
+    label: string;
+  }>(),
+  {
+    type: "text",
+  },
+);
+
+const model = defineModel<string>();
+const id = useId();
+</script>
+
+<template>
+  <div>
+    <label :for="id" class="label mb-1">{{ label }}</label>
+    <input id="id" v-model="model" :type="type" :placeholder="placeholder" class="input w-full" />
+  </div>
+</template>

app/components/ui/__stories__/Button.stories.ts

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import Button from "../Button.vue";
+
+const meta: Meta<typeof Button> = {
+  title: "Components/UI/Button",
+  component: Button,
+  argTypes: {
+    type: {
+      control: "radio",
+      options: ["primary", "secondary", "accent"],
+    },
+    to: {
+      control: "text",
+      description: "The URL or route to navigate to when the button is clicked",
+    },
+    isSubmit: {
+      control: "boolean",
+      description: "Whether the button is a submit button for forms",
+    },
+    default: {
+      control: "text",
+    },
+  },
+  args: {
+    default: "Click me",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Primary: Story = {
+  args: {
+    type: "primary",
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    type: "secondary",
+  },
+};
+
+export const Accent: Story = {
+  args: {
+    type: "accent",
+  },
+};
+
+export const WithLink: Story = {
+  args: {
+    to: "/example",
+  },
+};
+
+export const SubmitButton: Story = {
+  args: {
+    isSubmit: true,
+  },
+};

app/composables/useFakePlaceDataDeletMe.ts

@@ -0,0 +1,18 @@
+const PLACES = [
+  {
+    id: 1,
+    name: "Moe's tavern",
+    rating: 4.5,
+    description: "Cozy local bar with a wide selection of beers and a friendly atmosphere.",
+  },
+  {
+    id: 2,
+    name: "Kwik-E-Mart",
+    rating: 3.8,
+    description: "Convenience store with a variety of groceries and household items.",
+  },
+];
+
+export const useFakePlaceDataDeletMe = () => {
+  return PLACES;
+};