rsw/score
1
0
Fork 0
Code Issues 2 Pull Requests Actions 1 Packages Projects Releases Wiki Activity

✨ Restructure folders, allow editing of users/items, and implement other refactors and improvements (#603)

Browse Source 
* Reorganize project directory structure

* Allow edit users/items, add useAuth and useCustomToast, password confirmation

* Minor improvements for consistency

* Add 'Cancel' button to UserInformation in editMode

* Refactor UserSettings

* Enable user password changes and improve error handling

* Enable user information update

* Add logout to Sidebar in mobile devices, conditional tabs depending on role and other improvements

* Add badges

* Remove comment

* Appearance tab updates

* Change badge color

* Reset inputs when clicking on 'Cancel' button

* Disable actions menu for Superuser when logged in

* Modify Logout and update stores
This commit is contained in:
Alejandra
2024-02-26 09:39:09 -05:00
committed by GitHub
parent 544f89f253
commit e44777f919
34 changed files with 781 additions and 600 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/new-frontend/src/components/Admin/AddUser.tsx Normal file
View File

@@ -0,0 +1,93 @@
import React from 'react';
import { Button, Checkbox, Flex, FormControl, FormLabel, Input, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay } from '@chakra-ui/react';
import { SubmitHandler, useForm } from 'react-hook-form';
import { UserCreate } from '../../client';
import useCustomToast from '../../hooks/useCustomToast';
import { useUsersStore } from '../../store/users-store';
import { ApiError } from '../../client/core/ApiError';
interface AddUserProps {
isOpen: boolean;
onClose: () => void;
}
interface UserCreateForm extends UserCreate {
confirmPassword: string;
}
const AddUser: React.FC<AddUserProps> = ({ isOpen, onClose }) => {
const showToast = useCustomToast();
const { register, handleSubmit, reset, formState: { isSubmitting } } = useForm<UserCreateForm>();
const { addUser } = useUsersStore();
const onSubmit: SubmitHandler<UserCreateForm> = async (data) => {
if (data.password === data.confirmPassword) {
try {
await addUser(data);
showToast('Success!', 'User created successfully.', 'success');
reset();
onClose();
} catch (err) {
const errDetail = (err as ApiError).body.detail;
showToast('Something went wrong.', `${errDetail}`, 'error');
}
} else {
// TODO: Complete when form validation is implemented
console.log("Passwords don't match")
}
}
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>
<FormLabel htmlFor='email'>Email</FormLabel>
<Input id='email' {...register('email')} placeholder='Email' type='email' />
</FormControl>
<FormControl mt={4}>
<FormLabel htmlFor='name'>Full name</FormLabel>
<Input id='name' {...register('full_name')} placeholder='Full name' type='text' />
</FormControl>
<FormControl mt={4}>
<FormLabel htmlFor='password'>Set Password</FormLabel>
<Input id='password' {...register('password')} placeholder='Password' type='password' />
</FormControl>
<FormControl mt={4}>
<FormLabel htmlFor='confirmPassword'>Confirm Password</FormLabel>
<Input id='confirmPassword' {...register('confirmPassword')} placeholder='Password' type='password' />
</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' type='submit' isLoading={isSubmitting}>
Save
</Button>
<Button onClick={onClose}>Cancel</Button>
</ModalFooter>
</ModalContent>
</Modal>
</>
)
}
export default AddUser;

100
src/new-frontend/src/components/Admin/EditUser.tsx Normal file
View File

@@ -0,0 +1,100 @@
import React from 'react';
import { Button, Checkbox, Flex, FormControl, FormLabel, Input, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay } from '@chakra-ui/react';
import { SubmitHandler, useForm } from 'react-hook-form';
import { ApiError, UserUpdate } from '../../client';
import useCustomToast from '../../hooks/useCustomToast';
import { useUsersStore } from '../../store/users-store';
interface EditUserProps {
user_id: number;
isOpen: boolean;
onClose: () => void;
}
interface UserUpdateForm extends UserUpdate {
confirm_password: string;
}
const EditUser: React.FC<EditUserProps> = ({ user_id, isOpen, onClose }) => {
const showToast = useCustomToast();
const { register, handleSubmit, reset, formState: { isSubmitting } } = useForm<UserUpdateForm>();
const { editUser, users } = useUsersStore();
const currentUser = users.find((user) => user.id === user_id);
const onSubmit: SubmitHandler<UserUpdateForm> = async (data) => {
if (data.password === data.confirm_password) {
try {
await editUser(user_id, data);
showToast('Success!', 'User updated successfully.', 'success');
reset();
onClose();
} catch (err) {
const errDetail = (err as ApiError).body.detail;
showToast('Something went wrong.', `${errDetail}`, 'error');
}
} else {
// TODO: Complete when form validation is implemented
console.log("Passwords don't match")
}
}
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>
<FormLabel htmlFor='email'>Email</FormLabel>
<Input id="email" {...register('email')} defaultValue={currentUser?.email} type='email' />
</FormControl>
<FormControl mt={4}>
<FormLabel htmlFor='name'>Full name</FormLabel>
<Input id="name" {...register('full_name')} defaultValue={currentUser?.full_name} type='text' />
</FormControl>
<FormControl mt={4}>
<FormLabel htmlFor='password'>Password</FormLabel>
<Input id="password" {...register('password')} placeholder='••••••••' type='password' />
</FormControl>
<FormControl mt={4}>
<FormLabel htmlFor='confirmPassword'>Confirmation Password</FormLabel>
<Input id='confirmPassword' {...register('confirm_password')} placeholder='••••••••' type='password' />
</FormControl>
<Flex>
<FormControl mt={4}>
<Checkbox {...register('is_superuser')} defaultChecked={currentUser?.is_superuser} colorScheme='teal'>Is superuser?</Checkbox>
</FormControl>
<FormControl mt={4}>
<Checkbox {...register('is_active')} defaultChecked={currentUser?.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={onCancel}>Cancel</Button>
</ModalFooter>
</ModalContent>
</Modal>
</>
)
}
export default EditUser;

22
src/new-frontend/src/components/ActionsMenu.tsx → src/new-frontend/src/components/Common/ActionsMenu.tsx
View File

