Handle UI for dangerous scopes

This commit is contained in:
Joseph Schorr 2014-08-05 21:21:22 -04:00
parent 02e47ed572
commit 05a1413153
4 changed files with 69 additions and 7 deletions

View file

@ -43,7 +43,7 @@ READ_USER = Scope(scope= 'user:read',
'username and email address.'))
ORG_ADMIN = Scope(scope='org:admin',
icon='fa-exclamation-triangle',
icon='fa-gear',
dangerous=True,
title='Administer Organization',
description=('This application will be able to administer your organizations '
@ -103,6 +103,7 @@ def get_scope_information(scopes_string):
'scope': scope.scope,
'description': scope.description,
'icon': scope.icon,
'dangerous': scope.dangerous,
})
return scope_info

View file

@ -374,7 +374,10 @@ def request_authorization_code():
}
# Show the authorization page.
return render_page_template('oauthorize.html', scopes=scope_info, application=oauth_app_view,
has_dangerous_scopes = bool([scope for scope in scope_info if scope['dangerous']])
return render_page_template('oauthorize.html', scopes=scope_info,
has_dangerous_scopes=has_dangerous_scopes,
application=oauth_app_view,
enumerate=enumerate, client_id=client_id,
redirect_uri=redirect_uri, scope=scope,
csrf_token_val=generate_csrf_token())

View file

@ -3988,6 +3988,12 @@ pre.command:before {
max-width: 500px;
}
.auth-scopes .scope .fa-exclamation-triangle {
color: orange;
margin-left: 16px;
display: inline-block;
}
.auth-scopes .scope-container:last-child {
border-bottom: 0px;
}

View file

@ -25,22 +25,33 @@
<div class="reason">This application would like permission to:</div>
<div class="panel-group">
{% for index, scope in enumerate(scopes) %}
<div class="scope panel panel-default">
<div class="scope panel panel-default {% if scope.dangerous %} dangerous {% endif %}">
<div class="panel-heading">
<h4 class="panel-title">
<div class="title-container">
<div class="title collapsed" data-toggle="collapse" data-parent="#scopeGroup" data-target="#description-{{ index }}">
<div class="title {% if not scope.dangerous %}collapsed{% endif %}" data-toggle="collapse"
data-parent="#scopeGroup" data-target="#description-{{ index }}">
<i class="fa arrow"></i>
<i class="fa {{ scope.icon }} fa-lg"></i>
<a data-toggle="collapse" href="#collapseOne">
{{ scope.title }}
{{ scope.title }}
</a>
{% if scope.dangerous %}
<i class="fa fa-lg fa-exclamation-triangle"
data-title="This scope grants a lot of power. Be careful when authorizing it!"
data-container="body" bs-tooltip></i>
{% endif %}
</div>
</div>
</h4>
</div>
<div id="description-{{ index }}" class="panel-collapse collapse out">
<div id="description-{{ index }}" class="panel-collapse {% if not scope.dangerous %} collapse {% else %} in {% endif %}">
<div class="panel-body">
{% if scope.dangerous %}
<div class="alert alert-warning">Warning! This scope grants a lot of power. Be careful when authorizing it!</div>
{% endif %}
{{ scope.description }}
</div>
</div>
@ -50,13 +61,18 @@
</div>
<div class="button-bar">
{% if has_dangerous_scopes %}
<button type="button" class="btn btn-warning" onclick="$('#confirmAuthorizeModal').modal()">Authorize Application</button>
{% else %}
<form method="post" action="/oauth/authorizeapp">
<input type="hidden" name="client_id" value="{{ client_id }}">
<input type="hidden" name="redirect_uri" value="{{ redirect_uri }}">
<input type="hidden" name="scope" value="{{ scope }}">
<input type="hidden" name="_csrf_token" value="{{ csrf_token_val }}">
<button type="submit" class="btn btn-success">Authorize Application</button>
</form><form method="post" action="/oauth/denyapp">
</form>
{% endif %}
<form method="post" action="/oauth/denyapp">
<input type="hidden" name="client_id" value="{{ client_id }}">
<input type="hidden" name="redirect_uri" value="{{ redirect_uri }}">
<input type="hidden" name="scope" value="{{ scope }}">
@ -65,4 +81,40 @@
</form>
</div>
</div>
<!-- Modal message dialog -->
<div class="modal fade" id="confirmAuthorizeModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Confirm Authorization</h4>
</div>
<div class="modal-body">
The application <strong>{{ application.name }}</strong> is requesting access to scopes with wide
permissions.
<br><br>
Really authorize?
</div>
<div class="modal-footer">
<form method="post" action="/oauth/authorizeapp" style="display: inline-block">
<input type="hidden" name="client_id" value="{{ client_id }}">
<input type="hidden" name="redirect_uri" value="{{ redirect_uri }}">
<input type="hidden" name="scope" value="{{ scope }}">
<input type="hidden" name="_csrf_token" value="{{ csrf_token_val }}">
<button type="submit" class="btn btn-success">Authorize Application</button>
</form>
<form method="post" action="/oauth/denyapp" style="display: inline-block">
<input type="hidden" name="client_id" value="{{ client_id }}">
<input type="hidden" name="redirect_uri" value="{{ redirect_uri }}">
<input type="hidden" name="scope" value="{{ scope }}">
<input type="hidden" name="_csrf_token" value="{{ csrf_token_val }}">
<button type="submit" class="btn btn-default">Deny</button>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
{% endblock %}