add login page

2026-04-18 07:17: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>
+  );
+}
@@ -9,9 +9,11 @@
    "lint": "eslint"
  },
  "dependencies": {
+    "@react-oauth/google": "^0.13.5",
    "framer-motion": "^12.38.0",
    "lucide-react": "^1.8.0",
    "next": "16.2.1",
+    "next-themes": "^0.4.6",
    "react": "19.2.4",
    "react-dom": "19.2.4",
    "react-easy-crop": "^5.5.7",
@@ -8,6 +8,9 @@ importers:

  .:
    dependencies:
+      '@react-oauth/google':
+        specifier: ^0.13.5
+        version: 0.13.5(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
      framer-motion:
        specifier: ^12.38.0
        version: 12.38.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -17,6 +20,9 @@ importers:
      next:
        specifier: 16.2.1
        version: 16.2.1(@babel/core@7.29.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      next-themes:
+        specifier: ^0.4.6
+        version: 0.4.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
      react:
        specifier: 19.2.4
        version: 19.2.4
@@ -440,6 +446,12 @@ packages:
    resolution: {integrity: sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==}
    engines: {node: '>=12.4.0'}

+  '@react-oauth/google@0.13.5':
+    resolution: {integrity: sha512-xQWri2s/3nNekZJ4uuov2aAfQYu83bN3864KcFqw2pK1nNbFurQIjPFDXhWaKH3IjYJ2r/9yyIIpsn5lMqrheQ==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
  '@rtsao/scc@1.1.0':
    resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}

@@ -1577,6 +1589,12 @@ packages:
  natural-compare@1.4.0:
    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}

+  next-themes@0.4.6:
+    resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
+    peerDependencies:
+      react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+
  next@16.2.1:
    resolution: {integrity: sha512-VaChzNL7o9rbfdt60HUj8tev4m6d7iC1igAy157526+cJlXOQu5LzsBXNT+xaJnTP/k+utSX5vMv7m0G+zKH+Q==}
    engines: {node: '>=20.9.0'}
@@ -2357,6 +2375,11 @@ snapshots:

  '@nolyfill/is-core-module@1.0.39': {}

+  '@react-oauth/google@0.13.5(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+
  '@rtsao/scc@1.1.0': {}

  '@swc/helpers@0.5.15':
@@ -3591,6 +3614,11 @@ snapshots:

  natural-compare@1.4.0: {}

+  next-themes@0.4.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+    dependencies:
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+
  next@16.2.1(@babel/core@7.29.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
    dependencies:
      '@next/env': 16.2.1
@@ -0,0 +1,15 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  darkMode: "class", // Isto desativa o modo automático do sistema
+  content: [
+    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
+export default config;