Skip to content

Commit

Permalink
ReauthRequired: remove legacy createReactClass (#51297)
Browse files Browse the repository at this point in the history 
* ReauthRequired: remove legacy createReactClass

* Address review comments
  • Loading branch information
@jsnajdr
jsnajdr authored Mar 24, 2021
1 parent 3d36eb9 commit 790d6d1
Showing 1 changed file with 73 additions and 78 deletions.
151 changes: 73 additions & 78 deletions client/me/reauth-required/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
* External dependencies
*/
import { connect } from 'react-redux';
import createReactClass from 'create-react-class';
import debugFactory from 'debug';
import { localize } from 'i18n-calypso';
import React from 'react';
Expand All @@ -23,59 +22,59 @@ import FormLabel from 'calypso/components/forms/form-label';
import FormVerificationCodeInput from 'calypso/components/forms/form-verification-code-input';
import { getCurrentUserId } from 'calypso/state/current-user/selectors';
import Notice from 'calypso/components/notice';
/* eslint-disable no-restricted-imports */
import observe from 'calypso/lib/mixins/data-observe';
/* eslint-enable no-restricted-imports */
import { recordGoogleEvent } from 'calypso/state/analytics/actions';
import SecurityKeyForm from 'calypso/me/reauth-required/security-key-form';
import TwoFactorActions from 'calypso/me/reauth-required/two-factor-actions';
import userUtilities from 'calypso/lib/user/utils';
import SecurityKeyForm from './security-key-form';
import TwoFactorActions from './two-factor-actions';

/**
* Style dependencies
*/
import './style.scss';

// autofocus is used for tracking purposes, not an a11y issue
/* eslint-disable jsx-a11y/no-autofocus, react/prefer-es6-class, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, jsx-a11y/anchor-is-valid */
const ReauthRequired = createReactClass( {
displayName: 'ReauthRequired',
mixins: [ observe( 'twoStepAuthorization' ) ],

getInitialState: function () {
return {
remember2fa: false, // Should the 2fa be remembered for 30 days?
code: '', // User's generated 2fa code
smsRequestsAllowed: true, // Can the user request another SMS code?
smsCodeSent: false,
twoFactorAuthType: 'authenticator',
};
},

getClickHandler( action, callback ) {
return () => {
this.props.recordGoogleEvent( 'Me', 'Clicked on ' + action );

if ( callback ) {
callback();
}
};
},
/* eslint-disable jsx-a11y/no-autofocus, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, jsx-a11y/anchor-is-valid */
class ReauthRequired extends React.Component {
state = {
remember2fa: false, // Should the 2fa be remembered for 30 days?
code: '', // User's generated 2fa code
smsRequestsAllowed: true, // Can the user request another SMS code?
smsCodeSent: false,
twoFactorAuthType: 'authenticator',
};

codeRequestTimer = false;

componentDidMount() {
this.props.twoStepAuthorization.on( 'change', this.update );
}

componentWillUnmount() {
clearTimeout( this.codeRequestTimer );
this.props.twoStepAuthorization.off( 'change', this.update );
}

update = () => this.forceUpdate();

getClickHandler = ( action, callback ) => () => {
this.props.recordGoogleEvent( 'Me', 'Clicked on ' + action );

if ( callback ) {
callback();
}
};

getCheckboxHandler( checkboxName ) {
return ( event ) => {
const action = 'Clicked ' + checkboxName + ' checkbox';
const value = event.target.checked ? 1 : 0;
getCheckboxHandler = ( checkboxName ) => ( event ) => {
const action = 'Clicked ' + checkboxName + ' checkbox';
const value = event.target.checked ? 1 : 0;

this.props.recordGoogleEvent( 'Me', action, 'checked', value );
};
},
this.props.recordGoogleEvent( 'Me', action, 'checked', value );
};

getFocusHandler( action ) {
return () => this.props.recordGoogleEvent( 'Me', 'Focused on ' + action );
},
getFocusHandler = ( action ) => () =>
this.props.recordGoogleEvent( 'Me', 'Focused on ' + action );

getCodeMessage: function () {
renderCodeMessage() {
if ( this.props.twoStepAuthorization.isTwoStepSMSEnabled() ) {
return this.props.translate(
'Press the button below to request an SMS verification code. ' +
Expand All @@ -100,9 +99,9 @@ const ReauthRequired = createReactClass( {
return this.props.translate(
'Please enter the verification code generated by your authenticator app.'
);
},
}

submitForm: function ( event ) {
submitForm = ( event ) => {
event.preventDefault();
this.setState( { validatingCode: true } );

Expand All @@ -111,47 +110,43 @@ const ReauthRequired = createReactClass( {
code: this.state.code,
remember2fa: this.state.remember2fa,
},
function ( error, data ) {
( error, data ) => {
this.setState( { validatingCode: false } );
if ( error ) {
debug( 'There was an error validating that code: ' + JSON.stringify( error ) );
} else {
debug( 'The code validated!' + JSON.stringify( data ) );
}
}.bind( this )
}
);
},

codeRequestTimer: false,

allowSMSRequests: function () {
this.setState( { smsRequestsAllowed: true } );
},
};

sendSMSCode: function () {
sendSMSCode() {
this.setState( { smsRequestsAllowed: false, smsCodeSent: true } );
this.codeRequestTimer = setTimeout( this.allowSMSRequests, 60000 );
this.codeRequestTimer = setTimeout( () => {
this.setState( { smsRequestsAllowed: true } );
}, 60000 );

this.props.twoStepAuthorization.sendSMSCode( function ( error, data ) {
this.props.twoStepAuthorization.sendSMSCode( ( error, data ) => {
if ( ! error && data.sent ) {
debug( 'SMS code successfully sent' );
} else {
debug( 'There was a failure sending the SMS code.' );
}
} );
},
}

preValidateAuthCode: function () {
preValidateAuthCode() {
return this.state.code.length && this.state.code.length > 5;
},
}

loginUserWithSecurityKey: function () {
loginUserWithSecurityKey = () => {
return this.props.twoStepAuthorization.loginUserWithSecurityKey( {
user_id: this.props.currentUserId,
} );
},
};

renderFailedValidationMsg: function () {
renderFailedValidationMsg() {
if ( ! this.props.twoStepAuthorization.codeValidationFailed() ) {
return null;
}
Expand All @@ -162,9 +157,9 @@ const ReauthRequired = createReactClass( {
text={ this.props.translate( 'You entered an invalid code. Please try again.' ) }
/>
);
},
}

renderSMSResendThrottled: function () {
renderSMSResendThrottled() {
if ( ! this.props.twoStepAuthorization.isSMSResendThrottled() ) {
return null;
}
Expand All @@ -179,13 +174,13 @@ const ReauthRequired = createReactClass( {
/>
</div>
);
},
}

renderVerificationForm() {
const method = this.props.twoStepAuthorization.isTwoStepSMSEnabled() ? 'sms' : 'app';
return (
<Card compact>
<p>{ this.getCodeMessage() }</p>
<p>{ this.renderCodeMessage() }</p>

<p>
<a
Expand Down Expand Up @@ -238,9 +233,9 @@ const ReauthRequired = createReactClass( {
</form>
</Card>
);
},
}

render: function () {
render() {
const method = this.props.twoStepAuthorization.isTwoStepSMSEnabled() ? 'sms' : 'authenticator';
const isSecurityKeySupported =
this.props.twoStepAuthorization.isSecurityKeyEnabled() && supported();
Expand Down Expand Up @@ -280,38 +275,38 @@ const ReauthRequired = createReactClass( {
/>
</Dialog>
);
},
}

refreshNonceOnFailure( error ) {
refreshNonceOnFailure = ( error ) => {
const errors = [].slice.call( error?.data?.errors ?? [] );
if ( errors.some( ( e ) => e.code === 'invalid_two_step_nonce' ) ) {
this.props.twoStepAuthorization.fetch();
}
},
};

handleAuthSwitch( authType ) {
handleAuthSwitch = ( authType ) => {
this.setState( { twoFactorAuthType: authType } );
if ( authType === 'sms' ) {
this.sendSMSCode();
}
},
};

handleChange( e ) {
handleChange = ( e ) => {
const { name, value } = e.currentTarget;
this.setState( { [ name ]: value } );
},
};

handleCheckedChange( e ) {
handleCheckedChange = ( e ) => {
const { name, checked } = e.currentTarget;
this.setState( { [ name ]: checked } );
},
} );
};
}

ReauthRequired.propTypes = {
currentUserId: PropTypes.number.isRequired,
};

/* eslint-enable jsx-a11y/no-autofocus, react/prefer-es6-class, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, jsx-a11y/anchor-is-valid */
/* eslint-enable jsx-a11y/no-autofocus, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, jsx-a11y/anchor-is-valid */

export default connect(
( state ) => ( {
Expand Down

0 comments on commit 790d6d1

Please sign in to comment.