Merge pull request #81 from TeamSevenWeb/add-checks-for-card-modal

Add checks on FE level for card details
TeamSevenWeb · Mar 18, 2024 · 58d76b3 · 58d76b3
2 parents 86eb8c2 + 37b703e
commit 58d76b3
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 12 deletions.
diff --git a/src/main/java/com/telerikacademy/web/virtualwallet/models/Card.java b/src/main/java/com/telerikacademy/web/virtualwallet/models/Card.java
@@ -52,7 +52,7 @@ public String getNumber() {
     }
 
     public void setNumber(String number) {
-        this.number = number;
+        this.number = number.replaceAll("\\s", "");
     }
 
     public String getCvv() {

diff --git a/src/main/java/com/telerikacademy/web/virtualwallet/models/dtos/CardDto.java b/src/main/java/com/telerikacademy/web/virtualwallet/models/dtos/CardDto.java
@@ -11,8 +11,7 @@ public class CardDto {
     @Size(min = 2,max = 32,message = "Please enter a name between 2 and 30 symbols.")
     private String holder;
 
-    @Pattern(regexp = "(^[0-9]*$)")
-    @Size(min = 16,max = 16,message = "Please enter a valid card number.")
+    @Pattern(regexp = "^[0-9]{16}$")
     private String number;
 
     @Pattern(regexp = "(^[0-9]*$)")

diff --git a/src/main/resources/static/css/styles.css b/src/main/resources/static/css/styles.css
@@ -2460,4 +2460,12 @@ header{
     border-radius: 5px; /* Rounded corners for better appearance */
     text-align: center;
     justify-content: center;
+}
+
+.f-size-08{
+    font-size: 0.6em;
+}
+
+.display-none{
+    display: none;
 }
diff --git a/src/main/resources/static/js/card.js b/src/main/resources/static/js/card.js
@@ -1,17 +1,94 @@
 // var closeModalBtn = document.getElementsByClassName("close");
+function removeSpaces() {
+    var input = document.getElementById("number");
+    var value = input.value.replace(/\s/g, ''); // Remove existing spaces
+    var formattedValue = '';
+    for (var i = 0; i < value.length; i++) {
+        if (i > 0 && i % 4 === 0) {
+            formattedValue += ' '; // Add a space after every fourth character
+        }
+        formattedValue += value.charAt(i);
+    }
+    input.value = formattedValue;
+    input.setAttribute('data-value', value); // Set a data attribute to store the actual value
+}
+
+function getActualValue() {
+    var input = document.getElementById("number");
+    return input.getAttribute('data-value');
+}
+
+function formatCVV() {
+    var input = document.getElementById("cvv");
+    var value = input.value.replace(/\D/g, ''); // Remove non-numeric characters
+
+    // If the length is greater than 2, insert a slash after the second character
+    if (value.length > 3) {
+        value = value.substr(0, 3);
+    }
+
+    input.value = value;
+}
+
+function formatExpiryDate() {
+    var input = document.getElementById("expiryDate");
+    var value = input.value.replace(/\D/g, ''); // Remove non-numeric characters
+
+    // If the length is greater than 2, insert a slash after the second character
+    if (value.length > 2) {
+        value = value.substr(0, 2) + '/' + value.substr(2);
+    }
+
+    // If the length is greater than 5, truncate the value to ensure only "MM/YY" format
+    if (value.length > 5) {
+        value = value.substr(0, 5);
+    }
+
+    input.value = value;
+}
+
+function validateExpiryDate() {
+    var expiryDateInput = document.getElementById("expiryDate");
+    var expiryDateError = document.getElementById("expiryDateError");
+    var value = expiryDateInput.value.trim();
+
+
+    // Extract month and year from the input value
+    var parts = value.split('/');
+    var month = parseInt(parts[0]);
+    var year = parseInt(parts[1]);
+
+    // Get the current date
+    var currentDate = new Date();
+    var currentYear = currentDate.getFullYear() % 100; // Get the last two digits of the current year
+    var currentMonth = currentDate.getMonth() + 1; // Get the current month (1-indexed)
+
+    // Verify that the month is valid (between 1 and 12) and the year is not in the past
+    var isValid = month >= 1 && month <= 12 && !(year < currentYear || (year === currentYear && month < currentMonth));
+
+    if (isValid) {
+        expiryDateError.style.display = 'none'; // Hide error message if date is valid
+    } else if (!isValid) {
+        // Show error message only if the field has been interacted with
+        expiryDateError.style.display = 'inline'; // Show error message if date is invalid and field has been interacted with
+        expiryDateInput.value = "";
+    }
+}
+
 
 /*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() {
+document.addEventListener('DOMContentLoaded', function () {
     // Check if the user has no cards and display the flyout accordingly
-    if(userCardsEmpty) {
+    if (userCardsEmpty) {
         showFlyout();
     }
 });
@@ -20,24 +97,26 @@ 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) {
+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) {
+document.getElementById('cardForm').addEventListener('submit', function (event) {
     event.preventDefault(); // Prevent form submission
 
     // Collect card details
-    var cardNumber = document.getElementById('number').value;
+    var cardNumber = getActualValue();
     var holder = document.getElementById('holder').value;
     var cvv = document.getElementById('cvv').value;
     var expiryDate = document.getElementById('expiryDate').value;
@@ -48,7 +127,7 @@ document.getElementById('cardForm').addEventListener('submit', function(event) {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json',
-            'Authentication' : username +" "+password
+            'Authentication': username + " " + password
         },
         body: JSON.stringify({
             number: cardNumber,

diff --git a/src/main/resources/templates/FundWalletView.html b/src/main/resources/templates/FundWalletView.html
@@ -45,10 +45,12 @@ <h2 class="font-aquire pd-b-1" th:text="#{transaction.page.title.wallet}">Transf
             <br/>
             <br/>
                 <form id="cardForm">
-                    <input class="simple-input-style w-10" type="text" id="number" placeholder="Card Number" required><br>
+                    <input class="simple-input-style w-10" oninput="removeSpaces()" type="text" id="number" placeholder="Card Number" required><br>
                     <input class="simple-input-style w-10" type="text" id="holder" placeholder="Cardholder Name" required><br>
-                    <input class="simple-input-style w-10" type="text" id="cvv" placeholder="Cvv Number" required><br>
-                    <input class="simple-input-style w-10" type="text" id="expiryDate" placeholder="Expiry Date (MM/YY)" required><br>
+                    <input class="simple-input-style w-10" oninput="formatCVV()" type="text" id="cvv" placeholder="Cvv Number" required><br>
+                    <input class="simple-input-style w-10" oninput="formatExpiryDate()" onblur="validateExpiryDate()"
+                           type="text" id="expiryDate" placeholder="Expiry Date (MM/YY)" required><br>
+                    <span id="expiryDateError" class="error f-size-08 display-none">Invalid date</span><br>
                     <br>
                     <button class="py-3-create w-8 rounded font-aquire" type="submit">Save card</button>
                 </form>