diff --git a/js/dist/forum.js b/js/dist/forum.js index 2422d75..1ab32a4 100644 Binary files a/js/dist/forum.js and b/js/dist/forum.js differ diff --git a/js/dist/forum.js.map b/js/dist/forum.js.map index 40b9e1e..8acbfd8 100644 Binary files a/js/dist/forum.js.map and b/js/dist/forum.js.map differ diff --git a/js/src/forum/components/oauth/AuthorizePage.js b/js/src/forum/components/oauth/AuthorizePage.js index 10ac76b..dd31973 100644 --- a/js/src/forum/components/oauth/AuthorizePage.js +++ b/js/src/forum/components/oauth/AuthorizePage.js @@ -4,58 +4,129 @@ import Page from 'flarum/common/components/Page'; import IndexPage from 'flarum/forum/components/IndexPage'; import LogInModal from 'flarum/forum/components/LogInModal'; import extractText from 'flarum/common/utils/extractText'; +import Tooltip from 'flarum/common/components/Tooltip'; export default class AuthorizePage extends IndexPage { - params = []; - client = null; - oninit(vnode) { - super.oninit(vnode); - if (!app.session.user) { - setTimeout(() => app.modal.show(LogInModal), 500); - } + params = []; + client = null; - const params = m.route.param(); - - if (params.client_id == null || params.response_type == null || params.redirect_uri == null) { - m.route.set('/'); - } else { - this.params = params; - app.store.find('oauth-clients', params.client_id).then(client => { - if (client.length === 0) { - m.route.set('/'); - } else { - this.client = client[0]; - const uris = client.redirect_uri.split(' '); - console.log(uris); - if (app.forum.attribute('foskym-oauth-center.require_exact_redirect_uri') && uris.indexOf(params.redirect_uri) == -1) { - m.route.set('/'); - } - if (app.forum.attribute('foskym-oauth-center.allow_implicit') && params.response_type == 'token') { - m.route.set('/'); - } - if (app.forum.attribute('foskym-oauth-center.enforce_state') && params.enforce_state == null) { - m.route.set('/'); - } + oninit(vnode) { + super.oninit(vnode); + if (!app.session.user) { + setTimeout(() => app.modal.show(LogInModal), 500); } - }); - } - } - setTitle() { - app.setTitle(extractText(app.translator.trans('foskym-oauth-center.forum.page.title.authorize'))); - app.setTitleCount(0); - } - view() { - if (!this.client) { - return ''; + const params = m.route.param(); + + if (params.client_id == null || params.response_type == null || params.redirect_uri == null) { + m.route.set('/'); + } else { + this.params = params; + app.store.find('oauth-clients', params.client_id).then(client => { + if (client.length === 0) { + m.route.set('/'); + } else { + this.client = client[0]; + let uris = null; + if (this.client.redirect_uri().indexOf(' ') > -1) { + uris = this.client.redirect_uri().split(' '); + } else { + uris = [this.client.redirect_uri()]; + } + + if (app.forum.attribute('foskym-oauth-center.require_exact_redirect_uri') && uris.indexOf(params.redirect_uri) == -1) { + m.route.set('/'); + } + if (app.forum.attribute('foskym-oauth-center.allow_implicit') && params.response_type == 'token') { + m.route.set('/'); + } + if (app.forum.attribute('foskym-oauth-center.enforce_state') && params.enforce_state == null) { + m.route.set('/'); + } + } + }); + } + } + + setTitle() { + app.setTitle(extractText(app.translator.trans('foskym-oauth-center.forum.page.title.authorize'))); + app.setTitleCount(0); + } + + view() { + if (!this.client) { + return ''; + } + return ( +
+
+
+
+
+

{app.forum.attribute('title')}

+

+ {app.translator.trans('foskym-oauth-center.forum.authorize.access')} {this.client.client_name()} +

+ +
+
+ +
+ + + + + +
+
+
+
+ +
+
+
+ 保持对已向 计量便民平台 授予访问权限的数据的访问权限
+ + 即使当前没有使用该应用，也允许 计量便民平台 查看和更新你授予其访问权限的数据。这不会向 + 计量便民平台 授予任何其他权限。 +
+
+
+
+ +
+
+
+ 读取用户个人资料
+ + 访问该用户(mouse123)的个人信息、最新动态等 +
+
+
+
+ + + + + +
+ + +
+
+ + +
+
+
+
+
+ ); } - app.setTitle(extractText(app.translator.trans('foskym-oauth-center.forum.page.title.authorize') + ' ' + this.client.client_name)); - app.setTitleCount(0); - return ( -
-
-
-
- ); - } } diff --git a/less/forum.less b/less/forum.less index e69de29..8a23319 100644 --- a/less/forum.less +++ b/less/forum.less @@ -0,0 +1 @@ +@import url('./forum/oauth'); diff --git a/less/forum/oauth.less b/less/forum/oauth.less new file mode 100644 index 0000000..b76de17 --- /dev/null +++ b/less/forum/oauth.less @@ -0,0 +1,218 @@ +.oauth-area { + display: block !important; + position: relative; + left: 0; + top: 0; + padding: 110px 0; + min-height: 100%; + box-sizing: border-box; +} + +.oauth-main { + position: relative; + width: 376px; + margin: 0 auto; + box-sizing: border-box; +} + +.oauth-main::before { + backdrop-filter: blur(20px); + content: ''; + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + box-shadow: 0 25px 50px #00000030; + background: hsla(0, 0%, 100%, .3); +} + +.oauth-box { + padding: 20px; + background-color: #f3f3f3; +} + +.oauth-header { + backdrop-filter: blur(0); + text-align: center; + box-shadow: 0 5px 10px -5px #d2d2d2; +} + +.oauth-header h2 { + margin-bottom: 8px; + font-weight: 600; + font-size: 40px; + color: #000; +} + +.oauth-header p { + font-weight: 400; + font-size: 20px; + color: #333; +} + +.oauth-body .oauth-form-item { + position: relative; + margin-bottom: 15px; + clear: both; + *zoom: 1; +} + +.oauth-body .oauth-form-item:after { + content: '\20'; + clear: both; + *zoom: 1; + display: block; + height: 0; +} + +.oauth-icon { + position: absolute; + left: 4px; + top: 1px; + width: auto; + line-height: 35px; + text-align: center; + color: #999; + padding: 0 8px; + font-size: 14px; +} + +label:before { + color: #999; +} + +@media screen and (max-width: 768px) { + .oauth-area { + padding-top: 60px + } + + .oauth-main { + width: 300px + } + + .oauth-box { + padding: 10px + } + + .oauth-main::before { + backdrop-filter: none; + } + + .oauth-header { + background-color: #fff; + } + + body { + margin: 0 + } +} + +@media screen and (max-width: 600px) { + .oauth-area { + padding-top: 0 + } + + body { + background: #f3f3f3 !important; + } + + .oauth-main { + width: 100%; + } + + .oauth-main::before { + box-shadow: none !important; + } + + .oauth-header { + box-shadow: none; + } + + .oauth-box:last-child { + box-shadow: 0 5px 10px -5px #d2d2d2; + } +} + +.oauth-top { + text-align: center; + padding-bottom: 20px; + position: relative; +} + +.oauth-top img { + width: 64px; + border-radius: 50%; + border: #4950578c solid 1px; + box-shadow: 1px 0 0 0 #e8e8e8, 0 1px 0 0 #e8e8e8, 1px 1px 0 0 #e8e8e8, inset 1px 0 0 0 #e8e8e8, inset 0 1px 0 0 #e8e8e8; + transition: all .3s; +} + +.oauth-top img:hover { + box-shadow: 0 2px 8px rgba(0, 0, 0, .3); +} + +.oauth-top i { + top: -24px; + position: relative; + padding-left: 10px; + padding-right: 10px; + color: #111; +} + +.oauth-scope-area { + padding-top: 10px; + padding-bottom: 10px; + overflow: auto; + max-height: 350px; + position: relative; +} + +.oauth-scope { + margin-top: 15px; +} + +.oauth-scope:first-child { + margin-top: 0; +} + +.oauth-scope, .oauth-scope-body { + overflow: hidden; + zoom: 1; +} + +.oauth-scope-body, .oauth-scope-left, .oauth-scope-right { + display: table-cell; + vertical-align: top; +} + +.oauth-scope-left, .oauth-scope > .pull-left { + padding-right: 10px; + min-width: 42px; + text-align: center; +} + +img.oauth-scope-object { + display: block; + vertical-align: middle; + border: 0; + width: 32px; + height: 32px; +} + +.oauth-scope-body { + width: 10000px; + padding-left: 8px; +} + +.oauth-scope-heading { + margin-top: 0; + font-weight: 800; + color: #382e2e; +} + +.oauth-scope-body small { + font-weight: 500; + font-size: 12px; + color: #aaa; +}