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

This commit is contained in:
Eugen Rochko 2016-03-14 17:41:13 +01:00
parent 3441361568
commit 25d7c1b6ea
14 changed files with 193 additions and 120 deletions

View File

@ -4,10 +4,12 @@
margin: 20px auto; margin: 20px auto;
width: 940px; width: 940px;
display: flex; display: flex;
overflow: hidden;
.dashboard__sidebar { .dashboard__sidebar {
width: 240px; width: 240px;
border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;
flex-shrink: 0;
.dashboard__top-bar { .dashboard__top-bar {
border-radius: 4px 0 0 0; border-radius: 4px 0 0 0;
@ -175,8 +177,8 @@
display: inline-block; display: inline-block;
border: 0; border: 0;
background: #2b90d9; background: #2b90d9;
border-radius: 4px; border-radius: 16px;
padding: 4px 16px; padding: 6px 16px;
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
color: #fff; color: #fff;
@ -187,6 +189,16 @@
&:hover { &:hover {
background: lighten(#2b90d9, 5%); 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; 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;
}
} }

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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?' }

View File

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

View File

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

View File

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