mirror of
https://github.com/lemeow125/Borrowing-TrackerFrontend.git
synced 2024-11-17 06:19:27 +08:00
si register modal sab, scrollable and noyys kaayo iyang scroll bar.
This commit is contained in:
Pongot, Jophiel
parent
d08b43b3ad
commit
8a53d12c8a
3 changed files with 273 additions and 207 deletions
|
|
@ -7,7 +7,6 @@ import IconButton from "@mui/material/IconButton";
|
||||||
import Visibility from "@mui/icons-material/Visibility";
|
import Visibility from "@mui/icons-material/Visibility";
|
||||||
import VisibilityOff from "@mui/icons-material/VisibilityOff";
|
import VisibilityOff from "@mui/icons-material/VisibilityOff";
|
||||||
import Checkbox from "@mui/material/Checkbox";
|
import Checkbox from "@mui/material/Checkbox";
|
||||||
import Button from "../Button/Button";
|
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
import { LoginAPI } from "../API/API";
|
import { LoginAPI } from "../API/API";
|
||||||
import { useDispatch } from "react-redux";
|
import { useDispatch } from "react-redux";
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,11 @@
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import styles from "../../styles";
|
import styles, { colors } from "../../styles";
|
||||||
import { colors } from "../../styles";
|
|
||||||
import TextField from "@mui/material/TextField";
|
import TextField from "@mui/material/TextField";
|
||||||
import InputAdornment from "@mui/material/InputAdornment";
|
import InputAdornment from "@mui/material/InputAdornment";
|
||||||
import IconButton from "@mui/material/IconButton";
|
import IconButton from "@mui/material/IconButton";
|
||||||
import Visibility from "@mui/icons-material/Visibility";
|
import Visibility from "@mui/icons-material/Visibility";
|
||||||
import VisibilityOff from "@mui/icons-material/VisibilityOff";
|
import VisibilityOff from "@mui/icons-material/VisibilityOff";
|
||||||
import { AppRegistration } from "@mui/icons-material";
|
import Logo_dako from "../../assets/Logo_dako.png";
|
||||||
import Button from "../Button/Button";
|
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
import { RegisterAPI } from "../API/API";
|
import { RegisterAPI } from "../API/API";
|
||||||
import { toast } from "react-toastify";
|
import { toast } from "react-toastify";
|
||||||
|
|
@ -34,216 +32,263 @@ export default function RegisterModal() {
|
||||||
const [error, setError] = useState("");
|
const [error, setError] = useState("");
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div
|
<div className="custom-scrollbar">
|
||||||
style={{
|
<div
|
||||||
...styles.flex_row,
|
|
||||||
...{
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "center",
|
|
||||||
overflowY: "scroll",
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<AppRegistration
|
|
||||||
style={{
|
style={{
|
||||||
height: 64,
|
...styles.flex_column,
|
||||||
width: 64,
|
...{
|
||||||
fill: colors.font_dark,
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
overflow: "auto",
|
||||||
|
scrollbarWidth: "thin",
|
||||||
|
WebkitOverflowScrolling: "touch",
|
||||||
|
},
|
||||||
}}
|
}}
|
||||||
/>
|
>
|
||||||
<p style={{ ...styles.text_dark, ...styles.text_L }}>Get Started</p>
|
<img
|
||||||
</div>
|
style={{ width: "10rem", height: "auto", alignSelf: "center" }}
|
||||||
|
src={Logo_dako}
|
||||||
|
/>
|
||||||
|
|
||||||
<div style={styles.flex_column}>
|
<p
|
||||||
<TextField
|
style={{
|
||||||
id="outlined-helperText"
|
...styles.text_normal,
|
||||||
label="First Name"
|
fontSize: 24,
|
||||||
style={styles.input_form}
|
margin: "0",
|
||||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
marginTop: 15,
|
||||||
setUser({ ...user, first_name: e.target.value });
|
|
||||||
setError("");
|
|
||||||
}}
|
|
||||||
value={user.first_name}
|
|
||||||
placeholder={"Enter your first name"}
|
|
||||||
/>
|
|
||||||
<TextField
|
|
||||||
id="outlined-helperText"
|
|
||||||
label="Last Name"
|
|
||||||
style={styles.input_form}
|
|
||||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
|
|
||||||
setUser({ ...user, last_name: e.target.value })
|
|
||||||
}
|
|
||||||
value={user.last_name}
|
|
||||||
placeholder={"Enter your last name"}
|
|
||||||
/>
|
|
||||||
<TextField
|
|
||||||
id="outlined-helperText"
|
|
||||||
label="Email"
|
|
||||||
style={styles.input_form}
|
|
||||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
|
|
||||||
setUser({ ...user, email: e.target.value })
|
|
||||||
}
|
|
||||||
value={user.email}
|
|
||||||
placeholder={"Enter your email"}
|
|
||||||
/>
|
|
||||||
<FormControl style={{ marginTop: "8px" }}>
|
|
||||||
<FormLabel style={styles.text_dark} id="status-selection">
|
|
||||||
Course
|
|
||||||
</FormLabel>
|
|
||||||
<RadioGroup
|
|
||||||
aria-labelledby="demo-radio-buttons-group-label"
|
|
||||||
value={user.course}
|
|
||||||
defaultValue="BS Chemistry"
|
|
||||||
name="radio-buttons-group"
|
|
||||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
setUser({ ...user, course: e.target.value });
|
|
||||||
setError("");
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div
|
Create an Account
|
||||||
style={{
|
</p>
|
||||||
...styles.flex_column,
|
<p style={{ ...styles.text_normal, fontSize: 16, margin: "10" }}>
|
||||||
...{ overflowY: "scroll", maxHeight: "72px" },
|
Enter required fields
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ flex: 1, backgroundColor: "pink", margin: "10px" }}>
|
||||||
|
<p
|
||||||
|
style={{
|
||||||
|
...styles.text_dark_red,
|
||||||
|
...styles.text_S,
|
||||||
|
flex: 1,
|
||||||
|
textAlign: "left",
|
||||||
|
marginLeft: 15,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{error}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
...styles.flex_column,
|
||||||
|
marginTop: 30,
|
||||||
|
marginBottom: 55,
|
||||||
|
marginInline: 10,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<TextField
|
||||||
|
id="outlined-helperText"
|
||||||
|
label="First Name"
|
||||||
|
style={styles.input_form}
|
||||||
|
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
setUser({ ...user, first_name: e.target.value });
|
||||||
|
setError("");
|
||||||
|
}}
|
||||||
|
value={user.first_name}
|
||||||
|
placeholder={"Enter your first name"}
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
id="outlined-helperText"
|
||||||
|
label="Last Name"
|
||||||
|
style={styles.input_form}
|
||||||
|
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
|
||||||
|
setUser({ ...user, last_name: e.target.value })
|
||||||
|
}
|
||||||
|
value={user.last_name}
|
||||||
|
placeholder={"Enter your last name"}
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
id="outlined-helperText"
|
||||||
|
label="Email"
|
||||||
|
style={styles.input_form}
|
||||||
|
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
|
||||||
|
setUser({ ...user, email: e.target.value })
|
||||||
|
}
|
||||||
|
value={user.email}
|
||||||
|
placeholder={"Enter your email"}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormControl style={{ marginTop: "8px" }}>
|
||||||
|
<FormLabel style={styles.text_dark} id="status-selection">
|
||||||
|
Course
|
||||||
|
</FormLabel>
|
||||||
|
<RadioGroup
|
||||||
|
aria-labelledby="demo-radio-buttons-group-label"
|
||||||
|
value={user.course}
|
||||||
|
defaultValue="BS Chemistry"
|
||||||
|
name="radio-buttons-group"
|
||||||
|
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
setUser({ ...user, course: e.target.value });
|
||||||
|
setError("");
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<FormControlLabel
|
<div
|
||||||
value="BS Chemistry"
|
style={{
|
||||||
control={<Radio />}
|
...styles.flex_column,
|
||||||
label="BS Chemistry"
|
...{ overflowY: "scroll", maxHeight: "72px" },
|
||||||
style={styles.text_dark}
|
}}
|
||||||
/>
|
>
|
||||||
<FormControlLabel
|
<FormControlLabel
|
||||||
value="BS Food Technology"
|
value="BS Chemistry"
|
||||||
control={<Radio />}
|
control={<Radio />}
|
||||||
label="BS Food Technology"
|
label="BS Chemistry"
|
||||||
style={styles.text_dark}
|
style={styles.text_dark}
|
||||||
/>
|
/>
|
||||||
<FormControlLabel
|
<FormControlLabel
|
||||||
value="BS Applied Physics"
|
value="BS Food Technology"
|
||||||
control={<Radio />}
|
control={<Radio />}
|
||||||
label="BS Applied Physics"
|
label="BS Food Technology"
|
||||||
style={styles.text_dark}
|
style={styles.text_dark}
|
||||||
/>
|
/>
|
||||||
<FormControlLabel
|
<FormControlLabel
|
||||||
value="BS Environmental Science"
|
value="BS Applied Physics"
|
||||||
control={<Radio />}
|
control={<Radio />}
|
||||||
label="BS Environmental Science"
|
label="BS Applied Physics"
|
||||||
style={styles.text_dark}
|
style={styles.text_dark}
|
||||||
/>
|
/>
|
||||||
</div>
|
<FormControlLabel
|
||||||
</RadioGroup>
|
value="BS Environmental Science"
|
||||||
</FormControl>
|
control={<Radio />}
|
||||||
<TextField
|
label="BS Environmental Science"
|
||||||
id="outlined-helperText"
|
style={styles.text_dark}
|
||||||
label="Username"
|
/>
|
||||||
style={styles.input_form}
|
</div>
|
||||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
</RadioGroup>
|
||||||
setUser({ ...user, username: e.target.value });
|
</FormControl>
|
||||||
setError("");
|
<TextField
|
||||||
}}
|
id="outlined-helperText"
|
||||||
value={user.username}
|
label="Username"
|
||||||
placeholder={"Enter username"}
|
style={styles.input_form}
|
||||||
/>
|
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
<TextField
|
setUser({ ...user, username: e.target.value });
|
||||||
id="outlined-helperText"
|
setError("");
|
||||||
type={showPassword ? "text" : "password"}
|
}}
|
||||||
style={styles.input_form}
|
value={user.username}
|
||||||
InputProps={{
|
placeholder={"Enter username"}
|
||||||
endAdornment: (
|
/>
|
||||||
<InputAdornment position="end">
|
<TextField
|
||||||
<IconButton
|
id="outlined-helperText"
|
||||||
aria-label="toggle password visibility"
|
type={showPassword ? "text" : "password"}
|
||||||
onClick={() => setShowPassword(!showPassword)}
|
style={styles.input_form}
|
||||||
edge="end"
|
InputProps={{
|
||||||
>
|
endAdornment: (
|
||||||
{showPassword ? <VisibilityOff /> : <Visibility />}
|
<InputAdornment position="end">
|
||||||
</IconButton>
|
<IconButton
|
||||||
</InputAdornment>
|
aria-label="toggle password visibility"
|
||||||
),
|
onClick={() => setShowPassword(!showPassword)}
|
||||||
}}
|
edge="end"
|
||||||
label="Password"
|
>
|
||||||
placeholder={"Enter password"}
|
{showPassword ? <VisibilityOff /> : <Visibility />}
|
||||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
|
</IconButton>
|
||||||
setUser({ ...user, password: e.target.value })
|
</InputAdornment>
|
||||||
}
|
),
|
||||||
value={user.password}
|
}}
|
||||||
/>
|
label="Password"
|
||||||
<TextField
|
placeholder={"Enter password"}
|
||||||
id="outlined-helperText"
|
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
|
||||||
type={showPassword ? "text" : "password"}
|
setUser({ ...user, password: e.target.value })
|
||||||
style={styles.input_form}
|
|
||||||
InputProps={{
|
|
||||||
endAdornment: (
|
|
||||||
<InputAdornment position="end">
|
|
||||||
<IconButton
|
|
||||||
aria-label="toggle password visibility"
|
|
||||||
onClick={() => setShowPassword(!showPassword)}
|
|
||||||
edge="end"
|
|
||||||
>
|
|
||||||
{showPassword ? <VisibilityOff /> : <Visibility />}
|
|
||||||
</IconButton>
|
|
||||||
</InputAdornment>
|
|
||||||
),
|
|
||||||
}}
|
|
||||||
label="Confirm Password"
|
|
||||||
placeholder={"Re-enter password"}
|
|
||||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
setUser({ ...user, confirm_password: e.target.value });
|
|
||||||
setError("");
|
|
||||||
}}
|
|
||||||
value={user.confirm_password}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<p style={{ ...styles.text_dark, ...styles.text_M }}>{error}</p>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
backgroundColor: colors.button_border,
|
|
||||||
marginTop: "16px",
|
|
||||||
width: "100%",
|
|
||||||
height: "2px",
|
|
||||||
marginBottom: 8,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
type={"dark"}
|
|
||||||
label={"Register"}
|
|
||||||
onClick={async () => {
|
|
||||||
if (user.password !== user.confirm_password) {
|
|
||||||
setError("Passwords do not match");
|
|
||||||
} else {
|
|
||||||
const status = await RegisterAPI(user);
|
|
||||||
if (status[0]) {
|
|
||||||
setError(
|
|
||||||
"Registration successful. Please activate your account using the email provided"
|
|
||||||
);
|
|
||||||
toast("Registration successful", {
|
|
||||||
position: "top-right",
|
|
||||||
autoClose: 2000,
|
|
||||||
hideProgressBar: false,
|
|
||||||
closeOnClick: true,
|
|
||||||
pauseOnHover: true,
|
|
||||||
draggable: true,
|
|
||||||
progress: undefined,
|
|
||||||
theme: "light",
|
|
||||||
});
|
|
||||||
setTimeout(() => {
|
|
||||||
navigate(0);
|
|
||||||
}, 3000);
|
|
||||||
setUser({
|
|
||||||
first_name: "",
|
|
||||||
last_name: "",
|
|
||||||
username: "",
|
|
||||||
email: "",
|
|
||||||
password: "",
|
|
||||||
confirm_password: "",
|
|
||||||
course: "",
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
setError(JSON.stringify(status[1]));
|
|
||||||
}
|
}
|
||||||
}
|
value={user.password}
|
||||||
}}
|
/>
|
||||||
/>
|
<TextField
|
||||||
|
id="outlined-helperText"
|
||||||
|
type={showPassword ? "text" : "password"}
|
||||||
|
style={styles.input_form}
|
||||||
|
InputProps={{
|
||||||
|
endAdornment: (
|
||||||
|
<InputAdornment position="end">
|
||||||
|
<IconButton
|
||||||
|
aria-label="toggle password visibility"
|
||||||
|
onClick={() => setShowPassword(!showPassword)}
|
||||||
|
edge="end"
|
||||||
|
>
|
||||||
|
{showPassword ? <VisibilityOff /> : <Visibility />}
|
||||||
|
</IconButton>
|
||||||
|
</InputAdornment>
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
label="Confirm Password"
|
||||||
|
placeholder={"Re-enter password"}
|
||||||
|
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
setUser({ ...user, confirm_password: e.target.value });
|
||||||
|
setError("");
|
||||||
|
}}
|
||||||
|
value={user.confirm_password}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
backgroundColor: colors.button_border,
|
||||||
|
height: "2px",
|
||||||
|
margin: "20px",
|
||||||
|
marginBottom: "40px",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div style={{ margin: "10px" }}>
|
||||||
|
<button
|
||||||
|
onClick={async () => {
|
||||||
|
if (user.password !== user.confirm_password) {
|
||||||
|
setError("Passwords do not match");
|
||||||
|
} else {
|
||||||
|
const status = await RegisterAPI(user);
|
||||||
|
if (status[0]) {
|
||||||
|
setError(
|
||||||
|
"Registration successful. Please activate your account using the email provided"
|
||||||
|
);
|
||||||
|
toast("Registration successful", {
|
||||||
|
position: "top-right",
|
||||||
|
autoClose: 2000,
|
||||||
|
hideProgressBar: false,
|
||||||
|
closeOnClick: true,
|
||||||
|
pauseOnHover: true,
|
||||||
|
draggable: true,
|
||||||
|
progress: undefined,
|
||||||
|
theme: "light",
|
||||||
|
});
|
||||||
|
setTimeout(() => {
|
||||||
|
navigate(0);
|
||||||
|
}, 3000);
|
||||||
|
setUser({
|
||||||
|
first_name: "",
|
||||||
|
last_name: "",
|
||||||
|
username: "",
|
||||||
|
email: "",
|
||||||
|
password: "",
|
||||||
|
confirm_password: "",
|
||||||
|
course: "",
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
setError(JSON.stringify(status[1]));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
padding: "25px 38px",
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
background: "#FBB217",
|
||||||
|
height: "40px",
|
||||||
|
width: "100%",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Register
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -82,3 +82,25 @@ button:focus-visible {
|
||||||
background-color: #f9f9f9;
|
background-color: #f9f9f9;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.custom-scrollbar {
|
||||||
|
overflow-y: scroll;
|
||||||
|
max-height: 800px;
|
||||||
|
scrollbar-width: thin; /* For Firefox */
|
||||||
|
-webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS */
|
||||||
|
-ms-overflow-style: none; /* For IE */
|
||||||
|
scrollbar-color: transparent transparent; /* For WebKit */
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-scrollbar::-webkit-scrollbar {
|
||||||
|
width: 6px; /* Adjust the width as needed */
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||||
|
background-color: #c4c4c4; /* Color of the thumb */
|
||||||
|
border-radius: 3px; /* Rounded corners of the thumb */
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-track {
|
||||||
|
background-color: #f0f0f0; /* Color of the track */
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue