Customizing the last of doorkeeper views, adding CSS for dashboard forms

app/assets/stylesheets/dashboard.scss

@@ -4,10 +4,12 @@
   margin: 20px auto;
   width: 940px;
   display: flex;
+  overflow: hidden;
 
   .dashboard__sidebar {
     width: 240px;
     border-radius: 4px 0 0 4px;
+    flex-shrink: 0;
 
     .dashboard__top-bar {
       border-radius: 4px 0 0 0;
@@ -175,8 +177,8 @@
         display: inline-block;
         border: 0;
         background: #2b90d9;
-        border-radius: 4px;
-        padding: 4px 16px;
+        border-radius: 16px;
+        padding: 6px 16px;
         font-size: 12px;
         font-weight: 500;
         color: #fff;
@@ -187,6 +189,16 @@
         &:hover {
           background: lighten(#2b90d9, 5%);
         }
+
+        &.btn-iconized {
+          font-size: 16px;
+          font-weight: 400;
+          width: 24px;
+          text-align: center;
+          padding: 10px 7px;
+          border-radius: 100px;
+          box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+        }
       }
     }
 
@@ -194,5 +206,110 @@
       border-radius: 0 4px 0 0;
     }
   }
+}
+
+.simple_form {
+  .form-actions {
+    padding-top: 20px;
+    text-align: center;
+  }
 
+  .input {
+    margin-bottom: 15px;
+
+    label {
+      display: block;
+      text-transform: uppercase;
+      font-size: 11px;
+      font-weight: 500;
+      margin-bottom: 10px;
+    }
+
+    input[type=text], input[type=email], input[type=password], textarea {
+      display: block;
+      box-sizing: border-box;
+      width: 100%;
+      border: 0;
+      background: transparent;
+      border-bottom: 1px solid lighten(#282c37, 55%);
+      padding: 5px 0;
+      outline: 0;
+      padding-bottom: 6px;
+      font-size: 14px;
+      font-family: 'Roboto', sans-serif;
+
+      &:focus {
+        border-bottom: 2px solid #2b90d9;
+        padding-bottom: 5px;
+      }
+    }
+
+    input[type=file] {
+      display: block;
+    }
+  }
+}
+
+.panel {
+  box-sizing: border-box;
+  padding: 10px 15px;
+  background: lighten(#d9e1e8, 5%);
+  margin-bottom: 20px;
+  border-radius: 4px;
+
+  .panel-heading {
+    font-size: 13px;
+    text-transform: uppercase;
+    color: lighten(#282c37, 25%);
+    margin-bottom: 10px;
+  }
+
+  &.panel-full {
+    width: 100%;
+  }
+
+  .panel-row {
+    display: flex;
+
+    dt {
+      color: #282c37;
+      width: 100px;
+    }
+
+    dd {
+      flex: 1;
+      color: lighten(#282c37, 25%);
+    }
+
+    &.panel-row-wider {
+      dt {
+        width: auto;
+        flex: 1;
+      }
+    }
+  }
+}
+
+.row {
+  overflow: hidden;
+  clear: both;
+
+  .panel {
+    float: left;
+    width: 320px;
+    margin-right: 20px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+
+.page-actions {
+  margin-top: 20px;
+  text-align: right;
+
+  .btn {
+    margin-left: 5px;
+  }
 }

app/views/doorkeeper/applications/_delete_form.html.erb

@@ -1,5 +0,0 @@
-<%- submit_btn_css ||= 'btn btn-link' %>
-<%= form_tag oauth_application_path(application) do %>
-  <input type="hidden" name="_method" value="delete">
-  <%= submit_tag t('doorkeeper.applications.buttons.destroy'), onclick: "return confirm('#{ t('doorkeeper.applications.confirmations.destroy') }')", class: submit_btn_css %>
-<% end %>

app/views/doorkeeper/applications/_form.html.erb

@@ -1,47 +0,0 @@
-<%= form_for application, url: doorkeeper_submit_path(application), html: {class: 'form-horizontal', role: 'form'} do |f| %>
-  <% if application.errors.any? %>
-    <div class="alert alert-danger" data-alert><p><%= t('doorkeeper.applications.form.error') %></p></div>
-  <% end %>
-
-  <%= content_tag :div, class: "form-group#{' has-error' if application.errors[:name].present?}" do %>
-    <%= f.label :name, class: 'col-sm-2 control-label' %>
-    <div class="col-sm-10">
-      <%= f.text_field :name, class: 'form-control' %>
-      <%= doorkeeper_errors_for application, :name %>
-    </div>
-  <% end %>
-
-  <%= content_tag :div, class: "form-group#{' has-error' if application.errors[:redirect_uri].present?}" do %>
-    <%= f.label :redirect_uri, class: 'col-sm-2 control-label' %>
-    <div class="col-sm-10">
-      <%= f.text_area :redirect_uri, class: 'form-control' %>
-      <%= doorkeeper_errors_for application, :redirect_uri %>
-      <span class="help-block">
-        <%= t('doorkeeper.applications.help.redirect_uri') %>
-      </span>
-      <% if Doorkeeper.configuration.native_redirect_uri %>
-          <span class="help-block">
-            <%= raw t('doorkeeper.applications.help.native_redirect_uri', native_redirect_uri: "<code>#{ Doorkeeper.configuration.native_redirect_uri }</code>") %>
-          </span>
-      <% end %>
-    </div>
-  <% end %>
-
-  <%= content_tag :div, class: "form-group#{' has-error' if application.errors[:scopes].present?}" do %>
-    <%= f.label :scopes, class: 'col-sm-2 control-label' %>
-    <div class="col-sm-10">
-      <%= f.text_field :scopes, class: 'form-control' %>
-      <%= doorkeeper_errors_for application, :scopes %>
-      <span class="help-block">
-        <%= t('doorkeeper.applications.help.scopes') %>
-      </span>
-    </div>
-  <% end %>
-
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
-      <%= f.submit t('doorkeeper.applications.buttons.submit'), class: "btn btn-primary" %>
-      <%= link_to t('doorkeeper.applications.buttons.cancel'), oauth_applications_path, :class => "btn btn-default" %>
-    </div>
-  </div>
-<% end %>

app/views/doorkeeper/applications/_form.html.haml

@@ -0,0 +1,9 @@
+= simple_form_for application, url: doorkeeper_submit_path(application) do |f|
+  = f.error_notification
+
+  .form-inputs
+    = f.input :name
+    = f.input :redirect_uri, hint: t('doorkeeper.applications.help.redirect_uri')
+    = f.input :scopes, hint: t('doorkeeper.applications.help.scopes')
+  .form-actions
+    = f.button :submit, 'Save'

app/views/doorkeeper/applications/edit.html.erb

@@ -1,5 +0,0 @@
-<div class="page-header">
-  <h1><%= t('.title') %></h1>
-</div>
-
-<%= render 'form', application: @application %>

app/views/doorkeeper/applications/edit.html.haml

@@ -0,0 +1,4 @@
+- content_for :page_title do
+  Edit app
+
+= render 'form', application: @application

app/views/doorkeeper/applications/index.html.haml

@@ -1,13 +1,13 @@
 - content_for :page_title do
-  Applications
+  Apps
 
-%p= link_to t('.new'), new_oauth_application_path, class: 'btn btn-success'
+%p= link_to 'Add new', new_oauth_application_path, class: 'btn btn-success'
 
 %table.table
   %thead
     %tr
-      %th= t('.name')
-      %th= t('.callback_url')
+      %th App
+      %th Callback URL
       %th
       %th
   %tbody
@@ -15,5 +15,5 @@
       %tr
         %td= link_to application.name, oauth_application_path(application)
         %td= application.redirect_uri
-        %td= link_to t('doorkeeper.applications.buttons.edit'), edit_oauth_application_path(application), class: 'btn btn-link'
-        %td= render 'delete_form', application: application
+        %td= link_to 'Edit', edit_oauth_application_path(application)
+        %td= link_to 'Delete', oauth_application_path(application), method: :delete, data: { confirm: 'Are you sure?' }

app/views/doorkeeper/applications/new.html.erb

@@ -1,5 +0,0 @@
-<div class="page-header">
-  <h1><%= t('.title') %></h1>
-</div>
-
-<%= render 'form', application: @application %>

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

@@ -0,0 +1,4 @@
+- content_for :page_title do
+  New app
+
+= render 'form', application: @application

app/views/doorkeeper/applications/show.html.erb

@@ -1,39 +0,0 @@
-<div class="page-header">
-  <h1><%= t('.title', name: @application.name) %></h1>
-</div>
-
-<div class="row">
-  <div class="col-md-8">
-    <h4><%= t('.application_id') %>:</h4>
-    <p><code id="application_id"><%= @application.uid %></code></p>
-
-    <h4><%= t('.secret') %>:</h4>
-    <p><code id="secret"><%= @application.secret %></code></p>
-
-    <h4><%= t('.scopes') %>:</h4>
-    <p><code id="scopes"><%= @application.scopes %></code></p>
-
-    <h4><%= t('.callback_urls') %>:</h4>
-
-    <table>
-      <% @application.redirect_uri.split.each do |uri| %>
-        <tr>
-          <td>
-            <code><%= uri %></code>
-          </td>
-          <td>
-            <%= link_to t('doorkeeper.applications.buttons.authorize'), oauth_authorization_path(client_id: @application.uid, redirect_uri: uri, response_type: 'code'), class: 'btn btn-success', target: '_blank' %>
-          </td>
-        </tr>
-      <% end %>
-    </table>
-  </div>
-
-  <div class="col-md-4">
-    <h3><%= t('.actions') %></h3>
-
-    <p><%= link_to t('doorkeeper.applications.buttons.edit'), edit_oauth_application_path(@application), class: 'btn btn-primary' %></p>
-
-    <p><%= render 'delete_form', application: @application, submit_btn_css: 'btn btn-danger' %></p>
-  </div>
-</div>

app/views/doorkeeper/applications/show.html.haml

@@ -0,0 +1,35 @@
+- content_for :page_title do
+  = @application.name
+
+.row
+  .panel
+    .panel-heading General
+    .panel-row
+      %dt Name
+      %dd= @application.name
+    .panel-row
+      %dt Scopes:
+      %dd= @application.scopes
+
+.panel.panel-full
+  .panel-heading Details
+  .panel-row
+    %dt Client ID:
+    %dd
+      %samp= @application.uid
+  .panel-row
+    %dt Secret:
+    %dd
+      %samp= @application.secret
+
+.panel.panel-full
+  .panel-heading Callback URLs
+  - @application.redirect_uri.split.each do |uri|
+    .panel-row.panel-row-wider
+      %dt
+        %samp= uri
+      %dd= link_to 'Authorize', oauth_authorization_path(client_id: @application.uid, redirect_uri: uri, response_type: 'code')
+
+.page-actions
+  = link_to fa_icon('edit'), edit_oauth_application_path(@application), class: 'btn btn-iconized'
+  = link_to fa_icon('trash'), oauth_application_path(@application), method: :delete, class: 'btn btn-iconized', data: { confirm: 'Are you sure?' }

app/views/doorkeeper/authorized_applications/_delete_form.html.haml

@@ -1,3 +0,0 @@
-= form_tag oauth_authorized_application_path(application) do
-  %input{type: "hidden", name: "_method", value: "delete"}
-  = submit_tag 'Revoke', class: 'btn'

app/views/doorkeeper/authorized_applications/index.html.haml

@@ -8,9 +8,9 @@
 %table.table
   %thead
     %tr
-      %th= t('doorkeeper.authorized_applications.index.application')
+      %th App
       %th
   - @applications.each do |application|
     %tr
       %td= application.name
-      %td= render 'delete_form', application: application
+      %td= link_to 'Revoke', oauth_authorized_application_path(application), method: :delete

app/views/settings/show.html.haml

@@ -1,6 +1,14 @@
+- content_for :page_title do
+  Edit profile
+
 = simple_form_for @account, url: settings_path, method: :put do |f|
-  = f.input :display_name
-  = f.input :note
-  = f.input :avatar
-  = f.input :header
-  = f.button :submit
+  = f.error_notification
+
+  .form-inputs
+    = f.input :display_name
+    = f.input :note
+    = f.input :avatar
+    = f.input :header
+
+  .form-actions
+    = f.button :submit, 'Save changes'