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

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><%= account.home %></td>
+        <td 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>
+        </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 %>