[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/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>

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>
+			<mk-twitter-setting></mk-twitter-setting>
-			<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>
 		</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>
+			<mk-api-info></mk-api-info>
-			<p>APIを利用するには、上記のトークンを「i」というキーでパラメータに付加してリクエストします。</p>
-			<p>アカウントを乗っ取られてしまう可能性があるため、このトークンは第三者に教えないでください(アプリなどにも入力しないでください)。</p>
-			<p>万が一このトークンが漏れたりその可能性がある場合は
-				<button class="regenerate" onclick={ regenerateToken }>トークンを再生成</button>できます。(副作用として、ログインしているすべてのデバイスでログアウトが発生します)
-			</p>
 		</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/mobile/router.ls

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

src/web/app/mobile/tags.ls

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

src/web/app/mobile/tags/page/settings.tag

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

src/web/app/mobile/tags/page/settings/api.tag

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

src/web/app/mobile/tags/page/settings/signin.tag

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

src/web/app/mobile/tags/page/settings/twitter.tag

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