password reveal toggling

Squashed commit of the following:

commit fde3cc16310062842ccc676a7c33ebfe9b7a3372
Author: Mark Moser <MarkAMoser@gmail.com>
Date:   Sun Sep 11 19:51:32 2016 -0500

    icons

commit f4765d24073cdc7e790e9d6fbb73155ba96ac414
Author: Mark Moser <MarkAMoser@gmail.com>
Date:   Sun Sep 11 19:22:14 2016 -0500

    view toggling

commit 0929b005981a34e46aa0ad6e59d315d5203eed02
Author: Mark Moser <MarkAMoser@gmail.com>
Date:   Sun Sep 11 10:21:03 2016 -0500

    controller xhr

commit 859e1dff28f17feb43f9facc57f887f24e9e8fed
Author: Mark Moser <MarkAMoser@gmail.com>
Date:   Sun Sep 11 09:18:57 2016 -0500

    wip

Gemfile

@@ -5,6 +5,7 @@ gem 'bcrypt', '~> 3.1.7'
 gem 'mysql2', '>= 0.3.18', '< 0.5'
 gem 'rails', '~> 5.0', '>= 5.0.0.1'
 
+gem 'font-awesome-rails'
 gem 'jbuilder', '~> 2.6'
 gem 'jquery-rails'
 gem 'json', '~> 2.0.2'

Gemfile.lock

@@ -60,6 +60,8 @@ GEM
     ffi (1.9.14)
     figaro (1.1.1)
       thor (~> 0.14)
+    font-awesome-rails (4.6.3.0)
+      railties (>= 3.2, < 5.1)
     formatador (0.2.5)
     globalid (0.3.7)
       activesupport (>= 4.1.0)
@@ -237,6 +239,7 @@ DEPENDENCIES
   binding_of_caller
   byebug
   figaro (~> 1.1.1)
+  font-awesome-rails
   guard
   guard-livereload
   guard-minitest
@@ -264,4 +267,4 @@ DEPENDENCIES
   web-console
 
 BUNDLED WITH
-   1.12.5
+   1.13.0

app/assets/javascripts/application.js

@@ -13,4 +13,4 @@
 //= require jquery
 //= require jquery_ujs
 //= require turbolinks
-//= require_tree .
+//= require main

app/assets/javascripts/main.js

@@ -0,0 +1,30 @@
+function getPassword($container, password) {
+  $container.data('password', password);
+  $container.find('span').html(password);
+  $container.find('a').detach();
+  $container.prepend('<i class="fa fa-unlock fa-lg"></i>');
+}
+
+function hidePassword($src){
+  $src.siblings('span').html('********');
+  $src.removeClass('fa-unlock').addClass('fa-lock');
+}
+
+function revealPassword($src){
+  $src.siblings('span').html($src.parent().data('password'));
+  $src.removeClass('fa-lock').addClass('fa-unlock');
+}
+
+$(function(){
+  $("[data-id=passwd]").on("ajax:success", "a", function(e, data){
+    getPassword($(e.target).parent(), data.hash);
+  });
+
+  $("[data-id=passwd]").on('click', 'i', function(){
+    if($(this).hasClass('fa-unlock')){
+      hidePassword($(this));
+    } else {
+      revealPassword($(this));
+    }
+  });
+});

app/assets/stylesheets/application.css

@@ -10,6 +10,34 @@
  * files in this directory. Styles in this file should be added after the last require_* statement.
  * It is generally better to create a new file per style scope.
  *
+ *= require font-awesome
  *= require_tree .
  *= require_self
  */
+
+table {
+  width: 100%;
+}
+
+th {
+  text-align: left;
+}
+
+td {
+  padding: 5px 0;
+}
+
+.field {
+  margin: 5px 0;
+}
+
+td.passwd {
+  width: 20em;
+}
+
+.passwd a,
+.passwd i {
+  color: #000;
+  cursor: pointer;
+  text-decoration: none;
+}

app/controllers/accounts_controller.rb

@@ -1,5 +1,5 @@
 class AccountsController < ApplicationController
-  before_action :set_account, only: [:show, :edit, :update, :destroy]
+  before_action :set_account, only: [:show, :edit, :reveal, :update, :destroy]
 
   # GET /accounts
   # GET /accounts.json
@@ -21,6 +21,10 @@ class AccountsController < ApplicationController
   def edit
   end
 
+  def reveal
+    render json: { hash: @account.password }.to_json
+  end
+
   # POST /accounts
   # POST /accounts.json
   def create

app/models/application_record.rb

@@ -1,3 +1,7 @@
 class ApplicationRecord < ActiveRecord::Base
   self.abstract_class = true
+
+  def to_i
+    id
+  end
 end

app/views/accounts/index.html.erb

@@ -7,8 +7,8 @@
     <tr>
       <th>Username</th>
       <th>Password</th>
-      <th>Home</th>
       <th>Site</th>
+      <th>Home</th>
       <th colspan="3"></th>
     </tr>
   </thead>
@@ -17,12 +17,16 @@
     <% @accounts.each do |account| %>
       <tr>
         <td><%= account.username %></td>
-        <td><%= account.password %></td>
+        <td class="passwd" data-id="passwd">
-        <td><%= account.home %></td>
+          <%= link_to reveal_password_path(account.id), remote: true do %>
+            <i class="fa fa-lock fa-lg"></i>
+          <% end %>
+          <span>********</span>
+        </td>
         <td><%= account.site %></td>
+        <td><%= account.home %></td>
         <td><%= link_to 'Show', account %></td>
         <td><%= link_to 'Edit', edit_account_path(account) %></td>
-        <td><%= link_to 'Destroy', account, method: :delete, data: { confirm: 'Are you sure?' } %></td>
       </tr>
     <% end %>
   </tbody>

app/views/accounts/show.html.erb

@@ -7,7 +7,12 @@
 
 <p>
   <strong>Password:</strong>
-  <%= @account.password %>
+  <span class="passwd" data-id="passwd">
+    <%= link_to reveal_password_path(@account.id), remote: true do %>
+      <i class="fa fa-lock fa-lg"></i>
+    <% end %>
+    <span>********</span>
+  </span>
 </p>
 
 <p>
@@ -20,5 +25,6 @@
   <%= @account.site %>
 </p>
 
+<%= link_to 'Destroy', @account, method: :delete, data: { confirm: 'Are you sure?' } %>
 <%= link_to 'Edit', edit_account_path(@account) %> |
 <%= link_to 'Back', accounts_path %>

config/routes.rb

@@ -1,4 +1,6 @@
 Rails.application.routes.draw do
   resources :accounts
+  get 'accounts/reveal/:id', to: 'accounts#reveal', as: :reveal_password
+
   # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
 end

test/controllers/accounts_controller_test.rb

@@ -55,4 +55,12 @@ class AccountsControllerTest < ActionDispatch::IntegrationTest
 
     assert_redirected_to accounts_url
   end
+
+  test 'reveal should provide password' do
+    get reveal_password_url(@account.to_i), xhr: true
+    json = JSON.parse(response.body).to_hash
+
+    assert_response :success
+    assert_match '1q2w3e4r5t6y7u', json['hash']
+  end
 end