From 48a79f142a950aaf24374d93393d5df83dcab099 Mon Sep 17 00:00:00 2001
From: VIktorGrev <viktog2210@gmail.com>
Date: Wed, 17 Apr 2024 11:40:27 +0200
Subject: [PATCH] feat: Adding NotFoundView and UnauthorizedView
---
src/assets/icons/danger.svg | 1 +
src/router/index.ts | 2 +-
src/views/NotFoundView.vue | 45 +++++++++++++++++++++++++++++++---
src/views/UnauthorizedView.vue | 28 +++++++++++++++++++++
4 files changed, 72 insertions(+), 4 deletions(-)
create mode 100644 src/assets/icons/danger.svg
create mode 100644 src/views/UnauthorizedView.vue
diff --git a/src/assets/icons/danger.svg b/src/assets/icons/danger.svg
new file mode 100644
index 0000000..609fd17
--- /dev/null
+++ b/src/assets/icons/danger.svg
@@ -0,0 +1 @@
+<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
diff --git a/src/router/index.ts b/src/router/index.ts
index 5711edb..5f3a683 100644
--- 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'),
},
]
},
diff --git a/src/views/NotFoundView.vue b/src/views/NotFoundView.vue
index 946391e..650e2b2 100644
--- a/src/views/NotFoundView.vue
+++ b/src/views/NotFoundView.vue
@@ -1,5 +1,44 @@
<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
diff --git a/src/views/UnauthorizedView.vue b/src/views/UnauthorizedView.vue
new file mode 100644
index 0000000..8a3f78e
--- /dev/null
+++ b/src/views/UnauthorizedView.vue
@@ -0,0 +1,28 @@
+<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>
--
GitLab