From c2a8e29ef993e620086f1f1ff45c2caa203f5e9d Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 6 Feb 2020 23:20:59 +0900
Subject: [PATCH] Not found page

---
 locales/ja-JP.yml              |  2 ++
 src/client/pages/not-found.vue | 36 ++++++++++++++++++++++++++++++++++
 src/client/router.ts           |  2 +-
 3 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 src/client/pages/not-found.vue

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index cb5e5d757..4d97952d9 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -352,6 +352,8 @@ autoReloadWhenDisconnected: "サーバー切断時に自動リロード"
 autoNoteWatch: "ノートの自動ウォッチ"
 reduceUiAnimation: "UIのアニメーションを減らす"
 share: "共有"
+notFound: "見つかりません"
+notFoundDescription: "指定されたURLに該当するページはありませんでした。"
 
 _2fa:
   registerDevice: "デバイスを登録"
diff --git a/src/client/pages/not-found.vue b/src/client/pages/not-found.vue
new file mode 100644
index 000000000..05bd34772
--- /dev/null
+++ b/src/client/pages/not-found.vue
@@ -0,0 +1,36 @@
+<template>
+<div class="">
+	<portal to="icon"><fa :icon="faExclamationTriangle"/></portal>
+	<portal to="title">{{ $t('notFound') }}</portal>
+
+	<section class="_card">
+		<div class="_title"><fa :icon="faExclamationTriangle"/> {{ $t('notFound') }}</div>
+		<div class="_content">{{ $t('notFoundDescription') }}</div>
+	</section>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+import i18n from '../i18n';
+
+export default Vue.extend({
+	i18n,
+
+	metaInfo() {
+		return {
+			title: this.$t('notFound') as string
+		};
+	},
+
+	data() {
+		return {
+			faExclamationTriangle
+		}
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/src/client/router.ts b/src/client/router.ts
index 70bc48c49..c1140355f 100644
--- a/src/client/router.ts
+++ b/src/client/router.ts
@@ -53,7 +53,7 @@ export const router = new VueRouter({
 		{ path: '/auth/:token', component: page('auth') },
 		{ path: '/authorize-follow', component: page('follow') },
 		{ path: '/share', component: page('share') },
-		/*{ path: '*', component: MkNotFound }*/
+		{ path: '*', component: page('not-found') }
 	],
 	// なんかHacky
 	// 通常の使い方をすると scroll メソッドの behavior を設定できないため、自前で window.scroll するようにする