overhauled banned page layout

singharaj-usai · Oct 14, 2024 · a5b3b0f · a5b3b0f
1 parent baf2b6a
commit a5b3b0f
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 33 deletions.
diff --git a/client/html/pages/banned/banned.html b/client/html/pages/banned/banned.html
@@ -59,6 +59,10 @@
       href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/cosmo/bootstrap.min.css"
       id="theme-stylesheet"
     />
+    <link
+    rel="stylesheet"
+    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+  />
     <link rel="stylesheet" href="./css/particles.css" />
     <link rel="icon" href="/images/Valkyrie.ico" type="image/x-icon" />
 
@@ -71,14 +75,33 @@
     <div id="content" style="display: none">
       <div id="navbar-container"></div>
 
-      <div class="container mt-5">
-        <div class="alert alert-danger" role="alert">
-          <h4 class="alert-heading">Your account has been banned</h4>
-          <p id="ban-reason"></p>
-          <hr />
-          <p class="mb-0">
-            If you believe this is an error, please contact support.
-          </p>
+      <div class="container" style="margin-top: 50px">
+        <div class="row">
+          <div class="col-md-8 col-md-offset-2">
+            <div class="panel panel-danger mt-5">
+              <div class="panel-heading">
+                <h3 class="panel-title">
+                  <i class="fa fa-exclamation-triangle"></i> Account Banned
+                </h3>
+              </div>
+              <div class="panel-body text-center">
+                <i class="fa fa-ban fa-4x text-danger mb-3"></i>
+                <h4>Your account has been suspended</h4>
+                <p id="ban-reason" class="lead"></p>
+                <hr />
+                <p>
+                  If you believe this is an error, please contact our support
+                  team.
+                </p>
+                <a href="/support" class="btn btn-primary"
+                  ><i class="fa fa-envelope"></i> Contact Support</a
+                >
+              </div>
+              <div class="panel-footer">
+                <small>Ban Date: <span id="ban-date"></span></small>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>

diff --git a/client/js/banned.js b/client/js/banned.js
@@ -2,41 +2,55 @@ $(document).ready(function () {
   const token = localStorage.getItem('token');
   const isBanned = localStorage.getItem('isBanned') === 'true';
   const banReason = localStorage.getItem('banReason');
+  const banDate = localStorage.getItem('banDate');
 
   if (isBanned && banReason) {
-    displayBanReason(banReason);
+      displayBanInfo(banReason, banDate);
   } else if (token) {
-    checkBanStatus(token);
+      checkBanStatus(token);
   } else {
-    window.location.href = '/login';
+      window.location.href = '/login';
   }
 });
 
-function displayBanReason(reason) {
-  $('#ban-reason').text(`Reason: ${reason || 'No reason provided'}`);
-  $('#loading').hide();
-  $('#content').show();
+function displayBanInfo(reason, date) {
+  $('#ban-reason').text(reason || 'No reason provided');
+  $('#ban-date').text(formatDate(date) || 'Unknown');
+  $('body').removeClass('hidden');
 }
 
 function checkBanStatus(token) {
   $.ajax({
-    url: '/api/auth/check-ban',
-    method: 'GET',
-    headers: {
-      Authorization: `Bearer ${token}`,
-    },
-    success: function (response) {
-      if (response.isBanned) {
-        localStorage.setItem('isBanned', 'true');
-        localStorage.setItem('banReason', response.banReason);
-        displayBanReason(response.banReason);
-      } else {
-        window.location.href = '/';
-      }
-    },
-    error: function (xhr) {
-      console.error('Error checking ban status:', xhr.responseText);
-      window.location.href = '/login';
-    },
+      url: '/api/auth/check-ban',
+      method: 'GET',
+      headers: {
+          Authorization: `Bearer ${token}`,
+      },
+      success: function (response) {
+          if (response.isBanned) {
+              localStorage.setItem('isBanned', 'true');
+              localStorage.setItem('banReason', response.banReason);
+              localStorage.setItem('banDate', response.banDate);
+              displayBanInfo(response.banReason, response.banDate);
+          } else {
+              window.location.href = '/';
+          }
+      },
+      error: function (xhr) {
+          console.error('Error checking ban status:', xhr.responseText);
+          window.location.href = '/login';
+      },
+  });
+}
+
+function formatDate(dateString) {
+  if (!dateString) return null;
+  const date = new Date(dateString);
+  return date.toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
   });
 }