bubble/educt-client
1
0
Fork 0
mirror of https://github.com/sergeyyarkov/educt-client.git synced 2026-10-11 18:29:15 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: confirm email container

Browse Source
This commit is contained in:
Sergey Yarkov 2021-09-06 22:44:16 +03:00
parent 9a640bfd86
commit cf81c3f5da
8 changed files with 92 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/profile/components/UserAccountInfo/UserAccountInfo.tsx
View File

@ -45,7 +45,7 @@ const UserAccountInfo: React.FC<UserAccountInfoPropsType> = ({ user }) => {
{user.email}
</Text>
</Box>
<Button onClick={() => setStatusPageView('update-email')}>Edit</Button>
<Button onClick={() => setStatusPageView({ status: 'update-email' })}>Edit</Button>
</Flex>
<Flex justifyContent='space-between' alignItems='center'>
<Box>
@ -56,7 +56,7 @@ const UserAccountInfo: React.FC<UserAccountInfoPropsType> = ({ user }) => {
**********
</Text>
</Box>
<Button onClick={() => setStatusPageView('update-password')}>Change</Button>
<Button onClick={() => setStatusPageView({ status: 'update-password' })}>Change</Button>
</Flex>
</Stack>
</Box>

60
src/pages/profile/containers/ConfirmEmailContainer/ConfirmEmailContainer.tsx Normal file
View File

@ -0,0 +1,60 @@
import React from 'react';
import { PinInput, PinInputField } from '@chakra-ui/react';
import { Button } from '@chakra-ui/button';
import { Box, Flex, Heading, HStack, Text } from '@chakra-ui/layout';
const ConfirmEmailContainer: React.FC<{ newEmail: string }> = ({ newEmail }) => {
return (
<Box
maxW='500px'
sx={{
'@media(max-width: 991px)': {
maxW: 'inherit',
textAlign: 'center',
},
}}
>
<Heading as='h1'>Confirmation</Heading>
<Box mt='3'>
<Text>
Enter the 4-digit code we send to <Text as='b'>{newEmail}</Text>
</Text>
</Box>
<Flex alignItems='center' mt='10'>
<Box textAlign='center' w='full'>
<Flex justifyContent='center'>
<HStack>
<PinInput size='lg'>
<PinInputField />
<PinInputField />
<PinInputField />
<PinInputField />
</PinInput>
</HStack>
</Flex>
<Button
p='0 50px'
colorScheme='blue'
mt='4'
type='submit'
size='md'
variant='outline'
loadingText='Validating...'
>
Verify
</Button>
<Box mt='1.5'>
<Text as='small' color='red'>
Expires in 1:59
</Text>
{/* <Button variant='link' size='sm' colorScheme='black' mt='3' textDecoration='underline'>
Resend code
</Button> */}
</Box>
</Box>
</Flex>
</Box>
);
};
export default ConfirmEmailContainer;

3
src/pages/profile/containers/ConfirmEmailContainer/index.ts Normal file
View File

@ -0,0 +1,3 @@
import ConfirmEmailContainer from './ConfirmEmailContainer';
export default ConfirmEmailContainer;

2
src/pages/profile/containers/UpdateEmailContainer/UpdateEmailContainer.tsx
View File

@ -15,7 +15,7 @@ const UpdateEmailContainer: React.FC = () => {
aria-label='Back'
borderRadius='full'
icon={<ChevronLeftIcon />}
onClick={() => setStatusPageView('default')}
onClick={() => setStatusPageView({ status: 'default' })}
mr='5'
/>
<Heading as='h1'>Edit email address</Heading>

5
src/pages/profile/containers/UpdateEmailContainer/UpdateEmailForm/UpdateEmailForm.tsx
View File

@ -3,8 +3,9 @@ import { FormControl, FormHelperText, FormLabel } from '@chakra-ui/form-control'
import { Input } from '@chakra-ui/input';
import { Box, Stack } from '@chakra-ui/layout';
import { yupResolver } from '@hookform/resolvers/yup';
import { ProfilePageViewContext } from 'contexts';
import { useRootStore } from 'hooks/useRootStore';
import React from 'react';
import React, { useContext } from 'react';
import { SubmitHandler, useForm } from 'react-hook-form';
import UpdateEmailSchema from './UpdateEmailForm.validator';
@ -16,6 +17,7 @@ type UpdateEmailInputType = {
* Update email using form
*/
const UpdateEmailForm: React.FC = () => {
const { setStatusPageView } = useContext(ProfilePageViewContext);
const {
userStore: { me },
} = useRootStore();
@ -29,6 +31,7 @@ const UpdateEmailForm: React.FC = () => {
const onSubmit: SubmitHandler<UpdateEmailInputType> = async data => {
console.log(data);
setStatusPageView({ status: 'confirm-email', data: { confirmEmailData: { newEmail: data.email } } });
};
return (

2
src/pages/profile/containers/UpdatePasswordContainer/UpdatePasswordContainer.tsx
View File

@ -14,7 +14,7 @@ const UpdatePasswordContainer: React.FC = () => {
aria-label='Back'
borderRadius='full'
icon={<ChevronLeftIcon />}
onClick={() => setStatusPageView('default')}
onClick={() => setStatusPageView({ status: 'default' })}
mr='5'
/>
<Heading as='h1'>Update password</Heading>

14
src/pages/profile/index.tsx
View File

@ -24,12 +24,13 @@ import UserAccountInfo from './components/UserAccountInfo';
import UpdateUserContactsForm from './components/UpdateUserContactsForm';
import UpdatePasswordContainer from './containers/UpdatePasswordContainer';
import UpdateEmailContainer from './containers/UpdateEmailContainer';
import ConfirmEmailContainer from './containers/ConfirmEmailContainer';
/**
* Profile page
*/
const ProfilePage: React.FC<IPageProps> = () => {
const [statusPageView, setStatusPageView] = useState<ProfilePageStatusType>('default');
const [statusPageView, setStatusPageView] = useState<ProfilePageStatusType>({ status: 'default' });
const { colorMode } = useColorMode();
const { userStore, authStore } = useRootStore();
const history = useHistory();
@ -45,8 +46,8 @@ const ProfilePage: React.FC<IPageProps> = () => {
}
return (
<ProfilePageViewContext.Provider value={{ statusPageView, setStatusPageView }}>
{statusPageView === 'default' && (
<ProfilePageViewContext.Provider value={{ statusPageView: statusPageView.status, setStatusPageView }}>
{statusPageView.status === 'default' && (
<Box maxW='900px'>
<Heading as='h1'>My account</Heading>
<Flex
@ -120,8 +121,11 @@ const ProfilePage: React.FC<IPageProps> = () => {
</Box>
</Box>
)}
{statusPageView === 'update-password' && <UpdatePasswordContainer />}
{statusPageView === 'update-email' && <UpdateEmailContainer />}
{statusPageView.status === 'update-password' && <UpdatePasswordContainer />}
{statusPageView.status === 'update-email' && <UpdateEmailContainer />}
{statusPageView.status === 'confirm-email' && statusPageView.data?.confirmEmailData && (
<ConfirmEmailContainer newEmail={statusPageView.data.confirmEmailData.newEmail} />
)}
</ProfilePageViewContext.Provider>
);
};

14
src/types/index.d.ts vendored
View File

@ -7,8 +7,18 @@ export type LinkType = {
icon: IconType;
};
export type ProfilePageStatusType = 'update-password' | 'update-email' | 'default';
export type ProfilePageStatusType = {
status: 'update-password' | 'update-email' | 'confirm-email' | 'default';
data?: {
/**
* The field that is set when trying to change the mail address through form
*/
confirmEmailData?: {
newEmail: string;
};
};
};
export type ProfilePageViewStatusContextType = {
statusPageView: ProfilePageStatusType;
statusPageView: ProfilePageStatusType['status'];
setStatusPageView: React.Dispatch<React.SetStateAction<ProfilePageStatusType>>;
};