Implement @jschatz1's comments.

- No hardcoded colors in any SCSS file except `variables.scss`
- Don't allow choosing a date in the past
- Use the same table as in the "Applications" tab
- The button should say "Create Personal Access Token"
- Float the revoke button to the right of the table cell
- Change the revocation message to be more explicit.
- Date shouldn't look selected on page load
- Don't use a panel for the created token
    - Use a normal flash for "Your new personal access token has been created"
    - Show the input (with the token) below it full width.
    - Put the "Make sure you save it - you won't be able to access it again." message near the input
- Have the created token's input highlight all on single click

5 files changed, 48 insertions, 38 deletions

diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index f253da814bc..fc3589dad65 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -256,3 +256,8 @@ $calendar-header-color: #b8b8b8;
 $calendar-hover-bg: #ecf3fe;
 $calendar-border-color: rgba(#000, .1);
 $calendar-unselectable-bg: #faf9f9;
+
+/*
+ * Personal Access Tokens
+ */
+$personal-access-tokens-disabled-label-color: #bbb;
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index a2bbe734d2a..88e062d156f 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -192,24 +192,12 @@
   }
 }
 
-.personal-access-tokens-revoked-label {
-  color: #bbb;
-}
-
 .personal-access-tokens-never-expires-label {
-  color: #bbb;
+  color: $personal-access-tokens-disabled-label-color;
 }
 
