Commit e9c70125 authored by Nawasan Wisitsingkhon's avatar Nawasan Wisitsingkhon

update register ui

parent d45ea414
import { Box, Button, Grid, TextField } from "@mui/material";
import { Box, Button, Divider, Grid, TextField } from "@mui/material";
import { Snackbar } from "@mui/material";
import React from "react";
import { useContext } from "react";
import { UserContext } from "./_app";
import { Container } from "@mui/material";
import { Google } from "@mui/icons-material";
import { useState } from "react";
export default function Login() {
const [errorMessage, setErrorMessage] = useState("");
const [successMessage, setSuccessMessage] = useState("");
const user = useContext(UserContext);
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [phone, setPhone] = useState("");
const [image, setImage] = useState("");
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
if (user.value?.name)
return (
......@@ -13,33 +24,105 @@ export default function Login() {
<h3>{user.value.name}</h3>
</div>
);
// name,
// email,
// phone,
// photo,
// username,
// password,
// rank: false,
// google_token: google_token ?? "",
/**
*
* @param {FormDataEvent} e
*/
function onSubmitForm(e) {
e.preventDefault()
alert("form submit")
}
return (
<div >
<div>
<Container>
<Snackbar
ContentProps={{ className: "bg-red-500" }}
anchorOrigin={{ horizontal: "center", vertical: "top" }}
open={errorMessage}
message={errorMessage.length}
/>
<Snackbar
ContentProps={{ className: "bg-green-500" }}
anchorOrigin={{ horizontal: "center", vertical: "top" }}
open={successMessage.length}
message={successMessage}
/>
<Grid container>
<Grid item lg={3} md={0}></Grid>
<Grid item lg={6} md={12}>
<form action={"#"} className="border border-red-500 bg-white py-3 text-center rounded-lg">
<Box component={"h3"} className="text-gray-700">สมัครสมาชิก</Box>
<TextField label="ชื่อ - นามสกุล" variant="standard" className="mx-3 my-1" />
<TextField label="อีเมล" variant="standard" className="mx-3 my-1" />
<TextField label="เบอร์โทร" type="tel" variant="standard" className="mx-3 my-1" />
<TextField label="รูปภาพ" helperText={"https://someweb.com/image.jpg"} variant="standard" className="mx-3 my-1" />
<TextField label="username" variant="standard" className="mx-3 my-1" />
<TextField label="password" type="password" variant="standard" className="mx-3 my-1" />
<div className="border border-red-500 bg-white py-3 text-center rounded-lg">
<form onSubmit={onSubmitForm} className="">
<Box component={"h2"} className="text-gray-700">
สมัครสมาชิก
</Box>
<TextField
label="ชื่อ - นามสกุล"
variant="standard"
className="mx-3 my-1"
value={name}
onChange={(e) => setName(e.target.value)}
required
/>
<TextField
label="อีเมล"
variant="standard"
className="mx-3 my-1"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
<TextField
label="เบอร์โทร"
helperText="0989999999"
type="tel"
variant="standard"
className="mx-3 my-1"
value={phone}
onChange={(e) => setPhone(e.target.value)}
required
/>
<TextField
label="รูปโปรไฟล์"
helperText={"https://someweb.com/image.jpg"}
variant="standard"
className="mx-3 my-1"
value={image}
onChange={(e) => setImage(e.target.value)}
/>
<TextField
label="username"
variant="standard"
className="mx-3 my-1"
value={username}
onChange={(e) => setUsername(e.target.value)}
required
/>
<TextField
label="password"
type="password"
variant="standard"
className="mx-3 my-1"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<div className="text-right px-10 sm:px-16">
<Button className="my-5 text-lg" variant="contained" type="submit">สมัคร</Button>
<Button
className="my-5 text-lg"
variant="contained"
type="submit"
>
สมัคร
</Button>
</div>
</form>
<Divider />
<Box component={"h4"}>หรือสมัครด้วยบัญชี google</Box>
<button className="bg-white rounded-full border-none hover:shadow-md shadow-gray-400 duration-300 hover:-translate-y-1">
<Google fontSize="large" />
</button>
</div>
</Grid>
<Grid item lg={3} md={0}></Grid>
</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