From b47c847211c3e8c0ba7d50f2892475d1a47bfa84 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=93=E3=81=B4=E3=81=AA=E3=81=9F=E3=81=BF=E3=81=BD?= <syuilotan@yahoo.co.jp> Date: Mon, 12 Feb 2018 23:48:01 +0900 Subject: [PATCH] wip --- src/web/app/desktop/-tags/settings.tag | 163 ------------------ .../desktop/views/components/2fa-setting.vue | 76 ++++++++ .../desktop/views/components/mute-setting.vue | 31 ++++ 3 files changed, 107 insertions(+), 163 deletions(-) delete mode 100644 src/web/app/desktop/-tags/settings.tag create mode 100644 src/web/app/desktop/views/components/2fa-setting.vue create mode 100644 src/web/app/desktop/views/components/mute-setting.vue diff --git a/src/web/app/desktop/-tags/settings.tag b/src/web/app/desktop/-tags/settings.tag deleted file mode 100644 index 2196be87a6..0000000000 --- a/src/web/app/desktop/-tags/settings.tag +++ /dev/null @@ -1,163 +0,0 @@ - -<mk-2fa-setting> - <p>%i18n:desktop.tags.mk-2fa-setting.intro%<a href="%i18n:desktop.tags.mk-2fa-setting.url%" target="_blank">%i18n:desktop.tags.mk-2fa-setting.detail%</a></p> - <div class="ui info warn"><p>%fa:exclamation-triangle%%i18n:desktop.tags.mk-2fa-setting.caution%</p></div> - <p v-if="!data && !I.two_factor_enabled"><button @click="register" class="ui primary">%i18n:desktop.tags.mk-2fa-setting.register%</button></p> - <template v-if="I.two_factor_enabled"> - <p>%i18n:desktop.tags.mk-2fa-setting.already-registered%</p> - <button @click="unregister" class="ui">%i18n:desktop.tags.mk-2fa-setting.unregister%</button> - </template> - <div v-if="data"> - <ol> - <li>%i18n:desktop.tags.mk-2fa-setting.authenticator% <a href="https://support.google.com/accounts/answer/1066447" target="_blank">%i18n:desktop.tags.mk-2fa-setting.howtoinstall%</a></li> - <li>%i18n:desktop.tags.mk-2fa-setting.scan%<br><img src={ data.qr }></li> - <li>%i18n:desktop.tags.mk-2fa-setting.done%<br> - <input type="number" ref="token" class="ui"> - <button @click="submit" class="ui primary">%i18n:desktop.tags.mk-2fa-setting.submit%</button> - </li> - </ol> - <div class="ui info"><p>%fa:info-circle%%i18n:desktop.tags.mk-2fa-setting.info%</p></div> - </div> - <style lang="stylus" scoped> - :scope - display block - color #4a535a - - </style> - <script lang="typescript"> - import passwordDialog from '../scripts/password-dialog'; - import notify from '../scripts/notify'; - - this.mixin('i'); - this.mixin('api'); - - this.register = () => { - passwordDialog('%i18n:desktop.tags.mk-2fa-setting.enter-password%', password => { - this.api('i/2fa/register', { - password: password - }).then(data => { - this.update({ - data: data - }); - }); - }); - }; - - this.unregister = () => { - passwordDialog('%i18n:desktop.tags.mk-2fa-setting.enter-password%', password => { - this.api('i/2fa/unregister', { - password: password - }).then(data => { - notify('%i18n:desktop.tags.mk-2fa-setting.unregistered%'); - this.I.two_factor_enabled = false; - this.I.update(); - }); - }); - }; - - this.submit = () => { - this.api('i/2fa/done', { - token: this.$refs.token.value - }).then(() => { - notify('%i18n:desktop.tags.mk-2fa-setting.success%'); - this.I.two_factor_enabled = true; - this.I.update(); - }).catch(() => { - notify('%i18n:desktop.tags.mk-2fa-setting.failed%'); - }); - }; - </script> -</mk-2fa-setting> - -<mk-drive-setting> - <svg viewBox="0 0 1 1" preserveAspectRatio="none"> - <circle - riot-r={ r } - cx="50%" cy="50%" - fill="none" - stroke-width="0.1" - stroke="rgba(0, 0, 0, 0.05)"/> - <circle - riot-r={ r } - cx="50%" cy="50%" - riot-stroke-dasharray={ Math.PI * (r * 2) } - riot-stroke-dashoffset={ strokeDashoffset } - fill="none" - stroke-width="0.1" - riot-stroke={ color }/> - <text x="50%" y="50%" dy="0.05" text-anchor="middle">{ (usageP * 100).toFixed(0) }%</text> - </svg> - - <style lang="stylus" scoped> - :scope - display block - color #4a535a - - > svg - display block - height 128px - - > circle - transform-origin center - transform rotate(-90deg) - transition stroke-dashoffset 0.5s ease - - > text - font-size 0.15px - fill rgba(0, 0, 0, 0.6) - - </style> - <script lang="typescript"> - this.mixin('api'); - - this.r = 0.4; - - this.on('mount', () => { - this.api('drive').then(info => { - const usageP = info.usage / info.capacity; - const color = `hsl(${180 - (usageP * 180)}, 80%, 70%)`; - const strokeDashoffset = (1 - usageP) * (Math.PI * (this.r * 2)); - - this.update({ - color, - strokeDashoffset, - usageP, - usage: info.usage, - capacity: info.capacity - }); - }); - }); - </script> -</mk-drive-setting> - -<mk-mute-setting> - <div class="none ui info" v-if="!fetching && users.length == 0"> - <p>%fa:info-circle%%i18n:desktop.tags.mk-mute-setting.no-users%</p> - </div> - <div class="users" v-if="users.length != 0"> - <div each={ user in users }> - <p><b>{ user.name }</b> @{ user.username }</p> - </div> - </div> - - <style lang="stylus" scoped> - :scope - display block - - </style> - <script lang="typescript"> - this.mixin('api'); - - this.apps = []; - this.fetching = true; - - this.on('mount', () => { - this.api('mute/list').then(x => { - this.update({ - fetching: false, - users: x.users - }); - }); - }); - </script> -</mk-mute-setting> diff --git a/src/web/app/desktop/views/components/2fa-setting.vue b/src/web/app/desktop/views/components/2fa-setting.vue new file mode 100644 index 0000000000..146d707e1c --- /dev/null +++ b/src/web/app/desktop/views/components/2fa-setting.vue @@ -0,0 +1,76 @@ +<template> +<div class="mk-2fa-setting"> + <p>%i18n:desktop.tags.mk-2fa-setting.intro%<a href="%i18n:desktop.tags.mk-2fa-setting.url%" target="_blank">%i18n:desktop.tags.mk-2fa-setting.detail%</a></p> + <div class="ui info warn"><p>%fa:exclamation-triangle%%i18n:desktop.tags.mk-2fa-setting.caution%</p></div> + <p v-if="!data && !I.two_factor_enabled"><button @click="register" class="ui primary">%i18n:desktop.tags.mk-2fa-setting.register%</button></p> + <template v-if="I.two_factor_enabled"> + <p>%i18n:desktop.tags.mk-2fa-setting.already-registered%</p> + <button @click="unregister" class="ui">%i18n:desktop.tags.mk-2fa-setting.unregister%</button> + </template> + <div v-if="data"> + <ol> + <li>%i18n:desktop.tags.mk-2fa-setting.authenticator% <a href="https://support.google.com/accounts/answer/1066447" target="_blank">%i18n:desktop.tags.mk-2fa-setting.howtoinstall%</a></li> + <li>%i18n:desktop.tags.mk-2fa-setting.scan%<br><img src={ data.qr }></li> + <li>%i18n:desktop.tags.mk-2fa-setting.done%<br> + <input type="number" v-model="token" class="ui"> + <button @click="submit" class="ui primary">%i18n:desktop.tags.mk-2fa-setting.submit%</button> + </li> + </ol> + <div class="ui info"><p>%fa:info-circle%%i18n:desktop.tags.mk-2fa-setting.info%</p></div> + </div> +</div> +</template> + +<script lang="ts"> +import Vue from 'vue'; +import passwordDialog from '../../scripts/password-dialog'; +import notify from '../../scripts/notify'; + +export default Vue.extend({ + data() { + return { + data: null, + token: null + }; + }, + methods: { + register() { + passwordDialog('%i18n:desktop.tags.mk-2fa-setting.enter-password%', password => { + this.$root.$data.os.api('i/2fa/register', { + password: password + }).then(data => { + this.data = data; + }); + }); + }, + + unregister() { + passwordDialog('%i18n:desktop.tags.mk-2fa-setting.enter-password%', password => { + this.$root.$data.os.api('i/2fa/unregister', { + password: password + }).then(() => { + notify('%i18n:desktop.tags.mk-2fa-setting.unregistered%'); + this.$root.$data.os.i.two_factor_enabled = false; + }); + }); + }, + + submit() { + this.$root.$data.os.api('i/2fa/done', { + token: this.token + }).then(() => { + notify('%i18n:desktop.tags.mk-2fa-setting.success%'); + this.$root.$data.os.i.two_factor_enabled = true; + }).catch(() => { + notify('%i18n:desktop.tags.mk-2fa-setting.failed%'); + }); + } + } +}); +</script> + +<style lang="stylus" scoped> +.mk-2fa-setting + color #4a535a + +</style> diff --git a/src/web/app/desktop/views/components/mute-setting.vue b/src/web/app/desktop/views/components/mute-setting.vue new file mode 100644 index 0000000000..a8813172ae --- /dev/null +++ b/src/web/app/desktop/views/components/mute-setting.vue @@ -0,0 +1,31 @@ +<template> +<div class="mk-mute-setting"> + <div class="none ui info" v-if="!fetching && users.length == 0"> + <p>%fa:info-circle%%i18n:desktop.tags.mk-mute-setting.no-users%</p> + </div> + <div class="users" v-if="users.length != 0"> + <div v-for="user in users" :key="user.id"> + <p><b>{{ user.name }}</b> @{{ user.username }}</p> + </div> + </div> +</div> +</template> + +<script lang="ts"> +import Vue from 'vue'; + +export default Vue.extend({ + data() { + return { + fetching: true, + users: null + }; + }, + mounted() { + this.$root.$data.os.api('mute/list').then(x => { + this.fetching = false; + this.users = x.users; + }); + } +}); +</script>