Resolve #3581 (#3589)

* Update ja-JP.yml

* Create 404.vue

* Update script.ts

* Update script.ts

* Update script.ts

* Update script.ts

* Update script.ts

* Update script.ts

* Update 404.vue

* Update meta.ts

* Update instance.vue

* Update update-meta.ts

locales/ja-JP.yml

@@ -580,6 +580,9 @@ common/views/widgets/tips.vue:
   tips-line24: "Misskeyは2014年にサービスを開始しました"
   tips-line25: "対応ブラウザではMisskeyを開いていなくても通知を受け取れます"
 
+common/views/pages/404.vue:
+  page-not-found: "ページが見つかりませんでした"
+
 common/views/pages/follow.vue:
   signed-in-as: "{}としてサインイン中"
   following: "フォロー中"

src/client/app/admin/script.ts

@@ -9,6 +9,7 @@ import './style.styl';
 
 import init from '../init';
 import Index from './views/index.vue';
+import NotFound from '../common/views/pages/404.vue';
 
 init(launch => {
 	document.title = 'Admin';
@@ -19,6 +20,7 @@ init(launch => {
 		base: '/admin/',
 		routes: [
 			{ path: '/', component: Index },
+			{ path: '*', component: NotFound }
 		]
 	});
 

src/client/app/admin/views/instance.vue

@@ -7,6 +7,7 @@
 			<ui-input v-model="name">{{ $t('instance-name') }}</ui-input>
 			<ui-textarea v-model="description">{{ $t('instance-description') }}</ui-textarea>
 			<ui-input v-model="bannerUrl"><i slot="icon"><fa icon="link"/></i>{{ $t('banner-url') }}</ui-input>
+			<ui-input v-model="errorImageUrl"><i slot="icon"><fa icon="link"/></i>{{ $t('error-image-url') }}</ui-input>
 			<ui-input v-model="languages"><i slot="icon"><fa icon="language"/></i>{{ $t('languages') }}<span slot="desc">{{ $t('languages-desc') }}</span></ui-input>
 		</section>
 		<section class="fit-bottom">
@@ -132,6 +133,7 @@ export default Vue.extend({
 			disableRegistration: false,
 			disableLocalTimeline: false,
 			bannerUrl: null,
+			errorImageUrl: null,
 			name: null,
 			description: null,
 			languages: null,
@@ -175,6 +177,7 @@ export default Vue.extend({
 			this.disableRegistration = meta.disableRegistration;
 			this.disableLocalTimeline = meta.disableLocalTimeline;
 			this.bannerUrl = meta.bannerUrl;
+			this.errorImageUrl = meta.errorImageUrl;
 			this.name = meta.name;
 			this.description = meta.description;
 			this.languages = meta.langs.join(' ');
@@ -228,6 +231,7 @@ export default Vue.extend({
 				disableRegistration: this.disableRegistration,
 				disableLocalTimeline: this.disableLocalTimeline,
 				bannerUrl: this.bannerUrl,
+				errorImageUrl: this.errorImageUrl,
 				name: this.name,
 				description: this.description,
 				langs: this.languages.split(' '),

src/client/app/auth/script.ts

@@ -9,6 +9,7 @@ import './style.styl';
 
 import init from '../init';
 import Index from './views/index.vue';
+import NotFound from '../common/views/pages/404.vue';
 
 /**
  * init
@@ -20,6 +21,7 @@ init(launch => {
 		base: '/auth/',
 		routes: [
 			{ path: '/:token', component: Index },
+			{ path: '*', component: NotFound }
 		]
 	});
 

src/client/app/common/views/pages/404.vue

@@ -0,0 +1,62 @@
+<template>
+<figure>
+<img :src="src" alt="">
+<figcaption>
+<h1><span>404</span></h1>
+<p><span>{{ $t('page-not-found') }}</span></p>
+</figcaption>
+</figure>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import i18n from '../../../i18n';
+
+export default Vue.extend({
+	i18n: i18n('common/views/pages/404.vue'),
+	data() {
+		return {
+			src: '/assets/error.jpg'
+		}
+	},
+	created() {
+		this.$root.getMeta().then(meta => {
+			if (meta.errorImageUrl)
+				this.src = meta.errorImageUrl;
+		});
+	}
+})
+</script>
+
+<style lang="stylus" scoped>
+figure
+	align-items center
+	bottom 0
+	display flex
+	justify-content center
+	left 0
+	margin auto
+	position fixed
+	right 0
+	top 0
+
+	figcaption
+		margin 8px
+
+		h1,
+		p
+			color var(--text)
+			display flex
+			flex-flow column
+
+			*
+				position relative
+				width 100%
+
+@media (max-width: 767px)
+	figure
+		flex-flow column
+
+	figcaption
+		text-align center
+</style>

src/client/app/desktop/script.ts

@@ -28,6 +28,7 @@ import MkTag from './views/pages/tag.vue';
 import MkReversi from './views/pages/games/reversi.vue';
 import MkShare from './views/pages/share.vue';
 import MkFollow from '../common/views/pages/follow.vue';
+import MkNotFound from '../common/views/pages/404.vue';
 
 import Ctx from './views/components/context-menu.vue';
 import PostFormWindow from './views/components/post-form-window.vue';
@@ -148,7 +149,8 @@ init(async (launch) => {
 			{ path: '/@:user/following', name: 'userFollowing', component: MkUserFollowingOrFollowers },
 			{ path: '/@:user/followers', name: 'userFollowers', component: MkUserFollowingOrFollowers },
 			{ path: '/notes/:note', name: 'note', component: MkNote },
-			{ path: '/authorize-follow', component: MkFollow }
+			{ path: '/authorize-follow', component: MkFollow },
+			{ path: '*', component: MkNotFound }
 		]
 	});
 

src/client/app/dev/script.ts

@@ -18,6 +18,7 @@ import Apps from './views/apps.vue';
 import AppNew from './views/new-app.vue';
 import App from './views/app.vue';
 import ui from './views/ui.vue';
+import NotFound from '../common/views/pages/404.vue';
 
 Vue.use(BootstrapVue);
 
@@ -36,6 +37,7 @@ init(launch => {
 			{ path: '/apps', component: Apps },
 			{ path: '/app/new', component: AppNew },
 			{ path: '/app/:id', component: App },
+			{ path: '*', component: NotFound }
 		]
 	});
 

src/client/app/mobile/script.ts

@@ -31,6 +31,7 @@ import MkReversi from './views/pages/games/reversi.vue';
 import MkTag from './views/pages/tag.vue';
 import MkShare from './views/pages/share.vue';
 import MkFollow from '../common/views/pages/follow.vue';
+import MkNotFound from '../common/views/pages/404.vue';
 
 import PostForm from './views/components/post-form-dialog.vue';
 import FileChooser from './views/components/drive-file-chooser.vue';
@@ -138,7 +139,8 @@ init((launch) => {
 			{ path: '/@:user/followers', component: MkFollowers },
 			{ path: '/@:user/following', component: MkFollowing },
 			{ path: '/notes/:note', component: MkNote },
-			{ path: '/authorize-follow', component: MkFollow }
+			{ path: '/authorize-follow', component: MkFollow },
+			{ path: '*', component: MkNotFound }
 		]
 	});
 

src/client/app/test/script.ts

@@ -5,6 +5,7 @@ import './style.styl';
 
 import init from '../init';
 import Index from './views/index.vue';
+import NotFound from '../common/views/pages/404.vue';
 
 init(launch => {
 	document.title = 'Misskey';
@@ -15,6 +16,7 @@ init(launch => {
 		base: '/test/',
 		routes: [
 			{ path: '/', component: Index },
+			{ path: '*', component: NotFound }
 		]
 	});
 

src/models/meta.ts

@@ -173,6 +173,7 @@ export type IMeta = {
 	disableLocalTimeline?: boolean;
 	hidedTags?: string[];
 	bannerUrl?: string;
+	errorImageUrl?: string;
 
 	cacheRemoteFiles?: boolean;
 

src/server/api/endpoints/admin/update-meta.ts

@@ -46,6 +46,13 @@ export const meta = {
 			}
 		},
 
+		errorImageUrl: {
+			validator: $.str.optional.nullable,
+			desc: {
+				'ja-JP': 'インスタンスのエラー画像URL'
+			}
+		},
+
 		name: {
 			validator: $.str.optional.nullable,
 			desc: {