Client - add 404 error page
This commit is contained in:
parent
ef6649a5dc
commit
0876373609
63
fittrackee_client/src/components/Error.vue
Normal file
63
fittrackee_client/src/components/Error.vue
Normal 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>
|
3
fittrackee_client/src/locales/en/common.json
Normal file
3
fittrackee_client/src/locales/en/common.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"HOME": "Home"
|
||||
}
|
@ -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,
|
||||
|
5
fittrackee_client/src/locales/en/error.json
Normal file
5
fittrackee_client/src/locales/en/error.json
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"not-found": {
|
||||
"PAGE": "Page not found"
|
||||
}
|
||||
}
|
3
fittrackee_client/src/locales/fr/common.json
Normal file
3
fittrackee_client/src/locales/fr/common.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"HOME": "Accueil"
|
||||
}
|
5
fittrackee_client/src/locales/fr/error.json
Normal file
5
fittrackee_client/src/locales/fr/error.json
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"not-found": {
|
||||
"PAGE": "Page introuvable"
|
||||
}
|
||||
}
|
@ -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,
|
||||
|
@ -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({
|
||||
|
@ -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;
|
||||
}
|
@ -8,4 +8,6 @@
|
||||
|
||||
--footer-background-color: #FFFFFF;
|
||||
--footer-color: #8b8c8c;
|
||||
|
||||
--app-shadow-color: lightgrey;
|
||||
}
|
26
fittrackee_client/src/views/NotFound.vue
Normal file
26
fittrackee_client/src/views/NotFound.vue
Normal 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>
|
Loading…
Reference in New Issue
Block a user