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) {
{
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>
),
......
......@@ -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"
/>
......
......@@ -9,11 +9,11 @@ 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("");
......@@ -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>
......
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";
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>
......
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