login e register front

Different-OpenSource · Aug 6, 2024 · d717f07 · d717f07
1 parent 5b5cd3b
commit d717f07
Show file tree

Hide file tree

Showing 15 changed files with 308 additions and 195 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,7 +15,8 @@
     "next": "14.2.5",
     "prettier": "^3.3.3",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "react-hot-toast": "^2.4.1"
   },
   "devDependencies": {
     "@types/bcrypt": "^5.0.2",

diff --git a/src/app/api/authenticated/route.ts b/src/app/api/authenticated/route.ts
@@ -0,0 +1,14 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getDataToken } from "@/utils/getDataToken";
+
+export async function GET(request: NextRequest) {
+  try {
+    await getDataToken(request);
+    return NextResponse.json({ authenticated: true });
+  } catch (error: any) {
+    return NextResponse.json(
+      { error: error.message, status: 500 },
+      { status: 500 }
+    );
+  }
+}
diff --git a/src/app/api/register/route.ts b/src/app/api/register/route.ts
@@ -13,7 +13,10 @@ export async function POST(request: NextRequest, response: NextResponse) {
         password: encryptedPassword,
       },
     });
-    return NextResponse.json({ message: "User created" }, { status: 201 });
+    return NextResponse.json(
+      { message: "User created", success: true },
+      { status: 201 }
+    );
   } catch (error: any) {
     return NextResponse.json({ error: error.message }, { status: 400 });
   }

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -2,18 +2,26 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
+@layer base {
+  html {
+    --color-primary: #4285f4;
+    --color-secondary: #34a853;
+    --color-buttons: #fbbc05;
+    --color-typography: #ea4335;
+    --foreground-rgb: 0, 0, 0;
+    --background-start-rgb: 214, 219, 220;
+    --background-end-rgb: 255, 255, 255;
+  }
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
+html[data-theme="dark"] {
+  --color-primary: #f98866;
+  --color-secondary: #80bd9e;
+  --color-buttons: #89da59;
+  --color-typography: #ff320e;
+  --foreground-rgb: 255, 255, 255;
+  --background-start-rgb: 0, 0, 0;
+  --background-end-rgb: 0, 0, 0;
 }
 
 body {

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
+import { Toaster } from "react-hot-toast";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -16,7 +17,10 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <Toaster position="top-center" />
+        <div className="w-dvw h-dvh">{children}</div>
+      </body>
     </html>
   );
 }
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
@@ -1,79 +1,58 @@
-'use client';
+"use client";
 
+import Button from "@/components/Button";
+import TextInput from "@/components/TextInput";
 import APICaller from "@/utils/APICaller";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 
 export default function Login() {
-    const [email, setEmail] = useState("");
-    const [password, setPassword] = useState("");
-    const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
 
-    const router = useRouter();
+  const router = useRouter();
 
-    async function handleLogin() {
-        if (!email || !password) {
-            return;
-        }
-        try {
-            const requestData = { email, password };
-            const response = await APICaller("/api/login", "POST", requestData);
-            if (response.success) {
-                localStorage.setItem("token", response.token);
-            }
-        } catch (error) {
-            console.error("Erro ao fazer login:", error);
-        }
+  async function handleLogin() {
+    if (!email || !password) {
+      return;
     }
-
-    async function handleRegister() {
-        if (!email || !password || !name) {
-            return;
-        }
-        try {
-            const requestData = { email, password, name };
-            const response = await APICaller("/api/register", "POST", requestData);
-            if (response.success) {
-                localStorage.setItem("token", response.token);
-                router.push("/dashboard");
-            }
-        } catch (error) {
-            console.error("Error ao registrar:", error);
-        }
-    };
-
-    async function helloWorld() {
-        try {
-            const response = await APICaller("/api/helloworld", "GET");
-        } catch (error) {
-            console.error("Error:", error);
-        }
+    try {
+      const requestData = { email, password };
+      const response = await APICaller("/api/login", "POST", requestData);
+      if (response.success) {
+        localStorage.setItem("token", response.token);
+      }
+    } catch (error) {
+      console.error("Erro ao fazer login:", error);
     }
-
-    return (
-        <div>
-            <input
-                type="text"
-                placeholder="Email"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-            />
-            <input
-                type="text"
-                placeholder="Name"
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-            />
-            <input
-                type="password"
-                placeholder="Senha"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-            />
-            <button onClick={handleLogin} className="mr-10">Login</button>
-            <button onClick={handleRegister} className="mr-10">Register</button>
-            <button onClick={helloWorld} className="mr-10">hello world (needs auth)</button>
+  }
+
+  return (
+    <div className="flex w-full h-full justify-center items-center">
+      <div className="flex flex-col w-96 shadow-xl p-10 rounded-lg gap-2">
+        <TextInput
+          setName={setEmail}
+          value={email}
+          type="email"
+          label="Email"
+          placeholder="[email protected]"
+        />
+        <TextInput
+          setName={setPassword}
+          value={password}
+          type="password"
+          label="Senha"
+          placeholder="•••••••••"
+        />
+        <div className="flex gap-2 mt-4">
+          <Button
+            text="Registrar-se"
+            onClick={() => router.push("/register")}
+            style="outline"
+          ></Button>
+          <Button text="Entrar" onClick={handleLogin} style="primary"></Button>
         </div>
-    )
-
-}
+      </div>
+    </div>
+  );
+}