* Error details rendering on the client side.

shimkiv · Aug 12, 2018 · 4be36f0 · 4be36f0
1 parent 4630f9a
commit 4be36f0
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 8 deletions.
diff --git a/src/main/resources/static/css/app.css b/src/main/resources/static/css/app.css
@@ -62,3 +62,14 @@ body {
     text-align: left;
     white-space: pre-wrap;
 }
+
+.error-message {
+    color: #575757;
+    font-size: 15px;
+}
+
+.error-details {
+    color: gray;
+    font-size: 12px;
+    text-align: left;
+}
diff --git a/src/main/resources/static/js/private/app.js b/src/main/resources/static/js/private/app.js
@@ -68,22 +68,36 @@ $(function() {
                     color = "red";
                 }
 
-                if (json.state !== undefined) {
+                if (json.state) {
                     text = json.state;
                 }
 
                 // noinspection JSUnresolvedVariable
-                if (json.errorResponse !== undefined &&
-                    json.errorResponse != null &&
-                    json.errorResponse.message != null) {
-                    // noinspection JSUnresolvedVariable
-                    message = '<p style="color: gray; font-size: 15px;">' + json.errorResponse.message + '</p>';
+                if (json.errorResponse &&
+                    json.errorResponse.message) {
+                    message = '<p class="error-message">' + json.errorResponse.message + '</p>';
+
+                    if (json.errorResponse.details) {
+                        message += '<p class="error-details">';
+
+                        $.each(json.errorResponse.details, function(index, value) {
+                            // noinspection JSUnresolvedVariable
+                            message += (index + 1) + '. ' + value.field + ': ' + value.issue + '<br />';
+                        });
+
+                        message += '</p>';
+                    }
                 }
             } else {
                 color = "red";
             }
 
-            paymentProcessingInfoId.append('<div class="centered-text"><h1 style="padding-bottom: 20px; color: ' + color + ';">' + text.toUpperCase() + '</h1>' + message + '</div>');
+            paymentProcessingInfoId.append(
+                '<div class="centered-text">' +
+                '<h1 style="padding-bottom: 20px; color: ' + color + ';">' + text.toUpperCase() + '</h1>' +
+                message +
+                '</div>'
+            );
             paymentProcDialog.modal("show");
         });
 

diff --git a/src/main/resources/templates/account/checkout.html b/src/main/resources/templates/account/checkout.html
@@ -4,6 +4,7 @@
 </head>
 <body>
 <!--/*@thymesVar id="currency" type="java.util.Currency"*/-->
+<!--/*@thymesVar id="user" type="com.shimkiv.paypalm.model.dto.user.User"*/-->
 <!--/*@thymesVar id="shoppingCart" type="com.shimkiv.paypalm.model.cart.ShoppingCart"*/-->
 <!--/*@thymesVar id="paymentForm" type="com.shimkiv.paypalm.model.vo.form.PaymentForm"*/-->
 
@@ -78,7 +79,7 @@ <h3 th:text="#{card.info.label}"></h3>
                     </div>
                     <div class="form-group label-floating">
                         <label class="control-label" for="cardHolderName" th:text="#{checkout.form.name.label}"></label>
-                        <input type="text" id="cardHolderName" name="cardHolderName" class="form-control" maxlength="50" required />
+                        <input type="text" id="cardHolderName" name="cardHolderName" class="form-control" maxlength="50" th:value="${not #strings.isEmpty(user.userSettings.firstName) && not #strings.isEmpty(user.userSettings.lastName)} ? ${user.userSettings.firstName + ' ' + user.userSettings.lastName} : ''" required />
                         <p class="help-block" th:text="#{checkout.form.name.help.label}"></p>
                     </div>
                 </div>