uiBugs
This commit is contained in:
parent
5eafb62f95
commit
a0e7c6ec1c
132
package-lock.json
generated
132
package-lock.json
generated
|
|
@ -38,6 +38,7 @@
|
|||
"react-scripts": "5.0.1",
|
||||
"recharts": "^2.15.1",
|
||||
"sonner": "^1.7.4",
|
||||
"styled-components": "^6.1.15",
|
||||
"web-vitals": "^4.2.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
@ -4031,6 +4032,12 @@
|
|||
"version": "2.0.3",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/stylis": {
|
||||
"version": "4.2.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz",
|
||||
"integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/trusted-types": {
|
||||
"version": "2.0.7",
|
||||
"license": "MIT"
|
||||
|
|
@ -5364,6 +5371,15 @@
|
|||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/camelize": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
|
||||
"integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/caniuse-api": {
|
||||
"version": "3.0.0",
|
||||
"license": "MIT",
|
||||
|
|
@ -5821,6 +5837,15 @@
|
|||
"postcss": "^8.4"
|
||||
}
|
||||
},
|
||||
"node_modules/css-color-keywords": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
|
||||
"integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/css-declaration-sorter": {
|
||||
"version": "6.4.1",
|
||||
"license": "ISC",
|
||||
|
|
@ -5954,6 +5979,17 @@
|
|||
"version": "0.1.1",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/css-to-react-native": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
|
||||
"integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"camelize": "^1.0.0",
|
||||
"css-color-keywords": "^1.0.0",
|
||||
"postcss-value-parser": "^4.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/css-tree": {
|
||||
"version": "1.0.0-alpha.37",
|
||||
"license": "MIT",
|
||||
|
|
@ -13806,6 +13842,12 @@
|
|||
"version": "1.2.0",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/shallowequal": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
|
||||
"integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/shebang-command": {
|
||||
"version": "2.0.0",
|
||||
"license": "MIT",
|
||||
|
|
@ -14359,6 +14401,95 @@
|
|||
"webpack": "^5.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/styled-components": {
|
||||
"version": "6.1.15",
|
||||
"resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.15.tgz",
|
||||
"integrity": "sha512-PpOTEztW87Ua2xbmLa7yssjNyUF9vE7wdldRfn1I2E6RTkqknkBYpj771OxM/xrvRGinLy2oysa7GOd7NcZZIA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@emotion/is-prop-valid": "1.2.2",
|
||||
"@emotion/unitless": "0.8.1",
|
||||
"@types/stylis": "4.2.5",
|
||||
"css-to-react-native": "3.2.0",
|
||||
"csstype": "3.1.3",
|
||||
"postcss": "8.4.49",
|
||||
"shallowequal": "1.1.0",
|
||||
"stylis": "4.3.2",
|
||||
"tslib": "2.6.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 16"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/styled-components"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">= 16.8.0",
|
||||
"react-dom": ">= 16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/styled-components/node_modules/@emotion/is-prop-valid": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
|
||||
"integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@emotion/memoize": "^0.8.1"
|
||||
}
|
||||
},
|
||||
"node_modules/styled-components/node_modules/@emotion/memoize": {
|
||||
"version": "0.8.1",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
|
||||
"integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/styled-components/node_modules/@emotion/unitless": {
|
||||
"version": "0.8.1",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
|
||||
"integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/styled-components/node_modules/postcss": {
|
||||
"version": "8.4.49",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
|
||||
"integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/postcss/"
|
||||
},
|
||||
{
|
||||
"type": "tidelift",
|
||||
"url": "https://tidelift.com/funding/github/npm/postcss"
|
||||
},
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/ai"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"nanoid": "^3.3.7",
|
||||
"picocolors": "^1.1.1",
|
||||
"source-map-js": "^1.2.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^10 || ^12 || >=14"
|
||||
}
|
||||
},
|
||||
"node_modules/styled-components/node_modules/stylis": {
|
||||
"version": "4.3.2",
|
||||
"resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz",
|
||||
"integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/styled-components/node_modules/tslib": {
|
||||
"version": "2.6.2",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
|
||||
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
|
||||
"license": "0BSD"
|
||||
},
|
||||
"node_modules/stylehacks": {
|
||||
"version": "5.1.1",
|
||||
"license": "MIT",
|
||||
|
|
@ -15041,6 +15172,7 @@
|
|||
},
|
||||
"node_modules/typescript": {
|
||||
"version": "5.7.3",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"bin": {
|
||||
"tsc": "bin/tsc",
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@
|
|||
"react-scripts": "5.0.1",
|
||||
"recharts": "^2.15.1",
|
||||
"sonner": "^1.7.4",
|
||||
"styled-components": "^6.1.15",
|
||||
"web-vitals": "^4.2.4"
|
||||
},
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,12 @@
|
|||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden; /* Prevents scrolling */
|
||||
}
|
||||
|
||||
|
||||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { BrowserRouter as Router } from "react-router-dom";
|
||||
import AppRouter from "./router";
|
||||
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Router>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,24 @@
|
|||
import React from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
|
||||
// import styled from './Loading.style';
|
||||
import { CircularProgress, Box, Typography } from '@mui/material';
|
||||
|
||||
function LoadingComponent() {
|
||||
// const { isdarktheme } = useSelector((state) => ({
|
||||
// isdarktheme: state?.authReducer?.isDarkTheme,
|
||||
// }));
|
||||
|
||||
return (<h1>Loading</h1>);
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
height: '100vh',
|
||||
width: '100%',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
<CircularProgress size={50} color="primary" />
|
||||
<Typography variant="h6" sx={{ marginTop: 2 }}>
|
||||
Loading...
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default LoadingComponent;
|
||||
export default LoadingComponent;
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import {
|
|||
Grid,
|
||||
IconButton,
|
||||
Link,
|
||||
InputAdornment
|
||||
} from "@mui/material";
|
||||
import { useForm, Controller, SubmitHandler } from "react-hook-form";
|
||||
import { useDispatch } from "react-redux";
|
||||
|
|
@ -29,7 +30,9 @@ interface ILoginForm {
|
|||
|
||||
export default function Login(props: { disableCustomTheme?: boolean }) {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const [isClicked, setIsClicked] = React.useState(false);
|
||||
const [showPassword, setShowPassword] = React.useState(false);
|
||||
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
|
|
@ -70,7 +73,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
md={7}
|
||||
sx={{
|
||||
background: `url('/mainPageLogo.png') center/cover no-repeat`,
|
||||
height: { xs: "0%", sm: "0%", md: "100%" },
|
||||
// height: { xs: "0%", sm: "50%", md: "100%" },
|
||||
backgroundSize: "cover",
|
||||
display: { xs: "none", md: "block" }, // Hide the image on xs and sm screens
|
||||
}}
|
||||
|
|
@ -78,19 +81,21 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
|
||||
{/* Form Section */}
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
md={5}
|
||||
sx={{
|
||||
backgroundColor: "black",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
flexDirection: "column",
|
||||
padding: { xs: "2rem", md: "3rem", lg: "3rem" },
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
item
|
||||
xs={12}
|
||||
md={5}
|
||||
sx={{
|
||||
backgroundColor: "black",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
flexDirection: "column",
|
||||
padding: { xs: "2rem", md: "3rem", lg: "3rem" },
|
||||
|
||||
height: "auto", // ✅ Allows the height to adjust dynamically
|
||||
}}
|
||||
>
|
||||
|
||||
<Typography
|
||||
variant="h3"
|
||||
sx={{
|
||||
|
|
@ -106,13 +111,8 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
Welcome Back!
|
||||
</Typography>
|
||||
|
||||
<Card
|
||||
variant="outlined"
|
||||
sx={{
|
||||
maxWidth: "400px",
|
||||
width: { xs: "80%", sm: "80%", md: "100%" },
|
||||
}}
|
||||
>
|
||||
<Card variant="outlined" sx={{ width: { xs: "100%", sm: "300px",lg:"408px" }, padding: "24px", borderRadius: "12px", backgroundColor: "#1E1E1E", border: "1px solid #4B5255" }}>
|
||||
|
||||
<Box
|
||||
component="form"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
|
|
@ -123,182 +123,177 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
component="h1"
|
||||
variant="h4"
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
color: "white",
|
||||
fontSize: { xs: "1.5rem", sm: "2rem" },
|
||||
}}
|
||||
>
|
||||
Login
|
||||
</Typography>
|
||||
<Typography
|
||||
component="h6"
|
||||
variant="subtitle2"
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
color: "white",
|
||||
fontSize: { xs: "0.9rem", sm: "1rem" },
|
||||
}}
|
||||
>
|
||||
Log in with your email and password
|
||||
</Typography>
|
||||
<Typography component="h1" variant="h4" sx={{ textAlign: "center", color: "white", fontFamily: "Gilroy", fontSize: "24px" }}>Login</Typography>
|
||||
<Typography
|
||||
component="h6"
|
||||
variant="subtitle2"
|
||||
sx={{ textAlign: "center", color: "white", fontFamily: "Gilroy", fontSize: "16px" }}
|
||||
>
|
||||
Log in with your email and password
|
||||
</Typography>
|
||||
|
||||
<FormControl sx={{ width: "100%" }}>
|
||||
<FormLabel
|
||||
htmlFor="email"
|
||||
sx={{
|
||||
fontSize: {
|
||||
xs: "0.9rem",
|
||||
sm: "1rem",
|
||||
},
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
Email
|
||||
</FormLabel>
|
||||
<Controller
|
||||
name="email"
|
||||
control={control}
|
||||
defaultValue=""
|
||||
rules={{
|
||||
required: "Email is required",
|
||||
pattern: {
|
||||
value: /\S+@\S+\.\S+/,
|
||||
message:
|
||||
"Please enter a valid email address.",
|
||||
},
|
||||
}}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
error={!!errors.email}
|
||||
helperText={
|
||||
errors.email?.message
|
||||
}
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
autoComplete="email"
|
||||
autoFocus
|
||||
required
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
color={
|
||||
errors.email
|
||||
? "error"
|
||||
: "primary"
|
||||
}
|
||||
sx={{
|
||||
input: {
|
||||
fontSize: {
|
||||
xs: "0.9rem",
|
||||
sm: "1rem",
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
<FormControl sx={{ width: "100%" }}>
|
||||
<FormLabel
|
||||
htmlFor="password"
|
||||
sx={{
|
||||
fontSize: {
|
||||
xs: "0.9rem",
|
||||
sm: "1rem",
|
||||
},
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
Password
|
||||
</FormLabel>
|
||||
<Controller
|
||||
name="password"
|
||||
control={control}
|
||||
defaultValue=""
|
||||
rules={{
|
||||
required: "Password is required",
|
||||
minLength: {
|
||||
value: 6,
|
||||
message:
|
||||
"Password must be at least 6 characters long.",
|
||||
},
|
||||
pattern: {
|
||||
value: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{6,}$/,
|
||||
message:
|
||||
"Password must contain at least one uppercase letter, one lowercase letter, one number, and one special character.",
|
||||
},
|
||||
}}
|
||||
render={({ field }) => (
|
||||
<Box sx={{ position: "relative" }}>
|
||||
<TextField
|
||||
{...field}
|
||||
error={!!errors.password}
|
||||
helperText={
|
||||
errors.password?.message
|
||||
}
|
||||
name="password"
|
||||
placeholder="Password"
|
||||
type={
|
||||
showPassword
|
||||
? "text"
|
||||
: "password"
|
||||
}
|
||||
id="password"
|
||||
autoComplete="current-password"
|
||||
autoFocus
|
||||
required
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
color={
|
||||
errors.password
|
||||
? "error"
|
||||
: "primary"
|
||||
}
|
||||
sx={{
|
||||
paddingRight: "40px",
|
||||
height: "40px",
|
||||
marginBottom: "8px",
|
||||
}}
|
||||
/>
|
||||
<IconButton
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
right: "10px",
|
||||
transform:
|
||||
"translateY(-50%)",
|
||||
background: "none",
|
||||
borderColor:
|
||||
"transparent",
|
||||
"&:hover": {
|
||||
backgroundColor:
|
||||
"transparent",
|
||||
borderColor:
|
||||
"transparent",
|
||||
},
|
||||
}}
|
||||
onClick={() =>
|
||||
setShowPassword(
|
||||
(prev) => !prev
|
||||
)
|
||||
}
|
||||
>
|
||||
{showPassword ? (
|
||||
<VisibilityOff />
|
||||
) : (
|
||||
<Visibility />
|
||||
)}
|
||||
</IconButton>
|
||||
</Box>
|
||||
)}
|
||||
/>
|
||||
</FormControl>
|
||||
{/* -------------------------------- Email Field ----------------- */}
|
||||
<FormControl sx={{ width: "100%" }}>
|
||||
<FormLabel
|
||||
htmlFor="email"
|
||||
sx={{
|
||||
fontSize: { xs: "0.9rem", sm: "1rem" },
|
||||
color: "white",
|
||||
fontFamily: "Gilroy, sans-serif", // ✅ Apply Gilroy font
|
||||
}}
|
||||
>
|
||||
Email
|
||||
</FormLabel>
|
||||
<Controller
|
||||
name="email"
|
||||
control={control}
|
||||
defaultValue=""
|
||||
rules={{
|
||||
required: "Email is required",
|
||||
pattern: {
|
||||
value: /\S+@\S+\.\S+/,
|
||||
message: "Please enter a valid email address.",
|
||||
},
|
||||
}}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
error={!!errors.email}
|
||||
helperText={errors.email?.message}
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
autoComplete="email"
|
||||
autoFocus
|
||||
required
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
color={errors.email ? "error" : "primary"}
|
||||
InputProps={{
|
||||
sx: {
|
||||
height: "50px",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#1E1F1F",
|
||||
fontFamily: "Gilroy, sans-serif",
|
||||
},
|
||||
}}
|
||||
sx={{
|
||||
"& .MuiOutlinedInput-root": {
|
||||
backgroundColor: "#1E1F1F",
|
||||
borderRadius: "4px",
|
||||
"& fieldset": { borderColor: "#4b5255" },
|
||||
"&:hover fieldset": { borderColor: "#4b5255" },
|
||||
"&.Mui-focused fieldset": { borderColor: "#4b5255" },
|
||||
},
|
||||
"& input": {
|
||||
color: "white",
|
||||
fontSize: { xs: "0.9rem", sm: "1rem" },
|
||||
fontFamily: "Gilroy, sans-serif",
|
||||
},
|
||||
"& .MuiInputBase-input::placeholder": {
|
||||
color: "white",
|
||||
opacity: 1,
|
||||
fontFamily: "Gilroy, sans-serif",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
|
||||
{/* -------------------------------- Password Field ----------------- */}
|
||||
<FormControl sx={{ width: "100%" }}>
|
||||
<FormLabel
|
||||
htmlFor="password"
|
||||
sx={{
|
||||
fontSize: { xs: "0.9rem", sm: "1rem" },
|
||||
color: "white",
|
||||
fontFamily: "Gilroy, sans-serif",
|
||||
}}
|
||||
>
|
||||
Password
|
||||
</FormLabel>
|
||||
<Controller
|
||||
name="password"
|
||||
control={control}
|
||||
defaultValue=""
|
||||
rules={{
|
||||
required: "Password is required",
|
||||
minLength: {
|
||||
value: 6,
|
||||
message: "Password must be at least 6 characters long.",
|
||||
},
|
||||
pattern: {
|
||||
value:
|
||||
/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{6,}$/,
|
||||
message:
|
||||
"Password must contain at least one uppercase letter, one lowercase letter, one number, and one special character.",
|
||||
},
|
||||
}}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
error={!!errors.password}
|
||||
helperText={errors.password?.message}
|
||||
name="password"
|
||||
placeholder="Password"
|
||||
type={showPassword ? "text" : "password"}
|
||||
id="password"
|
||||
autoComplete="current-password"
|
||||
required
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
color={errors.password ? "error" : "primary"}
|
||||
InputProps={{
|
||||
sx: {
|
||||
height: "50px",
|
||||
fontFamily: "Gilroy, sans-serif", // Apply Gilroy font
|
||||
},
|
||||
endAdornment: (
|
||||
<IconButton
|
||||
onClick={() => setShowPassword((prev) => !prev)}
|
||||
edge="end"
|
||||
sx={{
|
||||
color: "white",
|
||||
padding: 0,
|
||||
margin: 0,
|
||||
backgroundColor: "transparent",
|
||||
border: "none",
|
||||
boxShadow: "none",
|
||||
"&:hover": { backgroundColor: "transparent" },
|
||||
"&:focus": { outline: "none", border: "none" },
|
||||
}}
|
||||
>
|
||||
{showPassword ? <VisibilityOff /> : <Visibility />}
|
||||
</IconButton>
|
||||
),
|
||||
}}
|
||||
sx={{
|
||||
"& .MuiOutlinedInput-root": {
|
||||
backgroundColor: "#1E1F1F",
|
||||
borderRadius: "4px",
|
||||
"& fieldset": { borderColor: "#4b5255" },
|
||||
"&:hover fieldset": { borderColor: "#4b5255" },
|
||||
"&.Mui-focused fieldset": { borderColor: "#4b5255" },
|
||||
},
|
||||
"& input": {
|
||||
color: "white",
|
||||
fontSize: { xs: "0.9rem", sm: "1rem" },
|
||||
fontFamily: "Gilroy, sans-serif",
|
||||
},
|
||||
"& .MuiInputBase-input::placeholder": {
|
||||
color: "white",
|
||||
opacity: 1,
|
||||
fontFamily: "Gilroy, sans-serif",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
|
|
@ -309,27 +304,50 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
value="remember"
|
||||
color="primary"
|
||||
/>
|
||||
}
|
||||
label="Remember me"
|
||||
/>
|
||||
<Link
|
||||
component="button"
|
||||
type="button"
|
||||
onClick={handleClickOpen}
|
||||
variant="body2"
|
||||
sx={{
|
||||
alignSelf: "center",
|
||||
color: "#01579b",
|
||||
}}
|
||||
>
|
||||
Forgot password?
|
||||
</Link>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
value="remember"
|
||||
sx={{
|
||||
width: 20,
|
||||
height: 20,
|
||||
fontFamily: "Gilroy, sans-serif",
|
||||
border: "2px solid #4b5255",
|
||||
borderRadius: "4px",
|
||||
backgroundColor: "transparent",
|
||||
"&:hover": {
|
||||
backgroundColor: "transparent",
|
||||
},
|
||||
"&.Mui-checked": {
|
||||
backgroundColor: "transparent",
|
||||
borderColor: "#4b5255",
|
||||
"&:hover": {
|
||||
backgroundColor: "transparent",
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
}
|
||||
label="Remember me"
|
||||
/>
|
||||
|
||||
<Link
|
||||
component="button"
|
||||
type="button"
|
||||
onClick={handleClickOpen}
|
||||
variant="body2"
|
||||
sx={{
|
||||
alignSelf: "center",
|
||||
fontFamily: "Gilroy, sans-serif",
|
||||
color: "#01579b",
|
||||
textDecoration: "none", // ✅ Removes underline
|
||||
|
||||
}}
|
||||
>
|
||||
Forgot password?
|
||||
</Link>
|
||||
|
||||
</Box>
|
||||
<ForgotPassword
|
||||
open={open}
|
||||
|
|
@ -341,6 +359,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
disabled={!isValid}
|
||||
sx={{
|
||||
color: "white",
|
||||
fontFamily: "Gilroy, sans-serif",
|
||||
backgroundColor: "#52ACDF",
|
||||
"&:hover": {
|
||||
backgroundColor: "#52ACDF",
|
||||
|
|
|
|||
Loading…
Reference in a new issue