fix(frontend): rename Components to components

frontend/src/components/Form/FormTextField.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { TextField } from '@mui/material';
+import '../../css/FormTextField.css';
+
+export default function FormTextField({ type, label, value, onChange, error, required = true }) {
+  return (
+    <TextField
+      value={value}
+      label={label}
+      variant="filled"
+      type={type}
+      onChange={onChange}
+      error={error}
+      required={required}
+      InputProps={{
+        style: { color: 'var(--light-text-color-lighter)' },
+      }}
+      InputLabelProps={{
+        style: { color: 'var(--light-text-color-lighter)' },
+      }}
+      sx={{
+        paddingBottom: 2,
+      }}
+    />
+  );
+}

frontend/src/components/app-bar/AppBar.jsx

@@ -0,0 +1,148 @@
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import MenuIcon from '@mui/icons-material/Menu';
+import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Divider from '@mui/material/Divider';
+import Drawer from '@mui/material/Drawer';
+import IconButton from '@mui/material/IconButton';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemText from '@mui/material/ListItemText';
+import Toolbar from '@mui/material/Toolbar';
+import AAISS from '../../assets/AAISS.png';
+import { useConfig } from '../../providers/config-provider/ConfigProvider.jsx';
+import Image from '../image/Image.jsx';
+import useNavItem from './useNavItem.js';
+
+const drawerWidth = 240;
+
+const NavBarImage = () => (
+  <Image
+    src={AAISS}
+    alt={'aaiss logo'}
+    style={{
+      width: '100px',
+      height: 'inherit',
+      paddingRight: 24,
+    }}
+  />
+);
+
+export default function DrawerAppBar() {
+  const { ROUTES, currentRoute, setCurrentRoute, accessToken, refreshToken } = useConfig();
+  const [mobileOpen, setMobileOpen] = React.useState(false);
+
+  const { getVariant } = useNavItem();
+
+  const appBarPaths = Object.keys(ROUTES).filter((route) => !ROUTES[route]?.hideFromAppBar);
+
+  const handleDrawerToggle = () => {
+    setMobileOpen((prevState) => !prevState);
+  };
+
+  const shouldShowRoute = (route) => {
+    if (route.title === 'My Account') {
+      if (accessToken || refreshToken) {
+        return true;
+      }
+      return false;
+    }
+
+    if (route.title === 'Signup') {
+      if (accessToken || refreshToken) {
+        return false;
+      }
+      return true;
+    }
+
+    return true;
+  };
+
+  const drawer = (
+    <Box onClick={handleDrawerToggle} sx={{ textAlign: 'center' }}>
+      <Link to={ROUTES.home.path} className="logo-item" onClick={() => setCurrentRoute(ROUTES.home)}>
+        <NavBarImage />
+      </Link>
+      <Divider style={{ backgroundColor: 'var(--dark-text-color)' }} />
+      <List>
+        {appBarPaths.map((name, index) => {
+          return (
+            shouldShowRoute(ROUTES[name]) && (
+              <Link to={ROUTES[name].path} style={{ color: 'white', textDecoration: 'none' }} key={index}>
+                <ListItem disablePadding>
+                  <ListItemButton sx={{ textAlign: 'center' }}>
+                    <ListItemText primary={name} />
+                  </ListItemButton>
+                </ListItem>
+              </Link>
+            )
+          );
+        })}
+      </List>
+    </Box>
+  );
+
+  return (
+    <Box sx={{ display: 'flex' }} className="nav">
+      <AppBar component="nav" className="backdrop-color">
+        <Toolbar>
+          <IconButton
+            color="inherit"
+            aria-label="open drawer"
+            edge="start"
+            onClick={handleDrawerToggle}
+            sx={{ mr: 2, display: { sm: 'none' } }}
+          >
+            <MenuIcon />
+          </IconButton>
+          <Link to={ROUTES.home.path} className="logo-item" onClick={() => setCurrentRoute(ROUTES.home)}>
+            <NavBarImage />
+          </Link>
+          <Box sx={{ display: { xs: 'none', sm: 'block' } }}>
+            {appBarPaths.map((name, index) => {
+              return (
+                shouldShowRoute(ROUTES[name]) && (
+                  <Button
+                    href={ROUTES[name].path}
+                    key={index}
+                    variant={getVariant(ROUTES[name].path, currentRoute.path)}
+                    onClick={() => setCurrentRoute(ROUTES[name])}
+                    sx={{
+                      color: '#fff',
+                      paddingRight: 2,
+                    }}
+                  >
+                    {name}
+                  </Button>
+                )
+              );
+            })}
+          </Box>
+        </Toolbar>
+      </AppBar>
+      <nav className="nav">
+        <Drawer
+          variant="temporary"
+          open={mobileOpen}
+          onClose={handleDrawerToggle}
+          ModalProps={{
+            keepMounted: true, // Better open performance on mobile.
+          }}
+          sx={{
+            display: { xs: 'block', sm: 'none' },
+            '& .MuiDrawer-paper': {
+              boxSizing: 'border-box',
+              width: drawerWidth,
+              background: 'var(--background-color-lighter-20)',
+            },
+          }}
+        >
+          {drawer}
+        </Drawer>
+      </nav>
+    </Box>
+  );
+}

