Skip to content
This repository has been archived by the owner on Aug 4, 2020. It is now read-only.

Commit

Permalink
Merge pull request #25 from Nike-Inc/feature/view_refresh_vault_token
Browse files Browse the repository at this point in the history 
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
  • Loading branch information
Melana Hammel authored Jul 13, 2017
2 parents 794bec4 + 7f5cde3 commit 3f009e5
Show file tree
Hide file tree
Showing 3 changed files with 95 additions and 83 deletions.
2 changes: 1 addition & 1 deletion app/actions/authenticationActions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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} />))
})
}
}
Expand Down
117 changes: 68 additions & 49 deletions app/components/ViewTokenModal/ViewTokenModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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
}
59 changes: 26 additions & 33 deletions app/components/ViewTokenModal/ViewTokenModal.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,8 @@
padding-bottom: 5px;
display: flex;
flex-direction: row;
width: 900;
height: 40;

.view-token-modal-token {
display: flex;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -141,46 +158,22 @@
.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;
}

.row-btn-revealed {
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;
}

0 comments on commit 3f009e5

Please sign in to comment.