[Mobile] Implement some settings page

src/web/app/common/tags.ls

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

src/web/app/common/tags/api-info.tag

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

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

@@ -0,0 +1,75 @@
+<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>

src/web/app/common/tags/twitter-setting.tag

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