🎨 Format with Prettier (#646)
This commit is contained in:
Alejandra
@@ -1,29 +1,39 @@
|
||||
import React from 'react';
|
||||
|
||||
import { Badge, Container, Heading, Radio, RadioGroup, Stack, useColorMode } from '@chakra-ui/react';
|
||||
import React from 'react'
|
||||
import {
|
||||
Badge,
|
||||
Container,
|
||||
Heading,
|
||||
Radio,
|
||||
RadioGroup,
|
||||
Stack,
|
||||
useColorMode,
|
||||
} from '@chakra-ui/react'
|
||||
|
||||
const Appearance: React.FC = () => {
|
||||
const { colorMode, toggleColorMode } = useColorMode();
|
||||
const { colorMode, toggleColorMode } = useColorMode()
|
||||
|
||||
return (
|
||||
<>
|
||||
<Container maxW='full'>
|
||||
<Heading size='sm' py={4}>
|
||||
Appearance
|
||||
</Heading>
|
||||
<RadioGroup onChange={toggleColorMode} value={colorMode}>
|
||||
<Stack>
|
||||
{/* TODO: Add system default option */}
|
||||
<Radio value='light' colorScheme='teal'>
|
||||
Light mode<Badge ml='1' colorScheme='teal'>Default</Badge>
|
||||
</Radio>
|
||||
<Radio value='dark' colorScheme='teal'>
|
||||
Dark mode
|
||||
</Radio>
|
||||
</Stack>
|
||||
</RadioGroup>
|
||||
</Container>
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<Container maxW="full">
|
||||
<Heading size="sm" py={4}>
|
||||
Appearance
|
||||
</Heading>
|
||||
<RadioGroup onChange={toggleColorMode} value={colorMode}>
|
||||
<Stack>
|
||||
{/* TODO: Add system default option */}
|
||||
<Radio value="light" colorScheme="teal">
|
||||
Light mode
|
||||
<Badge ml="1" colorScheme="teal">
|
||||
Default
|
||||
</Badge>
|
||||
</Radio>
|
||||
<Radio value="dark" colorScheme="teal">
|
||||
Dark mode
|
||||
</Radio>
|
||||
</Stack>
|
||||
</RadioGroup>
|
||||
</Container>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default Appearance;
|
||||
export default Appearance
|
||||
|
||||
@@ -1,74 +1,137 @@
|
||||
import React from 'react';
|
||||
import React from 'react'
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Container,
|
||||
FormControl,
|
||||
FormErrorMessage,
|
||||
FormLabel,
|
||||
Heading,
|
||||
Input,
|
||||
useColorModeValue,
|
||||
} from '@chakra-ui/react'
|
||||
import { SubmitHandler, useForm } from 'react-hook-form'
|
||||
import { useMutation } from 'react-query'
|
||||
|
||||
import { Box, Button, Container, FormControl, FormErrorMessage, FormLabel, Heading, Input, useColorModeValue } from '@chakra-ui/react';
|
||||
import { SubmitHandler, useForm } from 'react-hook-form';
|
||||
import { useMutation } from 'react-query';
|
||||
|
||||
import { ApiError, UpdatePassword, UsersService } from '../../client';
|
||||
import useCustomToast from '../../hooks/useCustomToast';
|
||||
import { ApiError, UpdatePassword, UsersService } from '../../client'
|
||||
import useCustomToast from '../../hooks/useCustomToast'
|
||||
|
||||
interface UpdatePasswordForm extends UpdatePassword {
|
||||
confirm_password: string;
|
||||
confirm_password: string
|
||||
}
|
||||
|
||||
const ChangePassword: React.FC = () => {
|
||||
const color = useColorModeValue('gray.700', 'white');
|
||||
const showToast = useCustomToast();
|
||||
const { register, handleSubmit, reset, getValues, formState: { errors, isSubmitting } } = useForm<UpdatePasswordForm>({
|
||||
mode: 'onBlur',
|
||||
criteriaMode: 'all'
|
||||
});
|
||||
const color = useColorModeValue('gray.700', 'white')
|
||||
const showToast = useCustomToast()
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
reset,
|
||||
getValues,
|
||||
formState: { errors, isSubmitting },
|
||||
} = useForm<UpdatePasswordForm>({
|
||||
mode: 'onBlur',
|
||||
criteriaMode: 'all',
|
||||
})
|
||||
|
||||
const UpdatePassword = async (data: UpdatePassword) => {
|
||||
await UsersService.updatePasswordMe({ requestBody: data })
|
||||
}
|
||||
const UpdatePassword = async (data: UpdatePassword) => {
|
||||
await UsersService.updatePasswordMe({ requestBody: data })
|
||||
}
|
||||
|
||||
const mutation = useMutation(UpdatePassword, {
|
||||
onSuccess: () => {
|
||||
showToast('Success!', 'Password updated.', 'success');
|
||||
reset();
|
||||
},
|
||||
onError: (err: ApiError) => {
|
||||
const errDetail = err.body.detail;
|
||||
showToast('Something went wrong.', `${errDetail}`, 'error');
|
||||
}
|
||||
})
|
||||
const mutation = useMutation(UpdatePassword, {
|
||||
onSuccess: () => {
|
||||
showToast('Success!', 'Password updated.', 'success')
|
||||
reset()
|
||||
},
|
||||
onError: (err: ApiError) => {
|
||||
const errDetail = err.body.detail
|
||||
showToast('Something went wrong.', `${errDetail}`, 'error')
|
||||
},
|
||||
})
|
||||
|
||||
const onSubmit: SubmitHandler<UpdatePasswordForm> = async (data) => {
|
||||
mutation.mutate(data);
|
||||
}
|
||||
const onSubmit: SubmitHandler<UpdatePasswordForm> = async (data) => {
|
||||
mutation.mutate(data)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Container maxW='full' as='form' onSubmit={handleSubmit(onSubmit)}>
|
||||
<Heading size='sm' py={4}>
|
||||
Change Password
|
||||
</Heading>
|
||||
<Box w={{ 'sm': 'full', 'md': '50%' }}>
|
||||
<FormControl isRequired isInvalid={!!errors.current_password}>
|
||||
<FormLabel color={color} htmlFor='current_password'>Current password</FormLabel>
|
||||
<Input id='current_password' {...register('current_password', { required: 'Password is required', minLength: { value: 8, message: 'Password must be at least 8 characters' } })} placeholder='Password' type='password' />
|
||||
{errors.current_password && <FormErrorMessage>{errors.current_password.message}</FormErrorMessage>}
|
||||
</FormControl>
|
||||
<FormControl mt={4} isRequired isInvalid={!!errors.new_password}>
|
||||
<FormLabel htmlFor='password'>Set Password</FormLabel>
|
||||
<Input id='password' {...register('new_password', { required: 'Password is required', minLength: { value: 8, message: 'Password must be at least 8 characters' } })} placeholder='Password' type='password' />
|
||||
{errors.new_password && <FormErrorMessage>{errors.new_password.message}</FormErrorMessage>}
|
||||
</FormControl>
|
||||
<FormControl mt={4} isRequired isInvalid={!!errors.confirm_password}>
|
||||
<FormLabel htmlFor='confirm_password'>Confirm Password</FormLabel>
|
||||
<Input id='confirm_password' {...register('confirm_password', {
|
||||
required: 'Please confirm your password',
|
||||
validate: value => value === getValues().new_password || 'The passwords do not match'
|
||||
})} placeholder='Password' type='password' />
|
||||
{errors.confirm_password && <FormErrorMessage>{errors.confirm_password.message}</FormErrorMessage>}
|
||||
</FormControl>
|
||||
<Button bg='ui.main' color='white' _hover={{ opacity: 0.8 }} mt={4} type='submit' isLoading={isSubmitting}>
|
||||
Save
|
||||
</Button>
|
||||
</Box>
|
||||
</ Container>
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<Container maxW="full" as="form" onSubmit={handleSubmit(onSubmit)}>
|
||||
<Heading size="sm" py={4}>
|
||||
Change Password
|
||||
</Heading>
|
||||
<Box w={{ sm: 'full', md: '50%' }}>
|
||||
<FormControl isRequired isInvalid={!!errors.current_password}>
|
||||
<FormLabel color={color} htmlFor="current_password">
|
||||
Current password
|
||||
</FormLabel>
|
||||
<Input
|
||||
id="current_password"
|
||||
{...register('current_password', {
|
||||
required: 'Password is required',
|
||||
minLength: {
|
||||
value: 8,
|
||||
message: 'Password must be at least 8 characters',
|
||||
},
|
||||
})}
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
/>
|
||||
{errors.current_password && (
|
||||
<FormErrorMessage>
|
||||
{errors.current_password.message}
|
||||
</FormErrorMessage>
|
||||
)}
|
||||
</FormControl>
|
||||
<FormControl mt={4} isRequired isInvalid={!!errors.new_password}>
|
||||
<FormLabel htmlFor="password">Set Password</FormLabel>
|
||||
<Input
|
||||
id="password"
|
||||
{...register('new_password', {
|
||||
required: 'Password is required',
|
||||
minLength: {
|
||||
value: 8,
|
||||
message: 'Password must be at least 8 characters',
|
||||
},
|
||||
})}
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
/>
|
||||
{errors.new_password && (
|
||||
<FormErrorMessage>{errors.new_password.message}</FormErrorMessage>
|
||||
)}
|
||||
</FormControl>
|
||||
<FormControl mt={4} isRequired isInvalid={!!errors.confirm_password}>
|
||||
<FormLabel htmlFor="confirm_password">Confirm Password</FormLabel>
|
||||
<Input
|
||||
id="confirm_password"
|
||||
{...register('confirm_password', {
|
||||
required: 'Please confirm your password',
|
||||
validate: (value) =>
|
||||
value === getValues().new_password ||
|
||||
'The passwords do not match',
|
||||
})}
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
/>
|
||||
{errors.confirm_password && (
|
||||
<FormErrorMessage>
|
||||
{errors.confirm_password.message}
|
||||
</FormErrorMessage>
|
||||
)}
|
||||
</FormControl>
|
||||
<Button
|
||||
bg="ui.main"
|
||||
color="white"
|
||||
_hover={{ opacity: 0.8 }}
|
||||
mt={4}
|
||||
type="submit"
|
||||
isLoading={isSubmitting}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
</Box>
|
||||
</Container>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default ChangePassword;
|
||||
export default ChangePassword
|
||||
|
||||
@@ -1,27 +1,42 @@
|
||||
import React from 'react';
|
||||
import React from 'react'
|
||||
import {
|
||||
Button,
|
||||
Container,
|
||||
Heading,
|
||||
Text,
|
||||
useDisclosure,
|
||||
} from '@chakra-ui/react'
|
||||
|
||||
import { Button, Container, Heading, Text, useDisclosure } from '@chakra-ui/react';
|
||||
|
||||
import DeleteConfirmation from './DeleteConfirmation';
|
||||
import DeleteConfirmation from './DeleteConfirmation'
|
||||
|
||||
const DeleteAccount: React.FC = () => {
|
||||
const confirmationModal = useDisclosure();
|
||||
const confirmationModal = useDisclosure()
|
||||
|
||||
return (
|
||||
<>
|
||||
<Container maxW='full'>
|
||||
<Heading size='sm' py={4}>
|
||||
Delete Account
|
||||
</Heading>
|
||||
<Text>
|
||||
Are you sure you want to delete your account? This action cannot be undone.
|
||||
</Text>
|
||||
<Button bg='ui.danger' color='white' _hover={{ opacity: 0.8 }} mt={4} onClick={confirmationModal.onOpen}>
|
||||
Delete
|
||||
</Button>
|
||||
<DeleteConfirmation isOpen={confirmationModal.isOpen} onClose={confirmationModal.onClose} />
|
||||
</ Container>
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<Container maxW="full">
|
||||
<Heading size="sm" py={4}>
|
||||
Delete Account
|
||||
</Heading>
|
||||
<Text>
|
||||
Are you sure you want to delete your account? This action cannot be
|
||||
undone.
|
||||
</Text>
|
||||
<Button
|
||||
bg="ui.danger"
|
||||
color="white"
|
||||
_hover={{ opacity: 0.8 }}
|
||||
mt={4}
|
||||
onClick={confirmationModal.onOpen}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
<DeleteConfirmation
|
||||
isOpen={confirmationModal.isOpen}
|
||||
onClose={confirmationModal.onClose}
|
||||
/>
|
||||
</Container>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default DeleteAccount;
|
||||
export default DeleteAccount
|
||||
|
||||
@@ -1,86 +1,105 @@
|
||||
import React from 'react';
|
||||
import React from 'react'
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogBody,
|
||||
AlertDialogContent,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogOverlay,
|
||||
Button,
|
||||
} from '@chakra-ui/react'
|
||||
import { useForm } from 'react-hook-form'
|
||||
import { useMutation, useQueryClient } from 'react-query'
|
||||
|
||||
import { AlertDialog, AlertDialogBody, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, Button } from '@chakra-ui/react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { useMutation, useQueryClient } from 'react-query';
|
||||
|
||||
import { ApiError, UserOut, UsersService } from '../../client';
|
||||
import useAuth from '../../hooks/useAuth';
|
||||
import useCustomToast from '../../hooks/useCustomToast';
|
||||
import { ApiError, UserOut, UsersService } from '../../client'
|
||||
import useAuth from '../../hooks/useAuth'
|
||||
import useCustomToast from '../../hooks/useCustomToast'
|
||||
|
||||
interface DeleteProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
const DeleteConfirmation: React.FC<DeleteProps> = ({ isOpen, onClose }) => {
|
||||
const queryClient = useQueryClient();
|
||||
const showToast = useCustomToast();
|
||||
const cancelRef = React.useRef<HTMLButtonElement | null>(null);
|
||||
const { handleSubmit, formState: { isSubmitting } } = useForm();
|
||||
const currentUser = queryClient.getQueryData<UserOut>('currentUser');
|
||||
const { logout } = useAuth();
|
||||
const queryClient = useQueryClient()
|
||||
const showToast = useCustomToast()
|
||||
const cancelRef = React.useRef<HTMLButtonElement | null>(null)
|
||||
const {
|
||||
handleSubmit,
|
||||
formState: { isSubmitting },
|
||||
} = useForm()
|
||||
const currentUser = queryClient.getQueryData<UserOut>('currentUser')
|
||||
const { logout } = useAuth()
|
||||
|
||||
const deleteCurrentUser = async (id: number) => {
|
||||
await UsersService.deleteUser({ userId: id });
|
||||
}
|
||||
const deleteCurrentUser = async (id: number) => {
|
||||
await UsersService.deleteUser({ userId: id })
|
||||
}
|
||||
|
||||
const mutation = useMutation(deleteCurrentUser, {
|
||||
onSuccess: () => {
|
||||
showToast('Success', 'Your account has been successfully deleted.', 'success');
|
||||
logout();
|
||||
onClose();
|
||||
},
|
||||
onError: (err: ApiError) => {
|
||||
const errDetail = err.body.detail;
|
||||
showToast('Something went wrong.', `${errDetail}`, 'error');
|
||||
},
|
||||
onSettled: () => {
|
||||
queryClient.invalidateQueries('currentUser');
|
||||
}
|
||||
})
|
||||
const mutation = useMutation(deleteCurrentUser, {
|
||||
onSuccess: () => {
|
||||
showToast(
|
||||
'Success',
|
||||
'Your account has been successfully deleted.',
|
||||
'success',
|
||||
)
|
||||
logout()
|
||||
onClose()
|
||||
},
|
||||
onError: (err: ApiError) => {
|
||||
const errDetail = err.body.detail
|
||||
showToast('Something went wrong.', `${errDetail}`, 'error')
|
||||
},
|
||||
onSettled: () => {
|
||||
queryClient.invalidateQueries('currentUser')
|
||||
},
|
||||
})
|
||||
|
||||
const onSubmit = async () => {
|
||||
mutation.mutate(currentUser!.id)
|
||||
}
|
||||
|
||||
const onSubmit = async () => {
|
||||
mutation.mutate(currentUser!.id);
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<AlertDialog
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
leastDestructiveRef={cancelRef}
|
||||
size={{ base: 'sm', md: 'md' }}
|
||||
isCentered
|
||||
>
|
||||
<AlertDialogOverlay>
|
||||
<AlertDialogContent as="form" onSubmit={handleSubmit(onSubmit)}>
|
||||
<AlertDialogHeader>Confirmation Required</AlertDialogHeader>
|
||||
|
||||
return (
|
||||
<>
|
||||
<AlertDialog
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
leastDestructiveRef={cancelRef}
|
||||
size={{ base: 'sm', md: 'md' }}
|
||||
isCentered
|
||||
>
|
||||
<AlertDialogOverlay>
|
||||
<AlertDialogContent as='form' onSubmit={handleSubmit(onSubmit)}>
|
||||
<AlertDialogHeader>
|
||||
Confirmation Required
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogBody>
|
||||
All your account data will be{' '}
|
||||
<strong>permanently deleted.</strong> If you are sure, please
|
||||
click <strong>'Confirm'</strong> to proceed.
|
||||
</AlertDialogBody>
|
||||
|
||||
<AlertDialogBody>
|
||||
All your account data will be <strong>permanently deleted.</strong> If you are sure, please click <strong>'Confirm'</strong> to proceed.
|
||||
</AlertDialogBody>
|
||||
|
||||
<AlertDialogFooter gap={3}>
|
||||
<Button bg='ui.danger' color='white' _hover={{ opacity: 0.8 }} type='submit' isLoading={isSubmitting}>
|
||||
Confirm
|
||||
</Button>
|
||||
<Button ref={cancelRef} onClick={onClose} isDisabled={isSubmitting}>
|
||||
Cancel
|
||||
</Button>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialogOverlay>
|
||||
</AlertDialog >
|
||||
</>
|
||||
)
|
||||
<AlertDialogFooter gap={3}>
|
||||
<Button
|
||||
bg="ui.danger"
|
||||
color="white"
|
||||
_hover={{ opacity: 0.8 }}
|
||||
type="submit"
|
||||
isLoading={isSubmitting}
|
||||
>
|
||||
Confirm
|
||||
</Button>
|
||||
<Button
|
||||
ref={cancelRef}
|
||||
onClick={onClose}
|
||||
isDisabled={isSubmitting}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialogOverlay>
|
||||
</AlertDialog>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default DeleteConfirmation;
|
||||
|
||||
|
||||
|
||||
|
||||
export default DeleteConfirmation
|
||||
|
||||
@@ -1,106 +1,147 @@
|
||||
import React, { useState } from 'react';
|
||||
import React, { useState } from 'react'
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Container,
|
||||
Flex,
|
||||
FormControl,
|
||||
FormErrorMessage,
|
||||
FormLabel,
|
||||
Heading,
|
||||
Input,
|
||||
Text,
|
||||
useColorModeValue,
|
||||
} from '@chakra-ui/react'
|
||||
import { SubmitHandler, useForm } from 'react-hook-form'
|
||||
import { useMutation, useQueryClient } from 'react-query'
|
||||
|
||||
import { Box, Button, Container, Flex, FormControl, FormErrorMessage, FormLabel, Heading, Input, Text, useColorModeValue } from '@chakra-ui/react';
|
||||
import { SubmitHandler, useForm } from 'react-hook-form';
|
||||
import { useMutation, useQueryClient } from 'react-query';
|
||||
|
||||
import { ApiError, UserOut, UserUpdateMe, UsersService } from '../../client';
|
||||
import useAuth from '../../hooks/useAuth';
|
||||
import useCustomToast from '../../hooks/useCustomToast';
|
||||
import { ApiError, UserOut, UserUpdateMe, UsersService } from '../../client'
|
||||
import useAuth from '../../hooks/useAuth'
|
||||
import useCustomToast from '../../hooks/useCustomToast'
|
||||
|
||||
const UserInformation: React.FC = () => {
|
||||
const queryClient = useQueryClient();
|
||||
const color = useColorModeValue('gray.700', 'white');
|
||||
const showToast = useCustomToast();
|
||||
const [editMode, setEditMode] = useState(false);
|
||||
const { user: currentUser } = useAuth();
|
||||
const { register, handleSubmit, reset, formState: { isSubmitting, errors, isDirty } } = useForm<UserOut>({
|
||||
mode: 'onBlur', criteriaMode: 'all', defaultValues: {
|
||||
full_name: currentUser?.full_name,
|
||||
email: currentUser?.email
|
||||
}
|
||||
})
|
||||
const queryClient = useQueryClient()
|
||||
const color = useColorModeValue('gray.700', 'white')
|
||||
const showToast = useCustomToast()
|
||||
const [editMode, setEditMode] = useState(false)
|
||||
const { user: currentUser } = useAuth()
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
reset,
|
||||
formState: { isSubmitting, errors, isDirty },
|
||||
} = useForm<UserOut>({
|
||||
mode: 'onBlur',
|
||||
criteriaMode: 'all',
|
||||
defaultValues: {
|
||||
full_name: currentUser?.full_name,
|
||||
email: currentUser?.email,
|
||||
},
|
||||
})
|
||||
|
||||
const toggleEditMode = () => {
|
||||
setEditMode(!editMode);
|
||||
};
|
||||
const toggleEditMode = () => {
|
||||
setEditMode(!editMode)
|
||||
}
|
||||
|
||||
const updateInfo = async (data: UserUpdateMe) => {
|
||||
await UsersService.updateUserMe({ requestBody: data })
|
||||
}
|
||||
const updateInfo = async (data: UserUpdateMe) => {
|
||||
await UsersService.updateUserMe({ requestBody: data })
|
||||
}
|
||||
|
||||
const mutation = useMutation(updateInfo, {
|
||||
onSuccess: () => {
|
||||
showToast('Success!', 'User updated successfully.', 'success');
|
||||
},
|
||||
onError: (err: ApiError) => {
|
||||
const errDetail = err.body.detail;
|
||||
showToast('Something went wrong.', `${errDetail}`, 'error');
|
||||
},
|
||||
onSettled: () => {
|
||||
queryClient.invalidateQueries('users');
|
||||
queryClient.invalidateQueries('currentUser');
|
||||
}
|
||||
});
|
||||
const mutation = useMutation(updateInfo, {
|
||||
onSuccess: () => {
|
||||
showToast('Success!', 'User updated successfully.', 'success')
|
||||
},
|
||||
onError: (err: ApiError) => {
|
||||
const errDetail = err.body.detail
|
||||
showToast('Something went wrong.', `${errDetail}`, 'error')
|
||||
},
|
||||
onSettled: () => {
|
||||
queryClient.invalidateQueries('users')
|
||||
queryClient.invalidateQueries('currentUser')
|
||||
},
|
||||
})
|
||||
|
||||
const onSubmit: SubmitHandler<UserUpdateMe> = async (data) => {
|
||||
mutation.mutate(data)
|
||||
}
|
||||
const onSubmit: SubmitHandler<UserUpdateMe> = async (data) => {
|
||||
mutation.mutate(data)
|
||||
}
|
||||
|
||||
const onCancel = () => {
|
||||
reset();
|
||||
toggleEditMode();
|
||||
}
|
||||
const onCancel = () => {
|
||||
reset()
|
||||
toggleEditMode()
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Container maxW='full' as='form' onSubmit={handleSubmit(onSubmit)}>
|
||||
<Heading size='sm' py={4}>
|
||||
User Information
|
||||
</Heading>
|
||||
<Box w={{ 'sm': 'full', 'md': '50%' }}>
|
||||
<FormControl>
|
||||
<FormLabel color={color} htmlFor='name'>Full name</FormLabel>
|
||||
{
|
||||
editMode ?
|
||||
<Input id='name' {...register('full_name', { maxLength: 30 })} type='text' size='md' /> :
|
||||
<Text size='md' py={2}>
|
||||
{currentUser?.full_name || 'N/A'}
|
||||
</Text>
|
||||
}
|
||||
</FormControl>
|
||||
<FormControl mt={4} isInvalid={!!errors.email}>
|
||||
<FormLabel color={color} htmlFor='email'>Email</FormLabel>
|
||||
{
|
||||
editMode ?
|
||||
<Input id='email' {...register('email', { required: 'Email is required', pattern: { value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i, message: 'Invalid email address' } })} type='text' size='md' /> :
|
||||
<Text size='md' py={2}>
|
||||
{currentUser!.email}
|
||||
</Text>
|
||||
}
|
||||
{errors.email && <FormErrorMessage>{errors.email.message}</FormErrorMessage>}
|
||||
</FormControl>
|
||||
<Flex mt={4} gap={3}>
|
||||
<Button
|
||||
bg='ui.main'
|
||||
color='white'
|
||||
_hover={{ opacity: 0.8 }}
|
||||
onClick={toggleEditMode}
|
||||
type={editMode ? 'button' : 'submit'}
|
||||
isLoading={editMode ? isSubmitting : false}
|
||||
isDisabled={editMode ? !isDirty : false}
|
||||
>
|
||||
{editMode ? 'Save' : 'Edit'}
|
||||
</Button>
|
||||
{editMode &&
|
||||
<Button onClick={onCancel} isDisabled={isSubmitting}>
|
||||
Cancel
|
||||
</Button>}
|
||||
</Flex>
|
||||
</Box>
|
||||
</ Container>
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<Container maxW="full" as="form" onSubmit={handleSubmit(onSubmit)}>
|
||||
<Heading size="sm" py={4}>
|
||||
User Information
|
||||
</Heading>
|
||||
<Box w={{ sm: 'full', md: '50%' }}>
|
||||
<FormControl>
|
||||
<FormLabel color={color} htmlFor="name">
|
||||
Full name
|
||||
</FormLabel>
|
||||
{editMode ? (
|
||||
<Input
|
||||
id="name"
|
||||
{...register('full_name', { maxLength: 30 })}
|
||||
type="text"
|
||||
size="md"
|
||||
/>
|
||||
) : (
|
||||
<Text size="md" py={2}>
|
||||
{currentUser?.full_name || 'N/A'}
|
||||
</Text>
|
||||
)}
|
||||
</FormControl>
|
||||
<FormControl mt={4} isInvalid={!!errors.email}>
|
||||
<FormLabel color={color} htmlFor="email">
|
||||
Email
|
||||
</FormLabel>
|
||||
{editMode ? (
|
||||
<Input
|
||||
id="email"
|
||||
{...register('email', {
|
||||
required: 'Email is required',
|
||||
pattern: {
|
||||
value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
|
||||
message: 'Invalid email address',
|
||||
},
|
||||
})}
|
||||
type="text"
|
||||
size="md"
|
||||
/>
|
||||
) : (
|
||||
<Text size="md" py={2}>
|
||||
{currentUser!.email}
|
||||
</Text>
|
||||
)}
|
||||
{errors.email && (
|
||||
<FormErrorMessage>{errors.email.message}</FormErrorMessage>
|
||||
)}
|
||||
</FormControl>
|
||||
<Flex mt={4} gap={3}>
|
||||
<Button
|
||||
bg="ui.main"
|
||||
color="white"
|
||||
_hover={{ opacity: 0.8 }}
|
||||
onClick={toggleEditMode}
|
||||
type={editMode ? 'button' : 'submit'}
|
||||
isLoading={editMode ? isSubmitting : false}
|
||||
isDisabled={editMode ? !isDirty : false}
|
||||
>
|
||||
{editMode ? 'Save' : 'Edit'}
|
||||
</Button>
|
||||
{editMode && (
|
||||
<Button onClick={onCancel} isDisabled={isSubmitting}>
|
||||
Cancel
|
||||
</Button>
|
||||
)}
|
||||
</Flex>
|
||||
</Box>
|
||||
</Container>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default UserInformation;
|
||||
export default UserInformation
|
||||
|
||||
Reference in New Issue
Block a user