Alejandra
1 year ago
committed by
GitHub
GitHub
33 changed files with 472 additions and 313 deletions
@ -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 |
|
||||
|
Before Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 6.2 KiB |
|
Before Width: | Height: | Size: 412 B After Width: | Height: | Size: 4.9 KiB |
@ -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; |
|
||||
@ -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; |
||||
@ -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; |
||||
@ -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; |
||||
|
|
||||
|
|
||||
@ -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; |
|
||||
@ -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; |
|
||||
@ -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; |
||||
@ -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; |
||||
@ -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; |
|
||||
@ -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; |
||||
Loading…
Reference in new issue