feat: wip

client/src/components/layouts/AuthLayout.tsx

@@ -10,13 +10,15 @@ interface AuthLayoutProps {
 export function AuthLayout({ children }: AuthLayoutProps) {
   const router = useRouter();
 
-  const { isAuth } = useAuthContext();
+  const { isAuth, isAuthLoading } = useAuthContext();
 
   useEffect(() => {
-    if (!isAuth) {
-      // router.replace("/");
+    if (!isAuthLoading && !isAuth) {
+      router.replace("/login");
     }
-  }, [isAuth, router]);
+  }, [isAuth, isAuthLoading, router]);
+
+  // if !user return 404
 
   return <>{isAuth ? children : null}</>;
 }

client/src/components/layouts/Header.tsx

@@ -1,20 +1,18 @@
 import Link from "next/link";
-import { useRouter } from "next/router";
+// import { useRouter } from "next/router";
 
 import { Button } from "../ui/Button";
 import { useAuthContext } from "~/hooks";
 
 export function Header() {
-  const router = useRouter();
+  // const router = useRouter();
 
-  const { isAuth, setIsAuth } = useAuthContext();
+  const { user, isAuth, setIsAuth } = useAuthContext();
 
   // Log out
   function handleLogout() {
-    setIsAuth(false);
-
-    router.replace("/");
     localStorage.removeItem("token");
+    setIsAuth(false);
   }
 
   return (
@@ -23,15 +21,16 @@ export function Header() {
       <div className="flex items-center gap-2">
         <div>
           {isAuth ? (
-            <Button onClick={handleLogout}>Log out</Button>
+            <div className="flex items-center gap-4">
+              <span className="text-sm font-medium">👋 {user}</span>
+              <Button onClick={handleLogout}>Log out</Button>
+            </div>
           ) : (
             <Link href="/login">
               <Button>Log in</Button>
             </Link>
           )}
         </div>
-
-        {/* <span className="text-sm font-medium">👋 hereeast</span> */}
       </div>
     </div>
   );

client/src/components/layouts/Login.tsx

@@ -1,7 +1,16 @@
+import { useRouter } from "next/router";
+import { FormEvent, useState } from "react";
 import Link from "next/link";
+import axios from "axios";
+import jwt, { type JwtPayload } from "jsonwebtoken";
 
-import { LoginForm } from "../LoginForm";
+import { Button } from "~/components/ui/Button";
+import { Input } from "~/components/ui/Input";
 
+import { login } from "~/api/users";
+import { useAuthContext } from "~/hooks";
+
+// Login
 export function Login() {
   return (
     <div>
@@ -27,3 +36,64 @@ export function Login() {
     </div>
   );
 }
+
+// Login form
+export function LoginForm() {
+  const router = useRouter();
+
+  const { setIsAuth } = useAuthContext();
+
+  const [password, setPassword] = useState("");
+  const [email, setEmail] = useState("");
+
+  // Login
+  async function handleSubmit(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+
+    try {
+      const token = await login(email, password);
+
+      if (token) {
+        localStorage.setItem("token", token);
+        axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
+
+        // To update Header
+        setIsAuth(true);
+
+        const decodedUser = jwt.decode(token) as JwtPayload;
+
+        if (decodedUser) {
+          router.replace(`/${decodedUser.username}`);
+        }
+      }
+    } catch (err) {
+      // Err if username exists
+      // Err if email exists
+      console.log(err);
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <div className="mb-4 flex w-80 flex-col gap-2">
+        <Input
+          name="email"
+          value={email}
+          required
+          placeholder="Email"
+          onChange={(e) => setEmail(e.target.value)}
+        />
+
+        <Input
+          name="password"
+          value={password}
+          required
+          placeholder="Password"
+          onChange={(e) => setPassword(e.target.value)}
+        />
+      </div>
+
+      <Button classes="w-full">Login</Button>
+    </form>
+  );
+}

client/src/components/layouts/Register.tsx

@@ -1,7 +1,13 @@
 import Link from "next/link";
+import { useRouter } from "next/router";
+import { FormEvent, useState } from "react";
 
-import { RegisterForm } from "../RegisterForm";
+import { Button } from "~/components/ui/Button";
+import { Input } from "~/components/ui/Input";
 
+import { createUser } from "~/api/users";
+
+// Register
 export function Register() {
   return (
     <div>
@@ -27,3 +33,60 @@ export function Register() {
     </div>
   );
 }
+
+// Register Form
+export function RegisterForm() {
+  const router = useRouter();
+
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [email, setEmail] = useState("");
+
+  async function handleSubmit(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+
+    try {
+      const user = await createUser(username, email, password);
+
+      if (user) {
+        router.replace(`/${user?.username}`);
+      }
+    } catch (err) {
+      // Err if username exists
+      // Err if email exists
+      console.log(err);
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <div className="mb-4 flex w-80 flex-col gap-2">
+        <Input
+          name="username"
+          value={username}
+          required
+          placeholder="Username"
+          onChange={(e) => setUsername(e.target.value)}
+        />
+
+        <Input
+          name="email"
+          value={email}
+          required
+          placeholder="Email"
+          onChange={(e) => setEmail(e.target.value)}
+        />
+
+        <Input
+          name="password"
+          value={password}
+          required
+          placeholder="Password"
+          onChange={(e) => setPassword(e.target.value)}
+        />
+      </div>
+
+      <Button classes="w-full">Create Account</Button>
+    </form>
+  );
+}