Merge branch 'master' of https://github.com/CloudAlb/tcc-vamos-frontend into feature/buscar-transporte

.gitignore

@@ -26,3 +26,6 @@ yarn-error.log*
 
 # Optional eslint cache
 .eslintcache
+
+# não commitar url de environment
+src/constants/environment.ts

package-lock.json

@@ -13,6 +13,7 @@
         "@capacitor/haptics": "1.1.4",
         "@capacitor/keyboard": "1.2.2",
         "@capacitor/status-bar": "1.0.8",
+        "@hookform/error-message": "^2.0.0",
         "@ionic/react": "^6.0.0",
         "@ionic/react-router": "^6.0.0",
         "@testing-library/jest-dom": "^5.11.9",
@@ -28,6 +29,7 @@
         "ionicons": "^5.4.0",
         "react": "^17.0.1",
         "react-dom": "^17.0.1",
+        "react-hook-form": "^7.30.0",
         "react-router": "^5.2.0",
         "react-router-dom": "^5.2.0",
         "typescript": "^4.1.3",
@@ -2369,6 +2371,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@hookform/error-message": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@hookform/error-message/-/error-message-2.0.0.tgz",
+      "integrity": "sha512-Y90nHzjgL2MP7GFy75kscdvxrCTjtyxGmOLLxX14nd08OXRIh9lMH/y9Kpdo0p1IPowJBiZMHyueg7p+yrqynQ==",
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "react-hook-form": "^7.0.0"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.9.5",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
@@ -13287,6 +13299,21 @@
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==",
       "dev": true
     },
+    "node_modules/react-hook-form": {
+      "version": "7.30.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.30.0.tgz",
+      "integrity": "sha512-DzjiM6o2vtDGNMB9I4yCqW8J21P314SboNG1O0obROkbg7KVS0I7bMtwSdKyapnCPjHgnxc3L7E5PEdISeEUcQ==",
+      "engines": {
+        "node": ">=12.22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -18244,6 +18271,12 @@
         }
       }
     },
+    "@hookform/error-message": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@hookform/error-message/-/error-message-2.0.0.tgz",
+      "integrity": "sha512-Y90nHzjgL2MP7GFy75kscdvxrCTjtyxGmOLLxX14nd08OXRIh9lMH/y9Kpdo0p1IPowJBiZMHyueg7p+yrqynQ==",
+      "requires": {}
+    },
     "@humanwhocodes/config-array": {
       "version": "0.9.5",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
@@ -26381,6 +26414,12 @@
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==",
       "dev": true
     },
