Atualizações

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",

src/App.tsx

@@ -5,7 +5,7 @@ import Menu from './components/Menu';
 import Page from './pages/Page';
 
 // 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';
@@ -25,6 +25,7 @@ import '@ionic/react/css/display.css';
 
 /* Theme variables */
 import './theme/variables.css';
+import Tabs from './components/Tabs';
 
 setupIonicReact();
 
@@ -49,6 +50,8 @@ const App: React.FC = () => {
 
           </IonRouterOutlet>
         </IonSplitPane>
+
+        {/* <Tabs /> */}
       </IonReactRouter>
     </IonApp>
   );

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/pages/Login.tsx

@@ -3,12 +3,10 @@ import {
   IonHeader,
   IonPage,
   IonTitle,
-  IonToolbar,
+  IonToolbar
-  IonButtons,
 } from "@ionic/react";
 import React, { useState } from "react";
-import axios from "axios";
+import { IonGrid, IonRow, IonCol, IonToast } from "@ionic/react";
-import { IonGrid, IonRow, IonCol } from "@ionic/react";
 import { personCircle } from "ionicons/icons";
 import { useHistory } from "react-router-dom";
 import {
@@ -20,10 +18,13 @@ import {
   IonAlert,
 } from "@ionic/react";
 
-import * as sessionRoutes from '../../services/session';
+import * as sessionRoutes from '../services/session';
-import LocalStorage from "../../LocalStorage";
+import LocalStorage from '../LocalStorage';
 
 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");
@@ -38,26 +39,26 @@ const Page: React.FC = () => {
 
   const validateForm = () => {
     if (!email) {
-      setMessage("Por favor, informe um e-mail válido");
+      setMessageToast("Por favor, informe o e-mail");
-      setIsError(true);
+      setShowToast(true);
       return false;
     }
 
-    if (validateEmail(email) === false) {
+    if (!validateEmail(email)) {
-      setMessage("E-mail inválido");
+      setMessageToast("E-mail inválido");
-      setIsError(true);
+      setShowToast(true);
       return false;
     }
 
     if (!password) {
-      setMessage("Por favor, digite a sua senha");
+      setMessageToast("Por favor, digite a sua senha");
-      setIsError(true);
+      setShowToast(true);
       return false;
     }
 
-    if(password.length < 6) {
+    if(password.length < 7 || password.length > 12) {
-      setMessage("A senha deve conter ao menos 6 dígitos");
+      setMessageToast("A senha deve conter entre 7 e 12 dígitos");
-      setIsError(true);
+      setShowToast(true);
       return false;
     }
 
@@ -76,8 +77,8 @@ const Page: React.FC = () => {
 
     await sessionRoutes.create(singinForm).then(response => {
       if (response.status === 'error') {
-        setMessage(response.message);
+        setMessageToast(response.message);
-        setIsError(true);
+        setShowToast(true);
 
         return
       }
@@ -92,7 +93,6 @@ const Page: React.FC = () => {
 
       // se o backend retornou uma mensagem de erro customizada
       // if (error.response.data.message) {
-
       console.dir('Houve um erro: ', { error })
       alert('Houve um erro')
     })
@@ -177,6 +177,15 @@ const Page: React.FC = () => {
             </IonCol>
           </IonRow>
         </IonGrid>
+
+        <IonToast
+          // cssClass={"toast-notification"}
+          color='danger'      
+          isOpen={showToast}
+          onDidDismiss={() => setShowToast(false)}
+          message={messageToast}
+          duration={2500}
+        />
       </IonContent>
     </IonPage>
   );