Showing
1 changed file
with
79 additions
and
0 deletions
frontend/src/components/login/LoginForm.js
0 → 100644
1 | +import React from 'react'; | ||
2 | +import { TextInput, Button, Container, CONTAINER_SIZES } from '@mantine/core'; | ||
3 | +import { useForm } from '@mantine/hooks'; | ||
4 | +import styled from 'styled-components'; | ||
5 | +import { Link } from 'react-router-dom'; | ||
6 | +import palette from '../../lib/styles/palette'; | ||
7 | + | ||
8 | +const LoginFormBlock = styled.div` | ||
9 | + display: flex; | ||
10 | + height: 100%; | ||
11 | + align-items: center; | ||
12 | +`; | ||
13 | +const ButtonBlock = styled.div` | ||
14 | + display: flex; | ||
15 | + justify-content: space-between; | ||
16 | + margin-top: 2rem; | ||
17 | +`; | ||
18 | +const FormBlock = styled.div``; | ||
19 | +const LoginForm = () => { | ||
20 | + const { onSubmit, errors, values, setFieldValue } = useForm({ | ||
21 | + initialValues: { | ||
22 | + email: '', | ||
23 | + password: '', | ||
24 | + termOfService: false, | ||
25 | + }, | ||
26 | + validationRules: { | ||
27 | + email: value => /^[^\s@]+@[^\s@]+$/.test(value), | ||
28 | + }, | ||
29 | + }); | ||
30 | + return ( | ||
31 | + <LoginFormBlock> | ||
32 | + <Container | ||
33 | + size={CONTAINER_SIZES.xs} | ||
34 | + padding="xs" | ||
35 | + style={{ | ||
36 | + display: 'block', | ||
37 | + width: CONTAINER_SIZES.xs, | ||
38 | + padding: '5rem', | ||
39 | + border: `1px ${palette.gray3} solid`, | ||
40 | + borderRadius: '5px', | ||
41 | + }} | ||
42 | + > | ||
43 | + <h2>Logo</h2> | ||
44 | + <FormBlock> | ||
45 | + <TextInput | ||
46 | + required | ||
47 | + label="Email" | ||
48 | + placeholder="example@example.com" | ||
49 | + error={errors.email && 'Please specify valid email'} | ||
50 | + value={values.email} | ||
51 | + onChange={event => | ||
52 | + setFieldValue('email', event.currentTarget.value) | ||
53 | + } | ||
54 | + /> | ||
55 | + <TextInput | ||
56 | + required | ||
57 | + label="Password" | ||
58 | + placeholder="Your password" | ||
59 | + value={values.password} | ||
60 | + type="password" | ||
61 | + style={{ marginTop: '2rem' }} | ||
62 | + onChange={event => | ||
63 | + setFieldValue('password', event.currentTarget.value) | ||
64 | + } | ||
65 | + /> | ||
66 | + <ButtonBlock> | ||
67 | + <Link to="/"> | ||
68 | + <Button variant="outline">홈으로</Button> | ||
69 | + </Link> | ||
70 | + <Button type="button" onClick={onSubmit(v => console.log(v))}> | ||
71 | + 로그인 | ||
72 | + </Button> | ||
73 | + </ButtonBlock> | ||
74 | + </FormBlock> | ||
75 | + </Container> | ||
76 | + </LoginFormBlock> | ||
77 | + ); | ||
78 | +}; | ||
79 | +export default LoginForm; |
-
Please register or login to post a comment