Handle UI for dangerous scopes

auth/scopes.py

@@ -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

endpoints/web.py

@@ -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())

static/css/quay.css

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

templates/oauthorize.html

@@ -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 }}                      
                     </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 %}