Merge feature/cadastro-feature/login

src/App.tsx

@@ -1,8 +1,12 @@
-import { IonApp, IonRouterOutlet, IonSplitPane, setupIonicReact } from '@ionic/react';
-import { IonReactRouter } from '@ionic/react-router';
 import { Redirect, Route } from 'react-router-dom';
-import Menu from './components/Menu';
+import {
-import Page from './pages/Page';
+  IonApp,
+  IonRouterOutlet,
+  setupIonicReact
+} from '@ionic/react';
+import { IonReactRouter } from '@ionic/react-router';
+import Cadastro from './pages/Cadastro/Cadastro';
+import MainPages from './pages/MainPages';
 
 // importação das páginas
 import Login from './pages/Login';
@@ -25,36 +29,25 @@ import '@ionic/react/css/display.css';
 
 /* Theme variables */
 import './theme/variables.css';
-import Tabs from './components/Tabs';
+// import Tabs from './components/Tabs';
 
 setupIonicReact();
 
-const App: React.FC = () => {
+const App: React.FC = () => (
-  return (
+  <IonApp>
-    <IonApp>
+    <IonReactRouter>
-      <IonReactRouter>
+      
-        <IonSplitPane contentId="main">
+        <IonRouterOutlet>
-          <Menu />
+          <Route exact path="/mainpages" component={MainPages}></Route>
-          <IonRouterOutlet id="main">
+          <Route exact path="/cadastro" component={Cadastro}></Route>
-            <Route path="/" exact={true}>
+          <Route exact path="/login" component={Login}></Route>
-              <Redirect to="/page/Inbox" />
+          <Route exact path="/">
-            </Route>
+            <Redirect to="/cadastro" />
-            <Route path="/page/:name" exact={true}>
+          </Route>
-              <Page />
+        </IonRouterOutlet>
-            </Route>
+        
-
+    </IonReactRouter>
-            {/* Login page */}
+  </IonApp>
-            <Route path="/login" exact={true}>
+);
-              <Login />
-            </Route>
-
-          </IonRouterOutlet>
-        </IonSplitPane>
-
-        {/* <Tabs /> */}
-      </IonReactRouter>
-    </IonApp>
-  );
-};
 
 export default App;

src/components/Action.tsx

@@ -0,0 +1,19 @@
+import { IonCol, IonRouterLink, IonRow } from "@ionic/react";
+
+interface ComponentProps {
+    message: string,
+    link: string,
+    text: string
+}
+
+export const Action = (props: ComponentProps) => (
+
+    <IonRow className="ion-text-center ion-justify-content-center">
+        <IonCol size="12">
+            <p>
+                { props.message }
+                <IonRouterLink className="custom-link" routerLink={ props.link }> { props.text } &rarr;</IonRouterLink>
+            </p>
+        </IonCol>
+    </IonRow>
+);

src/components/Email.tsx

@@ -0,0 +1,17 @@
+import React, { useState } from 'react';
+import { IonModal, IonButton, IonContent } from '@ionic/react';
+
+export const ModalExample: React.FC = () => {
+  const [showModal, setShowModal] = useState(true);
+
+  return (
+    <IonContent>
+      <IonModal isOpen={showModal}>
+        <p>This is modal content</p>
+        <IonButton onClick={() => setShowModal(false)}>Close Modal</IonButton>
+      </IonModal>
+    </IonContent>
+  );
+};
+
+export default ModalExample;

src/components/ExploreContainer.css

@@ -1,24 +0,0 @@
-.container {
-  text-align: center;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.container strong {
-  font-size: 20px;
-  line-height: 26px;
-}
-
-.container p {
-  font-size: 16px;
-  line-height: 22px;
-  color: #8c8c8c;
-  margin: 0;
-}
-
-.container a {
-  text-decoration: none;
-}

src/components/ExploreContainer.tsx

@@ -1,16 +0,0 @@
-import './ExploreContainer.css';
-
-interface ContainerProps {
-  name: string;
-}
-
-const ExploreContainer: React.FC<ContainerProps> = ({ name }) => {
-  return (
-    <div className="container">
-      <strong>{name}</strong>
-      <p>Explore <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
-    </div>
-  );
-};
-
-export default ExploreContainer;

src/components/Menu.css

@@ -1,113 +0,0 @@
-ion-menu ion-content {
-  --background: var(--ion-item-background, var(--ion-background-color, #fff));
-}
-
-ion-menu.md ion-content {
-  --padding-start: 8px;
-  --padding-end: 8px;
-  --padding-top: 20px;
-  --padding-bottom: 20px;
-}
-
-ion-menu.md ion-list {
-  padding: 20px 0;
-}
-
-ion-menu.md ion-note {
-  margin-bottom: 30px;
-}
-
-ion-menu.md ion-list-header, ion-menu.md ion-note {
-  padding-left: 10px;
-}
-
-ion-menu.md ion-list#inbox-list {
-  border-bottom: 1px solid var(--ion-color-step-150, #d7d8da);
-}
-
-ion-menu.md ion-list#inbox-list ion-list-header {
-  font-size: 22px;
-  font-weight: 600;
-  min-height: 20px;
-}
-
-ion-menu.md ion-list#labels-list ion-list-header {
-  font-size: 16px;
-  margin-bottom: 18px;
-  color: #757575;
-  min-height: 26px;
-}
-
-ion-menu.md ion-item {
-  --padding-start: 10px;
-  --padding-end: 10px;
-  border-radius: 4px;
-}
-
-ion-menu.md ion-item.selected {
-  --background: rgba(var(--ion-color-primary-rgb), 0.14);
-}
-
-ion-menu.md ion-item.selected ion-icon {
-  color: var(--ion-color-primary);
-}
-
-ion-menu.md ion-item ion-icon {
-  color: #616e7e;
-}
-
-ion-menu.md ion-item ion-label {
-  font-weight: 500;
-}
-
-ion-menu.ios ion-content {
-  --padding-bottom: 20px;
-}
-
-ion-menu.ios ion-list {
-  padding: 20px 0 0 0;
-}
-
-ion-menu.ios ion-note {
-  line-height: 24px;
-  margin-bottom: 20px;
-}
-
-ion-menu.ios ion-item {
-  --padding-start: 16px;
-  --padding-end: 16px;
-  --min-height: 50px;
-}
-
-ion-menu.ios ion-item ion-icon {
-  font-size: 24px;
-  color: #73849a;
-}
-
-ion-menu.ios ion-item .selected ion-icon {
-  color: var(--ion-color-primary);
-}
-
-ion-menu.ios ion-list#labels-list ion-list-header {
-  margin-bottom: 8px;
-}
-
-ion-menu.ios ion-list-header,
-ion-menu.ios ion-note {
-  padding-left: 16px;
-  padding-right: 16px;
-}
-
-ion-menu.ios ion-note {
-  margin-bottom: 8px;
-}
-
-ion-note {
-  display: inline-block;
-  font-size: 16px;
-  color: var(--ion-color-medium-shade);
-}
-
-ion-item.selected {
-  --color: var(--ion-color-primary);
-} 

src/components/Menu.tsx

