Toggle navigation
Toggle navigation
This project
Loading...
Sign in
2021-1-capstone-design1
/
GCL_Project1
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
이승윤
2021-05-25 21:24:47 +0900
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
f4a19b121c153268405bc5e6ddf0bbba145dc794
f4a19b12
1 parent
dec88c32
style: LoginForm 스타일 변경-mantine 적용
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
79 additions
and
0 deletions
frontend/src/components/login/LoginForm.js
frontend/src/components/login/LoginForm.js
0 → 100644
View file @
f4a19b1
import
React
from
'react'
;
import
{
TextInput
,
Button
,
Container
,
CONTAINER_SIZES
}
from
'@mantine/core'
;
import
{
useForm
}
from
'@mantine/hooks'
;
import
styled
from
'styled-components'
;
import
{
Link
}
from
'react-router-dom'
;
import
palette
from
'../../lib/styles/palette'
;
const
LoginFormBlock
=
styled
.
div
`
display: flex;
height: 100%;
align-items: center;
`
;
const
ButtonBlock
=
styled
.
div
`
display: flex;
justify-content: space-between;
margin-top: 2rem;
`
;
const
FormBlock
=
styled
.
div
``
;
const
LoginForm
=
()
=>
{
const
{
onSubmit
,
errors
,
values
,
setFieldValue
}
=
useForm
({
initialValues
:
{
email
:
''
,
password
:
''
,
termOfService
:
false
,
},
validationRules
:
{
email
:
value
=>
/^
[^\s
@
]
+@
[^\s
@
]
+$/
.
test
(
value
),
},
});
return
(
<
LoginFormBlock
>
<
Container
size
=
{
CONTAINER_SIZES
.
xs
}
padding
=
"xs"
style
=
{{
display
:
'block'
,
width
:
CONTAINER_SIZES
.
xs
,
padding
:
'5rem'
,
border
:
`1px
${
palette
.
gray3
}
solid`
,
borderRadius
:
'5px'
,
}}
>
<
h2
>
Logo
<
/h2
>
<
FormBlock
>
<
TextInput
required
label
=
"Email"
placeholder
=
"example@example.com"
error
=
{
errors
.
email
&&
'Please specify valid email'
}
value
=
{
values
.
email
}
onChange
=
{
event
=>
setFieldValue
(
'email'
,
event
.
currentTarget
.
value
)
}
/
>
<
TextInput
required
label
=
"Password"
placeholder
=
"Your password"
value
=
{
values
.
password
}
type
=
"password"
style
=
{{
marginTop
:
'2rem'
}}
onChange
=
{
event
=>
setFieldValue
(
'password'
,
event
.
currentTarget
.
value
)
}
/
>
<
ButtonBlock
>
<
Link
to
=
"/"
>
<
Button
variant
=
"outline"
>
홈으로
<
/Button
>
<
/Link
>
<
Button
type
=
"button"
onClick
=
{
onSubmit
(
v
=>
console
.
log
(
v
))}
>
로그인
<
/Button
>
<
/ButtonBlock
>
<
/FormBlock
>
<
/Container
>
<
/LoginFormBlock
>
);
};
export
default
LoginForm
;
Please
register
or
login
to post a comment