SSH keys settings

Closes #13860

app/assets/stylesheets/framework/lists.scss

@@ -3,6 +3,7 @@
  *
  */
 .well-list {
+  position: relative;
   margin: 0;
   padding: 0;
   list-style: none;

app/assets/stylesheets/pages/profile.scss

@@ -145,3 +145,13 @@
     width: auto;
   }
 }
+
+.key-icon {
+  color: #8F8F8F;
+  font-size: 18px;
+  line-height: 42px;
+}
+
+.key-created-at {
+  line-height: 42px;
+}

app/controllers/profiles/keys_controller.rb

@@ -3,6 +3,7 @@ class Profiles::KeysController < Profiles::ApplicationController
 
   def index
     @keys = current_user.keys
+    @key = flash[:key] || Key.new
   end
 
   def show
@@ -10,7 +11,7 @@ class Profiles::KeysController < Profiles::ApplicationController
   end
 
   def new
-    @key = current_user.keys.new
+    redirect_to profile_keys_path
   end
 
   def create
@@ -19,7 +20,7 @@ class Profiles::KeysController < Profiles::ApplicationController
     if @key.save
       redirect_to profile_key_path(@key)
     else
-      render 'new'
+      redirect_to profile_keys_path, flash: {key: @key}
     end
   end
 

app/views/profiles/keys/_form.html.haml

 %div
-  = form_for [:profile, @key], html: { class: 'form-horizontal js-requires-input' } do |f|
+  = form_for [:profile, @key], html: { class: 'js-requires-input' } do |f|
     - if @key.errors.any?
       .alert.alert-danger
         %ul
@@ -7,13 +7,11 @@
             %li= msg
 
     .form-group
-      = f.label :key, class: 'control-label'
-      .col-sm-10
-        = f.text_area :key, class: "form-control", rows: 8, autofocus: true, required: true
+      = f.label :key, class: 'label-light'
+      = f.text_area :key, class: "form-control", rows: 8, required: true
     .form-group
-      = f.label :title, class: 'control-label'
-      .col-sm-10= f.text_field :title, class: "form-control", required: true
+      = f.label :title, class: 'label-light'
+      = f.text_field :title, class: "form-control", required: true
 
-    .form-actions
+    .prepend-top-default
       = f.submit 'Add key', class: "btn btn-create"
-      = link_to "Cancel", profile_keys_path, class: "btn btn-cancel"

app/views/profiles/keys/_key.html.haml

-%tr
-  %td
-    = link_to path_to_key(key, is_admin) do
-      %strong= key.title
-  %td
-    %code.key-fingerprint= key.fingerprint
-  %td
-    %span.cgray
-      added #{time_ago_with_tooltip(key.created_at)}
-  %td
-    = link_to 'Remove', path_to_key(key, is_admin), data: { confirm: 'Are you sure?'}, method: :delete, class: "btn btn-sm btn-remove delete-key pull-right"
+%li.key-list-item
+  .pull-left.append-right-10
+    = icon 'key', class: "key-icon"
+  .pull-left
+    = link_to path_to_key(key, is_admin), class: "title" do
+      = key.title
+    .description
+      = key.fingerprint
+  .pull-right
+    %span.key-created-at
+      created #{time_ago_with_tooltip(key.created_at)} ago
+    = link_to path_to_key(key, is_admin), data: { confirm: 'Are you sure?'}, method: :delete, class: "btn btn-transparent prepend-left-10" do
+      %span.sr-only Remove
+      = icon('trash')

app/views/profiles/keys/_key_details.html.haml

 - is_admin = defined?(admin) ? true : false
-.row
+.row.prepend-top-default
   .col-md-4
     .panel.panel-default
       .panel-heading

app/views/profiles/keys/_key_table.html.haml

 - is_admin = defined?(admin) ? true : false
 - if @keys.any?
-  .table-holder
-    %table.table
-      %thead.panel-heading
-        %tr
-          %th Title
-          %th Fingerprint
-          %th Added at
-          %th
-      %tbody
-        - @keys.each do |key|
-          = render 'profiles/keys/key', key: key, is_admin: is_admin
-- else
-  .nothing-here-block
-    - if is_admin
-      User has no ssh keys
-    - else
-      There are no SSH keys with access to your account.
+  %ul.well-list
+    - @keys.each do |key|
+      = render 'profiles/keys/key', key: key, is_admin: is_admin

app/views/profiles/keys/index.html.haml

 - page_title "SSH Keys"
 - header_title page_title, profile_keys_path
+- is_admin = defined?(admin) ? true : false
 
-.top-area
-  .nav-text
-    Before you can add an SSH key you need to
-    = link_to "generate it.", help_page_path("ssh", "README")
-  .nav-controls
-    = link_to new_profile_key_path, class: "btn btn-new" do
-      = icon('plus')
-      Add SSH Key
-
-.prepend-top-default
-= render 'key_table'
+.row.prepend-top-default
+  .col-lg-3.profile-settings-sidebar
+    %h4.prepend-top-0
+      = page_title
+    %p
+      SSH keys allow you to establish a secure connection between your computer and GitLab.
+  .col-lg-9
+    %h5.prepend-top-0
+      Add an SSH key
+    %p
+      Before you can add an SSH key you need to
+      = link_to "generate it.", help_page_path("ssh", "README")
+    = render 'form'
+    %hr
+    %h5
+      Your SSH keys (#{@keys.count})
+    %div.append-bottom-default
+      - if @keys.any?
+        = render 'key_table'
+      - else
+        %p.profile-settings-message.text-center
+          - if is_admin
+            User has no ssh keys
+          - else
+            There are no SSH keys with access to your account.