Merge branch 'api-login' into 'dev'

Api login

See merge request !18

.gitignore

@@ -138,4 +138,5 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 yarn.lock
-.docz/
+.docz/
\ No newline at end of file
+._.DS_Store
\ No newline at end of file

src/App.tsx

@@ -2,13 +2,14 @@ import React, { FC } from 'react';
 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';
 
 export const App: FC = () => (
   <Router>
     <div data-testid="App">
       <Switch>
         <Route path="/auth" component={AuthUser} />
-        <Route exact path="/" component={HomePage} />
+        <Route exact path="/" component={LandingPage} />
       </Switch>
     </div>
   </Router>

src/components/AuthUser/AuthUser.tsx

@@ -7,7 +7,9 @@ export const AuthUser: FC = () => {
   useEffect(() => {
     axios
       .get('api/web/csrf')
-      .then((response) => console.log(response))
+      .then((response) =>
+        sessionStorage.setItem('CSRF_TOKEN', response.data.token),
+      )
       .catch((error) => console.log(error));
   }, []);
   return (

src/components/AuthUser/SignInForm/InputField.tsx

@@ -6,10 +6,12 @@ type Props = {
   label: string;
   error: boolean;
   errorMessage: string;
+  value: string;
+  onChange: any;
 };
 
 export const InputField: FC<Props> = (props: Props) => {
-  const { id, label, error, errorMessage } = props;
+  const { id, label, error, errorMessage, onChange, value } = props;
   return (
     <TextField
       variant="outlined"
@@ -19,6 +21,8 @@ export const InputField: FC<Props> = (props: Props) => {
       id={id}
       label={label}
       name={id}
+      onChange={onChange}
+      value={value}
       autoComplete={id}
       autoFocus
       error={error}

src/components/AuthUser/SignInForm/SignInForm.tsx

 import React, { FC } from 'react';
+import axios from 'axios';
 import { useForm, Controller, appendErrors } from 'react-hook-form';
 import { useIntl } from 'react-intl';
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
@@ -40,7 +41,17 @@ export const SignInForm: FC = () => {
   });
 
   const onSubmit: any = (values: FormData) => {
-    alert(JSON.stringify(values));
+    axios
+      .post('/api/web/login', {
+        values,
+        token: sessionStorage.getItem('CSRF_TOKEN'),
+      })
+      .then((response) => {
+        console.log(response);
+      })
+      .catch((error) => {
+        console.log(error);
+      });
   };
   const intl = useIntl();
   const classes = useStyles();
@@ -63,11 +74,13 @@ export const SignInForm: FC = () => {
               message: intl.formatMessage({ id: 'email' }),
             },
           }}
-          render={() => (
+          render={({ onChange, value }) => (
             <InputField
               id="email"
+              value={value}
+              onChange={onChange}
               label={intl.formatMessage({ id: 'email' })}
-              error={Boolean(errors.email)}
+              error={!!errors.email}
               errorMessage={intl.formatMessage({ id: 'error' })}
             />
           )}
@@ -76,17 +89,18 @@ export const SignInForm: FC = () => {
         <Controller
           name="password"
           control={control}
-          defaultValues
           rules={{
             minLength: 8,
             maxLength: 60,
             required: { value: true, message: 'You must enter your name' },
           }}
-          render={() => (
+          render={({ onChange, value }) => (
             <InputField
               id="password"
+              value={value}
+              onChange={onChange}
               label="Password"
-              error={Boolean(errors.password)}
+              error={!!errors.password}
               errorMessage="Incorrect entry."
             />
           )}

src/components/LandingPage/LandingPage.tsx

+import React, { FC, useEffect } from 'react';
+
+export const LandingPage: FC = () => (
+  <>
+    <section>
+      <h2>What is MoveAid?</h2>
+
+      <p>
+        MoveAid is a project born in order to satisfy a specific problem. There
+        are many senior citizens who are not able to drive and move from a place
+        to another easily, because of this they sometimes need to take private
+        Taxis or public means of transport which could be expensive and not
+        simple. MoveAid wants to be the solution to this problem offering free
+        drives (carried out by voulunteers) for those who need them to reach
+        medical visit, to go to the supermarket or to satisfy any other need.
+      </p>
+    </section>
+
+    <section>
+      <h2>How will MoveAid work?</h2>
+
+      <p>
+        MoveAid will be the platform that will allow people to ask for a drive
+        (either by phone or online) and organizations of voulenteers to organise
+        and accept drives.
+      </p>
+    </section>
+
+    <p>
+      <br />
+    </p>
+
+    <footer>
+      <p>
+        Authors: Alberto Defendi, Andrea Esposito, Marco Marinello, Francesco
+        Mazzini
+      </p>
+      <p>&copy 2021 - All right reserved</p>
+    </footer>
+  </>
+);

src/components/LandingPage/TeamPage.tsx

+import React, { FC, useEffect } from 'react';
+
+export const TeamPage: FC = () => (
+  <>
+    <section>
+      <h2>These are the students of the MoveAid project</h2>
+
+      <div>
+        <h3>Alberto Defendi</h3>
+        <table>
+          <tr>
+            <td> </td>
+            <td>
+              <p>
+                Age: 19 <br />
+                Role: Front End Developer
+                <br />
+                Hobbys: Sports, maths
+                <br />
+              </p>
+            </td>
+          </tr>
+        </table>
+      </div>
+
+      <div>
+        <h3>Andrea Esposito</h3>
+        <table>
+          <tr>
+            <td> </td>
+            <td>
+              <p>
+                Age: 19 <br />
+                Role: xxxxx
+                <br />
+                Hobbys: xxxxxxxxx
+                <br />
+              </p>
+            </td>
+          </tr>
+        </table>
+      </div>
+
+      <div>
+        <h3>Marco Marinello</h3>
+        <table>
+          <tr>
+            <td> </td>
+            <td>
+              <p>
+                Age: 19 <br />
+                Role: xxxxx
+                <br />
+                Hobbys: xxxxxxxxx
+                <br />
+              </p>
+            </td>
+          </tr>
+        </table>
+      </div>
+
+      <div>
+        <h3>Francesco Mazzini</h3>
+        <table>
+          <tr>
+            <td> </td>
+            <td>
+              <p>
+                <strong>Age:</strong> 19 <br />
+                <br />
+                <strong>Role:</strong> Front End Developer
+                <br />
+                <br />
+                <strong>Hobbys:</strong> I like Graphic and Programing.
+                <br />
+                I also like playing videogames, hanging out <br />
+                with friends, watching tv series and <br />
+                training in gym!
+              </p>
+            </td>
+          </tr>
+        </table>
+      </div>
+    </section>
+  </>
+);