add login page

2026-04-18 15:27:52 +00:00 · 2026-04-15 12:50:44 +01:00
parent 1beda1f8f6
commit b84d6dd162
5 changed files with 162 additions and 6 deletions
@@ -1,6 +1,8 @@
 import type { Metadata, Viewport } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
+import { GoogleOAuthProvider } from "@react-oauth/google";
+import { ThemeProvider } from 'next-themes'

 const inter = Inter({
  variable: "--font-inter",
@@ -36,12 +38,20 @@ export default function RootLayout({
  children: React.ReactNode;
 }>) {
  return (
-    <html lang="pt" className={`${inter.variable} h-full antialiased`}>
-      <body
-        className={`min-h-full flex flex-col bg-white text-neutral-900 ${inter.className}`}
-      >
-        {children}
+    // Remova o style={{ colorScheme: 'light' }} daqui, 
+    // pois o Next.js tem dificuldade em hidratar estilos inline no <html>
+    <html lang="pt" style={{ colorScheme: 'light' }} className={`${inter.variable} light h-full antialiased`} suppressHydrationWarning>
+      <body className={`min-h-full flex flex-col bg-[#f5f5f7] text-neutral-900 ${inter.className}`}>
+        <GoogleOAuthProvider clientId="618391854803-gtdbtnf5t78stsmd1724s8c456tfq4lr.apps.googleusercontent.com">
+          <ThemeProvider 
+            attribute="class" 
+            defaultTheme="light"
+            enableSystem={false}
+          >
+            {children}
+          </ThemeProvider>
+        </GoogleOAuthProvider>
      </body>
    </html>
  );
-}
+}
@@ -0,0 +1,101 @@
+"use client";
+import Image from 'next/image';
+
+import React, { useState } from "react";
+import { useGoogleLogin } from "@react-oauth/google";
+
+export default function AppleStyleAuth() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  // Lógica do Google Login
+  const googleLogin = useGoogleLogin({
+    onSuccess: (res) => console.log("Google Success", res),
+    onError: () => console.log("Google Failed"),
+  });
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-[#f5f5f7] px-4 dark:bg-black">
+      <div className="w-full max-w-[400px] space-y-8 text-center">
+        
+        {/* 1. LOGOTIPO (Apple Style) */}
+        <div className="flex flex-col items-center">
+          <div className="flex h-16 w-16 items-center justify-center rounded-[1.2rem] bg-black text-white shadow-2xl dark:bg-white dark:text-black">
+             {/* Substitui pelo teu SVG de logo real */}
+            {/* <span className="text-2xl font-black italic">tv1</span> */}
+            <Image src="/logo.png" alt="logo" width={100} height={100} />
+          </div>
+          <h1 className="mt-6 text-3xl font-bold tracking-tight text-neutral-900 dark:text-white">
+            Iniciar sessão
+          </h1>
+          <p className="mt-2 text-sm text-neutral-500">Usa a tua conta TVone.</p>
+        </div>
+
+        {/* 2. FORMULÁRIO DE CREDENCIAIS */}
+        <div className="space-y-3">
+          <div className="relative">
+            <input
+              type="email"
+              placeholder="E-mail ou Telefone"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="w-full rounded-2xl border border-neutral-200 bg-white/50 px-5 py-4 text-sm outline-none transition-all focus:border-blue-500 focus:bg-white focus:ring-4 focus:ring-blue-500/10 dark:border-neutral-800 dark:bg-neutral-900"
+            />
+          </div>
+          <div className="relative">
+            <input
+              type="password"
+              placeholder="Palavra-passe"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="w-full rounded-2xl border border-neutral-200 bg-white/50 px-5 py-4 text-sm outline-none transition-all focus:border-blue-500 focus:bg-white focus:ring-4 focus:ring-blue-500/10 dark:border-neutral-800 dark:bg-neutral-900"
+            />
+          </div>
+          
+          <button className="w-full rounded-2xl bg-blue-600 py-4 text-sm font-bold text-white transition-all hover:bg-blue-700 active:scale-[0.98]">
+            Continuar
+          </button>
+        </div>
+
+        {/* 3. DIVISOR COM "OU" */}
+        <div className="relative flex items-center py-4">
+          <div className="flex-grow border-t border-neutral-200 dark:border-neutral-800"></div>
+          <span className="mx-4 flex-shrink text-[11px] font-bold uppercase tracking-widest text-neutral-400">
+            ou
+          </span>
+          <div className="flex-grow border-t border-neutral-200 dark:border-neutral-800"></div>
+        </div>
+
+        {/* 4. BOTÃO GOOGLE (Melhorado) */}
+        <button
+          onClick={() => googleLogin()}
+          className="group flex w-full items-center justify-center gap-3 rounded-2xl border border-neutral-200 bg-white px-6 py-3.5 transition-all hover:bg-neutral-50 active:scale-[0.98] dark:border-neutral-800 dark:bg-transparent dark:hover:bg-neutral-900"
+        >
+          <svg className="h-5 w-5" viewBox="0 0 24 24">
+            <path 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" fill="#4285F4" />
+            <path 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" fill="#34A853" />
+            <path 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" fill="#FBBC05" />
+            <path d="M12 5.38c1.62 0 3.06.56 4.21 1.66l3.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" fill="#EA4335" />
+          </svg>
+          <span className="text-sm font-semibold tracking-tight text-neutral-700 dark:text-neutral-300">
+            Continuar com o Google
+          </span>
+        </button>
+
+        {/* 5. LINKS ADICIONAIS */}
+        <div className="pt-4 text-center">
+          <a href="#" className="text-xs font-medium text-blue-600 hover:underline">
+            Esqueceste-te da palavra-passe?
+          </a>
+          <p className="mt-8 text-xs text-neutral-400">
+            Não tens conta?{" "}
+            <a href="#" className="font-bold text-neutral-900 dark:text-white">
+              Cria uma agora.
+            </a>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}