Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
F
Frontend-MECRED
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Wiki
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Releases
Package registry
Model registry
Operate
Environments
Terraform modules
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
MECRED
Frontend-MECRED
Commits
63ac7eb8
Commit
63ac7eb8
authored
1 year ago
by
lumb19
Browse files
Options
Downloads
Patches
Plain Diff
Issue
#23
: ADD error verification
parent
739eefa5
No related branches found
No related tags found
1 merge request
!17
Issue #23: ADD error verification
Changes
2
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
src/app/login/components/LoginForm.js
+83
-58
83 additions, 58 deletions
src/app/login/components/LoginForm.js
src/app/login/components/SignupModal.js
+94
-0
94 additions, 0 deletions
src/app/login/components/SignupModal.js
with
177 additions
and
58 deletions
src/app/login/components/LoginForm.js
+
83
−
58
View file @
63ac7eb8
"
use client
"
;
import
Image
from
"
next/image
"
;
import
{
Button
,
Paper
,
Divider
,
SvgIcon
,
TextField
,
Alert
}
from
"
@mui/material
"
;
import
{
Button
,
Paper
,
Divider
,
SvgIcon
,
TextField
,
Alert
,
}
from
"
@mui/material
"
;
import
theme
from
"
@/app/theme
"
;
import
{
ThemeProvider
}
from
"
@emotion/react
"
;
import
{
useState
}
from
"
react
"
;
import
SignupModal
from
"
./SignupModal
"
;
export
default
function
LoginForm
({
handleEmailChange
,
handlePasswordChange
,
handleSubmit
,
errorMessage
errorMessage
,
})
{
const
[
openModal
,
setOpenModal
]
=
useState
(
false
);
const
handleOpenModal
=
()
=>
setOpenModal
(
true
);
const
handleCloseModal
=
()
=>
setOpenModal
(
false
);
return
(
<
ThemeProvider
theme
=
{
theme
}
>
<
form
onSubmit
=
{
handleSubmit
}
className
=
"
flex flex-col items-center justify-center
"
>
<
div
className
=
"
flex flex-col items-center justify-center
"
>
<
form
onSubmit
=
{
handleSubmit
}
>
<
Paper
elevation
=
{
0
}
className
=
"
w-96 flex flex-col items-center p-5 rounded-xl
"
...
...
@@ -27,7 +39,9 @@ export default function LoginForm({
height
=
{
24
}
className
=
"
m-5
"
/>
{
errorMessage
?
<
Alert
severity
=
"
error
"
>
{
errorMessage
}
<
/Alert> : null
}
{
errorMessage
?
(
<
Alert
severity
=
"
error
"
>
{
errorMessage
}
<
/Alert
>
)
:
null
}
<
TextField
fullWidth
label
=
"
E-mail
"
...
...
@@ -46,7 +60,7 @@ export default function LoginForm({
<
Button
fullWidth
disableElevation
className
=
"
bg-secondary text-white hover:bg-secondary
"
className
=
"
bg-secondary text-white hover:bg-secondary
-hover
"
type
=
"
submit
"
>
Entrar
...
...
@@ -64,13 +78,24 @@ export default function LoginForm({
<
span
>
Entrar
com
o
Google
<
/span
>
<
/Button
>
<
p
className
=
"
mt-5 text-xs text-gray-500
"
>
Esqueceu
a
senha
?
<
a
className
=
"
text-secondary
"
>
Clique
aqui
.
<
/a
>
Esqueceu
a
senha
?{
"
"
}
<
a
className
=
"
text-secondary cursor-pointer hover:font-bold
"
>
Clique
aqui
.
<
/a
>
<
/p
>
<
/Paper
>
<
/form
>
<
p
className
=
"
mt-5 text-xs text-gray-400
"
>
Não
tem
uma
conta
?
<
a
className
=
"
text-secondary
"
>
Cadastre
-
se
.
<
/a
>
Não
tem
uma
conta
?{
"
"
}
<
a
onClick
=
{
handleOpenModal
}
className
=
"
text-secondary hover:font-bold cursor-pointer
"
>
Cadastre
-
se
.
<
/a
>
<
/p
>
<
/form
>
<
SignupModal
open
=
{
openModal
}
handleClose
=
{
handleCloseModal
}
/
>
<
/div
>
<
/ThemeProvider
>
);
}
This diff is collapsed.
Click to expand it.
src/app/login/components/SignupModal.js
0 → 100644
+
94
−
0
View file @
63ac7eb8
import
*
as
React
from
"
react
"
;
import
Box
from
"
@mui/material/Box
"
;
import
Button
from
"
@mui/material/Button
"
;
import
Modal
from
"
@mui/material/Modal
"
;
import
{
TextField
,
Divider
,
Alert
}
from
"
@mui/material
"
;
import
{
useState
}
from
"
react
"
;
export
default
function
SignupModal
({
open
,
handleClose
})
{
const
[
userName
,
setUserName
]
=
useState
(
""
);
const
[
userEmail
,
setUserEmail
]
=
useState
(
""
);
const
[
userPassword
,
setUserPassword
]
=
useState
(
""
);
const
[
userPasswordConfirmation
,
setUserPasswordConfirmation
]
=
useState
(
""
);
const
[
errorMessage
,
setErrorMessage
]
=
useState
(
""
);
const
handleSubmit
=
(
event
)
=>
{
event
.
preventDefault
();
if
(
!
userName
||
!
userEmail
||
!
userPassword
||
!
userPasswordConfirmation
)
setErrorMessage
(
"
Todos os campos marcados com * são obrigatórios!
"
)
else
if
(
userPassword
!=
userPasswordConfirmation
)
setErrorMessage
(
"
As senhas devem ser iguais!
"
);
};
return
(
<
Modal
className
=
"
grid h-screen place-items-center m-5
"
open
=
{
open
}
onClose
=
{
handleClose
}
>
<
Box
className
=
"
bg-white sm:w-1/2 xl:w-1/4 p-5 flex flex-col items-center border-none rounded-xl
"
>
<
h1
className
=
"
text-secondary text-2xl font-bold m-5
"
>
Cadastre
-
se
<
/h1
>
<
form
onSubmit
=
{
handleSubmit
}
>
{
errorMessage
?
<
Alert
severity
=
"
error
"
>
{
errorMessage
}
<
/Alert> : null
}
<
TextField
fullWidth
onChange
=
{(
e
)
=>
setUserName
(
e
.
target
.
value
)}
label
=
"
Nome Completo *
"
className
=
"
my-5
"
value
=
{
userName
}
error
=
{
!
userName
&&
errorMessage
}
/
>
<
TextField
fullWidth
onChange
=
{(
e
)
=>
setUserEmail
(
e
.
target
.
value
)}
label
=
"
E-mail *
"
type
=
"
email
"
className
=
"
mb-5
"
value
=
{
userEmail
}
error
=
{
!
userEmail
&&
errorMessage
}
/
>
<
TextField
fullWidth
onChange
=
{(
e
)
=>
setUserPassword
(
e
.
target
.
value
)}
type
=
"
password
"
label
=
"
Senha *
"
className
=
"
mb-5
"
value
=
{
userPassword
}
error
=
{
!
userPassword
&&
errorMessage
}
/
>
<
TextField
fullWidth
onChange
=
{(
e
)
=>
setUserPasswordConfirmation
(
e
.
target
.
value
)}
type
=
"
password
"
label
=
"
Confirmar senha *
"
className
=
"
mb-5
"
value
=
{
userPasswordConfirmation
}
error
=
{
userPasswordConfirmation
!=
userPassword
&&
userPasswordConfirmation
!=
""
}
helperText
=
{
userPasswordConfirmation
&&
userPasswordConfirmation
!=
userPassword
&&
<
p
>
As
senhas
devem
ser
iguais
!<
/p>
}
/>
<
Button
fullWidth
disableElevation
className
=
"
bg-secondary text-white hover:bg-secondary-hover
"
type
=
"
submit
"
>
Enviar
<
/Button
>
<
Divider
flexItem
className
=
"
mt-2
"
>
<
p
className
=
"
text-gray-400 text-md
"
>
OU
<
/p
>
<
/Divider
>
<
Button
fullWidth
disableElevation
variant
=
"
outlined
"
className
=
"
mt-2 border-main text-gray-500 normal-case flex gap-2
"
>
<
img
className
=
"
w-6 h-6
"
src
=
"
/google.svg
"
alt
=
"
google logo
"
/>
<
span
>
Cadastrar
-
se
com
o
Google
<
/span
>
<
/Button
>
<
/form
>
<
/Box
>
<
/Modal
>
);
}
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment