#16

2 files changed, 219 insertions, 212 deletions

diff --git a/src/web/app/auth/tags/form.tag b/src/web/app/auth/tags/form.tag
index f5b1555554..21c2339bc7 100644
--- a/src/web/app/auth/tags/form.tag
+++ b/src/web/app/auth/tags/form.tag
@@ -1,126 +1,126 @@
-mk-form
-	header
-		h1
-			i { app.name }
-			| があなたの
-			b アカウント
-			| に
-			b アクセス
-			| することを
-			b 許可
-			| しますか？
-		img(src={ app.icon_url + '?thumbnail&size=64' })
-	div.app
-		section
-			h2 { app.name }
-			p.nid { app.name_id }
-			p.description { app.description }
-		section
-			h2 このアプリは次の権限を要求しています:
-			ul
-				virtual(each={ p in app.permission })
-					li(if={ p == 'account-read' }) アカウントの情報を見る。
-					li(if={ p == 'account-write' }) アカウントの情報を操作する。
-					li(if={ p == 'post-write' }) 投稿する。
-					li(if={ p == 'like-write' }) いいねしたりいいね解除する。
-					li(if={ p == 'following-write' }) フォローしたりフォロー解除する。
-					li(if={ p == 'drive-read' }) ドライブを見る。
-					li(if={ p == 'drive-write' }) ドライブを操作する。
-					li(if={ p == 'notification-read' }) 通知を見る。
-					li(if={ p == 'notification-write' }) 通知を操作する。
-
-	div.action
-		button(onclick={ cancel }) キャンセル
-		button(onclick={ accept }) アクセスを許可
+<mk-form>
+	<header>
+		<h1><i>{ app.name }</i>があなたの<b>アカウント</b>に<b>アクセス</b>することを<b>許可</b>しますか？</h1><img src="{ app.icon_url + '?thumbnail&amp;size=64' }"/>
+	</header>
+	<div class="app">
+		<section>
+			<h2>{ app.name }</h2>
+			<p class="nid">{ app.name_id }</p>
+			<p class="description">{ app.description }</p>
+		</section>
+		<section>
+			<h2>このアプリは次の権限を要求しています:</h2>
+			<ul>
+				<virtual each="{ p in app.permission }">
+					<li if="{ p == 'account-read' }">アカウントの情報を見る。</li>
+					<li if="{ p == 'account-write' }">アカウントの情報を操作する。</li>
+					<li if="{ p == 'post-write' }">投稿する。</li>
+					<li if="{ p == 'like-write' }">いいねしたりいいね解除する。</li>
+					<li if="{ p == 'following-write' }">フォローしたりフォロー解除する。</li>
+					<li if="{ p == 'drive-read' }">ドライブを見る。</li>
+					<li if="{ p == 'drive-write' }">ドライブを操作する。</li>
+					<li if="{ p == 'notification-read' }">通知を見る。</li>
+					<li if="{ p == 'notification-write' }">通知を操作する。</li>
+				</virtual>
+			</ul>
+		</section>
+	</div>
+	<div class="action">
+		<button onclick="{ cancel }">キャンセル</button>
+		<button onclick="{ accept }">アクセスを許可</button>
+	</div>
+	<style type="stylus">
+		:scope
+			display block
 
-style.
-	display block
+			> header
+				> h1
+					margin 0
+					padding 32px 32px 20px 32px
+					font-size 24px
+					font-weight normal
+					color #777
 
-	> header
-		> h1
-			margin 0
-			padding 32px 32px 20px 32px
-			font-size 24px
-			font-weight normal
-			color #777
+					i
+						color #77aeca
 
-			i
-				color #77aeca
+						&:before
+							content '「'
 
-				&:before
-					content '「'
+						&:after
+							content '」'
 
-				&:after
-					content '」'
+					b
+						color #666
 
-			b
-				color #666
+				> img
+					display block
+					z-index 1
+					width 84px
+					height 84px
+					margin 0 auto -38px auto
+					border solid 5px #fff
+					border-radius 100%
+					box-shadow 0 2px 2px rgba(0, 0, 0, 0.1)
 
-		> img
-			display block
-			z-index 1
-			width 84px
-			height 84px
-			margin 0 auto -38px auto
-			border solid 5px #fff
-			border-radius 100%
-			box-shadow 0 2px 2px rgba(0, 0, 0, 0.1)
+			> .app
+				padding 44px 16px 0 16px
+				color #555
+				background #eee
+				box-shadow 0 2px 2px rgba(0, 0, 0, 0.1) inset
 