frontend/src/components/app-bar/useNavItem.js

@@ -0,0 +1,11 @@
+import { useCallback } from 'react';
+
+export default function useNavItem() {
+  const getVariant = useCallback((path, sect) => {
+    return path !== sect ? 'text' : 'contained';
+  }, []);
+
+  return {
+    getVariant,
+  };
+}

frontend/src/components/footer/PageFooter.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import aut from '../../assets/AUT.png';
+import ceit from '../../assets/CEIT.png';
+import ssc from '../../assets/SSC.png';
+import '../../css/Footer.css'
+import SvgIcon from "@mui/material/SvgIcon";
+import Link from "@mui/material/Link";
+
+export default function PageFooter() {
+    return (
+        <div id="footer-container">
+            <div id="social-media">
+                <span className="link">
+                    <Link href="https://t.me/aaiss_aut">
+                        <SvgIcon>
+                            <svg xmlns="http://www.w3.org/2000/svg" width="307" height="307" viewBox="0 0 307 307"
+                                 fill="none">
+                                <path
+                                    d="M153.81 306.401H153.137C69.0621 306.401 0.659912 237.999 0.659912 153.923V153.251C0.659912 69.1759 69.0621 0.773682 153.137 0.773682H153.81C237.885 0.773682 306.287 69.1759 306.287 153.251V153.923C306.287 237.999 237.885 306.401 153.81 306.401ZM153.137 11.1189C74.7623 11.1189 11.0051 74.8761 11.0051 153.251V153.923C11.0051 232.299 74.7623 296.056 153.137 296.056H153.81C232.185 296.056 295.942 232.299 295.942 153.923V153.251C295.942 74.8761 232.185 11.1189 153.81 11.1189H153.137Z"
+                                    fill="currentColor"/>
+                                <path
+                                    d="M61.7583 148.544C62.1721 148.337 62.5861 148.14 62.9896 147.954C70.0036 144.706 77.1108 141.664 84.2076 138.623C84.5903 138.623 85.2316 138.178 85.5937 138.033C86.142 137.795 86.6903 137.568 87.2386 137.33C88.2938 136.875 89.3491 136.43 90.394 135.975C92.5044 135.075 94.6043 134.174 96.7147 133.274C100.925 131.474 105.136 129.674 109.346 127.864C117.767 124.264 126.199 120.653 134.62 117.053C143.041 113.453 151.472 109.843 159.893 106.243C168.314 102.642 176.745 99.032 185.166 95.4319C193.587 91.8318 202.018 88.2211 210.439 84.621C212.312 83.8141 214.34 82.614 216.346 82.2623C218.033 81.9622 219.678 81.383 221.374 81.0623C224.591 80.4519 228.14 80.2036 231.223 81.5381C232.288 82.0037 233.271 82.6555 234.088 83.4728C237.999 87.3419 237.451 93.6937 236.623 99.1353C230.861 137.061 225.098 174.996 219.326 212.922C218.54 218.126 217.464 223.836 213.357 227.126C209.881 229.909 204.936 230.219 200.642 229.04C196.349 227.85 192.563 225.357 188.849 222.905C173.445 212.705 158.031 202.504 142.627 192.304C138.965 189.883 134.889 186.718 134.93 182.321C134.951 179.673 136.533 177.314 138.147 175.214C151.534 157.751 170.848 145.751 185.218 129.095C187.245 126.747 188.839 122.505 186.056 121.15C184.401 120.343 182.497 121.44 180.987 122.484C161.993 135.675 143.01 148.875 124.016 162.065C117.819 166.369 111.322 170.796 103.853 171.852C97.1701 172.803 90.4457 170.941 83.98 169.038C78.5591 167.445 73.1484 165.81 67.7586 164.124C64.893 163.234 61.9342 162.272 59.7204 160.255C57.5065 158.237 56.2342 154.844 57.5687 152.154C58.4067 150.468 60.0309 149.403 61.7379 148.534L61.7583 148.544Z"
+                                    fill="currentColor"/>
+                            </svg>
+                        </SvgIcon>
+                    </Link>
+                </span>
+                <span className="link">
+                    <Link href="https://www.instagram.com/aaiss.amirkabir/">
+                        <SvgIcon>
+                            <svg xmlns="http://www.w3.org/2000/svg" width="307" height="307" viewBox="0 0 307 307"
+                                 fill="none">
+                                <path
+                                    d="M153.615 306.401H152.943C68.8674 306.401 0.465088 237.999 0.465088 153.923V153.251C0.465088 69.1759 68.8674 0.773682 152.943 0.773682H153.615C237.69 0.773682 306.093 69.1759 306.093 153.251V153.923C306.093 237.999 237.69 306.401 153.615 306.401ZM152.943 11.1189C74.5676 11.1189 10.8103 74.8761 10.8103 153.251V153.923C10.8103 232.299 74.5676 296.056 152.943 296.056H153.615C231.99 296.056 295.747 232.299 295.747 153.923V153.251C295.747 74.8761 231.99 11.1189 153.615 11.1189H152.943Z"
+                                    fill="currentColor"/>
+                                <path
+                                    d="M198.968 66.0205H107.6C82.3576 66.0205 61.8224 86.5557 61.8224 111.798V195.387C61.8224 220.629 82.3576 241.164 107.6 241.164H198.968C224.211 241.164 244.746 220.629 244.746 195.387V111.798C244.746 86.5557 224.211 66.0205 198.968 66.0205ZM77.9712 111.798C77.9712 95.4629 91.2648 82.1694 107.6 82.1694H198.968C215.303 82.1694 228.597 95.4629 228.597 111.798V195.387C228.597 211.722 215.303 225.015 198.968 225.015H107.6C91.2648 225.015 77.9712 211.722 77.9712 195.387V111.798Z"
+                                    fill="currentColor"/>
+                                <path
+                                    d="M153.284 196.163C176.757 196.163 195.865 177.066 195.865 153.582C195.865 130.099 176.768 111.001 153.284 111.001C129.801 111.001 110.703 130.099 110.703 153.582C110.703 177.066 129.801 196.163 153.284 196.163ZM153.284 127.161C167.861 127.161 179.716 139.016 179.716 153.592C179.716 168.169 167.861 180.024 153.284 180.024C138.708 180.024 126.852 168.169 126.852 153.592C126.852 139.016 138.708 127.161 153.284 127.161Z"
+                                    fill="currentColor"/>
+                                <path
+                                    d="M199.806 117.881C206.127 117.881 211.279 112.739 211.279 106.408C211.279 100.077 206.138 94.9352 199.806 94.9352C193.475 94.9352 188.334 100.077 188.334 106.408C188.334 112.739 193.475 117.881 199.806 117.881Z"
+                                    fill="currentColor"/>
+                            </svg>
+                        </SvgIcon>
+                    </Link>
+                </span>
+            </div>
+            <div>
+                <img className="logo" src={aut} alt="Amirkabir University of Technology"/>
+                <img className="logo" src={ceit} alt="AUT Computer Engineering"/>
+                <img className="logo" src={ssc} alt="AUT Student Scientific Chapter"/>
+            </div>
+            <h3 id="footer-title">
+                Student Scientific Chapter Computer Engineering Department Amirkabir University of Technology
+            </h3>
+        </div>
+    );
+}

