mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-19 13:50:43 +00:00
Initial checkin
This commit is contained in:
Tim Chamberlain
86
src/layouts/authentication/components/BasicLayout/index.tsx
Normal file
86
src/layouts/authentication/components/BasicLayout/index.tsx
Normal file
@ -0,0 +1,86 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { ReactNode } from "react";
|
||||
|
||||
// @mui material components
|
||||
import Grid from "@mui/material/Grid";
|
||||
import { Theme } from "@mui/material/styles";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
|
||||
// Material Dashboard 2 PRO React TS examples components
|
||||
import DefaultNavbar from "examples/Navbars/DefaultNavbar";
|
||||
import PageLayout from "examples/LayoutContainers/PageLayout";
|
||||
|
||||
// Material Dashboard 2 PRO React page layout routes
|
||||
import pageRoutes from "page.routes";
|
||||
|
||||
// Authentication pages components
|
||||
import Footer from "layouts/authentication/components/Footer";
|
||||
|
||||
// Declaring props types for BasicLayout
|
||||
interface Props {
|
||||
image: string;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
function BasicLayout({ image, children }: Props): JSX.Element {
|
||||
return (
|
||||
<PageLayout>
|
||||
<DefaultNavbar
|
||||
routes={pageRoutes}
|
||||
action={{
|
||||
type: "external",
|
||||
route: "https://creative-tim.com/product/material-dashboard-2-pro-react-ts",
|
||||
label: "buy now",
|
||||
color: "info",
|
||||
}}
|
||||
transparent
|
||||
light
|
||||
/>
|
||||
<MDBox
|
||||
position="absolute"
|
||||
width="100%"
|
||||
minHeight="100vh"
|
||||
sx={{
|
||||
backgroundImage: ({
|
||||
functions: { linearGradient, rgba },
|
||||
palette: { gradients },
|
||||
}: Theme) =>
|
||||
image &&
|
||||
`${linearGradient(
|
||||
rgba(gradients.dark.main, 0.6),
|
||||
rgba(gradients.dark.state, 0.6)
|
||||
)}, url(${image})`,
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
backgroundRepeat: "no-repeat",
|
||||
}}
|
||||
/>
|
||||
<MDBox px={1} width="100%" height="100vh" mx="auto">
|
||||
<Grid container spacing={1} justifyContent="center" alignItems="center" height="100%">
|
||||
<Grid item xs={11} sm={9} md={5} lg={4} xl={3}>
|
||||
{children}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</MDBox>
|
||||
<Footer light />
|
||||
</PageLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export default BasicLayout;
|
||||
96
src/layouts/authentication/components/CoverLayout/index.tsx
Normal file
96
src/layouts/authentication/components/CoverLayout/index.tsx
Normal file
@ -0,0 +1,96 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { ReactNode } from "react";
|
||||
|
||||
// @mui material components
|
||||
import Grid from "@mui/material/Grid";
|
||||
import { Theme } from "@mui/material/styles";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
|
||||
// Material Dashboard 2 PRO React TS examples components
|
||||
import DefaultNavbar from "examples/Navbars/DefaultNavbar";
|
||||
import PageLayout from "examples/LayoutContainers/PageLayout";
|
||||
|
||||
// Authentication layout components
|
||||
import Footer from "layouts/authentication/components/Footer";
|
||||
|
||||
// Material Dashboard 2 PRO React page layout routes
|
||||
import pageRoutes from "page.routes";
|
||||
|
||||
// Declaring props types for CoverLayout
|
||||
interface Props {
|
||||
coverHeight?: string;
|
||||
image: string;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
function CoverLayout({ coverHeight, image, children }: Props): JSX.Element {
|
||||
return (
|
||||
<PageLayout>
|
||||
<DefaultNavbar
|
||||
routes={pageRoutes}
|
||||
action={{
|
||||
type: "external",
|
||||
route: "https://creative-tim.com/product/material-dashboard-2-pro-react-ts",
|
||||
label: "buy now",
|
||||
color: "info",
|
||||
}}
|
||||
transparent
|
||||
light
|
||||
/>
|
||||
<MDBox
|
||||
width="calc(100% - 2rem)"
|
||||
minHeight={coverHeight}
|
||||
borderRadius="xl"
|
||||
mx={2}
|
||||
my={2}
|
||||
pt={6}
|
||||
pb={28}
|
||||
sx={{
|
||||
backgroundImage: ({
|
||||
functions: { linearGradient, rgba },
|
||||
palette: { gradients },
|
||||
}: Theme) =>
|
||||
image &&
|
||||
`${linearGradient(
|
||||
rgba(gradients.dark.main, 0.4),
|
||||
rgba(gradients.dark.state, 0.4)
|
||||
)}, url(${image})`,
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
backgroundRepeat: "no-repeat",
|
||||
}}
|
||||
/>
|
||||
<MDBox mt={{ xs: -20, lg: -18 }} px={1} width="calc(100% - 2rem)" mx="auto">
|
||||
<Grid container spacing={1} justifyContent="center">
|
||||
<Grid item xs={11} sm={9} md={5} lg={4} xl={3}>
|
||||
{children}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</MDBox>
|
||||
<Footer />
|
||||
</PageLayout>
|
||||
);
|
||||
}
|
||||
|
||||
// Declaring default props for CoverLayout
|
||||
CoverLayout.defaultProps = {
|
||||
coverHeight: "35vh",
|
||||
};
|
||||
|
||||
export default CoverLayout;
|
||||
138
src/layouts/authentication/components/Footer/index.tsx
Normal file
138
src/layouts/authentication/components/Footer/index.tsx
Normal file
@ -0,0 +1,138 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import Container from "@mui/material/Container";
|
||||
import Link from "@mui/material/Link";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import { Theme } from "@mui/material/styles";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// Material Dashboard 2 PRO React TS Base Styles
|
||||
import typography from "assets/theme/base/typography";
|
||||
|
||||
function Footer({ light }: { light?: boolean }): JSX.Element {
|
||||
const { size } = typography;
|
||||
|
||||
return (
|
||||
<MDBox position="absolute" width="100%" bottom={0} py={4}>
|
||||
<Container>
|
||||
<MDBox
|
||||
width="100%"
|
||||
display="flex"
|
||||
flexDirection={{ xs: "column", lg: "row" }}
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
px={1.5}
|
||||
>
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
flexWrap="wrap"
|
||||
color={light ? "white" : "text"}
|
||||
fontSize={size.sm}
|
||||
>
|
||||
© {new Date().getFullYear()}, made with
|
||||
<MDBox fontSize={size.md} color={light ? "white" : "dark"} mb={-0.5} mx={0.25}>
|
||||
<Icon color="inherit" fontSize="inherit">
|
||||
favorite
|
||||
</Icon>
|
||||
</MDBox>
|
||||
by
|
||||
<Link href="https://www.creative-tim.com/" target="_blank">
|
||||
<MDTypography variant="button" fontWeight="medium" color={light ? "white" : "dark"}>
|
||||
Creative Tim
|
||||
</MDTypography>
|
||||
</Link>
|
||||
for a better web.
|
||||
</MDBox>
|
||||
<MDBox
|
||||
component="ul"
|
||||
sx={({ breakpoints }: Theme) => ({
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
listStyle: "none",
|
||||
mt: 3,
|
||||
mb: 0,
|
||||
p: 0,
|
||||
|
||||
[breakpoints.up("lg")]: {
|
||||
mt: 0,
|
||||
},
|
||||
})}
|
||||
>
|
||||
<MDBox component="li" pr={2} lineHeight={1}>
|
||||
<Link href="https://www.creative-tim.com/" target="_blank">
|
||||
<MDTypography
|
||||
variant="button"
|
||||
fontWeight="regular"
|
||||
color={light ? "white" : "dark"}
|
||||
>
|
||||
Creative Tim
|
||||
</MDTypography>
|
||||
</Link>
|
||||
</MDBox>
|
||||
<MDBox component="li" px={2} lineHeight={1}>
|
||||
<Link href="https://www.creative-tim.com/presentation" target="_blank">
|
||||
<MDTypography
|
||||
variant="button"
|
||||
fontWeight="regular"
|
||||
color={light ? "white" : "dark"}
|
||||
>
|
||||
About Us
|
||||
</MDTypography>
|
||||
</Link>
|
||||
</MDBox>
|
||||
<MDBox component="li" px={2} lineHeight={1}>
|
||||
<Link href="https://www.creative-tim.com/blog" target="_blank">
|
||||
<MDTypography
|
||||
variant="button"
|
||||
fontWeight="regular"
|
||||
color={light ? "white" : "dark"}
|
||||
>
|
||||
Blog
|
||||
</MDTypography>
|
||||
</Link>
|
||||
</MDBox>
|
||||
<MDBox component="li" pl={2} lineHeight={1}>
|
||||
<Link href="https://www.creative-tim.com/license" target="_blank">
|
||||
<MDTypography
|
||||
variant="button"
|
||||
fontWeight="regular"
|
||||
color={light ? "white" : "dark"}
|
||||
>
|
||||
License
|
||||
</MDTypography>
|
||||
</Link>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Container>
|
||||
</MDBox>
|
||||
);
|
||||
}
|
||||
|
||||
// Declaring default props for Footer
|
||||
Footer.defaultProps = {
|
||||
light: false,
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
@ -0,0 +1,117 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { ReactNode } from "react";
|
||||
|
||||
// @mui material components
|
||||
import Grid from "@mui/material/Grid";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// Material Dashboard 2 PRO React TS examples components
|
||||
import DefaultNavbar from "examples/Navbars/DefaultNavbar";
|
||||
import PageLayout from "examples/LayoutContainers/PageLayout";
|
||||
|
||||
// Material Dashboard 2 PRO React page layout routes
|
||||
import pageRoutes from "page.routes";
|
||||
|
||||
// Material Dashboard 2 PRO React context
|
||||
import { useMaterialUIController } from "context";
|
||||
|
||||
// Declaring props types for IllustrationLayout
|
||||
interface Props {
|
||||
header?: ReactNode;
|
||||
title?: string;
|
||||
description?: string;
|
||||
children: ReactNode;
|
||||
illustration?: string;
|
||||
}
|
||||
|
||||
function IllustrationLayout({
|
||||
header,
|
||||
title,
|
||||
description,
|
||||
illustration,
|
||||
children,
|
||||
}: Props): JSX.Element {
|
||||
const [controller] = useMaterialUIController();
|
||||
const { darkMode } = controller;
|
||||
|
||||
return (
|
||||
<PageLayout background="white">
|
||||
<DefaultNavbar
|
||||
routes={pageRoutes}
|
||||
action={{
|
||||
type: "external",
|
||||
route: "https://creative-tim.com/product/material-dashboard-2-pro-react-ts",
|
||||
label: "buy now",
|
||||
color: "info",
|
||||
}}
|
||||
/>
|
||||
<Grid
|
||||
container
|
||||
sx={{
|
||||
backgroundColor: ({ palette: { background, white } }) =>
|
||||
darkMode ? background.default : white.main,
|
||||
}}
|
||||
>
|
||||
<Grid item xs={12} lg={6}>
|
||||
<MDBox
|
||||
display={{ xs: "none", lg: "flex" }}
|
||||
width="calc(100% - 2rem)"
|
||||
height="calc(100vh - 2rem)"
|
||||
borderRadius="lg"
|
||||
ml={2}
|
||||
mt={2}
|
||||
sx={{ backgroundImage: `url(${illustration})` }}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={11} sm={8} md={6} lg={4} xl={3} sx={{ mx: "auto" }}>
|
||||
<MDBox display="flex" flexDirection="column" justifyContent="center" height="100vh">
|
||||
<MDBox py={3} px={3} textAlign="center">
|
||||
{!header ? (
|
||||
<>
|
||||
<MDBox mb={1} textAlign="center">
|
||||
<MDTypography variant="h4" fontWeight="bold">
|
||||
{title}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDTypography variant="body2" color="text">
|
||||
{description}
|
||||
</MDTypography>
|
||||
</>
|
||||
) : (
|
||||
header
|
||||
)}
|
||||
</MDBox>
|
||||
<MDBox p={3}>{children}</MDBox>
|
||||
</MDBox>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</PageLayout>
|
||||
);
|
||||
}
|
||||
|
||||
// Declaring default props for IllustrationLayout
|
||||
IllustrationLayout.defaultProps = {
|
||||
header: "",
|
||||
title: "",
|
||||
description: "",
|
||||
illustration: "",
|
||||
};
|
||||
|
||||
export default IllustrationLayout;
|
||||
70
src/layouts/authentication/reset-password/cover/index.tsx
Normal file
70
src/layouts/authentication/reset-password/cover/index.tsx
Normal file
@ -0,0 +1,70 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import MDInput from "components/MDInput";
|
||||
import MDButton from "components/MDButton";
|
||||
|
||||
// Authentication layout components
|
||||
import CoverLayout from "layouts/authentication/components/CoverLayout";
|
||||
|
||||
// Images
|
||||
import bgImage from "assets/images/bg-reset-cover.jpeg";
|
||||
|
||||
function Cover(): JSX.Element {
|
||||
return (
|
||||
<CoverLayout coverHeight="50vh" image={bgImage}>
|
||||
<Card>
|
||||
<MDBox
|
||||
variant="gradient"
|
||||
bgColor="info"
|
||||
borderRadius="lg"
|
||||
coloredShadow="success"
|
||||
mx={2}
|
||||
mt={-3}
|
||||
py={2}
|
||||
mb={1}
|
||||
textAlign="center"
|
||||
>
|
||||
<MDTypography variant="h3" fontWeight="medium" color="white" mt={1}>
|
||||
Reset Password
|
||||
</MDTypography>
|
||||
<MDTypography display="block" variant="button" color="white" my={1}>
|
||||
You will receive an e-mail in maximum 60 seconds
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox pt={4} pb={3} px={3}>
|
||||
<MDBox component="form" role="form">
|
||||
<MDBox mb={4}>
|
||||
<MDInput type="email" label="Email" variant="standard" fullWidth />
|
||||
</MDBox>
|
||||
<MDBox mt={6} mb={1}>
|
||||
<MDButton variant="gradient" color="info" fullWidth>
|
||||
reset
|
||||
</MDButton>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Card>
|
||||
</CoverLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export default Cover;
|
||||
131
src/layouts/authentication/sign-in/basic/index.tsx
Normal file
131
src/layouts/authentication/sign-in/basic/index.tsx
Normal file
@ -0,0 +1,131 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
// react-router-dom components
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import Switch from "@mui/material/Switch";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import MuiLink from "@mui/material/Link";
|
||||
|
||||
// @mui icons
|
||||
import FacebookIcon from "@mui/icons-material/Facebook";
|
||||
import GitHubIcon from "@mui/icons-material/GitHub";
|
||||
import GoogleIcon from "@mui/icons-material/Google";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import MDInput from "components/MDInput";
|
||||
import MDButton from "components/MDButton";
|
||||
|
||||
// Authentication layout components
|
||||
import BasicLayout from "layouts/authentication/components/BasicLayout";
|
||||
|
||||
// Images
|
||||
import bgImage from "assets/images/bg-sign-in-basic.jpeg";
|
||||
|
||||
function Basic(): JSX.Element {
|
||||
const [rememberMe, setRememberMe] = useState<boolean>(false);
|
||||
|
||||
const handleSetRememberMe = () => setRememberMe(!rememberMe);
|
||||
|
||||
return (
|
||||
<BasicLayout image={bgImage}>
|
||||
<Card>
|
||||
<MDBox
|
||||
variant="gradient"
|
||||
bgColor="info"
|
||||
borderRadius="lg"
|
||||
coloredShadow="info"
|
||||
mx={2}
|
||||
mt={-3}
|
||||
p={2}
|
||||
mb={1}
|
||||
textAlign="center"
|
||||
>
|
||||
<MDTypography variant="h4" fontWeight="medium" color="white" mt={1}>
|
||||
Sign in
|
||||
</MDTypography>
|
||||
<Grid container spacing={3} justifyContent="center" sx={{ mt: 1, mb: 2 }}>
|
||||
<Grid item xs={2}>
|
||||
<MDTypography component={MuiLink} href="#" variant="body1" color="white">
|
||||
<FacebookIcon color="inherit" />
|
||||
</MDTypography>
|
||||
</Grid>
|
||||
<Grid item xs={2}>
|
||||
<MDTypography component={MuiLink} href="#" variant="body1" color="white">
|
||||
<GitHubIcon color="inherit" />
|
||||
</MDTypography>
|
||||
</Grid>
|
||||
<Grid item xs={2}>
|
||||
<MDTypography component={MuiLink} href="#" variant="body1" color="white">
|
||||
<GoogleIcon color="inherit" />
|
||||
</MDTypography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</MDBox>
|
||||
<MDBox pt={4} pb={3} px={3}>
|
||||
<MDBox component="form" role="form">
|
||||
<MDBox mb={2}>
|
||||
<MDInput type="email" label="Email" fullWidth />
|
||||
</MDBox>
|
||||
<MDBox mb={2}>
|
||||
<MDInput type="password" label="Password" fullWidth />
|
||||
</MDBox>
|
||||
<MDBox display="flex" alignItems="center" ml={-1}>
|
||||
<Switch checked={rememberMe} onChange={handleSetRememberMe} />
|
||||
<MDTypography
|
||||
variant="button"
|
||||
fontWeight="regular"
|
||||
color="text"
|
||||
onClick={handleSetRememberMe}
|
||||
sx={{ cursor: "pointer", userSelect: "none", ml: -1 }}
|
||||
>
|
||||
Remember me
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox mt={4} mb={1}>
|
||||
<MDButton variant="gradient" color="info" fullWidth>
|
||||
sign in
|
||||
</MDButton>
|
||||
</MDBox>
|
||||
<MDBox mt={3} mb={1} textAlign="center">
|
||||
<MDTypography variant="button" color="text">
|
||||
Don't have an account?{" "}
|
||||
<MDTypography
|
||||
component={Link}
|
||||
to="/authentication/sign-up/cover"
|
||||
variant="button"
|
||||
color="info"
|
||||
fontWeight="medium"
|
||||
textGradient
|
||||
>
|
||||
Sign up
|
||||
</MDTypography>
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Card>
|
||||
</BasicLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export default Basic;
|
||||
124
src/layouts/authentication/sign-in/cover/index.tsx
Normal file
124
src/layouts/authentication/sign-in/cover/index.tsx
Normal file
@ -0,0 +1,124 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
// react-router-dom components
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import Switch from "@mui/material/Switch";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import MDInput from "components/MDInput";
|
||||
import MDButton from "components/MDButton";
|
||||
|
||||
// Authentication layout components
|
||||
import CoverLayout from "layouts/authentication/components/CoverLayout";
|
||||
|
||||
// Images
|
||||
import bgImage from "assets/images/bg-sign-in-cover.jpeg";
|
||||
|
||||
function Cover(): JSX.Element {
|
||||
const [rememberMe, setRememberMe] = useState<boolean>(true);
|
||||
|
||||
const handleSetRememberMe = () => setRememberMe(!rememberMe);
|
||||
|
||||
return (
|
||||
<CoverLayout image={bgImage}>
|
||||
<Card>
|
||||
<MDBox
|
||||
variant="gradient"
|
||||
bgColor="info"
|
||||
borderRadius="lg"
|
||||
coloredShadow="success"
|
||||
mx={2}
|
||||
mt={-3}
|
||||
p={3}
|
||||
mb={1}
|
||||
textAlign="center"
|
||||
>
|
||||
<MDTypography variant="h4" fontWeight="medium" color="white" mt={1}>
|
||||
Sign in
|
||||
</MDTypography>
|
||||
<MDTypography display="block" variant="button" color="white" my={1}>
|
||||
Enter your email and password to Sign In
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox pt={4} pb={3} px={3}>
|
||||
<MDBox component="form" role="form">
|
||||
<MDBox mb={2}>
|
||||
<MDInput
|
||||
type="email"
|
||||
label="Email"
|
||||
variant="standard"
|
||||
fullWidth
|
||||
placeholder="john@example.com"
|
||||
InputLabelProps={{ shrink: true }}
|
||||
/>
|
||||
</MDBox>
|
||||
<MDBox mb={2}>
|
||||
<MDInput
|
||||
type="password"
|
||||
label="Password"
|
||||
variant="standard"
|
||||
fullWidth
|
||||
placeholder="************"
|
||||
InputLabelProps={{ shrink: true }}
|
||||
/>
|
||||
</MDBox>
|
||||
<MDBox display="flex" alignItems="center" ml={-1}>
|
||||
<Switch checked={rememberMe} onChange={handleSetRememberMe} />
|
||||
<MDTypography
|
||||
variant="button"
|
||||
fontWeight="regular"
|
||||
color="text"
|
||||
onClick={handleSetRememberMe}
|
||||
sx={{ cursor: "pointer", userSelect: "none", ml: -1 }}
|
||||
>
|
||||
Remember me
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox mt={4} mb={1}>
|
||||
<MDButton variant="gradient" color="info" fullWidth>
|
||||
sign in
|
||||
</MDButton>
|
||||
</MDBox>
|
||||
<MDBox mt={3} mb={1} textAlign="center">
|
||||
<MDTypography variant="button" color="text">
|
||||
Don't have an account?{" "}
|
||||
<MDTypography
|
||||
component={Link}
|
||||
to="/authentication/sign-up/cover"
|
||||
variant="button"
|
||||
color="info"
|
||||
fontWeight="medium"
|
||||
textGradient
|
||||
>
|
||||
Sign up
|
||||
</MDTypography>
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Card>
|
||||
</CoverLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export default Cover;
|
||||
91
src/layouts/authentication/sign-in/illustration/index.tsx
Normal file
91
src/layouts/authentication/sign-in/illustration/index.tsx
Normal file
@ -0,0 +1,91 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
// react-router-dom components
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
// @mui material components
|
||||
import Switch from "@mui/material/Switch";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import MDInput from "components/MDInput";
|
||||
import MDButton from "components/MDButton";
|
||||
|
||||
// Authentication layout components
|
||||
import IllustrationLayout from "layouts/authentication/components/IllustrationLayout";
|
||||
|
||||
// Image
|
||||
import bgImage from "assets/images/illustrations/illustration-reset.jpg";
|
||||
|
||||
function Illustration(): JSX.Element {
|
||||
const [rememberMe, setRememberMe] = useState<boolean>(false);
|
||||
|
||||
const handleSetRememberMe = () => setRememberMe(!rememberMe);
|
||||
|
||||
return (
|
||||
<IllustrationLayout
|
||||
title="Sign In"
|
||||
description="Enter your email and password to sign in"
|
||||
illustration={bgImage}
|
||||
>
|
||||
<MDBox component="form" role="form">
|
||||
<MDBox mb={2}>
|
||||
<MDInput type="email" label="Email" fullWidth />
|
||||
</MDBox>
|
||||
<MDBox mb={2}>
|
||||
<MDInput type="password" label="Password" fullWidth />
|
||||
</MDBox>
|
||||
<MDBox display="flex" alignItems="center" ml={-1}>
|
||||
<Switch checked={rememberMe} onChange={handleSetRememberMe} />
|
||||
<MDTypography
|
||||
variant="button"
|
||||
fontWeight="regular"
|
||||
color="text"
|
||||
onClick={handleSetRememberMe}
|
||||
sx={{ cursor: "pointer", userSelect: "none", ml: -1 }}
|
||||
>
|
||||
Remember me
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox mt={4} mb={1}>
|
||||
<MDButton variant="gradient" color="info" size="large" fullWidth>
|
||||
sign in
|
||||
</MDButton>
|
||||
</MDBox>
|
||||
<MDBox mt={3} textAlign="center">
|
||||
<MDTypography variant="button" color="text">
|
||||
Don't have an account?{" "}
|
||||
<MDTypography
|
||||
component={Link}
|
||||
to="/authentication/sign-up/cover"
|
||||
variant="button"
|
||||
color="info"
|
||||
fontWeight="medium"
|
||||
textGradient
|
||||
>
|
||||
Sign up
|
||||
</MDTypography>
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</IllustrationLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export default Illustration;
|
||||
116
src/layouts/authentication/sign-up/cover/index.tsx
Normal file
116
src/layouts/authentication/sign-up/cover/index.tsx
Normal file
@ -0,0 +1,116 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// react-router-dom components
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import Checkbox from "@mui/material/Checkbox";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import MDInput from "components/MDInput";
|
||||
import MDButton from "components/MDButton";
|
||||
|
||||
// Authentication layout components
|
||||
import CoverLayout from "layouts/authentication/components/CoverLayout";
|
||||
|
||||
// Images
|
||||
import bgImage from "assets/images/bg-sign-up-cover.jpeg";
|
||||
|
||||
function Cover(): JSX.Element {
|
||||
return (
|
||||
<CoverLayout image={bgImage}>
|
||||
<Card>
|
||||
<MDBox
|
||||
variant="gradient"
|
||||
bgColor="info"
|
||||
borderRadius="lg"
|
||||
coloredShadow="success"
|
||||
mx={2}
|
||||
mt={-3}
|
||||
p={3}
|
||||
mb={1}
|
||||
textAlign="center"
|
||||
>
|
||||
<MDTypography variant="h4" fontWeight="medium" color="white" mt={1}>
|
||||
Join us today
|
||||
</MDTypography>
|
||||
<MDTypography display="block" variant="button" color="white" my={1}>
|
||||
Enter your email and password to register
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox pt={4} pb={3} px={3}>
|
||||
<MDBox component="form" role="form">
|
||||
<MDBox mb={2}>
|
||||
<MDInput type="text" label="Name" variant="standard" fullWidth />
|
||||
</MDBox>
|
||||
<MDBox mb={2}>
|
||||
<MDInput type="email" label="Email" variant="standard" fullWidth />
|
||||
</MDBox>
|
||||
<MDBox mb={2}>
|
||||
<MDInput type="password" label="Password" variant="standard" fullWidth />
|
||||
</MDBox>
|
||||
<MDBox display="flex" alignItems="center" ml={-1}>
|
||||
<Checkbox />
|
||||
<MDTypography
|
||||
variant="button"
|
||||
fontWeight="regular"
|
||||
color="text"
|
||||
sx={{ cursor: "pointer", userSelect: "none", ml: -1 }}
|
||||
>
|
||||
I agree the
|
||||
</MDTypography>
|
||||
<MDTypography
|
||||
component="a"
|
||||
href="#"
|
||||
variant="button"
|
||||
fontWeight="bold"
|
||||
color="info"
|
||||
textGradient
|
||||
>
|
||||
Terms and Conditions
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox mt={4} mb={1}>
|
||||
<MDButton variant="gradient" color="info" fullWidth>
|
||||
sign in
|
||||
</MDButton>
|
||||
</MDBox>
|
||||
<MDBox mt={3} mb={1} textAlign="center">
|
||||
<MDTypography variant="button" color="text">
|
||||
Already have an account?{" "}
|
||||
<MDTypography
|
||||
component={Link}
|
||||
to="/authentication/sign-in/cover"
|
||||
variant="button"
|
||||
color="info"
|
||||
fontWeight="medium"
|
||||
textGradient
|
||||
>
|
||||
Sign In
|
||||
</MDTypography>
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Card>
|
||||
</CoverLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export default Cover;
|
||||
Reference in New Issue
Block a user