-	> .app
-		padding 44px 16px 0 16px
-		color #555
-		background #eee
-		box-shadow 0 2px 2px rgba(0, 0, 0, 0.1) inset
-
-		&:after
-			content ''
-			display block
-			clear both
+				&:after
+					content ''
+					display block
+					clear both
 
-		> section
-			float left
-			width 50%
-			padding 8px
-			text-align left
+				> section
+					float left
+					width 50%
+					padding 8px
+					text-align left
 
-			> h2
-				margin 0
-				font-size 16px
-				color #777
+					> h2
+						margin 0
+						font-size 16px
+						color #777
 
-	> .action
-		padding 16px
+			> .action
+				padding 16px
 
-		> button
-			margin 0 8px
+				> button
+					margin 0 8px
 
-	@media (max-width 600px)
-		> header
-			> img
-				box-shadow none
+			@media (max-width 600px)
+				> header
+					> img
+						box-shadow none
 
-		> .app
-			box-shadow none
+				> .app
+					box-shadow none
 
-	@media (max-width 500px)
-		> header
-			> h1
-				font-size 16px
+			@media (max-width 500px)
+				> header
+					> h1
+						font-size 16px
 
-script.
-	@mixin \api
+	</style>
+	<script>
+		@mixin \api
 
-	@session = @opts.session
-	@app = @session.app
+		@session = @opts.session
+		@app = @session.app
 
-	@cancel = ~>
-		@api \auth/deny do
-			token: @session.token
-		.then ~>
-			@trigger \denied
+		@cancel = ~>
+			@api \auth/deny do
+				token: @session.token
+			.then ~>
+				@trigger \denied
 
-	@accept = ~>
-		@api \auth/accept do
-			token: @session.token
-		.then ~>
-			@trigger \accepted
+		@accept = ~>
+			@api \auth/accept do
+				token: @session.token
+			.then ~>
+				@trigger \accepted
+	</script>
+</mk-form>
diff --git a/src/web/app/auth/tags/index.tag b/src/web/app/auth/tags/index.tag
index b7017daec6..d4818b9bfd 100644
--- a/src/web/app/auth/tags/index.tag
+++ b/src/web/app/auth/tags/index.tag
@@ -1,129 +1,136 @@
-mk-index
-	main(if={ SIGNIN })
-		p.fetching(if={ fetching })
-			| 読み込み中
-			mk-ellipsis
-		mk-form@form(if={ state == null && !fetching }, session={ session })
-		div.denied(if={ state == 'denied' })
-			h1 アプリケーションの連携をキャンセルしました。
-			p このアプリがあなたのアカウントにアクセスすることはありません。
-		div.accepted(if={ state == 'accepted' })
-			h1 { session.app.is_authorized ? 'このアプリは既に連携済みです' : 'アプリケーションの連携を許可しました'}
-			p(if={ session.app.callback_url })
-				| アプリケーションに戻っています
-				mk-ellipsis
-			p(if={ !session.app.callback_url }) アプリケーションに戻って、やっていってください。
-		div.error(if={ state == 'fetch-session-error' })
-			p セッションが存在しません。
-	main.signin(if={ !SIGNIN })
-		h1 サインインしてください
-		mk-signin
-	footer
-		img(src='/_/resources/auth/logo.svg', alt='Misskey')
+<mk-index>
+	<main if="{ SIGNIN }">
+		<p class="fetching" if="{ fetching }">読み込み中
+			<mk-ellipsis></mk-ellipsis>
+		</p>
+		<mk-form ref="form" if="{ state == null &amp;&amp; !fetching }" session="{ session }"></mk-form>
+		<div class="denied" if="{ state == 'denied' }">
+			<h1>アプリケーションの連携をキャンセルしました。</h1>
+			<p>このアプリがあなたのアカウントにアクセスすることはありません。</p>
+		</div>
+		<div class="accepted" if="{ state == 'accepted' }">
+			<h1>{ session.app.is_authorized ? 'このアプリは既に連携済みです' : 'アプリケーションの連携を許可しました'}</h1>
+			<p if="{ session.app.callback_url }">アプリケーションに戻っています
+				<mk-ellipsis></mk-ellipsis>
+			</p>
+			<p if="{ !session.app.callback_url }">アプリケーションに戻って、やっていってください。</p>
+		</div>
+		<div class="error" if="{ state == 'fetch-session-error' }">
+			<p>セッションが存在しません。</p>
+		</div>
+	</main>
+	<main class="signin" if="{ !SIGNIN }">
+		<h1>サインインしてください</h1>
+		<mk-signin></mk-signin>
+	</main>
+	<footer><img src="/_/resources/auth/logo.svg" alt="Misskey"/></footer>
+	<style type="stylus">
+		:scope
+			display block
 
