Md Afiq Iskandar
1d1dd00066
- Replaced the logo image in the error.vue component from "logo-word.svg" to "logo-word-black.svg" to ensure visual consistency across the application.
88 lines
3.1 KiB
Vue
88 lines
3.1 KiB
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
|
|
definePageMeta({
|
|
title: "Error Page",
|
|
layout: "empty",
|
|
});
|
|
|
|
const props = defineProps({
|
|
error: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
// console.log("props", props);
|
|
|
|
const isDynamicRouteError = computed(() => {
|
|
const path = window?.location?.pathname || '';
|
|
return path.includes('/[') || path.includes(']');
|
|
});
|
|
|
|
const handleError = () => {
|
|
if (props.error.statusCode === 404 || isDynamicRouteError.value) {
|
|
return navigateTo('/');
|
|
}
|
|
|
|
clearError({ redirect: window.location.pathname });
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-screen bg-gray-50 flex flex-col items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
|
|
<div class="max-w-md w-full space-y-8">
|
|
<div>
|
|
<img src="@/assets/img/logo/logo-word-black.svg" alt="Corrad Logo" class="h-12 mx-auto" />
|
|
<h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
|
|
{{ error.statusCode === 404 ? 'Page not found' : 'An error occurred' }}
|
|
</h2>
|
|
<p class="mt-2 text-center text-sm text-gray-600">
|
|
{{ error.message }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-md">
|
|
<div v-if="isDynamicRouteError" class="mb-6">
|
|
<h3 class="text-lg font-medium text-gray-900 mb-2">Invalid URL Format</h3>
|
|
<p class="text-gray-600 mb-4">
|
|
It looks like you're trying to access a page with a placeholder in the URL.
|
|
Dynamic routes like <code class="bg-gray-100 px-1 py-0.5 rounded">[id]</code> need to be
|
|
replaced with actual values.
|
|
</p>
|
|
<div class="bg-blue-50 border-l-4 border-blue-400 p-4">
|
|
<div class="flex">
|
|
<div class="flex-shrink-0">
|
|
<Icon name="heroicons:information-circle" class="h-5 w-5 text-blue-400" />
|
|
</div>
|
|
<div class="ml-3">
|
|
<p class="text-sm text-blue-700">
|
|
Instead of using <strong>/execution/form/[id]</strong>, you should use a specific ID, like
|
|
<strong>/execution/form/123</strong> or navigate from the case list page.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col space-y-4">
|
|
<button
|
|
@click="handleError"
|
|
class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
|
>
|
|
{{ error.statusCode === 404 ? 'Go to homepage' : 'Try again' }}
|
|
</button>
|
|
|
|
<button
|
|
v-if="error.statusCode !== 404"
|
|
@click="navigateTo('/')"
|
|
class="w-full flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
|
>
|
|
Go to homepage
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|