@stacksjs/defaults 0.70.229 → 0.70.231

package/resources/components/Dashboard/Auth/ForgotPassword.stx

@@ -1,33 +1,22 @@
 @import('../UI/Input', '../UI/Button')
 
-<script server>
-interface ForgotPasswordProps {
-  title?: string
-  subtitle?: string
-  email?: string
-  isLoading?: boolean
-  error?: string
-  success?: boolean
-}
-
-const { title = 'Forgot password?', subtitle = 'Enter your email and we\'ll send you a reset link', email = '', isLoading = false, error = '', success = false } = defineProps<ForgotPasswordProps>()
-
-/**
- * Forgot Password Component
- * A clean form for requesting a password reset link.
- */
-
-// Form state
-// Emit submit event with email
-function handleSubmit(event) {
-  event.preventDefault()
+<script client>
+const emit = defineEmits()
+const title = useReactiveProp<string>('title', 'Forgot password?')
+const subtitle = useReactiveProp<string>('subtitle', 'Enter your email and we\'ll send you a reset link')
+const isLoading = useReactiveProp<boolean>('isLoading', false)
+const error = useReactiveProp<string>('error', '')
+const success = useReactiveProp<boolean>('success', false)
+const email = state('')
 
-  if (!email) {
-    return
-  }
+function handleSubmit(): void {
+  const address = email().trim()
+  if (address)
+    emit('submit', { email: address })
+}
 
-  // Emit the submit event - parent component handles the actual request
-  $emit('submit', { email })
+function retry(): void {
+  emit('retry')
 }
 </script>
 <div class="flex items-center justify-center px-4 py-12 min-h-screen">
@@ -35,65 +24,61 @@ function handleSubmit(event) {
     <!-- Logo/Brand -->
     <div class="mb-8 text-center">
       <div class="inline-flex items-center justify-center mb-4 h-12 w-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl shadow-blue-500/25 shadow-lg">
-        <svg class="h-7 w-7 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
-        </svg>
+        <span class="h-7 w-7 text-white i-hugeicons-cube"></span>
       </div>
       <h1 class="font-semibold text-2xl text-neutral-900 dark:text-white">
-        {{ title }}
+        {{ title() }}
       </h1>
       <p class="mt-2 text-neutral-500 text-sm dark:text-neutral-400">
-        {{ subtitle }}
+        {{ subtitle() }}
       </p>
     </div>
 
     <!-- Form Card -->
     <div class="p-6 bg-white dark:bg-neutral-900 border border-neutral-200/60 rounded-2xl dark:border-neutral-800 shadow-black/5 shadow-xl dark:shadow-black/20">
-      @if(success)
+      <div :if="success()">
         <!-- Success Message -->
         <div class="py-4 text-center">
           <div class="inline-flex items-center justify-center mb-4 h-12 w-12 bg-green-100 dark:bg-green-900/30 rounded-full">
             <div class="h-6 w-6 text-green-600 dark:text-green-400 i-hugeicons-checkmark-circle-02"></div>
           </div>
-          <h3 class="mb-2 font-medium text-lg text-neutral-900 dark:text-white">
+          <h2 class="mb-2 font-medium text-lg text-neutral-900 dark:text-white">
             Check your email
-          </h3>
+          </h2>
           <p class="mb-6 text-neutral-500 text-sm dark:text-neutral-400">
-            We've sent a password reset link to <strong class="text-neutral-700 dark:text-neutral-200">{{ email }}</strong>
+            We've sent a password reset link to <strong class="text-neutral-700 dark:text-neutral-200">{{ email() }}</strong>
           </p>
           <p class="text-neutral-400 text-xs dark:text-neutral-500">
             Didn't receive the email? Check your spam folder or
-            <button
+            <Button
               type="button"
-              class="text-blue-600 dark:text-blue-400 hover:text-blue-500"
-              @click="success = false"
+              variant="ghost"
+              size="xs"
+              @click="retry"
             >
               try again
-            </button>
+            </Button>
           </p>
         </div>
-      @else
+      </div>
+      <div :if="!success()">
         <!-- Error Message -->
-        @if(error)
-          <div class="mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 rounded-lg dark:border-red-800">
+          <div :if="error()" role="alert" class="mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 rounded-lg dark:border-red-800">
             <div class="flex gap-2 items-center">
               <div class="h-4 w-4 text-red-600 dark:text-red-400 i-hugeicons-alert-circle"></div>
-              <p class="text-red-600 text-sm dark:text-red-400">{{ error }}</p>
+              <p class="text-red-600 text-sm dark:text-red-400">{{ error() }}</p>
             </div>
           </div>
-        @endif
-
-        <form @submit="handleSubmit">
+        <form @submit.prevent="handleSubmit">
           <!-- Email Field -->
           <div class="mb-6">
             <Input
               type="email"
               label="Email address"
               placeholder="you@example.com"
-              :value="email"
-              @input="email = $event.target.value"
+              v-model:value="email"
               required
-              :disabled="isLoading"
+              :disabled="isLoading()"
             />
           </div>
 
@@ -103,17 +88,14 @@ function handleSubmit(event) {
             variant="primary"
             size="lg"
             fullWidth
-            :loading="isLoading"
-            :disabled="isLoading || !email"
+            :loading="isLoading()"
+            :disabled="isLoading() || !email().trim()"
           >
-            @if(isLoading)
-              Sending...
-            @else
-              Send reset link
-            @endif
+            <span :if="isLoading()">Sending...</span>
+            <span :if="!isLoading()">Send reset link</span>
           </Button>
         </form>
-      @endif
+      </div>
     </div>
 
     <!-- Back to Login -->

package/resources/components/Dashboard/Auth/ForgotPasswordDashboard.stx

@@ -0,0 +1,42 @@
+<script client>
+const isLoading = state(false)
+const error = state('')
+const success = state(false)
+
+async function handleForgotPassword(data) {
+  isLoading.set(true)
+  error.set('')
+
+  try {
+    await dashboardApi('/password/forgot', {
+      method: 'POST',
+      auth: false,
+      body: data,
+    })
+    success.set(true)
+  }
+  catch (err) {
+    error.set(err instanceof Error ? err.message : 'Failed to send reset link')
+    // eslint-disable-next-line no-console
+    console.error(err)
+  }
+  finally {
+    isLoading.set(false)
+  }
+}
+
+function handleRetry(): void {
+  success.set(false)
+  error.set('')
+}
+</script>
+
+<template>
+  <ForgotPassword
+    @submit="handleForgotPassword"
+    @retry="handleRetry"
+    :isLoading="isLoading()"
+    :error="error()"
+    :success="success()"
+  />
+</template>

package/resources/components/Dashboard/Auth/LegalDocument.stx

@@ -0,0 +1,38 @@
+@import('../UI/Button')
+
+<script server>
+interface LegalDocumentProps {
+  eyebrow: string
+  title: string
+  summary: string
+}
+
+const { eyebrow, title, summary } = defineProps<LegalDocumentProps>()
+</script>
+
+<template>
+  <div class="px-5 py-10 sm:px-8 sm:py-14 min-h-screen">
+    <article class="mx-auto max-w-3xl">
+      <header class="pb-8 border-b border-neutral-200/80 dark:border-neutral-800">
+        <a href="/register" class="inline-flex gap-2 items-center text-neutral-500 text-sm dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors">
+          <span aria-hidden="true" class="h-4 w-4 i-hugeicons-arrow-left-02"></span>
+          Registration
+        </a>
+        <p class="mt-10 font-semibold text-blue-600 text-xs tracking-[0.16em] uppercase dark:text-blue-400">{{ eyebrow }}</p>
+        <h1 class="mt-3 font-semibold text-3xl text-neutral-950 tracking-tight sm:text-4xl dark:text-white">{{ title }}</h1>
+        <p class="mt-4 max-w-2xl leading-7 text-base text-neutral-600 dark:text-neutral-300">{{ summary }}</p>
+      </header>
+
+      <div class="py-8 space-y-8 text-neutral-700 dark:text-neutral-300">
+        <slot />
+      </div>
+
+      <footer class="flex flex-col gap-4 items-start sm:flex-row sm:items-center sm:justify-between pt-6 border-neutral-200/80 border-t dark:border-neutral-800">
+        <p class="text-neutral-500 text-sm dark:text-neutral-400">Questions should be directed to your application administrator.</p>
+        <Button tag="a" href="/register" variant="secondary">
+          Back to registration
+        </Button>
+      </footer>
+    </article>
+  </div>
+</template>

package/resources/components/Dashboard/Auth/Login.stx

@@ -1,212 +1,141 @@
 @import('../UI/Input', '../UI/Button')
 
-<script server>
-interface LoginProps {
-  title?: string
-  subtitle?: string
-  email?: string
-  password?: string
-  rememberMe?: boolean
-  isLoading?: boolean
-  error?: string
-  fieldErrors?: Record<string, any>
-  showRememberMe?: boolean
-  showForgotPassword?: boolean
-  showSignUp?: boolean
+<script client>
+const emit = defineEmits()
+const title = useReactiveProp<string>('title', 'Welcome back')
+const subtitle = useReactiveProp<string>('subtitle', 'Sign in to your account')
+const isLoading = useReactiveProp<boolean>('isLoading', false)
+const error = useReactiveProp<string>('error', '')
+const showRememberMe = useReactiveProp<boolean>('showRememberMe', true)
+const showForgotPassword = useReactiveProp<boolean>('showForgotPassword', true)
+const showSignUp = useReactiveProp<boolean>('showSignUp', true)
+const email = state('')
+const password = state('')
+const rememberMe = state(false)
+const fieldErrors = state<Record<string, string>>({})
+
+function setFieldError(field: string, message: string): void {
+  fieldErrors.set({ ...fieldErrors(), [field]: message })
 }
 
-const { title = 'Welcome back', subtitle = 'Sign in to your account', email = '', password = '', rememberMe = false, isLoading = false, error = '', fieldErrors = {}, showRememberMe = true, showForgotPassword = true, showSignUp = true } = defineProps<LoginProps>()
-
-/**
- * Login Component
- * A clean, modern login form for the Stacks Dashboard.
- */
+function fieldError(field: string): string {
+  return fieldErrors()[field] || ''
+}
 
-// Form state
-// Validate email format
-function validateEmail() {
-  if (!email) {
-    fieldErrors.email = 'Email is required'
+function validateEmail(): boolean {
+  if (!email().trim()) {
+    setFieldError('email', 'Email is required')
     return false
   }
-  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
-    fieldErrors.email = 'Please enter a valid email address'
+  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email())) {
+    setFieldError('email', 'Please enter a valid email address')
     return false
   }
-  fieldErrors.email = ''
+  setFieldError('email', '')
   return true
 }
 
-// Validate password
-function validatePassword() {
-  if (!password) {
-    fieldErrors.password = 'Password is required'
+function validatePassword(): boolean {
+  if (!password()) {
+    setFieldError('password', 'Password is required')
     return false
   }
-  fieldErrors.password = ''
+  setFieldError('password', '')
   return true
 }
 
-// Emit submit event with credentials
-function handleSubmit(event) {
-  event.preventDefault()
-
-  const emailValid = validateEmail()
-  const passwordValid = validatePassword()
-
-  if (!emailValid || !passwordValid) {
+function handleSubmit(): void {
+  if (!validateEmail() || !validatePassword())
     return
-  }
 
-  // Emit the submit event - parent component handles the actual login
-  $emit('submit', { email, password, rememberMe })
+  emit('submit', {
+    email: email(),
+    password: password(),
+    rememberMe: rememberMe(),
+  })
 }
 </script>
+
 <div class="flex items-center justify-center px-4 py-12 min-h-screen">
   <div class="max-w-sm w-full">
-    <!-- Logo/Brand -->
     <div class="mb-8 text-center">
       <div class="inline-flex items-center justify-center mb-4 h-12 w-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl shadow-blue-500/25 shadow-lg">
-        <svg class="h-7 w-7 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
-        </svg>
+        <span class="h-7 w-7 text-white i-hugeicons-cube"></span>
       </div>
-      <h1 class="font-semibold text-2xl text-neutral-900 dark:text-white">
-        {{ title }}
-      </h1>
-      <p class="mt-2 text-neutral-500 text-sm dark:text-neutral-400">
-        {{ subtitle }}
-      </p>
+      <h1 class="font-semibold text-2xl text-neutral-900 dark:text-white">{{ title() }}</h1>
+      <p class="mt-2 text-neutral-500 text-sm dark:text-neutral-400">{{ subtitle() }}</p>
     </div>
 
-    <!-- Login Form -->
     <div class="p-6 bg-white dark:bg-neutral-900 border border-neutral-200/60 rounded-2xl dark:border-neutral-800 shadow-black/5 shadow-xl dark:shadow-black/20">
-      <!-- Error Message -->
-      @if(error)
-        <div class="mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 rounded-lg dark:border-red-800">
-          <div class="flex gap-2 items-center">
-            <div class="h-4 w-4 text-red-600 dark:text-red-400 i-hugeicons-alert-circle"></div>
-            <p class="text-red-600 text-sm dark:text-red-400">{{ error }}</p>
-          </div>
+      <div :if="error()" role="alert" class="mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 rounded-lg dark:border-red-800">
+        <div class="flex gap-2 items-center">
+          <span class="h-4 w-4 text-red-600 dark:text-red-400 i-hugeicons-alert-circle"></span>
+          <p class="text-red-600 text-sm dark:text-red-400">{{ error() }}</p>
         </div>
-      @endif
+      </div>
 
-      <form @submit="handleSubmit">
-        <!-- Email Field -->
+      <form @submit.prevent="handleSubmit">
         <div class="mb-4">
           <Input
             type="email"
             label="Email address"
             placeholder="you@example.com"
-            :value="email"
-            @input="email = $event.target.value"
+            v-model:value="email"
             @blur="validateEmail"
-            :error="fieldErrors.email"
+            :error="fieldError('email')"
             required
-            :disabled="isLoading"
+            :disabled="isLoading()"
           />
         </div>
 
-        <!-- Password Field -->
         <div class="mb-4">
           <Input
             type="password"
             label="Password"
             placeholder="Enter your password"
-            :value="password"
-            @input="password = $event.target.value"
+            v-model:value="password"
             @blur="validatePassword"
-            :error="fieldErrors.password"
+            :error="fieldError('password')"
             required
-            :disabled="isLoading"
+            :disabled="isLoading()"
           />
         </div>
 
-        <!-- Remember Me & Forgot Password -->
         <div class="flex items-center justify-between mb-6">
-          @if(showRememberMe)
-            <label class="flex gap-2 items-center cursor-pointer">
-              <input
-                type="checkbox"
-                class="h-4 w-4 text-blue-500 bg-white dark:bg-neutral-800 border-neutral-300 rounded dark:border-neutral-600 focus:ring-blue-500/40 focus:ring-offset-0"
-                :checked="rememberMe"
-                @change="rememberMe = $event.target.checked"
-                :disabled="isLoading"
-              />
-              <span class="text-neutral-600 text-sm dark:text-neutral-400">Remember me</span>
-            </label>
-          @endif
-
-          @if(showForgotPassword)
-            <a href="/forgot-password" class="font-medium text-blue-600 text-sm dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300">
-              Forgot password?
-            </a>
-          @endif
+          <label :if="showRememberMe()" class="flex gap-2 items-center cursor-pointer">
+            <input
+              type="checkbox"
+              class="h-4 w-4 text-blue-500 bg-white dark:bg-neutral-800 border-neutral-300 rounded dark:border-neutral-600 focus:ring-blue-500/40 focus:ring-offset-0"
+              x-model="rememberMe"
+              :disabled="isLoading()"
+            />
+            <span class="text-neutral-600 text-sm dark:text-neutral-400">Remember me</span>
+          </label>
+
+          <a :if="showForgotPassword()" href="/forgot-password" class="font-medium text-blue-600 text-sm dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300">
+            Forgot password?
+          </a>
         </div>
 
-        <!-- Submit Button -->
         <Button
           type="submit"
           variant="primary"
           size="lg"
           fullWidth
-          :loading="isLoading"
-          :disabled="isLoading || !email || !password"
+          :loading="isLoading()"
+          :disabled="isLoading() || !email() || !password()"
         >
-          @if(isLoading)
-            Signing in...
-          @else
-            Sign in
-          @endif
+          <span :if="isLoading()">Signing in...</span>
+          <span :if="!isLoading()">Sign in</span>
         </Button>
       </form>
-
-      <!-- Divider -->
-      <div class="relative my-6">
-        <div class="flex absolute inset-0 items-center">
-          <div class="w-full border-neutral-200 border-t dark:border-neutral-700"></div>
-        </div>
-        <div class="flex relative justify-center text-xs">
-          <span class="px-2 text-neutral-400 bg-white dark:bg-neutral-900">or continue with</span>
-        </div>
-      </div>
-
-      <!-- Social Login -->
-      <div class="grid gap-3 grid-cols-2">
-        <button
-          type="button"
-          class="flex gap-2 items-center justify-center px-4 py-2 font-medium text-neutral-700 text-sm dark:text-neutral-200 bg-white dark:bg-neutral-800 hover:bg-neutral-50 dark:hover:bg-neutral-700 border border-neutral-200 rounded-lg dark:border-neutral-700 transition-colors"
-          :disabled="isLoading"
-        >
-          <svg class="h-4 w-4" viewBox="0 0 24 24">
-            <path fill="currentColor" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
-            <path fill="currentColor" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
-            <path fill="currentColor" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
-            <path fill="currentColor" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
-          </svg>
-          Google
-        </button>
-        <button
-          type="button"
-          class="flex gap-2 items-center justify-center px-4 py-2 font-medium text-neutral-700 text-sm dark:text-neutral-200 bg-white dark:bg-neutral-800 hover:bg-neutral-50 dark:hover:bg-neutral-700 border border-neutral-200 rounded-lg dark:border-neutral-700 transition-colors"
-          :disabled="isLoading"
-        >
-          <svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
-            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
-          </svg>
-          GitHub
-        </button>
-      </div>
     </div>
 
-    <!-- Sign Up Link -->
-    @if(showSignUp)
-      <p class="mt-6 text-center text-neutral-500 text-sm dark:text-neutral-400">
-        Don't have an account?
-        <a href="/register" class="font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300">
-          Sign up
-        </a>
-      </p>
-    @endif
+    <p :if="showSignUp()" class="mt-6 text-center text-neutral-500 text-sm dark:text-neutral-400">
+      Don't have an account?
+      <a href="/register" class="font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300">
+        Sign up
+      </a>
+    </p>
   </div>
 </div>

package/resources/components/Dashboard/Auth/LoginDashboard.stx

@@ -0,0 +1,45 @@
+<script client>
+import { describeAuthError, useAuth } from '../../../../functions/auth'
+
+const { login } = useAuth()
+const route = useRoute()
+
+const isLoading = state(false)
+const error = state('')
+
+function safeRedirect(): string {
+  const redirect = String(route.query.redirect || '')
+  return redirect.startsWith('/') && !redirect.startsWith('//') ? redirect : '/'
+}
+
+async function handleLogin(credentials) {
+  isLoading.set(true)
+  error.set('')
+
+  try {
+    const result = await login(credentials)
+
+    if (!result || !('token' in result)) {
+      error.set(describeAuthError(result, 'Invalid credentials'))
+      return
+    }
+
+    navigate(safeRedirect())
+  }
+  catch (err) {
+    error.set(err.message || 'An error occurred during login')
+  }
+  finally {
+    isLoading.set(false)
+  }
+}
+</script>
+
+<template>
+  <Login
+    @submit="handleLogin"
+    :isLoading="isLoading()"
+    :error="error()"
+    :data-auth-status="isLoading() ? 'loading' : 'ready'"
+  />
+</template>

package/resources/components/Dashboard/Auth/PrivacyDashboard.stx

@@ -0,0 +1,38 @@
+@import('./LegalDocument')
+
+<!-- Privacy content rendered inside the shared dashboard legal shell. -->
+<template>
+  <LegalDocument
+    eyebrow="Legal"
+    title="Privacy Policy"
+    summary="This notice explains how the Stacks dashboard handles information used to operate your application."
+  >
+    <section>
+      <h2 class="font-semibold text-lg text-neutral-950 dark:text-white">Information handled</h2>
+      <p class="mt-2 leading-7">
+        The dashboard processes account details, session security data, audit information, and the application records needed for the pages and actions you use.
+      </p>
+    </section>
+
+    <section>
+      <h2 class="font-semibold text-lg text-neutral-950 dark:text-white">Local project access</h2>
+      <p class="mt-2 leading-7">
+        In development, the dashboard reads your local project configuration, database, and framework state. It does not invent provider activity or send project data to an external service unless you invoke a feature that requires that provider.
+      </p>
+    </section>
+
+    <section>
+      <h2 class="font-semibold text-lg text-neutral-950 dark:text-white">Credentials and providers</h2>
+      <p class="mt-2 leading-7">
+        Secrets remain in server-side configuration and must not be rendered into dashboard pages. When you use a connected provider, that provider processes requests under its own terms and privacy policy.
+      </p>
+    </section>
+
+    <section>
+      <h2 class="font-semibold text-lg text-neutral-950 dark:text-white">Retention and requests</h2>
+      <p class="mt-2 leading-7">
+        Retention follows your application configuration and the policies of connected storage providers. Contact your application administrator to request access, correction, export, or deletion of personal information.
+      </p>
+    </section>
+  </LegalDocument>
+</template>