login & register: change alert styles;

register: fix photo;

src/components/Navbar.js

@@ -231,7 +231,7 @@ function Navbar(props) {
         {
           label: "",
           element: (
-            <span className="inline-block mx-3 hover:underline">
+            <span className="inline-block mx-3 p-3 hover:underline">
               เข้าสู่ระบบ
             </span>
           ),
@@ -241,7 +241,7 @@ function Navbar(props) {
         {
           label: "",
           element: (
-            <span className="inline-block mx-3 hover:underline">
+            <span className="inline-block mx-3 p-3 hover:underline">
               สมัครสมาชิก
             </span>
           ),

src/pages/admin/member.js

@@ -128,7 +128,9 @@ export default function Member() {
                 <TableCell>{user.id}</TableCell>
                 <TableCell>
                   <img
+                  className="rounded-lg object-cover"
                     width={70}
+                    height={70}
                     src={user?.photo?.length ? user.photo : "/empty.jpg"}
                     alt="profile"
                   />

src/pages/login.js

@@ -9,18 +9,18 @@ import { useState } from "react";
 import axios from "axios";
 import Head from "next/head";
 import userCookie from "@/components/lib/userCookie";
+import PopupAlert from "@/components/PopupAlert";
 
 export default function Login() {
   const user = useContext(UserContext);
-  const [errorMessage, setErrorMessage] = useState("");
-  const [successMessage, setSuccessMessage] = useState("");
+  const [message, setMessage] = useState({ message: "", error: false });
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
 
   if (user.value?.name)
     return (
       <div>
-        <Paper className="m-auto" sx={{ p: 1, maxWidth: 200  }}>
+        <Paper className="m-auto" sx={{ p: 1, maxWidth: 200 }}>
           <h3 className="text-center">คุณเข้าสู่ระบบแล้ว</h3>
         </Paper>
       </div>
@@ -39,9 +39,9 @@ export default function Login() {
       usrsto.store(response.data.token);
       window.location.href = "/";
     } else if (response.data.status === 203) {
-      setErrorMessage("ชื่อผู้ใช้หรือระหัสผ่านไม่ถูกต้อง");
+      setMessage({ message: "ชื่อผู้ใช้หรือระหัสผ่านไม่ถูกต้อง", error: true });
       setTimeout(() => {
-        setErrorMessage("");
+        setMessage({ message: "", error: true });
       }, 3000);
     }
   }
@@ -52,17 +52,10 @@ export default function Login() {
         <title>เข้าสู่ระบบ | OpenShop</title>
       </Head>
       <Container>
-        <Snackbar
-          ContentProps={{ className: "bg-red-500" }}
-          anchorOrigin={{ horizontal: "center", vertical: "top" }}
-          open={!!errorMessage.length}
-          message={errorMessage}
-        />
-        <Snackbar
-          ContentProps={{ className: "bg-green-500" }}
-          anchorOrigin={{ horizontal: "center", vertical: "top" }}
-          open={!!successMessage.length}
-          message={successMessage}
+        <PopupAlert
+          isError={message.error}
+          message={message.message}
+          open={!!message.message.length}
         />
         <Grid container>
           <Grid item lg={3} md={0}></Grid>

src/pages/profile.js

+import { Box, Paper } from "@mui/material";
+import React, { useContext } from "react";
+import { UserContext } from "./_app";
+
+export default function Profile() {
+  const user = useContext(UserContext);
+  console.log(user.value);
+  return (
+    <>
+      {user.value?.token ? (
+        <Box>
+          <Paper sx={{ p: 3, boxShadow: "none" }}>
+            <div className="gap-10  mx-auto text-left grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 max-w-[1520px]">
+              <div className="mx-auto">
+                <img
+                  className="inline-block rounded-lg"
+                  width={300}
+                  src={user.value.photo.length ? user.value.photo : "empty.jpg"}
+                  alt=""
+                />
+              </div>
+              <div className="lg:col-span-2 p-3">
+                <div>{user.value.name}</div>
+                <div>{user.value.email}</div>
+                <div className="text-lg">@{user.value.username}</div>
+                <div>{user.value.phone}</div>
+                <div>ที่อยู่ {user.value.address}</div>
+              </div>
+            </div>
+          </Paper>
+        </Box>
+      ) : (
+        <Box>
+          <Paper sx={{ p: 3, textAlign: "center" }}>
+            คุณยังไม่ได้เข้าสู่ระบบ
+          </Paper>
+        </Box>
+      )}
+    </>
+  );
+}

src/pages/register.js

@@ -9,11 +9,11 @@ import { useState } from "react";
 import axios from "axios";
 import Head from "next/head";
 import { useRouter } from "next/router";
+import PopupAlert from "@/components/PopupAlert";
 
 export default function Login() {
   const router = useRouter();
-  const [errorMessage, setErrorMessage] = useState("");
-  const [successMessage, setSuccessMessage] = useState("");
+  const [message, setMessage] = useState({ message: "", error: false });
   const user = useContext(UserContext);
   const [name, setName] = useState("");
   const [email, setEmail] = useState("");
@@ -35,14 +35,14 @@ export default function Login() {
       name,
       email,
       phone,
-      image,
+      photo: image,
       username,
       password,
     });
     if (response.data.status === 201) {
-      setSuccessMessage("สมัครสมาชิกสำเร็จ!");
+      setMessage({ message: "สมัครสมาชิกสำเร็จ!", error: false });
       setTimeout(() => {
-        setSuccessMessage("");
+        setMessage({ message: "", error: false });
       }, 3000);
       setName("");
       setEmail("");
@@ -51,14 +51,20 @@ export default function Login() {
       setUsername("");
       setPassword("");
     } else if (response.data.status === 202) {
-      setErrorMessage("ชื่อผู้ใช้งานนี้ถูกใช้แล้ว กรุณาลองใหม่อีกครั้ง");
+      setMessage({
+        message: "ชื่อผู้ใช้งานนี้ถูกใช้แล้ว กรุณาลองใหม่อีกครั้ง",
+        error: true,
+      });
       setTimeout(() => {
-        setErrorMessage("");
+        setMessage({ message: "", error: true });
       }, 3000);
     } else {
-      setErrorMessage("ขออภัย มีบางอย่างไม่ถูกต้อง กรุณาลองใหม่อีกครั้ง");
+      setMessage({
+        message: "ขออภัย มีบางอย่างไม่ถูกต้อง กรุณาลองใหม่อีกครั้ง",
+        error: true,
+      });
       setTimeout(() => {
-        setErrorMessage("");
+        setMessage({ message: "", error: true });
       }, 3000);
     }
   }
@@ -69,17 +75,10 @@ export default function Login() {
         <title>สมัครสมาชิก | OpenShop</title>
       </Head>
       <Container>
-        <Snackbar
-          ContentProps={{ className: "bg-red-500" }}
-          anchorOrigin={{ horizontal: "center", vertical: "top" }}
-          open={!!errorMessage.length}
-          message={errorMessage}
-        />
-        <Snackbar
-          ContentProps={{ className: "bg-green-500" }}
-          anchorOrigin={{ horizontal: "center", vertical: "top" }}
-          open={!!successMessage.length}
-          message={successMessage}
+        <PopupAlert
+          isError={message.error}
+          message={message.message}
+          open={!!message.message.length}
         />
         <Grid container>
           <Grid item lg={3} md={0}></Grid>