mobilizon/js/src/views/PageNotFound.vue

64 lines
1.8 KiB
Vue
Raw Normal View History

<template>
<section class="container has-text-centered not-found">
<div class="columns is-vertical">
<div class="column is-centered">
<img src="../assets/oh_no.jpg" alt="Not found 'oh no' picture">
<h1 class="title">
{{ $t("The page you're looking for doesn't exist.") }}
</h1>
<p>
{{ $t("Please make sure the address is correct and that the page hasn't been moved.") }}
</p>
<p>
{{ $t("Please contact this instance's Mobilizon admin if you think this is a mistake.") }}
</p>
<!-- The following should just be replaced with the SearchField component but it fails for some reason -->
<form @submit="enter">
<b-field class="search">
<b-input expanded icon="magnify" type="search" :placeholder="searchPlaceHolder" v-model="searchText" />
<p class="control">
<button type="submit" class="button is-primary">{{ $t('Search') }}</button>
</p>
</b-field>
</form>
</div>
</div>
</section>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { RouteName } from '@/router';
import BField from 'buefy/src/components/field/Field.vue';
@Component({
components: {
BField,
},
})
export default class PageNotFound extends Vue {
searchText: string = '';
get searchPlaceHolder(): string {
return this.$t('Search events, groups, etc.') as string;
}
enter() {
this.$router.push({ name: RouteName.SEARCH, params: { searchTerm: this.searchText } });
}
}
</script>
<style lang="scss">
.container.not-found {
margin: auto;
max-width: 600px;
img {
margin-top: 3rem;
}
p {
margin-bottom: 1em;
}
}
</style>