96 lines
3.5 KiB
TypeScript
96 lines
3.5 KiB
TypeScript
import { IonIcon, 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 CustomField from '../components/CustomField';
|
|
import { Action } from '../components/Action';
|
|
import { useEffect, useState } from 'react';
|
|
// import { validateForm } from '../data/utils';
|
|
import { useParams } from 'react-router';
|
|
import './Cadastro.css';
|
|
import ModalExample from '../components/Email';
|
|
|
|
const Cadastro: React.FC = () => {
|
|
const [ errors, setErrors ] = useState(false);
|
|
const createAccount = () => {
|
|
|
|
// const errors = validateForm();
|
|
setErrors(errors);
|
|
|
|
// if (!errors.length) {
|
|
|
|
// Submit your form here
|
|
// }
|
|
}
|
|
|
|
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>
|
|
</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 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" onClick={ createAccount }>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 Cadastro;
|