From 7f5cde36a529633a73b7837ac65d3b8192bc27e7 Mon Sep 17 00:00:00 2001
From: melanahammel <melana.hammel@nike.com>
Date: Thu, 13 Jul 2017 13:46:07 -0700
Subject: [PATCH] view token UI improvements

* fixed bug so message appears onscreen when refresh limit is reached
* added hide token button and disabled renew button during token renew
* adjusted spacing for hide token value
* beautified hidden value, hide button, and copy button
---
 app/actions/authenticationActions.js          |   2 +-
 .../ViewTokenModal/ViewTokenModal.js          | 117 ++++++++++--------
 .../ViewTokenModal/ViewTokenModal.scss        |  59 ++++-----
 3 files changed, 95 insertions(+), 83 deletions(-)

diff --git a/app/actions/authenticationActions.js b/app/actions/authenticationActions.js
index e44ec38..87a068a 100644
--- a/app/actions/authenticationActions.js
+++ b/app/actions/authenticationActions.js
@@ -210,9 +210,9 @@ export function refreshAuth(token, redirectPath='/', redirect=true) {
             // Clears View Token Modal upon max refresh token limit to prevent errors
             dispatch(modalActions.clearAllModals())
             log.error('Failed to login user', response)
-            dispatch(messengerActions.addNewMessage(<ApiError message="Failed to refresh user token" response={response} />))
             dispatch(resetAuthState())
             hashHistory.push('dashboard/#/login')
+            dispatch(messengerActions.addNewMessage(<ApiError message="Failed to refresh user token" response={response} />))
         })
     }
 }
diff --git a/app/components/ViewTokenModal/ViewTokenModal.js b/app/components/ViewTokenModal/ViewTokenModal.js
index bf0573e..c71b1ff 100644
--- a/app/components/ViewTokenModal/ViewTokenModal.js
+++ b/app/components/ViewTokenModal/ViewTokenModal.js
@@ -22,6 +22,14 @@ export default class ViewTokenModal extends Component {
   constructor(props) {
     super(props)
 
+    this.state = {
+      isTokenRevealed: false
+    }
+
+    this.handleHideButtonClicked = function() {
+      this.setState({ isTokenRevealed: !this.state.isTokenRevealed });
+    }.bind(this)
+
     this.handleRenewTokenClicked = function() {
       this.props.dispatch(authActions.refreshAuth(this.props.clientToken, '', false))
     }.bind(this)
@@ -41,64 +49,75 @@ export default class ViewTokenModal extends Component {
         <div className="view-token-modal-token-wrapper">
           <div className="view-token-modal-token">
             <div className="view-token-modal-data-label">Client Token:</div>
-            <div className="view-token-modal-data-token-value">{clientToken} </div>
+            <div className="view-token-modal-data-token-value"
+              style={{display: this.state.isTokenRevealed ? 'block' : 'none' }}
+              >{clientToken}
+            </div>
+            <div className="secret-value-placeHolder"
+              style={{display: ! this.state.isTokenRevealed? 'block' : 'none' }}
+              >Hidden, click the reveal button
+            </div>
           </div>
-
           <div className='row-buttons'>
-            <CopyToClipboard text={clientToken}>
-              <div className={clientToken.length <= 1 ? 'btn-wrapper btn-wrapper-right' : 'btn-wrapper'}>
-                <div className='row-btn row-btn-copy'></div>
+            <div className="btn-wrapper btn-wrapper-left">
+              <input type="checkbox" className={! this.state.isTokenRevealed ? 'row-btn row-btn-reveal' : 'row-btn row-btn-revealed'} {...this.state.isTokenRevealed}
+                onClick={this.handleHideButtonClicked}/>
               </div>
-            </CopyToClipboard>
+              <CopyToClipboard text={clientToken}>
+                <div className={clientToken.length <= 1 ? 'btn-wrapper btn-wrapper-right' : 'btn-wrapper'}>
+                  <div className='row-btn row-btn-copy'></div>
+                </div>
+              </CopyToClipboard>
+            </div>
           </div>
 
-        </div>
-        <div className="view-token-modal-date-wrapper">
-          <div className="view-token-modal-date">
-            <div className="view-token-modal-data-label">Client Token Expiration Date:</div>
-            <div className="view-token-modal-data-date-value">{tokenExpiresDate}</div>
+          <div className="view-token-modal-date-wrapper">
+            <div className="view-token-modal-date">
+              <div className="view-token-modal-data-label">Client Token Expiration Date:</div>
+              <div className="view-token-modal-data-date-value">{tokenExpiresDate}</div>
+            </div>
           </div>
-        </div>
-        <div className="view-token-modal-time-left-wrapper">
-          <div className="view-token-modal-time-left">
-            <div className="view-token-modal-data-label">Client Token Time Remaining:</div>
-            <div className="view-token-modal-data-time-left-value">{dateDiffinMin(tokenExpiresDate)} minutes</div>
+          <div className="view-token-modal-time-left-wrapper">
+            <div className="view-token-modal-time-left">
+              <div className="view-token-modal-data-label">Client Token Time Remaining:</div>
+              <div className="view-token-modal-data-time-left-value">{dateDiffinMin(tokenExpiresDate)} minutes</div>
+            </div>
           </div>
-        </div>
 
-        <div id="renew-btn-container">
-          <div id='fountainG' className={isAuthenticating ? 'show-me' : 'hide-me'}>
-            <div id='fountainG_1' className='fountainG'></div>
-            <div id='fountainG_2' className='fountainG'></div>
-            <div id='fountainG_3' className='fountainG'></div>
-            <div id='fountainG_4' className='fountainG'></div>
-            <div id='fountainG_5' className='fountainG'></div>
-            <div id='fountainG_6' className='fountainG'></div>
-            <div id='fountainG_7' className='fountainG'></div>
-            <div id='fountainG_8' className='fountainG'></div>
-          </div>
-          <div id='close-btn'
-            className='btn ncss-btn-dark-grey ncss-brand pt3-sm pr5-sm pb3-sm pl5-sm pt2-lg pb2-lg u-uppercase'
-            onClick={ () => {
-              dispatch(modalActions.popModal())
-            }}>Close
-          </div>
-          <div id='renew-btn'
-            className='btn ncss-btn-dark-grey ncss-brand pt3-sm pr5-sm pb3-sm pl5-sm pt2-lg pb2-lg u-uppercase'
-            onClick={this.handleRenewTokenClicked}
-            >Renew Token
+          <div id="renew-btn-container">
+            <div id='fountainG' className={isAuthenticating ? 'show-me' : 'hide-me'}>
+              <div id='fountainG_1' className='fountainG'></div>
+              <div id='fountainG_2' className='fountainG'></div>
+              <div id='fountainG_3' className='fountainG'></div>
+              <div id='fountainG_4' className='fountainG'></div>
+              <div id='fountainG_5' className='fountainG'></div>
+              <div id='fountainG_6' className='fountainG'></div>
+              <div id='fountainG_7' className='fountainG'></div>
+              <div id='fountainG_8' className='fountainG'></div>
+            </div>
+            <div id='close-btn'
+              className='btn ncss-btn-dark-grey ncss-brand pt3-sm pr5-sm pb3-sm pl5-sm pt2-lg pb2-lg u-uppercase'
+              onClick={ () => {
+                dispatch(modalActions.popModal())
+              }}>Close
+            </div>
+            <button id='renew-btn'
+              className='btn ncss-btn-dark-grey ncss-brand pt3-sm pr5-sm pb3-sm pl5-sm pt2-lg pb2-lg u-uppercase'
+              onClick={this.handleRenewTokenClicked}
+              disabled={isAuthenticating}
+              >Renew Token
+            </button>
           </div>
         </div>
-      </div>
-    )
+      )
+    }
   }
