♻ Move project source files to top level from src, update Sentry dependency (#630)

Co-authored-by: Sebastián Ramírez <tiangolo@gmail.com>

new-frontend/src/pages/Admin.tsx

@@ -0,0 +1,92 @@
+import React, { useEffect, useState } from 'react';
+
+import { Badge, Box, Container, Flex, Heading, Spinner, Table, TableContainer, Tbody, Td, Th, Thead, Tr } from '@chakra-ui/react';
+
+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 showToast = useCustomToast();
+    const [isLoading, setIsLoading] = useState(false);
+    const { users, getUsers } = useUsersStore();
+    const { user: currentUser } = useUserStore();
+
+    useEffect(() => {
+        const fetchUsers = async () => {
+            setIsLoading(true);
+            try {
+                await getUsers();
+            } catch (err) {
+                const errDetail = (err as ApiError).body.detail;
+                showToast('Something went wrong.', `${errDetail}`, 'error');
+            } finally {
+                setIsLoading(false);
+            }
+        }
+        if (users.length === 0) {
+            fetchUsers();
+        }
+    }, [])
+
+    return (
+        <>
+            {isLoading ? (
+                // TODO: Add skeleton
+                <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}>
+                        User Management
+                    </Heading>
+                    <Navbar type={'User'} />
+                    <TableContainer>
+                        <Table fontSize='md' size={{ base: 'sm', md: 'md' }}>
+                            <Thead>
+                                <Tr>
+                                    <Th>Full name</Th>
+                                    <Th>Email</Th>
+                                    <Th>Role</Th>
+                                    <Th>Status</Th>
+                                    <Th>Actions</Th>
+                                </Tr>
+                            </Thead>
+                            <Tbody>
+                                {users.map((user) => (
+                                    <Tr key={user.id}>
+                                        <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>
+                                            <Flex gap={2}>
+                                                <Box
+                                                    w='2'
+                                                    h='2'
+                                                    borderRadius='50%'
+                                                    bg={user.is_active ? 'ui.success' : 'ui.danger'}
+                                                    alignSelf='center'
+                                                />
+                                                {user.is_active ? 'Active' : 'Inactive'}
+                                            </Flex>
+                                        </Td>
+                                        <Td>
+                                            <ActionsMenu type='User' id={user.id} disabled={currentUser?.id === user.id ? true : false} />
+                                        </Td>
+                                    </Tr>
+                                ))}
+                            </Tbody>
+                        </Table>
+                    </TableContainer>
+                </Container>
+            )}
+        </>
+    )
+}
+
+export default Admin;

new-frontend/src/pages/Dashboard.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { Container, Text } from '@chakra-ui/react';
+
+import { useUserStore } from '../store/user-store';
+
+
+const Dashboard: React.FC = () => {
+    const { user } = useUserStore();
+
+    return (
+        <>
+            <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>
+        </>
+
+    )
+}
+
+export default Dashboard;

new-frontend/src/pages/ErrorPage.tsx

@@ -0,0 +1,25 @@
+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;
+
+

new-frontend/src/pages/Items.tsx

@@ -0,0 +1,78 @@
+import React, { useEffect, useState } from 'react';
+
+import { Container, Flex, Heading, Spinner, Table, TableContainer, Tbody, Td, Th, Thead, Tr } from '@chakra-ui/react';
+
+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 showToast = useCustomToast();
+    const [isLoading, setIsLoading] = useState(false);
+    const { items, getItems } = useItemsStore();
+
+    useEffect(() => {
+        const fetchItems = async () => {
+            setIsLoading(true);
+            try {
+                await getItems();
+            } catch (err) {
+                const errDetail = (err as ApiError).body.detail;
+                showToast('Something went wrong.', `${errDetail}`, 'error');
+            } finally {
+                setIsLoading(false);
+            }
+        }
+        if (items.length === 0) {
+            fetchItems();
+        }
+    }, [])
+
+
+    return (
+        <>
+            {isLoading ? (
+                // TODO: Add skeleton
+                <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}>
+                        Items Management
+                    </Heading>
+                    <Navbar type={'Item'} />
+                    <TableContainer>
+                        <Table size={{ base: 'sm', md: 'md' }}>
+                            <Thead>
+                                <Tr>
+                                    <Th>ID</Th>
+                                    <Th>Title</Th>
+                                    <Th>Description</Th>
+                                    <Th>Actions</Th>
+                                </Tr>
+                            </Thead>
+                            <Tbody>
+                                {items.map((item) => (
+                                    <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>
+                                            <ActionsMenu type={'Item'} id={item.id} />
+                                        </Td>
+                                    </Tr>
+                                ))}
+                            </Tbody>
+                        </Table>
+                    </TableContainer>
+                </Container>
+            )}
+        </>
+    )
+}
+
+export default Items;

