Merge branch 'dev' into 'master'

Refined auth flow and new website pages.

See merge request !56

src/App.css

-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.md

+The folders are divided basing on if the user is authenticated or not authenticated.
+For this, the pages are organized as:
+- AuthUser: private pages (for authenticated users). 
+    Those pages must be covered by a PrivateRoute except for SignInForm and SignUpForm.
+- NonAuthUser: public pages, require a normal Route.
\ No newline at end of file

src/App.style.ts

+import { createMuiTheme } from '@material-ui/core/styles';
+
+export const muiTheme = createMuiTheme({
+  palette: {
+    primary: {
+      main: '#5e5ce4',
+    },
+    secondary: {
+      main: '#e2e45c',
+    },
+  },
+
+  typography: {
+    fontSize: 16,
+  },
+
+  overrides: {
+    MuiTabs: {
+      indicator: {
+        backgroundColor: 'white',
+      },
+    },
+    MuiTab: {
+      wrapper: {
+        flexDirection: 'row',
+      },
+    },
+  },
+});

src/App.tsx

 import React, { FC } from 'react';
-import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
+import { ThemeProvider } from '@material-ui/core/styles';
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
-import { HomePage } from 'components/HomePage/HomePage';
-import { AuthUser } from 'components/AuthUser/AuthUser';
-import { LandingPage } from 'components/LandingPage/LandingPage';
-import { PrivateRoute } from 'components/api/PrivateRoute/PrivateRoute';
-import { AuthRoutes, NonAuthRoutes } from 'components/api/routes';
+import { AuthRoutes, NonAuthRoutes } from 'api/routes';
+import { Roles } from 'api/userRoles';
+import { configDjangoCookieName } from 'api/configDjangoCookieName';
+import { muiTheme } from 'App.style';
+import { withAuthorization } from 'components/Authorization/Authorization';
+import { useRole } from 'hooks/useRole';
+import { useAuth } from 'hooks/useAuth';
+import { AuthUser } from 'components/Auth/Auth';
+import { AuthContext } from 'components/Auth/AuthContext';
+import { Dashboard } from 'components/Dashboard/Dashboard';
 import { NotFound } from 'components/NotFound/NotFound';
-import { ProfilePage } from 'components/ProfilePage/ProfilePage';
-import { Roles } from 'components/api/userRoles';
 import { Unauthorized } from 'components/Unauthorized/Unauthorized';
+import { LandingPage } from 'components/LandingPage/LandingPage';
 
-const theme = createMuiTheme({
-  palette: {
-    primary: {
-      main: '#5e5ce4',
-    },
-    secondary: {
-      main: '#e2e45c',
-    },
-  },
+const All = withAuthorization([
+  Roles.admin,
+  Roles.operator,
+  Roles.senior,
+  Roles.driver,
+]);
 
-  typography: {
-    fontSize: 16,
-  },
+/**
+ * Entry point of the app.
+ */
+export const App: FC = () => {
+  configDjangoCookieName();
+  const [role, setRole] = useRole();
+  const [isAuth, setIsAuth] = useAuth();
 
-  overrides: {
-    MuiTabs: {
-      indicator: {
-        backgroundColor: 'white',
-      },
-    },
-    MuiTab: {
-      wrapper: {
-        flexDirection: 'row',
-      },
-    },
-  },
-});
+  const value = { role, setRole, isAuth, setIsAuth };
 
-export const App: FC = () => (
-  <Router>
+  return (
     <div data-testid="App">
-      <Switch>
-        <Route path={NonAuthRoutes.signIn} component={AuthUser} />
-        <Route exact path={NonAuthRoutes.home} component={LandingPage} />
-        <PrivateRoute
-          path={AuthRoutes.dashboard}
-          Component={HomePage}
-          requiredRoles={[Roles.admin, Roles.operator, Roles.senior]}
-        />
-        <PrivateRoute
-          path={AuthRoutes.profile}
-          Component={ProfilePage}
-          requiredRoles={[Roles.admin, Roles.operator, Roles.senior]}
-        />
-        <Route path={NonAuthRoutes.unauthorized} component={Unauthorized} />
-        <Route component={NotFound} />
-      </Switch>
+      <ThemeProvider theme={muiTheme}>
+        <AuthContext.Provider value={value}>
+          <Router>
+            <Switch>
+              <Route exact path={NonAuthRoutes.home} component={LandingPage} />
+              <Route path={NonAuthRoutes.auth} component={AuthUser} />
+              <Route path={AuthRoutes.dashboard} component={All(Dashboard)} />
+              <Route
+                path={NonAuthRoutes.unauthorized}
+                component={Unauthorized}
+              />
+              <Route component={NotFound} />
+            </Switch>
+          </Router>
+        </AuthContext.Provider>
+      </ThemeProvider>
     </div>
-  </Router>
-);
+  );
+};

