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);
|
---|
13 | const handleShow = (e) => {
|
---|
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>
|
---|
31 | <Form.Control type="text" value={props.data["name"]} />
|
---|
32 | </Form.Group>
|
---|
33 |
|
---|
34 | <Form.Group as={Col} controlId="surname">
|
---|
35 | <Form.Label>Презиме</Form.Label>
|
---|
36 | <Form.Control
|
---|
37 | type="text"
|
---|
38 | placeholder=""
|
---|
39 | value={props.data["surname"]}
|
---|
40 | />
|
---|
41 | </Form.Group>
|
---|
42 | </Row>
|
---|
43 |
|
---|
44 | <Row className="mb-3">
|
---|
45 | <Form.Group as={Col} controlId="name">
|
---|
46 | <Form.Label>Датум на раѓање</Form.Label>
|
---|
47 | <Form.Control type="date" value={props.data["dateOfBirth"]} />
|
---|
48 | </Form.Group>
|
---|
49 |
|
---|
50 | <Form.Group as={Col} controlId="surname">
|
---|
51 | <Form.Label>Држава</Form.Label>
|
---|
52 | <Form.Control
|
---|
53 | type="text"
|
---|
54 | placeholder=""
|
---|
55 | value={props.data["country"]}
|
---|
56 | />
|
---|
57 | </Form.Group>
|
---|
58 | </Row>
|
---|
59 |
|
---|
60 | <Form.Group className="mb-3" controlId="address">
|
---|
61 | <Form.Label>Адреса</Form.Label>
|
---|
62 | <Form.Control type="text" value={props.data["address"]} />
|
---|
63 | </Form.Group>
|
---|
64 |
|
---|
65 | <Row className="mb-3">
|
---|
66 | <Form.Group as={Col} controlId="city">
|
---|
67 | <Form.Label>Град</Form.Label>
|
---|
68 | <Form.Control type="text" value={props.data["city"]} />
|
---|
69 | </Form.Group>
|
---|
70 |
|
---|
71 | <Form.Group as={Col} controlId="zip">
|
---|
72 | <Form.Label>Поштенски број</Form.Label>
|
---|
73 | <Form.Control
|
---|
74 | type="text"
|
---|
75 | placeholder=""
|
---|
76 | value={props.data["zip"]}
|
---|
77 | />
|
---|
78 | </Form.Group>
|
---|
79 | </Row>
|
---|
80 |
|
---|
81 | <Row className="mb-5">
|
---|
82 | <Form.Group as={Col} controlId="email">
|
---|
83 | <Form.Label>Email</Form.Label>
|
---|
84 | <Form.Control type="email" value={props.data["email"]} />
|
---|
85 | </Form.Group>
|
---|
86 |
|
---|
87 | <Form.Group as={Col} controlId="mobile">
|
---|
88 | <Form.Label>Телефонски број</Form.Label>
|
---|
89 | <Form.Control
|
---|
90 | type="text"
|
---|
91 | placeholder=""
|
---|
92 | value={props.data["mobile"]}
|
---|
93 | />
|
---|
94 | </Form.Group>
|
---|
95 | </Row>
|
---|
96 |
|
---|
97 | <Row>
|
---|
98 | <Col style={{textAlign: "right"}}>
|
---|
99 | <Button
|
---|
100 | type="submit"
|
---|
101 | style={{
|
---|
102 | backgroundColor: "#159895",
|
---|
103 | border: "2px solid white",
|
---|
104 | }}
|
---|
105 | size="md"
|
---|
106 | >
|
---|
107 | <span className="ikona my-1" color="white">
|
---|
108 | <AiOutlineSave style={{ color: "white" }} />
|
---|
109 | </span>
|
---|
110 | <span className="ikona mx-3">Зачувај промени</span>
|
---|
111 | </Button>
|
---|
112 | </Col>
|
---|
113 | <Col style={{textAlign: "left"}}>
|
---|
114 | <Button
|
---|
115 | type="submit"
|
---|
116 | style={{
|
---|
117 | backgroundColor: "#159895",
|
---|
118 | border: "2px solid white",
|
---|
119 | }}
|
---|
120 | size="md"
|
---|
121 | onClick={handleShow}
|
---|
122 | >
|
---|
123 | <span className="ikona my-1" color="white">
|
---|
124 | <AiOutlineKey style={{ color: "white" }} />
|
---|
125 | </span>
|
---|
126 | <span className="ikona mx-3">Промени лозинка</span>
|
---|
127 | </Button>
|
---|
128 | </Col>
|
---|
129 | </Row>
|
---|
130 | </Form>
|
---|
131 | </Container>
|
---|
132 |
|
---|
133 | <Modal show={show} onHide={handleClose}>
|
---|
134 | <Modal.Header closeButton>
|
---|
135 | <Modal.Title style={{color: "#159895"}}>Промена на лозинка</Modal.Title>
|
---|
136 | </Modal.Header>
|
---|
137 | <Modal.Body><ChangePasswordForm></ChangePasswordForm></Modal.Body>
|
---|
138 | </Modal>
|
---|
139 | </>
|
---|
140 | );
|
---|
141 | };
|
---|
142 |
|
---|
143 | export default DataForm;
|
---|