[Mobile] Implement some settings page

This commit is contained in:
syuilo 2017-01-24 16:33:09 +09:00
parent 9a84663b26
commit 6d25835835
12 changed files with 147 additions and 40 deletions

View file

@ -14,3 +14,6 @@ require './tags/signup.tag'
require './tags/forkit.tag'
require './tags/introduction.tag'
require './tags/copyright.tag'
require './tags/signin-history.tag'
require './tags/api-info.tag'
require './tags/twitter-setting.tag'

View file

@ -0,0 +1,26 @@
<mk-api-info>
<p>Token:<code>{ I.token }</code></p>
<p>APIを利用するには、上記のトークンを「i」というキーでパラメータに付加してリクエストします。</p>
<p>アカウントを乗っ取られてしまう可能性があるため、このトークンは第三者に教えないでください(アプリなどにも入力しないでください)。</p>
<p>万が一このトークンが漏れたりその可能性がある場合は
<button class="regenerate" onclick={ regenerateToken }>トークンを再生成</button>できます。(副作用として、ログインしているすべてのデバイスでログアウトが発生します)
</p>
<style type="stylus">
:scope
display block
code
padding 4px
background #eee
.regenerate
display inline
color $theme-color
&:hover
text-decoration underline
</style>
<script>
@mixin \i
</script>
</mk-api-info>

View file

@ -0,0 +1,29 @@
<mk-twitter-setting>
<p>お使いのTwitterアカウントをお使いのMisskeyアカウントに接続しておくと、プロフィールでTwitterアカウント情報が表示されるようになったり、Twitterを用いた便利なサインインを利用できるようになります。<a href={ CONFIG.urls.about + '/link-to-twitter' } target="_blank">詳細...</a></p>
<p class="account" if={ I.twitter } title={ 'Twitter ID: ' + I.twitter.user_id }>次のTwitterアカウントに接続されています: <a href={ 'https://twitter.com/' + I.twitter.screen_name } target="_blank">@{ I.twitter.screen_name }</a></p>
<p>
<a href={ CONFIG.api.url + '/connect/twitter' } target="_blank">{ I.twitter ? '再接続する' : 'Twitterと接続する' }</a>
<span if={ I.twitter }> or </span>
<a href={ CONFIG.api.url + '/disconnect/twitter' } target="_blank" if={ I.twitter }>切断する</a>
</p>
<p class="id" if={ I.twitter }>Twitter ID: { I.twitter.user_id }</p>
<style type="stylus">
:scope
display block
.account
border solid 1px #e1e8ed
border-radius 4px
padding 16px
a
font-weight bold
color inherit
.id
color #8899a6
</style>
<script>
@mixin \i
</script>
</mk-twitter-setting>

View file

@ -98,4 +98,3 @@ require './tags/user-following-window.tag'
require './tags/user-followers-window.tag'
require './tags/list-user.tag'
require './tags/ui-notification.tag'
require './tags/signin-history.tag'

View file

@ -65,14 +65,7 @@
<section class="twitter" show={ page == 'twitter' }>
<h1>Twitter</h1>
<p>お使いのTwitterアカウントをお使いのMisskeyアカウントに接続しておくと、プロフィールでTwitterアカウント情報が表示されるようになったり、Twitterを用いた便利なサインインを利用できるようになります。<a href={ CONFIG.urls.about + '/link-to-twitter' } target="_blank">詳細...</a></p>
<p class="account" if={ I.twitter } title={ 'Twitter ID: ' + I.twitter.user_id }>次のTwitterアカウントに接続されています: <a href={ 'https://twitter.com/' + I.twitter.screen_name } target="_blank">@{ I.twitter.screen_name }</a></p>
<p>
<a href={ CONFIG.api.url + '/connect/twitter' } target="_blank">{ I.twitter ? '再接続する' : 'Twitterと接続する' }</a>
<span if={ I.twitter }> or </span>
<a href={ CONFIG.api.url + '/disconnect/twitter' } target="_blank" if={ I.twitter }>切断する</a>
</p>
<p class="id" if={ I.twitter }>Twitter ID: { I.twitter.user_id }</p>
<mk-twitter-setting></mk-twitter-setting>
</section>
<section class="signin" show={ page == 'signin' }>
@ -82,12 +75,7 @@
<section class="api" show={ page == 'api' }>
<h1>API</h1>
<p>Token:<code>{ I.token }</code></p>
<p>APIを利用するには、上記のトークンを「i」というキーでパラメータに付加してリクエストします。</p>
<p>アカウントを乗っ取られてしまう可能性があるため、このトークンは第三者に教えないでください(アプリなどにも入力しないでください)。</p>
<p>万が一このトークンが漏れたりその可能性がある場合は
<button class="regenerate" onclick={ regenerateToken }>トークンを再生成</button>できます。(副作用として、ログインしているすべてのデバイスでログアウトが発生します)
</p>
<mk-api-info></mk-api-info>
</section>
</div>
<style type="stylus">
@ -211,31 +199,6 @@
float left
margin-left 8px
&.twitter
.account
border solid 1px #e1e8ed
border-radius 4px
padding 16px
a
font-weight bold
color inherit
.id
color #8899a6
&.api
code
padding 4px
background #eee
.regenerate
display inline
color $theme-color
&:hover
text-decoration underline
</style>
<script>
@mixin \i

