Merge pull request #406 from travis-ci/lp-toggle-token

toggle token on profile page

app/controllers/accounts.coffee

@@ -7,4 +7,10 @@ Controller = Ember.ArrayController.extend
     @get('user.name') || @get('user.login')
   ).property('user.login', 'user.name')
 
+
+  actions: 
+    tokenVisibility: () ->
+      @toggleProperty('isVisible')
+      return false
+
 `export default Controller`

app/styles/app/layouts/profile.sass

@@ -100,7 +100,6 @@
   li
     margin: 1.5rem 0 2.5rem
   a
-    @extend %inline-block
     width: 100%
     &:hover
       h1, h2
@@ -240,6 +239,27 @@ p.profile-user-last
     right: 1em
     @extend .icon--dismiss-red
 
+.profile-token-toggle
+  .icon-eye
+    vertical-align: middle
+    path
+      fill: #B6B7B9
+    circle
+      stroke: #B6B7B9
+      fill: #fff
+    &:hover
+      path
+        fill: #666666
+      circle
+        stroke: #666666
+        fill: #fff
+  &.is-visible
+    .icon-eye
+      circle
+        fill: #B6B7B9
+      &:hover
+        circle
+          fill: #666666
 
 #unadministerable-hooks
   p

app/styles/app/modules/tooltips.sass

@@ -84,3 +84,12 @@
     height: 3.2em
     &:before
       left: 2em
+
+.tooltip--profile
+  @extend %tooltip
+  .tooltip-bubble
+    left: -2.4em
+    width: 6em
+    &:before
+      left: 2.5em
+

app/templates/profile/accounts.hbs

@@ -9,7 +9,26 @@
           <h1>{{userName}}</h1>
           <p>Repositories <strong>{{user.reposCount}}</strong></p>
         {{/link-to}}
-        <p class="profile-user-last">Token: <strong>{{auth.currentUser.token}}</strong></p>
+        <p class="profile-user-last">Token: 
+
+        {{#if isVisible}}
+          <strong>{{auth.currentUser.token}}</strong>
+        {{/if}}
+        <a {{action 'tokenVisibility'}} class="profile-token-toggle tooltip--profile {{if isVisible 'is-visible'}} dropdown">
+          <span class="tooltip-bubble">
+            {{#if isVisible}}hide token{{else}}show token{{/if}}
+          </span>
+          <span class="icon-eye">
+            <svg x="0px" y="0px" viewBox="2 -1 17 17" width="20" height="18" xml:space="preserve">
+              <g>
+                <path  d="M17.4,9.6c-0.1-0.2-3.3-4.1-7.4-4.1s-7.3,4-7.4,4.1c-0.2,0.2-0.2,0.6,0,0.8c0.1,0.2,3.3,4.1,7.4,4.1
+                  s7.3-4,7.4-4.1C17.6,10.2,17.6,9.8,17.4,9.6z M10,13.2c-2.8,0-5.2-2.3-6.1-3.2C4.8,9.1,7.2,6.8,10,6.8c2.8,0,5.2,2.3,6.1,3.2
+                  C15.2,10.9,12.8,13.2,10,13.2z"/>
+                <circle r="2.5" cx="10" cy="10"/>
+              </g>
+            </svg>
+          </span></a>
+        </p>
       </div>
     </div>
   </section>