Commit c99f1861 authored by Nawasan Wisitsingkhon's avatar Nawasan Wisitsingkhon

login & register: change alert styles;

register: fix photo;
parent 4dd46b2f
...@@ -231,7 +231,7 @@ function Navbar(props) { ...@@ -231,7 +231,7 @@ function Navbar(props) {
{ {
label: "", label: "",
element: ( element: (
<span className="inline-block mx-3 hover:underline"> <span className="inline-block mx-3 p-3 hover:underline">
เข้าสู่ระบบ เข้าสู่ระบบ
</span> </span>
), ),
...@@ -241,7 +241,7 @@ function Navbar(props) { ...@@ -241,7 +241,7 @@ function Navbar(props) {
{ {
label: "", label: "",
element: ( element: (
<span className="inline-block mx-3 hover:underline"> <span className="inline-block mx-3 p-3 hover:underline">
สมัครสมาชิก สมัครสมาชิก
</span> </span>
), ),
......
...@@ -128,7 +128,9 @@ export default function Member() { ...@@ -128,7 +128,9 @@ export default function Member() {
<TableCell>{user.id}</TableCell> <TableCell>{user.id}</TableCell>
<TableCell> <TableCell>
<img <img
className="rounded-lg object-cover"
width={70} width={70}
height={70}
src={user?.photo?.length ? user.photo : "/empty.jpg"} src={user?.photo?.length ? user.photo : "/empty.jpg"}
alt="profile" alt="profile"
/> />
......
...@@ -9,11 +9,11 @@ import { useState } from "react"; ...@@ -9,11 +9,11 @@ import { useState } from "react";
import axios from "axios"; import axios from "axios";
import Head from "next/head"; import Head from "next/head";
import userCookie from "@/components/lib/userCookie"; import userCookie from "@/components/lib/userCookie";
import PopupAlert from "@/components/PopupAlert";
export default function Login() { export default function Login() {
const user = useContext(UserContext); const user = useContext(UserContext);
const [errorMessage, setErrorMessage] = useState(""); const [message, setMessage] = useState({ message: "", error: false });
const [successMessage, setSuccessMessage] = useState("");
const [username, setUsername] = useState(""); const [username, setUsername] = useState("");
const [password, setPassword] = useState(""); const [password, setPassword] = useState("");
...@@ -39,9 +39,9 @@ export default function Login() { ...@@ -39,9 +39,9 @@ export default function Login() {
usrsto.store(response.data.token); usrsto.store(response.data.token);
window.location.href = "/"; window.location.href = "/";
} else if (response.data.status === 203) { } else if (response.data.status === 203) {
setErrorMessage("ชื่อผู้ใช้หรือระหัสผ่านไม่ถูกต้อง"); setMessage({ message: "ชื่อผู้ใช้หรือระหัสผ่านไม่ถูกต้อง", error: true });
setTimeout(() => { setTimeout(() => {
setErrorMessage(""); setMessage({ message: "", error: true });
}, 3000); }, 3000);
} }
} }
...@@ -52,17 +52,10 @@ export default function Login() { ...@@ -52,17 +52,10 @@ export default function Login() {
<title>เข้าสู่ระบบ | OpenShop</title> <title>เข้าสู่ระบบ | OpenShop</title>
</Head> </Head>
<Container> <Container>
<Snackbar <PopupAlert
ContentProps={{ className: "bg-red-500" }} isError={message.error}
anchorOrigin={{ horizontal: "center", vertical: "top" }} message={message.message}
open={!!errorMessage.length} open={!!message.message.length}
message={errorMessage}
/>
<Snackbar
ContentProps={{ className: "bg-green-500" }}
anchorOrigin={{ horizontal: "center", vertical: "top" }}
open={!!successMessage.length}
message={successMessage}
/> />
<Grid container> <Grid container>
<Grid item lg={3} md={0}></Grid> <Grid item lg={3} md={0}></Grid>
......
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>
)}
</>
);
}
...@@ -9,11 +9,11 @@ import { useState } from "react"; ...@@ -9,11 +9,11 @@ import { useState } from "react";
import axios from "axios"; import axios from "axios";
import Head from "next/head"; import Head from "next/head";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import PopupAlert from "@/components/PopupAlert";
export default function Login() { export default function Login() {
const router = useRouter(); const router = useRouter();
const [errorMessage, setErrorMessage] = useState(""); const [message, setMessage] = useState({ message: "", error: false });
const [successMessage, setSuccessMessage] = useState("");
const user = useContext(UserContext); const user = useContext(UserContext);
const [name, setName] = useState(""); const [name, setName] = useState("");
const [email, setEmail] = useState(""); const [email, setEmail] = useState("");
...@@ -35,14 +35,14 @@ export default function Login() { ...@@ -35,14 +35,14 @@ export default function Login() {
name, name,
email, email,
phone, phone,
image, photo: image,
username, username,
password, password,
}); });
if (response.data.status === 201) { if (response.data.status === 201) {
setSuccessMessage("สมัครสมาชิกสำเร็จ!"); setMessage({ message: "สมัครสมาชิกสำเร็จ!", error: false });
setTimeout(() => { setTimeout(() => {
setSuccessMessage(""); setMessage({ message: "", error: false });
}, 3000); }, 3000);
setName(""); setName("");
setEmail(""); setEmail("");
...@@ -51,14 +51,20 @@ export default function Login() { ...@@ -51,14 +51,20 @@ export default function Login() {
setUsername(""); setUsername("");
setPassword(""); setPassword("");
} else if (response.data.status === 202) { } else if (response.data.status === 202) {
setErrorMessage("ชื่อผู้ใช้งานนี้ถูกใช้แล้ว กรุณาลองใหม่อีกครั้ง"); setMessage({
message: "ชื่อผู้ใช้งานนี้ถูกใช้แล้ว กรุณาลองใหม่อีกครั้ง",
error: true,
});
setTimeout(() => { setTimeout(() => {
setErrorMessage(""); setMessage({ message: "", error: true });
}, 3000); }, 3000);
} else { } else {
setErrorMessage("ขออภัย มีบางอย่างไม่ถูกต้อง กรุณาลองใหม่อีกครั้ง"); setMessage({
message: "ขออภัย มีบางอย่างไม่ถูกต้อง กรุณาลองใหม่อีกครั้ง",
error: true,
});
setTimeout(() => { setTimeout(() => {
setErrorMessage(""); setMessage({ message: "", error: true });
}, 3000); }, 3000);
} }
} }
...@@ -69,17 +75,10 @@ export default function Login() { ...@@ -69,17 +75,10 @@ export default function Login() {
<title>สมัครสมาชิก | OpenShop</title> <title>สมัครสมาชิก | OpenShop</title>
</Head> </Head>
<Container> <Container>
<Snackbar <PopupAlert
ContentProps={{ className: "bg-red-500" }} isError={message.error}
anchorOrigin={{ horizontal: "center", vertical: "top" }} message={message.message}
open={!!errorMessage.length} open={!!message.message.length}
message={errorMessage}
/>
<Snackbar
ContentProps={{ className: "bg-green-500" }}
anchorOrigin={{ horizontal: "center", vertical: "top" }}
open={!!successMessage.length}
message={successMessage}
/> />
<Grid container> <Grid container>
<Grid item lg={3} md={0}></Grid> <Grid item lg={3} md={0}></Grid>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment