Merge feature/cadastro-feature/login
This commit is contained in:
Matheus Albino Brunhara
41
src/App.tsx
41
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 (
|
||||
const App: React.FC = () => (
|
||||
<IonApp>
|
||||
<IonReactRouter>
|
||||
<IonSplitPane contentId="main">
|
||||
<Menu />
|
||||
<IonRouterOutlet id="main">
|
||||
<Route path="/" exact={true}>
|
||||
<Redirect to="/page/Inbox" />
|
||||
</Route>
|
||||
<Route path="/page/:name" exact={true}>
|
||||
<Page />
|
||||
</Route>
|
||||
|
||||
{/* Login page */}
|
||||
<Route path="/login" exact={true}>
|
||||
<Login />
|
||||
<IonRouterOutlet>
|
||||
<Route exact path="/mainpages" component={MainPages}></Route>
|
||||
<Route exact path="/cadastro" component={Cadastro}></Route>
|
||||
<Route exact path="/login" component={Login}></Route>
|
||||
<Route exact path="/">
|
||||
<Redirect to="/cadastro" />
|
||||
</Route>
|
||||
|
||||
</IonRouterOutlet>
|
||||
</IonSplitPane>
|
||||
|
||||
{/* <Tabs /> */}
|
||||
</IonReactRouter>
|
||||
</IonApp>
|
||||
);
|
||||
};
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
19
src/components/Action.tsx
Normal file
19
src/components/Action.tsx
Normal file
@@ -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 } →</IonRouterLink>
|
||||
</p>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
);
|
||||
17
src/components/Email.tsx
Normal file
17
src/components/Email.tsx
Normal file
@@ -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;
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
|
||||
6
src/environments/environment.ts
Normal file
6
src/environments/environment.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
export default {
|
||||
url: {
|
||||
prod: 'https://projeto-integrado-f.herokuapp.com',
|
||||
local: 'http://localhost:3000'
|
||||
},
|
||||
}
|
||||
7
src/pages/Cadastro/Cadastro.css
Normal file
7
src/pages/Cadastro/Cadastro.css
Normal file
@@ -0,0 +1,7 @@
|
||||
#nome-sobrenome{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.toast-notification{
|
||||
--background: rgb(255, 0, 0);
|
||||
}
|
||||
216
src/pages/Cadastro/Cadastro.tsx
Normal file
216
src/pages/Cadastro/Cadastro.tsx
Normal file
@@ -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;
|
||||
59
src/pages/Home.tsx
Normal file
59
src/pages/Home.tsx
Normal file
@@ -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;
|
||||
46
src/pages/MainPages.tsx
Normal file
46
src/pages/MainPages.tsx
Normal file
@@ -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;
|
||||
@@ -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;
|
||||
45
src/services/users.ts
Normal file
45
src/services/users.ts
Normal file
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user