Skip to content

Commit

Permalink
Design sistem meuben: login signup
Browse files Browse the repository at this point in the history
  • Loading branch information
TI JONNY committed Mar 28, 2024
1 parent 0583c0a commit 9706926
Show file tree
Hide file tree
Showing 15 changed files with 341 additions and 131 deletions.
25 changes: 25 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
"cross-env": "^7.0.3",
"file-saver": "^2.0.5",
"formik": "^2.4.5",
"framer-motion": "^11.0.23",
"html2canvas": "^1.4.1",
"jspdf": "^2.5.1",
"jspdf-autotable": "^3.8.2",
Expand Down
Binary file modified public/favicon.ico
View file
Binary file not shown.
2 changes: 1 addition & 1 deletion public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
Learn how to configure a non-root public URL by running `npm run build`.
-->
<link rel="stylesheet" href="https://unpkg.com/primeflex@latest/primeflex.css">
<title>React App</title>
<title>MeuBen</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
Expand Down
29 changes: 29 additions & 0 deletions src/Assets/images/animation.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions src/Context/Register/state.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,11 @@ import { useEffect, useState } from "react";
import { useFetchRequestProjectList } from "../../Services/PreRegistration/query";
import { Project, Projects, Registration } from "./type";
import { ControllerPreRegistration } from "../../Services/PreRegistration/controller";
import { useNavigate } from "react-router-dom";