-}
 
-export function dateDiffinMin(expiresDate) {
-  var expDate = new Date(expiresDate)
-  var currentDate = new Date()
-  var t2 = expDate.getTime();
-  var t1 = currentDate.getTime();
-  var diff = parseInt((t2-t1)/(60*1000));
-  return diff
-}
+  export function dateDiffinMin(expiresDate) {
+    var expDate = new Date(expiresDate)
+    var currentDate = new Date()
+    var t2 = expDate.getTime();
+    var t1 = currentDate.getTime();
+    var diff = parseInt((t2-t1)/(60*1000));
+    return diff
+  }
diff --git a/app/components/ViewTokenModal/ViewTokenModal.scss b/app/components/ViewTokenModal/ViewTokenModal.scss
index 6ee43df..64137ff 100644
--- a/app/components/ViewTokenModal/ViewTokenModal.scss
+++ b/app/components/ViewTokenModal/ViewTokenModal.scss
@@ -41,6 +41,8 @@
     padding-bottom: 5px;
     display: flex;
     flex-direction: row;
+    width: 900;
+    height: 40;
 
     .view-token-modal-token {
       display: flex;
@@ -100,20 +102,35 @@
       margin-left: 12px;
       margin-top: 3px;
     }
+
+    .secret-value-placeholder {
+      padding-left: 38px;
+      padding-right: 38px;
+      margin-left: 140px;
+      margin-top: 3px;
+
+      text-align: center;
+      font-size: 14px;
+      font-weight: normal;
+      border-radius: 2px;
+      background-color: $snkrs_medium_grey;
+    }
 }
 
 .row-buttons {
   display: flex;
-  // margin-left: 6px;
-  // height: 40px;
+  flex-direction: row;
+  margin-top: -3px;
+  margin-left: 6px;
+  height: 40px;
+  padding-top: 5px;
+  padding-left: 7px;
+  padding-right: 7px;
+  padding-bottom: 5px;
 
   .btn-wrapper {
     @extend .clickable;
     box-shadow: inset 0 1px 0 0 $snkrs_medium_grey,inset -1px 0 0 0 $snkrs_medium_grey,inset 0 -1px 0 0 $snkrs_medium_grey,inset 1px 0 0 0 $snkrs_medium_grey;
-    // padding: 3px;
-    // width: 40px;
-
-    margin-right: -1px;
 
     &:hover {
       background-color: $snkrs_off_white;
@@ -141,20 +158,14 @@
   .row-btn-copy {
     background: url(../../assets/images/copy.svg);
     background-repeat: no-repeat;
-
-    // padding: 11px;
-    // margin-top: 6px;
-    // margin-left: 7px;
-
-    margin-top: 20px;
-    margin-left: 20px;
+    margin-top: 1px!important;
   }
 
   .row-btn-reveal {
     background: url(../../assets/images/eye.svg);
     background-repeat: no-repeat;
     padding: 12px;
-    margin-top: 9px;
+    margin-top: 4px!important;
     margin-left: 5px;
   }
 
@@ -162,25 +173,7 @@
     background: url(../../assets/images/eye_closed.svg);
     background-repeat: no-repeat;
     padding: 12px;
-
-    margin-top: 5px;
+    margin-top: 0px!important;
     margin-left: 4px;
   }
-
-  .row-btn-remove {
-    background: url(../../assets/images/remove-red.svg);
-    background-repeat: no-repeat;
-    padding: 9px;
-
-    margin-top: 8px;
-    margin-left: 8px;
-  }
-}
-
-.secret-value-placeholder {
-  text-align: center;
-  font-size: 14px;
-  font-weight: normal;
-  border-radius: 2px;
-  background-color: $snkrs_medium_grey;
 }