@@ -1,100 +0,0 @@
-import {
-  IonContent,
-  IonIcon,
-  IonItem,
-  IonLabel,
-  IonList,
-  IonListHeader,
-  IonMenu,
-  IonMenuToggle,
-  IonNote,
-} from '@ionic/react';
-
-import { useLocation } from 'react-router-dom';
-import { archiveOutline, archiveSharp, bookmarkOutline, heartOutline, heartSharp, mailOutline, mailSharp, paperPlaneOutline, paperPlaneSharp, trashOutline, trashSharp, warningOutline, warningSharp } from 'ionicons/icons';
-import './Menu.css';
-
-interface AppPage {
-  url: string;
-  iosIcon: string;
-  mdIcon: string;
-  title: string;
-}
-
-const appPages: AppPage[] = [
-  {
-    title: 'Inbox',
-    url: '/page/Inbox',
-    iosIcon: mailOutline,
-    mdIcon: mailSharp
-  },
-  {
-    title: 'Outbox',
-    url: '/page/Outbox',
-    iosIcon: paperPlaneOutline,
-    mdIcon: paperPlaneSharp
-  },
-  {
-    title: 'Favorites',
-    url: '/page/Favorites',
-    iosIcon: heartOutline,
-    mdIcon: heartSharp
-  },
-  {
-    title: 'Archived',
-    url: '/page/Archived',
-    iosIcon: archiveOutline,
-    mdIcon: archiveSharp
-  },
-  {
-    title: 'Trash',
-    url: '/page/Trash',
-    iosIcon: trashOutline,
-    mdIcon: trashSharp
-  },
-  {
-    title: 'Spam',
-    url: '/page/Spam',
-    iosIcon: warningOutline,
-    mdIcon: warningSharp
-  }
-];
-
-const labels = ['Family', 'Friends', 'Notes', 'Work', 'Travel', 'Reminders'];
-
-const Menu: React.FC = () => {
-  const location = useLocation();
-
-  return (
-    <IonMenu contentId="main" type="overlay">
-      <IonContent>
-        <IonList id="inbox-list">
-          <IonListHeader>Inbox</IonListHeader>
-          <IonNote>hi@ionicframework.com</IonNote>
-          {appPages.map((appPage, index) => {
-            return (
-              <IonMenuToggle key={index} autoHide={false}>
-                <IonItem className={location.pathname === appPage.url ? 'selected' : ''} routerLink={appPage.url} routerDirection="none" lines="none" detail={false}>
-                  <IonIcon slot="start" ios={appPage.iosIcon} md={appPage.mdIcon} />
-                  <IonLabel>{appPage.title}</IonLabel>
-                </IonItem>
-              </IonMenuToggle>
-            );
-          })}
-        </IonList>
-
-        <IonList id="labels-list">
-          <IonListHeader>Labels</IonListHeader>
-          {labels.map((label, index) => (
-            <IonItem lines="none" key={index}>
-              <IonIcon slot="start" icon={bookmarkOutline} />
-              <IonLabel>{label}</IonLabel>
-            </IonItem>
-          ))}
-        </IonList>
-      </IonContent>
-    </IonMenu>
-  );
-};
-
-export default Menu;

src/config/api.config.ts

@@ -1,13 +1,24 @@
+<<<<<<< HEAD
 import environment from "../constants/environment";
 
 const getBaseUrl = (): string => {
   // const { hostname } = window.location;
   
+=======
+import environment from "../environments/environment";
+
+function getBaseUrl() {
+  const { hostname } = window.location;
+>>>>>>> 561e8597e0534b18b8dfbf5b454030b6d9a0cdbc
   const { url } = environment;
 
   let apiUrl = null;
   
+<<<<<<< HEAD
   // if (hostname === 'projeto-integrado-f-web.herokuapp.com') {
+=======
+  // if (hostname === '') {
+>>>>>>> 561e8597e0534b18b8dfbf5b454030b6d9a0cdbc
   //   apiUrl = url.prod;
   // } else {
     apiUrl = url.local;

src/environments/environment.ts

@@ -0,0 +1,6 @@
+export default {
+    url: {
+      prod: 'https://projeto-integrado-f.herokuapp.com',
+      local: 'http://localhost:3000'
+    },
+}

src/pages/Cadastro/Cadastro.css

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

src/pages/Cadastro/Cadastro.tsx

@@ -0,0 +1,216 @@
+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 './Cadastro.css';
+import ModalExample from '../../components/Email';
+import * as UsersService from '../../services/users'
+
+const Cadastro: 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>Cadastro</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)}
+                      >
+                      </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 Cadastro;

src/pages/Home.tsx

@@ -0,0 +1,59 @@
+import { IonItem, IonLabel, IonInput, IonButton, IonCardTitle, IonCol, IonContent, IonGrid, IonPage, IonRow } from '@ionic/react';
+import { Action } from '../components/Action';
+
+const Home: React.FC = () => {
+  return (
+    <IonPage>
+        <IonContent fullscreen>
+            <IonGrid className="ion-padding">
+                <IonRow>
+                    <IonCol size="12">
+                        <IonCardTitle>Como você deseja se cadastrar?</IonCardTitle>
+                    </IonCol>
+                </IonRow>
+                <IonRow>
+                    <IonCol size="12">
+                        <div id='nome-sobrenome'>
+                        <IonItem>
+                            <IonLabel position='floating'>Nome</IonLabel>
+                            <IonInput clearInput></IonInput>
+                        </IonItem>
+                        <IonItem>
+                            <IonLabel position='floating'>Sobrenome</IonLabel>
+                            <IonInput clearInput></IonInput>
+                        </IonItem>
+                        </div>
+                        
+                        <IonItem>
+                        <IonLabel position='floating'>E-mail</IonLabel>
+                        <IonInput clearInput type='email'></IonInput>
+                        </IonItem>
+
+                        <IonItem>
+                        <IonLabel position='stacked'>Data de nascimento</IonLabel>
+                        <IonInput type='date'></IonInput>
+                        </IonItem>
+                        
+                        <IonItem>
+                        <IonLabel position='floating'>Senha</IonLabel>
+                        <IonInput clearInput type='password'></IonInput>
+                        </IonItem>
+                        <IonItem>
+                        <IonLabel position='floating'>Confirme a senha</IonLabel>
+                        <IonInput clearInput type='password'></IonInput>
+                        </IonItem>
+                        
+                        <IonButton className="ion-margin-top" expand="block">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>
+        </IonContent>
+    </IonPage>
+  );
+};
+
+export default Home;

