Wallet fund page refactor

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

@@ -36,16 +36,16 @@ public CardMvcController(UserService userService, CardMapper cardMapper, CardSer
     }
 
 
-    @PostMapping()
-    public void create(@RequestHeader HttpHeaders headers, @Valid @RequestBody CardDto cardDto) {
-        try {
-            User holder = userService.getById(1);
-            Card card = cardMapper.fromDto(holder,cardDto);
-            cardService.create(holder,card);
-        } catch (EntityDuplicateException e) {
-            throw new ResponseStatusException(HttpStatus.CONFLICT, e.getMessage());
-        } catch (AuthorizationException e) {
-            throw new ResponseStatusException(HttpStatus.UNAUTHORIZED, e.getMessage());
-        }
-    }
+//    @PostMapping()
+//    public void create(@RequestHeader HttpHeaders headers, @Valid @RequestBody CardDto cardDto) {
+//        try {
+//            User holder = userService.getById(1);
+//            Card card = cardMapper.fromDto(holder,cardDto);
+//            cardService.create(holder,card);
+//        } catch (EntityDuplicateException e) {
+//            throw new ResponseStatusException(HttpStatus.CONFLICT, e.getMessage());
+//        } catch (AuthorizationException e) {
+//            throw new ResponseStatusException(HttpStatus.UNAUTHORIZED, e.getMessage());
+//        }
+//    }
 }

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

@@ -68,12 +68,16 @@ public String requestURI(final HttpServletRequest request) {
     }
 
     @ModelAttribute("userCards")
-    public List<Card> userCards(Model model) {
-        User user2 = userService.getById(1);
+    public List<Card> userCards(Model model,HttpSession session) {
+        User user2 = authenticationHelper.tryGetCurrentUser(session);
         List<Card> cards = cardService.getUsersCards(user2);
         model.addAttribute("userCards", cards);
         return cards;
     }
+    @ModelAttribute("currentUser")
+    public User currentUser(HttpSession session) {
+        return authenticationHelper.tryGetCurrentUser(session);
+    }
 
     @GetMapping
     public String showPersonalWallet(Model model, HttpSession session){
@@ -171,8 +175,7 @@ public String createTransferToOtherWallet(@Valid @ModelAttribute("transfer") Tra
     }
 
     @GetMapping("/fund")
-    public String showWalletFundPage(Model model){
-        model.addAttribute("transfer",new TransferDto());
+    public String showWalletFundPage(){
         return "FundWalletView";
     }
 

src/main/resources/static/css/styles.css

@@ -2322,16 +2322,22 @@ header{
     border-radius: 10px;
 }
 
-.w-10{
+.w-20{
     width: 20%;
 }
+.w-10{
+    width: 10%;
+}
 .w-8{
     width: 8%;
 }
 .w-5{
     width: 5%;
 }
 
+.pd-l-3{
+    margin-left: 3rem ;
+}
 .centered-error {
     position: fixed;
     left: 50%; /* Center horizontally */

src/main/resources/static/js/card.js

@@ -0,0 +1,72 @@
+// var closeModalBtn = document.getElementsByClassName("close");
+
+/*Flyout for cards*/
+var modalOverlay = document.getElementById("modalOverlay");
+
+var cardFlyout = document.getElementById('cardFlyout');
+function showFlyout() {
+    cardFlyout.style.display = 'block';
+    modalOverlay.style.display = "block"; // Show the overlay
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+    // Check if the user has no cards and display the flyout accordingly
+    if(userCardsEmpty) {
+        showFlyout();
+    }
+});
+
+modalOverlay.addEventListener("click", closeModal);
+for (var i = 0; i < closeModalBtn.length; i++) {
+    closeModalBtn[i].addEventListener("click", closeModal);
+}
+function closeModal() {
+    cardFlyout.style.display = "none"; // Hide the modal
+    modalOverlay.style.display = "none"; // Hide the overlay
+}
+// Event listener for clicks on the "Add Card" button
+document.getElementById('openFlyout').addEventListener('click', function(event) {
+    // Check if the clicked element is the "Add Card" button
+    if (event.target.matches('button')) {
+        // Display the card details flyout
+        showFlyout();
+    }
+});
+
+document.getElementById('cardForm').addEventListener('submit', function(event) {
+    event.preventDefault(); // Prevent form submission
+
+    // Collect card details
+    var cardNumber = document.getElementById('number').value;
+    var holder = document.getElementById('holder').value;
+    var cvv = document.getElementById('cvv').value;
+    var expiryDate = document.getElementById('expiryDate').value;
+
+    // Send request to save card details
+    // Example using fetch API
+    fetch('/api/users/cards', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'Authentication' : username +" "+password
+        },
+        body: JSON.stringify({
+            number: cardNumber,
+            holder: holder,
+            cvv: cvv,
+            expirationDate: expiryDate
+        })
+    }).then(response => {
+        if (response.ok) {
+            alert('Card saved successfully!');
+            // Close the flyout after saving
+            document.getElementById('cardFlyout').style.display = 'none';
+            location.reload();
+        } else {
+            alert('Error saving card. Please check your details and try again.');
+        }
+    }).catch(error => {
+        console.error('Error:', error);
+        alert('An unexpected error occurred. Please try again later.');
+    });
+});

src/main/resources/static/js/joinWallet.js

@@ -0,0 +1,31 @@
+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', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'Authentication' : username +" "+password
+        },
+        body: JSON.stringify({
+            name: walletName
+        })
+    }).then(response => {
+        if (response.ok) {
+            alert('Wallet created successfully!');
+            // Close the flyout after saving
+            document.getElementById('cardFlyout').style.display = 'none';
+            location.reload();
+        } else {
+            alert('Error creating wallet. Please check your details and try again.');
+        }
+    }).catch(error => {
+        console.error('Error:', error);
+        alert('An unexpected error occurred. Please try again later.');
+    });
+});

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

