Authorizations regarding OAuth - style confirmation

Changed the styling of OAuth authorization page in order to follow
the styling structure described in #28849.

3 files changed, 54 insertions, 37 deletions

diff --git a/app/assets/stylesheets/framework/modal.scss b/app/assets/stylesheets/framework/modal.scss
index a28f54936be..2a16b6317fa 100644
--- a/app/assets/stylesheets/framework/modal.scss
+++ b/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;
diff --git a/app/views/doorkeeper/authorizations/new.html.haml b/app/views/doorkeeper/authorizations/new.html.haml
index 82aa51f9778..8ba88906714 100644
--- a/app/views/doorkeeper/authorizations/new.html.haml
+++ b/app/views/doorkeeper/authorizations/new.html.haml
@@ -1,39 +1,43 @@
-%h3.page-title Authorization required
 %main{ :role => "main" }
-  %p.h4
-    Authorize
-    %strong.text-info= @pre_auth.client.name
-    to use your account?
+  .modal-no-backdrop
+    .modal-content
+      .modal-header
+        %h3.page-title
+          Authorize
+          = link_to @pre_auth.client.name, @pre_auth.redirect_uri, target: '_blank', rel: 'noopener noreferrer'
+          to use your account?
 
-  - if current_user.admin?
-    .text-warning.prepend-top-20
-      %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.
-
-  - if @pre_auth.scopes
-    #oauth-permissions
-      %p This application will be able to:
-      %ul.text-info
-        - @pre_auth.scopes.each do |scope|
-          %li= t scope, scope: [:doorkeeper, :scopes]
-  %hr/
-  .actions
-    = form_tag oauth_authorization_path, method: :post 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
-      = 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"
+      .modal-body
+        - if current_user.admin?
+          .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
+            This application will be able to:
+            %ul
+              - @pre_auth.scopes.each do |scope|
+                %li= t scope, scope: [:doorkeeper, :scopes]
+        .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 "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 "Authorize", class: "btn btn-success prepend-left-10"
diff --git a/changelogs/unreleased/35721-auth-style-confirmation.yml b/changelogs/unreleased/35721-auth-style-confirmation.yml
new file mode 100644
index 00000000000..9963f76e845
--- /dev/null
+++ b/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