LoginForm.js
2.13 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
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;