Page cadastro finalizada

src/pages/Cadastro.css

@@ -1,3 +1,7 @@
 #nome-sobrenome{
     display: flex;
 }
+
+.toast-notification{
+    --background: rgb(255, 0, 0);
+}

src/pages/Cadastro.tsx

@@ -1,4 +1,4 @@
-import { IonProgressBar, IonItem, IonLabel, IonInput, IonBackButton, IonButton, IonButtons, IonCardTitle, IonCol, IonContent, IonGrid, IonHeader, IonPage, IonRow, IonToolbar } from '@ionic/react';
+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 { useEffect, useState } from 'react';
@@ -10,20 +10,65 @@ import * as UsersService from '../services/users'
 const Cadastro: React.FC = () => {
   const history = useHistory();
   
-  const [ errors, setErrors ] = useState(false);
+  const [showToast, setShowToast] = useState(false);
+  const [messageToast, setMessageToast ] = useState('');
 
-  const [email, setEmail] = useState({});
+  const [email, setEmail] = useState<string>('');
   const [password, setPassword] = useState<string>('');
   const [confirmPassword, setConfirmPassword] = useState<string>('');
   const [firstName, setFirstName] = useState<string>('');
   const [lastName, setLastName] = useState<string>('');
   const [birthDate, setBirthDate] = useState<string>('');
+  const [lResult, setlResult] = useState({
+    error: '',
+    success: true
+  });
+
+  const emailValidate = () => {
+    var usuario = email.substring(0, email.indexOf("@"));
+    var dominio = email.substring(email.indexOf("@") + 1, email.length);
+
+    if ((usuario.length >= 1) &&
+        (dominio.length >= 3) &&
+        (usuario.search("@") == -1) &&
+        (dominio.search("@") == -1) &&
+        (usuario.search(" ") == -1) &&
+        (dominio.search(" ") == -1) &&
+        (dominio.search(".") != -1) &&
+        (dominio.indexOf(".") >= 1) &&
+        (dominio.lastIndexOf(".") < dominio.length - 1)) 
+    {
+        return true;
+    } else {
+        return false;
+    }
+  };
+
+  const clearResult = () => {
+      lResult.error = '';
+      lResult.success = true;
+  }
+
+  const fieldValidate = async () => {
+      clearResult();
+
+      if(!emailValidate()) {
+          lResult.error = 'O EMAIL é inválido!';
+          lResult.success = false;
+          return lResult;
+      } else if(password.length < 7 || password.length > 12) { //TODO: validar de acordo com a documentação
+          lResult.error = 'A senha deve ter de 7 a 12 caracteres!';
+          lResult.success = false;
+          return lResult;
+      }
+      
+      return lResult;
+  };
 
   const handleSubmit = async () => {
-    // setDisableSubmitButton(true)
-    // event.preventDefault();
-    // const data = new FormData(event.currentTarget);
 
+    if(name != '' && email != '' && birthDate != '' && password != '' && confirmPassword != '') {
+      if(password === confirmPassword){
         const signUpForm = {
           name: firstName +' '+ lastName,
           email: email,
@@ -31,34 +76,34 @@ const Cadastro: React.FC = () => {
           password: password
         }
 
-    console.log(signUpForm);
+        let result = fieldValidate();
+        if((await result).success) {
 
-    await UsersService.create(signUpForm).catch(error => {
-      if (!error.response) return
+            let retorno = await UsersService.create(signUpForm);
+            console.log(retorno);
+            if(retorno.token) {
+                // let signIn = await Api.signIn(email, passwordField); 
+                // if(signIn.token) {
+                    // await AsyncStorage.setItem('token', signIn.token);
+                    // await AsyncStorage.setItem('cpf', retorno.cpf);
+                    history.push('home');
 
-      if (error.response.data.message) {
-        // setAlertContent(error.response.data.message);
             } else {
-        // setAlertContent('Houve um erro ao realizar o cadastro.');
+              setMessageToast(retorno.message);
+              setShowToast(true);
             }
-      
-      // setAlertSeverity('error');
-      // setAlert(true);
-      // setDisableSubmitButton(false)
-    }).then(response => {
-      if (!response) return;
-  
-      history.push(
-        {
-          pathname: '/home',
-          state: {
-            detail: 'signedUp',
-            alertSeverity: 'success',
-            alertContent: 'Usuário cadastrado com sucesso!'
+        } else{
+          setMessageToast(lResult.error);
+          setShowToast(true);
         }
+      } else {
+        setMessageToast('As senhas devem ser iguais!');
+        setShowToast(true);
+      }
+    } else {
+      setMessageToast('Nenhum campo pode ser nulo!');
+      setShowToast(true);
     }
-      )
-    });
   };
 
   const { name } = useParams<{ name: string; }>();
@@ -76,7 +121,8 @@ const Cadastro: React.FC = () => {
         <IonGrid className="ion-padding">
             <IonRow>
                 <IonCol size="12">
-                    <IonCardTitle>Como você deseja se cadastrar?</IonCardTitle>
+                    {/* <IonCardTitle>Como você deseja se cadastrar?</IonCardTitle> */}
+                    <IonCardTitle>Cadastro</IonCardTitle>
                 </IonCol>
             </IonRow>
             {/* <IonItem>
@@ -154,6 +200,14 @@ const Cadastro: React.FC = () => {
             <Action message="Já tem conta?" text="Login" link="/login" />
         </IonGrid>
         {/* <IonProgressBar type="indeterminate"></IonProgressBar><br /> */}
+        <IonToast
+          // cssClass={"toast-notification"}
+          color='danger'      
+          isOpen={showToast}
+          onDidDismiss={() => setShowToast(false)}
+          message={messageToast}
+          duration={2500}
+        />
 			</IonContent>
 		</IonPage>
   );