This commit is contained in:
syuilo 2018-03-05 18:11:07 +09:00
parent e4b7c17967
commit 3a1978cb65
7 changed files with 147 additions and 153 deletions

View file

@ -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",

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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 {

View file

@ -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