dev-jaanvi #1
132
package-lock.json
generated
132
package-lock.json
generated
|
|
@ -38,6 +38,7 @@
|
||||||
"react-scripts": "5.0.1",
|
"react-scripts": "5.0.1",
|
||||||
"recharts": "^2.15.1",
|
"recharts": "^2.15.1",
|
||||||
"sonner": "^1.7.4",
|
"sonner": "^1.7.4",
|
||||||
|
"styled-components": "^6.1.15",
|
||||||
"web-vitals": "^4.2.4"
|
"web-vitals": "^4.2.4"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|
@ -4031,6 +4032,12 @@
|
||||||
"version": "2.0.3",
|
"version": "2.0.3",
|
||||||
"license": "MIT"
|
"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": {
|
"node_modules/@types/trusted-types": {
|
||||||
"version": "2.0.7",
|
"version": "2.0.7",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
|
|
@ -5364,6 +5371,15 @@
|
||||||
"node": ">= 6"
|
"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": {
|
"node_modules/caniuse-api": {
|
||||||
"version": "3.0.0",
|
"version": "3.0.0",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
|
@ -5821,6 +5837,15 @@
|
||||||
"postcss": "^8.4"
|
"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": {
|
"node_modules/css-declaration-sorter": {
|
||||||
"version": "6.4.1",
|
"version": "6.4.1",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
|
|
@ -5954,6 +5979,17 @@
|
||||||
"version": "0.1.1",
|
"version": "0.1.1",
|
||||||
"license": "MIT"
|
"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": {
|
"node_modules/css-tree": {
|
||||||
"version": "1.0.0-alpha.37",
|
"version": "1.0.0-alpha.37",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
|
@ -13806,6 +13842,12 @@
|
||||||
"version": "1.2.0",
|
"version": "1.2.0",
|
||||||
"license": "ISC"
|
"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": {
|
"node_modules/shebang-command": {
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
|
@ -14359,6 +14401,95 @@
|
||||||
"webpack": "^5.0.0"
|
"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": {
|
"node_modules/stylehacks": {
|
||||||
"version": "5.1.1",
|
"version": "5.1.1",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
|
@ -15041,6 +15172,7 @@
|
||||||
},
|
},
|
||||||
"node_modules/typescript": {
|
"node_modules/typescript": {
|
||||||
"version": "5.7.3",
|
"version": "5.7.3",
|
||||||
|
"dev": true,
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"bin": {
|
"bin": {
|
||||||
"tsc": "bin/tsc",
|
"tsc": "bin/tsc",
|
||||||
|
|
|
||||||
|
|
@ -33,6 +33,7 @@
|
||||||
"react-scripts": "5.0.1",
|
"react-scripts": "5.0.1",
|
||||||
"recharts": "^2.15.1",
|
"recharts": "^2.15.1",
|
||||||
"sonner": "^1.7.4",
|
"sonner": "^1.7.4",
|
||||||
|
"styled-components": "^6.1.15",
|
||||||
"web-vitals": "^4.2.4"
|
"web-vitals": "^4.2.4"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,12 @@
|
||||||
|
html, body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden; /* Prevents scrolling */
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.App {
|
.App {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
import { BrowserRouter as Router } from "react-router-dom";
|
import { BrowserRouter as Router } from "react-router-dom";
|
||||||
import AppRouter from "./router";
|
import AppRouter from "./router";
|
||||||
|
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
<Router>
|
<Router>
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,24 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { useSelector } from 'react-redux';
|
import { CircularProgress, Box, Typography } from '@mui/material';
|
||||||
|
|
||||||
// import styled from './Loading.style';
|
|
||||||
|
|
||||||
function LoadingComponent() {
|
function LoadingComponent() {
|
||||||
// const { isdarktheme } = useSelector((state) => ({
|
return (
|
||||||
// isdarktheme: state?.authReducer?.isDarkTheme,
|
<Box
|
||||||
// }));
|
sx={{
|
||||||
|
display: 'flex',
|
||||||
return (<h1>Loading</h1>);
|
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,
|
Grid,
|
||||||
IconButton,
|
IconButton,
|
||||||
Link,
|
Link,
|
||||||
|
InputAdornment
|
||||||
} from "@mui/material";
|
} from "@mui/material";
|
||||||
import { useForm, Controller, SubmitHandler } from "react-hook-form";
|
import { useForm, Controller, SubmitHandler } from "react-hook-form";
|
||||||
import { useDispatch } from "react-redux";
|
import { useDispatch } from "react-redux";
|
||||||
|
|
@ -29,7 +30,9 @@ interface ILoginForm {
|
||||||
|
|
||||||
export default function Login(props: { disableCustomTheme?: boolean }) {
|
export default function Login(props: { disableCustomTheme?: boolean }) {
|
||||||
const [open, setOpen] = React.useState(false);
|
const [open, setOpen] = React.useState(false);
|
||||||
|
const [isClicked, setIsClicked] = React.useState(false);
|
||||||
const [showPassword, setShowPassword] = React.useState(false);
|
const [showPassword, setShowPassword] = React.useState(false);
|
||||||
|
|
||||||
const {
|
const {
|
||||||
control,
|
control,
|
||||||
handleSubmit,
|
handleSubmit,
|
||||||
|
|
@ -70,7 +73,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
||||||
md={7}
|
md={7}
|
||||||
sx={{
|
sx={{
|
||||||
background: `url('/mainPageLogo.png') center/cover no-repeat`,
|
background: `url('/mainPageLogo.png') center/cover no-repeat`,
|
||||||
height: { xs: "0%", sm: "0%", md: "100%" },
|
// height: { xs: "0%", sm: "50%", md: "100%" },
|
||||||
backgroundSize: "cover",
|
backgroundSize: "cover",
|
||||||
display: { xs: "none", md: "block" }, // Hide the image on xs and sm screens
|
display: { xs: "none", md: "block" }, // Hide the image on xs and sm screens
|
||||||
}}
|
}}
|
||||||
|
|
@ -88,9 +91,11 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
padding: { xs: "2rem", md: "3rem", lg: "3rem" },
|
padding: { xs: "2rem", md: "3rem", lg: "3rem" },
|
||||||
height: "100%",
|
|
||||||
|
height: "auto", // ✅ Allows the height to adjust dynamically
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
|
||||||
<Typography
|
<Typography
|
||||||
variant="h3"
|
variant="h3"
|
||||||
sx={{
|
sx={{
|
||||||
|
|
@ -106,13 +111,8 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
||||||
Welcome Back!
|
Welcome Back!
|
||||||
</Typography>
|
</Typography>
|
||||||
|
|
||||||
<Card
|
<Card variant="outlined" sx={{ width: { xs: "100%", sm: "300px",lg:"408px" }, padding: "24px", borderRadius: "12px", backgroundColor: "#1E1E1E", border: "1px solid #4B5255" }}>
|
||||||
variant="outlined"
|
|
||||||
sx={{
|
|
||||||
maxWidth: "400px",
|
|
||||||
width: { xs: "80%", sm: "80%", md: "100%" },
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Box
|
<Box
|
||||||
component="form"
|
component="form"
|
||||||
onSubmit={handleSubmit(onSubmit)}
|
onSubmit={handleSubmit(onSubmit)}
|
||||||
|
|
@ -123,38 +123,24 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
||||||
gap: 2,
|
gap: 2,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Typography
|
<Typography component="h1" variant="h4" sx={{ textAlign: "center", color: "white", fontFamily: "Gilroy", fontSize: "24px" }}>Login</Typography>
|
||||||
component="h1"
|
|
||||||
variant="h4"
|
|
||||||
sx={{
|
|
||||||
textAlign: "center",
|
|
||||||
color: "white",
|
|
||||||
fontSize: { xs: "1.5rem", sm: "2rem" },
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Login
|
|
||||||
</Typography>
|
|
||||||
<Typography
|
<Typography
|
||||||
component="h6"
|
component="h6"
|
||||||
variant="subtitle2"
|
variant="subtitle2"
|
||||||
sx={{
|
sx={{ textAlign: "center", color: "white", fontFamily: "Gilroy", fontSize: "16px" }}
|
||||||
textAlign: "center",
|
|
||||||
color: "white",
|
|
||||||
fontSize: { xs: "0.9rem", sm: "1rem" },
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
Log in with your email and password
|
Log in with your email and password
|
||||||
</Typography>
|
</Typography>
|
||||||
|
|
||||||
|
|
||||||
|
{/* -------------------------------- Email Field ----------------- */}
|
||||||
<FormControl sx={{ width: "100%" }}>
|
<FormControl sx={{ width: "100%" }}>
|
||||||
<FormLabel
|
<FormLabel
|
||||||
htmlFor="email"
|
htmlFor="email"
|
||||||
sx={{
|
sx={{
|
||||||
fontSize: {
|
fontSize: { xs: "0.9rem", sm: "1rem" },
|
||||||
xs: "0.9rem",
|
|
||||||
sm: "1rem",
|
|
||||||
},
|
|
||||||
color: "white",
|
color: "white",
|
||||||
|
fontFamily: "Gilroy, sans-serif", // ✅ Apply Gilroy font
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Email
|
Email
|
||||||
|
|
@ -167,17 +153,14 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
||||||
required: "Email is required",
|
required: "Email is required",
|
||||||
pattern: {
|
pattern: {
|
||||||
value: /\S+@\S+\.\S+/,
|
value: /\S+@\S+\.\S+/,
|
||||||
message:
|
message: "Please enter a valid email address.",
|
||||||
"Please enter a valid email address.",
|
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<TextField
|
<TextField
|
||||||
{...field}
|
{...field}
|
||||||
error={!!errors.email}
|
error={!!errors.email}
|
||||||
helperText={
|
helperText={errors.email?.message}
|
||||||
errors.email?.message
|
|
||||||
}
|
|
||||||
id="email"
|
id="email"
|
||||||
type="email"
|
type="email"
|
||||||
placeholder="Email"
|
placeholder="Email"
|
||||||
|
|
@ -186,17 +169,32 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
||||||
required
|
required
|
||||||
fullWidth
|
fullWidth
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
color={
|
color={errors.email ? "error" : "primary"}
|
||||||
errors.email
|
InputProps={{
|
||||||
? "error"
|
sx: {
|
||||||
: "primary"
|
height: "50px",
|
||||||
}
|
alignItems: "center",
|
||||||
sx={{
|
backgroundColor: "#1E1F1F",
|
||||||
input: {
|
fontFamily: "Gilroy, sans-serif",
|
||||||
fontSize: {
|
|
||||||
xs: "0.9rem",
|
|
||||||
sm: "1rem",
|
|
||||||
},
|
},
|
||||||
|
}}
|
||||||
|
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",
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
@ -204,15 +202,15 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
||||||
/>
|
/>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
|
|
||||||
|
|
||||||
|
{/* -------------------------------- Password Field ----------------- */}
|
||||||
<FormControl sx={{ width: "100%" }}>
|
<FormControl sx={{ width: "100%" }}>
|
||||||
<FormLabel
|
<FormLabel
|
||||||
htmlFor="password"
|
htmlFor="password"
|
||||||
sx={{
|
sx={{
|
||||||
fontSize: {
|
fontSize: { xs: "0.9rem", sm: "1rem" },
|
||||||
xs: "0.9rem",
|
|
||||||
sm: "1rem",
|
|
||||||
},
|
|
||||||
color: "white",
|
color: "white",
|
||||||
|
fontFamily: "Gilroy, sans-serif",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Password
|
Password
|
||||||
|
|
@ -225,81 +223,78 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
||||||
required: "Password is required",
|
required: "Password is required",
|
||||||
minLength: {
|
minLength: {
|
||||||
value: 6,
|
value: 6,
|
||||||
message:
|
message: "Password must be at least 6 characters long.",
|
||||||
"Password must be at least 6 characters long.",
|
|
||||||
},
|
},
|
||||||
pattern: {
|
pattern: {
|
||||||
value: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{6,}$/,
|
value:
|
||||||
|
/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{6,}$/,
|
||||||
message:
|
message:
|
||||||
"Password must contain at least one uppercase letter, one lowercase letter, one number, and one special character.",
|
"Password must contain at least one uppercase letter, one lowercase letter, one number, and one special character.",
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<Box sx={{ position: "relative" }}>
|
|
||||||
<TextField
|
<TextField
|
||||||
{...field}
|
{...field}
|
||||||
error={!!errors.password}
|
error={!!errors.password}
|
||||||
helperText={
|
helperText={errors.password?.message}
|
||||||
errors.password?.message
|
|
||||||
}
|
|
||||||
name="password"
|
name="password"
|
||||||
placeholder="Password"
|
placeholder="Password"
|
||||||
type={
|
type={showPassword ? "text" : "password"}
|
||||||
showPassword
|
|
||||||
? "text"
|
|
||||||
: "password"
|
|
||||||
}
|
|
||||||
id="password"
|
id="password"
|
||||||
autoComplete="current-password"
|
autoComplete="current-password"
|
||||||
autoFocus
|
|
||||||
required
|
required
|
||||||
fullWidth
|
fullWidth
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
color={
|
color={errors.password ? "error" : "primary"}
|
||||||
errors.password
|
InputProps={{
|
||||||
? "error"
|
sx: {
|
||||||
: "primary"
|
height: "50px",
|
||||||
}
|
fontFamily: "Gilroy, sans-serif", // Apply Gilroy font
|
||||||
sx={{
|
},
|
||||||
paddingRight: "40px",
|
endAdornment: (
|
||||||
height: "40px",
|
|
||||||
marginBottom: "8px",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<IconButton
|
<IconButton
|
||||||
|
onClick={() => setShowPassword((prev) => !prev)}
|
||||||
|
edge="end"
|
||||||
sx={{
|
sx={{
|
||||||
position: "absolute",
|
color: "white",
|
||||||
top: "50%",
|
padding: 0,
|
||||||
right: "10px",
|
margin: 0,
|
||||||
transform:
|
backgroundColor: "transparent",
|
||||||
"translateY(-50%)",
|
border: "none",
|
||||||
background: "none",
|
boxShadow: "none",
|
||||||
borderColor:
|
"&:hover": { backgroundColor: "transparent" },
|
||||||
"transparent",
|
"&:focus": { outline: "none", border: "none" },
|
||||||
"&:hover": {
|
}}
|
||||||
backgroundColor:
|
>
|
||||||
"transparent",
|
{showPassword ? <VisibilityOff /> : <Visibility />}
|
||||||
borderColor:
|
</IconButton>
|
||||||
"transparent",
|
),
|
||||||
|
}}
|
||||||
|
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",
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
onClick={() =>
|
/>
|
||||||
setShowPassword(
|
|
||||||
(prev) => !prev
|
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{showPassword ? (
|
|
||||||
<VisibilityOff />
|
|
||||||
) : (
|
|
||||||
<Visibility />
|
|
||||||
)}
|
|
||||||
</IconButton>
|
|
||||||
</Box>
|
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
|
|
||||||
|
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
|
|
@ -313,11 +308,30 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
||||||
control={
|
control={
|
||||||
<Checkbox
|
<Checkbox
|
||||||
value="remember"
|
value="remember"
|
||||||
color="primary"
|
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"
|
label="Remember me"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Link
|
<Link
|
||||||
component="button"
|
component="button"
|
||||||
type="button"
|
type="button"
|
||||||
|
|
@ -325,11 +339,15 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
||||||
variant="body2"
|
variant="body2"
|
||||||
sx={{
|
sx={{
|
||||||
alignSelf: "center",
|
alignSelf: "center",
|
||||||
|
fontFamily: "Gilroy, sans-serif",
|
||||||
color: "#01579b",
|
color: "#01579b",
|
||||||
|
textDecoration: "none", // ✅ Removes underline
|
||||||
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Forgot password?
|
Forgot password?
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
</Box>
|
</Box>
|
||||||
<ForgotPassword
|
<ForgotPassword
|
||||||
open={open}
|
open={open}
|
||||||
|
|
@ -341,6 +359,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
||||||
disabled={!isValid}
|
disabled={!isValid}
|
||||||
sx={{
|
sx={{
|
||||||
color: "white",
|
color: "white",
|
||||||
|
fontFamily: "Gilroy, sans-serif",
|
||||||
backgroundColor: "#52ACDF",
|
backgroundColor: "#52ACDF",
|
||||||
"&:hover": {
|
"&:hover": {
|
||||||
backgroundColor: "#52ACDF",
|
backgroundColor: "#52ACDF",
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue