feat: Adding NotFoundView and UnauthorizedView

48a79f14 · VIktorGrev · ffd422a5 · 48a79f14 · 48a79f14 · 48a79f14
Commit 48a79f14 authored 11 months ago by VIktorGrev
--- a/src/assets/icons/danger.svg
+++ b/src/assets/icons/danger.svg
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="m40-120 440-760 440 760H40Zm104-60h672L480-760 144-180Zm340.175-57q12.825 0 21.325-8.675 8.5-8.676 8.5-21.5 0-12.825-8.675-21.325-8.676-8.5-21.5-8.5-12.825 0-21.325 8.675-8.5 8.676-8.5 21.5 0 12.825 8.675 21.325 8.676 8.5 21.5 8.5ZM454-348h60v-224h-60v224Zm26-122Z" fill="#ffffff"/></svg>
\ No newline at end of file
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -39,7 +39,7 @@ const routes = [
      {
        path: 'unauthorized',
        name: 'unauthorized',
-        component: () => import('@/views/TestView.vue'),
+        component: () => import('@/views/UnauthorizedView.vue'),
      },
    ]
  },

--- a/src/views/NotFoundView.vue
+++ b/src/views/NotFoundView.vue
 <template>
-    <div>
-        <h1 id="errorMessage">404 - Not Found</h1>
+    <div class="container-fluid"> <!-- Changed from 'container' to 'container-fluid' -->
+    <div class="row">
+        <div class="col-md-12">
+            <div class="error-template text-center"> <!-- 'text-center' for centering text content -->
+                <h1>
+                    Oops!</h1>
+                <h2>
+                    404 Not Found</h2>
+                <div class="error-details">
+                    Sorry, an error has occurred, Requested page not found!
+                </div>
+                <div class="error-actions">
+                    <Button1 button-text="Take Me Home" @click="home" />
+                </div>
+            </div>
+        </div>
    </div>
-</template>
\ No newline at end of file
+</div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+import Button1 from '@/components/Buttons/Button1.vue';
+
+const router = useRouter();
+
+const home = () => {
+    router.push('/');  // Assuming the root URL '/' is your home route
+};
+</script>
+
+
+<style scoped>
+    .error-template {
+    text-align: center; /* Ensures all text and inline elements within are centered */
+    display: flex;
+    flex-direction: column;
+    align-items: center; /* Aligns child elements (which are block-level) centrally */
+    justify-content: center; /* Optional: if you want vertical centering */
+    margin: 2rem;
+}
+
+</style>
\ No newline at end of file
--- a/src/views/UnauthorizedView.vue
+++ b/src/views/UnauthorizedView.vue
+<template>
+    <body class="bg-dark text-white py-5">
+        <div class="container py-5">
+            <div class="row">
+                <div class="col-md-2 text-center">
+                    <p><img src="@/assets/icons/danger.svg"> <br/>Status Code: 403</p>
+                </div>
+                <div class="col-md-10">
+                    <h3>OPPSSS!!!! Sorry...</h3>
+                    <p>Sorry, your access is refused due to security reasons of our server and also our sensitive data.<br/>Please go back to the home page to continue browsing.</p>
+                    <Button1 :button-text="'Take Me Home'" @click="home" />
+                </div>
+            </div>
+        </div>
+    </body>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from 'vue';
+import { useRouter } from 'vue-router';
+import Button1 from '@/components/Buttons/Button1.vue';
+
+const router = useRouter();
+
+const home = () => {
+    router.push('/'); 
+};
+</script>