main repo

components/MagicLinkAuth.tsx

@@ -0,0 +1,125 @@
+import { useState } from 'react'
+import { supabase } from '@/lib/supabase'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { colors } from '@/lib/colors'
+import { Mail, CheckCircle } from 'lucide-react'
+
+export default function EmailAuth() {
+  const [email, setEmail] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [message, setMessage] = useState('')
+  const [messageType, setMessageType] = useState<'success' | 'error'>('success')
+
+  const handleSendEmail = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setLoading(true)
+    setMessage('')
+
+    try {
+      const { error } = await supabase.auth.signInWithOtp({
+        email,
+        options: {
+          emailRedirectTo: `${window.location.origin}/auth/callback`
+        }
+      })
+
+      if (error) {
+        setMessage(`Fehler: ${error.message}`)
+        setMessageType('error')
+      } else {
+        setMessage('E-Mail wurde an deine E-Mail-Adresse gesendet! Bitte prüfe dein Postfach.')
+        setMessageType('success')
+      }
+    } catch (error) {
+      setMessage('Ein unerwarteter Fehler ist aufgetreten.')
+      setMessageType('error')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="w-full max-w-md mx-auto">
+      <div 
+        className="p-6 sm:p-8 rounded-3xl shadow-lg backdrop-blur-sm"
+        style={{ backgroundColor: `${colors.background}F0` }}
+      >
+        <div className="flex items-center space-x-3 mb-6">
+          <Mail className="w-6 h-6" style={{ color: colors.primary }} />
+          <h3 className="text-xl font-bold" style={{ color: colors.primary }}>
+            Anmelden
+          </h3>
+        </div>
+
+        <form onSubmit={handleSendEmail} className="space-y-6">
+          <div>
+            <label className="block text-sm font-medium mb-2" style={{ color: colors.primary }}>
+              E-Mail-Adresse
+            </label>
+            <Input
+              type="email"
+              placeholder="deine@email.com"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+              className="w-full p-3 rounded-xl border-2 focus:outline-none focus:ring-2"
+              style={{ 
+                borderColor: colors.tertiary,
+                backgroundColor: colors.background,
+                color: colors.primary
+              }}
+            />
+          </div>
+
+          <Button 
+            type="submit" 
+            disabled={loading} 
+            className="w-full py-3 rounded-xl text-lg font-semibold flex items-center justify-center space-x-2"
+            style={{ 
+              backgroundColor: colors.primary,
+              color: colors.background
+            }}
+          >
+            {loading ? (
+              <>
+                <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
+                <span>Wird gesendet...</span>
+              </>
+            ) : (
+              <>
+                <Mail className="w-5 h-5" />
+                <span>E-Mail senden</span>
+              </>
+            )}
+          </Button>
+        </form>
+
+        {message && (
+          <div className={`mt-6 p-4 rounded-xl border-2 ${
+            messageType === 'success' 
+              ? 'border-green-500 bg-green-50' 
+              : 'border-red-500 bg-red-50'
+          }`}>
+            <div className="flex items-center space-x-2">
+              <CheckCircle className={`w-5 h-5 ${
+                messageType === 'success' ? 'text-green-600' : 'text-red-600'
+              }`} />
+              <p className={`text-sm ${
+                messageType === 'success' ? 'text-green-700' : 'text-red-700'
+              }`}>
+                {message}
+              </p>
+            </div>
+          </div>
+        )}
+
+        <div className="mt-6 text-xs text-center" style={{ color: colors.secondary }}>
+          <p>• Du erhältst eine E-Mail zur Bestätigung</p>
+          <p>• Klicke auf den Link in der E-Mail, um dich anzumelden</p>
+          <p>• Kein Passwort erforderlich</p>
+        </div>
+      </div>
+    </div>
+  )
+}