[e6c2521] | 1 | import React from "react";
|
---|
| 2 | import { useState } from "react";
|
---|
| 3 | import { Container, Form, Button } from "react-bootstrap";
|
---|
| 4 | import { AiFillLock } from "react-icons/ai"
|
---|
| 5 |
|
---|
| 6 | const ChangePasswordForm = () => {
|
---|
| 7 |
|
---|
| 8 | const [hidePassword, setHidePassword] = useState(true);
|
---|
| 9 | const type = hidePassword ? "password" : "text";
|
---|
| 10 | const toggleHide = () => {
|
---|
| 11 | setHidePassword(!hidePassword)
|
---|
| 12 | }
|
---|
| 13 |
|
---|
| 14 |
|
---|
| 15 | return (
|
---|
| 16 | <>
|
---|
| 17 | <Container
|
---|
| 18 | className="rounded-5 m-5 my-auto mx-auto py-2 px-5"
|
---|
| 19 | style={{ backgroundColor: "#ffffff" }}
|
---|
| 20 | >
|
---|
| 21 | <Form>
|
---|
| 22 | <Form.Group className="mb-3" controlId="currentPassword">
|
---|
| 23 | <Form.Label>Постоечка лозинка</Form.Label>
|
---|
| 24 | <Form.Control type="password" placeholder="Внесете ја постоечката лозинка..." />
|
---|
| 25 | </Form.Group>
|
---|
| 26 |
|
---|
| 27 | <Form.Group className="mb-3" controlId="newPasswrod">
|
---|
| 28 | <Form.Label>Нова лозинка</Form.Label>
|
---|
| 29 | <Form.Control type={type} placeholder="Внесете ја новата лозинка..." />
|
---|
| 30 | </Form.Group>
|
---|
| 31 |
|
---|
| 32 | <Form.Group className="mb-3" controlId="newPasswrod">
|
---|
| 33 | <Form.Label>Повторена нова лозинка</Form.Label>
|
---|
| 34 | <Form.Control type={type} placeholder="Внесете ја новата лозинка повторно..." />
|
---|
| 35 | </Form.Group>
|
---|
| 36 |
|
---|
| 37 | <Form.Group className="mb-3" controlId="formBasicCheckbox">
|
---|
| 38 | <Form.Check type="checkbox" label="Прикажи лозинки" onChange={toggleHide} />
|
---|
| 39 | </Form.Group>
|
---|
| 40 | <Form.Group className="my-1">
|
---|
| 41 | <Button
|
---|
| 42 | type="submit"
|
---|
| 43 | style={{ backgroundColor: "#159895" }}
|
---|
| 44 | size="md"
|
---|
| 45 | >
|
---|
| 46 | <span className="ikona my-1">
|
---|
| 47 | <AiFillLock />
|
---|
| 48 | </span>
|
---|
| 49 | <span className="ikona mx-3">Зачувај промена</span>
|
---|
| 50 | </Button>
|
---|
| 51 | </Form.Group>
|
---|
| 52 | </Form>
|
---|
| 53 | </Container>
|
---|
| 54 | </>
|
---|
| 55 | );
|
---|
| 56 | };
|
---|
| 57 |
|
---|
| 58 | export default ChangePasswordForm;
|
---|