123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113 |
- import React, { useState } from 'react'
- import { Button, Input, Checkbox, Form } from 'antd'
- import { Typography, Col, Row } from 'antd'
- import { LockOutlined, UserOutlined } from '@ant-design/icons'
- import { validation } from '../../helpers'
- const { Title } = Typography
- const InitialForm = ({ onLogin, children }) => {
- const [login, setLogin] = useState('')
- const [password, setPassword] = useState('')
- const [checked, setChecked] = useState(false)
- const input = () => {
- onLogin(login, password) && setPassword('') && setLogin('')
- }
- return (
- <>
- <Form
- size="medium"
- name="basic"
- className="LoginForm-Form"
- autoComplete="off"
- >
- <Title level={2}> {children} </Title>
- <Form.Item
- name="login"
- size="large"
- rules={[
- {
- required: true,
- message: 'Please input login!',
- },
- ]}
- style={{ marginBottom: '5px', }}
- // wrapperCol={{ offset: 3, span: 17 }}
- >
- <Input
- prefix={<UserOutlined className="site-form-item-icon" />}
- placeholder="Login"
- value={login}
- size="medium"
- onChange={(e) => setLogin(e.target.value)}
- />
- </Form.Item>
- <Form.Item
- style={{ margin: '0 auto' }}
- // wrapperCol={{ offset: 3, span: 17 }}
- >
- <p> * Login must be at least 5 characters </p>
- </Form.Item>
- <Form.Item
- name="password"
- size="large"
- rules={[
- {
- required: true,
- message: 'Please input your password!',
- },
- ]}
- style={{ padding: '0 auto', marginBottom: '5px' }}
- // wrapperCol={{ offset: 3, span: 17 }}
- >
- <Input
- prefix={<LockOutlined className="site-form-item-icon" />}
- placeholder="Password"
- size="medium"
- type={checked ? 'text' : 'password'}
- value={password}
- onChange={(e) => setPassword(e.target.value)}
- />
- </Form.Item>
- <Form.Item
- style={{ margin: '0 auto' }}
- // wrapperCol={{ offset: 3, span: 17 }}
- >
- <p>* Use a combination of 8 or more letters, numbers, and symbols</p>
- </Form.Item>
- <Form.Item
- name="checked"
- valuePropName="checked"
- // wrapperCol={{ offset: 0 }}
- style={{ margin: '10px 0px' }}
- >
- <Checkbox
- checked={checked}
- onChange={(e) => {
- setChecked(e.target.checked)
- }}
- size="medium"
- >
- See the password
- </Checkbox>
- </Form.Item>
- <Form.Item
- // wrapperCol={{ offset: 3, span: 17 }}
- >
- <Button
- size="large"
- type="primary"
- htmlType="submit"
- primary
- style={{ width: '100%' }}
- disabled={login.length < 5 || validation(password)}
- onClick={input}
- >
- {children}
- </Button>
- </Form.Item>
- </Form>
- </>
- )
- }
- export default InitialForm
|