✨ Migrate to RouterProvider and other refactors (#598)
Co-authored-by: Sebastián Ramírez <tiangolo@gmail.com>
This commit is contained in:
Alejandra
GitHub
@@ -1,42 +0,0 @@
|
||||
#root {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.react:hover {
|
||||
filter: drop-shadow(0 0 2em #61dafbaa);
|
||||
}
|
||||
|
||||
@keyframes logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
a:nth-of-type(2) .logo {
|
||||
animation: logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
@@ -1,61 +0,0 @@
|
||||
import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';
|
||||
|
||||
import { ChakraProvider, extendTheme } from '@chakra-ui/react';
|
||||
|
||||
import Layout from './pages/Layout';
|
||||
import NotFound from './pages/NotFound';
|
||||
import Login from './pages/auth/Login';
|
||||
import RecoverPassword from './pages/auth/RecoverPassword';
|
||||
import Admin from './pages/main/Admin';
|
||||
import Dashboard from './pages/main/Dashboard';
|
||||
import Items from './pages/main/Items';
|
||||
import Profile from './pages/main/Profile';
|
||||
|
||||
// Theme
|
||||
const theme = extendTheme({
|
||||
colors: {
|
||||
ui: {
|
||||
main: "#009688",
|
||||
secondary: "#EDF2F7",
|
||||
success: '#48BB78',
|
||||
danger: '#E53E3E',
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Tabs: {
|
||||
variants: {
|
||||
enclosed: {
|
||||
tab: {
|
||||
_selected: {
|
||||
color: 'ui.main',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<>
|
||||
<Router>
|
||||
<ChakraProvider theme={theme}>
|
||||
<Routes>
|
||||
<Route path="/login" element={<Login />} />
|
||||
<Route path="/recover-password" element={<RecoverPassword />} />
|
||||
<Route element={<Layout />}>
|
||||
<Route path="/" element={<Dashboard />} />
|
||||
<Route path="/settings" element={<Profile />} />
|
||||
<Route path="/items" element={<Items />} />
|
||||
<Route path="/admin" element={<Admin />} />
|
||||
</Route>
|
||||
<Route path="*" element={<NotFound />} />
|
||||
</Routes>
|
||||
</ ChakraProvider>
|
||||
</Router>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
51
src/new-frontend/src/assets/images/fastapi-logo.svg
Normal file
51
src/new-frontend/src/assets/images/fastapi-logo.svg
Normal file
@@ -0,0 +1,51 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
id="svg8"
|
||||
version="1.1"
|
||||
viewBox="0 0 346.52395 63.977134"
|
||||
height="63.977139mm"
|
||||
width="346.52396mm"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/">
|
||||
<defs
|
||||
id="defs2" />
|
||||
<metadata
|
||||
id="metadata5">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
id="g2149">
|
||||
<g
|
||||
id="g2141">
|
||||
<g
|
||||
id="g2106"
|
||||
transform="matrix(0.96564264,0,0,0.96251987,-899.3295,194.86874)">
|
||||
<circle
|
||||
style="fill:#009688;fill-opacity:0.980392;stroke:none;stroke-width:0.141404;stop-color:#000000"
|
||||
id="path875-5-9-7-3-2-3-9-9-8-0-0-5-87-7"
|
||||
cx="964.56165"
|
||||
cy="-169.22266"
|
||||
r="33.234192" />
|
||||
<path
|
||||
id="rect1249-6-3-4-4-3-6-6-1-2"
|
||||
style="fill:#ffffff;fill-opacity:0.980392;stroke:none;stroke-width:0.146895;stop-color:#000000"
|
||||
d="m 962.2685,-187.40837 -6.64403,14.80375 -3.03599,6.76393 -6.64456,14.80375 30.59142,-21.56768 h -14.35312 l 20.99715,-14.80375 z" />
|
||||
</g>
|
||||
<path
|
||||
style="font-size:79.7151px;line-height:1.25;font-family:Ubuntu;-inkscape-font-specification:Ubuntu;letter-spacing:0px;word-spacing:0px;fill:#009688;stroke-width:1.99288"
|
||||
d="M 89.523017,59.410606 V 4.1680399 H 122.84393 V 10.784393 H 97.255382 V 27.44485 h 22.718808 v 6.536638 H 97.255382 v 25.429118 z m 52.292963,-5.340912 q 2.6306,0 4.62348,-0.07972 2.07259,-0.15943 3.42774,-0.47829 V 41.155848 q -0.79715,-0.398576 -2.63059,-0.637721 -1.75374,-0.31886 -4.30462,-0.31886 -1.67402,0 -3.58718,0.239145 -1.83345,0.239145 -3.42775,1.036296 -1.51459,0.717436 -2.55088,2.072593 -1.0363,1.275442 -1.0363,3.427749 0,3.985755 2.55089,5.580058 2.55088,1.514586 6.93521,1.514586 z m -0.63772,-37.147238 q 4.46404,0 7.49322,1.195727 3.10889,1.116011 4.94233,3.268319 1.91317,2.072593 2.71032,5.022052 0.79715,2.869743 0.79715,6.377208 V 58.69317 q -0.95658,0.159431 -2.71031,0.478291 -1.67402,0.239145 -3.82633,0.478291 -2.15231,0.239145 -4.70319,0.398575 -2.47117,0.239146 -4.94234,0.239146 -3.50746,0 -6.45692,-0.717436 -2.94946,-0.717436 -5.10177,-2.232023 -2.1523,-1.594302 -3.34803,-4.145186 -1.19573,-2.550883 -1.19573,-6.138063 0,-3.427749 1.35516,-5.898917 1.43487,-2.471168 3.82632,-3.985755 2.39146,-1.514587 5.58006,-2.232023 3.18861,-0.717436 6.69607,-0.717436 1.11601,0 2.31174,0.15943 1.19572,0.07972 2.23202,0.31886 1.11601,0.159431 1.91316,0.318861 0.79715,0.15943 1.11601,0.239145 v -2.072593 q 0,-1.833447 -0.39857,-3.587179 -0.39858,-1.833448 -1.43487,-3.188604 -1.0363,-1.434872 -2.86975,-2.232023 -1.75373,-0.876866 -4.62347,-0.876866 -3.6669,0 -6.45693,0.558005 -2.71031,0.478291 -4.06547,1.036297 l -0.87686,-6.138063 q 1.43487,-0.637721 4.7829,-1.195727 3.34804,-0.637721 7.25408,-0.637721 z m 37.86462,37.147238 q 4.54377,0 6.69607,-1.195726 2.23203,-1.195727 2.23203,-3.826325 0,-2.710314 -2.15231,-4.304616 -2.15231,-1.594302 -7.09465,-3.587179 -2.39145,-0.956581 -4.62347,-1.913163 -2.15231,-1.036296 -3.74661,-2.391453 -1.5943,-1.355157 -2.55088,-3.268319 -0.95659,-1.913163 -0.95659,-4.703191 0,-5.500342 4.06547,-8.688946 4.06547,-3.26832 11.0804,-3.26832 1.75374,0 3.50747,0.239146 1.75373,0.15943 3.26832,0.47829 1.51458,0.239146 2.6306,0.558006 1.19572,0.31886 1.83344,0.558006 l -1.35515,6.377208 q -1.19573,-0.637721 -3.74661,-1.275442 -2.55089,-0.717436 -6.13807,-0.717436 -3.10889,0 -5.42062,1.275442 -2.31174,1.195727 -2.31174,3.826325 0,1.355157 0.47829,2.391453 0.55801,1.036296 1.5943,1.913163 1.11601,0.797151 2.71031,1.514587 1.59431,0.717436 3.82633,1.514587 2.94946,1.116011 5.2612,2.232022 2.31173,1.036297 3.90604,2.471169 1.67401,1.434871 2.55088,3.507464 0.87687,1.992878 0.87687,4.942337 0,5.739487 -4.30462,8.688946 -4.2249,2.949459 -12.1167,2.949459 -5.50034,0 -8.60923,-0.956582 -3.10889,-0.876866 -4.2249,-1.355156 l 1.35516,-6.377209 q 1.27544,0.478291 4.06547,1.434872 2.79003,0.956581 7.4135,0.956581 z m 32.84256,-36.110941 h 15.70387 v 6.217778 h -15.70387 v 19.131625 q 0,3.108889 0.47829,5.181481 0.47829,1.992878 1.43487,3.188604 0.95658,1.116012 2.39145,1.594302 1.43487,0.478291 3.34804,0.478291 3.34803,0 5.34091,-0.717436 2.07259,-0.797151 2.86974,-1.116011 l 1.43487,6.138063 q -1.11601,0.558005 -3.90604,1.355156 -2.79003,0.876867 -6.37721,0.876867 -4.2249,0 -7.01492,-1.036297 -2.71032,-1.116011 -4.38434,-3.268319 -1.67401,-2.152308 -2.39145,-5.261197 -0.63772,-3.188604 -0.63772,-7.333789 V 6.4000628 l 7.41351,-1.2754417 z m 62.49652,41.451853 q -1.35516,-3.587179 -2.55088,-7.014929 -1.19573,-3.507464 -2.47117,-7.094644 h -25.03054 l -5.02205,14.109573 h -8.05123 q 3.18861,-8.768661 5.97863,-16.182166 2.79003,-7.493219 5.42063,-14.189288 2.71031,-6.696069 5.34091,-12.754416 2.6306,-6.138063 5.50034,-12.1166961 h 7.09465 q 2.86974,5.9786331 5.50034,12.1166961 2.6306,6.058347 5.2612,12.754416 2.71031,6.696069 5.50034,14.189288 2.79003,7.413505 5.97863,16.182166 z m -7.25407,-20.486781 q -2.55089,-6.935214 -5.10177,-13.392137 -2.47117,-6.536639 -5.18148,-12.515272 -2.79003,5.978633 -5.34091,12.515272 -2.47117,6.456923 -4.94234,13.392137 z M 304.99242,3.6100342 q 11.6384,0 17.85618,4.4640458 6.29749,4.384331 6.29749,13.152992 0,4.782906 -1.75373,8.210656 -1.67402,3.348034 -4.94234,5.500342 -3.1886,2.072592 -7.81208,3.029174 -4.62347,0.956581 -10.44268,0.956581 h -6.13806 v 20.486781 h -7.73236 V 4.9651909 q 3.26832,-0.797151 7.25407,-1.0362963 4.06547,-0.3188604 7.41351,-0.3188604 z m 0.63772,6.7757838 q -4.94234,0 -7.57294,0.239145 v 21.682508 h 5.8192 q 3.98576,0 7.17436,-0.47829 3.18861,-0.558006 5.34092,-1.753733 2.23202,-1.275441 3.42774,-3.427749 1.19573,-2.152308 1.19573,-5.500342 0,-3.188604 -1.27544,-5.261197 -1.19573,-2.072593 -3.34803,-3.268319 -2.0726,-1.275442 -4.86263,-1.753732 -2.79002,-0.478291 -5.89891,-0.478291 z M 338.7916,4.1680399 h 7.73237 V 59.410606 h -7.73237 z"
|
||||
id="text979"
|
||||
aria-label="FastAPI" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 412 B After Width: | Height: | Size: 4.9 KiB |
@@ -4,9 +4,9 @@ import { Button, Menu, MenuButton, MenuItem, MenuList, useDisclosure } from '@ch
|
||||
import { BsThreeDotsVertical } from 'react-icons/bs';
|
||||
import { FiTrash, FiEdit } from 'react-icons/fi';
|
||||
|
||||
import Delete from '../pages/modals/DeleteAlert';
|
||||
import EditUser from '../pages/modals/EditUser';
|
||||
import EditItem from '../pages/modals/EditItem';
|
||||
import Delete from '../modals/DeleteAlert';
|
||||
import EditUser from '../modals/EditUser';
|
||||
import EditItem from '../modals/EditItem';
|
||||
|
||||
interface ActionsMenuProps {
|
||||
type: string;
|
||||
|
||||
@@ -1,27 +1,33 @@
|
||||
import React from 'react';
|
||||
|
||||
import { Button, Flex, Icon, useDisclosure } from '@chakra-ui/react';
|
||||
import { FaPlus } from "react-icons/fa";
|
||||
import { Button, Flex, Icon, Input, InputGroup, InputLeftElement, useDisclosure } from '@chakra-ui/react';
|
||||
import { FaPlus, FaSearch } from "react-icons/fa";
|
||||
|
||||
import CreateItem from '../pages/modals/CreateItem';
|
||||
import CreateUser from '../pages/modals/CreateUser';
|
||||
import AddUser from '../modals/AddUser';
|
||||
import AddItem from '../modals/AddItem';
|
||||
|
||||
interface NavbarProps {
|
||||
type: string;
|
||||
}
|
||||
|
||||
const Navbar: React.FC<NavbarProps> = ({ type }) => {
|
||||
const createUserModal = useDisclosure();
|
||||
const createItemModal = useDisclosure();
|
||||
const addUserModal = useDisclosure();
|
||||
const addItemModal = useDisclosure();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex gap={4} py={{ base: "8", md: "4" }} justify={{ base: "center", md: "end" }}>
|
||||
<Button bg="ui.main" color="white" gap={1} fontSize={{ base: "sm", md: "inherit" }} onClick={type === "User" ? createUserModal.onOpen : createItemModal.onOpen}>
|
||||
<Icon as={FaPlus} /> Create {type}
|
||||
<Flex py={8} gap={4}>
|
||||
<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>
|
||||
<CreateUser isOpen={createUserModal.isOpen} onClose={createUserModal.onClose} />
|
||||
<CreateItem isOpen={createItemModal.isOpen} onClose={createItemModal.onClose} />
|
||||
<AddUser isOpen={addUserModal.isOpen} onClose={addUserModal.onClose} />
|
||||
<AddItem isOpen={addItemModal.isOpen} onClose={addItemModal.onClose} />
|
||||
</Flex >
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -1,15 +1,16 @@
|
||||
import React from 'react';
|
||||
|
||||
import { Box, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerOverlay, Flex, IconButton, Image, useDisclosure } from '@chakra-ui/react';
|
||||
import { Box, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerOverlay, Flex, IconButton, Image, useDisclosure, Text } from '@chakra-ui/react';
|
||||
import { FiMenu } from 'react-icons/fi';
|
||||
|
||||
import Logo from "../assets/images/fastapi-logo.png";
|
||||
import Logo from "../assets/images/fastapi-logo.svg";
|
||||
import SidebarItems from './SidebarItems';
|
||||
import UserInfo from './UserInfo';
|
||||
import { useUserStore } from '../store/user-store';
|
||||
|
||||
|
||||
const Sidebar: React.FC = () => {
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
const { user } = useUserStore();
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -20,12 +21,15 @@ const Sidebar: React.FC = () => {
|
||||
<DrawerContent bg="ui.secondary" maxW="250px">
|
||||
<DrawerCloseButton />
|
||||
<DrawerBody py={8}>
|
||||
<Flex flexDir="column" justify="space-between" h="100%">
|
||||
<Flex flexDir="column" justify="space-between">
|
||||
<Box>
|
||||
<Image src={Logo} alt="Logo" />
|
||||
<Image src={Logo} alt="Logo" p={6} />
|
||||
<SidebarItems onClose={onClose} />
|
||||
</Box>
|
||||
<UserInfo />
|
||||
{
|
||||
user?.email &&
|
||||
<Text color='gray' noOfLines={2} fontSize="sm" p={2}>Logged in as: {user.email}</Text>
|
||||
}
|
||||
</Flex>
|
||||
</DrawerBody>
|
||||
</DrawerContent>
|
||||
@@ -33,12 +37,15 @@ const Sidebar: React.FC = () => {
|
||||
|
||||
{/* Desktop */}
|
||||
<Box bg="white" p={3} h="100vh" position="sticky" top="0" display={{ base: 'none', md: 'flex' }}>
|
||||
<Flex flexDir="column" justify="space-between" bg="ui.secondary" p={6} borderRadius={12}>
|
||||
<Flex flexDir="column" justify="space-between" bg="ui.secondary" p={4} borderRadius={12}>
|
||||
<Box>
|
||||
<Image src={Logo} alt="Logo" w="180px" maxW="2xs" />
|
||||
<Image src={Logo} alt="Logo" w="180px" maxW="2xs" p={6} />
|
||||
<SidebarItems />
|
||||
</Box>
|
||||
<UserInfo />
|
||||
{
|
||||
user?.email &&
|
||||
<Text color='gray' noOfLines={2} fontSize="sm" p={2} maxW="180px">Logged in as: {user.email}</Text>
|
||||
}
|
||||
</Flex>
|
||||
</Box>
|
||||
</>
|
||||
|
||||
@@ -1,16 +1,14 @@
|
||||
import React from 'react';
|
||||
|
||||
import { Flex, Icon, Text } from '@chakra-ui/react';
|
||||
import { FiBriefcase, FiHome, FiLogOut, FiSettings, FiUsers } from 'react-icons/fi';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
|
||||
import { Box, Flex, Icon, Text } from '@chakra-ui/react';
|
||||
import { FiBriefcase, FiHome, FiSettings, FiUsers } from 'react-icons/fi';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
|
||||
const items = [
|
||||
{ icon: FiHome, title: 'Dashboard', path: "/" },
|
||||
{ icon: FiBriefcase, title: 'Items', path: "/items" },
|
||||
{ icon: FiUsers, title: 'Admin', path: "/admin" },
|
||||
{ icon: FiSettings, title: 'User Settings', path: "/settings" },
|
||||
{ icon: FiLogOut, title: 'Log out' }
|
||||
];
|
||||
|
||||
interface SidebarItemsProps {
|
||||
@@ -18,32 +16,33 @@ interface SidebarItemsProps {
|
||||
}
|
||||
|
||||
const SidebarItems: React.FC<SidebarItemsProps> = ({ onClose }) => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleLogout = async () => {
|
||||
localStorage.removeItem("access_token");
|
||||
navigate("/login");
|
||||
// TODO: reset all Zustand states
|
||||
};
|
||||
const location = useLocation();
|
||||
|
||||
const listItems = items.map((item) => (
|
||||
<Flex w="100%" p={2} key={item.title} _hover={{
|
||||
background: "gray.200",
|
||||
<Flex
|
||||
as={Link}
|
||||
to={item.path}
|
||||
w="100%"
|
||||
p={2}
|
||||
key={item.title}
|
||||
style={location.pathname === item.path ? {
|
||||
background: "#E2E8F0",
|
||||
borderRadius: "12px",
|
||||
}} onClick={item.title === 'Log out' ? handleLogout : onClose}>
|
||||
<Link to={item.path || "/"}>
|
||||
<Flex gap={4}>
|
||||
<Icon color="ui.main" as={item.icon} alignSelf="center" />
|
||||
<Text>{item.title}</Text>
|
||||
|
||||
</Flex>
|
||||
</Link>
|
||||
} : {}}
|
||||
color="ui.main"
|
||||
onClick={onClose}
|
||||
>
|
||||
<Icon as={item.icon} alignSelf="center" />
|
||||
<Text ml={2}>{item.title}</Text>
|
||||
</Flex>
|
||||
));
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box>
|
||||
{listItems}
|
||||
</Box>
|
||||
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,29 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import { Avatar, Flex, Skeleton, Text } from '@chakra-ui/react';
|
||||
import { FaUserAstronaut } from 'react-icons/fa';
|
||||
|
||||
import { useUserStore } from '../store/user-store';
|
||||
|
||||
|
||||
const UserInfo: React.FC = () => {
|
||||
const { user } = useUserStore();
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
{user ? (
|
||||
<Flex gap={2} maxW="180px">
|
||||
<Avatar bg="ui.main" icon={<FaUserAstronaut fontSize="18px" />} size='sm' alignSelf="center" />
|
||||
{/* TODO: Conditional tooltip based on email length */}
|
||||
<Text color='gray' alignSelf={"center"} noOfLines={1} fontSize="14px">{user.email}</Text>
|
||||
</Flex>
|
||||
) :
|
||||
<Skeleton height='20px' />
|
||||
}
|
||||
</>
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
export default UserInfo;
|
||||
45
src/new-frontend/src/components/UserMenu.tsx
Normal file
45
src/new-frontend/src/components/UserMenu.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
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 { FaUserAstronaut } from 'react-icons/fa';
|
||||
import { FiLogOut, FiUser } from 'react-icons/fi';
|
||||
import { useNavigate } from 'react-router';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const UserMenu: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleLogout = async () => {
|
||||
localStorage.removeItem("access_token");
|
||||
navigate("/login");
|
||||
// TODO: reset all Zustand states
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box 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">
|
||||
Log out
|
||||
</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserMenu;
|
||||
@@ -1,20 +1,50 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
|
||||
import { ChakraProvider } from '@chakra-ui/react';
|
||||
import { ChakraProvider } from '@chakra-ui/provider';
|
||||
import { createStandaloneToast } from '@chakra-ui/toast';
|
||||
import { RouterProvider, createBrowserRouter } from 'react-router-dom';
|
||||
|
||||
import App from './App';
|
||||
import { OpenAPI } from './client';
|
||||
import Admin from './pages/Admin';
|
||||
import Dashboard from './pages/Dashboard';
|
||||
import ErrorPage from './pages/ErrorPage';
|
||||
import Items from './pages/Items';
|
||||
import Login from './pages/Login';
|
||||
import RecoverPassword from './pages/RecoverPassword';
|
||||
import Root from './pages/Root';
|
||||
import Profile from './pages/UserSettings';
|
||||
import theme from './theme';
|
||||
|
||||
|
||||
OpenAPI.BASE = import.meta.env.VITE_API_URL;
|
||||
OpenAPI.TOKEN = async () => {
|
||||
return localStorage.getItem('access_token') || '';
|
||||
}
|
||||
|
||||
const router = createBrowserRouter([
|
||||
{
|
||||
path: '/',
|
||||
element: <Root />,
|
||||
errorElement: <ErrorPage />,
|
||||
children: [
|
||||
{ path: '/', element: <Dashboard /> },
|
||||
{ path: 'items', element: <Items /> },
|
||||
{ path: 'admin', element: <Admin /> },
|
||||
{ path: 'settings', element: <Profile /> },
|
||||
],
|
||||
},
|
||||
{ path: 'login', element: <Login />, errorElement: <ErrorPage />, },
|
||||
{ path: 'recover-password', element: <RecoverPassword />, errorElement: <ErrorPage />, },
|
||||
]);
|
||||
|
||||
const { ToastContainer } = createStandaloneToast();
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<React.StrictMode>
|
||||
<ChakraProvider>
|
||||
<App />
|
||||
<ChakraProvider theme={theme}>
|
||||
<RouterProvider router={router} />
|
||||
<ToastContainer />
|
||||
</ChakraProvider>
|
||||
</React.StrictMode>,
|
||||
)
|
||||
|
||||
@@ -3,41 +3,41 @@ import React, { useState } from 'react';
|
||||
import { Button, FormControl, FormLabel, Input, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, useToast } from '@chakra-ui/react';
|
||||
import { SubmitHandler, useForm } from 'react-hook-form';
|
||||
|
||||
import { ItemCreate } from '../../client';
|
||||
import { useItemsStore } from '../../store/items-store';
|
||||
import { ItemCreate } from '../client';
|
||||
import { useItemsStore } from '../store/items-store';
|
||||
|
||||
interface CreateItemProps {
|
||||
interface AddItemProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const CreateItem: React.FC<CreateItemProps> = ({ isOpen, onClose }) => {
|
||||
const AddItem: React.FC<AddItemProps> = ({ isOpen, onClose }) => {
|
||||
const toast = useToast();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const { register, handleSubmit } = useForm<ItemCreate>();
|
||||
const { register, handleSubmit, reset } = useForm<ItemCreate>();
|
||||
const { addItem } = useItemsStore();
|
||||
|
||||
const onSubmit: SubmitHandler<ItemCreate> = async (data) => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await addItem(data);
|
||||
setIsLoading(false);
|
||||
|
||||
toast({
|
||||
title: 'Success!',
|
||||
description: 'Item created successfully.',
|
||||
status: 'success',
|
||||
isClosable: true,
|
||||
});
|
||||
reset();
|
||||
onClose();
|
||||
} catch (err) {
|
||||
setIsLoading(false);
|
||||
toast({
|
||||
title: 'Something went wrong.',
|
||||
description: 'Failed to create item. Please try again.',
|
||||
status: 'error',
|
||||
isClosable: true,
|
||||
});
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -51,7 +51,7 @@ const CreateItem: React.FC<CreateItemProps> = ({ isOpen, onClose }) => {
|
||||
>
|
||||
<ModalOverlay />
|
||||
<ModalContent as="form" onSubmit={handleSubmit(onSubmit)}>
|
||||
<ModalHeader>Create Item</ModalHeader>
|
||||
<ModalHeader>Add Item</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody pb={6}>
|
||||
<FormControl>
|
||||
@@ -59,7 +59,7 @@ const CreateItem: React.FC<CreateItemProps> = ({ isOpen, onClose }) => {
|
||||
<Input
|
||||
{...register('title')}
|
||||
placeholder="Title"
|
||||
|
||||
type="text"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl mt={4}>
|
||||
@@ -67,13 +67,13 @@ const CreateItem: React.FC<CreateItemProps> = ({ isOpen, onClose }) => {
|
||||
<Input
|
||||
{...register('description')}
|
||||
placeholder="Description"
|
||||
|
||||
type="text"
|
||||
/>
|
||||
</FormControl>
|
||||
</ModalBody>
|
||||
|
||||
<ModalFooter gap={3}>
|
||||
<Button bg="ui.main" color="white" 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}>
|
||||
@@ -86,4 +86,4 @@ const CreateItem: React.FC<CreateItemProps> = ({ isOpen, onClose }) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateItem;
|
||||
export default AddItem;
|
||||
@@ -1,43 +1,44 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import { Box, Button, Checkbox, Flex, FormControl, FormLabel, Input, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Spinner, useToast } from '@chakra-ui/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';
|
||||
import { UserCreate } from '../client';
|
||||
import { useUsersStore } from '../store/users-store';
|
||||
|
||||
interface CreateUserProps {
|
||||
interface AddUserProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const CreateUser: React.FC<CreateUserProps> = ({ isOpen, onClose }) => {
|
||||
const AddUser: React.FC<AddUserProps> = ({ isOpen, onClose }) => {
|
||||
const toast = useToast();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const { register, handleSubmit } = useForm<UserCreate>();
|
||||
const { register, handleSubmit, reset } = useForm<UserCreate>();
|
||||
const { addUser } = useUsersStore();
|
||||
|
||||
const onSubmit: SubmitHandler<UserCreate> = async (data) => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await addUser(data);
|
||||
setIsLoading(false);
|
||||
toast({
|
||||
title: 'Success!',
|
||||
description: 'User created successfully.',
|
||||
status: 'success',
|
||||
isClosable: true,
|
||||
});
|
||||
reset();
|
||||
onClose();
|
||||
|
||||
} catch (err) {
|
||||
setIsLoading(false);
|
||||
toast({
|
||||
title: 'Something went wrong.',
|
||||
description: 'Failed to create user. Please try again.',
|
||||
status: 'error',
|
||||
isClosable: true,
|
||||
});
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -52,7 +53,7 @@ const CreateUser: React.FC<CreateUserProps> = ({ isOpen, onClose }) => {
|
||||
<ModalOverlay />
|
||||
<ModalContent as="form" onSubmit={handleSubmit(onSubmit)}>
|
||||
{/* TODO: Check passwords */}
|
||||
<ModalHeader>Create User</ModalHeader>
|
||||
<ModalHeader>Add User</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody pb={6}>
|
||||
<FormControl>
|
||||
@@ -69,7 +70,7 @@ const CreateUser: React.FC<CreateUserProps> = ({ isOpen, onClose }) => {
|
||||
</FormControl>
|
||||
<FormControl mt={4}>
|
||||
<FormLabel>Confirm Password</FormLabel>
|
||||
<Input placeholder='Password' type="password" />
|
||||
<Input {...register('confirmPassword')} placeholder='Password' type="password" />
|
||||
</FormControl>
|
||||
<Flex>
|
||||
<FormControl mt={4}>
|
||||
@@ -93,4 +94,4 @@ const CreateUser: React.FC<CreateUserProps> = ({ isOpen, onClose }) => {
|
||||
)
|
||||
}
|
||||
|
||||
export default CreateUser;
|
||||
export default AddUser;
|
||||
@@ -1,33 +1,46 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import { AlertDialog, AlertDialogBody, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, Button } from '@chakra-ui/react';
|
||||
import { AlertDialog, AlertDialogBody, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, Button, useToast } from '@chakra-ui/react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
|
||||
import { useItemsStore } from '../../store/items-store';
|
||||
import { useItemsStore } from '../store/items-store';
|
||||
import { useUsersStore } from '../store/users-store';
|
||||
|
||||
interface DeleteProps {
|
||||
toDelete: string;
|
||||
type: string;
|
||||
id: number
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const Delete: React.FC<DeleteProps> = ({ toDelete, id, isOpen, onClose }) => {
|
||||
const Delete: React.FC<DeleteProps> = ({ type, id, isOpen, onClose }) => {
|
||||
const toast = useToast();
|
||||
const cancelRef = React.useRef<HTMLButtonElement | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const { handleSubmit } = useForm();
|
||||
const { deleteItem } = useItemsStore();
|
||||
const { deleteUser } = useUsersStore();
|
||||
|
||||
const onSubmit = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
await deleteItem(id);
|
||||
setIsLoading(false);
|
||||
try {
|
||||
type === 'Item' ? await deleteItem(id) : await deleteUser(id);
|
||||
toast({
|
||||
title: "Success",
|
||||
description: `The ${type.toLowerCase()} was deleted successfully.`,
|
||||
status: "success",
|
||||
isClosable: true,
|
||||
});
|
||||
onClose();
|
||||
} catch (err) {
|
||||
toast({
|
||||
title: "An error occurred.",
|
||||
description: `An error occurred while deleting the ${type.toLowerCase()}.`,
|
||||
status: "error",
|
||||
isClosable: true,
|
||||
});
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
console.error(err);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -43,7 +56,7 @@ const Delete: React.FC<DeleteProps> = ({ toDelete, id, isOpen, onClose }) => {
|
||||
<AlertDialogOverlay>
|
||||
<AlertDialogContent as="form" onSubmit={handleSubmit(onSubmit)}>
|
||||
<AlertDialogHeader fontSize='lg' fontWeight='bold'>
|
||||
Delete {toDelete}
|
||||
Delete {type}
|
||||
</AlertDialogHeader>
|
||||
|
||||
<AlertDialogBody>
|
||||
@@ -51,7 +64,7 @@ const Delete: React.FC<DeleteProps> = ({ toDelete, id, isOpen, onClose }) => {
|
||||
</AlertDialogBody>
|
||||
|
||||
<AlertDialogFooter gap={3}>
|
||||
<Button colorScheme='red' type="submit" isLoading={isLoading}>
|
||||
<Button bg="ui.danger" color="white" _hover={{ opacity: 0.8 }} type="submit" isLoading={isLoading}>
|
||||
Delete
|
||||
</Button>
|
||||
<Button ref={cancelRef} onClick={onClose} isDisabled={isLoading}>
|
||||
@@ -24,12 +24,12 @@ const EditItem: React.FC<EditItemProps> = ({ isOpen, onClose }) => {
|
||||
<ModalBody pb={6}>
|
||||
<FormControl>
|
||||
<FormLabel>Item</FormLabel>
|
||||
<Input placeholder='Item' />
|
||||
<Input placeholder='Item' type="text" />
|
||||
</FormControl>
|
||||
|
||||
<FormControl mt={4}>
|
||||
<FormLabel>Description</FormLabel>
|
||||
<Input placeholder='Description' />
|
||||
<Input placeholder='Description' type="text" />
|
||||
</FormControl>
|
||||
</ModalBody>
|
||||
|
||||
@@ -24,15 +24,15 @@ const EditUser: React.FC<EditUserProps> = ({ isOpen, onClose }) => {
|
||||
<ModalBody pb={6}>
|
||||
<FormControl>
|
||||
<FormLabel>Email</FormLabel>
|
||||
<Input placeholder='Email' />
|
||||
<Input placeholder='Email' type="email" />
|
||||
</FormControl>
|
||||
|
||||
<FormControl mt={4}>
|
||||
<FormLabel>Full name</FormLabel>
|
||||
<Input placeholder='Full name' />
|
||||
<Input placeholder='Full name' type="text" />
|
||||
</FormControl>
|
||||
<FormControl mt={4}>
|
||||
<FormLabel>Set Password</FormLabel>
|
||||
<FormLabel>Password</FormLabel>
|
||||
<Input placeholder='Password' type="password" />
|
||||
</FormControl>
|
||||
<Flex>
|
||||
@@ -46,7 +46,7 @@ const EditUser: React.FC<EditUserProps> = ({ isOpen, onClose }) => {
|
||||
</ModalBody>
|
||||
|
||||
<ModalFooter gap={3}>
|
||||
<Button colorScheme='teal'>
|
||||
<Button bg="ui.main" color="white" _hover={{ opacity: 0.8 }}>
|
||||
Save
|
||||
</Button>
|
||||
<Button onClick={onClose}>Cancel</Button>
|
||||
@@ -2,9 +2,9 @@ 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 ActionsMenu from '../../components/ActionsMenu';
|
||||
import Navbar from '../../components/Navbar';
|
||||
import { useUsersStore } from '../../store/users-store';
|
||||
import ActionsMenu from '../components/ActionsMenu';
|
||||
import Navbar from '../components/Navbar';
|
||||
import { useUsersStore } from '../store/users-store';
|
||||
|
||||
const Admin: React.FC = () => {
|
||||
const toast = useToast();
|
||||
@@ -13,21 +13,23 @@ const Admin: React.FC = () => {
|
||||
|
||||
useEffect(() => {
|
||||
const fetchUsers = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await getUsers();
|
||||
setIsLoading(false);
|
||||
} catch (err) {
|
||||
setIsLoading(false);
|
||||
toast({
|
||||
title: 'Something went wrong.',
|
||||
description: 'Failed to fetch users. Please try again.',
|
||||
status: 'error',
|
||||
isClosable: true,
|
||||
});
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
if (users.length === 0) {
|
||||
fetchUsers();
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
@@ -52,6 +54,7 @@ const Admin: React.FC = () => {
|
||||
<Th>Email</Th>
|
||||
<Th>Role</Th>
|
||||
<Th>Status</Th>
|
||||
<Th>Actions</Th>
|
||||
</Tr>
|
||||
</Thead>
|
||||
<Tbody>
|
||||
22
src/new-frontend/src/pages/Dashboard.tsx
Normal file
22
src/new-frontend/src/pages/Dashboard.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
import React from 'react';
|
||||
|
||||
import { Box, Text } from '@chakra-ui/react';
|
||||
|
||||
import { useUserStore } from '../store/user-store';
|
||||
|
||||
|
||||
const Dashboard: React.FC = () => {
|
||||
const { user } = useUserStore();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box width="100%" p={8}>
|
||||
<Text fontSize="2xl">Hi, {user?.full_name || user?.email} 👋🏼</Text>
|
||||
<Text>Welcome back, nice to see you again!</Text>
|
||||
</Box>
|
||||
</>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default Dashboard;
|
||||
26
src/new-frontend/src/pages/ErrorPage.tsx
Normal file
26
src/new-frontend/src/pages/ErrorPage.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import { Button, Container, Text } from "@chakra-ui/react";
|
||||
|
||||
import { Link, useRouteError } from "react-router-dom";
|
||||
|
||||
const ErrorPage: React.FC = () => {
|
||||
const error = useRouteError();
|
||||
console.log(error);
|
||||
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default ErrorPage;
|
||||
|
||||
|
||||
@@ -2,9 +2,9 @@ import React, { useEffect, useState } from 'react';
|
||||
|
||||
import { Container, Flex, Heading, Spinner, Table, TableContainer, Tbody, Td, Th, Thead, Tr, useToast } from '@chakra-ui/react';
|
||||
|
||||
import ActionsMenu from '../../components/ActionsMenu';
|
||||
import Navbar from '../../components/Navbar';
|
||||
import { useItemsStore } from '../../store/items-store';
|
||||
import ActionsMenu from '../components/ActionsMenu';
|
||||
import Navbar from '../components/Navbar';
|
||||
import { useItemsStore } from '../store/items-store';
|
||||
|
||||
|
||||
const Items: React.FC = () => {
|
||||
@@ -14,21 +14,23 @@ const Items: React.FC = () => {
|
||||
|
||||
useEffect(() => {
|
||||
const fetchItems = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await getItems();
|
||||
setIsLoading(false);
|
||||
} catch (err) {
|
||||
setIsLoading(false);
|
||||
toast({
|
||||
title: 'Something went wrong.',
|
||||
description: 'Failed to fetch items. Please try again.',
|
||||
status: 'error',
|
||||
isClosable: true,
|
||||
});
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
if (items.length === 0) {
|
||||
fetchItems();
|
||||
}
|
||||
}, [])
|
||||
|
||||
|
||||
@@ -53,6 +55,7 @@ const Items: React.FC = () => {
|
||||
<Th>ID</Th>
|
||||
<Th>Title</Th>
|
||||
<Th>Description</Th>
|
||||
<Th>Actions</Th>
|
||||
</Tr>
|
||||
</Thead>
|
||||
<Tbody>
|
||||
@@ -1,15 +0,0 @@
|
||||
import { Outlet } from 'react-router-dom';
|
||||
import Sidebar from '../components/Sidebar';
|
||||
|
||||
import { Flex } from '@chakra-ui/react';
|
||||
|
||||
const Layout = () => {
|
||||
return (
|
||||
<Flex maxW="large" h="auto" position="relative">
|
||||
<Sidebar />
|
||||
<Outlet />
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export default Layout;
|
||||
@@ -5,9 +5,9 @@ import { Button, Center, Container, FormControl, Icon, Image, Input, InputGroup,
|
||||
import { SubmitHandler, useForm } from "react-hook-form";
|
||||
import { Link as ReactRouterLink, useNavigate } from "react-router-dom";
|
||||
|
||||
import Logo from "../../assets/images/fastapi-logo.png";
|
||||
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 { LoginService } from "../client";
|
||||
import { Body_login_login_access_token as AccessToken } from "../client/models/Body_login_login_access_token";
|
||||
|
||||
const Login: React.FC = () => {
|
||||
const [show, setShow] = useBoolean();
|
||||
@@ -62,7 +62,7 @@ const [show, setShow] = useBoolean();
|
||||
</Link>
|
||||
</Center>
|
||||
</FormControl>
|
||||
<Button bg="ui.main" color="white" type="submit">
|
||||
<Button bg="ui.main" color="white" _hover={{ opacity: 0.8 }} type="submit">
|
||||
Log In
|
||||
</Button>
|
||||
</Container>
|
||||
@@ -1,18 +0,0 @@
|
||||
import { Button, Container, Text } from "@chakra-ui/react";
|
||||
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
const NotFound = () => (
|
||||
<>
|
||||
<Container h="100vh"
|
||||
alignItems="stretch"
|
||||
justifyContent="center" textAlign="center" maxW="xs" centerContent>
|
||||
<Text fontSize="8xl" color="ui.main" fontWeight="bold" lineHeight="1" mb={4}>404</Text>
|
||||
<Text fontSize="md">Houston, we have a problem.</Text>
|
||||
<Text fontSize="md">It looks like the page you're looking for doesn't exist.</Text>
|
||||
<Button as={Link} to="/" color="ui.main" borderColor="ui.main" variant="outline" mt={4}>Go back to Home</Button>
|
||||
</Container>
|
||||
</>
|
||||
);
|
||||
|
||||
export default NotFound;
|
||||
63
src/new-frontend/src/pages/RecoverPassword.tsx
Normal file
63
src/new-frontend/src/pages/RecoverPassword.tsx
Normal file
@@ -0,0 +1,63 @@
|
||||
import React from "react";
|
||||
|
||||
import { Button, Container, FormControl, Heading, Input, Text, useToast } from "@chakra-ui/react";
|
||||
import { SubmitHandler, useForm } from "react-hook-form";
|
||||
|
||||
import { LoginService } from "../client";
|
||||
|
||||
interface FormData {
|
||||
email: string;
|
||||
}
|
||||
|
||||
const RecoverPassword: React.FC = () => {
|
||||
const { register, handleSubmit } = useForm<FormData>();
|
||||
const toast = useToast();
|
||||
|
||||
const onSubmit: SubmitHandler<FormData> = async (data) => {
|
||||
const response = await LoginService.recoverPassword({
|
||||
email: data.email,
|
||||
});
|
||||
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,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Container
|
||||
as="form"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
h="100vh"
|
||||
maxW="sm"
|
||||
alignItems="stretch"
|
||||
justifyContent="center"
|
||||
gap={4}
|
||||
centerContent
|
||||
>
|
||||
<Heading size="xl" color="ui.main" textAlign="center" mb={2}>
|
||||
Password Recovery
|
||||
</Heading>
|
||||
<FormControl id="username">
|
||||
<Text align="center" color="gray.600">
|
||||
A password recovery email will be sent to the registered account.
|
||||
</Text>
|
||||
<Input
|
||||
{...register("email")}
|
||||
|
||||
mt={4}
|
||||
placeholder="Enter your email"
|
||||
type="text"
|
||||
/>
|
||||
</FormControl>
|
||||
<Button bg="ui.main" color="white" _hover={{ opacity: 0.8 }} type="submit">
|
||||
Continue
|
||||
</Button>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export default RecoverPassword;
|
||||
42
src/new-frontend/src/pages/Root.tsx
Normal file
42
src/new-frontend/src/pages/Root.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
import { useEffect } from 'react';
|
||||
|
||||
import { Outlet } from 'react-router-dom';
|
||||
import Sidebar from '../components/Sidebar';
|
||||
|
||||
import { Flex, useToast } from '@chakra-ui/react';
|
||||
import { useUserStore } from '../store/user-store';
|
||||
import UserMenu from '../components/UserMenu';
|
||||
|
||||
const Root: 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,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
fetchUser();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Flex maxW="large" h="auto" position="relative">
|
||||
<Sidebar />
|
||||
<Outlet />
|
||||
<UserMenu />
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export default Root;
|
||||
@@ -9,7 +9,7 @@ import UserInformation from '../panels/UserInformation';
|
||||
|
||||
|
||||
|
||||
const Profile: React.FC = () => {
|
||||
const UserSettings: React.FC = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -19,7 +19,7 @@ const Profile: React.FC = () => {
|
||||
</Heading>
|
||||
<Tabs variant='enclosed' >
|
||||
<TabList>
|
||||
<Tab>Profile</Tab>
|
||||
<Tab>My profile</Tab>
|
||||
<Tab>Password</Tab>
|
||||
<Tab>Appearance</Tab>
|
||||
<Tab>Danger zone</Tab>
|
||||
@@ -45,5 +45,5 @@ const Profile: React.FC = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default Profile;
|
||||
export default UserSettings;
|
||||
|
||||
@@ -1,24 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import { Box, Text } from '@chakra-ui/react';
|
||||
|
||||
import { useUserStore } from '../../store/user-store';
|
||||
|
||||
|
||||
const Dashboard: React.FC = () => {
|
||||
const { user } = useUserStore();
|
||||
|
||||
return (
|
||||
<>
|
||||
{user ? (
|
||||
<Box width="100%" p={8}>
|
||||
<Text fontSize="24px">Hi, {user.full_name || user.email} 👋🏼</Text>
|
||||
<Text>Welcome back, nice to see you again!</Text>
|
||||
</Box>
|
||||
) : null}
|
||||
</>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default Dashboard;
|
||||
@@ -24,7 +24,7 @@ const Appearance: React.FC = () => {
|
||||
</Radio>
|
||||
</Stack>
|
||||
</RadioGroup>
|
||||
<Button colorScheme='teal' mt={4}>Save</Button>
|
||||
<Button bg="ui.main" color="white" _hover={{ opacity: 0.8 }} mt={4}>Save</Button>
|
||||
</ Container>
|
||||
</>
|
||||
);
|
||||
@@ -23,7 +23,7 @@ const ChangePassword: React.FC = () => {
|
||||
<FormLabel color="gray.700">Confirm new password</FormLabel>
|
||||
<Input placeholder='Password' type="password" />
|
||||
</FormControl>
|
||||
<Button colorScheme='teal' mt={4} type="submit">
|
||||
<Button bg="ui.main" color="white" _hover={{ opacity: 0.8 }} mt={4} type="submit">
|
||||
Save
|
||||
</Button>
|
||||
</Box>
|
||||
@@ -13,7 +13,7 @@ const DeleteAccount: React.FC = () => {
|
||||
<Text>
|
||||
Are you sure you want to delete your account? This action cannot be undone.
|
||||
</Text>
|
||||
<Button colorScheme='red' mt={4}>
|
||||
<Button bg="ui.danger" color="white" _hover={{ opacity: 0.8 }} mt={4}>
|
||||
Delete
|
||||
</Button>
|
||||
</ Container>
|
||||
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
|
||||
|
||||
import { Button, Container, FormControl, FormLabel, Heading, Input, Text } from '@chakra-ui/react';
|
||||
|
||||
import { useUserStore } from '../../store/user-store';
|
||||
import { useUserStore } from '../store/user-store';
|
||||
|
||||
const UserInformation: React.FC = () => {
|
||||
const [editMode, setEditMode] = useState(false);
|
||||
@@ -39,7 +39,7 @@ const UserInformation: React.FC = () => {
|
||||
</Text>
|
||||
}
|
||||
</FormControl>
|
||||
<Button colorScheme='teal' mt={4} onClick={toggleEditMode}>
|
||||
<Button bg="ui.main" color="white" _hover={{ opacity: 0.8 }} mt={4} onClick={toggleEditMode}>
|
||||
{editMode ? "Save" : "Edit"}
|
||||
</Button>
|
||||
</ Container>
|
||||
37
src/new-frontend/src/theme.tsx
Normal file
37
src/new-frontend/src/theme.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
import { extendTheme } from "@chakra-ui/react"
|
||||
|
||||
const theme = extendTheme({
|
||||
colors: {
|
||||
ui: {
|
||||
main: "#009688",
|
||||
secondary: "#EDF2F7",
|
||||
success: '#48BB78',
|
||||
danger: '#E53E3E',
|
||||
focus: 'red',
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Tabs: {
|
||||
variants: {
|
||||
enclosed: {
|
||||
tab: {
|
||||
_selected: {
|
||||
color: 'ui.main',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
Input: {
|
||||
baseStyle: {
|
||||
field: {
|
||||
_focus: {
|
||||
borderColor: 'ui.focus',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export default theme;
|
||||
Reference in New Issue
Block a user