Initial commit :four_leaf_clover:

7 files changed, 303 insertions, 0 deletions

diff --git a/src/web/app/auth/resources/logo.svg b/src/web/app/auth/resources/logo.svg
new file mode 100644
index 0000000000..19b8a2737e
--- /dev/null
+++ b/src/web/app/auth/resources/logo.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>

+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"

+	 y="0px" width="1024px" height="512px" viewBox="0 256 1024 512" enable-background="new 0 256 1024 512" xml:space="preserve">

+<polyline opacity="0.5" fill="none" stroke="#000000" stroke-width="34" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="

+	896.5,608.5 800.5,416.5 704.5,608.5 608.5,416.5 512.5,608.5 416.5,416.5 320.5,608.5 224.5,416.5 128.5,608.5 "/>

+</svg>

diff --git a/src/web/app/auth/script.js b/src/web/app/auth/script.js
new file mode 100644
index 0000000000..9743415b12
--- /dev/null
+++ b/src/web/app/auth/script.js
@@ -0,0 +1,19 @@
+/**
+ * Authorize Form
+ */
+
+const riot = require('riot');
+document.title = 'Misskey | アプリの連携';
+require('./tags.ls');
+const boot = require('../boot.ls');
+
+/**
+ * Boot
+ */
+boot(me => {
+	mount(document.createElement('mk-index'));
+});
+
+function mount(content) {
+	riot.mount(document.getElementById('app').appendChild(content));
+}
diff --git a/src/web/app/auth/style.styl b/src/web/app/auth/style.styl
new file mode 100644
index 0000000000..046a5ff6ee
--- /dev/null
+++ b/src/web/app/auth/style.styl
@@ -0,0 +1,14 @@
+@import "../base"
+
+html
+	background #eee
+
+	@media (max-width 600px)
+		background #fff
+
+body
+	margin 0
+	padding 32px 0
+
+	@media (max-width 600px)
+		padding 0
diff --git a/src/web/app/auth/tags.ls b/src/web/app/auth/tags.ls
new file mode 100644
index 0000000000..5f618aaadf
--- /dev/null
+++ b/src/web/app/auth/tags.ls
@@ -0,0 +1,2 @@
+require './tags/index.tag'
+require './tags/form.tag'
diff --git a/src/web/app/auth/tags/form.tag b/src/web/app/auth/tags/form.tag
new file mode 100644
index 0000000000..f5b1555554
--- /dev/null
+++ b/src/web/app/auth/tags/form.tag
@@ -0,0 +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 }) アクセスを許可
+
+style.
+	display block
+
+	> header
+		> h1
+			margin 0
+			padding 32px 32px 20px 32px
+			font-size 24px
+			font-weight normal
+			color #777
+
+			i
+				color #77aeca
+
+				&:before
+					content '「'
+
+				&:after
+					content '」'
+
+			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)
+
+	> .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
+
+		> section
+			float left
+			width 50%
+			padding 8px
+			text-align left
+
+			> h2
+				margin 0
+				font-size 16px
+				color #777
+
+	> .action
+		padding 16px
+
+		> button
+			margin 0 8px
+
+	@media (max-width 600px)
+		> header
+			> img
+				box-shadow none
+
+		> .app
+			box-shadow none
+
+	@media (max-width 500px)
+		> header
+			> h1
+				font-size 16px
+
+script.
+	@mixin \api
+
+	@session = @opts.session
+	@app = @session.app
+
+	@cancel = ~>
+		@api \auth/deny do
+			token: @session.token
+		.then ~>
+			@trigger \denied
+
+	@accept = ~>
+		@api \auth/accept do
+			token: @session.token
+		.then ~>
+			@trigger \accepted
diff --git a/src/web/app/auth/tags/index.tag b/src/web/app/auth/tags/index.tag
new file mode 100644
index 0000000000..b7017daec6
--- /dev/null
+++ b/src/web/app/auth/tags/index.tag
@@ -0,0 +1,129 @@
+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')
+
+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)
+
+		> .fetching
+			margin 0
+			padding 32px
+			color #555
+
+		> div
+			padding 64px
+
+			> h1
+				margin 0 0 8px 0
+				padding 0
+				font-size 20px
+				font-weight normal
+
+			> p
+				margin 0
+				color #555
+
+			&.denied > h1
+				color #e65050
+
+			&.accepted > h1
+				color #50bbe6
+
+		&.signin
+			padding 32px 32px 16px 32px
+
+			> 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 500px)
+			> div
+				> h1
+					font-size 16px
+
+	> footer
+		> img
+			display block
+			width 64px
+			height 64px
+			margin 0 auto
+
+script.
+	@mixin \i
+	@mixin \api
+
+	@state = null
+	@fetching = true
+
+	@token = window.location.href.split \/ .pop!
+
+	@on \mount ~>
+		if not @SIGNIN then return
+
+		# 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!
+
+				@refs.form.on \denied ~>
+					@state = \denied
+					@update!
+
+				@refs.form.on \accepted @accepted
+
+		.catch (error) ~>
+			@fetching = false
+			@state = \fetch-session-error
+			@update!
+
+	@accepted = ~>
+		@state = \accepted
+		@update!
+
+		if @session.app.callback_url
+			location.href = @session.app.callback_url + '?token=' + @session.token
diff --git a/src/web/app/auth/view.pug b/src/web/app/auth/view.pug
new file mode 100644
index 0000000000..a7b9f9263b
--- /dev/null
+++ b/src/web/app/auth/view.pug
@@ -0,0 +1,6 @@
+extends ../base
+
+block head
+	meta(name='viewport', content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no')
+	link(rel='stylesheet', href='/_/resources/auth/style.css')
+	script(src='/_/resources/auth/script.js', async, defer)