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 AdministrationTranslations from './administration.json'
|
||||||
|
import CommonTranslations from './common.json'
|
||||||
import DashboardTranslations from './dashboard.json'
|
import DashboardTranslations from './dashboard.json'
|
||||||
|
import ErrorTranslations from './error.json'
|
||||||
import StatisticsTranslations from './statistics.json'
|
import StatisticsTranslations from './statistics.json'
|
||||||
import UserTranslations from './user.json'
|
import UserTranslations from './user.json'
|
||||||
import WorkoutsTranslations from './workouts.json'
|
import WorkoutsTranslations from './workouts.json'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
administration: AdministrationTranslations,
|
administration: AdministrationTranslations,
|
||||||
|
common: CommonTranslations,
|
||||||
dashboard: DashboardTranslations,
|
dashboard: DashboardTranslations,
|
||||||
|
error: ErrorTranslations,
|
||||||
statistics: StatisticsTranslations,
|
statistics: StatisticsTranslations,
|
||||||
user: UserTranslations,
|
user: UserTranslations,
|
||||||
workouts: WorkoutsTranslations,
|
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 AdministrationTranslations from './administration.json'
|
||||||
|
import CommonTranslations from './common.json'
|
||||||
import DashboardTranslations from './dashboard.json'
|
import DashboardTranslations from './dashboard.json'
|
||||||
|
import ErrorTranslations from './error.json'
|
||||||
import StatisticsTranslations from './statistics.json'
|
import StatisticsTranslations from './statistics.json'
|
||||||
import UserTranslations from './user.json'
|
import UserTranslations from './user.json'
|
||||||
import WorkoutsTranslations from './workouts.json'
|
import WorkoutsTranslations from './workouts.json'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
administration: AdministrationTranslations,
|
administration: AdministrationTranslations,
|
||||||
|
common: CommonTranslations,
|
||||||
dashboard: DashboardTranslations,
|
dashboard: DashboardTranslations,
|
||||||
|
error: ErrorTranslations,
|
||||||
statistics: StatisticsTranslations,
|
statistics: StatisticsTranslations,
|
||||||
user: UserTranslations,
|
user: UserTranslations,
|
||||||
workouts: WorkoutsTranslations,
|
workouts: WorkoutsTranslations,
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
|
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
|
||||||
import Dashboard from '@/views/DashBoard.vue'
|
import Dashboard from '@/views/DashBoard.vue'
|
||||||
|
import NotFound from '@/views/NotFound.vue'
|
||||||
|
|
||||||
const routes: Array<RouteRecordRaw> = [
|
const routes: Array<RouteRecordRaw> = [
|
||||||
{
|
{
|
||||||
@ -7,6 +8,7 @@ const routes: Array<RouteRecordRaw> = [
|
|||||||
name: 'Dashboard',
|
name: 'Dashboard',
|
||||||
component: Dashboard,
|
component: Dashboard,
|
||||||
},
|
},
|
||||||
|
{ path: '/:pathMatch(.*)*', name: 'not-found', component: NotFound },
|
||||||
]
|
]
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
|
@ -31,4 +31,26 @@ a {
|
|||||||
padding-right: 15px;
|
padding-right: 15px;
|
||||||
max-width: $container-width;
|
max-width: $container-width;
|
||||||
width: 100%;
|
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-background-color: #FFFFFF;
|
||||||
--footer-color: #8b8c8c;
|
--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