Migrated string refs in signup_email (#6602)

Renamed refs Fixed linting issue
mattermost · Oct 23, 2020 · 313a31f · 313a31f
1 parent 02f5bbc
commit 313a31f
Showing 1 changed file with 15 additions and 10 deletions.
diff --git a/components/signup/signup_email/signup_email.jsx b/components/signup/signup_email/signup_email.jsx
@@ -57,6 +57,10 @@ export default class SignupEmail extends React.PureComponent {
                 inviteId,
             };
         }
+
+        this.emailRef = React.createRef();
+        this.nameRef = React.createRef();
+        this.passwordRef = React.createRef();
     }
 
     componentDidMount() {
@@ -105,7 +109,8 @@ export default class SignupEmail extends React.PureComponent {
                 teamName: data.name,
             });
         } else if (error) {
-            this.setState({loading: false,
+            this.setState({
+                loading: false,
                 noOpenServerError: true,
                 serverError: (
                     <FormattedMessage
@@ -155,7 +160,7 @@ export default class SignupEmail extends React.PureComponent {
     }
 
     isUserValid = () => {
-        const providedEmail = this.refs.email.value.trim();
+        const providedEmail = this.emailRef.current.value.trim();
         if (!providedEmail) {
             this.setState({
                 nameError: '',
@@ -176,7 +181,7 @@ export default class SignupEmail extends React.PureComponent {
             return false;
         }
 
-        const providedUsername = this.refs.name.value.trim().toLowerCase();
+        const providedUsername = this.nameRef.current.value.trim().toLowerCase();
         if (!providedUsername) {
             this.setState({
                 nameError: (<FormattedMessage id='signup_user_completed.required'/>),
@@ -214,7 +219,7 @@ export default class SignupEmail extends React.PureComponent {
             return false;
         }
 
-        const providedPassword = this.refs.password.value;
+        const providedPassword = this.passwordRef.current.value;
         const {valid, error} = Utils.isValidPassword(providedPassword, this.props.passwordConfig);
         if (!valid && error) {
             this.setState({
@@ -248,9 +253,9 @@ export default class SignupEmail extends React.PureComponent {
             });
 
             const user = {
-                email: this.refs.email.value.trim(),
-                username: this.refs.name.value.trim().toLowerCase(),
-                password: this.refs.password.value,
+                email: this.emailRef.current.value.trim(),
+                username: this.nameRef.current.value.trim().toLowerCase(),
+                password: this.passwordRef.current.value,
                 allow_marketing: true,
             };
 
@@ -351,7 +356,7 @@ export default class SignupEmail extends React.PureComponent {
                             <input
                                 id='email'
                                 type='email'
-                                ref='email'
+                                ref={this.emailRef}
                                 className='form-control'
                                 defaultValue={this.state.email}
                                 placeholder=''
@@ -378,7 +383,7 @@ export default class SignupEmail extends React.PureComponent {
                             <input
                                 id='name'
                                 type='text'
-                                ref='name'
+                                ref={this.nameRef}
                                 className='form-control'
                                 placeholder=''
                                 maxLength={Constants.MAX_USERNAME_LENGTH}
@@ -402,7 +407,7 @@ export default class SignupEmail extends React.PureComponent {
                             <input
                                 id='password'
                                 type='password'
-                                ref='password'
+                                ref={this.passwordRef}
                                 className='form-control'
                                 placeholder=''
                                 maxLength='128'