From 08142ead678c598b8500f563cc117bfa7faf5944 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Acid=20Chicken=20=28=E7=A1=AB=E9=85=B8=E9=B6=8F=29?=
 <root@acid-chicken.com>
Date: Tue, 11 Dec 2018 20:19:13 +0900
Subject: [PATCH] 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                             |  3 +
 src/client/app/admin/script.ts                |  2 +
 src/client/app/admin/views/instance.vue       |  4 ++
 src/client/app/auth/script.ts                 |  2 +
 src/client/app/common/views/pages/404.vue     | 62 +++++++++++++++++++
 src/client/app/desktop/script.ts              |  4 +-
 src/client/app/dev/script.ts                  |  2 +
 src/client/app/mobile/script.ts               |  4 +-
 src/client/app/test/script.ts                 |  2 +
 src/models/meta.ts                            |  1 +
 src/server/api/endpoints/admin/update-meta.ts |  7 +++
 11 files changed, 91 insertions(+), 2 deletions(-)
 create mode 100644 src/client/app/common/views/pages/404.vue

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 671d9ae335..a98d055f83 100644
--- a/locales/ja-JP.yml
+++ b/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: "フォロー中"
diff --git a/src/client/app/admin/script.ts b/src/client/app/admin/script.ts
index 4002734d3d..1b9b91c865 100644
--- a/src/client/app/admin/script.ts
+++ b/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 }
 		]
 	});
 
diff --git a/src/client/app/admin/views/instance.vue b/src/client/app/admin/views/instance.vue
index 353abfd12c..db1f39c604 100644
--- a/src/client/app/admin/views/instance.vue
+++ b/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(' '),
diff --git a/src/client/app/auth/script.ts b/src/client/app/auth/script.ts
index 3d916e8d79..9dc6e57333 100644
--- a/src/client/app/auth/script.ts
+++ b/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 }
 		]
 	});
 
diff --git a/src/client/app/common/views/pages/404.vue b/src/client/app/common/views/pages/404.vue
new file mode 100644
index 0000000000..236e43ec65
--- /dev/null
+++ b/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>
diff --git a/src/client/app/desktop/script.ts b/src/client/app/desktop/script.ts
index dd4cad68c9..ebde75e3b4 100644
--- a/src/client/app/desktop/script.ts
+++ b/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 }
 		]
 	});
 
diff --git a/src/client/app/dev/script.ts b/src/client/app/dev/script.ts
index c043813b40..33b15bfb8e 100644
--- a/src/client/app/dev/script.ts
+++ b/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 }
 		]
 	});
 
diff --git a/src/client/app/mobile/script.ts b/src/client/app/mobile/script.ts
index 7fe3ab05d9..5dc39ad788 100644
--- a/src/client/app/mobile/script.ts
+++ b/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 }
 		]
 	});
 
diff --git a/src/client/app/test/script.ts b/src/client/app/test/script.ts
index 5818cf2913..d9fb666789 100644
--- a/src/client/app/test/script.ts
+++ b/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 }
 		]
 	});
 
diff --git a/src/models/meta.ts b/src/models/meta.ts
index c8ef18a691..66cdf76d33 100644
--- a/src/models/meta.ts
+++ b/src/models/meta.ts
@@ -173,6 +173,7 @@ export type IMeta = {
 	disableLocalTimeline?: boolean;
 	hidedTags?: string[];
 	bannerUrl?: string;
+	errorImageUrl?: string;
 
 	cacheRemoteFiles?: boolean;
 
diff --git a/src/server/api/endpoints/admin/update-meta.ts b/src/server/api/endpoints/admin/update-meta.ts
index 89d4e24252..b191682449 100644
--- a/src/server/api/endpoints/admin/update-meta.ts
+++ b/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: {