Ajuste das iontabs | Tela esboço de cadastro sem validação

2022-04-14 23:12:06 -03:00
parent b0371dbbaa
commit a4948bb989
13 changed files with 262 additions and 309 deletions
--- a/src/pages/Cadastro.tsx
+++ b/src/pages/Cadastro.tsx
@@ -0,0 +1,95 @@
+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;