From b3f42e62af698a67c2250533c437569559f1fdf9 Mon Sep 17 00:00:00 2001 From: syuilo Date: Thu, 29 Dec 2016 07:49:51 +0900 Subject: Initial commit :four_leaf_clover: --- src/web/app/auth/resources/logo.svg | 7 ++ src/web/app/auth/script.js | 19 ++++++ src/web/app/auth/style.styl | 14 ++++ src/web/app/auth/tags.ls | 2 + src/web/app/auth/tags/form.tag | 126 +++++++++++++++++++++++++++++++++++ src/web/app/auth/tags/index.tag | 129 ++++++++++++++++++++++++++++++++++++ src/web/app/auth/view.pug | 6 ++ 7 files changed, 303 insertions(+) create mode 100644 src/web/app/auth/resources/logo.svg create mode 100644 src/web/app/auth/script.js create mode 100644 src/web/app/auth/style.styl create mode 100644 src/web/app/auth/tags.ls create mode 100644 src/web/app/auth/tags/form.tag create mode 100644 src/web/app/auth/tags/index.tag create mode 100644 src/web/app/auth/view.pug (limited to 'src/web/app/auth') 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 @@ + + + + + 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) -- cgit v1.2.3-freya