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,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 (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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