87 lines
4.8 KiB
JavaScript
87 lines
4.8 KiB
JavaScript
import { Container, Row, Col, Card, Form, Button } from 'react-bootstrap';
|
||
import { useState } from 'react';
|
||
|
||
const PersonalAccountRegister = () => {
|
||
const [validated, setValidated] = useState(false);
|
||
|
||
const handleSubmit = (event) => {
|
||
const form = event.currentTarget;
|
||
if (form.checkValidity() === false) {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
}
|
||
|
||
setValidated(true);
|
||
};
|
||
|
||
return (
|
||
<Container className="h-100">
|
||
<Row className="justify-content-center align-items-center h-100">
|
||
<Col xs={12} md={9} lg={7} xl={6}>
|
||
<Card style={{ borderRadius: '15px', borderColor: 'gold' }}>
|
||
<Card.Body className="p-5">
|
||
<h2 className="text-uppercase text-center mb-5">Создать учетную запись</h2>
|
||
|
||
<Form noValidate validated={validated} onSubmit={handleSubmit}>
|
||
<Form.Group className="mb-4" controlId="name">
|
||
<Form.Control type="text" required />
|
||
<Form.Control.Feedback>Имя заполнено</Form.Control.Feedback>
|
||
<Form.Control.Feedback type="invalid">Имя не заполнено</Form.Control.Feedback>
|
||
<Form.Label htmlFor="name">Ваше имя</Form.Label>
|
||
</Form.Group>
|
||
|
||
<Form.Group className="mb-4">
|
||
<Form.Control type="email" id="form3Example3cg" required />
|
||
<Form.Control.Feedback>Email заполнен</Form.Control.Feedback>
|
||
<Form.Control.Feedback type="invalid">Email не заполнен</Form.Control.Feedback>
|
||
<Form.Label htmlFor="form3Example3cg">Ваш адрес электронной почты</Form.Label>
|
||
</Form.Group>
|
||
|
||
<Form.Group className="mb-4">
|
||
<Form.Control type="password" id="form3Example4cg" size="lg" required />
|
||
<Form.Control.Feedback>Пароль заполнен</Form.Control.Feedback>
|
||
<Form.Control.Feedback type="invalid">Пароль не заполнен</Form.Control.Feedback>
|
||
<Form.Label htmlFor="form3Example4cg">Пароль</Form.Label>
|
||
</Form.Group>
|
||
|
||
<Form.Group controlId="formRepeatPassword" className="mb-4">
|
||
<Form.Control type="password"required/>
|
||
<Form.Control.Feedback>Пароль заполнен</Form.Control.Feedback>
|
||
<Form.Control.Feedback type="invalid">Пароль не заполнен</Form.Control.Feedback>
|
||
<Form.Label>Повторите свой пароль</Form.Label>
|
||
</Form.Group>
|
||
|
||
<Form.Group controlId="formCheckbox" className="d-flex justify-content-center mb-5">
|
||
<Form.Check type="checkbox" label={
|
||
<span>
|
||
Я согласен со всеми утверждениями в{' '}
|
||
<a href="#!" className="text-body">
|
||
<u>Условиях обслуживания</u>
|
||
</a>
|
||
</span>
|
||
} />
|
||
</Form.Group>
|
||
|
||
<div className="d-flex justify-content-center">
|
||
<Button variant="success" type="button" className="btn-block btn-warning text-body mb-0" href="PersonalAccount">
|
||
Регистрация
|
||
</Button>
|
||
</div>
|
||
|
||
<p className="text-center text-muted mb-0">
|
||
У вас уже есть учетная запись?{' '}
|
||
<a href="personalAccountLogin" className="fw-bold text-body">
|
||
<u>Войдите здесь</u>
|
||
</a>
|
||
</p>
|
||
</Form>
|
||
</Card.Body>
|
||
</Card>
|
||
</Col>
|
||
</Row>
|
||
</Container>
|
||
);
|
||
};
|
||
|
||
export default PersonalAccountRegister;
|