Merge branch 'feature/login' of https://github.com/CloudAlb/tcc-vamos-frontend into develop

2022-04-18 21:23:42 -03:00
parent a43b011387 b3fa01635d
commit a222787aba
4 changed files with 267 additions and 91 deletions
--- a/src/pages/login/Login.tsx
+++ b/src/pages/login/Login.tsx
@@ -0,0 +1,162 @@
+import {
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+  IonButtons,
+} from "@ionic/react";
+import React, { useState } from "react";
+import axios from "axios";
+import { IonGrid, IonRow, IonCol } from "@ionic/react";
+import { personCircle } from "ionicons/icons";
+import { useHistory } from "react-router-dom";
+import {
+  IonItem,
+  IonLabel,
+  IonInput,
+  IonButton,
+  IonIcon,
+  IonAlert,
+} from "@ionic/react";
+
+function validateEmail(email: string) {
+  const re =
+    /^((?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\]))$/;
+  return re.test(String(email).toLowerCase());
+}
+
+const Page: React.FC = () => {
+  const history = useHistory();
+  const [email, setEmail] = useState<string>("matheusalb3213@gmail.com");
+  const [password, setPassword] = useState<string>("1234");
+  const [isError, setIsError] = useState<boolean>(false);
+  const [message, setMessage] = useState<string>("");
+
+  const handleLogin = () => {
+    // validação de inputs
+    if (!email) {
+      setMessage("Por favor, informe um e-mail válido");
+      setIsError(true);
+      return;
+    }
+
+    if (validateEmail(email) === false) {
+      setMessage("E-mail inválido");
+      setIsError(true);
+      return;
+    }
+
+    if (!password || password.length < 6) {
+      setMessage("Por favor, digite a sua senha");
+      setIsError(true);
+      return;
+    }
+
+    const loginData = {
+      email: email,
+      password: password,
+    };
+
+    const api = axios.create({
+      baseURL: `https://625dc16c4c36c7535779792c.mockapi.io/api/v1`,
+    });
+
+    api
+      // .post("/login", loginData)
+      .get("/users/2")
+      .then((res) => {
+        // login bem-sucedido
+        history.push("/dashboard/" + email);
+      })
+      .catch((error) => {
+        setMessage("Falha na autenticação! Por favor, crie uma conta");
+        setIsError(true);
+      });
+  };
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Login</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+
+      <IonRow>
+        <IonCol>
+          <IonIcon
+            style={{ fontSize: "70px", color: "#0040ff" }}
+            icon={personCircle}
+          />
+        </IonCol>
+      </IonRow>
+
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Login</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+
+        <IonGrid>
+          <IonRow>
+            <IonCol>
+              <IonAlert
+                isOpen={isError}
+                onDidDismiss={() => setIsError(false)}
+                cssClass="my-custom-class"
+                header={"Error!"}
+                message={message}
+                buttons={["Dismiss"]}
+              />
+            </IonCol>
+          </IonRow>
+
+          <IonRow>
+            <IonCol>
+              <IonItem>
+                <IonLabel position="floating"> Email</IonLabel>
+                <IonInput
+                  type="email"
+                  value={email}
+                  onIonChange={(e) => setEmail(e.detail.value!)}
+                ></IonInput>
+              </IonItem>
+            </IonCol>
+          </IonRow>
+
+          <IonRow>
+            <IonCol>
+              <IonItem>
+                <IonLabel position="floating"> Senha</IonLabel>
+                <IonInput
+                  type="password"
+                  value={password}
+                  onIonChange={(e) => setPassword(e.detail.value!)}
+                ></IonInput>
+              </IonItem>
+            </IonCol>
+          </IonRow>
+
+          <IonRow>
+            <IonCol>
+              <p style={{ fontSize: "small" }}>
+                Clicando no botão de "LOGIN", você concorda com a nossa{" "}
+                <a href="#">política de termos e serviços</a>
+              </p>
+              <IonButton expand="block" onClick={handleLogin}>
+                Login
+              </IonButton>
+              <p style={{ fontSize: "medium" }}>
+                Ainda não possui uma conta? <a href="#">Cadastre-se aqui!</a>
+              </p>
+            </IonCol>
+          </IonRow>
+        </IonGrid>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Page;