-style.
-	display block
+			> main
+				width 100%
+				max-width 500px
+				margin 0 auto
+				text-align center
+				background #fff
+				box-shadow 0px 4px 16px rgba(0, 0, 0, 0.2)
 
-	> main
-		width 100%
-		max-width 500px
-		margin 0 auto
-		text-align center
-		background #fff
-		box-shadow 0px 4px 16px rgba(0, 0, 0, 0.2)
+				> .fetching
+					margin 0
+					padding 32px
+					color #555
 
-		> .fetching
-			margin 0
-			padding 32px
-			color #555
+				> div
+					padding 64px
 
-		> div
-			padding 64px
+					> h1
+						margin 0 0 8px 0
+						padding 0
+						font-size 20px
+						font-weight normal
 
-			> h1
-				margin 0 0 8px 0
-				padding 0
-				font-size 20px
-				font-weight normal
+					> p
+						margin 0
+						color #555
 
-			> p
-				margin 0
-				color #555
+					&.denied > h1
+						color #e65050
 
-			&.denied > h1
-				color #e65050
+					&.accepted > h1
+						color #50bbe6
 
-			&.accepted > h1
-				color #50bbe6
+				&.signin
+					padding 32px 32px 16px 32px
 
-		&.signin
-			padding 32px 32px 16px 32px
+					> h1
+						margin 0 0 22px 0
+						padding 0
+						font-size 20px
+						font-weight normal
+						color #555
 
-			> h1
-				margin 0 0 22px 0
-				padding 0
-				font-size 20px
-				font-weight normal
-				color #555
+				@media (max-width 600px)
+					max-width none
+					box-shadow none
 
-		@media (max-width 600px)
-			max-width none
-			box-shadow none
+				@media (max-width 500px)
+					> div
+						> h1
+							font-size 16px
 
-		@media (max-width 500px)
-			> div
-				> h1
-					font-size 16px
+			> footer
+				> img
+					display block
+					width 64px
+					height 64px
+					margin 0 auto
 
-	> footer
-		> img
-			display block
-			width 64px
-			height 64px
-			margin 0 auto
+	</style>
+	<script>
+		@mixin \i
+		@mixin \api
 
-script.
-	@mixin \i
-	@mixin \api
+		@state = null
+		@fetching = true
 
-	@state = null
-	@fetching = true
+		@token = window.location.href.split \/ .pop!
 
-	@token = window.location.href.split \/ .pop!
+		@on \mount ~>
+			if not @SIGNIN then return
 
-	@on \mount ~>
-		if not @SIGNIN then return
+			# Fetch session
+			@api \auth/session/show do
+				token: @token
+			.then (session) ~>
+				@session = session
+				@fetching = false
 
-		# Fetch session
-		@api \auth/session/show do
-			token: @token
-		.then (session) ~>
-			@session = session
-			@fetching = false
+				# 既に連携していた場合
+				if @session.app.is_authorized
+					@api \auth/accept do
+						token: @session.token
+					.then ~>
+						@accepted!
+				else
+					@update!
 
-			# 既に連携していた場合
-			if @session.app.is_authorized
-				@api \auth/accept do
-					token: @session.token
-				.then ~>
-					@accepted!
-			else
-				@update!
+					@refs.form.on \denied ~>
+						@state = \denied
+						@update!
 
-				@refs.form.on \denied ~>
-					@state = \denied
-					@update!
+					@refs.form.on \accepted @accepted
 
-				@refs.form.on \accepted @accepted
+			.catch (error) ~>
+				@fetching = false
+				@state = \fetch-session-error
+				@update!
 
-		.catch (error) ~>
-			@fetching = false
-			@state = \fetch-session-error
+		@accepted = ~>
+			@state = \accepted
 			@update!
 
-	@accepted = ~>
-		@state = \accepted
-		@update!
-
-		if @session.app.callback_url
-			location.href = @session.app.callback_url + '?token=' + @session.token
+			if @session.app.callback_url
+				location.href = @session.app.callback_url + '?token=' + @session.token
+	</script>
+</mk-index>