Client - add 404 error page

This commit is contained in:
Sam 2021-08-07 14:28:48 +02:00
parent ef6649a5dc
commit 0876373609
11 changed files with 139 additions and 0 deletions

View File

@ -0,0 +1,63 @@
<template>
<div id="error404">
<div class="error-content">
<h1>{{ title }}</h1>
<p>{{ message }}</p>
<button v-if="buttonText" @click="$router.push(path)" class="upper">
{{ buttonText }}
</button>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
name: 'Error',
props: {
title: {
type: String,
required: true,
},
message: {
type: String,
},
buttonText: {
type: String,
},
path: {
type: String,
default: '/',
},
},
})
</script>
<style scoped lang="scss">
@import '~@/scss/base';
#error404 {
display: flex;
align-items: center;
justify-content: center;
height: 75vh;
text-align: center;
.error-content {
margin-top: 50px;
h1 {
font-size: 6em;
text-shadow: 4px 4px 0 var(--app-shadow-color);
}
p {
font-size: 1.2em;
margin: 30px 0;
}
}
}
</style>

View File

@ -0,0 +1,3 @@
{
"HOME": "Home"
}

View File

@ -1,12 +1,16 @@
import AdministrationTranslations from './administration.json'
import CommonTranslations from './common.json'
import DashboardTranslations from './dashboard.json'
import ErrorTranslations from './error.json'
import StatisticsTranslations from './statistics.json'
import UserTranslations from './user.json'
import WorkoutsTranslations from './workouts.json'
export default {
administration: AdministrationTranslations,
common: CommonTranslations,
dashboard: DashboardTranslations,
error: ErrorTranslations,
statistics: StatisticsTranslations,
user: UserTranslations,
workouts: WorkoutsTranslations,

View File

@ -0,0 +1,5 @@
{
"not-found": {
"PAGE": "Page not found"
}
}

View File

@ -0,0 +1,3 @@
{
"HOME": "Accueil"
}

View File

@ -0,0 +1,5 @@
{
"not-found": {
"PAGE": "Page introuvable"
}
}

View File

@ -1,12 +1,16 @@
import AdministrationTranslations from './administration.json'
import CommonTranslations from './common.json'
import DashboardTranslations from './dashboard.json'
import ErrorTranslations from './error.json'
import StatisticsTranslations from './statistics.json'
import UserTranslations from './user.json'
import WorkoutsTranslations from './workouts.json'
export default {
administration: AdministrationTranslations,
common: CommonTranslations,
dashboard: DashboardTranslations,
error: ErrorTranslations,
statistics: StatisticsTranslations,
user: UserTranslations,
workouts: WorkoutsTranslations,

View File

@ -1,5 +1,6 @@
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Dashboard from '@/views/DashBoard.vue'
import NotFound from '@/views/NotFound.vue'
const routes: Array<RouteRecordRaw> = [
{
@ -7,6 +8,7 @@ const routes: Array<RouteRecordRaw> = [
name: 'Dashboard',
component: Dashboard,
},
{ path: '/:pathMatch(.*)*', name: 'not-found', component: NotFound },
]
const router = createRouter({

View File

@ -32,3 +32,25 @@ a {
max-width: $container-width;
width: 100%;
}
button {
border: solid 1px var(--app-color);
border-radius: 0;
box-shadow: 2px 2px 2px var(--app-shadow-color);
color: var(--app-color);
padding: 6px 14px;
&:hover {
background: var(--app-color);
color: #FFFFFF;
}
&:active {
box-shadow: 2px 0 2px var(--app-shadow-color);
transform: translateY(2px);
}
}
.upper {
text-transform: uppercase;
}

View File

@ -8,4 +8,6 @@
--footer-background-color: #FFFFFF;
--footer-color: #8b8c8c;
--app-shadow-color: lightgrey;
}

View File

@ -0,0 +1,26 @@
<template>
<div class="not-found">
<Error
title="404"
:message="t('error.not-found.PAGE')"
:button-text="t('common.HOME')"
/>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { useI18n } from 'vue-i18n'
import Error from '@/components/Error.vue'
export default defineComponent({
name: 'NotFound',
components: {
Error,
},
setup() {
const { t } = useI18n()
return { t }
},
})
</script>