Correções
This commit is contained in:
Matheus Albino Brunhara
4214
package-lock.json
generated
4214
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -19,12 +19,12 @@
|
|||||||
"@types/react-dom": "^16.9.10",
|
"@types/react-dom": "^16.9.10",
|
||||||
"@types/react-router": "^5.1.11",
|
"@types/react-router": "^5.1.11",
|
||||||
"@types/react-router-dom": "^5.1.7",
|
"@types/react-router-dom": "^5.1.7",
|
||||||
|
"axios": "^0.26.1",
|
||||||
"ionicons": "^5.4.0",
|
"ionicons": "^5.4.0",
|
||||||
"react": "^17.0.1",
|
"react": "^17.0.1",
|
||||||
"react-dom": "^17.0.1",
|
"react-dom": "^17.0.1",
|
||||||
"react-router": "^5.2.0",
|
"react-router": "^5.2.0",
|
||||||
"react-router-dom": "^5.2.0",
|
"react-router-dom": "^5.2.0",
|
||||||
"react-scripts": "^5.0.0",
|
|
||||||
"typescript": "^4.1.3",
|
"typescript": "^4.1.3",
|
||||||
"web-vitals": "^0.2.4",
|
"web-vitals": "^0.2.4",
|
||||||
"workbox-background-sync": "^5.1.4",
|
"workbox-background-sync": "^5.1.4",
|
||||||
@@ -65,7 +65,9 @@
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@capacitor/cli": "3.4.3"
|
"@capacitor/cli": "3.4.3",
|
||||||
|
"@types/axios": "^0.14.0",
|
||||||
|
"react-scripts": "5.0.1"
|
||||||
},
|
},
|
||||||
"description": "An Ionic project"
|
"description": "An Ionic project"
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,6 +4,9 @@ import { Redirect, Route } from 'react-router-dom';
|
|||||||
import Menu from './components/Menu';
|
import Menu from './components/Menu';
|
||||||
import Page from './pages/Page';
|
import Page from './pages/Page';
|
||||||
|
|
||||||
|
// importação das páginas
|
||||||
|
import Login from './pages/login/Login';
|
||||||
|
|
||||||
/* Core CSS required for Ionic components to work properly */
|
/* Core CSS required for Ionic components to work properly */
|
||||||
import '@ionic/react/css/core.css';
|
import '@ionic/react/css/core.css';
|
||||||
|
|
||||||
@@ -38,6 +41,12 @@ const App: React.FC = () => {
|
|||||||
<Route path="/page/:name" exact={true}>
|
<Route path="/page/:name" exact={true}>
|
||||||
<Page />
|
<Page />
|
||||||
</Route>
|
</Route>
|
||||||
|
|
||||||
|
{/* Login page */}
|
||||||
|
<Route path="/login" exact={true}>
|
||||||
|
<Login />
|
||||||
|
</Route>
|
||||||
|
|
||||||
</IonRouterOutlet>
|
</IonRouterOutlet>
|
||||||
</IonSplitPane>
|
</IonSplitPane>
|
||||||
</IonReactRouter>
|
</IonReactRouter>
|
||||||
|
|||||||
161
src/pages/login/Login.tsx
Normal file
161
src/pages/login/Login.tsx
Normal file
@@ -0,0 +1,161 @@
|
|||||||
|
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://reqres.in/api`,
|
||||||
|
});
|
||||||
|
|
||||||
|
api
|
||||||
|
.post("/login", loginData)
|
||||||
|
.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;
|
||||||
@@ -1,132 +0,0 @@
|
|||||||
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>("eve.holt@reqres.in");
|
|
||||||
const [password, setPassword] = useState<string>("cityslicka");
|
|
||||||
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://reqres.in/api`,
|
|
||||||
});
|
|
||||||
|
|
||||||
api.post("/login", loginData)
|
|
||||||
.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>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
<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>
|
|
||||||
|
|
||||||
</IonContent>
|
|
||||||
</IonPage>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Page;
|
|
||||||
Reference in New Issue
Block a user