new-frontend/src/pages/Layout.tsx

@@ -0,0 +1,32 @@
+import React, { useEffect } from 'react';
+
+import { Flex } from '@chakra-ui/react';
+import { Outlet } from 'react-router-dom';
+
+import Sidebar from '../components/Common/Sidebar';
+import UserMenu from '../components/Common/UserMenu';
+import { useUserStore } from '../store/user-store';
+import { isLoggedIn } from '../hooks/useAuth';
+
+const Layout: React.FC = () => {
+    const { getUser } = useUserStore();
+
+    useEffect(() => {
+        const fetchUser = async () => {
+            if (isLoggedIn()) {
+                await getUser();
+            }
+        };
+        fetchUser();
+    }, []);
+
+    return (
+        <Flex maxW='large' h='auto' position='relative'>
+            <Sidebar />
+            <Outlet />
+            <UserMenu />
+        </Flex>
+    );
+};
+
+export default Layout;

new-frontend/src/pages/Login.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+
+import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons';
+import { Button, Center, Container, FormControl, FormErrorMessage, Icon, Image, Input, InputGroup, InputRightElement, Link, useBoolean } from '@chakra-ui/react';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { Link as ReactRouterLink } from 'react-router-dom';
+
+import Logo from '../assets/images/fastapi-logo.svg';
+import { ApiError } from '../client';
+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 [error, setError] = React.useState<string | null>(null);
+  const { register, handleSubmit, formState: { errors, isSubmitting } } = useForm<AccessToken>({
+    mode: 'onBlur',
+    criteriaMode: 'all',
+    defaultValues: {
+      username: '',
+      password: ''
+    }
+  });
+  const { login } = useAuth();
+
+  const onSubmit: SubmitHandler<AccessToken> = async (data) => {
+    try {
+      await login(data);
+    } catch (err) {
+      const errDetail = (err as ApiError).body.detail;
+      setError(errDetail)
+    }
+  };
+
+  return (
+    <>
+      <Container
+        as='form'
+        onSubmit={handleSubmit(onSubmit)}
+        h='100vh'
+        maxW='sm'
+        alignItems='stretch'
+        justifyContent='center'
+        gap={4}
+        centerContent
+      >
+        <Image src={Logo} alt='FastAPI logo' height='auto' maxW='2xs' alignSelf='center' mb={4} />
+        <FormControl id='username' isInvalid={!!errors.username || !!error}>
+          <Input id='username' {...register('username', { pattern: { value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i, message: 'Invalid email address' } })} placeholder='Email' type='text' />
+          {errors.username && <FormErrorMessage>{errors.username.message}</FormErrorMessage>}
+        </FormControl>
+        <FormControl id='password' isInvalid={!!error}>
+          <InputGroup>
+            <Input
+              {...register('password')}
+              type={show ? 'text' : 'password'}
+
+              placeholder='Password'
+            />
+            <InputRightElement
+              color='gray.400'
+              _hover={{
+                cursor: 'pointer',
+              }}
+            >
+              <Icon onClick={setShow.toggle} aria-label={show ? 'Hide password' : 'Show password'}>
+                {show ? <ViewOffIcon /> : <ViewIcon />}
+              </Icon>
+            </InputRightElement>
+          </InputGroup>
+          {error && <FormErrorMessage>
+            {error}
+          </FormErrorMessage>}
+        </FormControl>
+        <Center>
+          <Link as={ReactRouterLink} to='/recover-password' color='blue.500'>
+            Forgot password?
+          </Link>
+        </Center>
+        <Button bg='ui.main' color='white' _hover={{ opacity: 0.8 }} type='submit' isLoading={isSubmitting}>
+          Log In
+        </Button>
+      </Container>
+    </>
+  );
+};
+
+export default Login;

new-frontend/src/pages/RecoverPassword.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+
+import { Button, Container, FormControl, FormErrorMessage, 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;
+}
+
+const RecoverPassword: React.FC = () => {
+  const { register, handleSubmit, formState: { errors, isSubmitting } } = useForm<FormData>();
+  const showToast = useCustomToast();
+
+  const onSubmit: SubmitHandler<FormData> = async (data) => {
+    await LoginService.recoverPassword({
+      email: data.email,
+    });
+
+    showToast("Email sent.", "We sent an email with a link to get back into your account.", "success");
+  };
+
+  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>
+      <Text align="center">
+        A password recovery email will be sent to the registered account.
+      </Text>
+      <FormControl isInvalid={!!errors.email}>
+        <Input id='email' {...register('email', { required: 'Email is required', pattern: { value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i, message: 'Invalid email address' } })} placeholder='Email' type='email' />
+        {errors.email && <FormErrorMessage>{errors.email.message}</FormErrorMessage>}
+      </FormControl>
+      <Button bg="ui.main" color="white" _hover={{ opacity: 0.8 }} type="submit" isLoading={isSubmitting}>
+        Continue
+      </Button>
+    </Container>
+  );
+};
+
+export default RecoverPassword;

new-frontend/src/pages/ResetPassword.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+
+import { Button, Container, FormControl, FormErrorMessage, FormLabel, Heading, Input, Text } from "@chakra-ui/react";
+import { SubmitHandler, useForm } from "react-hook-form";
+
+import { LoginService, NewPassword } from "../client";
+import useCustomToast from "../hooks/useCustomToast";
+
+interface NewPasswordForm extends NewPassword {
+    confirm_password: string;
+}
+
+const ResetPassword: React.FC = () => {
+    const { register, handleSubmit, getValues, formState: { errors } } = useForm<NewPasswordForm>({
+        mode: 'onBlur',
+        criteriaMode: 'all',
+        defaultValues: {
+            new_password: '',
+        }
+    });
+    const showToast = useCustomToast();
+
+    const onSubmit: SubmitHandler<NewPasswordForm> = async (data) => {
+        try {
+            const token = new URLSearchParams(window.location.search).get('token');
+            await LoginService.resetPassword({
+                requestBody: { new_password: data.new_password, token: token! }
+            });
+            showToast("Password reset.", "Your password has been reset successfully.", "success");
+        } catch (error) {
+            showToast("Error", "An error occurred while resetting your password.", "error");
+        }
+    };
+
+    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}>
+                Reset Password
+            </Heading>
+            <Text textAlign="center">
+                Please enter your new password and confirm it to reset your password.
+            </Text>
+            <FormControl mt={4} isInvalid={!!errors.new_password}>
+                <FormLabel htmlFor='password'>Set Password</FormLabel>
+                <Input id='password' {...register('new_password', { required: 'Password is required', minLength: { value: 8, message: 'Password must be at least 8 characters' } })} placeholder='Password' type='password' />
+                {errors.new_password && <FormErrorMessage>{errors.new_password.message}</FormErrorMessage>}
+            </FormControl>
+            <FormControl mt={4} isInvalid={!!errors.confirm_password}>
+                <FormLabel htmlFor='confirm_password'>Confirm Password</FormLabel>
+                <Input id='confirm_password' {...register('confirm_password', {
+                    required: 'Please confirm your password',
+                    validate: value => value === getValues().new_password || 'The passwords do not match'
+                })} placeholder='Password' type='password' />
+                {errors.confirm_password && <FormErrorMessage>{errors.confirm_password.message}</FormErrorMessage>}
+            </FormControl>
+            <Button bg="ui.main" color="white" _hover={{ opacity: 0.8 }} type="submit">
+                Reset Password
+            </Button>
+        </Container>
+    );
+};
+
+export default ResetPassword;

new-frontend/src/pages/UserSettings.tsx

@@ -0,0 +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';
+
+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>
+                    {finalTabs.map((tab, index) => (
+                        <Tab key={index}>{tab.title}</Tab>
+                    ))}
+                </TabList>
+                <TabPanels>
+                    {finalTabs.map((tab, index) => (
+                        <TabPanel key={index}>
+                            <tab.component />
+                        </TabPanel>
+                    ))}
+                </TabPanels>
+            </Tabs>
+        </Container>
+    );
+};
+
+export default UserSettings;