diff --git a/src/App.tsx b/src/App.tsx index 5f483f3..1dc24c1 100644 --- a/src/App.tsx +++ b/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 Page from './pages/Page'; +import { + 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 = () => { - return ( - - - - - - - - - - - - - {/* Login page */} - - - - - - - - {/* */} - - - ); -}; +const App: React.FC = () => ( + + + + + + + + + + + + + + +); export default App; diff --git a/src/components/Action.tsx b/src/components/Action.tsx new file mode 100644 index 0000000..2509d60 --- /dev/null +++ b/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) => ( + + + +

+ { props.message } + { props.text } → +

+ + +); \ No newline at end of file diff --git a/src/components/Email.tsx b/src/components/Email.tsx new file mode 100644 index 0000000..2902def --- /dev/null +++ b/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 ( + + +

This is modal content

+ setShowModal(false)}>Close Modal + + + ); +}; + +export default ModalExample; \ No newline at end of file diff --git a/src/components/ExploreContainer.css b/src/components/ExploreContainer.css deleted file mode 100644 index e99f514..0000000 --- a/src/components/ExploreContainer.css +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/src/components/ExploreContainer.tsx b/src/components/ExploreContainer.tsx deleted file mode 100644 index 354df7b..0000000 --- a/src/components/ExploreContainer.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import './ExploreContainer.css'; - -interface ContainerProps { - name: string; -} - -const ExploreContainer: React.FC = ({ name }) => { - return ( -
- {name} -

Explore UI Components

-
- ); -}; - -export default ExploreContainer; diff --git a/src/components/Menu.css b/src/components/Menu.css deleted file mode 100644 index 0ca47a2..0000000 --- a/src/components/Menu.css +++ /dev/null @@ -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); -} \ No newline at end of file diff --git a/src/components/Menu.tsx b/src/components/Menu.tsx deleted file mode 100644 index 7024a26..0000000 --- a/src/components/Menu.tsx +++ /dev/null @@ -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 ( - - - - Inbox - hi@ionicframework.com - {appPages.map((appPage, index) => { - return ( - - - - {appPage.title} - - - ); - })} - - - - Labels - {labels.map((label, index) => ( - - - {label} - - ))} - - - - ); -}; - -export default Menu; diff --git a/src/config/api.config.ts b/src/config/api.config.ts index a7790ce..f25dba8 100644 --- a/src/config/api.config.ts +++ b/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; diff --git a/src/environments/environment.ts b/src/environments/environment.ts new file mode 100644 index 0000000..8ba23dd --- /dev/null +++ b/src/environments/environment.ts @@ -0,0 +1,6 @@ +export default { + url: { + prod: 'https://projeto-integrado-f.herokuapp.com', + local: 'http://localhost:3000' + }, +} \ No newline at end of file diff --git a/src/pages/Cadastro/Cadastro.css b/src/pages/Cadastro/Cadastro.css new file mode 100644 index 0000000..80598b6 --- /dev/null +++ b/src/pages/Cadastro/Cadastro.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/Cadastro/Cadastro.tsx b/src/pages/Cadastro/Cadastro.tsx new file mode 100644 index 0000000..15ed2aa --- /dev/null +++ b/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(''); + const [password, setPassword] = useState(''); + const [confirmPassword, setConfirmPassword] = useState(''); + const [firstName, setFirstName] = useState(''); + const [lastName, setLastName] = useState(''); + const [birthDate, setBirthDate] = useState(''); + 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 ( + + + + + + + + + + + + + {/* Como você deseja se cadastrar? */} + Cadastro + + + {/* + + Continuar com Facebook + + + + Continuar com e-mail + */} + + +
+ + Nome + setFirstName(e.target.value)} + > + + + + Sobrenome + setLastName(e.target.value)} + > + + +
+ + + E-mail + setEmail(e.target.value)} + > + + + + + Data de nascimento + setBirthDate(e.target.value)} + > + + + + + Senha + setPassword(e.target.value)} + > + + + Confirme a senha + setConfirmPassword(e.target.value)} + > + + + Cadastrar-se + + + + Ao se cadastrar, você aceita nossos Termos e Condições e nossa Política de Privacidade. + + + + {/*
*/} + setShowToast(false)} + message={messageToast} + duration={2500} + /> + + + ); +}; + +export default Cadastro; \ No newline at end of file diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx new file mode 100644 index 0000000..2169533 --- /dev/null +++ b/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 ( + + + + + + Como você deseja se cadastrar? + + + + +
+ + Nome + + + + Sobrenome + + +
+ + + E-mail + + + + + Data de nascimento + + + + + Senha + + + + Confirme a senha + + + + Cadastrar-se + + + + Ao se cadastrar, você aceita nossos Termos e Condições e nossa Política de Privacidade. + + + + + + ); +}; + +export default Home; diff --git a/src/pages/MainPages.tsx b/src/pages/MainPages.tsx new file mode 100644 index 0000000..3803212 --- /dev/null +++ b/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 ( + + + + + + } /> + + + + + + Buscar + + + + Home + + + + Perfil + + + + ) +} + +export default MainPages; \ No newline at end of file diff --git a/src/pages/Page.css b/src/pages/Page.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/pages/Page.tsx b/src/pages/Page.tsx deleted file mode 100644 index 24ac77a..0000000 --- a/src/pages/Page.tsx +++ /dev/null @@ -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 ( - - - - - - - {name} - - - - - - - {name} - - - - - - ); -}; - -export default Page; diff --git a/src/services/users.ts b/src/services/users.ts new file mode 100644 index 0000000..73440e1 --- /dev/null +++ b/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; +} \ No newline at end of file