✌️

package.json

@@ -185,6 +185,7 @@
 		"vue": "2.5.13",
 		"vue-cropperjs": "2.2.0",
 		"vue-js-modal": "1.3.12",
+		"vue-json-tree-view": "^2.1.3",
 		"vue-loader": "14.1.1",
 		"vue-router": "3.0.1",
 		"vue-template-compiler": "2.5.13",

src/web/app/common/-tags/authorized-apps.tag

@@ -1,34 +0,0 @@
-<mk-authorized-apps>
-	<div class="none ui info" v-if="!fetching && apps.length == 0">
-		<p>%fa:info-circle%%i18n:common.tags.mk-authorized-apps.no-apps%</p>
-	</div>
-	<div class="apps" v-if="apps.length != 0">
-		<div each={ app in apps }>
-			<p><b>{ app.name }</b></p>
-			<p>{ app.description }</p>
-		</div>
-	</div>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-			> .apps
-				> div
-					padding 16px 0 0 0
-					border-bottom solid 1px #eee
-
-	</style>
-	<script lang="typescript">
-		this.mixin('api');
-
-		this.apps = [];
-		this.fetching = true;
-
-		this.on('mount', () => {
-			this.$root.$data.os.api('i/authorized_apps').then(apps => {
-				this.apps = apps;
-				this.fetching = false;
-			});
-		});
-	</script>
-</mk-authorized-apps>

src/web/app/common/-tags/signin-history.tag

@@ -1,116 +0,0 @@
-<mk-signin-history>
-	<div class="records" v-if="history.length != 0">
-		<mk-signin-record each={ rec in history } rec={ rec }/>
-	</div>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-	</style>
-	<script lang="typescript">
-		this.mixin('i');
-		this.mixin('api');
-
-		this.mixin('stream');
-		this.connection = this.stream.getConnection();
-		this.connectionId = this.stream.use();
-
-		this.history = [];
-		this.fetching = true;
-
-		this.on('mount', () => {
-			this.$root.$data.os.api('i/signin_history').then(history => {
-				this.update({
-					fetching: false,
-					history: history
-				});
-			});
-
-			this.connection.on('signin', this.onSignin);
-		});
-
-		this.on('unmount', () => {
-			this.connection.off('signin', this.onSignin);
-			this.stream.dispose(this.connectionId);
-		});
-
-		this.onSignin = signin => {
-			this.history.unshift(signin);
-			this.update();
-		};
-	</script>
-</mk-signin-history>
-
-<mk-signin-record>
-	<header @click="toggle">
-		<template v-if="rec.success">%fa:check%</template>
-		<template v-if="!rec.success">%fa:times%</template>
-		<span class="ip">{ rec.ip }</span>
-		<mk-time time={ rec.created_at }/>
-	</header>
-	<pre ref="headers" class="json" show={ show }>{ JSON.stringify(rec.headers, null, 2) }</pre>
-
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			border-bottom solid 1px #eee
-
-			> header
-				display flex
-				padding 8px 0
-				line-height 32px
-				cursor pointer
-
-				> [data-fa]
-					margin-right 8px
-					text-align left
-
-					&.check
-						color #0fda82
-
-					&.times
-						color #ff3100
-
-				> .ip
-					display inline-block
-					text-align left
-					padding 8px
-					line-height 16px
-					font-family monospace
-					font-size 14px
-					color #444
-					background #f8f8f8
-					border-radius 4px
-
-				> mk-time
-					margin-left auto
-					text-align right
-					color #777
-
-			> pre
-				overflow auto
-				margin 0 0 16px 0
-				max-height 100px
-				white-space pre-wrap
-				word-break break-all
-				color #4a535a
-
-	</style>
-
-	<script lang="typescript">
-		import hljs from 'highlight.js';
-
-		this.rec = this.opts.rec;
-		this.show = false;
-
-		this.on('mount', () => {
-			hljs.highlightBlock(this.$refs.headers);
-		});
-
-		this.toggle = () => {
-			this.update({
-				show: !this.show
-			});
-		};
-	</script>
-</mk-signin-record>

src/web/app/desktop/views/components/settings.apps.vue