frontend/src/components/forgot-pass-modal/forgot-pass-modal.jsx

@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogContentText,
+  DialogActions,
+  Button,
+  FormHelperText,
+} from '@mui/material';
+import { hasEmailError } from '../../utils/Email';
+import FormTextField from '../Form/FormTextField';
+
+const ForgotPassModal = ({ visibility, onVisibilityChange }) => {
+  const [email, setEmail] = useState('');
+  const [isEmailWrong, setIsEmailWrong] = useState(false);
+  const [emailHelperText, setEmailHelperText] = useState('');
+
+  const onSubmit = () => {
+    if (hasEmailError(email)) {
+      setIsEmailWrong(true);
+      setEmailHelperText('Your email is not valid');
+      return;
+    }
+    // TODO: api call
+    // TODO: if an error ocurred, set the helper text to an error msg
+    // close the modal if it was successful
+    onVisibilityChange();
+  };
+
+  return (
+    <Dialog
+      onClose={onVisibilityChange}
+      open={visibility}
+      PaperProps={{
+        style: {
+          backgroundColor: 'var(--background-color)',
+          color: 'white',
+        },
+      }}
+    >
+      <DialogTitle>Forgot Password</DialogTitle>
+      <DialogContent>
+        <DialogContentText pb={2} sx={{ color: 'var(--light-text-color-lighter)' }}>
+          Enter your email here in order to get the verification code.
+        </DialogContentText>
+        <FormHelperText sx={{ color: 'var(--error-color)' }}>{emailHelperText}</FormHelperText>
+        <FormTextField
+          type="text"
+          label="Email"
+          value={email}
+          error={isEmailWrong}
+          onChange={(event) => {
+            setEmail(event.target.value);
+            setIsEmailWrong(false);
+            setEmailHelperText('');
+          }}
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onVisibilityChange}>Cancel</Button>
+        <Button onClick={onSubmit}>Submit</Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default ForgotPassModal;

frontend/src/components/image/Image.jsx

@@ -0,0 +1,16 @@
+export default function Image({
+    src,
+    alt,
+    style,
+                              }) {
+    return (
+        <img
+            src={src}
+            alt={alt}
+            style={{
+            width: "25px",
+            height: "25px",
+            ...style,
+        }} />
+    )
+}