[e6c2521] | 1 | import React from "react";
|
---|
| 2 | import { useState } from "react";
|
---|
| 3 | import { Container, Row, Col, Form, Button, Modal } from "react-bootstrap";
|
---|
| 4 | import { AiOutlineSave, AiOutlineKey } from "react-icons/ai";
|
---|
| 5 | import ChangePasswordForm from "../Forms/ChangePasswordForm";
|
---|
| 6 |
|
---|
| 7 | const DataForm = (props) => {
|
---|
| 8 |
|
---|
| 9 |
|
---|
| 10 | const [show, setShow] = useState(false);
|
---|
| 11 |
|
---|
| 12 | const handleClose = () => setShow(false);
|
---|
[0f5aa27] | 13 | const handleShow = (e) => {
|
---|
[e6c2521] | 14 | e.preventDefault();
|
---|
| 15 | setShow(true);
|
---|
| 16 | }
|
---|
| 17 |
|
---|
| 18 | return (
|
---|
| 19 | <>
|
---|
| 20 | <Container
|
---|
| 21 | className="w-75 rounded-5 m-5 my-auto mx-auto py-5 px-5"
|
---|
| 22 | style={{ backgroundColor: "#159895", color: "white" }}
|
---|
| 23 | >
|
---|
| 24 | <h2 className="mb-5" style={{ color: "white" }}>
|
---|
| 25 | Податоци за корисникот
|
---|
| 26 | </h2>
|
---|
| 27 | <Form>
|
---|
| 28 | <Row className="mb-3">
|
---|
| 29 | <Form.Group as={Col} controlId="name">
|
---|
| 30 | <Form.Label>Име</Form.Label>
|
---|
[0f5aa27] | 31 | <Form.Control type="text" value={props.data["name"]}
|
---|
| 32 | name={"name"}/>
|
---|
[e6c2521] | 33 | </Form.Group>
|
---|
| 34 |
|
---|
| 35 | <Form.Group as={Col} controlId="surname">
|
---|
| 36 | <Form.Label>Презиме</Form.Label>
|
---|
| 37 | <Form.Control
|
---|
| 38 | type="text"
|
---|
| 39 | placeholder=""
|
---|
| 40 | value={props.data["surname"]}
|
---|
[0f5aa27] | 41 | name={"surname"}
|
---|
[e6c2521] | 42 | />
|
---|
| 43 | </Form.Group>
|
---|
| 44 | </Row>
|
---|
| 45 |
|
---|
| 46 | <Row className="mb-3">
|
---|
| 47 | <Form.Group as={Col} controlId="name">
|
---|
| 48 | <Form.Label>Датум на раѓање</Form.Label>
|
---|
[0f5aa27] | 49 | <Form.Control type="date" value={props.data["dateOfBirth"]}
|
---|
| 50 | name={"dateOfBirth"}/>
|
---|
[e6c2521] | 51 | </Form.Group>
|
---|
| 52 |
|
---|
| 53 | <Form.Group as={Col} controlId="surname">
|
---|
| 54 | <Form.Label>Држава</Form.Label>
|
---|
| 55 | <Form.Control
|
---|
| 56 | type="text"
|
---|
| 57 | placeholder=""
|
---|
| 58 | value={props.data["country"]}
|
---|
[0f5aa27] | 59 | name={"country"}
|
---|
[e6c2521] | 60 | />
|
---|
| 61 | </Form.Group>
|
---|
| 62 | </Row>
|
---|
| 63 |
|
---|
| 64 | <Form.Group className="mb-3" controlId="address">
|
---|
| 65 | <Form.Label>Адреса</Form.Label>
|
---|
[0f5aa27] | 66 | <Form.Control type="text" value={props.data["address"]}
|
---|
| 67 | name={"address"}/>
|
---|
[e6c2521] | 68 | </Form.Group>
|
---|
| 69 |
|
---|
| 70 | <Row className="mb-3">
|
---|
| 71 | <Form.Group as={Col} controlId="city">
|
---|
| 72 | <Form.Label>Град</Form.Label>
|
---|
[0f5aa27] | 73 | <Form.Control type="text" value={props.data["city"]}
|
---|
| 74 | name={"city"}/>
|
---|
[e6c2521] | 75 | </Form.Group>
|
---|
| 76 |
|
---|
| 77 | <Form.Group as={Col} controlId="zip">
|
---|
| 78 | <Form.Label>Поштенски број</Form.Label>
|
---|
| 79 | <Form.Control
|
---|
| 80 | type="text"
|
---|
| 81 | placeholder=""
|
---|
| 82 | value={props.data["zip"]}
|
---|
[0f5aa27] | 83 | name={"zip"}
|
---|
[e6c2521] | 84 | />
|
---|
| 85 | </Form.Group>
|
---|
| 86 | </Row>
|
---|
| 87 |
|
---|
| 88 | <Row className="mb-5">
|
---|
| 89 | <Form.Group as={Col} controlId="email">
|
---|
| 90 | <Form.Label>Email</Form.Label>
|
---|
[0f5aa27] | 91 | <Form.Control type="email" value={props.data["email"]}
|
---|
| 92 | name={"email"}/>
|
---|
[e6c2521] | 93 | </Form.Group>
|
---|
| 94 |
|
---|
| 95 | <Form.Group as={Col} controlId="mobile">
|
---|
| 96 | <Form.Label>Телефонски број</Form.Label>
|
---|
| 97 | <Form.Control
|
---|
| 98 | type="text"
|
---|
| 99 | placeholder=""
|
---|
| 100 | value={props.data["mobile"]}
|
---|
[0f5aa27] | 101 | name={"mobile"}
|
---|
[e6c2521] | 102 | />
|
---|
| 103 | </Form.Group>
|
---|
| 104 | </Row>
|
---|
| 105 |
|
---|
| 106 | <Row>
|
---|
| 107 | <Col style={{textAlign: "right"}}>
|
---|
| 108 | <Button
|
---|
| 109 | type="submit"
|
---|
| 110 | style={{
|
---|
| 111 | backgroundColor: "#159895",
|
---|
| 112 | border: "2px solid white",
|
---|
| 113 | }}
|
---|
| 114 | size="md"
|
---|
| 115 | >
|
---|
| 116 | <span className="ikona my-1" color="white">
|
---|
| 117 | <AiOutlineSave style={{ color: "white" }} />
|
---|
| 118 | </span>
|
---|
| 119 | <span className="ikona mx-3">Зачувај промени</span>
|
---|
| 120 | </Button>
|
---|
| 121 | </Col>
|
---|
| 122 | <Col style={{textAlign: "left"}}>
|
---|
| 123 | <Button
|
---|
| 124 | type="submit"
|
---|
| 125 | style={{
|
---|
| 126 | backgroundColor: "#159895",
|
---|
| 127 | border: "2px solid white",
|
---|
| 128 | }}
|
---|
| 129 | size="md"
|
---|
| 130 | onClick={handleShow}
|
---|
| 131 | >
|
---|
| 132 | <span className="ikona my-1" color="white">
|
---|
| 133 | <AiOutlineKey style={{ color: "white" }} />
|
---|
| 134 | </span>
|
---|
| 135 | <span className="ikona mx-3">Промени лозинка</span>
|
---|
| 136 | </Button>
|
---|
| 137 | </Col>
|
---|
| 138 | </Row>
|
---|
| 139 | </Form>
|
---|
| 140 | </Container>
|
---|
| 141 |
|
---|
| 142 | <Modal show={show} onHide={handleClose}>
|
---|
| 143 | <Modal.Header closeButton>
|
---|
| 144 | <Modal.Title style={{color: "#159895"}}>Промена на лозинка</Modal.Title>
|
---|
| 145 | </Modal.Header>
|
---|
| 146 | <Modal.Body><ChangePasswordForm></ChangePasswordForm></Modal.Body>
|
---|
| 147 | </Modal>
|
---|
| 148 | </>
|
---|
| 149 | );
|
---|
| 150 | };
|
---|
| 151 |
|
---|
| 152 | export default DataForm;
|
---|