update wallet name added to JoinWalletView

src/main/java/com/telerikacademy/web/virtualwallet/controllers/mvc/CurrenciesMvcController.java

@@ -1,15 +1,12 @@
 package com.telerikacademy.web.virtualwallet.controllers.mvc;
 
 import com.telerikacademy.web.virtualwallet.exceptions.AuthenticationException;
-import com.telerikacademy.web.virtualwallet.exceptions.AuthorizationException;
 import com.telerikacademy.web.virtualwallet.models.Currency;
-import com.telerikacademy.web.virtualwallet.models.Role;
 import com.telerikacademy.web.virtualwallet.models.User;
 import com.telerikacademy.web.virtualwallet.services.contracts.CurrencyService;
 import com.telerikacademy.web.virtualwallet.utils.AuthenticationHelper;
 import jakarta.servlet.http.HttpServletRequest;
 import jakarta.servlet.http.HttpSession;
-import org.springframework.http.HttpStatus;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.GetMapping;

src/main/java/com/telerikacademy/web/virtualwallet/controllers/mvc/JoinWalletMvcController.java

@@ -79,7 +79,7 @@ public String showJoinWallet(Model model, HttpSession session,@PathVariable int
             int userWalletsCount = joinWalletService.getAllByUser(user).size() + 1;
             model.addAttribute("userWalletsCount", userWalletsCount);
             model.addAttribute("wallet", wallet);
-            model.addAttribute("userId", user.getId());
+            model.addAttribute("currentUser", user);
             model.addAttribute("newUser",new UserToWalletDto());
             model.addAttribute("currency", new ChangeCurrencyDto());
             model.addAttribute("allCurrencies", currencyService.getAll());

src/main/java/com/telerikacademy/web/virtualwallet/services/JoinWalletServiceImpl.java

@@ -58,7 +58,7 @@ public void create(JoinWallet wallet, User user) {
 
     @Override
     public void update(JoinWallet wallet,User user, int id) {
-        checkAllUsersPermission(user,wallet);
+        checkIsOwner(user,wallet);
         checkIsDuplicated(wallet,user,id);
         joinWalletRepository.update(wallet);
     }

src/main/resources/static/js/updateJoinWallet.js

@@ -0,0 +1,52 @@
+var closeModalBtn = document.getElementsByClassName("close");
+
+var walletModalOverlay = document.getElementById("walletModalOverlay");
+
+var walletFlyout = document.getElementById('walletFlyout');
+
+function showFlyout() {
+    walletModalOverlay.style.display = 'block';
+    walletFlyout.style.display = "block"; // Show the overlay
+}
+
+walletModalOverlay.addEventListener("click", closeModal);
+for (var i = 0; i < closeModalBtn.length; i++) {
+    closeModalBtn[i].addEventListener("click", closeModal);
+}
+
+function closeModal() {
+    walletFlyout.style.display = "none"; // Hide the modal
+    walletModalOverlay.style.display = "none"; // Hide the overlay
+}
+
+document.getElementById('walletForm').addEventListener('submit', function(event) {
+    event.preventDefault(); // Prevent form submission
+
+    // Collect wallet details
+    var walletName = document.getElementById('name').value;
+
+    // Send request to wallet details
+    // Example using fetch API
+    fetch('/api/join wallet/' + walletId, {
+        method: 'PUT',
+        headers: {
+            'Content-Type': 'application/json',
+            'Authentication' : username +" "+password
+        },
+        body: JSON.stringify({
+            name: walletName
+        })
+    }).then(response => {
+        if (response.ok) {
+            alert('Wallet updated successfully!');
+            // Close the flyout after saving
+            document.getElementById('walletFlyout').style.display = 'none';
+            location.reload();
+        } else {
+            alert('Error updating wallet. Wallet name should be between 2 and 10 characters. All your wallets name should be unique');
+        }
+    }).catch(error => {
+        console.error('Error:', error);
+        alert('An unexpected error occurred. Please try again later.');
+    });
+});

src/main/resources/templates/JoinWalletView.html

@@ -1,6 +1,11 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 <div th:insert="~{fragments/PageFrame :: head('Wallet')}"></div>
+<script th:inline="javascript">
+  var username = [[${currentUser.username}]];
+  var password = [[${currentUser.password}]];
+  var walletId = [[${wallet.getId}]];
+</script>
 <body>
 <div th:replace="~{fragments/PageFrame :: navbar}"></div>
 <section style="font-size: 25pt" class="page-section text-center">
@@ -44,7 +49,10 @@ <h2 class="font-aquire" th:text="${wallet.getName()}"></h2>
       <div class="py-3 wallet-button rounded font-aquire" >Withdraw from card</div></a>
     <a class="center" href="#" th:href="@{/join wallet/__${wallet.getId()}__/withdraw}">
       <div class="py-3 wallet-button rounded font-aquire" >Withdraw to card</div></a>
-    <div th:if="${userId == wallet.getHolder().getId()}">
+    <div class="center">
+    <div class="py-3 wallet-button rounded font-aquire" onclick="showFlyout()" >Change Wallet Name
+      <i class="fa fa-gear fa-spin"></i></div></div>
+    <div th:if="${currentUser.getId() == wallet.getHolder().getId()}">
       <br/>
       <form class="outline" action="#" th:action="@{__${requestURI}__/add-user}" th:object="${newUser}" method="get">
         <input class="join-fields" type="text" th:field="*{user}" placeholder="Username, phone number or email">
@@ -65,12 +73,31 @@ <h2 class="font-aquire" th:text="${wallet.getName()}"></h2>
       </form>
       <br/>
     </div>
-    <div th:unless="${userId == wallet.getHolder().getId()}">
+    <div th:unless="${currentUser.getId() == wallet.getHolder().getId()}">
       <a class="center" href="#" th:href="@{__${requestURI}__/remove}">
         <div class="py-3 wallet-button rounded font-aquire" >Remove From Wallet</div></a>
     </div>
   </div>
 </section>
-</body>
+<div class="modal-overlay" id="walletModalOverlay"></div>
+<div class="modal" id="walletFlyout" style="display: none;">
+  <div class="modal-header">
+    <span type="button" class="close" data-dismiss="modal">&times;</span>
+    <span class="modal-title font-aquire">Enter Wallet New Name</span>
+  </div>
+  <div class="modal-content">
+    <br/>
+    <br/>
+    <form id="walletForm">
+      <input class="simple-input-style w-20" type="text" id="name" placeholder="Wallet New Name" required><br>
+      <br>
+
+      <button class="py-3 wallet-button rounded font-aquire" type="submit">Update wallet</button>
 
+    </form>
+  </div>
+  </br>
+</div>
+</body>
+<script src="../../static/js/updateJoinWallet.js" th:src="@{/js/updateJoinWallet.js}"></script>
 </html>