Add components to main

frontend/cinevideo/app/layout.tsx

@@ -2,7 +2,7 @@ import type { Metadata } from 'next'
 import './globals.css'
 
 export const metadata: Metadata = {
-  title: 'v0 App',
+  title: 'Cinevideo',
   description: 'Created with v0',
   generator: 'v0.dev',
 }

frontend/cinevideo/app/page.tsx

@@ -7,7 +7,7 @@ export default function Home() {
   const router = useRouter();
 
   const handleLoginSuccess = () => {
-    router.push("/homepage");
+    router.push("/");
   };
 
   return <Login onLoginSuccess={handleLoginSuccess} />;

frontend/cinevideo/app/pages/Login.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useRouter } from "next/navigation";
+import { useState } from "react";
 import Logo from "@/components/Logo";
 import Button from "@/components/Button";
 import Input from "@/components/Input";
@@ -14,17 +15,51 @@ interface LoginProps {
 export default function Login({ onLoginSuccess }: LoginProps) {
     const router = useRouter();
 
-    const handleLogin = () => {
-      onLoginSuccess();
+    const [username, setUsername] = useState("");
+    const [password, setPassword] = useState("");
+    const [error, setError] = useState("");
+
+    const handleLogin = async () => {
+      //onLoginSuccess();
+
+      try {
+        const response = await fetch("/auth/login", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ username, password }),
+        });
+
+        if (response.ok) {
+          // Login bem-sucedido
+          router.push("/");
+        } else {
+          // Login falhou
+          const errorData = await response.json();
+          setError(errorData.error || "Falha no login");
+        }
+      } catch (error) {
+        setError("Erro de rede ou servidor");
+      }
     };
 
     return (
       <div className="flex items-center justify-center min-h-screen bg-white">
         <AuthContainer>
           <div className="flex flex-col items-center space-y-4">
             <Logo />
-            <Input type="text" placeholder="Usuário/Email" />
-            <Input type="password" placeholder="Senha" />
+            {error && <p className="text-red-500">{error}</p>}
+            <Input type="text" 
+            placeholder="Usuário/Email" 
+            value={username} 
+            onChange={(e) => setUsername(e.target.value)} 
+            />
+            <Input type="password" 
+            placeholder="Senha" 
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            />
             <Button onClick={handleLogin}>Login</Button>
           </div>
           <AuthFooter />

frontend/cinevideo/app/pages/Profile_information.tsx

@@ -0,0 +1,32 @@
+import Logo from "@/components/Logo";
+import Button from "@/components/Button";
+import Input from "@/components/Input";
+import AuthContainer from "@/components/AuthContainer";
+import BackButton from "@/components/BackButton";
+import ProfilePicture from "@/components/ProfilePicture";
+
+export default function ProfileInformation() {
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-white">
+      <AuthContainer>
+        <div className="flex flex-col items-center space-y-4">
+          <div className="flex justify-between w-full">
+            <BackButton />
+            <Logo />
+          </div>
+          <Input type="text" placeholder="Nome completo" />
+          <Input type="text" placeholder="Usuário/Email" />
+          <Input type="date" placeholder="Data de nascimento" />
+          <Input type="text" placeholder="Gênero" />
+          <Input type="password" placeholder="Senha" />
+          <ProfilePicture imageUrl="/images/profile.jpg" /> {/* Substitua pelo caminho da imagem */}
+          <div className="flex space-x-4">
+            <Button>Alterar senha</Button>
+            <Button>Alterar dados</Button>
+            <Button>Excluir conta</Button>
+          </div>
+        </div>
+      </AuthContainer>
+    </div>
+  );
+}

frontend/cinevideo/app/profile_information/page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import ProfileInformation from "../pages/Profile_information";
+
+export default function ProfileInfRouter() {
+  return <ProfileInformation/>;
+}

frontend/cinevideo/components/AuthContainer.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+interface AuthContainerProps {
+  children: React.ReactNode;
+}
+
+export default function AutoContainer({ children }: AuthContainerProps) {
+  return (
+    <div className="bg-[#E36161] p-10 rounded-lg w-96">
+        {children}
+    </div>
+  );
+}

frontend/cinevideo/components/AuthFooter.tsx

@@ -0,0 +1,12 @@
+import Link from "next/link";
+
+export default function AuthFooter() {
+  return (
+    <p className="text-center mt-4">
+        Ainda não tem conta?{" "}
+      <Link href="/registration" className="text-sm text-[#FF0000]">
+        Cadastre-se
+      </Link>
+    </p>
+  );
+}

frontend/cinevideo/components/BackButton.tsx

@@ -0,0 +1,12 @@
+import { ArrowLeft } from "lucide-react";
+import { useRouter } from "next/navigation";
+
+export default function BackButton() {
+  const router = useRouter();
+
+  return (
+    <button className="bg-transparent text-gray-600 p-2 rounded-full" onClick={() => router.back()}>
+      <ArrowLeft className="w-6 h-6" />
+    </button>
+  );
+}

frontend/cinevideo/components/Button.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+interface ButtonProps {
+    children: React.ReactNode;
+    onClick?: () => void;
+}
+
+export default function Button({ children, onClick }: ButtonProps) {
+    return (
+        <button 
+            className="bg-[#FF0000] text-white py-2 px-10 rounded text-lg" 
+            onClick={onClick}>
+            {children}
+        </button>
+    );
+}

frontend/cinevideo/components/Input.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+interface InputProps {
+  type: string;
+  placeholder: string;
+  value?: string; 
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void; 
+}
+
+export default function Input({ type, placeholder }: InputProps) {
+  return (
+    <input 
+        type={type}
+        placeholder={placeholder}
+        className="bg-gray-200 p-2 rounded w-full" 
+    />
+  );
+}

frontend/cinevideo/components/Logo.tsx

@@ -0,0 +1,10 @@
+import { Play } from "lucide-react";
+
+export default function Logo() {
+    return (
+        <div className="flex items-center space-x-4">
+            <Play className="text-[#FF0000] w-15 h-10"/>
+            <h1 className="text-[#FF0000] text-3x1 font-bold">CineVideo</h1>
+        </div>  
+    );
+}

frontend/cinevideo/components/ProfilePicture.tsx

@@ -0,0 +1,11 @@
+interface ProfilePictureProps {
+    imageUrl: string;
+  }
+
+  export default function ProfilePicture({ imageUrl }: ProfilePictureProps) {
+    return (
+      <div className="w-24 h-24 rounded-full overflow-hidden">
+        <img src={imageUrl} alt="Foto de perfil" className="w-full h-full object-cover" />
+      </div>
+    );
+  }