feat: authorize page
This commit is contained in:
FoskyM
parent
7a82b15c49
commit
c29b8f7fff
5 changed files with 338 additions and 48 deletions
BIN
js/dist/forum.js
generated
vendored
BIN
js/dist/forum.js
generated
vendored
Binary file not shown.
BIN
js/dist/forum.js.map
generated
vendored
BIN
js/dist/forum.js.map
generated
vendored
Binary file not shown.
|
|
@ -4,10 +4,12 @@ import Page from 'flarum/common/components/Page';
|
||||||
import IndexPage from 'flarum/forum/components/IndexPage';
|
import IndexPage from 'flarum/forum/components/IndexPage';
|
||||||
import LogInModal from 'flarum/forum/components/LogInModal';
|
import LogInModal from 'flarum/forum/components/LogInModal';
|
||||||
import extractText from 'flarum/common/utils/extractText';
|
import extractText from 'flarum/common/utils/extractText';
|
||||||
|
import Tooltip from 'flarum/common/components/Tooltip';
|
||||||
|
|
||||||
export default class AuthorizePage extends IndexPage {
|
export default class AuthorizePage extends IndexPage {
|
||||||
params = [];
|
params = [];
|
||||||
client = null;
|
client = null;
|
||||||
|
|
||||||
oninit(vnode) {
|
oninit(vnode) {
|
||||||
super.oninit(vnode);
|
super.oninit(vnode);
|
||||||
if (!app.session.user) {
|
if (!app.session.user) {
|
||||||
|
|
@ -25,8 +27,13 @@ export default class AuthorizePage extends IndexPage {
|
||||||
m.route.set('/');
|
m.route.set('/');
|
||||||
} else {
|
} else {
|
||||||
this.client = client[0];
|
this.client = client[0];
|
||||||
const uris = client.redirect_uri.split(' ');
|
let uris = null;
|
||||||
console.log(uris);
|
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) {
|
if (app.forum.attribute('foskym-oauth-center.require_exact_redirect_uri') && uris.indexOf(params.redirect_uri) == -1) {
|
||||||
m.route.set('/');
|
m.route.set('/');
|
||||||
}
|
}
|
||||||
|
|
@ -45,15 +52,79 @@ export default class AuthorizePage extends IndexPage {
|
||||||
app.setTitle(extractText(app.translator.trans('foskym-oauth-center.forum.page.title.authorize')));
|
app.setTitle(extractText(app.translator.trans('foskym-oauth-center.forum.page.title.authorize')));
|
||||||
app.setTitleCount(0);
|
app.setTitleCount(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
view() {
|
view() {
|
||||||
if (!this.client) {
|
if (!this.client) {
|
||||||
return '';
|
return '';
|
||||||
}
|
}
|
||||||
app.setTitle(extractText(app.translator.trans('foskym-oauth-center.forum.page.title.authorize') + ' ' + this.client.client_name));
|
|
||||||
app.setTitleCount(0);
|
|
||||||
return (
|
return (
|
||||||
<div className="AuthorizePage">
|
<div className="AuthorizePage">
|
||||||
<div className="container">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
@import url('./forum/oauth');
|
||||||
218
less/forum/oauth.less
Normal file
218
less/forum/oauth.less
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue