From 32465e9e84ba7f436f135c1cae7a5ed91fe9830b Mon Sep 17 00:00:00 2001
From: nikhilmaske-2001 <nikhilmaske2001@gmail.com>
Date: Sat, 9 Sep 2023 13:01:12 +0530
Subject: [PATCH] Feat: Added a basic regex tester page.

Part of #72
---
 src/components/Sidebar/sidebarLists.js |  5 ++
 src/pages/RegexTester/index.vue        | 86 ++++++++++++++++++++++++++
 src/pages/RegexTester/style.css        | 17 +++++
 src/router/routes.js                   |  6 ++
 4 files changed, 114 insertions(+)
 create mode 100644 src/pages/RegexTester/index.vue
 create mode 100644 src/pages/RegexTester/style.css

diff --git a/src/components/Sidebar/sidebarLists.js b/src/components/Sidebar/sidebarLists.js
index d5b52f2..97bb435 100644
--- a/src/components/Sidebar/sidebarLists.js
+++ b/src/components/Sidebar/sidebarLists.js
@@ -55,4 +55,9 @@ export const sideBarList = [
     iconClass: "bi bi-filetype-sql",
     route: "/sql-formatter",
   },
+  {
+    name: "Regex Tester",
+    iconClass: "bi bi-regex",
+    route: "/regex-tester"
+  }
 ];
diff --git a/src/pages/RegexTester/index.vue b/src/pages/RegexTester/index.vue
new file mode 100644
index 0000000..bd6063c
--- /dev/null
+++ b/src/pages/RegexTester/index.vue
@@ -0,0 +1,86 @@
+<script setup>
+import PageHeader from '../../components/Pageheader/index.vue';
+import { ref, watch } from 'vue';
+
+const regex = ref('');
+const string = ref('');
+const isMatch = ref(false);
+
+const handleTextareaChange = () => {
+  // Perform the matching logic here and update the isMatch variable
+  isMatch.value = checkMatching();
+}
+
+// Watch for changes in regex and string and trigger the matching logic
+watch([regex, string], () => {
+  handleTextareaChange();
+});
+
+// Function to check if the regex matches the string
+const checkMatching = () => {
+  try {
+    const regexInput = new RegExp(regex.value);
+    const result = regexInput.test(string.value);
+    return result;
+  } catch (error) {
+    // Handle any invalid regular expressions
+    return false;
+  }
+}
+</script>
+
+<template>
+  <main class="p-0 m-0 w-100">
+    <div class="w-100 mt-3">
+      <PageHeader />
+    </div>
+    <div class="grid mt-1">
+      <div class="block card block1 ">
+        <div class="p-3">
+          <div class="overflow-auto">
+            <div class="form-floating">
+              <textarea v-model="regex" autofocus type="text" class="form-control mono-font fixed-textarea"
+                id="regexInput" placeholder="Enter the Regex">
+                    </textarea>
+              <label for="tokenInput">Enter the Regex</label>
+            </div>
+          </div>
+        </div>
+        <div class="p-3">
+          <div class="overflow-auto">
+            <div class="form-floating">
+              <textarea v-model="string" autofocus type="text" class="form-control mono-font fixed-textarea"
+                id="stringInput" placeholder="Enter the String">
+                    </textarea>
+              <label for="stringInput">Enter the String</label>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="block card block1 ">
+        <div class="p-3">
+          <div class="overflow-auto">
+            <div class="form-floating">
+              <div class="heading w-auto">
+                <strong>
+                  Match information
+                </strong>
+                <hr>
+                <div class="">
+                  <div class="overflow-auto">
+                    <div class="form-floating" :class="isMatch ? 'match-found' : 'match-not-found'">
+                      {{ isMatch ? 'Match found' : 'Your regular expression does not match the subject string.' }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </main>
+</template>
+
+<style scoped src="./style.css"></style>
diff --git a/src/pages/RegexTester/style.css b/src/pages/RegexTester/style.css
new file mode 100644
index 0000000..52ed751
--- /dev/null
+++ b/src/pages/RegexTester/style.css
@@ -0,0 +1,17 @@
+.fixed-textarea {
+  resize: none;
+  /* Prevent textarea from being resizable */
+  height: auto;
+}
+
+#stringInput {
+  height: 450px
+}
+
+.match-found {
+  color: darkgreen;
+}
+
+.match-not-found {
+  color: red;
+}
\ No newline at end of file
diff --git a/src/router/routes.js b/src/router/routes.js
index f6c0f70..d0f4f8a 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -10,6 +10,7 @@ import JSONToYAML from "../pages/JSONConverter/index.vue";
 import JWTDebugger from "../pages/JWTDebugger/index.vue";
 import SQLFormatter from "../pages/SQLFormatter/index.vue";
 import Index from "../pages/Index/index.vue";
+import RegexTester from "../pages/RegexTester/index.vue";
 
 const routes = [
   {
@@ -67,6 +68,11 @@ const routes = [
     component: SQLFormatter,
     name: "SQL Formatter",
   },
+  {
+    path: "/regex-tester",
+    component: RegexTester,
+    name: "Regex Tester"
+  },
 
   // {
   //   path: "/:slug",