View file

@ -15,6 +15,10 @@ module.exports = (me) ~>
route \/i/drive drive
route \/i/drive/folder/:folder drive
route \/i/drive/file/:file drive
route \/i/settings settings
route \/i/settings/signin-history settings-signin
route \/i/settings/api settings-api
route \/i/settings/twitter settings-twitter
route \/post/new new-post
route \/post::post post
route \/search::query search
@ -48,6 +52,16 @@ module.exports = (me) ~>
function new-post
mount document.create-element \mk-new-post-page
# 設定
function settings
mount document.create-element \mk-settings-page
function settings-signin
mount document.create-element \mk-signin-history-page
function settings-api
mount document.create-element \mk-api-info-page
function settings-twitter
mount document.create-element \mk-twitter-setting-page
# 検索
function search ctx
document.create-element \mk-search-page

View file

@ -14,6 +14,10 @@ require './tags/page/user-following.tag'
require './tags/page/post.tag'
require './tags/page/new-post.tag'
require './tags/page/search.tag'
require './tags/page/settings.tag'
require './tags/page/settings/signin.tag'
require './tags/page/settings/api.tag'
require './tags/page/settings/twitter.tag'
require './tags/home.tag'
require './tags/home-timeline.tag'
require './tags/timeline.tag'

View file

@ -0,0 +1,21 @@
<mk-settings-page>
<mk-ui ref="ui">
<ul>
<li><a><i class="fa fa-user"></i>プロフィール</a></li>
<li><a href="./settings/twitter"><i class="fa fa-twitter"></i>Twitter連携</a></li>
<li><a href="./settings/signin-history"><i class="fa fa-sign-in"></i>ログイン履歴</a></li>
<li><a href="./settings/api"><i class="fa fa-key"></i>API</a></li>
</ul>
</mk-ui>
<style type="stylus">
:scope
display block
</style>
<script>
@mixin \ui
@on \mount ~>
document.title = 'Misskey | 設定'
@ui.trigger \title '<i class="fa fa-cog"></i>設定'
</script>
</mk-settings-page>

View file

@ -0,0 +1,16 @@
<mk-api-info-page>
<mk-ui ref="ui">
<mk-api-info></mk-api-info>
</mk-ui>
<style type="stylus">
:scope
display block
</style>
<script>
@mixin \ui
@on \mount ~>
document.title = 'Misskey | API'
@ui.trigger \title '<i class="fa fa-key"></i>API'
</script>
</mk-api-info-page>

View file

@ -0,0 +1,16 @@
<mk-signin-history-page>
<mk-ui ref="ui">
<mk-signin-history></mk-signin-history>
</mk-ui>
<style type="stylus">
:scope
display block
</style>
<script>
@mixin \ui
@on \mount ~>
document.title = 'Misskey | ログイン履歴'
@ui.trigger \title '<i class="fa fa-sign-in"></i>ログイン履歴'
</script>
</mk-signin-history-page>

View file

@ -0,0 +1,16 @@
<mk-twitter-setting-page>
<mk-ui ref="ui">
<mk-twitter-setting></mk-twitter-setting>
</mk-ui>
<style type="stylus">
:scope
display block
</style>
<script>
@mixin \ui
@on \mount ~>
document.title = 'Misskey | Twitter連携'
@ui.trigger \title '<i class="fa fa-twitter"></i>Twitter連携'
</script>
</mk-twitter-setting-page>