-.personal-access-tokens-token-column {
-  max-width: 500px
-}
-
-.created-personal-access-token {
-  margin: 15px 15px 0 0;
-  pre {
-    max-width: 400px;
-    display: inline;
-  }
+.datepicker.personal-access-tokens-expires-at .ui-state-disabled span {
+  text-align: center;
 }
 
 .user-profile {
diff --git a/app/controllers/profiles/personal_access_tokens_controller.rb b/app/controllers/profiles/personal_access_tokens_controller.rb
index a1545a5dd00..86e08fed8e2 100644
--- a/app/controllers/profiles/personal_access_tokens_controller.rb
+++ b/app/controllers/profiles/personal_access_tokens_controller.rb
@@ -10,7 +10,7 @@ class Profiles::PersonalAccessTokensController < Profiles::ApplicationController
 
     if @personal_access_token.save
       flash[:personal_access_token] = @personal_access_token.token
-      redirect_to profile_personal_access_tokens_path
+      redirect_to profile_personal_access_tokens_path, notice: "Your new personal access token has been created."
     else
       load_personal_access_tokens
       render :index
diff --git a/app/views/profiles/personal_access_tokens/index.html.haml b/app/views/profiles/personal_access_tokens/index.html.haml
index 64e632b20e5..4ad07df42dc 100644
--- a/app/views/profiles/personal_access_tokens/index.html.haml
+++ b/app/views/profiles/personal_access_tokens/index.html.haml
@@ -9,13 +9,16 @@
   .col-lg-9
 
     - if flash[:personal_access_token]
-      .panel.panel-success
-        .panel-heading Success!
-        .panel-body
-          Your new personal access token has been created. Make sure to save it - you can't see it again on this page.
-          .created-personal-access-token
-            %pre= flash[:personal_access_token]
-            = clipboard_button(clipboard_text: flash[:personal_access_token])
+      .created-personal-access-token
+        %h5.prepend-top-0
+          Your New Personal Access Token
+        .form-group
+          .input-group
+            = text_field_tag 'created-personal-access-token', flash[:personal_access_token], readonly: true, class: "form-control", 'aria-describedby' => "created-personal-access-token-help-block"
+            .input-group-addon= clipboard_button(clipboard_text: flash[:personal_access_token])
+          %span#created-personal-access-token-help-block.help-block Make sure you save it - you won't be able to access it again.
+
+      %hr
 
     %h5.prepend-top-0
       Add a Personal Access Token
@@ -33,10 +36,10 @@
       .form-group
         = f.label :expires_at, class: 'label-light'
         = f.hidden_field :expires_at, class: "form-control", required: false
-        .datepicker
+        .datepicker.personal-access-tokens-expires-at
 
       .prepend-top-default
-        = f.submit 'Add Personal Access Token', class: "btn btn-create"
+        = f.submit 'Create Personal Access Token', class: "btn btn-create"
 
     %hr
 
@@ -44,7 +47,7 @@
 
     - if @active_personal_access_tokens.present?
       .table-responsive
-        %table.table.table-striped.table-hover.active-personal-access-tokens
+        %table.table.active-personal-access-tokens
           %thead
             %tr
               %th Name
@@ -61,7 +64,7 @@
                     = token.expires_at.to_date.to_s(:medium)
                   - else
                     %span.personal-access-tokens-never-expires-label Never
-                %td= link_to "Revoke", revoke_profile_personal_access_token_path(token), method: :put, class: "btn btn-danger", data: { confirm: "Are you sure? This cannot be undone." }
+                %td= link_to "Revoke", revoke_profile_personal_access_token_path(token), method: :put, class: "btn btn-danger pull-right", data: { confirm: "Are you sure you want to revoke this certificate? This action cannot be undone." }
 
     - else
       .settings-message.text-center
@@ -73,7 +76,7 @@
 
     - if @inactive_personal_access_tokens.present?
       .table-responsive
-        %table.table.table-striped.table-hover.inactive-personal-access-tokens
+        %table.table.inactive-personal-access-tokens
           %thead
             %tr
               %th Name
@@ -90,7 +93,21 @@
 
 
 :javascript
-  $(".datepicker").datepicker({
-    dateFormat: "yy-mm-dd",
-    onSelect: function(dateText, inst) { $("#personal_access_token_expires_at").val(dateText) }
-  }).datepicker("setDate", $.datepicker.parseDate('yy-mm-dd', $('#personal_access_token_expires_at').val()));
+  var date = $('#personal_access_token_expires_at').val();
+
+  var datepicker = $(".datepicker").datepicker({
+    altFormat: "yy-mm-dd",
+    altField: "#personal_access_token_expires_at",
+    minDate: 0
+  });
+
+  if (date) {
+    datepicker.datepicker("setDate", $.datepicker.parseDate('yy-mm-dd', date));
+  }
+  else {
+    datepicker.datepicker("setDate", null);
+  }
+
+  $("#created-personal-access-token").click(function() {
+    this.select();
+  });
diff --git a/spec/features/profiles/personal_access_tokens_spec.rb b/spec/features/profiles/personal_access_tokens_spec.rb
index 5bba08d005c..105c5dae34e 100644
--- a/spec/features/profiles/personal_access_tokens_spec.rb
+++ b/spec/features/profiles/personal_access_tokens_spec.rb
@@ -12,7 +12,7 @@ describe 'Profile > Personal Access Tokens', feature: true, js: true do
   end
 
   def created_personal_access_token
-    find(".created-personal-access-token pre")
+    find(".created-personal-access-token input").value
   end
 
   def disallow_personal_access_token_saves!
@@ -30,8 +30,8 @@ describe 'Profile > Personal Access Tokens', feature: true, js: true do
       visit profile_personal_access_tokens_path
       fill_in "Name", with: FFaker::Product.brand
 
-      expect {click_on "Add Personal Access Token"}.to change { PersonalAccessToken.count }.by(1)
-      expect(created_personal_access_token).to have_text(PersonalAccessToken.last.token)
+      expect {click_on "Create Personal Access Token"}.to change { PersonalAccessToken.count }.by(1)
+      expect(created_personal_access_token).to eq(PersonalAccessToken.last.token)
       expect(active_personal_access_tokens).to have_text(PersonalAccessToken.last.name)
       expect(active_personal_access_tokens).to have_text("Never")
     end
@@ -44,8 +44,8 @@ describe 'Profile > Personal Access Tokens', feature: true, js: true do
       find("a[title='Next']").click
       click_on "1"
 
-      expect {click_on "Add Personal Access Token"}.to change { PersonalAccessToken.count }.by(1)
-      expect(created_personal_access_token).to have_text(PersonalAccessToken.last.token)
+      expect {click_on "Create Personal Access Token"}.to change { PersonalAccessToken.count }.by(1)
+      expect(created_personal_access_token).to eq(PersonalAccessToken.last.token)
       expect(active_personal_access_tokens).to have_text(PersonalAccessToken.last.name)
       expect(active_personal_access_tokens).to have_text(Date.today.next_month.at_beginning_of_month.to_s(:medium))
     end
@@ -56,7 +56,7 @@ describe 'Profile > Personal Access Tokens', feature: true, js: true do
         visit profile_personal_access_tokens_path
         fill_in "Name", with: FFaker::Product.brand
 
-        expect { click_on "Add Personal Access Token" }.not_to change { PersonalAccessToken.count }
+        expect { click_on "Create Personal Access Token" }.not_to change { PersonalAccessToken.count }
         expect(page).to have_content("Name cannot be nil")
       end
     end