src/api/configDjangoCookieName.ts

+import axios from 'axios';
+
+/**
+ * Config for django compatibility.
+ */
+export const configDjangoCookieName = (): void => {
+  axios.defaults.xsrfHeaderName = 'X-CSRFTOKEN';
+  axios.defaults.xsrfCookieName = 'csrftoken';
+  axios.defaults.withCredentials = true;
+};

src/api/fetchCookie.ts

+import axios from 'axios';
+
+/**
+ * @async
+ * Call for csrf cookie. This cookie is the user session identifier and
+ * must be sent during the login process.
+ * @returns {string} csrf cookie
+ */
+export const fetchCookie = async (): Promise<string> =>
+  axios('/api/web/csrf').then((res) => res.data.token);

src/api/getReservations.ts

+import axios from 'axios';
+
+export const getReservations = async (): Promise<any> =>
+  axios('/api/web/reservations/').then((res) => res.data);

src/api/getRole.ts

+import axios from 'axios';
+
+/**
+ * @async
+ * Asks for the current set role.
+ * @returns {string} empty if the role is not set or a name between those defined
+ * in {@see userRoles}
+ */
+export const getRole = async (): Promise<string> =>
+  axios('/api/web/login/get_role').then((res) => res.data.role);

src/api/getRoles.ts

+import axios from 'axios';
+
+/**
+ * @async
+ * Ask the server all the roles of an user if the user has multiple roles.
+ * @returns {string[]} array of roles.
+ */
+export const getRoles = async (): Promise<string[]> =>
+  axios('/api/web/login/get_roles').then((res) => res.data.roles);

src/api/isAuthenticated.ts

+import axios from 'axios';
+
+/**
+ * @async
+ * Ask the server if the user is authenticated.
+ * @returns {boolean} true or false if the user is authenticated.
+ */
+export const isAuthenticated = async (): Promise<boolean> =>
+  axios('/api/web/login/is_authenticated').then(
+    (res) => res.data.is_authenticated,
+  );

src/components/api/routes.ts → src/api/routes.ts

@@ -5,7 +5,10 @@
  */
 export enum AuthRoutes {
   dashboard = '/dashboard',
+  home = '/home',
   profile = '/profile',
+  reservation = '/reservation',
+  choseRole = '/choseRole',
 }
 
 /**
@@ -13,6 +16,8 @@ export enum AuthRoutes {
  */
 export enum NonAuthRoutes {
   home = '/',
+  auth = '/auth',
   signIn = '/signIn',
+  signUp = '/signUp',
   unauthorized = '/unauthorized',
 }

src/api/setRole.ts

+import axios from 'axios';
+
+/**
+ * @async
+ * Set the role of the user in the database.
+ * @return {string} role
+ */
+export const setRole = async (role: string): Promise<void> =>
+  axios.post('/api/web/login/set_role', { role });

src/components/api/userRoles.ts → src/api/userRoles.ts

 export enum Roles {
+  /** Website visitor, is not logged. Can access to NonAuthRoutes */
+  visitor = '',
+  /** Can access to routes wrapped by withAuthorization. */
   senior = 'senior',
   admin = 'admin',
   operator = 'operator',
+  driver = 'driver',
 }

src/components/Auth/Auth.tsx

+import React, { FC } from 'react';
+import Container from '@material-ui/core/Container';
+import { Redirect, Route, useRouteMatch } from 'react-router-dom';
+import { AuthRoutes, NonAuthRoutes } from 'api/routes';
+import { ChoseRole } from 'components/Auth/ChoseRole/ChoseRole';
+import { SignInForm } from 'components/Auth/SignInForm/SignInForm';
+import { SignUpForm } from 'components/Auth/SignUpForm/SignUpForm';
+
+/**
+ * Keeps all components related to SignIn/SignOut logic.
+ */
+export const AuthUser: FC = () => {
+  const { path } = useRouteMatch();
+  return (
+    <Container maxWidth="sm">
+      <Route path={`${path}${NonAuthRoutes.signIn}`} component={SignInForm} />
+      <Route path={`${path}${NonAuthRoutes.signUp}`} component={SignUpForm} />
+      <Route path={`${path}${AuthRoutes.choseRole}`} component={ChoseRole} />
+    </Container>
+  );
+};