@@ -72,179 +72,4 @@ window.addEventListener('DOMContentLoaded', event => {
 
 });
 /*Close button*/
-var closeModalBtn = document.getElementsByClassName("close");
-
-/*Flyout for cards*/
-var modalOverlay = document.getElementById("modalOverlay");
-
-var cardFlyout = document.getElementById('cardFlyout');
-function showFlyout() {
-    cardFlyout.style.display = 'block';
-    modalOverlay.style.display = "block"; // Show the overlay
-}
-
-document.addEventListener('DOMContentLoaded', function() {
-    // Check if the user has no cards and display the flyout accordingly
-    if(userCardsEmpty) {
-        showFlyout();
-    }
-});
-
-modalOverlay.addEventListener("click", closeModal);
-for (var i = 0; i < closeModalBtn.length; i++) {
-    closeModalBtn[i].addEventListener("click", closeModal);
-}
-function closeModal() {
-    cardFlyout.style.display = "none"; // Hide the modal
-    modalOverlay.style.display = "none"; // Hide the overlay
-}
-// Event listener for clicks on the "Add Card" button
-document.getElementById('openFlyout').addEventListener('click', function(event) {
-    // Check if the clicked element is the "Add Card" button
-    if (event.target.matches('button')) {
-        // Display the card details flyout
-        showFlyout();
-    }
-});
-window.addEventListener("click", function(event) {
-    if (event.target !== cardFlyout) {
-        modal.style.display = "none"; // Hide the modal
-    }
-});
-document.getElementById('cardForm').addEventListener('submit', function(event) {
-    event.preventDefault(); // Prevent form submission
-
-    // Collect card details
-    var cardNumber = document.getElementById('number').value;
-    var holder = document.getElementById('holder').value;
-    var cvv = document.getElementById('cvv').value;
-    var expiryDate = document.getElementById('expiryDate').value;
-
-    // Send request to save card details
-    // Example using fetch API
-    fetch('/api/users/cards', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-            'Authorization' : "alex.m ForumSeven"
-        },
-        body: JSON.stringify({
-            number: cardNumber,
-            holder: holder,
-            cvv: cvv,
-            expirationDate: expiryDate
-        })
-    }).then(response => {
-        if (response.ok) {
-            alert('Card saved successfully!');
-            // Close the flyout after saving
-            document.getElementById('cardFlyout').style.display = 'none';
-            location.reload();
-        } else {
-            alert('Error saving card. Please check your details and try again.');
-        }
-    }).catch(error => {
-        console.error('Error:', error);
-        alert('An unexpected error occurred. Please try again later.');
-    });
-});
-
-
-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', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-            'Authentication' : "alex.m ForumSeven"
-        },
-        body: JSON.stringify({
-            name: walletName
-        })
-    }).then(response => {
-        if (response.ok) {
-            alert('Wallet created successfully!');
-            // Close the flyout after saving
-            document.getElementById('cardFlyout').style.display = 'none';
-            location.reload();
-        } else {
-            alert('Error creating wallet. Please check your details and try again.');
-        }
-    }).catch(error => {
-        console.error('Error:', error);
-        alert('An unexpected error occurred. Please try again later.');
-    });
-});
-
-// Function to display the success flyout
-// function showSuccessFlyout() {
-//     document.getElementById('successFlyout').style.display = 'block';
-// }
-
-// Function to hide the success flyout
-// function hideSuccessFlyout() {
-//     document.getElementById('successFlyout').style.display = 'none';
-// }
-
-// Handle form submission to perform the transfer
-document.getElementById('transferForm').addEventListener('submit', function(event) {
-    event.preventDefault(); // Prevent form submission
-
-    // Simulate transfer (replace with actual transfer logic)
-    const transferAmount = document.getElementById('amount').value;
-    const cardId = document.getElementById('cardId').value;
-
-    // Simulate API request to perform transfer
-    fetch('/api/wallet/fund', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-            'Authorization': "alex.m ForumSeven"
-        },
-        body: JSON.stringify( {
-            cardId : cardId,
-            amount : transferAmount
-        })
-    }).then(response => {
-        if (response.ok) {
-            // Show success flyout
-            alert('Transfer successful!');
-
-            // showSuccessFlyout();
-            // Hide success flyout after a certain time (optional)
-
-            // setTimeout(hideSuccessFlyout, 5000); // Hide after 5 seconds
-        } else {
-            alert('Transfer failed. Please try again.');
-        }
-    }).catch(error => {
-        console.error('Error:', error);
-        alert('An unexpected error occurred. Please try again later.');
-    });
-});
-
-
-//open modals
-// Get the button element
-var openModalBtn = document.getElementById("openModalBtn");
-
-// Get the modal element
-var modal = document.getElementById("myModal");
-
-// When the user clicks the button, open the modal
-openModalBtn.addEventListener("click", function() {
-    modal.style.display = "block"; // Show the modal
-});
-
-// When the user clicks anywhere outside of the modal, close it
-window.addEventListener("click", function(event) {
-    if (event.target === modal) {
-        modal.style.display = "none"; // Hide the modal
-    }
-});
+var closeModalBtn = document.getElementsByClassName("close");