Merge branch '35721-auth-style-confirmation' into 'master'

Authorizations regarding OAuth - style confirmation

Closes #35721

See merge request !13691

app/assets/stylesheets/framework/modal.scss

@@ -16,6 +16,14 @@ body.modal-open {
   overflow: hidden;
 }
 
+.modal-no-backdrop {
+  @extend .modal-dialog;
+
+  .modal-content {
+    box-shadow: none;
+  }
+}
+
 @media (min-width: $screen-md-min) {
   .modal-dialog {
     width: 860px;

app/views/doorkeeper/authorizations/new.html.haml

@@ -1,39 +1,43 @@
-%h3.page-title Authorization required
 %main{ :role => "main" }
-  %p.h4
+  .modal-no-backdrop
+    .modal-content
+      .modal-header
+        %h3.page-title
           Authorize
-    %strong.text-info= @pre_auth.client.name
+          = link_to @pre_auth.client.name, @pre_auth.redirect_uri, target: '_blank', rel: 'noopener noreferrer'
           to use your account?
 
+      .modal-body
         - if current_user.admin?
-    .text-warning.prepend-top-20
+          .text-warning
             %p
               = icon("exclamation-triangle fw")
               You are an admin, which means granting access to
               %strong= @pre_auth.client.name
               will allow them to interact with GitLab as an admin as well. Proceed with caution.
-
+        %p
+          You are about to authorize
+          = link_to @pre_auth.client.name, @pre_auth.redirect_uri, target: '_blank', rel: 'noopener noreferrer'
+          to use your account.
           - if @pre_auth.scopes
-    #oauth-permissions
-      %p This application will be able to:
-      %ul.text-info
+            This application will be able to:
+            %ul
               - @pre_auth.scopes.each do |scope|
                 %li= t scope, scope: [:doorkeeper, :scopes]
-  %hr/
-  .actions
-    = form_tag oauth_authorization_path, method: :post do
+        .form-actions.text-right
+          = form_tag oauth_authorization_path, method: :delete, class: 'inline'  do
             = hidden_field_tag :client_id, @pre_auth.client.uid
             = hidden_field_tag :redirect_uri, @pre_auth.redirect_uri
             = hidden_field_tag :state, @pre_auth.state
             = hidden_field_tag :response_type, @pre_auth.response_type
             = hidden_field_tag :scope, @pre_auth.scope
             = hidden_field_tag :nonce, @pre_auth.nonce
-      = submit_tag "Authorize", class: "btn btn-success wide pull-left"
-    = form_tag oauth_authorization_path, method: :delete do
+            = submit_tag "Deny", class: "btn btn-danger"
+          = form_tag oauth_authorization_path, method: :post, class: 'inline' do
             = hidden_field_tag :client_id, @pre_auth.client.uid
             = hidden_field_tag :redirect_uri, @pre_auth.redirect_uri
             = hidden_field_tag :state, @pre_auth.state
             = hidden_field_tag :response_type, @pre_auth.response_type
             = hidden_field_tag :scope, @pre_auth.scope
             = hidden_field_tag :nonce, @pre_auth.nonce
-      = submit_tag "Deny", class: "btn btn-danger prepend-left-10"
+            = submit_tag "Authorize", class: "btn btn-success prepend-left-10"

changelogs/unreleased/35721-auth-style-confirmation.yml

@@ -0,0 +1,5 @@
+---
+title: restyling of OAuth authorization confirmation
+merge_request:
+author: Jacopo Beschi @jacopo-beschi
+type: changed