@@ -2,33 +2,35 @@ import React from 'react';
import { Button, Menu, MenuButton, MenuItem, MenuList, useDisclosure } from '@chakra-ui/react';
import { BsThreeDotsVertical } from 'react-icons/bs';
import { FiTrash, FiEdit } from 'react-icons/fi';
import { FiEdit, FiTrash } from 'react-icons/fi';
import EditUser from '../Admin/EditUser';
import EditItem from '../Items/EditItem';
import Delete from './DeleteAlert';
import Delete from '../modals/DeleteAlert';
import EditUser from '../modals/EditUser';
import EditItem from '../modals/EditItem';
interface ActionsMenuProps {
type: string;
id: number;
disabled: boolean;
}
const ActionsMenu: React.FC<ActionsMenuProps> = ({ type, id }) => {
const ActionsMenu: React.FC<ActionsMenuProps> = ({ type, id, disabled }) => {
const editUserModal = useDisclosure();
const deleteModal = useDisclosure();
return (
<>
<Menu>
<MenuButton as={Button} rightIcon={<BsThreeDotsVertical />} variant="unstyled">
<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>
<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 isOpen={editUserModal.isOpen} onClose={editUserModal.onClose} />
: <EditItem isOpen={editUserModal.isOpen} onClose={editUserModal.onClose} />
type === 'User' ? <EditUser user_id={id} isOpen={editUserModal.isOpen} onClose={editUserModal.onClose} />
: <EditItem id={id} isOpen={editUserModal.isOpen} onClose={editUserModal.onClose} />
}
<Delete type={type} id={id} isOpen={deleteModal.isOpen} onClose={deleteModal.onClose} />
</Menu>

24
src/new-frontend/src/modals/DeleteAlert.tsx → src/new-frontend/src/components/Common/DeleteAlert.tsx
View File

@@ -1,10 +1,11 @@
import React, { useState } from 'react';
import { AlertDialog, AlertDialogBody, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, Button, useToast } from '@chakra-ui/react';
import { AlertDialog, AlertDialogBody, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, Button } from '@chakra-ui/react';
import { useForm } from 'react-hook-form';
import { useItemsStore } from '../store/items-store';
import { useUsersStore } from '../store/users-store';
import useCustomToast from '../../hooks/useCustomToast';
import { useItemsStore } from '../../store/items-store';
import { useUsersStore } from '../../store/users-store';
interface DeleteProps {
type: string;
@@ -14,7 +15,7 @@ interface DeleteProps {
}
const Delete: React.FC<DeleteProps> = ({ type, id, isOpen, onClose }) => {
const toast = useToast();
const showToast = useCustomToast();
const cancelRef = React.useRef<HTMLButtonElement | null>(null);
const [isLoading, setIsLoading] = useState(false);
const { handleSubmit } = useForm();
@@ -25,20 +26,10 @@ const Delete: React.FC<DeleteProps> = ({ type, id, isOpen, onClose }) => {
setIsLoading(true);
try {
type === 'Item' ? await deleteItem(id) : await deleteUser(id);
toast({
title: "Success",
description: `The ${type.toLowerCase()} was deleted successfully.`,
status: "success",
isClosable: true,
});
showToast('Success', `The ${type.toLowerCase()} was deleted successfully.`, 'success');
onClose();
} catch (err) {
toast({
title: "An error occurred.",
description: `An error occurred while deleting the ${type.toLowerCase()}.`,
status: "error",
isClosable: true,
});
showToast('An error occurred.', `An error occurred while deleting the ${type.toLowerCase()}.`, 'error');
} finally {
setIsLoading(false);
}
@@ -60,6 +51,7 @@ const Delete: React.FC<DeleteProps> = ({ type, id, isOpen, onClose }) => {
</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>

4
src/new-frontend/src/components/Navbar.tsx → src/new-frontend/src/components/Common/Navbar.tsx
View File

@@ -3,8 +3,8 @@ import React from 'react';
import { Button, Flex, Icon, Input, InputGroup, InputLeftElement, useDisclosure } from '@chakra-ui/react';
import { FaPlus, FaSearch } from "react-icons/fa";
import AddUser from '../modals/AddUser';
import AddItem from '../modals/AddItem';
import AddUser from '../Admin/AddUser';
import AddItem from '../Items/AddItem';
interface NavbarProps {
type: string;

71
src/new-frontend/src/components/Common/Sidebar.tsx Normal file
View File

@@ -0,0 +1,71 @@
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 { useNavigate } from 'react-router-dom';
import Logo from '../../assets/images/fastapi-logo.svg';
import useAuth from '../../hooks/useAuth';
import { useUserStore } from '../../store/user-store';
import SidebarItems from './SidebarItems';
const Sidebar: React.FC = () => {
const bgColor = useColorModeValue('white', '#1a202c');
const textColor = useColorModeValue('gray', 'white');
const secBgColor = useColorModeValue('ui.secondary', '#252d3d');
const { isOpen, onOpen, onClose } = useDisclosure();
const { user } = useUserStore();
const { logout } = useAuth();
const navigate = useNavigate();
const handleLogout = async () => {
logout()
navigate('/login');
};
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>
{
user?.email &&
<Text color={textColor} noOfLines={2} fontSize='sm' p={2}>Logged in as: {user.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>
{
user?.email &&
<Text color={textColor} noOfLines={2} fontSize='sm' p={2} maxW='180px'>Logged in as: {user.email}</Text>
}
</Flex>
</Box>
</>
);
}
export default Sidebar;

2
src/new-frontend/src/components/SidebarItems.tsx → src/new-frontend/src/components/Common/SidebarItems.tsx
View File

@@ -4,7 +4,7 @@ import { Box, Flex, Icon, Text, useColorModeValue } from '@chakra-ui/react';
import { FiBriefcase, FiHome, FiSettings, FiUsers } from 'react-icons/fi';
import { Link, useLocation } from 'react-router-dom';
import { useUserStore } from '../store/user-store';
import { useUserStore } from '../../store/user-store';
const items = [
{ icon: FiHome, title: 'Dashboard', path: "/" },

26
src/new-frontend/src/components/UserMenu.tsx → src/new-frontend/src/components/Common/UserMenu.tsx
View File

@@ -1,38 +1,38 @@
import React from 'react';
import { IconButton } from '@chakra-ui/button';
import { Box } from '@chakra-ui/layout';
import { Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/menu';
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 { useNavigate } from 'react-router';
import { Link } from 'react-router-dom';
import { Link, useNavigate } from 'react-router-dom';
import useAuth from '../../hooks/useAuth';
const UserMenu: React.FC = () => {
const navigate = useNavigate();
const { logout } = useAuth();
const handleLogout = async () => {
localStorage.removeItem("access_token");
navigate("/login");
// TODO: reset all Zustand states
logout()
navigate('/login');
};
return (
<>
<Box position="fixed" top={4} right={4}>
{/* 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"
icon={<FaUserAstronaut color='white' fontSize='18px' />}
bg='ui.main'
isRound
/>
<MenuList>
<MenuItem icon={<FiUser fontSize="18px" />} as={Link} to="settings">
<MenuItem icon={<FiUser fontSize='18px' />} as={Link} to='settings'>
My profile
</MenuItem>
<MenuItem icon={<FiLogOut fontSize="18px" />} onClick={handleLogout} color="ui.danger" fontWeight="bold">
<MenuItem icon={<FiLogOut fontSize='18px' />} onClick={handleLogout} color='ui.danger' fontWeight='bold'>
Log out
</MenuItem>
</MenuList>

42
src/new-frontend/src/modals/AddItem.tsx → src/new-frontend/src/components/Items/AddItem.tsx
View File

@@ -1,10 +1,11 @@
import React, { useState } from 'react';
import { Button, FormControl, FormLabel, Input, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, useToast } from '@chakra-ui/react';
import { Button, FormControl, FormLabel, Input, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay } from '@chakra-ui/react';
import { SubmitHandler, useForm } from 'react-hook-form';
import { ItemCreate } from '../client';
import { useItemsStore } from '../store/items-store';
import { ApiError, ItemCreate } from '../../client';
import useCustomToast from '../../hooks/useCustomToast';
import { useItemsStore } from '../../store/items-store';
interface AddItemProps {
isOpen: boolean;
@@ -12,7 +13,7 @@ interface AddItemProps {
}
const AddItem: React.FC<AddItemProps> = ({ isOpen, onClose }) => {
const toast = useToast();
const showToast = useCustomToast();
const [isLoading, setIsLoading] = useState(false);
const { register, handleSubmit, reset } = useForm<ItemCreate>();
const { addItem } = useItemsStore();
@@ -21,21 +22,12 @@ const AddItem: React.FC<AddItemProps> = ({ isOpen, onClose }) => {
setIsLoading(true);
try {
await addItem(data);
toast({
title: 'Success!',
description: 'Item created successfully.',
status: 'success',
isClosable: true,
});
showToast('Success!', 'Item created successfully.', 'success');
reset();
onClose();
} catch (err) {
toast({
title: 'Something went wrong.',
description: 'Failed to create item. Please try again.',
status: 'error',
isClosable: true,
});
const errDetail = (err as ApiError).body.detail;
showToast('Something went wrong.', `${errDetail}`, 'error');
} finally {
setIsLoading(false);
}
@@ -50,30 +42,32 @@ const AddItem: React.FC<AddItemProps> = ({ isOpen, onClose }) => {
isCentered
>
<ModalOverlay />
<ModalContent as="form" onSubmit={handleSubmit(onSubmit)}>
<ModalContent as='form' onSubmit={handleSubmit(onSubmit)}>
<ModalHeader>Add Item</ModalHeader>
<ModalCloseButton />
<ModalBody pb={6}>
<FormControl>
<FormLabel>Title</FormLabel>
<FormLabel htmlFor='title'>Title</FormLabel>
<Input
id='title'
{...register('title')}
placeholder="Title"
type="text"
placeholder='Title'
type='text'
/>
</FormControl>
<FormControl mt={4}>
<FormLabel>Description</FormLabel>
<FormLabel htmlFor='description'>Description</FormLabel>
<Input
id='description'
{...register('description')}
placeholder="Description"
type="text"
placeholder='Description'
type='text'
/>
</FormControl>
</ModalBody>
<ModalFooter gap={3}>
<Button bg="ui.main" color="white" _hover={{ opacity: 0.8 }} type="submit" isLoading={isLoading}>
<Button bg='ui.main' color='white' _hover={{ opacity: 0.8 }} type='submit' isLoading={isLoading}>
Save
</Button>
<Button onClick={onClose} isDisabled={isLoading}>

74
src/new-frontend/src/components/Items/EditItem.tsx Normal file
View File

@@ -0,0 +1,74 @@
import React from 'react';
import { Button, FormControl, FormLabel, Input, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay } from '@chakra-ui/react';
import { SubmitHandler, useForm } from 'react-hook-form';
import { ApiError, ItemUpdate } from '../../client';
import useCustomToast from '../../hooks/useCustomToast';
import { useItemsStore } from '../../store/items-store';
interface EditItemProps {
id: number;
isOpen: boolean;
onClose: () => void;
}
const EditItem: React.FC<EditItemProps> = ({ id, isOpen, onClose }) => {
const showToast = useCustomToast();
const { register, handleSubmit, reset, formState: { isSubmitting }, } = useForm<ItemUpdate>();
const { editItem, items } = useItemsStore();
const currentItem = items.find((item) => item.id === id);
const onSubmit: SubmitHandler<ItemUpdate> = async (data) => {
try {
await editItem(id, data);
showToast('Success!', 'Item updated successfully.', 'success');
reset();
onClose();
} catch (err) {
const errDetail = (err as ApiError).body.detail;
showToast('Something went wrong.', `${errDetail}`, 'error');
}
}
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>
<FormLabel htmlFor='title'>Title</FormLabel>
<Input id='title' {...register('title')} defaultValue={currentItem?.title} type='text' />
</FormControl>
<FormControl mt={4}>
<FormLabel htmlFor='description'>Description</FormLabel>
<Input id='description' {...register('description')} defaultValue={currentItem?.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={onCancel}>Cancel</Button>
</ModalFooter>
</ModalContent>
</Modal>
</>
)
}
export default EditItem;

59
src/new-frontend/src/components/Sidebar.tsx
View File

@@ -1,59 +0,0 @@
import React from 'react';
import { Box, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerOverlay, Flex, IconButton, Image, useDisclosure, Text, useColorModeValue } from '@chakra-ui/react';
import { FiMenu } from 'react-icons/fi';
import Logo from "../assets/images/fastapi-logo.svg";
import SidebarItems from './SidebarItems';
import { useUserStore } from '../store/user-store';
const Sidebar: React.FC = () => {
const bgColor = useColorModeValue("white", "#1a202c");
const textColor = useColorModeValue("gray", "white");
const secBgColor = useColorModeValue("ui.secondary", "#252d3d");
const { isOpen, onOpen, onClose } = useDisclosure();
const { user } = useUserStore();
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} />
</Box>
{
user?.email &&
<Text color={textColor} noOfLines={2} fontSize="sm" p={2}>Logged in as: {user.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>
{
user?.email &&
<Text color={textColor} noOfLines={2} fontSize="sm" p={2} maxW="180px">Logged in as: {user.email}</Text>
}
</Flex>
</Box>
</>
);
}
export default Sidebar;

15
src/new-frontend/src/panels/Appearance.tsx → src/new-frontend/src/components/UserSettings/Appearance.tsx
View File

@@ -1,23 +1,24 @@
import React from 'react';
import { Container, Heading, Radio, RadioGroup, Stack, useColorMode } from '@chakra-ui/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}>
<Container maxW='full'>
<Heading size='sm' py={4}>
Appearance
</Heading>
<RadioGroup onChange={toggleColorMode} value={colorMode}>
<Stack>
<Radio value="light" colorScheme="teal">
Light <i>(default)</i>
{/* 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
<Radio value='dark' colorScheme='teal'>
Dark Mode
</Radio>
</Stack>
</RadioGroup>

58
src/new-frontend/src/components/UserSettings/ChangePassword.tsx Normal file
View File

@@ -0,0 +1,58 @@
import React from 'react';
import { Box, Button, Container, FormControl, FormLabel, Heading, Input, useColorModeValue } from '@chakra-ui/react';
import { SubmitHandler, useForm } from 'react-hook-form';
import { ApiError, UpdatePassword } from '../../client';
import useCustomToast from '../../hooks/useCustomToast';
import { useUserStore } from '../../store/user-store';
interface UpdatePasswordForm extends UpdatePassword {
confirm_password: string;
}
const ChangePassword: React.FC = () => {
const color = useColorModeValue('gray.700', 'white');
const showToast = useCustomToast();
const { register, handleSubmit, reset, formState: { isSubmitting } } = useForm<UpdatePasswordForm>();
const { editPassword } = useUserStore();
const onSubmit: SubmitHandler<UpdatePasswordForm> = async (data) => {
try {
await editPassword(data);
showToast('Success!', 'Password updated.', 'success');
reset();
} catch (err) {
const errDetail = (err as ApiError).body.detail;
showToast('Something went wrong.', `${errDetail}`, 'error');
}
}
return (
<>
<Container maxW='full' as='form' onSubmit={handleSubmit(onSubmit)}>
<Heading size='sm' py={4}>
Change Password
</Heading>
<Box w={{ 'sm': 'full', 'md': '50%' }}>
<FormControl>
<FormLabel color={color} htmlFor='currentPassword'>Current password</FormLabel>
<Input id='currentPassword' {...register('current_password')} placeholder='••••••••' type='password' />
</FormControl>
<FormControl mt={4}>
<FormLabel color={color} htmlFor='newPassword'>New password</FormLabel>
<Input id='newPassword' {...register('new_password')} placeholder='••••••••' type='password' />
</FormControl>
<FormControl mt={4}>
<FormLabel color={color} htmlFor='confirmPassword'>Confirm new password</FormLabel>
<Input id='confirmPassword' {...register('confirm_password')} placeholder='••••••••' type='password' />
</FormControl>
<Button bg='ui.main' color='white' _hover={{ opacity: 0.8 }} mt={4} type='submit' isLoading={isSubmitting}>
Save
</Button>
</Box>
</ Container>
</>
);
}
export default ChangePassword;

8
src/new-frontend/src/panels/DeleteAccount.tsx → src/new-frontend/src/components/UserSettings/DeleteAccount.tsx
View File

@@ -2,21 +2,21 @@ import React from 'react';
import { Button, Container, Heading, Text, useDisclosure } from '@chakra-ui/react';
import DeleteConfirmation from '../modals/DeleteConfirmation';
import DeleteConfirmation from './DeleteConfirmation';
const DeleteAccount: React.FC = () => {
const confirmationModal = useDisclosure();
return (
<>
<Container maxW="full">
<Heading size="sm" py={4}>
<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}>
<Button bg='ui.danger' color='white' _hover={{ opacity: 0.8 }} mt={4} onClick={confirmationModal.onOpen}>
Delete
</Button>
<DeleteConfirmation isOpen={confirmationModal.isOpen} onClose={confirmationModal.onClose} />

20
src/new-frontend/src/modals/DeleteConfirmation.tsx → src/new-frontend/src/components/UserSettings/DeleteConfirmation.tsx
View File

@@ -1,7 +1,8 @@
import React, { useState } from 'react';
import { AlertDialog, AlertDialogBody, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, Button, useToast } from '@chakra-ui/react';
import { AlertDialog, AlertDialogBody, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, Button } from '@chakra-ui/react';
import { useForm } from 'react-hook-form';
import useCustomToast from '../../hooks/useCustomToast';
interface DeleteProps {
isOpen: boolean;
@@ -9,7 +10,7 @@ interface DeleteProps {
}
const DeleteConfirmation: React.FC<DeleteProps> = ({ isOpen, onClose }) => {
const toast = useToast();
const showToast = useCustomToast();
const cancelRef = React.useRef<HTMLButtonElement | null>(null);
const [isLoading, setIsLoading] = useState(false);
const { handleSubmit } = useForm();
@@ -20,12 +21,7 @@ const DeleteConfirmation: React.FC<DeleteProps> = ({ isOpen, onClose }) => {
// TODO: Delete user account when API is ready
onClose();
} catch (err) {
toast({
title: "An error occurred.",
description: `An error occurred while deleting your account.`,
status: "error",
isClosable: true,
});
showToast('An error occurred', 'An error occurred while deleting your account.', 'error');
} finally {
setIsLoading(false);
}
@@ -37,21 +33,21 @@ const DeleteConfirmation: React.FC<DeleteProps> = ({ isOpen, onClose }) => {
isOpen={isOpen}
onClose={onClose}
leastDestructiveRef={cancelRef}
size={{ base: "sm", md: "md" }}
size={{ base: 'sm', md: 'md' }}
isCentered
>
<AlertDialogOverlay>
<AlertDialogContent as="form" onSubmit={handleSubmit(onSubmit)}>
<AlertDialogContent as='form' onSubmit={handleSubmit(onSubmit)}>
<AlertDialogHeader>
Confirmation Required
</AlertDialogHeader>
<AlertDialogBody>
All your account data will be <b>permanently deleted.</b> If you're sure, please click <b>'Confirm'</b> to proceed.
All your account data will be <strong>permanently deleted.</strong> If you're 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={isLoading}>
<Button bg='ui.danger' color='white' _hover={{ opacity: 0.8 }} type='submit' isLoading={isLoading}>
Confirm
</Button>
<Button ref={cancelRef} onClick={onClose} isDisabled={isLoading}>

88
src/new-frontend/src/components/UserSettings/UserInformation.tsx Normal file
View File

@@ -0,0 +1,88 @@
import React, { useState } from 'react';
import { Box, Button, Container, Flex, FormControl, FormLabel, Heading, Input, Text, useColorModeValue } from '@chakra-ui/react';
import { SubmitHandler, useForm } from 'react-hook-form';
import { ApiError, UserOut, UserUpdateMe } from '../../client';
import useCustomToast from '../../hooks/useCustomToast';
import { useUserStore } from '../../store/user-store';
import { useUsersStore } from '../../store/users-store';
const UserInformation: React.FC = () => {
const color = useColorModeValue('gray.700', 'white');
const showToast = useCustomToast();
const [editMode, setEditMode] = useState(false);
const { register, handleSubmit, reset, formState: { isSubmitting } } = useForm<UserOut>();
const { user, editUser } = useUserStore();
const { getUsers } = useUsersStore();
const toggleEditMode = () => {
setEditMode(!editMode);
};
const onSubmit: SubmitHandler<UserUpdateMe> = async (data) => {
try {
await editUser(data);
await getUsers()
showToast('Success!', 'User updated successfully.', 'success');
} catch (err) {
const errDetail = (err as ApiError).body.detail;
showToast('Something went wrong.', `${errDetail}`, 'error');
}
}
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')} defaultValue={user?.full_name} type='text' size='md' /> :
<Text size='md' py={2}>
{user?.full_name || 'N/A'}
</Text>
}
</FormControl>
<FormControl mt={4}>
<FormLabel color={color} htmlFor='email'>Email</FormLabel>
{
editMode ?
<Input id='email' {...register('email')} defaultValue={user?.email} type='text' size='md' /> :
<Text size='md' py={2}>
{user?.email || 'N/A'}
</Text>
}
</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}
>
{editMode ? 'Save' : 'Edit'}
</Button>
{editMode &&
<Button onClick={onCancel}>
Cancel
</Button>}
</Flex>
</Box>
</ Container>
</>
);
}
export default UserInformation;

33
src/new-frontend/src/hooks/useAuth.tsx Normal file
View File

@@ -0,0 +1,33 @@
import { useUserStore } from '../store/user-store';
import { Body_login_login_access_token as AccessToken, LoginService } from '../client';
import { useUsersStore } from '../store/users-store';
import { useItemsStore } from '../store/items-store';
const useAuth = () => {
const { user, getUser, resetUser } = useUserStore();
const { resetUsers } = useUsersStore();
const { resetItems } = useItemsStore();
const login = async (data: AccessToken) => {
const response = await LoginService.loginAccessToken({
formData: data,
});
localStorage.setItem('access_token', response.access_token);
await getUser();
};
const logout = () => {
localStorage.removeItem('access_token');
resetUser();
resetUsers();
resetItems();
};
const isLoggedIn = () => {
return user !== null;
};
return { login, logout, isLoggedIn };
}
export default useAuth;

20
src/new-frontend/src/hooks/useCustomToast.tsx Normal file
View File

@@ -0,0 +1,20 @@
import { useCallback } from 'react';
import { useToast } from '@chakra-ui/react';
const useCustomToast = () => {
const toast = useToast();
const showToast = useCallback((title: string, description: string, status: 'success' | 'error') => {
toast({
title,
description,
status,
isClosable: true,
});
}, [toast]);
return showToast;
};
export default useCustomToast;

97
src/new-frontend/src/modals/AddUser.tsx
View File

@@ -1,97 +0,0 @@
import React, { useState } from 'react';
import { Button, Checkbox, Flex, FormControl, FormLabel, Input, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, useToast } from '@chakra-ui/react';
import { SubmitHandler, useForm } from 'react-hook-form';
import { UserCreate } from '../client';
import { useUsersStore } from '../store/users-store';
interface AddUserProps {
isOpen: boolean;
onClose: () => void;
}
const AddUser: React.FC<AddUserProps> = ({ isOpen, onClose }) => {
const toast = useToast();
const [isLoading, setIsLoading] = useState(false);
const { register, handleSubmit, reset } = useForm<UserCreate>();
const { addUser } = useUsersStore();
const onSubmit: SubmitHandler<UserCreate> = async (data) => {
setIsLoading(true);
try {
await addUser(data);
toast({
title: 'Success!',
description: 'User created successfully.',
status: 'success',
isClosable: true,
});
reset();
onClose();
} catch (err) {
toast({
title: 'Something went wrong.',
description: 'Failed to create user. Please try again.',
status: 'error',
isClosable: true,
});
} finally {
setIsLoading(false);
}
}
return (
<>
<Modal
isOpen={isOpen}
onClose={onClose}
size={{ base: "sm", md: "md" }}
isCentered
>
<ModalOverlay />
<ModalContent as="form" onSubmit={handleSubmit(onSubmit)}>
{/* TODO: Check passwords */}
<ModalHeader>Add User</ModalHeader>
<ModalCloseButton />
<ModalBody pb={6}>
<FormControl>
<FormLabel>Email</FormLabel>
<Input {...register('email')} placeholder='Email' type="email" />
</FormControl>
<FormControl mt={4}>
<FormLabel>Full name</FormLabel>
<Input {...register('full_name')} placeholder='Full name' type="text" />
</FormControl>
<FormControl mt={4}>
<FormLabel>Set Password</FormLabel>
<Input {...register('password')} placeholder='Password' type="password" />
</FormControl>
<FormControl mt={4}>
<FormLabel>Confirm Password</FormLabel>
<Input {...register('confirmPassword')} placeholder='Password' type="password" />
</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" type="submit" isLoading={isLoading}>
Save
</Button>
<Button onClick={onClose}>Cancel</Button>
</ModalFooter>
</ModalContent>
</Modal>
</>
)
}
export default AddUser;

48
src/new-frontend/src/modals/EditItem.tsx
View File

@@ -1,48 +0,0 @@
import React from 'react';
import { Button, FormControl, FormLabel, Input, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay } from '@chakra-ui/react';
interface EditItemProps {
isOpen: boolean;
onClose: () => void;
}
const EditItem: React.FC<EditItemProps> = ({ isOpen, onClose }) => {
return (
<>
<Modal
isOpen={isOpen}
onClose={onClose}
size={{ base: "sm", md: "md" }}
isCentered
>
<ModalOverlay />
<ModalContent>
<ModalHeader>Edit Item</ModalHeader>
<ModalCloseButton />
<ModalBody pb={6}>
<FormControl>
<FormLabel>Item</FormLabel>
<Input placeholder='Item' type="text" />
</FormControl>
<FormControl mt={4}>
<FormLabel>Description</FormLabel>
<Input placeholder='Description' type="text" />
</FormControl>
</ModalBody>
<ModalFooter gap={3}>
<Button colorScheme='teal'>
Save
</Button>
<Button onClick={onClose}>Cancel</Button>
</ModalFooter>
</ModalContent>
</Modal>
</>
)
}
export default EditItem;

60
src/new-frontend/src/modals/EditUser.tsx
View File

@@ -1,60 +0,0 @@
import React from 'react';
import { Button, Checkbox, Flex, FormControl, FormLabel, Input, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, useDisclosure } from '@chakra-ui/react';
interface EditUserProps {
isOpen: boolean;
onClose: () => void;
}
const EditUser: React.FC<EditUserProps> = ({ isOpen, onClose }) => {
return (
<>
<Modal
isOpen={isOpen}
onClose={onClose}
size={{ base: "sm", md: "md" }}
isCentered
>
<ModalOverlay />
<ModalContent>
<ModalHeader>Edit User</ModalHeader>
<ModalCloseButton />
<ModalBody pb={6}>
<FormControl>
<FormLabel>Email</FormLabel>
<Input placeholder='Email' type="email" />
</FormControl>
<FormControl mt={4}>
<FormLabel>Full name</FormLabel>
<Input placeholder='Full name' type="text" />
</FormControl>
<FormControl mt={4}>
<FormLabel>Password</FormLabel>
<Input placeholder='Password' type="password" />
</FormControl>
<Flex>
<FormControl mt={4}>
<Checkbox colorScheme='teal'>Is superuser?</Checkbox>
</FormControl>
<FormControl mt={4}>
<Checkbox colorScheme='teal'>Is active?</Checkbox>
</FormControl>
</Flex>
</ModalBody>
<ModalFooter gap={3}>
<Button bg="ui.main" color="white" _hover={{ opacity: 0.8 }}>
Save
</Button>
<Button onClick={onClose}>Cancel</Button>
</ModalFooter>
</ModalContent>
</Modal>
</>
)
}
export default EditUser;

50
src/new-frontend/src/pages/Admin.tsx
View File

@@ -1,15 +1,19 @@
import React, { useEffect, useState } from 'react';
import { Box, Container, Flex, Heading, Spinner, Table, TableContainer, Tbody, Td, Th, Thead, Tr, useToast } from '@chakra-ui/react';
import { Badge, Box, Container, Flex, Heading, Spinner, Table, TableContainer, Tbody, Td, Th, Thead, Tr } from '@chakra-ui/react';
import ActionsMenu from '../components/ActionsMenu';
import Navbar from '../components/Navbar';
import { ApiError } from '../client';
import ActionsMenu from '../components/Common/ActionsMenu';
import Navbar from '../components/Common/Navbar';
import useCustomToast from '../hooks/useCustomToast';
import { useUserStore } from '../store/user-store';
import { useUsersStore } from '../store/users-store';
const Admin: React.FC = () => {
const toast = useToast();
const showToast = useCustomToast();
const [isLoading, setIsLoading] = useState(false);
const { users, getUsers } = useUsersStore();
const { user: currentUser } = useUserStore();
useEffect(() => {
const fetchUsers = async () => {
@@ -17,12 +21,8 @@ const Admin: React.FC = () => {
try {
await getUsers();
} catch (err) {
toast({
title: 'Something went wrong.',
description: 'Failed to fetch users. Please try again.',
status: 'error',
isClosable: true,
});
const errDetail = (err as ApiError).body.detail;
showToast('Something went wrong.', `${errDetail}`, 'error');
} finally {
setIsLoading(false);
}
@@ -36,18 +36,18 @@ const Admin: React.FC = () => {
<>
{isLoading ? (
// TODO: Add skeleton
<Flex justify="center" align="center" height="100vh" width="full">
<Spinner size="xl" color='ui.main' />
<Flex justify='center' align='center' height='100vh' width='full'>
<Spinner size='xl' color='ui.main' />
</Flex>
) : (
users &&
<Container maxW="full">
<Heading size="lg" textAlign={{ base: "center", md: "left" }} pt={12}>
<Container maxW='full'>
<Heading size='lg' textAlign={{ base: 'center', md: 'left' }} pt={12}>
User Management
</Heading>
<Navbar type={"User"} />
<Navbar type={'User'} />
<TableContainer>
<Table fontSize="md" size={{ base: "sm", md: "md" }}>
<Table fontSize='md' size={{ base: 'sm', md: 'md' }}>
<Thead>
<Tr>
<Th>Full name</Th>
@@ -60,23 +60,23 @@ const Admin: React.FC = () => {
<Tbody>
{users.map((user) => (
<Tr key={user.id}>
<Td color={!user.full_name ? "gray.600" : "inherit"}>{user.full_name || "N/A"}</Td>
<Td color={!user.full_name ? 'gray.600' : 'inherit'}>{user.full_name || 'N/A'}{currentUser?.id === user.id && <Badge ml='1' colorScheme='teal'>You</Badge>}</Td>
<Td>{user.email}</Td>
<Td>{user.is_superuser ? "Superuser" : "User"}</Td>
<Td>{user.is_superuser ? 'Superuser' : 'User'}</Td>
<Td>
<Flex gap={2}>
<Box
w="2"
h="2"
borderRadius="50%"
bg={user.is_active ? "ui.success" : "ui.danger"}
alignSelf="center"
w='2'
h='2'
borderRadius='50%'
bg={user.is_active ? 'ui.success' : 'ui.danger'}
alignSelf='center'
/>
{user.is_active ? "Active" : "Inactive"}
{user.is_active ? 'Active' : 'Inactive'}
</Flex>
</Td>
<Td>
<ActionsMenu type="User" id={user.id} />
<ActionsMenu type='User' id={user.id} disabled={currentUser?.id === user.id ? true : false} />
</Td>
</Tr>
))}

4
src/new-frontend/src/pages/Dashboard.tsx
View File

@@ -10,8 +10,8 @@ const Dashboard: React.FC = () => {
return (
<>
<Container maxW="full" pt={12}>
<Text fontSize="2xl">Hi, {user?.full_name || user?.email} 👋🏼</Text>
<Container maxW='full' pt={12}>
<Text fontSize='2xl'>Hi, {user?.full_name || user?.email} 👋🏼</Text>
<Text>Welcome back, nice to see you again!</Text>
</Container>
</>

21
src/new-frontend/src/pages/ErrorPage.tsx
View File

@@ -1,6 +1,5 @@
import { Button, Container, Text } from "@chakra-ui/react";
import { Link, useRouteError } from "react-router-dom";
import { Button, Container, Text } from '@chakra-ui/react';
import { Link, useRouteError } from 'react-router-dom';
const ErrorPage: React.FC = () => {
const error = useRouteError();
@@ -8,14 +7,14 @@ const ErrorPage: React.FC = () => {
return (
<>
<Container h="100vh"
alignItems="stretch"
justifyContent="center" textAlign="center" maxW="xs" centerContent>
<Text fontSize="8xl" color="ui.main" fontWeight="bold" lineHeight="1" mb={4}>Oops!</Text>
<Text fontSize="md">Houston, we have a problem.</Text>
<Text fontSize="md">An unexpected error has occurred.</Text>
<Text color="ui.danger"><i>{error.statusText || error.message}</i></Text>
<Button as={Link} to="/" color="ui.main" borderColor="ui.main" variant="outline" mt={4}>Go back to Home</Button>
<Container h='100vh'
alignItems='stretch'
justifyContent='center' textAlign='center' maxW='xs' centerContent>
<Text fontSize='8xl' color='ui.main' fontWeight='bold' lineHeight='1' mb={4}>Oops!</Text>
<Text fontSize='md'>Houston, we have a problem.</Text>
<Text fontSize='md'>An unexpected error has occurred.</Text>
{/* <Text color='ui.danger'><i>{error.statusText || error.message}</i></Text> */}
<Button as={Link} to='/' color='ui.main' borderColor='ui.main' variant='outline' mt={4}>Go back to Home</Button>
</Container>
</>
);

35
src/new-frontend/src/pages/Items.tsx
View File

@@ -1,14 +1,15 @@
import React, { useEffect, useState } from 'react';
import { Container, Flex, Heading, Spinner, Table, TableContainer, Tbody, Td, Th, Thead, Tr, useToast } from '@chakra-ui/react';
import { Container, Flex, Heading, Spinner, Table, TableContainer, Tbody, Td, Th, Thead, Tr } from '@chakra-ui/react';
import ActionsMenu from '../components/ActionsMenu';
import Navbar from '../components/Navbar';
import { ApiError } from '../client';
import ActionsMenu from '../components/Common/ActionsMenu';
import Navbar from '../components/Common/Navbar';
import useCustomToast from '../hooks/useCustomToast';
import { useItemsStore } from '../store/items-store';
const Items: React.FC = () => {
const toast = useToast();
const showToast = useCustomToast();
const [isLoading, setIsLoading] = useState(false);
const { items, getItems } = useItemsStore();
@@ -18,12 +19,8 @@ const Items: React.FC = () => {
try {
await getItems();
} catch (err) {
toast({
title: 'Something went wrong.',
description: 'Failed to fetch items. Please try again.',
status: 'error',
isClosable: true,
});
const errDetail = (err as ApiError).body.detail;
showToast('Something went wrong.', `${errDetail}`, 'error');
} finally {
setIsLoading(false);
}
@@ -38,18 +35,18 @@ const Items: React.FC = () => {
<>
{isLoading ? (
// TODO: Add skeleton
<Flex justify="center" align="center" height="100vh" width="full">
<Spinner size="xl" color='ui.main' />
<Flex justify='center' align='center' height='100vh' width='full'>
<Spinner size='xl' color='ui.main' />
</Flex>
) : (
items &&
<Container maxW="full">
<Heading size="lg" textAlign={{ base: "center", md: "left" }} pt={12}>
<Container maxW='full'>
<Heading size='lg' textAlign={{ base: 'center', md: 'left' }} pt={12}>
Items Management
</Heading>
<Navbar type={"Item"} />
<Navbar type={'Item'} />
<TableContainer>
<Table size={{ base: "sm", md: "md" }}>
<Table size={{ base: 'sm', md: 'md' }}>
<Thead>
<Tr>
<Th>ID</Th>
@@ -63,9 +60,9 @@ const Items: React.FC = () => {
<Tr key={item.id}>
<Td>{item.id}</Td>
<Td>{item.title}</Td>
<Td color={!item.description ? "gray.600" : "inherit"}>{item.description || "N/A"}</Td>
<Td color={!item.description ? 'gray.600' : 'inherit'}>{item.description || 'N/A'}</Td>
<Td>
<ActionsMenu type={"Item"} id={item.id} />
<ActionsMenu type={'Item'} id={item.id} />
</Td>
</Tr>
))}

33
src/new-frontend/src/pages/Layout.tsx
View File

@@ -1,37 +1,26 @@
import { useEffect } from 'react';
import React, { useEffect } from 'react';
import { Flex } from '@chakra-ui/react';
import { Outlet } from 'react-router-dom';
import Sidebar from '../components/Sidebar';
import { Flex, useToast } from '@chakra-ui/react';
import Sidebar from '../components/Common/Sidebar';
import UserMenu from '../components/Common/UserMenu';
import { useUserStore } from '../store/user-store';
import UserMenu from '../components/UserMenu';
const Layout: React.FC = () => {
const toast = useToast();
const { getUser } = useUserStore();
useEffect(() => {
const fetchUser = async () => {
const token = localStorage.getItem('access_token');
if (token) {
try {
await getUser();
} catch (err) {
toast({
title: 'Something went wrong.',
description: 'Failed to fetch user. Please try again.',
status: 'error',
isClosable: true,
});
}
}
const token = localStorage.getItem('access_token');
if (token) {
(async () => {
await getUser();
})();
}
fetchUser();
}, []);
}, [getUser]);
return (
<Flex maxW="large" h="auto" position="relative">
<Flex maxW='large' h='auto' position='relative'>
<Sidebar />
<Outlet />
<UserMenu />

59
src/new-frontend/src/pages/Login.tsx
View File

@@ -1,68 +1,67 @@
import React from "react";
import React from 'react';
import { ViewIcon, ViewOffIcon } from "@chakra-ui/icons";
import { Button, Center, Container, FormControl, Icon, Image, Input, InputGroup, InputRightElement, Link, useBoolean } from "@chakra-ui/react";
import { SubmitHandler, useForm } from "react-hook-form";
import { Link as ReactRouterLink, useNavigate } from "react-router-dom";
import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons';
import { Button, Center, Container, FormControl, Icon, Image, Input, InputGroup, InputRightElement, Link, useBoolean } from '@chakra-ui/react';
import { SubmitHandler, useForm } from 'react-hook-form';
import { Link as ReactRouterLink, useNavigate } from 'react-router-dom';
import Logo from "../assets/images/fastapi-logo.svg";
import { LoginService } from "../client";
import { Body_login_login_access_token as AccessToken } from "../client/models/Body_login_login_access_token";
import Logo from '../assets/images/fastapi-logo.svg';
import { Body_login_login_access_token as AccessToken } from '../client/models/Body_login_login_access_token';
import useAuth from '../hooks/useAuth';
const Login: React.FC = () => {
const [show, setShow] = useBoolean();
const navigate = useNavigate();
const { register, handleSubmit } = useForm<AccessToken>();
const { login } = useAuth();
const onSubmit: SubmitHandler<AccessToken> = async (data) => {
const response = await LoginService.loginAccessToken({
formData: data,
});
localStorage.setItem("access_token", response.access_token);
navigate("/");
await login(data);
navigate('/');
};
return (
<>
<Container
as="form"
as='form'
onSubmit={handleSubmit(onSubmit)}
h="100vh"
maxW="sm"
alignItems="stretch"
justifyContent="center"
h='100vh'
maxW='sm'
alignItems='stretch'
justifyContent='center'
gap={4}
centerContent
>
<Image src={Logo} alt="FastAPI logo" height="auto" maxW="2xs" alignSelf="center" />
<FormControl id="email">
<Input {...register("username")} placeholder="Email" type="text" />
<Image src={Logo} alt='FastAPI logo' height='auto' maxW='2xs' alignSelf='center' />
<FormControl id='email'>
<Input {...register('username')} placeholder='Email' type='text' />
</FormControl>
<FormControl id="password">
<FormControl id='password'>
<InputGroup>
<Input
{...register("password")}
type={show ? "text" : "password"}
{...register('password')}
type={show ? 'text' : 'password'}
placeholder="Password"
placeholder='Password'
/>
<InputRightElement
color="gray.400"
color='gray.400'
_hover={{
cursor: "pointer",
cursor: 'pointer',
}}
>
<Icon onClick={setShow.toggle} aria-label={show ? "Hide password" : "Show password"}>
<Icon onClick={setShow.toggle} aria-label={show ? 'Hide password' : 'Show password'}>
{show ? <ViewOffIcon /> : <ViewIcon />}
</Icon>
</InputRightElement>
</InputGroup>
<Center>
<Link as={ReactRouterLink} to="/recover-password" color="blue.500" mt={2}>
<Link as={ReactRouterLink} to='/recover-password' color='blue.500' mt={2}>
Forgot password?
</Link>
</Center>
</FormControl>
<Button bg="ui.main" color="white" _hover={{ opacity: 0.8 }} type="submit">
<Button bg='ui.main' color='white' _hover={{ opacity: 0.8 }} type='submit'>
Log In
</Button>
</Container>

14
src/new-frontend/src/pages/RecoverPassword.tsx
View File

@@ -1,9 +1,10 @@
import React from "react";
import { Button, Container, FormControl, Heading, Input, Text, useToast } from "@chakra-ui/react";
import { Button, Container, FormControl, Heading, Input, Text } from "@chakra-ui/react";
import { SubmitHandler, useForm } from "react-hook-form";
import { LoginService } from "../client";
import useCustomToast from "../hooks/useCustomToast";
interface FormData {
email: string;
@@ -11,20 +12,15 @@ interface FormData {
const RecoverPassword: React.FC = () => {
const { register, handleSubmit } = useForm<FormData>();
const toast = useToast();
const showToast = useCustomToast();
const onSubmit: SubmitHandler<FormData> = async (data) => {
const response = await LoginService.recoverPassword({
email: data.email,
});
console.log(response);
console.log(response)
toast({
title: "Email sent.",
description: "We sent an email with a link to get back into your account.",
status: "success",
isClosable: true,
});
showToast("Email sent.", "We sent an email with a link to get back into your account.", "success");
};
return (

71
src/new-frontend/src/pages/UserSettings.tsx
View File

@@ -1,49 +1,46 @@
import React from 'react';
import { Container, Heading, Tab, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/react';
import Appearance from '../components/UserSettings/Appearance';
import ChangePassword from '../components/UserSettings/ChangePassword';
import DeleteAccount from '../components/UserSettings/DeleteAccount';
import UserInformation from '../components/UserSettings/UserInformation';
import { useUserStore } from '../store/user-store';
import Appearance from '../panels/Appearance';
import ChangePassword from '../panels/ChangePassword';
import DeleteAccount from '../panels/DeleteAccount';
import UserInformation from '../panels/UserInformation';
const tabsConfig = [
{ title: 'My profile', component: UserInformation },
{ title: 'Password', component: ChangePassword },
{ title: 'Appearance', component: Appearance },
{ title: 'Danger zone', component: DeleteAccount },
];
const UserSettings: React.FC = () => {
const { user } = useUserStore();
const finalTabs = user?.is_superuser ? tabsConfig.slice(0, 3) : tabsConfig;
return (
<>
<Container maxW="full">
<Heading size="lg" textAlign={{ base: "center", md: "left" }} py={12}>
User Settings
</Heading>
<Tabs variant='enclosed' >
<TabList>
<Tab>My profile</Tab>
<Tab>Password</Tab>
<Tab>Appearance</Tab>
<Tab>Danger zone</Tab>
</TabList>
<TabPanels>
<TabPanel>
<UserInformation />
<Container maxW='full'>
<Heading size='lg' textAlign={{ base: 'center', md: 'left' }} py={12}>
User Settings
</Heading>
<Tabs variant='enclosed'>
<TabList>
{finalTabs.map((tab, index) => (
<Tab key={index}>{tab.title}</Tab>
))}
</TabList>
<TabPanels>
{finalTabs.map((tab, index) => (
<TabPanel key={index}>
<tab.component />
</TabPanel>
<TabPanel>
<ChangePassword />
</TabPanel>
<TabPanel>
<Appearance />
</TabPanel>
<TabPanel>
<DeleteAccount />
</TabPanel>
</TabPanels>
</Tabs>
</Container>
</>
))}
</TabPanels>
</Tabs>
</Container>
);
};
export default UserSettings;
export default UserSettings;

35
src/new-frontend/src/panels/ChangePassword.tsx
View File

@@ -1,35 +0,0 @@
import React from 'react';
import { Box, Button, Container, FormControl, FormLabel, Heading, Input, useColorModeValue } from '@chakra-ui/react';
const ChangePassword: React.FC = () => {
const color = useColorModeValue("gray.700", "white");
return (
<>
<Container maxW="full">
<Heading size="sm" py={4}>
Change Password
</Heading>
<Box as="form" display="flex" flexDirection="column" alignItems="start">
<FormControl>
<FormLabel color={color}>Old password</FormLabel>
<Input placeholder='Password' type="password" />
</FormControl>
<FormControl mt={4}>
<FormLabel color={color}>New password</FormLabel>
<Input placeholder='Password' type="password" />
</FormControl>
<FormControl mt={4}>
<FormLabel color={color}>Confirm new password</FormLabel>
<Input placeholder='Password' type="password" />
</FormControl>
<Button bg="ui.main" color="white" _hover={{ opacity: 0.8 }} mt={4} type="submit">
Save
</Button>
</Box>
</ Container>
</>
);
}
export default ChangePassword;

50
src/new-frontend/src/panels/UserInformation.tsx
View File

@@ -1,50 +0,0 @@
import React, { useState } from 'react';
import { Button, Container, FormControl, FormLabel, Heading, Input, Text, useColorModeValue } from '@chakra-ui/react';
import { useUserStore } from '../store/user-store';
const UserInformation: React.FC = () => {
const color = useColorModeValue("gray.700", "white");
const [editMode, setEditMode] = useState(false);
const { user } = useUserStore();
const toggleEditMode = () => {
setEditMode(!editMode);
};
return (
<>
<Container maxW="full">
<Heading size="sm" py={4}>
User Information
</Heading>
<FormControl>
<FormLabel color={color}>Full name</FormLabel>
{
editMode ?
<Input placeholder={user?.full_name || "Full name"} type="text" size="md" /> :
<Text size="md" py={2}>
{user?.full_name || "N/A"}
</Text>
}
</FormControl>
<FormControl mt={4}>
<FormLabel color={color}>Email</FormLabel>
{
editMode ?
<Input placeholder={user?.email} type="text" size="md" /> :
<Text size="md" py={2}>
{user?.email || "N/A"}
</Text>
}
</FormControl>
<Button bg="ui.main" color="white" _hover={{ opacity: 0.8 }} mt={4} onClick={toggleEditMode}>
{editMode ? "Save" : "Edit"}
</Button>
</ Container>
</>
);
}
export default UserInformation;

19
src/new-frontend/src/store/items-store.tsx
View File

@@ -1,11 +1,13 @@
import { create } from "zustand";
import { ItemCreate, ItemOut, ItemsService } from "../client";
import { create } from 'zustand';
import { ItemCreate, ItemOut, ItemUpdate, ItemsService } from '../client';
interface ItemsStore {
interface ItemsStore {
items: ItemOut[];
getItems: () => Promise<void>;
addItem: (item: ItemCreate) => Promise<void>;
editItem: (id: number, item: ItemUpdate) => Promise<void>;
deleteItem: (id: number) => Promise<void>;
resetItems: () => void;
}
export const useItemsStore = create<ItemsStore>((set) => ({
@@ -15,11 +17,20 @@ export const useItemsStore = create<ItemsStore>((set) => ({
set({ items: itemsResponse });
},
addItem: async (item: ItemCreate) => {
const itemResponse = await ItemsService.createItem({ requestBody: item});
const itemResponse = await ItemsService.createItem({ requestBody: item });
set((state) => ({ items: [...state.items, itemResponse] }));
},
editItem: async (id: number, item: ItemUpdate) => {
const itemResponse = await ItemsService.updateItem({ id: id, requestBody: item });
set((state) => ({
items: state.items.map((item) => (item.id === id ? itemResponse : item))
}));
},
deleteItem: async (id: number) => {
await ItemsService.deleteItem({ id });
set((state) => ({ items: state.items.filter((item) => item.id !== id) }));
},
resetItems: () => {
set({ items: [] });
}
}));

13
src/new-frontend/src/store/user-store.tsx
View File

@@ -1,9 +1,11 @@
import { create } from "zustand";
import { UserOut, UsersService } from "../client";
import { create } from 'zustand';
import { UpdatePassword, UserOut, UserUpdateMe, UsersService } from '../client';
interface UserStore {
user: UserOut | null;
getUser: () => Promise<void>;
editUser: (user: UserUpdateMe) => Promise<void>;
editPassword: (password: UpdatePassword) => Promise<void>;
resetUser: () => void;
}
@@ -13,6 +15,13 @@ export const useUserStore = create<UserStore>((set) => ({
const user = await UsersService.readUserMe();
set({ user });
},
editUser: async (user: UserUpdateMe) => {
const updatedUser = await UsersService.updateUserMe({ requestBody: user });
set((state) => ({ user: { ...state.user, ...updatedUser } }));
},
editPassword: async (password: UpdatePassword) => {
await UsersService.updatePasswordMe({ requestBody: password });
},
resetUser: () => {
set({ user: null });
}

13
src/new-frontend/src/store/users-store.tsx
View File

@@ -1,11 +1,13 @@
import { create } from "zustand";
import { UserCreate, UserOut, UsersService } from "../client";
import { UserCreate, UserOut, UserUpdate, UsersService } from "../client";
interface UsersStore {
users: UserOut[];
getUsers: () => Promise<void>;
addUser: (user: UserCreate) => Promise<void>;
editUser: (id: number, user: UserUpdate) => Promise<void>;
deleteUser: (id: number) => Promise<void>;
resetUsers: () => void;
}
export const useUsersStore = create<UsersStore>((set) => ({
@@ -18,8 +20,17 @@ export const useUsersStore = create<UsersStore>((set) => ({
const userResponse = await UsersService.createUser({ requestBody: user });
set((state) => ({ users: [...state.users, userResponse] }));
},
editUser: async (id: number, user: UserUpdate) => {
const userResponse = await UsersService.updateUser({ userId: id, requestBody: user });
set((state) => ({
users: state.users.map((user) => (user.id === id ? userResponse : user))
}));
},
deleteUser: async (id: number) => {
await UsersService.deleteUser({ userId: id });
set((state) => ({ users: state.users.filter((user) => user.id !== id) }));
},
resetUsers: () => {
set({ users: [] });
}
}))