From 04ce0ce3bb3c775891c0609daa48b74b940599c8 Mon Sep 17 00:00:00 2001
From: Emanuel Almeida <emanuel@descomplicar.pt>
Date: Mon, 1 Jan 2001 00:00:00 +0000
Subject: [PATCH] feat: add AuthWrapper component with login UI

---
 src/auth/AuthWrapper.tsx | 79 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 79 insertions(+)
 create mode 100644 src/auth/AuthWrapper.tsx

diff --git a/src/auth/AuthWrapper.tsx b/src/auth/AuthWrapper.tsx
new file mode 100644
index 0000000..38be1cf
--- /dev/null
+++ b/src/auth/AuthWrapper.tsx
@@ -0,0 +1,79 @@
+import { useAuth } from 'react-oidc-context';
+import { ReactNode } from 'react';
+
+interface AuthWrapperProps {
+  children: ReactNode;
+}
+
+export function AuthWrapper({ children }: AuthWrapperProps) {
+  const auth = useAuth();
+
+  if (auth.isLoading) {
+    return (
+      <div className="min-h-screen bg-zinc-950 flex items-center justify-center">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-emerald-500 mx-auto"></div>
+          <p className="mt-4 text-zinc-400">A carregar...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (auth.error) {
+    return (
+      <div className="min-h-screen bg-zinc-950 flex items-center justify-center">
+        <div className="text-center max-w-md">
+          <div className="text-red-500 text-6xl mb-4">⚠</div>
+          <h1 className="text-xl font-bold text-white mb-2">Erro de Autenticação</h1>
+          <p className="text-zinc-400 mb-4">{auth.error.message}</p>
+          <button
+            onClick={() => auth.signinRedirect()}
+            className="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg transition-colors"
+          >
+            Tentar novamente
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  if (!auth.isAuthenticated) {
+    return (
+      <div className="min-h-screen bg-zinc-950 flex items-center justify-center">
+        <div className="text-center max-w-md">
+          <div className="text-emerald-500 text-6xl mb-4">🔐</div>
+          <h1 className="text-2xl font-bold text-white mb-2">Dashboard EAL</h1>
+          <p className="text-zinc-400 mb-6">Faça login para aceder ao dashboard</p>
+          <button
+            onClick={() => auth.signinRedirect()}
+            className="px-6 py-3 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg transition-colors font-medium"
+          >
+            Entrar com Authentik
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return <>{children}</>;
+}
+
+export function UserInfo() {
+  const auth = useAuth();
+  
+  if (!auth.isAuthenticated) return null;
+
+  return (
+    <div className="flex items-center gap-3">
+      <span className="text-zinc-400 text-sm">
+        {auth.user?.profile?.name || auth.user?.profile?.email}
+      </span>
+      <button
+        onClick={() => auth.signoutRedirect()}
+        className="px-3 py-1 text-sm text-zinc-400 hover:text-white border border-zinc-700 hover:border-zinc-500 rounded transition-colors"
+      >
+        Sair
+      </button>
+    </div>
+  );
+}