From d98f11abdcbb0e548aaebe2a83027f48cf684679 Mon Sep 17 00:00:00 2001
From: Oleksii Kriuchykhin <okriuchykhin@biosistemika.com>
Date: Tue, 20 Nov 2018 17:02:45 +0100
Subject: [PATCH] Refactor & restyle the API authorization screen [SCI-2859]

---
 app/assets/stylesheets/themes/scinote.scss    | 20 ++++++
 .../doorkeeper/authorizations/new.html.erb    | 71 +++++++++++--------
 config/locales/en.yml                         | 12 ++++
 3 files changed, 73 insertions(+), 30 deletions(-)

diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss
index 3a8397557..c88580668 100644
--- a/app/assets/stylesheets/themes/scinote.scss
+++ b/app/assets/stylesheets/themes/scinote.scss
@@ -1940,3 +1940,23 @@ a.disabled-with-click-events {
 .tiny-mce-pdf-ready {
   max-width: 100%;
 }
+
+.doorkeeper-authorization {
+
+  .doorkeeper-scinote-logo {
+    background-image: asset-url("/images/scinote_icon.jpg");
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: contain;
+    height: 180px;
+  }
+
+  .doorkeeper-actions-left {
+    padding-right: 3px;
+  }
+
+  .doorkeeper-actions-right {
+    padding-left: 3px;
+  }
+
+}
diff --git a/app/views/doorkeeper/authorizations/new.html.erb b/app/views/doorkeeper/authorizations/new.html.erb
index b37bd506d..3bbff26d1 100644
--- a/app/views/doorkeeper/authorizations/new.html.erb
+++ b/app/views/doorkeeper/authorizations/new.html.erb
@@ -1,42 +1,53 @@
-<div class="center-block center-block-narrow">
-  <header class="page-header" role="banner">
-    <h1><%= t('.title') %></h1>
-  </header>
+<% provide(:head_title, t('doorkeeper.authorizations.new.head_title')) %>
 
-  <main role="main">
-    <p class="h4">
-      <%= raw t('.prompt', client_name: content_tag(:strong, class: 'text-info') { @pre_auth.client.name }) %>
-    </p>
+<div class="center-block center-block-narrow doorkeeper-authorization">
+  <div class="row text-center">
+    <div class="doorkeeper-scinote-logo"></div>
+  </div>
 
-    <% if @pre_auth.scopes.count > 0 %>
-      <div id="oauth-permissions">
-        <p><%= t('.able_to') %>:</p>
+  <h3 class="text-justify">
+    <%= t('doorkeeper.authorizations.new.title', client_name: @pre_auth.client.name ) %>
+  </h3>
+  <br>
+  <div>
+    <h5>
+      <strong><%= @pre_auth.client.name %></strong>
+      <%= t('doorkeeper.authorizations.new.scopes_title') %>
+    </h5>
+    <ul>
+      <li><%= t('doorkeeper.authorizations.new.scope_1') %></li>
+      <li><%= t('doorkeeper.authorizations.new.scope_2') %></li>
+    </ul>
+    <h5>
+      <%= t('doorkeeper.authorizations.new.terms', client_name: @pre_auth.client.name) %>
+    </h5>
+  </div>
+  <br>
 
-        <ul class="text-info">
-          <% @pre_auth.scopes.each do |scope| %>
-            <li><%= t scope, scope: [:doorkeeper, :scopes] %></li>
-          <% end %>
-        </ul>
-      </div>
-    <% end %>
-
-    <div class="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 %>
-        <%= submit_tag t('doorkeeper.authorizations.buttons.authorize'), class: "btn btn-success btn-lg btn-block" %>
-      <% end %>
+  <div class="row">
+    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-right doorkeeper-actions-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 %>
-        <%= submit_tag t('doorkeeper.authorizations.buttons.deny'), class: "btn btn-danger btn-lg btn-block" %>
+        <%= hidden_field_tag :code_challenge, @pre_auth.code_challenge %>
+        <%= hidden_field_tag :code_challenge_method, @pre_auth.code_challenge_method %>
+        <%= submit_tag t('general.cancel'), class: "btn btn-default" %>
       <% end %>
     </div>
-  </main>
+    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-left doorkeeper-actions-right">
+      <%= 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 :code_challenge, @pre_auth.code_challenge %>
+        <%= hidden_field_tag :code_challenge_method, @pre_auth.code_challenge_method %>
+        <%= submit_tag t('doorkeeper.authorizations.buttons.authorize'), class: "btn btn-success" %>
+      <% end %>
+    </div>
+  </div>
 </div>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 3d44d9ccd..1b5830eb9 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -52,6 +52,18 @@ en:
       email_already_taken: "SciNote account with email %{email} alreday exists"
       failed_to_save: "Failed to create new user"
 
+  doorkeeper:
+    authorizations:
+      buttons:
+        authorize: "Authorize"
+      new:
+        head_title: "OAuth authorization"
+        title: "Authorize %{client_name} to connect to your SciNote account"
+        scopes_title: " would like to:"
+        scope_1: "Use basic profile information associated with your SciNote account"
+        scope_2: "Create, read, update, and delete data within SciNote on behalf of your user account using SciNote API."
+        terms: "%{client_name} terms may apply."
+
   activerecord:
     errors:
       models: