refactor(login): project upgrade

veri-frontend/package.json

@@ -3,29 +3,29 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@chakra-ui/icons": "^2.0.11",
-    "@chakra-ui/react": "^2.3.5",
-    "@emotion/react": "^11.10.4",
-    "@emotion/styled": "^11.10.4",
+    "@chakra-ui/icons": "^2.0.12",
+    "@chakra-ui/react": "^2.4.0",
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^29.1.2",
-    "@types/node": "^18.8.5",
-    "@types/react": "^18.0.21",
-    "@types/react-dom": "^18.0.6",
-    "axios": "^1.1.2",
+    "@types/jest": "^29.2.2",
+    "@types/node": "^18.11.9",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.8",
+    "axios": "^1.1.3",
     "axios-auth-refresh": "^3.3.4",
     "eslint-plugin-prettier": "^4.2.1",
     "formik": "^2.2.9",
-    "framer-motion": "^7.6.5",
+    "framer-motion": "^7.6.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.4.0",
-    "react-router-dom": "^6.4.2",
+    "react-icons": "^4.6.0",
+    "react-router-dom": "^6.4.3",
     "react-scripts": "5.0.1",
     "typescript": "^4.8.4",
-    "web-vitals": "^3.0.3",
+    "web-vitals": "^3.0.4",
     "yup": "^0.32.11"
   },
   "scripts": {
@@ -51,32 +51,32 @@
     ]
   },
   "devDependencies": {
-    "@chakra-ui/storybook-addon": "^4.0.12",
-    "@commitlint/cli": "^17.1.2",
-    "@commitlint/config-conventional": "^17.1.0",
-    "@storybook/addon-actions": "^6.5.12",
-    "@storybook/addon-essentials": "^6.5.12",
-    "@storybook/addon-interactions": "^6.5.12",
-    "@storybook/addon-links": "^6.5.12",
-    "@storybook/builder-webpack5": "^6.5.12",
-    "@storybook/manager-webpack5": "^6.5.12",
-    "@storybook/node-logger": "^6.5.12",
+    "@chakra-ui/storybook-addon": "^4.0.13",
+    "@commitlint/cli": "^17.2.0",
+    "@commitlint/config-conventional": "^17.2.0",
+    "@storybook/addon-actions": "^6.5.13",
+    "@storybook/addon-essentials": "^6.5.13",
+    "@storybook/addon-interactions": "^6.5.13",
+    "@storybook/addon-links": "^6.5.13",
+    "@storybook/builder-webpack5": "^6.5.13",
+    "@storybook/manager-webpack5": "^6.5.13",
+    "@storybook/node-logger": "^6.5.13",
     "@storybook/preset-create-react-app": "^4.1.2",
-    "@storybook/react": "^6.5.12",
+    "@storybook/react": "^6.5.13",
     "@storybook/testing-library": "^0.0.13",
-    "@typescript-eslint/eslint-plugin": "^5.40.0",
-    "@typescript-eslint/parser": "^5.40.0",
+    "@typescript-eslint/eslint-plugin": "^5.42.1",
+    "@typescript-eslint/parser": "^5.42.1",
     "babel-plugin-named-exports-order": "^0.0.2",
     "cz-conventional-changelog": "3.3.0",
-    "eslint": "^8.25.0",
+    "eslint": "^8.27.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-react": "^7.31.10",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "husky": "^8.0.1",
+    "husky": "^8.0.2",
     "lint-staged": "^13.0.3",
     "prettier": "^2.7.1",
     "prop-types": "^15.8.1",
-    "webpack": "^5.74.0"
+    "webpack": "^5.75.0"
   },
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx}": [

veri-frontend/src/Pages/Booth/BoothPage.tsx

@@ -0,0 +1,101 @@
+import {
+  Flex,
+  Box,
+  FormControl,
+  Input,
+  Stack,
+  Button,
+  Heading,
+  useColorModeValue,
+  FormErrorMessage,
+} from '@chakra-ui/react';
+import { useFormik } from 'formik';
+import * as Yup from 'yup';
+import { Login } from '../../types';
+import useAuth from '../../contexts/useAuth';
+import { useState } from 'react';
+import { useToast } from '@chakra-ui/react';
+
+export const BoothPage = () => {
+  const { login } = useAuth();
+  const [isLoading, setisLoading] = useState(false);
+  const toast = useToast();
+
+  const validationSchema = Yup.object().shape({
+    email: Yup.string()
+      .trim()
+      .email('Should be a valid email')
+      .required('This field is required'),
+    password: Yup.string().trim().required('This field is required'),
+  });
+
+  const onSubmit = async (values: Login) => {
+    try {
+      setisLoading(true);
+      login(values);
+    } catch (error) {
+      // console.error(error);
+    } finally {
+      setisLoading(false);
+    }
+  };
+
+  const formik = useFormik({
+    initialValues: {
+      email: '',
+      password: '',
+    },
+    validationSchema: validationSchema,
+    onSubmit,
+  });
+
+  return (
+    <Flex
+      minH={'100vh'}
+      align={'center'}
+      bg={useColorModeValue('gray.50', 'gray.800')}
+    >
+      <Stack spacing={8} mx={'auto'} maxW={'lg'}>
+        <Box
+          rounded={'lg'}
+          bg={useColorModeValue('white', 'gray.700')}
+          boxShadow={'lg'}
+          p={8}
+          w="550px"
+        >
+          <form onSubmit={formik.handleSubmit}>
+            <Stack spacing={4} align={'center'}>
+              <Heading fontSize={'2xl'} pb={4}>
+                Please enter the password
+              </Heading>
+              <FormControl
+                id="password"
+                isRequired
+                isInvalid={formik.touched.password && !!formik.errors.password}
+              >
+                <Input
+                  type="password"
+                  name="password"
+                  value={formik.values.password}
+                  onChange={formik.handleChange}
+                  onBlur={formik.handleBlur}
+                />
+                <FormErrorMessage>{formik.errors.password}</FormErrorMessage>
+              </FormControl>
+              <Stack style={{ alignSelf: 'stretch' }} pt={4}>
+                <Button
+                  type="submit"
+                  colorScheme="primary"
+                  style={{ alignSelf: 'stretch' }}
+                  isLoading={isLoading}
+                >
+                  Get Access
+                </Button>
+              </Stack>
+            </Stack>
+          </form>
+        </Box>
+      </Stack>
+    </Flex>
+  );
+};

veri-frontend/src/Pages/Landing/LandingPage.tsx

@@ -1,6 +1,8 @@
-import { Box, Heading, Container, Text, Stack } from '@chakra-ui/react';
+import { Box, Heading, Container, Text, Stack, Link } from '@chakra-ui/react';
+import { useNavigate } from 'react-router-dom';
 
 export const LandingPage = () => {
+  const navigate = useNavigate();
   return (
     <>
       <Container maxW={'3xl'}>
@@ -16,10 +18,13 @@ export const LandingPage = () => {
             lineHeight={'110%'}
           >
             <br />
-            <Text as={'span'} color={'green.400'}>
+            <Text as={'span'} color={'primary.main'}>
               Landing Page
             </Text>
           </Heading>
+          <Text as={'span'} color={'primary.main'}>
+            <Link onClick={() => navigate('/admin')}>Go to Admin Panel</Link>
+          </Text>
         </Stack>
       </Container>
     </>

veri-frontend/src/Pages/Login/LoginPage.tsx

@@ -2,24 +2,24 @@ import {
   Flex,
   Box,
   FormControl,
-  FormLabel,
   Input,
-  Checkbox,
   Stack,
-  Link,
   Button,
   Heading,
-  Text,
   useColorModeValue,
   FormErrorMessage,
 } from '@chakra-ui/react';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
 import { Login } from '../../types';
 import useAuth from '../../contexts/useAuth';
+import { useState } from 'react';
+import { useToast } from '@chakra-ui/react';
 
 export const LoginPage = () => {
   const { login } = useAuth();
+  const [isLoading, setisLoading] = useState(false);
+  const toast = useToast();
 
   const validationSchema = Yup.object().shape({
     email: Yup.string()
@@ -31,9 +31,12 @@ export const LoginPage = () => {
 
   const onSubmit = async (values: Login) => {
     try {
-      await login(values);
+      setisLoading(true);
+      login(values);
     } catch (error) {
-      console.error(error);
+      // console.error(error);
+    } finally {
+      setisLoading(false);
     }
   };
 
@@ -50,30 +53,26 @@ export const LoginPage = () => {
     <Flex
       minH={'100vh'}
       align={'center'}
-      justify={'center'}
       bg={useColorModeValue('gray.50', 'gray.800')}
     >
-      <Stack spacing={8} mx={'auto'} maxW={'lg'} py={12} px={6}>
-        <Stack align={'center'}>
-          <Heading fontSize={'4xl'}>Sign in to your account</Heading>
-          <Text fontSize={'lg'} color={'gray.600'}>
-            to enjoy all of our cool <Link color={'blue.400'}>features</Link> ✌️
-          </Text>
-        </Stack>
+      <Stack spacing={8} mx={'auto'} maxW={'lg'}>
         <Box
           rounded={'lg'}
           bg={useColorModeValue('white', 'gray.700')}
           boxShadow={'lg'}
           p={8}
+          w="550px"
         >
-          <Stack spacing={4}>
-            <form onSubmit={formik.handleSubmit}>
+          <form onSubmit={formik.handleSubmit}>
+            <Stack spacing={4} align={'center'}>
+              <Heading fontSize={'2xl'} pb={4}>
+                VERI Admin Login
+              </Heading>
               <FormControl
                 id="email"
                 isRequired
                 isInvalid={formik.touched.email && !!formik.errors.email}
               >
-                <FormLabel>Email address</FormLabel>
                 <Input
                   type="email"
                   name="email"
@@ -88,7 +87,6 @@ export const LoginPage = () => {
                 isRequired
                 isInvalid={formik.touched.password && !!formik.errors.password}
               >
-                <FormLabel>Password</FormLabel>
                 <Input
                   type="password"
                   name="password"
@@ -98,28 +96,18 @@ export const LoginPage = () => {
                 />
                 <FormErrorMessage>{formik.errors.password}</FormErrorMessage>
               </FormControl>
-              <Stack spacing={10}>
-                <Stack
-                  direction={{ base: 'column', sm: 'row' }}
-                  align={'start'}
-                  justify={'space-between'}
-                >
-                  <Checkbox>Remember me</Checkbox>
-                  <Link color={'primay.500'}>Forgot password?</Link>
-                </Stack>
+              <Stack style={{ alignSelf: 'stretch' }} pt={4}>
                 <Button
                   type="submit"
-                  disabled={
-                    !formik.dirty ||
-                    !!formik.errors.email ||
-                    !!formik.errors.password
-                  }
+                  colorScheme="primary"
+                  style={{ alignSelf: 'stretch' }}
+                  isLoading={isLoading}
                 >
-                  Sign in
+                  Log in
                 </Button>
               </Stack>
-            </form>
-          </Stack>
+            </Stack>
+          </form>
         </Box>
       </Stack>
     </Flex>

veri-frontend/src/Pages/index.tsx

@@ -8,3 +8,4 @@ export { UserPage as User } from './Admin/User/UserPage';
 export { VeriFormPage as VeriForm } from './Admin/VeriForm/VeriFormPage';
 export { VerisOverviewPage as VerisOverview } from './Admin/VerisOverview/VerisOverviewPage';
 export { SettingsPage as Settings } from './Admin/Settings/SettingsPage';
+export { BoothPage as Booth } from './Booth/BoothPage';

veri-frontend/src/Router/index.tsx

@@ -12,6 +12,7 @@ import {
   VeriForm,
   User,
   Settings,
+  Booth,
 } from '../Pages';
 import { AnimatePresence } from 'framer-motion';
 
@@ -33,6 +34,7 @@ export const Router = () => {
     <AnimatePresence>
       <Routes location={location} key={location.pathname}>
         <Route path="/" element={<Landing />} />
+        <Route path="/booth" element={<Booth />} />
         <Route element={<AuthRoutes />}>
           <Route path="/login" element={<Login />} />
           <Route path="/register" element={<Register />} />

veri-frontend/src/app.tsx

@@ -3,12 +3,15 @@ import { BrowserRouter } from 'react-router-dom';
 import { Router } from './Router';
 import { ChakraProvider } from '@chakra-ui/react';
 import { AuthProvider } from './contexts/useAuth';
+import theme from './design-system/theme/theme';
+import Fonts from './design-system/fonts/Fonts';
 
 function App() {
   return (
     <>
       <ColorModeScript />
-      <ChakraProvider>
+      <ChakraProvider theme={theme}>
+        <Fonts />
         <BrowserRouter>
           <AuthProvider>
             <Router />

veri-frontend/src/contexts/useAuth.tsx

@@ -50,7 +50,6 @@ export function AuthProvider({
     try {
       const response = await authService.login(loginData);
       setUser(response.data.data);
-      navigate('/admin');
     } catch (error) {
       setError(error);
     } finally {
@@ -77,7 +76,6 @@ export function AuthProvider({
     try {
       await authService.logout();
       setUser(undefined);
-      navigate('/');
     } catch (error) {
       console.log(error);
     } finally {