[5577566] | 1 | <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml" xmlns:sec="http://www.w3.org/1999/xhtml">
|
---|
| 2 | <head>
|
---|
| 3 | <meta charset="UTF-8"/>
|
---|
| 4 | <meta name="viewport" content="width=device-width, initial-scale=1"/>
|
---|
| 5 | <title>Register</title>
|
---|
| 6 | <!-- Bootstrap core CSS -->
|
---|
| 7 | <link href="css/bootstrap.min.css" rel="stylesheet"/>
|
---|
| 8 | <link href="css/carousel.css" rel="stylesheet"/>
|
---|
| 9 | <meta name="theme-color" content="#7952b3"/>
|
---|
| 10 | </head>
|
---|
| 11 | <body>
|
---|
| 12 | <header th:replace="common/navbar :: navbar"></header>
|
---|
| 13 | <br/>
|
---|
| 14 | <br/>
|
---|
| 15 | <br/>
|
---|
| 16 | <div th:if="${notFound}">
|
---|
| 17 | Post not found
|
---|
| 18 | </div>
|
---|
| 19 | <div th:unless="${notFound}">
|
---|
| 20 | <div class="row">
|
---|
| 21 | <div class="col-md-6" style="margin-left: 5px">
|
---|
| 22 | <div class="col-md-12">
|
---|
| 23 |
|
---|
| 24 | <div id="myCarousel" class="carousel carousel-dark slide card" data-bs-ride="carousel">
|
---|
| 25 | <div class="carousel-indicators">
|
---|
| 26 | <button th:each="image, itrStat : ${post.imagesPath}" type="button" data-bs-target="#myCarousel"
|
---|
| 27 | th:data-bs-slide-to="${itrStat.index}" th:classappend="${itrStat.index} == 0 ? active"></button>
|
---|
| 28 | </div>
|
---|
| 29 | <div class="carousel-inner">
|
---|
| 30 | <div th:each="image, itrStat : ${post.imagesPath}" th:classappend="${itrStat.index} == 0 ? active"
|
---|
| 31 | class="carousel-item">
|
---|
| 32 | <img class="card-img" th:src="${image}" style="object-fit: contain">
|
---|
| 33 | </div>
|
---|
| 34 | </div>
|
---|
| 35 | <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
|
---|
| 36 | <span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
---|
| 37 | <span class="visually-hidden">Previous</span>
|
---|
| 38 | </button>
|
---|
| 39 | <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
|
---|
| 40 | <span class="carousel-control-next-icon" aria-hidden="true"></span>
|
---|
| 41 | <span class="visually-hidden">Next</span>
|
---|
| 42 | </button>
|
---|
| 43 | </div>
|
---|
| 44 | </div>
|
---|
| 45 | </div>
|
---|
| 46 | <div class="col-md-5" style="margin-left: 5px">
|
---|
| 47 | <div class="col-md-12">
|
---|
| 48 | <h1 th:text="${post.title}"></h1>
|
---|
| 49 | <h5>Description:</h5>
|
---|
| 50 | <p th:text="${post.description}"></p>
|
---|
| 51 | <h5>Funds needed:</h5>
|
---|
| 52 | <p><span th:text="${total}"></span>/<span th:text="${post.fundsNeeded}"></span> - <span th:text="${post.currency}"></span></p>
|
---|
| 53 | <h5>Date due:</h5>
|
---|
| 54 | <p th:text="${post.dateDue}"></p>
|
---|
| 55 | <h5>Bank account:</h5>
|
---|
| 56 | <p th:text="${post.bankAccount}"></p>
|
---|
| 57 | <h5>Phone numbers:</h5>
|
---|
| 58 | <p><span th:text="${post.phoneNumbers[0]}"></span> - Telekom</p>
|
---|
| 59 | <p><span th:text="${post.phoneNumbers[1]}"></span> - A1</p>
|
---|
| 60 | <h5>Created by:</h5>
|
---|
| 61 | <p><span th:text="${createdByFirstName}"></span> <span th:text="${createdByLastName}"></span></p>
|
---|
[ab49338] | 62 | <h5>Approved by:</h5>
|
---|
| 63 | <p th:unless="${moderatorFirstName}">Not approved</p>
|
---|
| 64 | <p><span th:text="${moderatorFirstName}"></span> <span th:text="${moderatorLastName}"></span></p>
|
---|
[5577566] | 65 |
|
---|
[ab49338] | 66 | <button sec:authorize="isAuthenticated()" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
|
---|
[5577566] | 67 | Donate
|
---|
| 68 | </button>
|
---|
[7888b17] | 69 | <button sec:authorize="isAnonymous()" type="button" class="btn btn-primary" disabled>
|
---|
[ab49338] | 70 | Donate
|
---|
[7888b17] | 71 | </button>
|
---|
| 72 | <button sec:authorize="isAuthenticated()" type="button" class="btn btn-danger" data-bs-toggle="modal"
|
---|
[ab49338] | 73 | data-bs-target="#staticBackdrop1">
|
---|
| 74 | Report
|
---|
| 75 | </button>
|
---|
[7888b17] | 76 | <button sec:authorize="isAnonymous()" type="button" class="btn btn-danger" disabled>
|
---|
| 77 | Report
|
---|
| 78 | </button>
|
---|
[b8a8d06] | 79 | <div id="error" class="text-danger" hidden>Donation error</div>
|
---|
[5577566] | 80 |
|
---|
| 81 | <!-- Modal -->
|
---|
[7888b17] | 82 | <div sec:authorize="isAuthenticated()" class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
---|
[5577566] | 83 | <div class="modal-dialog modal-dialog-centered">
|
---|
| 84 | <div class="modal-content">
|
---|
| 85 | <div class="modal-header">
|
---|
| 86 | <h5 class="modal-title" id="staticBackdropLabel">Donate</h5>
|
---|
| 87 | <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
---|
| 88 | </div>
|
---|
| 89 | <div class="modal-body">
|
---|
| 90 | <div class="card-body">
|
---|
| 91 | <div style="float: right">
|
---|
| 92 | <img src="https://img.icons8.com/color/48/000000/visa.png"/>
|
---|
| 93 | <img src="https://img.icons8.com/color/48/000000/mastercard-logo.png"/>
|
---|
| 94 | <img src="https://img.icons8.com/color/48/000000/maestro.png"/>
|
---|
| 95 | </div>
|
---|
| 96 | <br/>
|
---|
| 97 | <br/>
|
---|
| 98 | <form th:action="@{/donate(postid=${post.id})}" method="post" id="myForm">
|
---|
| 99 | <div class="row">
|
---|
| 100 | <div class="col-md-6">
|
---|
| 101 | <label for="cardName" class="form-label">Cardholder's name</label>
|
---|
| 102 | <input type="text" class="form-control" id="cardName" name="cardName"
|
---|
| 103 | placeholder="Name on card" required>
|
---|
| 104 | </div>
|
---|
| 105 | <div class="col-md-6 mb-0">
|
---|
| 106 | <label for="cardNumber" class="form-label">Card Number</label>
|
---|
| 107 | <input type="text" class="form-control" id="cardNumber" name="cardNumber"
|
---|
| 108 | placeholder="0000 0000 0000 0000" required>
|
---|
| 109 | </div>
|
---|
| 110 | </div>
|
---|
| 111 | <div class="row">
|
---|
| 112 | <div class="col-md-6">
|
---|
| 113 | <label for="expiryDate" class="form-label">Expiry date</label>
|
---|
| 114 | <input type="text" class="form-control" id="expiryDate" name="expiryDate"
|
---|
| 115 | placeholder="MM/YY" required>
|
---|
| 116 | </div>
|
---|
| 117 | <div class="col-md-6">
|
---|
| 118 | <label for="cvv" class="form-label">CVV</label>
|
---|
| 119 | <input type="text" class="form-control" id="cvv" name="cvv" placeholder="XXX" required>
|
---|
| 120 | </div>
|
---|
| 121 | </div>
|
---|
| 122 | <hr>
|
---|
| 123 | <div class="row">
|
---|
| 124 | <div class="col-md-6">
|
---|
| 125 | <label for="amount" class="form-label">Amount</label>
|
---|
| 126 | <div class="input-group">
|
---|
| 127 | <input type="number" class="form-control" id="amount" name="amount" required>
|
---|
| 128 | <span class="input-group-text">MKD</span>
|
---|
| 129 | </div>
|
---|
| 130 | </div>
|
---|
| 131 | </div>
|
---|
| 132 | </form>
|
---|
| 133 | </div>
|
---|
| 134 | </div>
|
---|
| 135 | <div class="modal-footer">
|
---|
| 136 | <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
---|
| 137 | <input type="submit" class="btn btn-primary" form="myForm" value="Confirm">
|
---|
| 138 | </div>
|
---|
| 139 | </div>
|
---|
| 140 | </div>
|
---|
| 141 | </div>
|
---|
[7888b17] | 142 | <div sec:authorize="isAuthenticated()" class="modal fade" id="staticBackdrop1" data-bs-backdrop="static" data-bs-keyboard="false"
|
---|
[ab49338] | 143 | tabindex="-1" aria-labelledby="staticBackdropLabel1" aria-hidden="true">
|
---|
| 144 | <div class="modal-dialog modal-dialog-centered">
|
---|
| 145 | <div class="modal-content">
|
---|
| 146 | <div class="modal-header">
|
---|
| 147 | <h5 class="modal-title" id="staticBackdropLabel1">Report post</h5>
|
---|
| 148 | <button type="button" class="btn-close" data-bs-dismiss="modal"
|
---|
| 149 | aria-label="Close"></button>
|
---|
| 150 | </div>
|
---|
| 151 | <div class="modal-body">
|
---|
| 152 | <div class="card-body">
|
---|
| 153 | <form th:action="@{/report(postid=${post.id})}" method="post"
|
---|
| 154 | id="myForm1">
|
---|
| 155 | <label for="description">Description</label>
|
---|
| 156 | <textarea class="form-control" id="description" name="description"
|
---|
| 157 | rows="5"></textarea>
|
---|
| 158 | </form>
|
---|
| 159 | </div>
|
---|
| 160 | </div>
|
---|
| 161 | <div class="modal-footer">
|
---|
| 162 | <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
---|
| 163 | <input type="submit" class="btn btn-primary" form="myForm1" value="Confirm">
|
---|
| 164 | </div>
|
---|
| 165 | </div>
|
---|
| 166 | </div>
|
---|
| 167 | </div>
|
---|
[5577566] | 168 | </div>
|
---|
| 169 | </div>
|
---|
| 170 | </div>
|
---|
| 171 | <div class="row">
|
---|
| 172 | <div class="col-md-12">
|
---|
| 173 | <div class="col-md-8">
|
---|
| 174 | <h3>Funds collected</h3>
|
---|
| 175 | <div class="card mb-3">
|
---|
| 176 | <div class="card-body">
|
---|
| 177 | <div class="row">
|
---|
| 178 | <div class="col">
|
---|
| 179 | <h6>Type</h6>
|
---|
| 180 | </div>
|
---|
| 181 | <div class="col text-secondary">
|
---|
| 182 | <h6>Amount (MKD)</h6>
|
---|
| 183 | </div>
|
---|
| 184 | </div>
|
---|
| 185 | <div class="row" th:each="funds : ${post.fundsCollected}">
|
---|
| 186 | <div class="col">
|
---|
| 187 | <h6 th:text="${funds.description}"></h6>
|
---|
| 188 | </div>
|
---|
| 189 | <div class="col text-secondary" th:text="${funds.funds}">
|
---|
| 190 | </div>
|
---|
| 191 | <hr class="dropdown-divider">
|
---|
| 192 | </div>
|
---|
| 193 | </div>
|
---|
| 194 | </div>
|
---|
| 195 | </div>
|
---|
| 196 | </div>
|
---|
| 197 | </div>
|
---|
| 198 | </div>
|
---|
| 199 | <script src="/js/bootstrap.min.js"></script>
|
---|
[b8a8d06] | 200 | <script>
|
---|
| 201 | location.search
|
---|
| 202 | .substr(1)
|
---|
| 203 | .split("&")
|
---|
| 204 | .forEach(function (item) {
|
---|
| 205 | tmp = item.split("=");
|
---|
| 206 | if (tmp[0] === "error") {
|
---|
| 207 | document.getElementById("error").hidden = false;
|
---|
| 208 | }
|
---|
| 209 | });
|
---|
| 210 | </script>
|
---|
[5577566] | 211 | <script th:inline="javascript" th:unless="${notFound}" sec:authorize="isAuthenticated()">
|
---|
| 212 | /*<![CDATA[*/
|
---|
| 213 |
|
---|
| 214 | var creditCardInfo = /*[[${user.creditCardInfo}]]*/ 'default';
|
---|
| 215 | if(creditCardInfo) {
|
---|
| 216 | var parts = creditCardInfo.split(",");
|
---|
| 217 | document.getElementById("cardName").value=parts[0];
|
---|
| 218 | document.getElementById("cardNumber").value=parts[1];
|
---|
| 219 | document.getElementById("expiryDate").value=parts[2];
|
---|
| 220 | document.getElementById("cvv").value=parts[3];
|
---|
| 221 | }
|
---|
| 222 |
|
---|
| 223 | /*]]>*/
|
---|
| 224 | </script>
|
---|
| 225 | </body>
|
---|
| 226 | </html> |
---|