From 2c0bf3a8c5de475ae0183f423325c754e672e278 Mon Sep 17 00:00:00 2001 From: Sergey Yarkov Date: Mon, 6 Dec 2021 21:07:26 +0300 Subject: [PATCH] refactor: auth page layout --- src/components/Card/Card.tsx | 15 ++++ src/components/Card/index.ts | 3 + src/components/Fields/PasswordField.tsx | 76 +++++++++++++++++ src/components/Logo/Logo.tsx | 28 +++++++ src/components/Logo/index.ts | 3 + src/pages/auth/auth.tsx | 21 +++-- .../auth/components/AuthForm/AuthForm.tsx | 81 ++++++++----------- 7 files changed, 175 insertions(+), 52 deletions(-) create mode 100644 src/components/Card/Card.tsx create mode 100644 src/components/Card/index.ts create mode 100644 src/components/Fields/PasswordField.tsx create mode 100644 src/components/Logo/Logo.tsx create mode 100644 src/components/Logo/index.ts diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx new file mode 100644 index 0000000..4978adb --- /dev/null +++ b/src/components/Card/Card.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { Box, BoxProps, useColorModeValue } from '@chakra-ui/react'; + +const Card: React.FC = (props: BoxProps) => ( + +); + +export default Card; diff --git a/src/components/Card/index.ts b/src/components/Card/index.ts new file mode 100644 index 0000000..8c371a2 --- /dev/null +++ b/src/components/Card/index.ts @@ -0,0 +1,3 @@ +import Card from './Card'; + +export { Card }; diff --git a/src/components/Fields/PasswordField.tsx b/src/components/Fields/PasswordField.tsx new file mode 100644 index 0000000..e14006a --- /dev/null +++ b/src/components/Fields/PasswordField.tsx @@ -0,0 +1,76 @@ +import React, { useRef } from 'react'; +import { + Box, + Flex, + FormControl, + FormLabel, + Text, + IconButton, + Input, + InputGroup, + InputProps, + InputRightElement, + InputLeftElement, + Icon, + useDisclosure, + useMergeRefs, + useColorModeValue as mode, +} from '@chakra-ui/react'; +import { HiEye, HiEyeOff } from 'react-icons/hi'; +import { MdVpnKey } from 'react-icons/md'; + +interface PasswordFieldPropsType extends InputProps { + errorMessage?: string | undefined; +} + +export const PasswordField = React.forwardRef((props, ref) => { + const { errorMessage, ...other } = props; + const { isOpen, onToggle } = useDisclosure(); + const inputRef = useRef(null); + const mergeRef = useMergeRefs(inputRef, ref); + + const onClickReveal = () => { + onToggle(); + const input = inputRef.current; + if (input) { + input.focus({ preventScroll: true }); + const length = input.value.length * 2; + requestAnimationFrame(() => { + input.setSelectionRange(length, length); + }); + } + }; + + return ( + + + Password + + + } /> + + : } + onClick={onClickReveal} + /> + + + + {errorMessage && ( + + {errorMessage} + + )} + + ); +}); diff --git a/src/components/Logo/Logo.tsx b/src/components/Logo/Logo.tsx new file mode 100644 index 0000000..bc90f5f --- /dev/null +++ b/src/components/Logo/Logo.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import { chakra, HTMLChakraProps, useColorModeValue, useToken } from '@chakra-ui/react'; + +const Logo: React.FC> = props => { + const [white, black] = useToken('colors', ['white', 'gray.800']); + return ( + + + + + ); +}; + +export default Logo; diff --git a/src/components/Logo/index.ts b/src/components/Logo/index.ts new file mode 100644 index 0000000..72acb33 --- /dev/null +++ b/src/components/Logo/index.ts @@ -0,0 +1,3 @@ +import Logo from './Logo'; + +export default Logo; diff --git a/src/pages/auth/auth.tsx b/src/pages/auth/auth.tsx index da894e9..94d7bdc 100644 --- a/src/pages/auth/auth.tsx +++ b/src/pages/auth/auth.tsx @@ -2,7 +2,7 @@ import React from 'react'; import Helmet from 'react-helmet'; import { observer } from 'mobx-react'; import { Redirect } from 'react-router-dom'; -import { Flex } from '@chakra-ui/react'; +import { Box, Heading, Text, Link } from '@chakra-ui/react'; /** * Types @@ -12,12 +12,15 @@ import { IPageProps } from '@educt/interfaces'; /** * Components */ +import Logo from '@educt/components/Logo'; import AuthForm from './components/AuthForm'; +import { Card } from '@educt/components/Card'; /** * Hooks */ import { useRootStore } from '@educt/hooks/useRootStore'; +import { useColorModeValue } from '@chakra-ui/react'; /** * Auth page @@ -34,14 +37,20 @@ const AuthPage: React.FC = ({ title }) => { } return ( - <> + {title} - - - - + + + + Login to your account + + + + + + ); }; diff --git a/src/pages/auth/components/AuthForm/AuthForm.tsx b/src/pages/auth/components/AuthForm/AuthForm.tsx index c49d82d..4b81387 100644 --- a/src/pages/auth/components/AuthForm/AuthForm.tsx +++ b/src/pages/auth/components/AuthForm/AuthForm.tsx @@ -8,10 +8,10 @@ import { Button, Icon, Text, - Flex, + Stack, Box, } from '@chakra-ui/react'; -import { MdAccountCircle, MdSchool, MdVpnKey } from 'react-icons/md'; +import { MdAccountCircle, MdVpnKey } from 'react-icons/md'; import { yupResolver } from '@hookform/resolvers/yup'; /** @@ -29,6 +29,7 @@ import { useLogin } from '@educt/hooks/queries'; * Schema */ import LoginSchema from './AuthForm.validator'; +import { PasswordField } from '@educt/components/Fields/PasswordField'; type AuthInputType = { login: string; @@ -52,52 +53,40 @@ const AuthForm: React.FC = () => { const onSubmit: SubmitHandler = data => login(data.login, data.password).finally(() => reset()); return ( - -
- - - - - - - - - Login - - } /> - - - - {errors.login?.message} - - + + + + Login + + } /> + + + + {errors.login?.message} + + - - Password - - } /> - - - - {errors.password?.message} - - + - - - -
- + + + ); };