+    "react-hook-form": {
+      "version": "7.30.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.30.0.tgz",
+      "integrity": "sha512-DzjiM6o2vtDGNMB9I4yCqW8J21P314SboNG1O0obROkbg7KVS0I7bMtwSdKyapnCPjHgnxc3L7E5PEdISeEUcQ==",
+      "requires": {}
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",

package.json

@@ -8,6 +8,7 @@
     "@capacitor/haptics": "1.1.4",
     "@capacitor/keyboard": "1.2.2",
     "@capacitor/status-bar": "1.0.8",
+    "@hookform/error-message": "^2.0.0",
     "@ionic/react": "^6.0.0",
     "@ionic/react-router": "^6.0.0",
     "@testing-library/jest-dom": "^5.11.9",
@@ -23,6 +24,7 @@
     "ionicons": "^5.4.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-hook-form": "^7.30.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "typescript": "^4.1.3",

src/App.tsx

@@ -5,11 +5,11 @@ import {
   setupIonicReact
 } from '@ionic/react';
 import { IonReactRouter } from '@ionic/react-router';
-import Cadastro from './pages/Cadastro';
+import Cadastro from './pages/Cadastro/Cadastro';
 import MainPages from './pages/MainPages';
 
 // importação das páginas
-import Login from './pages/login/Login';
+import Login from './pages/Login';
 
 /* Core CSS required for Ionic components to work properly */
 import '@ionic/react/css/core.css';
@@ -29,6 +29,7 @@ import '@ionic/react/css/display.css';
 
 /* Theme variables */
 import './theme/variables.css';
+// import Tabs from './components/Tabs';
 
 setupIonicReact();
 

src/LocalStorage.ts

@@ -0,0 +1,18 @@
+const tokenId = 'token';
+const productDetails = '@productDetails';
+
+const LocalStorage = {
+    getToken: (): string | null => {
+        return localStorage.getItem(tokenId)
+    },
+
+    setToken: (token: string) => {
+        localStorage.setItem(tokenId, token)
+    },
+
+    clearToken: () => {
+        localStorage.setItem(tokenId, '');
+    }
+}
+
+export default LocalStorage

src/components/Tabs.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/react';
+
+import { logInOutline, logInSharp, personOutline, personSharp } from 'ionicons/icons';
+
+interface AppTab {
+    label: string;
+    iosIcon: string;
+    mdIcon: string;
+    // badge: string;
+}
+
+const appPages: AppTab[] = [
+    {
+        label: 'Login',
+        iosIcon: logInOutline,
+        mdIcon: logInSharp,
+        // badge: '',
+    },
+    {
+        label: 'Cadastro',
+        iosIcon: personOutline,
+        mdIcon: personSharp,
+        // badge: '',
+    }
+]
+
+const Tabs: React.FC = () => {
+    return (
+        
+            <IonTabs>
+                {appPages.map((appPage, index) => {
+                    <IonTabBar key={index} slot="bottom">
+                        <IonTabButton tab="speakers">
+                            <IonIcon ios={appPage.iosIcon} md={appPage.mdIcon} />
+                            <IonLabel>{appPage.label}</IonLabel>
+                        </IonTabButton>
+                    </IonTabBar>
+
+                })}
+            </IonTabs>
+    );
+}
+
+export default Tabs

src/config/api.config.ts

@@ -1,7 +1,7 @@
 import environment from "../environments/environment";
 
-function getBaseUrl() {
-  const { hostname } = window.location;
+const getBaseUrl = (): string => {
+  // const { hostname } = window.location;
   const { url } = environment;
 
   let apiUrl = null;

src/constants/routes/sessionRoutes.ts

@@ -0,0 +1,11 @@
+const sessionRoutesDefault = '/sessions';
+const sessionRoutes = {
+  create: {
+    url: `${sessionRoutesDefault}/`
+  },
+  refresh: {
+    url: `${sessionRoutesDefault}/refresh`
+  }
+}
+
+export default sessionRoutes;

src/pages/Cadastro/Cadastro.tsx

@@ -1,11 +1,11 @@
 import { IonToast, IonProgressBar, IonItem, IonLabel, IonInput, IonBackButton, IonButton, IonButtons, IonCardTitle, IonCol, IonContent, IonGrid, IonHeader, IonPage, IonRow, IonToolbar } from '@ionic/react';
 import { arrowBack, logoFacebook, mail } from 'ionicons/icons';
-import { Action } from '../components/Action';
+import { Action } from '../../components/Action';
 import { useEffect, useState } from 'react';
 import { useHistory, useParams } from 'react-router';
 import './Cadastro.css';
-import ModalExample from '../components/Email';
-import * as UsersService from '../services/users'
+import ModalExample from '../../components/Email';
+import * as UsersService from '../../services/users'
 
 const Cadastro: React.FC = () => {
   const history = useHistory();

src/pages/Login.tsx

@@ -0,0 +1,195 @@
+import {
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonTitle,
+  IonToolbar
+} from "@ionic/react";
+import React, { useState } from "react";
+import { IonGrid, IonRow, IonCol, IonToast } from "@ionic/react";
+import { personCircle } from "ionicons/icons";
+import { useHistory } from "react-router-dom";
+import {
+  IonItem,
+  IonLabel,
+  IonInput,
+  IonButton,
+  IonIcon,
+  IonAlert,
+} from "@ionic/react";
+
+import * as sessionRoutes from '../services/session';
+import LocalStorage from '../LocalStorage';
+import { Action } from "../components/Action";
+
+const Page: React.FC = () => {
+  const [showToast, setShowToast] = useState(false);
+  const [messageToast, setMessageToast ] = useState('');
+  
+  const history = useHistory();
+  const [email, setEmail] = useState<string>("matheusalb3213@gmail.com");
+  const [password, setPassword] = useState<string>("123456");
+  const [isError, setIsError] = useState<boolean>(false);
+  const [message, setMessage] = useState<string>("");
+
+  function validateEmail(email: string) {
+    const re =
+      /^((?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\]))$/;
+    return re.test(String(email).toLowerCase());
+  }
+
+  const validateForm = () => {
+    if (!email) {
+      setMessageToast("Por favor, informe o e-mail");
+      setShowToast(true);
+      return false;
+    }
+
+    if (!validateEmail(email)) {
+      setMessageToast("E-mail inválido");
+      setShowToast(true);
+      return false;
+    }
+
+    if (!password) {
+      setMessageToast("Por favor, digite a sua senha");
+      setShowToast(true);
+      return false;
+    }
+
+    if(password.length < 7 || password.length > 12) {
+      setMessageToast("A senha deve conter entre 7 e 12 dígitos");
+      setShowToast(true);
+      return false;
+    }
+
+    return true;
+  }
+
+  const handleLogin = async () => {
+    if (!validateForm()) {
+      return
+    }
+
+    const singinForm = {
+      login: email,
+      password: password,
+    };
+
+    await sessionRoutes.create(singinForm).then(response => {
+      if (response.status === 'error') {
+        setMessageToast(response.message);
+        setShowToast(true);
+
+        return
+      }
+
+      const { token } = response.token
+
+      LocalStorage.setToken(token);
+
+      history.push({ pathname: '/home' });
+    }).catch(error => {
+      // if (!error.response) return
+
+      // se o backend retornou uma mensagem de erro customizada
+      // if (error.response.data.message) {
+      console.dir('Houve um erro: ', { error })
+      alert('Houve um erro')
+    })
+  };
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Login</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+
+      <IonRow>
+        <IonCol>
+          <IonIcon
+            style={{ fontSize: "70px", color: "#0040ff" }}
+            icon={personCircle}
+          />
+        </IonCol>
+      </IonRow>
+
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Login</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+
+        <IonGrid>
+          <IonRow>
+            <IonCol>
+              <IonAlert
+                isOpen={isError}
+                onDidDismiss={() => setIsError(false)}
+                cssClass="my-custom-class"
+                header={"Error!"}
+                message={message}
+                buttons={["Dismiss"]}
+              />
+            </IonCol>
+          </IonRow>
+
+          <IonRow>
+            <IonCol>
+              <IonItem>
+                <IonLabel position="floating"> Email</IonLabel>
+                <IonInput
+                  type="email"
+                  value={email}
+                  onIonChange={(e) => setEmail(e.detail.value!)}
+                ></IonInput>
+              </IonItem>
+            </IonCol>
+          </IonRow>
+
+          <IonRow>
+            <IonCol>
+              <IonItem>
+                <IonLabel position="floating"> Senha</IonLabel>
+                <IonInput
+                  type="password"
+                  value={password}
+                  onIonChange={(e) => setPassword(e.detail.value!)}
+                ></IonInput>
+              </IonItem>
+            </IonCol>
+          </IonRow>
+
+          <IonRow>
+            <IonCol>
+              <p style={{ fontSize: "small" }}>
+                Clicando no botão de "Login", você concorda com a nossa{" "}
+                <a href="#">política de termos e serviços</a>
+              </p>
+              <IonButton expand="block" onClick={handleLogin}>
+                Login
+              </IonButton>
+              <p style={{ fontSize: "medium" }}>
+                <Action message="Ainda não possui uma conta?" text="Cadastre-se aqui!" link="/cadastro" />
+              </p>
+            </IonCol>
+          </IonRow>
+        </IonGrid>
+
+        <IonToast
+          // cssClass={"toast-notification"}
+          color='danger'      
+          isOpen={showToast}
+          onDidDismiss={() => setShowToast(false)}
+          message={messageToast}
+          duration={2500}
+        />
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Page;

src/pages/login/Login.tsx

@@ -1,162 +0,0 @@
-import {
-  IonContent,
-  IonHeader,
-  IonPage,
-  IonTitle,
-  IonToolbar,
-  IonButtons,
-} from "@ionic/react";
-import React, { useState } from "react";
-import axios from "axios";
-import { IonGrid, IonRow, IonCol } from "@ionic/react";
-import { personCircle } from "ionicons/icons";
-import { useHistory } from "react-router-dom";
-import {
-  IonItem,
-  IonLabel,
-  IonInput,
-  IonButton,
-  IonIcon,
-  IonAlert,
-} from "@ionic/react";
-
-function validateEmail(email: string) {
-  const re =
-    /^((?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\]))$/;
-  return re.test(String(email).toLowerCase());
-}
-
-const Page: React.FC = () => {
-  const history = useHistory();
-  const [email, setEmail] = useState<string>("matheusalb3213@gmail.com");
-  const [password, setPassword] = useState<string>("1234");
-  const [isError, setIsError] = useState<boolean>(false);
-  const [message, setMessage] = useState<string>("");
-
-  const handleLogin = () => {
-    // validação de inputs
-    if (!email) {
-      setMessage("Por favor, informe um e-mail válido");
-      setIsError(true);
-      return;
-    }
-
-    if (validateEmail(email) === false) {
-      setMessage("E-mail inválido");
-      setIsError(true);
-      return;
-    }
-
-    if (!password || password.length < 6) {
-      setMessage("Por favor, digite a sua senha");
-      setIsError(true);
-      return;
-    }
-
-    const loginData = {
-      email: email,
-      password: password,
-    };
-
-    const api = axios.create({
-      baseURL: `https://625dc16c4c36c7535779792c.mockapi.io/api/v1`,
-    });
-
-    api
-      // .post("/login", loginData)
-      .get("/users/2")
-      .then((res) => {
-        // login bem-sucedido
-        history.push("/dashboard/" + email);
-      })
-      .catch((error) => {
-        setMessage("Falha na autenticação! Por favor, crie uma conta");
-        setIsError(true);
-      });
-  };
-
-  return (
-    <IonPage>
-      <IonHeader>
-        <IonToolbar>
-          <IonTitle>Login</IonTitle>
-        </IonToolbar>
-      </IonHeader>
-
-      <IonRow>
-        <IonCol>
-          <IonIcon
-            style={{ fontSize: "70px", color: "#0040ff" }}
-            icon={personCircle}
-          />
-        </IonCol>
-      </IonRow>
-
-      <IonContent fullscreen>
-        <IonHeader collapse="condense">
-          <IonToolbar>
-            <IonTitle size="large">Login</IonTitle>
-          </IonToolbar>
-        </IonHeader>
-
-        <IonGrid>
-          <IonRow>
-            <IonCol>
-              <IonAlert
-                isOpen={isError}
-                onDidDismiss={() => setIsError(false)}
-                cssClass="my-custom-class"
-                header={"Error!"}
-                message={message}
-                buttons={["Dismiss"]}
-              />
-            </IonCol>
-          </IonRow>
-
-          <IonRow>
-            <IonCol>
-              <IonItem>
-                <IonLabel position="floating"> Email</IonLabel>
-                <IonInput
-                  type="email"
-                  value={email}
-                  onIonChange={(e) => setEmail(e.detail.value!)}
-                ></IonInput>
-              </IonItem>
-            </IonCol>
-          </IonRow>
-
-          <IonRow>
-            <IonCol>
-              <IonItem>
-                <IonLabel position="floating"> Senha</IonLabel>
-                <IonInput
-                  type="password"
-                  value={password}
-                  onIonChange={(e) => setPassword(e.detail.value!)}
-                ></IonInput>
-              </IonItem>
-            </IonCol>
-          </IonRow>
-
-          <IonRow>
-            <IonCol>
-              <p style={{ fontSize: "small" }}>
-                Clicando no botão de "LOGIN", você concorda com a nossa{" "}
-                <a href="#">política de termos e serviços</a>
-              </p>
-              <IonButton expand="block" onClick={handleLogin}>
-                Login
-              </IonButton>
-              <p style={{ fontSize: "medium" }}>
-                Ainda não possui uma conta? <a href="cadastro">Cadastre-se aqui!</a>
-              </p>
-            </IonCol>
-          </IonRow>
-        </IonGrid>
-      </IonContent>
-    </IonPage>
-  );
-};
-
-export default Page;

src/services/session.ts

@@ -0,0 +1,33 @@
+import instance from '../services/api';
+import sessionRoutes from '../constants/routes/sessionRoutes';
+import LocalStorage from '../LocalStorage';
+import { AxiosRequestHeaders } from 'axios';
+
+let token: string | null;
+let header: AxiosRequestHeaders;
+
+interface createData {
+  login: string,
+  password: string,
+}
+
+function updateHeader() {
+  token = LocalStorage.getToken();
+  header = {
+    Accept: 'application/json',
+    'Content-Type': 'application/json',
+    "Authorization": 'Bearer ' + token
+  }
+}
+
+export async function create(data: createData) {
+  const response = await instance.post(sessionRoutes.create.url, data);
+  return response.data;
+}
+
+export async function refresh() {
+  updateHeader();
+  
+  let response = await instance.post(sessionRoutes.refresh.url, { token }, { headers: header });
+  return response.data;
+}