From a8ec5fe2637c499d578199b2c0b416fbb521b8c9 Mon Sep 17 00:00:00 2001
From: Nil <nilgallego@pm.me>
Date: Sat, 20 Jul 2024 18:06:35 +0200
Subject: [PATCH 1/3] chore: Update server.js to serve static files and handle
 SPA routing with rate limiting

---
 frontend/server.js | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/frontend/server.js b/frontend/server.js
index 45dcd8e..eff5d6e 100644
--- a/frontend/server.js
+++ b/frontend/server.js
@@ -1,14 +1,19 @@
 const express = require("express");
 const path = require("path");
-const app = express();
 const PORT = process.env.PORT || 3000;
+let RateLimit = require("express-rate-limit");
 
-app.use(express.static(path.join(__dirname, "dist")));
+const limiter = new RateLimit({
+  windowMs: 1 * 60 * 1000,
+  max: 50,
+});
+
+express().use(express.static(path.join(__dirname, "dist")), limiter);
 
-app.get("*", (req, res) => {
+express().get("*", (req, res) => {
   res.sendFile(path.resolve(__dirname, "dist", "index.html"));
 });
 
-app.listen(PORT, () => {
+express().listen(PORT, () => {
   console.log(`Server is running on http://localhost:${PORT}`);
 });

From 91b4f3fa759e8952e9ce5f5dbb6b00cf833ee2ff Mon Sep 17 00:00:00 2001
From: Nil <nilgallego@pm.me>
Date: Sat, 20 Jul 2024 18:07:47 +0200
Subject: [PATCH 2/3] refactor: Update server.js to serve static files and
 handle SPA routing with rate limiting

---
 frontend/server.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/frontend/server.js b/frontend/server.js
index eff5d6e..35fb9ca 100644
--- a/frontend/server.js
+++ b/frontend/server.js
@@ -1,19 +1,23 @@
 const express = require("express");
 const path = require("path");
 const PORT = process.env.PORT || 3000;
-let RateLimit = require("express-rate-limit");
+const RateLimit = require("express-rate-limit");
+
+const app = express();
 
 const limiter = new RateLimit({
   windowMs: 1 * 60 * 1000,
   max: 50,
 });
 
-express().use(express.static(path.join(__dirname, "dist")), limiter);
+app.use(limiter);
+
+app.use(express.static(path.join(__dirname, "dist")));
 
-express().get("*", (req, res) => {
+app.get("*", (req, res) => {
   res.sendFile(path.resolve(__dirname, "dist", "index.html"));
 });
 
-express().listen(PORT, () => {
+app.listen(PORT, () => {
   console.log(`Server is running on http://localhost:${PORT}`);
 });

From 857e7191d6c2f6ce57571681d40f242a05521ec3 Mon Sep 17 00:00:00 2001
From: Nil <nilgallego@pm.me>
Date: Tue, 23 Jul 2024 10:09:52 +0200
Subject: [PATCH 3/3] chore: Update password field label in HelloWorld.vue
 component

---
 frontend/src/components/HelloWorld.vue | 76 +++++++++++++++++++++++---
 1 file changed, 68 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/HelloWorld.vue b/frontend/src/components/HelloWorld.vue
index ec42991..fe9990e 100644
--- a/frontend/src/components/HelloWorld.vue
+++ b/frontend/src/components/HelloWorld.vue
@@ -11,6 +11,16 @@
       <v-row>
         <v-col cols="12">
           <v-card class="py-4" color="surface-variant" rounded="lg" variant="outlined">
+            <v-col cols="12">
+              <v-card class="py-2" color="surface-light" rounded="lg" variant="outlined">
+                <div class="px-4">
+                  <p class="text-caption">This tool is designed to enhance your security by checking if your password
+                    has been exposed in any known breaches. By analyzing hashed versions of passwords against common
+                    dictionaries and wordlists, it helps determine if your password is still secure.</p>
+                </div>
+              </v-card>
+            </v-col>
+
             <v-form @submit.prevent="hashPassword">
               <h2 class="text-h5 font-weight-bold px-4">Enter a password</h2>
               <v-text-field v-model="password" label="Password" outlined type="password" class="px-4" required />
@@ -62,29 +72,79 @@ async function hashPassword() {
     });
 }
 </script>
-
-
 <style scoped>
+/* Base text styling for white appearance */
+.text-caption,
+.text-h5,
+p,
+h1,
+h2 {
+  color: #FFFFFF;
+  /* White text color */
+  font-weight: 300;
+  /* Lighter font weight for readability */
+}
+
 /* Responsive text styling */
 .text-caption {
   padding: 0 20px;
-  /* Adds horizontal padding for better text alignment */
-  font-size: 1rem;
-  /* Default font size */
+  font-size: 1.2rem;
+  /* Increased default font size */
 }
 
-/* Media queries for responsiveness */
 @media (min-width: 600px) {
   .text-caption {
-    font-size: 1.1rem;
+    font-size: 1.3rem;
     /* Slightly larger font size for tablets and small desktops */
   }
 }
 
 @media (min-width: 960px) {
   .text-caption {
-    font-size: 1.25rem;
+    font-size: 1.5rem;
     /* Larger font size for larger screens */
   }
 }
+
+/* Adjustments for other text elements for consistency */
+.text-h5,
+h1,
+h2 {
+  font-size: 1.2rem;
+  /* Adjust base sizes for headings */
+}
+
+@media (min-width: 600px) {
+  .text-h5 {
+    font-size: 1.4rem;
+    /* Increase for medium screens */
+  }
+
+  h1 {
+    font-size: 2.5rem;
+    /* Larger for main title */
+  }
+
+  h2 {
+    font-size: 2rem;
+    /* Larger for secondary titles */
+  }
+}
+
+@media (min-width: 960px) {
+  .text-h5 {
+    font-size: 1.6rem;
+    /* Even larger for desktops */
+  }
+
+  h1 {
+    font-size: 3rem;
+    /* More prominent main title */
+  }
+
+  h2 {
+    font-size: 2.5rem;
+    /* More prominent secondary titles */
+  }
+}
 </style>