Merge pull request #95 from CoffeeladyCZ/93-add-login-page

Fix #93 - Add Login and Registration page

src/App.scss

@@ -67,3 +67,8 @@ a {
 .fas:hover {
   color: #c92e1e;
 }
+
+.main {
+  display: flex;
+  justify-content: center;
+}

src/Utils/apiUtils.ts

@@ -46,7 +46,7 @@ export const updateCafeDetailData = async (data: CafeDetailResponse, url: string
 
 export const getLocationsData = async () => {
   try {
-    const response = await httpGet<{_id: string, locations: string[]}[]>('/locations');
+    const response = await httpGet<{_id: string, locations: string[]}[]>('/api/locations');
     const fetchData = await response.data;
     return fetchData;
   } catch (error) {

src/components/Cafe/AddCafeForm.tsx

@@ -12,9 +12,9 @@ import { RootState } from '../../store';
 import { FormValues, CafeDetailResponse } from '../../types/cafe';
 
 import { styled } from '@mui/material/styles';
-import FormTextField from '../Form/FormComponets/FormTextField';
-import FormSelect from '../Form/FormComponets/FormSelect';
-import FormTimeField from '../Form/FormComponets/FormTimeField';
+import FormTextField from '../common/FormComponets/FormTextField';
+import FormSelect from '../common/FormComponets/FormSelect';
+import FormTimeField from '../common/FormComponets/FormTimeField';
 
 type FormNewCafeType ={
   openDialog: boolean;

src/components/Cafe/EditCafeForm.tsx

@@ -16,8 +16,8 @@ import { getLocationsData } from '../../Utils/apiUtils';
 export { daysOfWeek } from '../../constants';
 
 import { styled } from '@mui/material/styles';
-import FormTextField from '../Form/FormComponets/FormTextField';
-import FormSelect from '../Form/FormComponets/FormSelect';
+import FormTextField from '../common/FormComponets/FormTextField';
+import FormSelect from '../common/FormComponets/FormSelect';
 import OpenedTimeCard from './OpenedTimeCard';
 import { daysOfWeek } from '../../constants';
 

src/components/Cafe/OpenedTimeCard.tsx

@@ -6,7 +6,7 @@ import { DevTool } from '@hookform/devtools';
 import { Divider, Grid, Typography } from '@mui/material';
 
 import { TOpeningHours } from '../../types/cafe';
-import FormTimeField from '../Form/FormComponets/FormTimeField';
+import FormTimeField from '../common/FormComponets/FormTimeField';
 
 type TOpeningHoursProps = {
   openingHours: TOpeningHours;

src/components/Header/AppHeader.tsx

@@ -3,26 +3,24 @@ import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 
 import { Grid } from '@mui/material';
-import Login from './Login';
+import User from './User';
+import LanguageSwitch from '../common/LanguageSwitch';
 
 const Header: React.FC = () => {
   const { t } = useTranslation();
 
   return (
-    <header>
-      <Grid container spacing={2} className='container px-8 py-4'>
-        <Grid container className='mt-6 justify-between'>
-          <Grid item>
-            <Link to="/">
-              <h1 className='text-2xl font-bold uppercase'>{ t('mapCafes') }</h1>
-            </Link>
-          </Grid>
-          <Grid item>
-            <Login />
-          </Grid>
-        </Grid>
+    <Grid container spacing={2} className='my-6 justify-between'>
+      <Grid item>
+        <Link to="/">
+          <h1 className='text-2xl font-bold uppercase'>{ t('mapCafes') }</h1>
+        </Link>
       </Grid>
-    </header>
+      <Grid item className="flex">
+        <User />
+        <LanguageSwitch />
+      </Grid>
+    </Grid>
   );
 };
 

src/components/Header/User.tsx

@@ -0,0 +1,118 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useHistory } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { Avatar, Divider, IconButton, Menu, MenuItem, ListItemIcon, Tooltip } from '@mui/material';
+import { Logout, Login } from '@mui/icons-material';
+
+import { UserLogin } from '../../constants';
+import { setLogin, checkLoginUser } from '../../store/settings';
+import { RootState } from '../../store';
+
+const User: React.FC = () => {
+  const { t } = useTranslation();
+  const history = useHistory();
+  const dispatch = useDispatch();
+
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+
+  const isOpenMenu = Boolean(anchorEl);
+  const isLogin = useSelector((state: RootState) => state.settings.isLogin);
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleLogout = () => {
+    localStorage.removeItem(UserLogin.LOGIN);
+    dispatch(setLogin(false));
+    handleClose();
+  }
+
+  useEffect(() => {
+    const login = localStorage.getItem(UserLogin.LOGIN);
+    dispatch(checkLoginUser(login === 'true'));
+  }, []);
+
+  return (
+    <>
+      { isLogin ?
+        (
+          <>
+            <Tooltip title={t('login')}>
+              <IconButton
+                onClick={handleClick}
+                size='small'
+                sx={{ mr: 3 }}
+                aria-controls={isOpenMenu ? 'account-menu' : undefined}
+                aria-haspopup='true'
+                aria-expanded={isOpenMenu ? 'true' : undefined}
+              >
+                <Avatar color='primary' />
+              </IconButton>
+            </Tooltip>
+            <Menu
+              anchorEl={anchorEl}
+              id='account-menu'
+              open={isOpenMenu}
+              onClose={handleClose}
+              onClick={handleClose}
+              sx={{
+                overflow: 'visible',
+                filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
+                mt: 1.5,
+                '& .MuiAvatar-root': {
+                  width: 32,
+                  height: 32,
+                  ml: -0.5,
+                  mr: 1,
+                },
+                '&:before': {
+                  content: '""',
+                  display: 'block',
+                  position: 'absolute',
+                  top: 0,
+                  right: 14,
+                  width: 10,
+                  height: 10,
+                  bgcolor: 'background.paper',
+                  transform: 'translateY(-50%) rotate(45deg)',
+                  zIndex: 0,
+                },
+              }}
+              transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+              anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+            >
+              <MenuItem onClick={handleClose}>
+                <Avatar />{ t('profile') }
+              </MenuItem>
+              <Divider />
+              <MenuItem onClick={handleLogout}>
+                <ListItemIcon>
+                  <Logout fontSize='small' />
+                </ListItemIcon>
+                { t('logout') }
+              </MenuItem>
+            </Menu>
+          </>
+        ) : (
+          <Tooltip title={t('login')}>
+            <IconButton
+              onClick={() => history.push('/login')}
+              size='small'
+              sx={{ mr: 2 }}
+            >
+              <Login fontSize='small' />
+            </IconButton>
+          </Tooltip>
+        )}
+    </>
+  )
+}
+
+export default User;

src/common/Map/AppMap.tsx → src/components/Map/AppMap.tsx

@@ -2,7 +2,7 @@ import { GoogleMap, LoadScript } from '@react-google-maps/api';
 import React, { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
-import MarkerComponent from '../../components/Marker/AppMarker';
+import MarkerComponent from '../Marker/AppMarker';
 
 import coffeePin from '../../img/newPin.svg';
 

src/components/Navigation/AppNavigation.tsx

@@ -118,7 +118,7 @@ const Navigation: React.FC = () => {
 
   const addCreateCafe = async (data: CafeDetailResponse) => {
     try {
-      await addNewData(data, '/create');
+      await addNewData(data, '/api/create');
     } catch (error) {
       setShowError(true);
       return null;

src/components/common/LanguageSwitch.tsx

@@ -23,11 +23,11 @@ const LanguageSwitch: React.FC = () => {
   return (
     <div>
       {currentLanguage === 'cz' ? (
-        <Button startIcon={<Language />} onClick={() => handleLanguageChange('en')}>
+        <Button onClick={() => handleLanguageChange('en')}>
           {t('language.english')}
         </Button>
       ) : (
-        <Button startIcon={<Language />} onClick={() => handleLanguageChange('cz')}>
+        <Button onClick={() => handleLanguageChange('cz')}>
           {t('language.czech')}
         </Button>
       )}

src/constants.ts

@@ -1 +1,2 @@
 export const daysOfWeek = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
+export const UserLogin: Readonly<{LOGIN: string}> = { LOGIN: 'login' };

src/i18n/locales/cz.json

@@ -63,6 +63,16 @@
     "somethingWrong": "Něco je špatně.",
     "404": "Tato stránka neexistuje!"
   },
+  "loginUser": {
+    "username": "Uživatelské jméno",
+    "password": "Heslo",
+    "registrationInfo": "Nemáš zatím účet?",
+    "registrationAction": "Zaregistrovat se můžeš zde"
+  },
+  "registration": {
+    "createAccount": "Vytvořit účet",
+    "submit":"Registrovat" 
+  },
   "notExist": "Tato kavárna pravděpodobně neexistuje!",
   "profile": "Profil",
   "account": "Můj účet",

src/i18n/locales/en.json

@@ -53,6 +53,16 @@
     "somethingWrong": "Something is wrong.",
     "404": "This page is doesn't exist!"
   },
+  "loginUser": {
+    "username": "Username",
+    "password": "Password",
+    "registrationInfo": "Don't have an account?",
+    "registrationAction": "Sign up"
+  },
+  "registration": {
+    "createAccount": "Create your account",
+    "submit":"Sign up" 
+  },
   "notExist": "This cafe probably doesn't exist!",
   "profile": "Profil",
   "account": "My account",