@@ -0,0 +1,39 @@
+<template>
+<div class="root">
+	<div class="none ui info" v-if="!fetching && apps.length == 0">
+		<p>%fa:info-circle%%i18n:common.tags.mk-authorized-apps.no-apps%</p>
+	</div>
+	<div class="apps" v-if="apps.length != 0">
+		<div v-for="app in apps">
+			<p><b>{{ app.name }}</b></p>
+			<p>{{ app.description }}</p>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	data() {
+		return {
+			fetching: true,
+			apps: []
+		};
+	},
+	mounted() {
+		(this as any).api('i/authorized_apps').then(apps => {
+			this.apps = apps;
+			this.fetching = false;
+		});
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.root
+	> .apps
+		> div
+			padding 16px 0 0 0
+			border-bottom solid 1px #eee
+</style>

src/web/app/desktop/views/components/settings.signins.vue

@@ -0,0 +1,98 @@
+<template>
+<div class="root">
+<div class="signins" v-if="signins.length != 0">
+	<div v-for="signin in signins">
+		<header @click="signin._show = !signin._show">
+			<template v-if="signin.success">%fa:check%</template>
+			<template v-else>%fa:times%</template>
+			<span class="ip">{{ signin.ip }}</span>
+			<mk-time :time="signin.created_at"/>
+		</header>
+		<div class="headers" v-show="signin._show">
+			<tree-view :data="signin.headers"/>
+		</div>
+	</div>
+</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	data() {
+		return {
+			fetching: true,
+			signins: [],
+			connection: null,
+			connectionId: null
+		};
+	},
+	mounted() {
+		(this as any).api('i/signin_history').then(signins => {
+			this.signins = signins;
+			this.fetching = false;
+		});
+
+		this.connection = (this as any).os.stream.getConnection();
+		this.connectionId = (this as any).os.stream.use();
+
+		this.connection.on('signin', this.onSignin);
+	},
+	beforeDestroy() {
+		this.connection.off('signin', this.onSignin);
+		(this as any).os.stream.dispose(this.connectionId);
+	},
+	methods: {
+		onSignin(signin) {
+			this.signins.unshift(signin);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.root
+	> .signins
+		> div
+			border-bottom solid 1px #eee
+
+			> header
+				display flex
+				padding 8px 0
+				line-height 32px
+				cursor pointer
+
+				> [data-fa]
+					margin-right 8px
+					text-align left
+
+					&.check
+						color #0fda82
+
+					&.times
+						color #ff3100
+
+				> .ip
+					display inline-block
+					text-align left
+					padding 8px
+					line-height 16px
+					font-family monospace
+					font-size 14px
+					color #444
+					background #f8f8f8
+					border-radius 4px
+
+				> .mk-time
+					margin-left auto
+					text-align right
+					color #777
+
+			> .headers
+				overflow auto
+				margin 0 0 16px 0
+				max-height 100px
+				white-space pre-wrap
+				word-break break-all
+
+</style>

src/web/app/desktop/views/components/settings.vue

@@ -81,7 +81,7 @@
 
 		<section class="apps" v-show="page == 'apps'">
 			<h1>アプリケーション</h1>
-			<mk-authorized-apps/>
+			<x-apps/>
 		</section>
 
 		<section class="twitter" v-show="page == 'twitter'">
@@ -101,7 +101,7 @@
 
 		<section class="signin" v-show="page == 'security'">
 			<h1>サインイン履歴</h1>
-			<mk-signin-history/>
+			<x-signins/>
 		</section>
 
 		<section class="api" v-show="page == 'api'">
@@ -161,6 +161,8 @@ import XMute from './settings.mute.vue';
 import XPassword from './settings.password.vue';
 import X2fa from './settings.2fa.vue';
 import XApi from './settings.api.vue';
+import XApps from './settings.apps.vue';
+import XSignins from './settings.signins.vue';
 import { docsUrl, license, lang, version } from '../../../config';
 import checkForUpdate from '../../../common/scripts/check-for-update';
 
@@ -170,7 +172,9 @@ export default Vue.extend({
 		XMute,
 		XPassword,
 		X2fa,
-		XApi
+		XApi,
+		XApps,
+		XSignins
 	},
 	data() {
 		return {

src/web/app/init.ts

@@ -5,6 +5,7 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import VModal from 'vue-js-modal';
+import * as TreeView from 'vue-json-tree-view';
 import Element from 'element-ui';
 import ElementLocaleEn from 'element-ui/lib/locale/lang/en';
 import ElementLocaleJa from 'element-ui/lib/locale/lang/ja';
@@ -23,6 +24,7 @@ switch (lang) {
 
 Vue.use(VueRouter);
 Vue.use(VModal);
+Vue.use(TreeView);
 Vue.use(Element, { locale: elementLocale });
 
 // Register global directives