✌️
This commit is contained in:
syuilo
parent
e4b7c17967
commit
3a1978cb65
7 changed files with 147 additions and 153 deletions
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
39
src/web/app/desktop/views/components/settings.apps.vue
Normal file
39
src/web/app/desktop/views/components/settings.apps.vue
Normal 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>
|
||||
98
src/web/app/desktop/views/components/settings.signins.vue
Normal file
98
src/web/app/desktop/views/components/settings.signins.vue
Normal 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>
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue