Initial commit
This commit is contained in:
125
src/views/Authentication/Reset/ResetBasic.js
Normal file
125
src/views/Authentication/Reset/ResetBasic.js
Normal file
@@ -0,0 +1,125 @@
|
||||
/*!
|
||||
|
||||
=========================================================
|
||||
* Argon Dashboard Chakra PRO - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
|
||||
|
||||
* Designed and Coded by Simmmple & Creative Tim
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
*/
|
||||
|
||||
// Chakra imports
|
||||
import {
|
||||
Button,
|
||||
Flex,
|
||||
FormControl,
|
||||
FormLabel,
|
||||
Input,
|
||||
Text,
|
||||
useColorModeValue,
|
||||
} from "@chakra-ui/react";
|
||||
// Assets
|
||||
import BasicImage from "assets/img/BasicImage.png";
|
||||
import React from "react";
|
||||
import AuthBasic from "layouts/AuthBasic";
|
||||
|
||||
function ResetCover() {
|
||||
// Chakra color mode
|
||||
const textColor = useColorModeValue("gray.700", "white");
|
||||
const bgForm = useColorModeValue("white", "navy.800");
|
||||
return (
|
||||
<AuthBasic
|
||||
title="Welcome!"
|
||||
description="Use these awesome forms to login or create new account in your project for free."
|
||||
image={BasicImage}
|
||||
>
|
||||
<Flex
|
||||
w="100%"
|
||||
h="100%"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
mb="60px"
|
||||
mt={{ base: "60px", md: "0px" }}
|
||||
>
|
||||
<Flex
|
||||
zIndex="2"
|
||||
direction="column"
|
||||
w="445px"
|
||||
background="transparent"
|
||||
borderRadius="15px"
|
||||
p="40px"
|
||||
mx={{ base: "20px", md: "100px" }}
|
||||
mb={{ base: "20px", md: "auto" }}
|
||||
bg={bgForm}
|
||||
boxShadow={useColorModeValue(
|
||||
"0px 5px 14px rgba(0, 0, 0, 0.05)",
|
||||
"unset"
|
||||
)}
|
||||
>
|
||||
<Text
|
||||
fontWeight="bold"
|
||||
color={textColor}
|
||||
textAlign="center"
|
||||
mb="10px"
|
||||
fontSize={{ base: "3xl", md: "4xl" }}
|
||||
>
|
||||
Reset password
|
||||
</Text>
|
||||
<Text
|
||||
fontWeight="regular"
|
||||
textAlign="center"
|
||||
color="gray.400"
|
||||
mb="35px"
|
||||
>
|
||||
You will receive an e-mail in maximum 60 seconds.
|
||||
</Text>
|
||||
<FormControl>
|
||||
<FormLabel ms="4px" fontSize="sm" fontWeight="normal">
|
||||
Email
|
||||
</FormLabel>
|
||||
<Input
|
||||
variant="auth"
|
||||
fontSize="sm"
|
||||
ms="4px"
|
||||
type="text"
|
||||
placeholder="Your email address"
|
||||
mb="24px"
|
||||
size="lg"
|
||||
/>
|
||||
{/* <FormLabel ms='4px' fontSize='sm' fontWeight='normal'>
|
||||
Password
|
||||
</FormLabel>
|
||||
<Input
|
||||
variant='auth'
|
||||
fontSize='sm'
|
||||
ms='4px'
|
||||
type='password'
|
||||
placeholder='Your password'
|
||||
mb='24px'
|
||||
size='lg'
|
||||
/> */}
|
||||
<Button
|
||||
fontSize="10px"
|
||||
variant="dark"
|
||||
fontWeight="bold"
|
||||
w="100%"
|
||||
h="45"
|
||||
mb="24px"
|
||||
>
|
||||
SEND
|
||||
</Button>
|
||||
</FormControl>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</AuthBasic>
|
||||
);
|
||||
}
|
||||
|
||||
export default ResetCover;
|
||||
109
src/views/Authentication/Reset/ResetCover.js
Normal file
109
src/views/Authentication/Reset/ResetCover.js
Normal file
@@ -0,0 +1,109 @@
|
||||
/*!
|
||||
|
||||
=========================================================
|
||||
* Argon Dashboard Chakra PRO - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
|
||||
|
||||
* Designed and Coded by Simmmple & Creative Tim
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
*/
|
||||
|
||||
// Chakra imports
|
||||
import {
|
||||
Button,
|
||||
Flex,
|
||||
FormControl,
|
||||
FormLabel,
|
||||
Input,
|
||||
Text,
|
||||
useColorModeValue,
|
||||
} from "@chakra-ui/react";
|
||||
// Assets
|
||||
import CoverImage from "assets/img/CoverImage.png";
|
||||
import React from "react";
|
||||
import AuthCover from "layouts/AuthCover";
|
||||
|
||||
function ResetCover() {
|
||||
// Chakra color mode
|
||||
const textColor = useColorModeValue("gray.700", "white");
|
||||
const bgForm = useColorModeValue("white", "navy.800");
|
||||
return (
|
||||
<AuthCover image={CoverImage}>
|
||||
<Flex
|
||||
w="100%"
|
||||
h="100%"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
mb="60px"
|
||||
mt={{ base: "60px", md: "30vh" }}
|
||||
>
|
||||
<Flex
|
||||
zIndex="2"
|
||||
direction="column"
|
||||
w="445px"
|
||||
background="transparent"
|
||||
borderRadius="15px"
|
||||
p="40px"
|
||||
mx={{ base: "20px", md: "100px" }}
|
||||
mb={{ base: "20px", md: "auto" }}
|
||||
bg={bgForm}
|
||||
boxShadow={useColorModeValue(
|
||||
"0px 5px 14px rgba(0, 0, 0, 0.05)",
|
||||
"unset"
|
||||
)}
|
||||
>
|
||||
<Text
|
||||
fontWeight="bold"
|
||||
color={textColor}
|
||||
textAlign="center"
|
||||
mb="10px"
|
||||
fontSize={{ base: "3xl", md: "4xl" }}
|
||||
>
|
||||
Reset password
|
||||
</Text>
|
||||
<Text
|
||||
fontWeight="regular"
|
||||
textAlign="center"
|
||||
color="gray.400"
|
||||
mb="35px"
|
||||
>
|
||||
You will receive an e-mail in maximum 60 seconds.
|
||||
</Text>
|
||||
<FormControl>
|
||||
<FormLabel ms="4px" fontSize="sm" fontWeight="normal">
|
||||
Email
|
||||
</FormLabel>
|
||||
<Input
|
||||
variant="auth"
|
||||
fontSize="sm"
|
||||
ms="4px"
|
||||
type="text"
|
||||
placeholder="Your email address"
|
||||
mb="24px"
|
||||
size="lg"
|
||||
/>
|
||||
<Button
|
||||
fontSize="10px"
|
||||
variant="dark"
|
||||
fontWeight="bold"
|
||||
w="100%"
|
||||
h="45"
|
||||
mb="24px"
|
||||
>
|
||||
SEND
|
||||
</Button>
|
||||
</FormControl>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</AuthCover>
|
||||
);
|
||||
}
|
||||
|
||||
export default ResetCover;
|
||||
81
src/views/Authentication/Reset/ResetIllustration.js
Normal file
81
src/views/Authentication/Reset/ResetIllustration.js
Normal file
@@ -0,0 +1,81 @@
|
||||
import React from "react";
|
||||
// Chakra imports
|
||||
import {
|
||||
Button,
|
||||
Flex,
|
||||
FormControl,
|
||||
FormLabel,
|
||||
Input,
|
||||
Text,
|
||||
useColorModeValue,
|
||||
LightMode,
|
||||
} from "@chakra-ui/react";
|
||||
// Assets
|
||||
import illustration from "assets/img/illustration-auth.png";
|
||||
import AuthIllustration from "layouts/AuthIllustration";
|
||||
|
||||
function ResetIllustration() {
|
||||
// Chakra color mode
|
||||
const textColor = useColorModeValue("blue.500", "blue.500");
|
||||
return (
|
||||
<AuthIllustration
|
||||
illustrationBackground='linear-gradient(180deg, #3182CE 0%, #63B3ED 100%)'
|
||||
image={illustration}>
|
||||
<Flex
|
||||
w='100%'
|
||||
h='100%'
|
||||
alignItems='start'
|
||||
justifyContent='start'
|
||||
mb={{ base: "0px", md: "60px" }}
|
||||
mt={{ base: "60px", md: "34vh" }}>
|
||||
<Flex
|
||||
zIndex='2'
|
||||
direction='column'
|
||||
w='445px'
|
||||
background='transparent'
|
||||
borderRadius='15px'
|
||||
pe={{ base: "0px", md: "80px" }}
|
||||
mx={{ base: "20px", md: "0px" }}
|
||||
mb={{ base: "20px", md: "auto" }}>
|
||||
<Text
|
||||
fontWeight='bold'
|
||||
color={textColor}
|
||||
mb='10px'
|
||||
fontSize={{ base: "3xl", md: "4xl" }}>
|
||||
Reset password
|
||||
</Text>
|
||||
<Text fontWeight='regular' color='gray.400' mb='35px'>
|
||||
You will receive an e-mail in maximum 60 seconds.
|
||||
</Text>
|
||||
<FormControl>
|
||||
<FormLabel ms='4px' fontSize='sm' fontWeight='normal'>
|
||||
Email
|
||||
</FormLabel>
|
||||
<Input
|
||||
variant='main'
|
||||
fontSize='sm'
|
||||
ms='4px'
|
||||
type='text'
|
||||
placeholder='Your email address'
|
||||
mb='24px'
|
||||
size='lg'
|
||||
/>
|
||||
<LightMode>
|
||||
<Button
|
||||
fontSize='10px'
|
||||
colorScheme='blue'
|
||||
fontWeight='bold'
|
||||
w='100%'
|
||||
h='45'
|
||||
mb='24px'>
|
||||
SEND
|
||||
</Button>
|
||||
</LightMode>
|
||||
</FormControl>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</AuthIllustration>
|
||||
);
|
||||
}
|
||||
|
||||
export default ResetIllustration;
|
||||
Reference in New Issue
Block a user