src/pages/MainPages.tsx

@@ -0,0 +1,46 @@
+import React, { useState, useRef } from 'react';
+import {
+  IonTabs,
+  IonTabBar,
+  IonTabButton,
+  IonLabel,
+  IonPage,
+  IonIcon,
+  IonRouterOutlet
+} from '@ionic/react';
+import { Redirect, Route } from 'react-router-dom';
+import { IonReactRouter } from '@ionic/react-router';
+import { search, home, person } from 'ionicons/icons';
+
+import Home from './Home';
+
+export const MainPages: React.FC = () => {
+
+  return (
+    <IonTabs>
+      <IonRouterOutlet>
+        <Route path="/home" exact={true}>
+          <Home />
+        </Route>
+        <Route path="/mainpages" render={() => <Redirect to="/home" />} />
+      </IonRouterOutlet>
+
+      <IonTabBar slot="bottom">
+        <IonTabButton tab="buscar" href="/buscar">
+          <IonIcon icon={search} />
+          <IonLabel>Buscar</IonLabel>
+        </IonTabButton>
+        <IonTabButton tab="home" href="/home">
+          <IonIcon icon={home} />
+          <IonLabel>Home</IonLabel>
+        </IonTabButton>
+        <IonTabButton tab="perfil" href="/perfil">
+          <IonIcon icon={person} />
+          <IonLabel>Perfil</IonLabel>
+        </IonTabButton>
+      </IonTabBar>
+    </IonTabs>
+  )
+}
+
+export default MainPages;

src/pages/Page.tsx

@@ -1,33 +0,0 @@
-import { IonButtons, IonContent, IonHeader, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/react';
-import { useParams } from 'react-router';
-import ExploreContainer from '../components/ExploreContainer';
-import './Page.css';
-
-const Page: React.FC = () => {
-
-  const { name } = useParams<{ name: string; }>();
-
-  return (
-    <IonPage>
-      <IonHeader>
-        <IonToolbar>
-          <IonButtons slot="start">
-            <IonMenuButton />
-          </IonButtons>
-          <IonTitle>{name}</IonTitle>
-        </IonToolbar>
-      </IonHeader>
-
-      <IonContent fullscreen>
-        <IonHeader collapse="condense">
-          <IonToolbar>
-            <IonTitle size="large">{name}</IonTitle>
-          </IonToolbar>
-        </IonHeader>
-        <ExploreContainer name={name} />
-      </IonContent>
-    </IonPage>
-  );
-};
-
-export default Page;

src/services/users.ts

@@ -0,0 +1,45 @@
+import instance from '../services/api';
+// import LocalStorage from '../LocalStorage';
+
+let token:string;
+let header:string;
+
+function updateHeader() {
+//   token = LocalStorage.getToken();
+  header = `{
+    "Accept": 'application/json',
+    "Content-Type": 'application/json',
+    "Authorization": 'Bearer ' + token
+  }`
+}
+
+export interface CadastroResponse {
+    message?: string;
+  
+    token?: {
+      token: string;
+    };
+  
+    error?: string;
+}
+
+export interface CadastroRequest {
+    name: string;
+    email: string;
+    birth_date: string;
+    password: string;
+}
+
+// export async function get(cpf) {
+//   updateHeader();
+
+//   const response = await instance.get(userRoutes.get.url + `/${cpf}`, { headers: header });
+//   return response.data;
+// }
+
+export async function create(CadastroRequest: any) {
+  updateHeader();
+
+  const response = await instance.post("http://localhost:3333/users/", CadastroRequest);
+  return response.data;
+}