From 6b7ebe046af5d871df6ca8e48328b3dbd0d6d298 Mon Sep 17 00:00:00 2001
From: Hugo Falcao <hugocoelhof03@gmail.com>
Date: Tue, 10 May 2022 21:27:33 -0300
Subject: [PATCH] Inicio

---
 src/App.tsx                                   |   2 +-
 .../BuscarPassageiro/BuscarPassageiro.css     |   7 +
 .../BuscarPassageiro/BuscarPassageiro.tsx     | 218 ++++++++++++++++++
 src/pages/MainPages.tsx                       |  10 +-
 src/services/users.ts                         |   2 +-
 5 files changed, 236 insertions(+), 3 deletions(-)
 create mode 100644 src/pages/BuscarPassageiro/BuscarPassageiro.css
 create mode 100644 src/pages/BuscarPassageiro/BuscarPassageiro.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 1dc24c1..0b04991 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -42,7 +42,7 @@ const App: React.FC = () => (
           <Route exact path="/cadastro" component={Cadastro}></Route>
           <Route exact path="/login" component={Login}></Route>
           <Route exact path="/">
-            <Redirect to="/cadastro" />
+            <Redirect to="/mainpages" />
           </Route>
         </IonRouterOutlet>
         
diff --git a/src/pages/BuscarPassageiro/BuscarPassageiro.css b/src/pages/BuscarPassageiro/BuscarPassageiro.css
new file mode 100644
index 0000000..80598b6
--- /dev/null
+++ b/src/pages/BuscarPassageiro/BuscarPassageiro.css
@@ -0,0 +1,7 @@
+#nome-sobrenome{
+    display: flex;
+}
+
+.toast-notification{
+    --background: rgb(255, 0, 0);
+}
\ No newline at end of file
diff --git a/src/pages/BuscarPassageiro/BuscarPassageiro.tsx b/src/pages/BuscarPassageiro/BuscarPassageiro.tsx
new file mode 100644
index 0000000..9f9664c
--- /dev/null
+++ b/src/pages/BuscarPassageiro/BuscarPassageiro.tsx
@@ -0,0 +1,218 @@
+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';
+import { useHistory, useParams } from 'react-router';
+import './BuscarPassageiro.css';
+import ModalExample from '../../components/Email';
+import * as UsersService from '../../services/users'
+
+const BuscarPassageiro: React.FC = () => {
+  const history = useHistory();
+  
+  const [showToast, setShowToast] = useState(false);
+  const [messageToast, setMessageToast ] = 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 () => {
+
+    if(name != '' && email != '' && birthDate != '' && password != '' && confirmPassword != '') {
+      if(password === confirmPassword){
+        const signUpForm = {
+          name: firstName +' '+ lastName,
+          email: email,
+          birth_date: birthDate,
+          password: password
+        }
+
+        let result = fieldValidate();
+        if((await result).success) {
+
+            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');
+
+            } else {
+              setMessageToast(retorno.message);
+              setShowToast(true);
+            }
+        } 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; }>();
+
+  return (
+    <IonPage>
+			<IonHeader>
+				<IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton text={''} icon={arrowBack} defaultHref='mainpages' />
+          </IonButtons>
+				</IonToolbar>
+			</IonHeader>
+			<IonContent fullscreen>
+        <IonGrid className="ion-padding">
+            <IonRow>
+                <IonCol size="12">
+                    {/* <IonCardTitle>Como você deseja se cadastrar?</IonCardTitle> */}
+                    <IonCardTitle>BuscarPassageiro</IonCardTitle>
+                </IonCol>
+            </IonRow>
+            {/* <IonItem>
+              <IonIcon icon={logoFacebook} />
+              Continuar com Facebook
+            </IonItem>
+            <IonItem>
+              <IonIcon icon={mail} />
+              Continuar com e-mail
+            </IonItem> */}
+            <IonRow>
+                <IonCol size="12">
+                  <div id='nome-sobrenome'>
+                    <IonItem>
+                      <IonLabel position='floating'>Nome</IonLabel>
+                      <IonInput 
+                        type='text'
+                        clearInput
+                        onIonInput={(e: any) => setFirstName(e.target.value)}
+                        // error={isError}
+                        // onIonChange={(e: any) => setFirstName(e.detail.value)}
+                      >
+                      </IonInput>
+                    </IonItem>
+                    <IonItem>
+                      <IonLabel position='floating'>Sobrenome</IonLabel>
+                      <IonInput 
+                        clearInput
+                        onIonInput={(e: any) => setLastName(e.target.value)}
+                      >
+                      </IonInput>
+                    </IonItem>
+                  </div>
+                  
+                  <IonItem>
+                    <IonLabel position='floating'>E-mail</IonLabel>
+                    <IonInput 
+                      clearInput 
+                      type='email'
+                      onIonInput={(e: any) => setEmail(e.target.value)}
+                    >
+                    </IonInput>
+                  </IonItem>
+
+                  <IonItem>
+                    <IonLabel position='stacked'>Data de nascimento</IonLabel>
+                    <IonInput 
+                      type='date'
+                      onIonInput={(e: any) => setBirthDate(e.target.value)}
+                    >
+                    </IonInput>
+                  </IonItem>
+                  
+                  <IonItem>
+                    <IonLabel position='floating'>Senha</IonLabel>
+                    <IonInput 
+                      clearInput 
+                      type='password'
+                      onIonInput={(e: any) => setPassword(e.target.value)}
+                    ></IonInput>
+                  </IonItem>
+                  <IonItem>
+                    <IonLabel position='floating'>Confirme a senha</IonLabel>
+                    <IonInput 
+                      clearInput 
+                      type='password'
+                      onIonInput={(e: any) => setConfirmPassword(e.target.value)}
+                    ></IonInput>
+                  </IonItem>
+                  
+                  <IonButton className="ion-margin-top" expand="block" onClick={ handleSubmit }>Cadastrar-se</IonButton>
+                </IonCol>
+            </IonRow>
+            <small className='ion-margin-top'>
+              Ao se cadastrar, você aceita nossos <a href="">Termos e Condições</a> e nossa <a href=""> Política de Privacidade</a>.
+            </small>
+            <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>
+  );
+};
+
+export default BuscarPassageiro;
\ No newline at end of file
diff --git a/src/pages/MainPages.tsx b/src/pages/MainPages.tsx
index 3803212..6879edc 100644
--- a/src/pages/MainPages.tsx
+++ b/src/pages/MainPages.tsx
@@ -13,6 +13,7 @@ import { IonReactRouter } from '@ionic/react-router';
 import { search, home, person } from 'ionicons/icons';
 
 import Home from './Home';
+import BuscarPassageiro from './BuscarPassageiro/BuscarPassageiro';
 
 export const MainPages: React.FC = () => {
 
@@ -22,7 +23,14 @@ export const MainPages: React.FC = () => {
         <Route path="/home" exact={true}>
           <Home />
         </Route>
-        <Route path="/mainpages" render={() => <Redirect to="/home" />} />
+        <Route path="/buscar" exact={true}>
+          <BuscarPassageiro />
+        </Route>
+        <Route path="/buscar" exact={true}>
+          <BuscarPassageiro />
+        </Route>
+        <Route path="/mainpages" render={() => <Redirect to="/buscar
+        " />} />
       </IonRouterOutlet>
 
       <IonTabBar slot="bottom">
diff --git a/src/services/users.ts b/src/services/users.ts
index 73440e1..e14e17d 100644
--- a/src/services/users.ts
+++ b/src/services/users.ts
@@ -1,7 +1,7 @@
 import instance from '../services/api';
 // import LocalStorage from '../LocalStorage';
 
-let token:string;
+// let token:string;
 let header:string;
 
 function updateHeader() {