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

8 files changed, 80 insertions, 2 deletions

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 }
 		]
 	});