source: src/main/resources/templates/myProfile.html@ 5577566

Last change on this file since 5577566 was 5577566, checked in by NikolaCenevski <cenevskinikola@…>, 3 years ago

prototip part 2
  • Property mode set to 100644
File size: 14.9 KB
Line 
1<!DOCTYPE html>
2<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/html">
3<head>
4 <meta charset="UTF-8"/>
5 <meta name="viewport" content="width=device-width, initial-scale=1"/>
6 <title>My profile</title>
7
8 <!-- Bootstrap core CSS -->
9 <link href="css/bootstrap.min.css" rel="stylesheet"/>
10 <link href="css/myProfile.css" rel="stylesheet"/>
11</head>
12<body>
13<header th:replace="common/navbar :: navbar"></header>
14<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
15 <symbol id="table" viewBox="0 0 16 16">
16 <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"/>
17 </symbol>
18 <symbol id="people-circle" viewBox="0 0 16 16">
19 <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
20 <path fill-rule="evenodd"
21 d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
22 </symbol>
23 <symbol id="grid" viewBox="0 0 16 16">
24 <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
25 </symbol>
26</svg>
27
28
29<!--Sidebar-->
30<div class="container-fluid overflow-hidden">
31 <div class="row overflow-auto" id="rowHeight">
32 <div class="col-12 col-sm-3 col-xl-2 px-sm-2 px-0 bg-light d-flex sticky-top">
33 <div class="d-flex flex-sm-column flex-row flex-grow-1 align-items-center align-items-sm-start px-3 pt-2 text-dark">
34 <ul class="nav nav-pills flex-sm-column flex-row flex-nowrap flex-shrink-1 flex-sm-grow-0 flex-grow-1 mb-sm-auto mb-0 justify-content-center align-items-center align-items-sm-start"
35 id="menu">
36 <li class="nav-item">
37 <a th:href="@{/userInformation}" class="nav-link px-sm-0 px-2">
38 <svg class="bi fs5" width="24" height="24">
39 <use xlink:href="#people-circle"/>
40 </svg>
41 <span class="ms-1 d-none d-sm-inline">User information</span>
42 </a>
43 </li>
44 <li class="nav-item">
45 <a th:href="@{/myDonations}" class="nav-link px-sm-0 px-2">
46 <svg class="bi" width="24" height="24">
47 <use xlink:href="#table"/>
48 </svg>
49 <span class="ms-1 d-none d-sm-inline">My donations</span>
50 </a>
51 </li>
52 <li class="nav-item">
53 <a th:href="@{/myPosts}" class="nav-link px-sm-0 px-2">
54 <svg class="bi" width="24" height="24">
55 <use xlink:href="#grid"/>
56 </svg>
57 <span class="ms-1 d-none d-sm-inline">My posts</span>
58 </a>
59 </li>
60 </ul>
61 </div>
62 </div>
63 <!--SideBar end-->
64
65 <!--User information-->
66 <div class="col d-flex flex-column h-sm-100" th:if="${userInformation}">
67 <main class="row overflow-auto">
68 <div class="col pt-4">
69 <h3>User Information</h3>
70 <div class="card mb-3">
71 <div class="card-body">
72 <div class="row">
73 <div class="col-sm-3">
74 <h6 class="mb-0">First Name</h6>
75 </div>
76 <div class="col-sm-9 text-secondary" th:text="${user.firstName}">
77 </div>
78 </div>
79 <hr>
80 <div class="row">
81 <div class="col-sm-3">
82 <h6 class="mb-0">Last Name</h6>
83 </div>
84 <div class="col-sm-9 text-secondary" th:text="${user.lastName}">
85 </div>
86 </div>
87 <hr>
88 <div class="row">
89 <div class="col-sm-3">
90 <h6 class="mb-0">Email</h6>
91 </div>
92 <div class="col-sm-9 text-secondary" th:text="${user.email}">
93 </div>
94 </div>
95 <hr>
96 <form th:action="@{/changePassword}" method="post">
97 <div class="row">
98 <div class="col-sm-3">
99 <h6 class="mb-0">Old Password</h6>
100 </div>
101 <div class="col-sm-9 text-secondary">
102 <input class="form-control" type="password" name="oldPassword">
103 </div>
104 </div>
105 <hr>
106 <div class="row">
107 <div class="col-sm-3">
108 <h6 class="mb-0">New Password</h6>
109 </div>
110 <div class="col-sm-9 text-secondary">
111 <input class="form-control" type="password" name="newPassword">
112 </div>
113 </div>
114 <hr>
115 <div class="row">
116 <div class="col-sm-3">
117 <h6 class="mb-0">Confirm Password</h6>
118 </div>
119 <div class="col-sm-9 text-secondary">
120 <input class="form-control" type="password" name="confirmPassword">
121 </div>
122 </div>
123 <hr>
124 <div class="row">
125 <div class="col-sm-12">
126 <input type="submit" class="btn btn-info" value="Change password">
127 </div>
128 </div>
129 </form>
130 <div th:if="${changedPassword}" class="text-success">Password changed</div>
131 <div th:if="${notChangedPassword}" class="text-danger">One of the passwords doesn't match
132 </div>
133 </div>
134 </div>
135 </div>
136 </main>
137 <main class="row overflow-auto">
138 <div class="col pt-4">
139 <h3>Payment</h3>
140 <div class="card">
141 <div class="card-body">
142 <div style="float: right">
143 <img src="https://img.icons8.com/color/48/000000/visa.png"/>
144 <img src="https://img.icons8.com/color/48/000000/mastercard-logo.png"/>
145 <img src="https://img.icons8.com/color/48/000000/maestro.png"/>
146 </div>
147 <br/>
148 <br/>
149 <form th:action="@{/changeCardInfo}" method="post">
150 <div class="row">
151 <div class="col-md-6">
152 <label for="cardName" class="form-label">Cardholder's name</label>
153 <input type="text" class="form-control" id="cardName" name="cardName"
154 placeholder="Name on card">
155 </div>
156 <div class="col-md-6 mb-0">
157 <label for="cardNumber" class="form-label">Card Number</label>
158 <input type="text" class="form-control" id="cardNumber" name="cardNumber"
159 placeholder="0000 0000 0000 0000">
160 </div>
161 </div>
162 <div class="row">
163 <div class="col-md-6">
164 <label for="expiryDate" class="form-label">Expiry date</label>
165 <input type="text" class="form-control" id="expiryDate" name="expiryDate"
166 placeholder="MM/YY">
167 </div>
168 <div class="col-md-6">
169 <label for="cvv" class="form-label">CVV</label>
170 <input type="text" class="form-control" id="cvv" name="cvv" placeholder="XXX">
171 </div>
172 </div>
173 <hr>
174 <div class="row">
175 <div class="col-sm-12">
176 <input type="submit" class="btn btn-info" value="Change card information">
177 <a class="btn btn-danger" th:href="@{/removeCardInfo}">Remove card
178 information</a>
179 </div>
180 </div>
181 </form>
182 <div th:if="${creditCardError}" class="text-danger">Error</div>
183 </div>
184 </div>
185 </div>
186 </main>
187 </div>
188 <!--UserInformationEnd-->
189
190 <!--MyDonations-->
191 <div class="col d-flex flex-column h-sm-100" th:if="${myDonations}">
192 <main class="row overflow-auto">
193 <div class="col pt-4">
194 <h3>My donations</h3>
195 <div class="card mb-3">
196 <div class="card-body">
197 <div class="row">
198 <div class="col">
199 <h6>Post</h6>
200 </div>
201 <div class="col text-secondary">
202 <h6>Amount (MKD)</h6>
203 </div>
204 </div>
205 <div class="row" th:each="donation : ${donations}">
206 <div class="col">
207 <a th:text="${donation.title}" th:href="@{/post(postid=${donation.postId})}"></a>
208 </div>
209 <div class="col text-secondary" th:text="${donation.donatedAmount}">
210 </div>
211 <hr class="dropdown-divider">
212 </div>
213 <div class="row">
214 <div class="col">
215 <h6>Total</h6>
216 </div>
217 <div class="col text-secondary">
218 <h6 th:text="${total}"></h6>
219 </div>
220 </div>
221 </div>
222 </div>
223 </div>
224 </main>
225 </div>
226 <!--MyDonationsEnd-->
227
228 <!--MyPosts-->
229 <div class="col d-flex flex-column h-sm-100" th:if="${myPosts}">
230 <main class="row overflow-auto">
231 <div class="col pt-4">
232 <h3>My Posts</h3>
233 <div class="row">
234 <div class="col-md-6" th:each="post : ${postList}">
235 <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
236 <div class="col p-4 d-flex flex-column position-static">
237 <h3 class="mb-0" th:text="${post.title}"></h3>
238 <p class="card-text mb-auto" th:text="${post.description}"></p>
239 <div class="row">
240 <div class="col">
241 <a class="btn btn-sm btn-outline-secondary"
242 th:href="@{/post(postid=${post.id})}">Open</a>
243 <a class="btn btn-sm btn-success" href="#">Add Collected Funds</a>
244 <a class="btn btn-sm btn-danger"
245 th:href="@{/deletePost(postid=${post.id})}">Delete</a>
246 </div>
247 </div>
248 </div>
249 <div class="col-auto d-none d-lg-block">
250 <img th:src="${post.imagesPath[0]}" width="200" height="250"
251 style="object-fit: contain">
252 </div>
253 </div>
254 </div>
255 </div>
256 </div>
257 </main>
258 </div>
259 <!--MyPostsEnd-->
260 </div>
261</div>
262<script src="/js/bootstrap.min.js"></script>
263<script th:inline="javascript">
264 /*<![CDATA[*/
265
266 var creditCardInfo = /*[[${user.creditCardInfo}]]*/ 'default';
267 if (creditCardInfo) {
268 var parts = creditCardInfo.split(",");
269 document.getElementById("cardName").value = parts[0];
270 document.getElementById("cardNumber").value = parts[1];
271 document.getElementById("expiryDate").value = parts[2];
272 document.getElementById("cvv").value = parts[3];
273 }
274
275 /*]]>*/
276</script>
277</body>
278</html>
Note: See TracBrowser for help on using the repository browser.