Modify display and style of API tokens (#1490)

* Modify display and style of API tokens

* Delete accidentally-included slideshare tag

app/assets/stylesheets/settings.scss

@@ -277,6 +277,11 @@
     .secret-field {
       margin:30px 0px;
     }
+    hr {
+      opacity: 0.3;
+      margin-top: 20px;
+      width: 70%;
+    }
   }
   .default-billing-message {
     margin:10px 0px;
@@ -521,9 +526,14 @@ ul.delete__account{
 .api__secret {
   &__container {
     background-color: $off-white;
-    height: 3rem;
-    margin: 1rem 0;
+    height: 6.5rem;
+    margin: 0.5rem 0;
     padding: 0.5rem;
+    border-radius: 3px;
+    border: 1px solid $light-medium-gray;
+    @media screen and ( min-width: 600px ){
+      height: 5rem;
+    }
   }
 
   &__desc {
@@ -535,6 +545,16 @@ ul.delete__account{
       margin: 0;
       padding-bottom: 0.25rem;
     }
+    .content {
+      margin: 0;
+      color: $medium-gray;
+      font-weight: bold;
+      font-family: $monospace;
+      padding: 5px 8px;
+      border: 1px dashed $black;
+      overflow: hidden;
+      margin: 3px 0px;
+    }
     .subtitle {
       margin: 0;
       color: $dark-medium-gray;
@@ -542,9 +562,12 @@ ul.delete__account{
   }
 
   &__revoke {
-    float: left;
-    width: 30%;
     text-align: right;
-    margin: 0 auto;
+    margin: 1.6rem auto 0;
+    display: block;
+    @media screen and ( min-width: 600px ){
+      float: left;
+      width: 30%;
+    }
   }
 }

app/controllers/api_secrets_controller.rb

@@ -7,7 +7,7 @@ class ApiSecretsController < ApplicationController
     @secret = ApiSecret.new(permitted_attributes(ApiSecret))
     @secret.user_id = current_user.id
     if @secret.save
-      flash[:notice] = "Your access token has been generated: #{@secret.secret}. Be sure to copy it to somewhere safe now. You won’t be able to see it again!"
+      flash[:notice] = "Your access token has been generated: #{@secret.secret}."
     else
       flash[:error] = @secret.errors.full_messages.to_sentence
     end

app/views/users/_account.html.erb

@@ -4,23 +4,26 @@
       <img src="<%= asset_path('github-logo.svg') %>" /> CONNECT GITHUB ACCOUNT
     </a>
   </div>
+  <hr/>
 <% end %>
 
+
 <% if @user.identities.find_by(provider:'twitter').nil? %>
   <div class="field">
     <a href="/users/auth/twitter?callback_url=<%= ApplicationConfig["APP_PROTOCOL"] %><%= ApplicationConfig["APP_DOMAIN"] %>/users/auth/twitter/callback" class="big-button cta" data-no-instant>
       <img src="<%= asset_path('twitter-logo.svg') %>" /> CONNECT TWITTER ACCOUNT
     </a>
   </div>
+  <hr/>
 <% end %>
 
-<h2>Access Tokens</h2>
-<p>You can generate personal access tokens to use for authentication with the DEV API.</p>
+<h2>DEV API Access Tokens</h2>
+<p>You can generate personal access tokens to use for authentication with the DEV API. The API is still in early beta though.</p>
 <h3>Generate an access token</h3>
-<h4>Token description</h4>
 <%= form_tag users_api_secrets_path, method: :post do %>
   <%= fields_for :api_secret do |api_secret| %>
     <div class="field">
+      <%= api_secret.label(:description, "Token Description") %>
       <%= api_secret.text_field(:description, placeholder: "What's this token for?", required: true) %>
     </div>
   <% end %>
@@ -29,7 +32,7 @@
   </button>
 <% end %>
 
-<h3>Active access tokens</h3>
+<h3>Active access tokens (Never share these secrets!)</h3>
 <% if @user.api_secrets.empty? %>
   <p>None yet!</p>
 <% end %>
@@ -37,6 +40,7 @@
   <div class='api__secret__container'>
     <div class='api__secret__desc'>
       <p class='title'><%= api_secret.description %></h4>
+      <p class='content'><%= api_secret.secret %></p>
       <p class='subtitle'>Created <%= api_secret.created_at.to_date.to_s %></p>
     </div>
     <div class='api__secret__revoke'>