🚚 Move new-frontend to frontend (#652)
This commit is contained in:
Alejandra
194
frontend/src/components/Admin/AddUser.tsx
Normal file
194
frontend/src/components/Admin/AddUser.tsx
Normal file
@@ -0,0 +1,194 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
Button,
|
||||
Checkbox,
|
||||
Flex,
|
||||
FormControl,
|
||||
FormErrorMessage,
|
||||
FormLabel,
|
||||
Input,
|
||||
Modal,
|
||||
ModalBody,
|
||||
ModalCloseButton,
|
||||
ModalContent,
|
||||
ModalFooter,
|
||||
ModalHeader,
|
||||
ModalOverlay,
|
||||
} from '@chakra-ui/react'
|
||||
import { SubmitHandler, useForm } from 'react-hook-form'
|
||||
import { useMutation, useQueryClient } from 'react-query'
|
||||
|
||||
import { UserCreate, UsersService } from '../../client'
|
||||
import { ApiError } from '../../client/core/ApiError'
|
||||
import useCustomToast from '../../hooks/useCustomToast'
|
||||
|
||||
interface AddUserProps {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
interface UserCreateForm extends UserCreate {
|
||||
confirm_password: string
|
||||
}
|
||||
|
||||
const AddUser: React.FC<AddUserProps> = ({ isOpen, onClose }) => {
|
||||
const queryClient = useQueryClient()
|
||||
const showToast = useCustomToast()
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
reset,
|
||||
getValues,
|
||||
formState: { errors, isSubmitting },
|
||||
} = useForm<UserCreateForm>({
|
||||
mode: 'onBlur',
|
||||
criteriaMode: 'all',
|
||||
defaultValues: {
|
||||
email: '',
|
||||
full_name: '',
|
||||
password: '',
|
||||
confirm_password: '',
|
||||
is_superuser: false,
|
||||
is_active: false,
|
||||
},
|
||||
})
|
||||
|
||||
const addUser = async (data: UserCreate) => {
|
||||
await UsersService.createUser({ requestBody: data })
|
||||
}
|
||||
|
||||
const mutation = useMutation(addUser, {
|
||||
onSuccess: () => {
|
||||
showToast('Success!', 'User created successfully.', 'success')
|
||||
reset()
|
||||
onClose()
|
||||
},
|
||||
onError: (err: ApiError) => {
|
||||
const errDetail = err.body.detail
|
||||
showToast('Something went wrong.', `${errDetail}`, 'error')
|
||||
},
|
||||
onSettled: () => {
|
||||
queryClient.invalidateQueries('users')
|
||||
},
|
||||
})
|
||||
|
||||
const onSubmit: SubmitHandler<UserCreateForm> = (data) => {
|
||||
mutation.mutate(data)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
size={{ base: 'sm', md: 'md' }}
|
||||
isCentered
|
||||
>
|
||||
<ModalOverlay />
|
||||
<ModalContent as="form" onSubmit={handleSubmit(onSubmit)}>
|
||||
<ModalHeader>Add User</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody pb={6}>
|
||||
<FormControl isRequired isInvalid={!!errors.email}>
|
||||
<FormLabel htmlFor="email">Email</FormLabel>
|
||||
<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',
|
||||
},
|
||||
})}
|
||||
placeholder="Email"
|
||||
type="email"
|
||||
/>
|
||||
{errors.email && (
|
||||
<FormErrorMessage>{errors.email.message}</FormErrorMessage>
|
||||
)}
|
||||
</FormControl>
|
||||
<FormControl mt={4} isInvalid={!!errors.full_name}>
|
||||
<FormLabel htmlFor="name">Full name</FormLabel>
|
||||
<Input
|
||||
id="name"
|
||||
{...register('full_name')}
|
||||
placeholder="Full name"
|
||||
type="text"
|
||||
/>
|
||||
{errors.full_name && (
|
||||
<FormErrorMessage>{errors.full_name.message}</FormErrorMessage>
|
||||
)}
|
||||
</FormControl>
|
||||
<FormControl mt={4} isRequired isInvalid={!!errors.password}>
|
||||
<FormLabel htmlFor="password">Set Password</FormLabel>
|
||||
<Input
|
||||
id="password"
|
||||
{...register('password', {
|
||||
required: 'Password is required',
|
||||
minLength: {
|
||||
value: 8,
|
||||
message: 'Password must be at least 8 characters',
|
||||
},
|
||||
})}
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
/>
|
||||
{errors.password && (
|
||||
<FormErrorMessage>{errors.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().password ||
|
||||
'The passwords do not match',
|
||||
})}
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
/>
|
||||
{errors.confirm_password && (
|
||||
<FormErrorMessage>
|
||||
{errors.confirm_password.message}
|
||||
</FormErrorMessage>
|
||||
)}
|
||||
</FormControl>
|
||||
<Flex mt={4}>
|
||||
<FormControl>
|
||||
<Checkbox {...register('is_superuser')} colorScheme="teal">
|
||||
Is superuser?
|
||||
</Checkbox>
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<Checkbox {...register('is_active')} colorScheme="teal">
|
||||
Is active?
|
||||
</Checkbox>
|
||||
</FormControl>
|
||||
</Flex>
|
||||
</ModalBody>
|
||||
<ModalFooter gap={3}>
|
||||
<Button
|
||||
bg="ui.main"
|
||||
color="white"
|
||||
_hover={{ opacity: 0.8 }}
|
||||
type="submit"
|
||||
isLoading={isSubmitting}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
<Button onClick={onClose}>Cancel</Button>
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default AddUser
|
||||
183
frontend/src/components/Admin/EditUser.tsx
Normal file
183
frontend/src/components/Admin/EditUser.tsx
Normal file
@@ -0,0 +1,183 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
Button,
|
||||
Checkbox,
|
||||
Flex,
|
||||
FormControl,
|
||||
FormErrorMessage,
|
||||
FormLabel,
|
||||
Input,
|
||||
Modal,
|
||||
ModalBody,
|
||||
ModalCloseButton,
|
||||
ModalContent,
|
||||
ModalFooter,
|
||||
ModalHeader,
|
||||
ModalOverlay,
|
||||
} from '@chakra-ui/react'
|
||||
import { SubmitHandler, useForm } from 'react-hook-form'
|
||||
import { useMutation, useQueryClient } from 'react-query'
|
||||
|
||||
import { ApiError, UserOut, UserUpdate, UsersService } from '../../client'
|
||||
import useCustomToast from '../../hooks/useCustomToast'
|
||||
|
||||
interface EditUserProps {
|
||||
user: UserOut
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
interface UserUpdateForm extends UserUpdate {
|
||||
confirm_password: string
|
||||
}
|
||||
|
||||
const EditUser: React.FC<EditUserProps> = ({ user, isOpen, onClose }) => {
|
||||
const queryClient = useQueryClient()
|
||||
const showToast = useCustomToast()
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
reset,
|
||||
getValues,
|
||||
formState: { errors, isSubmitting, isDirty },
|
||||
} = useForm<UserUpdateForm>({
|
||||
mode: 'onBlur',
|
||||
criteriaMode: 'all',
|
||||
defaultValues: user,
|
||||
})
|
||||
|
||||
const updateUser = async (data: UserUpdateForm) => {
|
||||
await UsersService.updateUser({ userId: user.id, requestBody: data })
|
||||
}
|
||||
|
||||
const mutation = useMutation(updateUser, {
|
||||
onSuccess: () => {
|
||||
showToast('Success!', 'User updated successfully.', 'success')
|
||||
onClose()
|
||||
},
|
||||
onError: (err: ApiError) => {
|
||||
const errDetail = err.body.detail
|
||||
showToast('Something went wrong.', `${errDetail}`, 'error')
|
||||
},
|
||||
onSettled: () => {
|
||||
queryClient.invalidateQueries('users')
|
||||
},
|
||||
})
|
||||
|
||||
const onSubmit: SubmitHandler<UserUpdateForm> = async (data) => {
|
||||
if (data.password === '') {
|
||||
delete data.password
|
||||
}
|
||||
mutation.mutate(data)
|
||||
}
|
||||
|
||||
const onCancel = () => {
|
||||
reset()
|
||||
onClose()
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
size={{ base: 'sm', md: 'md' }}
|
||||
isCentered
|
||||
>
|
||||
<ModalOverlay />
|
||||
<ModalContent as="form" onSubmit={handleSubmit(onSubmit)}>
|
||||
<ModalHeader>Edit User</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody pb={6}>
|
||||
<FormControl isInvalid={!!errors.email}>
|
||||
<FormLabel htmlFor="email">Email</FormLabel>
|
||||
<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',
|
||||
},
|
||||
})}
|
||||
placeholder="Email"
|
||||
type="email"
|
||||
/>
|
||||
{errors.email && (
|
||||
<FormErrorMessage>{errors.email.message}</FormErrorMessage>
|
||||
)}
|
||||
</FormControl>
|
||||
<FormControl mt={4}>
|
||||
<FormLabel htmlFor="name">Full name</FormLabel>
|
||||
<Input id="name" {...register('full_name')} type="text" />
|
||||
</FormControl>
|
||||
<FormControl mt={4} isInvalid={!!errors.password}>
|
||||
<FormLabel htmlFor="password">Set Password</FormLabel>
|
||||
<Input
|
||||
id="password"
|
||||
{...register('password', {
|
||||
minLength: {
|
||||
value: 8,
|
||||
message: 'Password must be at least 8 characters',
|
||||
},
|
||||
})}
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
/>
|
||||
{errors.password && (
|
||||
<FormErrorMessage>{errors.password.message}</FormErrorMessage>
|
||||
)}
|
||||
</FormControl>
|
||||
<FormControl mt={4} isInvalid={!!errors.confirm_password}>
|
||||
<FormLabel htmlFor="confirm_password">Confirm Password</FormLabel>
|
||||
<Input
|
||||
id="confirm_password"
|
||||
{...register('confirm_password', {
|
||||
validate: (value) =>
|
||||
value === getValues().password ||
|
||||
'The passwords do not match',
|
||||
})}
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
/>
|
||||
{errors.confirm_password && (
|
||||
<FormErrorMessage>
|
||||
{errors.confirm_password.message}
|
||||
</FormErrorMessage>
|
||||
)}
|
||||
</FormControl>
|
||||
<Flex>
|
||||
<FormControl mt={4}>
|
||||
<Checkbox {...register('is_superuser')} colorScheme="teal">
|
||||
Is superuser?
|
||||
</Checkbox>
|
||||
</FormControl>
|
||||
<FormControl mt={4}>
|
||||
<Checkbox {...register('is_active')} colorScheme="teal">
|
||||
Is active?
|
||||
</Checkbox>
|
||||
</FormControl>
|
||||
</Flex>
|
||||
</ModalBody>
|
||||
|
||||
<ModalFooter gap={3}>
|
||||
<Button
|
||||
bg="ui.main"
|
||||
color="white"
|
||||
_hover={{ opacity: 0.8 }}
|
||||
type="submit"
|
||||
isLoading={isSubmitting}
|
||||
isDisabled={!isDirty}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
<Button onClick={onCancel}>Cancel</Button>
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default EditUser
|
||||
76
frontend/src/components/Common/ActionsMenu.tsx
Normal file
76
frontend/src/components/Common/ActionsMenu.tsx
Normal file
@@ -0,0 +1,76 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
Button,
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuList,
|
||||
useDisclosure,
|
||||
} from '@chakra-ui/react'
|
||||
import { BsThreeDotsVertical } from 'react-icons/bs'
|
||||
import { FiEdit, FiTrash } from 'react-icons/fi'
|
||||
|
||||
import EditUser from '../Admin/EditUser'
|
||||
import EditItem from '../Items/EditItem'
|
||||
import Delete from './DeleteAlert'
|
||||
import { ItemOut, UserOut } from '../../client'
|
||||
|
||||
interface ActionsMenuProps {
|
||||
type: string
|
||||
value: ItemOut | UserOut
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
const ActionsMenu: React.FC<ActionsMenuProps> = ({ type, value, disabled }) => {
|
||||
const editUserModal = useDisclosure()
|
||||
const deleteModal = useDisclosure()
|
||||
|
||||
return (
|
||||
<>
|
||||
<Menu>
|
||||
<MenuButton
|
||||
isDisabled={disabled}
|
||||
as={Button}
|
||||
rightIcon={<BsThreeDotsVertical />}
|
||||
variant="unstyled"
|
||||
></MenuButton>
|
||||
<MenuList>
|
||||
<MenuItem
|
||||
onClick={editUserModal.onOpen}
|
||||
icon={<FiEdit fontSize="16px" />}
|
||||
>
|
||||
Edit {type}
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={deleteModal.onOpen}
|
||||
icon={<FiTrash fontSize="16px" />}
|
||||
color="ui.danger"
|
||||
>
|
||||
Delete {type}
|
||||
</MenuItem>
|
||||
</MenuList>
|
||||
{type === 'User' ? (
|
||||
<EditUser
|
||||
user={value as UserOut}
|
||||
isOpen={editUserModal.isOpen}
|
||||
onClose={editUserModal.onClose}
|
||||
/>
|
||||
) : (
|
||||
<EditItem
|
||||
item={value as ItemOut}
|
||||
isOpen={editUserModal.isOpen}
|
||||
onClose={editUserModal.onClose}
|
||||
/>
|
||||
)}
|
||||
<Delete
|
||||
type={type}
|
||||
id={value.id}
|
||||
isOpen={deleteModal.isOpen}
|
||||
onClose={deleteModal.onClose}
|
||||
/>
|
||||
</Menu>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default ActionsMenu
|
||||
116
frontend/src/components/Common/DeleteAlert.tsx
Normal file
116
frontend/src/components/Common/DeleteAlert.tsx
Normal file
@@ -0,0 +1,116 @@
|
||||
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 { ItemsService, UsersService } from '../../client'
|
||||
import useCustomToast from '../../hooks/useCustomToast'
|
||||
|
||||
interface DeleteProps {
|
||||
type: string
|
||||
id: number
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
const Delete: React.FC<DeleteProps> = ({ type, id, isOpen, onClose }) => {
|
||||
const queryClient = useQueryClient()
|
||||
const showToast = useCustomToast()
|
||||
const cancelRef = React.useRef<HTMLButtonElement | null>(null)
|
||||
const {
|
||||
handleSubmit,
|
||||
formState: { isSubmitting },
|
||||
} = useForm()
|
||||
|
||||
const deleteEntity = async (id: number) => {
|
||||
if (type === 'Item') {
|
||||
await ItemsService.deleteItem({ id: id })
|
||||
} else if (type === 'User') {
|
||||
await UsersService.deleteUser({ userId: id })
|
||||
} else {
|
||||
throw new Error(`Unexpected type: ${type}`)
|
||||
}
|
||||
}
|
||||
|
||||
const mutation = useMutation(deleteEntity, {
|
||||
onSuccess: () => {
|
||||
showToast(
|
||||
'Success',
|
||||
`The ${type.toLowerCase()} was deleted successfully.`,
|
||||
'success',
|
||||
)
|
||||
onClose()
|
||||
},
|
||||
onError: () => {
|
||||
showToast(
|
||||
'An error occurred.',
|
||||
`An error occurred while deleting the ${type.toLowerCase()}.`,
|
||||
'error',
|
||||
)
|
||||
},
|
||||
onSettled: () => {
|
||||
queryClient.invalidateQueries(type === 'Item' ? 'items' : 'users')
|
||||
},
|
||||
})
|
||||
|
||||
const onSubmit = async () => {
|
||||
mutation.mutate(id)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<AlertDialog
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
leastDestructiveRef={cancelRef}
|
||||
size={{ base: 'sm', md: 'md' }}
|
||||
isCentered
|
||||
>
|
||||
<AlertDialogOverlay>
|
||||
<AlertDialogContent as="form" onSubmit={handleSubmit(onSubmit)}>
|
||||
<AlertDialogHeader>Delete {type}</AlertDialogHeader>
|
||||
|
||||
<AlertDialogBody>
|
||||
{type === 'User' && (
|
||||
<span>
|
||||
All items associated with this user will also be{' '}
|
||||
<strong>permantly deleted. </strong>
|
||||
</span>
|
||||
)}
|
||||
Are you sure? You will not be able to undo this action.
|
||||
</AlertDialogBody>
|
||||
|
||||
<AlertDialogFooter gap={3}>
|
||||
<Button
|
||||
bg="ui.danger"
|
||||
color="white"
|
||||
_hover={{ opacity: 0.8 }}
|
||||
type="submit"
|
||||
isLoading={isSubmitting}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
<Button
|
||||
ref={cancelRef}
|
||||
onClick={onClose}
|
||||
isDisabled={isSubmitting}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialogOverlay>
|
||||
</AlertDialog>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Delete
|
||||
43
frontend/src/components/Common/Navbar.tsx
Normal file
43
frontend/src/components/Common/Navbar.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
import React from 'react'
|
||||
import { Button, Flex, Icon, useDisclosure } from '@chakra-ui/react'
|
||||
import { FaPlus } from 'react-icons/fa'
|
||||
|
||||
import AddUser from '../Admin/AddUser'
|
||||
import AddItem from '../Items/AddItem'
|
||||
|
||||
interface NavbarProps {
|
||||
type: string
|
||||
}
|
||||
|
||||
const Navbar: React.FC<NavbarProps> = ({ type }) => {
|
||||
const addUserModal = useDisclosure()
|
||||
const addItemModal = useDisclosure()
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex py={8} gap={4}>
|
||||
{/* TODO: Complete search functionality */}
|
||||
{/* <InputGroup w={{ base: '100%', md: 'auto' }}>
|
||||
<InputLeftElement pointerEvents='none'>
|
||||
<Icon as={FaSearch} color='gray.400' />
|
||||
</InputLeftElement>
|
||||
<Input type='text' placeholder='Search' fontSize={{ base: 'sm', md: 'inherit' }} borderRadius='8px' />
|
||||
</InputGroup> */}
|
||||
<Button
|
||||
bg="ui.main"
|
||||
color="white"
|
||||
_hover={{ opacity: 0.8 }}
|
||||
gap={1}
|
||||
fontSize={{ base: 'sm', md: 'inherit' }}
|
||||
onClick={type === 'User' ? addUserModal.onOpen : addItemModal.onOpen}
|
||||
>
|
||||
<Icon as={FaPlus} /> Add {type}
|
||||
</Button>
|
||||
<AddUser isOpen={addUserModal.isOpen} onClose={addUserModal.onClose} />
|
||||
<AddItem isOpen={addItemModal.isOpen} onClose={addItemModal.onClose} />
|
||||
</Flex>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Navbar
|
||||
42
frontend/src/components/Common/NotFound.tsx
Normal file
42
frontend/src/components/Common/NotFound.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
import React from 'react'
|
||||
import { Button, Container, Text } from '@chakra-ui/react'
|
||||
import { Link } from '@tanstack/react-router'
|
||||
|
||||
const NotFound: React.FC = () => {
|
||||
return (
|
||||
<>
|
||||
<Container
|
||||
h="100vh"
|
||||
alignItems="stretch"
|
||||
justifyContent="center"
|
||||
textAlign="center"
|
||||
maxW="sm"
|
||||
centerContent
|
||||
>
|
||||
<Text
|
||||
fontSize="8xl"
|
||||
color="ui.main"
|
||||
fontWeight="bold"
|
||||
lineHeight="1"
|
||||
mb={4}
|
||||
>
|
||||
404
|
||||
</Text>
|
||||
<Text fontSize="md">Oops!</Text>
|
||||
<Text fontSize="md">Page not found.</Text>
|
||||
<Button
|
||||
as={Link}
|
||||
to="/"
|
||||
color="ui.main"
|
||||
borderColor="ui.main"
|
||||
variant="outline"
|
||||
mt={4}
|
||||
>
|
||||
Go back
|
||||
</Button>
|
||||
</Container>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default NotFound
|
||||
117
frontend/src/components/Common/Sidebar.tsx
Normal file
117
frontend/src/components/Common/Sidebar.tsx
Normal file
@@ -0,0 +1,117 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
Box,
|
||||
Drawer,
|
||||
DrawerBody,
|
||||
DrawerCloseButton,
|
||||
DrawerContent,
|
||||
DrawerOverlay,
|
||||
Flex,
|
||||
IconButton,
|
||||
Image,
|
||||
Text,
|
||||
useColorModeValue,
|
||||
useDisclosure,
|
||||
} from '@chakra-ui/react'
|
||||
import { FiLogOut, FiMenu } from 'react-icons/fi'
|
||||
import { useQueryClient } from 'react-query'
|
||||
|
||||
import Logo from '../../assets/images/fastapi-logo.svg'
|
||||
import { UserOut } from '../../client'
|
||||
import useAuth from '../../hooks/useAuth'
|
||||
import SidebarItems from './SidebarItems'
|
||||
|
||||
const Sidebar: React.FC = () => {
|
||||
const queryClient = useQueryClient()
|
||||
const bgColor = useColorModeValue('white', '#1a202c')
|
||||
const textColor = useColorModeValue('gray', 'white')
|
||||
const secBgColor = useColorModeValue('ui.secondary', '#252d3d')
|
||||
const currentUser = queryClient.getQueryData<UserOut>('currentUser')
|
||||
const { isOpen, onOpen, onClose } = useDisclosure()
|
||||
const { logout } = useAuth()
|
||||
|
||||
const handleLogout = async () => {
|
||||
logout()
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Mobile */}
|
||||
<IconButton
|
||||
onClick={onOpen}
|
||||
display={{ base: 'flex', md: 'none' }}
|
||||
aria-label="Open Menu"
|
||||
position="absolute"
|
||||
fontSize="20px"
|
||||
m={4}
|
||||
icon={<FiMenu />}
|
||||
/>
|
||||
<Drawer isOpen={isOpen} placement="left" onClose={onClose}>
|
||||
<DrawerOverlay />
|
||||
<DrawerContent maxW="250px">
|
||||
<DrawerCloseButton />
|
||||
<DrawerBody py={8}>
|
||||
<Flex flexDir="column" justify="space-between">
|
||||
<Box>
|
||||
<Image src={Logo} alt="logo" p={6} />
|
||||
<SidebarItems onClose={onClose} />
|
||||
<Flex
|
||||
as="button"
|
||||
onClick={handleLogout}
|
||||
p={2}
|
||||
color="ui.danger"
|
||||
fontWeight="bold"
|
||||
alignItems="center"
|
||||
>
|
||||
<FiLogOut />
|
||||
<Text ml={2}>Log out</Text>
|
||||
</Flex>
|
||||
</Box>
|
||||
{currentUser?.email && (
|
||||
<Text color={textColor} noOfLines={2} fontSize="sm" p={2}>
|
||||
Logged in as: {currentUser.email}
|
||||
</Text>
|
||||
)}
|
||||
</Flex>
|
||||
</DrawerBody>
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
|
||||
{/* Desktop */}
|
||||
<Box
|
||||
bg={bgColor}
|
||||
p={3}
|
||||
h="100vh"
|
||||
position="sticky"
|
||||
top="0"
|
||||
display={{ base: 'none', md: 'flex' }}
|
||||
>
|
||||
<Flex
|
||||
flexDir="column"
|
||||
justify="space-between"
|
||||
bg={secBgColor}
|
||||
p={4}
|
||||
borderRadius={12}
|
||||
>
|
||||
<Box>
|
||||
<Image src={Logo} alt="Logo" w="180px" maxW="2xs" p={6} />
|
||||
<SidebarItems />
|
||||
</Box>
|
||||
{currentUser?.email && (
|
||||
<Text
|
||||
color={textColor}
|
||||
noOfLines={2}
|
||||
fontSize="sm"
|
||||
p={2}
|
||||
maxW="180px"
|
||||
>
|
||||
Logged in as: {currentUser.email}
|
||||
</Text>
|
||||
)}
|
||||
</Flex>
|
||||
</Box>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Sidebar
|
||||
57
frontend/src/components/Common/SidebarItems.tsx
Normal file
57
frontend/src/components/Common/SidebarItems.tsx
Normal file
@@ -0,0 +1,57 @@
|
||||
import React from 'react'
|
||||
import { Box, Flex, Icon, Text, useColorModeValue } from '@chakra-ui/react'
|
||||
import { FiBriefcase, FiHome, FiSettings, FiUsers } from 'react-icons/fi'
|
||||
import { Link } from '@tanstack/react-router'
|
||||
import { useQueryClient } from 'react-query'
|
||||
|
||||
import { UserOut } from '../../client'
|
||||
|
||||
const items = [
|
||||
{ icon: FiHome, title: 'Dashboard', path: '/' },
|
||||
{ icon: FiBriefcase, title: 'Items', path: '/items' },
|
||||
{ icon: FiSettings, title: 'User Settings', path: '/settings' },
|
||||
]
|
||||
|
||||
interface SidebarItemsProps {
|
||||
onClose?: () => void
|
||||
}
|
||||
|
||||
const SidebarItems: React.FC<SidebarItemsProps> = ({ onClose }) => {
|
||||
const queryClient = useQueryClient()
|
||||
const textColor = useColorModeValue('ui.main', '#E2E8F0')
|
||||
const bgActive = useColorModeValue('#E2E8F0', '#4A5568')
|
||||
const currentUser = queryClient.getQueryData<UserOut>('currentUser')
|
||||
|
||||
const finalItems = currentUser?.is_superuser
|
||||
? [...items, { icon: FiUsers, title: 'Admin', path: '/admin' }]
|
||||
: items
|
||||
|
||||
const listItems = finalItems.map((item) => (
|
||||
<Flex
|
||||
as={Link}
|
||||
to={item.path}
|
||||
w="100%"
|
||||
p={2}
|
||||
key={item.title}
|
||||
activeProps={{
|
||||
style: {
|
||||
background: bgActive,
|
||||
borderRadius: '12px',
|
||||
},
|
||||
}}
|
||||
color={textColor}
|
||||
onClick={onClose}
|
||||
>
|
||||
<Icon as={item.icon} alignSelf="center" />
|
||||
<Text ml={2}>{item.title}</Text>
|
||||
</Flex>
|
||||
))
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box>{listItems}</Box>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default SidebarItems
|
||||
59
frontend/src/components/Common/UserMenu.tsx
Normal file
59
frontend/src/components/Common/UserMenu.tsx
Normal file
@@ -0,0 +1,59 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
Box,
|
||||
IconButton,
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuList,
|
||||
} from '@chakra-ui/react'
|
||||
import { FaUserAstronaut } from 'react-icons/fa'
|
||||
import { FiLogOut, FiUser } from 'react-icons/fi'
|
||||
|
||||
import useAuth from '../../hooks/useAuth'
|
||||
import { Link } from '@tanstack/react-router'
|
||||
|
||||
const UserMenu: React.FC = () => {
|
||||
const { logout } = useAuth()
|
||||
|
||||
const handleLogout = async () => {
|
||||
logout()
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Desktop */}
|
||||
<Box
|
||||
display={{ base: 'none', md: 'block' }}
|
||||
position="fixed"
|
||||
top={4}
|
||||
right={4}
|
||||
>
|
||||
<Menu>
|
||||
<MenuButton
|
||||
as={IconButton}
|
||||
aria-label="Options"
|
||||
icon={<FaUserAstronaut color="white" fontSize="18px" />}
|
||||
bg="ui.main"
|
||||
isRound
|
||||
/>
|
||||
<MenuList>
|
||||
<MenuItem icon={<FiUser fontSize="18px" />} as={Link} to="settings">
|
||||
My profile
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
icon={<FiLogOut fontSize="18px" />}
|
||||
onClick={handleLogout}
|
||||
color="ui.danger"
|
||||
fontWeight="bold"
|
||||
>
|
||||
Log out
|
||||
</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
</Box>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default UserMenu
|
||||
123
frontend/src/components/Items/AddItem.tsx
Normal file
123
frontend/src/components/Items/AddItem.tsx
Normal file
@@ -0,0 +1,123 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
Button,
|
||||
FormControl,
|
||||
FormErrorMessage,
|
||||
FormLabel,
|
||||
Input,
|
||||
Modal,
|
||||
ModalBody,
|
||||
ModalCloseButton,
|
||||
ModalContent,
|
||||
ModalFooter,
|
||||
ModalHeader,
|
||||
ModalOverlay,
|
||||
} from '@chakra-ui/react'
|
||||
import { SubmitHandler, useForm } from 'react-hook-form'
|
||||
import { useMutation, useQueryClient } from 'react-query'
|
||||
|
||||
import { ApiError, ItemCreate, ItemsService } from '../../client'
|
||||
import useCustomToast from '../../hooks/useCustomToast'
|
||||
|
||||
interface AddItemProps {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
const AddItem: React.FC<AddItemProps> = ({ isOpen, onClose }) => {
|
||||
const queryClient = useQueryClient()
|
||||
const showToast = useCustomToast()
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
reset,
|
||||
formState: { errors, isSubmitting },
|
||||
} = useForm<ItemCreate>({
|
||||
mode: 'onBlur',
|
||||
criteriaMode: 'all',
|
||||
defaultValues: {
|
||||
title: '',
|
||||
description: '',
|
||||
},
|
||||
})
|
||||
|
||||
const addItem = async (data: ItemCreate) => {
|
||||
await ItemsService.createItem({ requestBody: data })
|
||||
}
|
||||
|
||||
const mutation = useMutation(addItem, {
|
||||
onSuccess: () => {
|
||||
showToast('Success!', 'Item created successfully.', 'success')
|
||||
reset()
|
||||
onClose()
|
||||
},
|
||||
onError: (err: ApiError) => {
|
||||
const errDetail = err.body.detail
|
||||
showToast('Something went wrong.', `${errDetail}`, 'error')
|
||||
},
|
||||
onSettled: () => {
|
||||
queryClient.invalidateQueries('items')
|
||||
},
|
||||
})
|
||||
|
||||
const onSubmit: SubmitHandler<ItemCreate> = (data) => {
|
||||
mutation.mutate(data)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
size={{ base: 'sm', md: 'md' }}
|
||||
isCentered
|
||||
>
|
||||
<ModalOverlay />
|
||||
<ModalContent as="form" onSubmit={handleSubmit(onSubmit)}>
|
||||
<ModalHeader>Add Item</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody pb={6}>
|
||||
<FormControl isRequired isInvalid={!!errors.title}>
|
||||
<FormLabel htmlFor="title">Title</FormLabel>
|
||||
<Input
|
||||
id="title"
|
||||
{...register('title', {
|
||||
required: 'Title is required.',
|
||||
})}
|
||||
placeholder="Title"
|
||||
type="text"
|
||||
/>
|
||||
{errors.title && (
|
||||
<FormErrorMessage>{errors.title.message}</FormErrorMessage>
|
||||
)}
|
||||
</FormControl>
|
||||
<FormControl mt={4}>
|
||||
<FormLabel htmlFor="description">Description</FormLabel>
|
||||
<Input
|
||||
id="description"
|
||||
{...register('description')}
|
||||
placeholder="Description"
|
||||
type="text"
|
||||
/>
|
||||
</FormControl>
|
||||
</ModalBody>
|
||||
|
||||
<ModalFooter gap={3}>
|
||||
<Button
|
||||
bg="ui.main"
|
||||
color="white"
|
||||
_hover={{ opacity: 0.8 }}
|
||||
type="submit"
|
||||
isLoading={isSubmitting}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
<Button onClick={onClose}>Cancel</Button>
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default AddItem
|
||||
124
frontend/src/components/Items/EditItem.tsx
Normal file
124
frontend/src/components/Items/EditItem.tsx
Normal file
@@ -0,0 +1,124 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
Button,
|
||||
FormControl,
|
||||
FormErrorMessage,
|
||||
FormLabel,
|
||||
Input,
|
||||
Modal,
|
||||
ModalBody,
|
||||
ModalCloseButton,
|
||||
ModalContent,
|
||||
ModalFooter,
|
||||
ModalHeader,
|
||||
ModalOverlay,
|
||||
} from '@chakra-ui/react'
|
||||
import { SubmitHandler, useForm } from 'react-hook-form'
|
||||
|
||||
import { useMutation, useQueryClient } from 'react-query'
|
||||
import { ApiError, ItemOut, ItemUpdate, ItemsService } from '../../client'
|
||||
import useCustomToast from '../../hooks/useCustomToast'
|
||||
|
||||
interface EditItemProps {
|
||||
item: ItemOut
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
const EditItem: React.FC<EditItemProps> = ({ item, isOpen, onClose }) => {
|
||||
const queryClient = useQueryClient()
|
||||
const showToast = useCustomToast()
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
reset,
|
||||
formState: { isSubmitting, errors, isDirty },
|
||||
} = useForm<ItemUpdate>({
|
||||
mode: 'onBlur',
|
||||
criteriaMode: 'all',
|
||||
defaultValues: item,
|
||||
})
|
||||
|
||||
const updateItem = async (data: ItemUpdate) => {
|
||||
await ItemsService.updateItem({ id: item.id, requestBody: data })
|
||||
}
|
||||
|
||||
const mutation = useMutation(updateItem, {
|
||||
onSuccess: () => {
|
||||
showToast('Success!', 'Item updated successfully.', 'success')
|
||||
onClose()
|
||||
},
|
||||
onError: (err: ApiError) => {
|
||||
const errDetail = err.body.detail
|
||||
showToast('Something went wrong.', `${errDetail}`, 'error')
|
||||
},
|
||||
onSettled: () => {
|
||||
queryClient.invalidateQueries('items')
|
||||
},
|
||||
})
|
||||
|
||||
const onSubmit: SubmitHandler<ItemUpdate> = async (data) => {
|
||||
mutation.mutate(data)
|
||||
}
|
||||
|
||||
const onCancel = () => {
|
||||
reset()
|
||||
onClose()
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
size={{ base: 'sm', md: 'md' }}
|
||||
isCentered
|
||||
>
|
||||
<ModalOverlay />
|
||||
<ModalContent as="form" onSubmit={handleSubmit(onSubmit)}>
|
||||
<ModalHeader>Edit Item</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody pb={6}>
|
||||
<FormControl isInvalid={!!errors.title}>
|
||||
<FormLabel htmlFor="title">Title</FormLabel>
|
||||
<Input
|
||||
id="title"
|
||||
{...register('title', {
|
||||
required: 'Title is required',
|
||||
})}
|
||||
type="text"
|
||||
/>
|
||||
{errors.title && (
|
||||
<FormErrorMessage>{errors.title.message}</FormErrorMessage>
|
||||
)}
|
||||
</FormControl>
|
||||
<FormControl mt={4}>
|
||||
<FormLabel htmlFor="description">Description</FormLabel>
|
||||
<Input
|
||||
id="description"
|
||||
{...register('description')}
|
||||
placeholder="Description"
|
||||
type="text"
|
||||
/>
|
||||
</FormControl>
|
||||
</ModalBody>
|
||||
<ModalFooter gap={3}>
|
||||
<Button
|
||||
bg="ui.main"
|
||||
color="white"
|
||||
_hover={{ opacity: 0.8 }}
|
||||
type="submit"
|
||||
isLoading={isSubmitting}
|
||||
isDisabled={!isDirty}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
<Button onClick={onCancel}>Cancel</Button>
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default EditItem
|
||||
39
frontend/src/components/UserSettings/Appearance.tsx
Normal file
39
frontend/src/components/UserSettings/Appearance.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
Badge,
|
||||
Container,
|
||||
Heading,
|
||||
Radio,
|
||||
RadioGroup,
|
||||
Stack,
|
||||
useColorMode,
|
||||
} from '@chakra-ui/react'
|
||||
|
||||
const Appearance: React.FC = () => {
|
||||
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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default Appearance
|
||||
137
frontend/src/components/UserSettings/ChangePassword.tsx
Normal file
137
frontend/src/components/UserSettings/ChangePassword.tsx
Normal file
@@ -0,0 +1,137 @@
|
||||
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 { ApiError, UpdatePassword, UsersService } from '../../client'
|
||||
import useCustomToast from '../../hooks/useCustomToast'
|
||||
|
||||
interface UpdatePasswordForm extends UpdatePassword {
|
||||
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 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 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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default ChangePassword
|
||||
42
frontend/src/components/UserSettings/DeleteAccount.tsx
Normal file
42
frontend/src/components/UserSettings/DeleteAccount.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
Button,
|
||||
Container,
|
||||
Heading,
|
||||
Text,
|
||||
useDisclosure,
|
||||
} from '@chakra-ui/react'
|
||||
|
||||
import DeleteConfirmation from './DeleteConfirmation'
|
||||
|
||||
const DeleteAccount: React.FC = () => {
|
||||
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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default DeleteAccount
|
||||
105
frontend/src/components/UserSettings/DeleteConfirmation.tsx
Normal file
105
frontend/src/components/UserSettings/DeleteConfirmation.tsx
Normal file
@@ -0,0 +1,105 @@
|
||||
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 { ApiError, UserOut, UsersService } from '../../client'
|
||||
import useAuth from '../../hooks/useAuth'
|
||||
import useCustomToast from '../../hooks/useCustomToast'
|
||||
|
||||
interface DeleteProps {
|
||||
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 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 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>
|
||||
|
||||
<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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default DeleteConfirmation
|
||||
148
frontend/src/components/UserSettings/UserInformation.tsx
Normal file
148
frontend/src/components/UserSettings/UserInformation.tsx
Normal file
@@ -0,0 +1,148 @@
|
||||
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 { 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,
|
||||
getValues,
|
||||
formState: { isSubmitting, errors, isDirty },
|
||||
} = useForm<UserOut>({
|
||||
mode: 'onBlur',
|
||||
criteriaMode: 'all',
|
||||
defaultValues: {
|
||||
full_name: currentUser?.full_name,
|
||||
email: currentUser?.email,
|
||||
},
|
||||
})
|
||||
|
||||
const toggleEditMode = () => {
|
||||
setEditMode(!editMode)
|
||||
}
|
||||
|
||||
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 onSubmit: SubmitHandler<UserUpdateMe> = async (data) => {
|
||||
mutation.mutate(data)
|
||||
}
|
||||
|
||||
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 || !getValues('email') : false}
|
||||
>
|
||||
{editMode ? 'Save' : 'Edit'}
|
||||
</Button>
|
||||
{editMode && (
|
||||
<Button onClick={onCancel} isDisabled={isSubmitting}>
|
||||
Cancel
|
||||
</Button>
|
||||
)}
|
||||
</Flex>
|
||||
</Box>
|
||||
</Container>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default UserInformation
|
||||
Reference in New Issue
Block a user