RLS policies implementeren, Demo auth flow

2025-11-15 23:59:38 +01:00
parent b1cfb339a2
commit 99804656d7
49 changed files with 5841 additions and 123 deletions
--- a/app/(marketing)/epd/credentials-box.tsx
+++ b/app/(marketing)/epd/credentials-box.tsx
@@ -0,0 +1,88 @@
+'use client'
+
+import { useState } from 'react'
+import { Copy, Check } from 'lucide-react'
+import type { DemoCredentials } from '@/content/schemas/manifesto'
+
+interface CredentialsBoxProps {
+  credentials: DemoCredentials
+}
+
+export function CredentialsBox({ credentials }: CredentialsBoxProps) {
+  const [copiedEmail, setCopiedEmail] = useState(false)
+  const [copiedPassword, setCopiedPassword] = useState(false)
+
+  const copyToClipboard = async (text: string, type: 'email' | 'password') => {
+    try {
+      await navigator.clipboard.writeText(text)
+      if (type === 'email') {
+        setCopiedEmail(true)
+        setTimeout(() => setCopiedEmail(false), 2000)
+      } else {
+        setCopiedPassword(true)
+        setTimeout(() => setCopiedPassword(false), 2000)
+      }
+    } catch (err) {
+      console.error('Failed to copy:', err)
+    }
+  }
+
+  return (
+    <div className="bg-green-50 border-2 border-green-200 rounded-lg p-6 md:p-8">
+      <div className="space-y-4">
+        <div className="flex items-start gap-3">
+          <div className="flex-shrink-0 w-24 font-medium text-slate-700">
+            Email:
+          </div>
+          <div className="flex-1 font-mono text-slate-900 bg-white px-3 py-2 rounded border border-green-300">
+            {credentials.email}
+          </div>
+          <button
+            onClick={() => copyToClipboard(credentials.email, 'email')}
+            className="flex-shrink-0 p-2 hover:bg-green-100 rounded transition-colors"
+            aria-label="Kopieer email"
+          >
+            {copiedEmail ? (
+              <Check className="w-5 h-5 text-green-600" />
+            ) : (
+              <Copy className="w-5 h-5 text-slate-600" />
+            )}
+          </button>
+        </div>
+
+        <div className="flex items-start gap-3">
+          <div className="flex-shrink-0 w-24 font-medium text-slate-700">
+            Wachtwoord:
+          </div>
+          <div className="flex-1 font-mono text-slate-900 bg-white px-3 py-2 rounded border border-green-300">
+            {credentials.password}
+          </div>
+          <button
+            onClick={() => copyToClipboard(credentials.password, 'password')}
+            className="flex-shrink-0 p-2 hover:bg-green-100 rounded transition-colors"
+            aria-label="Kopieer wachtwoord"
+          >
+            {copiedPassword ? (
+              <Check className="w-5 h-5 text-green-600" />
+            ) : (
+              <Copy className="w-5 h-5 text-slate-600" />
+            )}
+          </button>
+        </div>
+      </div>
+
+      <p className="mt-6 text-sm text-slate-600 italic">
+        {credentials.note}
+      </p>
+
+      <div className="mt-6">
+        <a
+          href="/app/login"
+          className="inline-block w-full md:w-auto px-8 py-3 bg-green-600 hover:bg-green-700 text-white font-medium rounded-lg transition-colors text-center"
+        >
+          Log in op het prototype
+        </a>
+      </div>
+    </div>
+  )
+}