[Mobile] Implement some settings page

src/web/app/desktop/tags.ls

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

src/web/app/desktop/tags/settings.tag

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

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

@@ -1,75 +0,0 @@
-<mk-signin-history>
-	<div class="records" if={ history.length != 0 }>
-		<div each={ history }>
-			<mk-time time={ created_at }></mk-time>
-			<header><i class="fa fa-check" if={ success }></i><i class="fa fa-times" if={ !success }></i><span class="ip">{ ip }</span></header>
-			<pre><code>{ JSON.stringify(headers, null, '    ') }</code></pre>
-		</div>
-	</div>
-	<style type="stylus">
-		:scope
-			display block
-
-			> .records
-				> div
-					padding 16px 0 0 0
-					border-bottom solid 1px #eee
-
-					> header
-
-						> i
-							margin-right 8px
-
-							&.fa-check
-								color #0fda82
-
-							&.fa-times
-								color #ff3100
-
-						> .ip
-							display inline-block
-							color #444
-							background #f8f8f8
-
-					> mk-time
-						position absolute
-						top 16px
-						right 0
-						color #777
-
-					> pre
-						overflow auto
-						max-height 100px
-
-						> code
-							white-space pre-wrap
-							word-break break-all
-							color #4a535a
-
-	</style>
-	<script>
-		@mixin \api
-		@mixin \stream
-
-		@history = []
-		@fetching = true
-
-		@on \mount ~>
-			@api \i/signin_history
-			.then (history) ~>
-				@history = history
-				@fetching = false
-				@update!
-			.catch (err) ~>
-				console.error err
-
-			@stream.on \signin @on-signin
-
-		@on \unmount ~>
-			@stream.off \signin @on-signin
-
-		@on-signin = (signin) ~>
-			@history.unshift signin
-			@update!
-	</script>
-</mk-signin-history>