export const RegisterState = () => {
const padding = "16px";
const history = useNavigate()
const [step, setStep] = useState(0);
const [isOverAge, setIsOverAge] = useState<boolean | undefined>();
const [project, setproject] = useState<Projects | undefined>()
Expand All @@ -27,6 +29,9 @@ export const RegisterState = () => {
if (step !== 0) {
setStep(step - 1);
}
if (step === 0) {
history("/register")
}
}

useEffect(() => {
Expand Down
259 changes: 138 additions & 121 deletions src/Pages/Login/Login.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ import PasswordInput from "../../Components/TextPassword";
import LoginProvider, { LoginContext } from "../../Context/Login/context";
import { LoginContextText } from "../../Context/Login/types";
import { setYear } from "../../Services/localstorage";
import { Column, Padding, Row } from "../../Styles/styles";
import { ContainerLogin, TopColors } from "./styles";
import { Padding, Row } from "../../Styles/styles";
import { ContainerLogin } from "./styles";

const Login = () => {
return (
Expand Down Expand Up @@ -42,141 +42,158 @@ const LoginPage = () => {

return (
<ContainerLogin>
<Column
style={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
height: "100%",
width: "100%",
position: "relative",
}}
>
<div className="grid h-full">


<div
style={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
height: "100%",
width: "100%",
position: "relative",
}}
// style={{
// display: "flex",
// flexDirection: "column",
// justifyContent: "center",
// alignItems: "center",
// height: "100%",
// width: "100%",
// position: "relative",
// }}
className="col-12 lg:col-5"
>
<div className="col-11 md:col-4">
{/* <div className={classes.marginMobile20} /> */}
<div>
<Row id="center">
<img src={TagImage} alt=""></img>
</Row>
</div>
{/* <div className={classes.marginMobile} /> */}
<div className="p-4" />
<Row style={{justifyContent: "center"}}>

<Formik
initialValues={props.initialValue}
onSubmit={(values) => {
props.Login(values);
}}
validationSchema={LoginSchema}
validateOnChange={false}
>
{({ values, errors, handleChange, touched }) => {
return (
<Form>
<div>
<div className="resetPassword textCenter">
<div className="buttonLogin">
Faça sua matricula
<Link className="link" to="/register">
clique aqui
</Link>
</div>
</div>
</Row>
<div
style={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
height: "100%",
width: "100%",
position: "relative",
}}
>
<div className="col-11 md:col-9">
{/* <div className={classes.marginMobile20} /> */}
<Row style={{ justifyContent: "center" }}>
<img src={TagImage} alt=""></img>
</Row>
{/* <div className={classes.marginMobile} /> */}
<div className="p-4" />
<Formik
initialValues={props.initialValue}
onSubmit={(values) => {
props.Login(values);
}}
validationSchema={LoginSchema}
validateOnChange={false}
>
{({ values, errors, handleChange, touched }) => {
return (
<Form>
<div>
<label>Usuário</label>
<Padding />
<TextInput
name="username"
value={values.username}
onChange={handleChange}
placeholder="Usuário"
/>
<Padding />
{errors.username && touched.username ? (
<div style={{ color: "red", marginTop: "8px" }}>
{errors.username}
</div>
) : null}
<div>
<label>Usuário</label>
<Padding />
<TextInput
name="username"
value={values.username}
onChange={handleChange}
placeholder="Usuário"
/>
<Padding />
{errors.username && touched.username ? (
<div style={{ color: "red", marginTop: "8px" }}>
{errors.username}
</div>
) : null}
</div>
</div>
</div>
<div className="p-2" />
<div>
<div className="p-2" />
<div>
<label>Senha</label>
<Padding />
<PasswordInput
name="password"
placeholder="Senha"
onChange={handleChange}
value={values.password}
/>
<Padding />
{errors.password && touched.password ? (
<div style={{ color: "red", marginTop: "8px" }}>
{errors.password}
</div>
) : null}
<div>
<label>Senha</label>
<Padding />
<PasswordInput
name="password"
placeholder="Senha"
onChange={handleChange}
value={values.password}
/>
<Padding />
{errors.password && touched.password ? (
<div style={{ color: "red", marginTop: "8px" }}>
{errors.password}
</div>
) : null}
</div>
</div>
</div>
<Padding />
<div>
<Padding />
<div>
<label>Ano</label>
<Padding />
<DropdownComponent
options={years}
placerholder="Ano"
onChange={(e) => {
setYearState(e.target.value);
setYear(e.target.value.toString());
}}
optionsLabel=""
value={year}
/>
<div>
<label>Ano</label>
<Padding />
<DropdownComponent
options={years}
placerholder="Ano"
onChange={(e) => {
setYearState(e.target.value);
setYear(e.target.value.toString());
}}
optionsLabel=""
value={year}
/>
</div>
</div>
</div>
<Padding />
<Padding />

{props.error ? (
<div>
{props.error ? (
<div>
{!props.error ? "Usuário ou senha inválido" : ""}
<div>
{!props.error ? "Usuário ou senha inválido" : ""}
</div>
</div>
</div>
) : null}
<div className="p-2" />
<div>
) : null}
<div className="p-2" />
<div>
<Button
className={"t-button-primary"}
type="submit"
label="Entrar"
/>
</div>
</div>
<div className="p-2" />
<div className="flex row justify-content-center ">
<div
className="flex row gap-2"
id="resetPassword textCenter"
>
<Column id="center">Faça a sua matricula</Column>
<Link id="link" to="/register">
clique aqui
</Link>
<div>
<Button
className={"t-button-primary"}
type="submit"
label="Entrar"
/>
</div>
</div>
</div>
</Form>
);
}}
</Formik>
<div className="p-2" />
</Form>
);
}}
</Formik>
</div>
</div>
</div>
<div className="col-0 lg:col-7 w-auto"
>
<div className="imgBack">
<div className="divBlue" />
<div className="formSignUp">
<div className="TextLarge">
Maximizando Eficiência <br />e Transparência
</div>
<Padding padding="8px" />
<Row id="center" style={{ width: "65%" }}>
<p className="pLogin">Solução completa para otimizar a distribuição de benefícios, promover a transparência e fortalecer a confiança das comunidades nos programas do THP.</p>
</Row>
</div>
</div>
</div>
</Column>
</div>
</ContainerLogin>
);
};
Expand Down
Loading

0 comments on commit 9706926

Please sign in to comment.