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

Commit

Permalink
view token UI improvements
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
melanahammel committed Jul 13, 2017
1 parent 794bec4 commit 7f5cde3
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 7f5cde3

Please sign in to comment.