src/components/Auth/AuthContext.tsx

+import { Roles } from 'api/userRoles';
+import { createContext } from 'react';
+
+export type AuthData = {
+  role: string;
+  isAuth: boolean | null;
+  setRole: (role: string) => void;
+  setIsAuth: (state: boolean | null) => void;
+};
+
+export const AuthContext = createContext<AuthData>({
+  role: Roles.visitor,
+  isAuth: false,
+  setRole: () => {
+    // Do nothing
+  },
+  setIsAuth: () => {
+    // Do nothing
+  },
+});

src/components/Auth/ChoseRole/ChoseRole.md

+Chose role.
+
+```
+const role = ["operator", "driver",];
+
+<ChoseRole role={role} />
+```
\ No newline at end of file

src/components/Auth/ChoseRole/ChoseRole.test.tsx

+import React from 'react';
+import { render } from '@testing-library/react';
+import { ChoseRole } from './ChoseRole';
+
+describe('<ChoseRole />', () => {
+  it('renders without crashing', () => {
+    const wrapper = render(<ChoseRole />);
+    expect(wrapper.queryByTestId('ChoseRole')).toBeTruthy();
+  });
+});

src/components/Auth/ChoseRole/ChoseRole.tsx

+import React, { FC, useContext, useEffect, useState } from 'react';
+import Button from '@material-ui/core/Button';
+import { getRoles } from 'api/getRoles';
+import { setRole } from 'api/setRole';
+import { useHistory } from 'react-router-dom';
+import { AuthRoutes } from 'api/routes';
+import { AuthContext } from 'components/Auth/AuthContext';
+
+/**
+ * Page that let's users decide role between available roles.
+ * This is intended to use when a user has more than one role.
+ * @returns ChoseRole component.
+ */
+export const ChoseRole: FC = () => {
+  const history = useHistory();
+  const [userRoles, setUserRoles] = useState<string[]>(['']);
+  const { setIsAuth } = useContext(AuthContext);
+
+  const choseAndForward = (role: string): void => {
+    // Set role in the server.
+    setRole(role);
+    setIsAuth(true);
+    // Push to homepage.
+    history.push(`${AuthRoutes.dashboard}${AuthRoutes.home}`);
+  };
+
+  useEffect(() => {
+    getRoles().then((fetchedRoles) => setUserRoles(fetchedRoles));
+  }, []);
+
+  return (
+    <div data-testid="ChoseRole">
+      {userRoles ? (
+        userRoles.map((role) => (
+          <Button
+            variant="outlined"
+            color="default"
+            key={role}
+            onClick={() => choseAndForward(role)}
+          >
+            {role}
+          </Button>
+        ))
+      ) : (
+        <h1>No roles were returned.</h1>
+      )}
+    </div>
+  );
+};

src/components/AuthUser/SignInForm/InputField/InputField.tsx → src/components/Auth/InputField/InputField.tsx

@@ -15,11 +15,11 @@ type Props = {
    * Takes error from react-hook-form and is thrown if
    * the component is not valid.
    */
-  error: boolean;
+  error?: boolean;
   /**
    * Message to display if the component is not valid.
    */
-  errorMessage: string;
+  errorMessage?: string;
   /**
    * React-hook-form control.
    */
@@ -27,11 +27,29 @@ type Props = {
   /**
    * Validation rules.
    */
-  rules: Partial<unknown>;
+  rules?: Partial<unknown>;
+  /**
+   * HTML type of input.
+   */
+  type: string;
+
+  /**
+   * MUI props override for defining style on fly.
+   */
+  InputLabelProps?: Record<string, boolean>;
 };
 
 export const InputField: FC<Props> = (props: Props) => {
-  const { name, label, error, errorMessage, control, rules } = props;
+  const {
+    name,
+    label,
+    error,
+    type,
+    errorMessage,
+    control,
+    rules,
+    InputLabelProps,
+  } = props;
   return (
     <Controller
       name={name}
@@ -41,7 +59,7 @@ export const InputField: FC<Props> = (props: Props) => {
         <TextField
           variant="outlined"
           margin="normal"
-          type={name}
+          type={type}
           required
           fullWidth
           id={name}
@@ -53,8 +71,16 @@ export const InputField: FC<Props> = (props: Props) => {
           autoFocus
           error={error}
           helperText={error && errorMessage}
+          InputLabelProps={{ ...InputLabelProps, shrink: true }}
         />
       )}
     />
   );
 };
+
+InputField.defaultProps = {
+  rules: undefined,
+  error: false,
+  errorMessage: '',
+  InputLabelProps: {},
+};