feat: authorize page

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 = [];
+    params = [];
-  client = null;
+    client = null;
-  oninit(vnode) {
-    super.oninit(vnode);
-    if (!app.session.user) {
-      setTimeout(() => app.modal.show(LogInModal), 500);
-    }
 
-    const params = m.route.param();
+    oninit(vnode) {
-
+        super.oninit(vnode);
-    if (params.client_id == null || params.response_type == null || params.redirect_uri == null) {
+        if (!app.session.user) {
-      m.route.set('/');
+            setTimeout(() => app.modal.show(LogInModal), 500);
-    } 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('/');
-          }
         }
-      });
-    }
-  }
 
-  setTitle() {
+        const params = m.route.param();
-    app.setTitle(extractText(app.translator.trans('foskym-oauth-center.forum.page.title.authorize')));
+
-    app.setTitleCount(0);
+        if (params.client_id == null || params.response_type == null || params.redirect_uri == null) {
-  }
+            m.route.set('/');
-  view() {
+        } else {
-    if (!this.client) {
+            this.params = params;
-      return '';
+            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 (
+            <div className="AuthorizePage">
+                <div className="container">
+                    <div class="oauth-area">
+                        <div class="oauth-main">
+                            <div class="oauth-box oauth-header">
+                                <h2>{app.forum.attribute('title')}</h2>
+                                <p>
+                                    {app.translator.trans('foskym-oauth-center.forum.authorize.access')} <a href={this.client.client_home()} target="_blank">{this.client.client_name()}</a>
+                                </p>
+
+                            </div>
+                            <div class="oauth-box oauth-body">
+
+                                <div class="oauth-top">
+                                    <img src={app.forum.attribute('faviconUrl')}/>
+                                    <i class="fas fa-exchange-alt fa-2x"></i>
+                                    <Tooltip text={this.client.client_desc()}>
+                                        <img src={this.client.client_icon()}/>
+                                    </Tooltip>
+                                </div>
+                                <div class="oauth-scope-area">
+                                    <div class="oauth-scope">
+                                        <div class="oauth-scope-left">
+                                            <img class="oauth-scope-object" src="/static/icon.jpg" style="width:32px"/>
+                                        </div>
+                                        <div class="oauth-scope-body">
+                                            <h6 class="oauth-scope-heading">
+                                                保持对已向 计量便民平台 授予访问权限的数据的访问权限 </h6>
+                                            <small>
+                                                即使当前没有使用该应用，也允许 计量便民平台 查看和更新你授予其访问权限的数据。这不会向
+                                                计量便民平台 授予任何其他权限。 </small>
+                                        </div>
+                                    </div>
+                                    <div class="oauth-scope">
+                                        <div class="oauth-scope-left">
+                                            <i class="oauth-scope-object fa-2x fa fa-user"
+                                               style="margin-left:2px;color:#000"></i>
+                                        </div>
+                                        <div class="oauth-scope-body">
+                                            <h6 class="oauth-scope-heading">
+                                                读取用户个人资料 </h6>
+                                            <small>
+                                                访问该用户(mouse123)的个人信息、最新动态等 </small>
+                                        </div>
+                                    </div>
+                                </div>
+                                <form class="oauth-form" method="post" id="form">
+                                    <input type="hidden" name="response_type" value="code"/>
+                                    <input type="hidden" name="client_id" value="0eaCTcndUqIGo9LymQ3YVZGYVpEXcHer"/>
+                                    <input type="hidden" name="redirect_uri"
+                                           value="http://cjludev.top/user/auth/callback"/>
+                                    <input type="hidden" name="state" value="123"/>
+                                    <input type="hidden" name="scope" value="basic get_user_info"/>
+                                    <div style="display: flex;">
+                                        <button class="btn btn-success btn-block" type="submit"
+                                                id="authorize" style="width: 50%;">授权
+                                        </button>
+                                        <button class="btn btn-danger btn-block" id="refuse"
+                                                style="width: 50%;">拒绝
+                                        </button>
+                                    </div>
+                                </form>
+
+
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
     }
-    app.setTitle(extractText(app.translator.trans('foskym-oauth-center.forum.page.title.authorize') + ' ' + this.client.client_name));
-    app.setTitleCount(0);
-    return (
-      <div className="AuthorizePage">
-        <div className="container">
-        </div>
-      </div>
-    );
-  }
 }

less/forum.less

@@ -0,0 +1 @@
+@import url('./forum/oauth');

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;
+}