Only show a personal access token right after its creation.

app/assets/stylesheets/pages/profile.scss

@@ -218,6 +218,14 @@
   max-width: 500px
 }
 
+.created-personal-access-token {
+  margin: 15px 15px 0 0;
+  pre {
+    max-width: 400px;
+    display: inline;
+  }
+}
+
 .user-profile {
   @media (max-width: $screen-xs-max) {
     .cover-block {

app/controllers/profiles/personal_access_tokens_controller.rb

@@ -9,7 +9,8 @@ class Profiles::PersonalAccessTokensController < Profiles::ApplicationController
     @personal_access_token = current_user.personal_access_tokens.generate(personal_access_token_params)
 
     if @personal_access_token.save
-      redirect_to profile_personal_access_tokens_path, notice: "Created personal access token!"
+      flash[:personal_access_token] = @personal_access_token.token
+      redirect_to profile_personal_access_tokens_path
     else
       render :index
     end

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

@@ -8,6 +8,16 @@
     %p
       You can generate a personal access token for each application you use that needs access to GitLab.
   .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])
+
     %h5.prepend-top-0
       Add a Personal Access Token
     %p.profile-settings-content
@@ -37,7 +47,6 @@
           %thead
             %tr
               %th Name
-              %th Token
               %th Created
               %th Expires
               %th Actions
@@ -45,11 +54,6 @@
             - @active_personal_access_tokens.each do |token|
               %tr
                 %td= token.name
-                %td.input-group.personal-access-tokens-token-column
-                  %input.form-control{ type: "text", value: token.token, readonly: true }
-                  %div.input-group-btn
-                    %button.btn.btn-default{ type: "button", data: { clipboard_text: token.token } }
-                      %i.fa.fa-clipboard
                 %td= token.created_at.to_date.to_s(:medium)
                 - if token.expires_at.present?
                   %td= token.expires_at.to_date.to_s(:medium)
@@ -71,17 +75,11 @@
           %thead
             %tr
               %th Name
-              %th Token
               %th Created
           %tbody
             - @inactive_personal_access_tokens.each do |token|
               %tr
                 %td= token.name
-                %td.input-group.personal-access-tokens-token-column
-                  %input.form-control{ type: "text", value: token.token, readonly: true }
-                  %div.input-group-btn
-                    %button.btn.btn-default{ type: "button", data: { clipboard_text: token.token } }
-                      %i.fa.fa-clipboard
                 %td= token.created_at.to_date.to_s(:medium)
 
     - else
@@ -91,5 +89,5 @@
 :javascript
   $(".datepicker").datepicker({
     dateFormat: "yy-mm-dd",
-    onSelect: function(dateText, inst) { $("#personal_access_token_params_expires_at").val(dateText) }
-  }).datepicker("setDate", $.datepicker.parseDate('yy-mm-dd', $('#personal_access_token_params_expires_at').val()));
+    onSelect: function(dateText, inst) { $("#personal_access_token_expires_at").val(dateText) }
+  }).datepicker("setDate", $.datepicker.parseDate('yy-mm-dd', $('#personal_access_token_expires_at').val()));

spec/features/profiles/personal_access_tokens_spec.rb

@@ -3,21 +3,35 @@ require 'spec_helper'
 describe 'Profile > Personal Access Tokens', feature: true, js: true do
   let(:user) { create(:user) }
 
+  def active_personal_access_tokens
+    find(".table.active-personal-access-tokens").native['innerHTML']
+  end
+
+  def inactive_personal_access_tokens
+    find(".table.inactive-personal-access-tokens").native['innerHTML']
+  end
+
+  def created_personal_access_token
+    find(".created-personal-access-token pre").native['innerHTML']
+  end
+
   before do
     login_as(user)
   end
 
   describe "token creation" do
-    it "allows creation of a token with an optional expiry date" do
+    it "allows creation of a token" 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)
 
-      active_personal_access_tokens = find(".table.active-personal-access-tokens").native['innerHTML']
+      expect {click_on "Add 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 match(PersonalAccessToken.last.name)
       expect(active_personal_access_tokens).to match("Never")
-      expect(active_personal_access_tokens).to match(PersonalAccessToken.last.token)
+    end
 
+    it "allows creation of a token with an expiry date" do
+      visit profile_personal_access_tokens_path
       fill_in "Name", with: FFaker::Product.brand
 
       # Set date to 1st of next month
@@ -25,11 +39,9 @@ describe 'Profile > Personal Access Tokens', feature: true, js: true do
       click_on "1"
 
       expect {click_on "Add Personal Access Token"}.to change { PersonalAccessToken.count }.by(1)
-
-      active_personal_access_tokens = find(".table.active-personal-access-tokens").native['innerHTML']
+      expect(created_personal_access_token).to eq(PersonalAccessToken.last.token)
       expect(active_personal_access_tokens).to match(PersonalAccessToken.last.name)
-      expect(active_personal_access_tokens).to match(Date.today.next_month.at_beginning_of_month.to_s)
-      expect(active_personal_access_tokens).to match(PersonalAccessToken.last.token)
+      expect(active_personal_access_tokens).to match(Date.today.next_month.at_beginning_of_month.to_s(:medium))
     end
   end
 
@@ -39,18 +51,14 @@ describe 'Profile > Personal Access Tokens', feature: true, js: true do
       visit profile_personal_access_tokens_path
       click_on "Revoke"
 
-      inactive_personal_access_tokens = find(".table.inactive-personal-access-tokens").native['innerHTML']
       expect(inactive_personal_access_tokens).to match(personal_access_token.name)
-      expect(inactive_personal_access_tokens).to match(personal_access_token.token)
     end
 
     it "moves expired tokens to the 'inactive' section" do
       personal_access_token = create(:personal_access_token, expires_at: 5.days.ago, user: user)
       visit profile_personal_access_tokens_path
 
-      inactive_personal_access_tokens = find(".table.inactive-personal-access-tokens").native['innerHTML']
       expect(inactive_personal_access_tokens).to match(personal_access_token.name)
-      expect(inactive_personal_access_tokens).to match(personal_access_token.token)
     end
   end
 end