update variable names

src/components/User/Login.js

@@ -1,76 +1,88 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { login } from '../../actions/authActions'
-import { clearMessages } from '../../actions/messageActions'
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { login } from "../../actions/authActions";
+import { clearMessages } from "../../actions/messageActions";
 
-import { withRouter } from 'react-router-dom';
+import { withRouter } from "react-router-dom";
 
-import Snackbar from '../Snackbar';
-import Alert from '../Alert';
-import Breadcrumbs from '../Breadcrumbs';
+import Snackbar from "../Snackbar";
+import Alert from "../Alert";
+import Breadcrumbs from "../Breadcrumbs";
 
-import Button from '@material-ui/core/Button';
-import IconButton from '@material-ui/core/IconButton';
+import Button from "@material-ui/core/Button";
+import IconButton from "@material-ui/core/IconButton";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
-import TextField from '@material-ui/core/TextField';
-import Divider from '@material-ui/core/Divider';
-import InputAdornment from '@material-ui/core/InputAdornment';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import Link from '@material-ui/core/Link';
-import * as Blockly from 'blockly'
+import TextField from "@material-ui/core/TextField";
+import Divider from "@material-ui/core/Divider";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import Link from "@material-ui/core/Link";
+import * as Blockly from "blockly";
 
 export class Login extends Component {
-
   constructor(props) {
     super(props);
     this.state = {
-      redirect: props.location.state ? props.location.state.from.pathname : null,
-      email: '',
-      password: '',
+      redirect: props.location.state
+        ? props.location.state.from.pathname
+        : null,
+      email: "",
+      password: "",
       snackbar: false,
-      type: '',
-      key: '',
-      message: '',
-      showPassword: false
+      type: "",
+      key: "",
+      message: "",
+      showPassword: false,
     };
   }
 
   componentDidUpdate(props) {
     const { message } = this.props;
     if (message !== props.message) {
-      if (message.id === 'LOGIN_SUCCESS') {
+      if (message.id === "LOGIN_SUCCESS") {
         if (this.state.redirect) {
           this.props.history.push(this.state.redirect);
-        }
-        else {
+        } else {
           this.props.history.goBack();
         }
       }
       // Check for login error
-      else if (message.id === 'LOGIN_FAIL') {
-        this.setState({ email: '', password: '', snackbar: true, key: Date.now(), message: Blockly.Msg.messages_LOGIN_FAIL, type: 'error' });
+      else if (message.id === "LOGIN_FAIL") {
+        this.setState({
+          email: "",
+          password: "",
+          snackbar: true,
+          key: Date.now(),
+          message: Blockly.Msg.messages_LOGIN_FAIL,
+          type: "error",
+        });
       }
     }
   }
 
-  onChange = e => {
+  onChange = (e) => {
     this.setState({ [e.target.name]: e.target.value });
   };
 
-  onSubmit = e => {
+  onSubmit = (e) => {
     e.preventDefault();
     const { email, password } = this.state;
-    if (email !== '' && password !== '') {
+    if (email !== "" && password !== "") {
       // create user object
       const user = {
         email,
-        password
+        password,
       };
       this.props.login(user);
     } else {
-      this.setState({ snackbar: true, key: Date.now(), message: Blockly.Msg.messages_login_error, type: 'error' });
+      this.setState({
+        snackbar: true,
+        key: Date.now(),
+        message: Blockly.Msg.messages_login_error,
+        type: "error",
+      });
     }
   };
 
@@ -85,12 +97,25 @@ export class Login extends Component {
   render() {
     return (
       <div>
-        <Breadcrumbs content={[{ link: '/user/login', title: Blockly.Msg.button_login }]} />
+        <Breadcrumbs
+          content={[{ link: "/user/login", title: Blockly.Msg.button_login }]}
+        />
 
-        <div style={{ maxWidth: '500px', marginLeft: 'auto', marginRight: 'auto' }}>
+        <div
+          style={{ maxWidth: "500px", marginLeft: "auto", marginRight: "auto" }}
+        >
           <h1>{Blockly.Msg.login_head}</h1>
           <Alert>
-            {Blockly.Msg.login_osem_account_01} <Link color='primary' rel="noreferrer" target="_blank" href={'https://opensensemap.org/'}>openSenseMap</Link> {Blockly.Msg.login_osem_account_02}.
+            {Blockly.Msg.login_osem_account_01}{" "}
+            <Link
+              color="primary"
+              rel="noreferrer"
+              target="_blank"
+              href={"https://opensensemap.org/"}
+            >
+              openSenseMap
+            </Link>{" "}
+            {Blockly.Msg.login_osem_account_02}.
           </Alert>
           <Snackbar
             open={this.state.snackbar}
@@ -99,51 +124,83 @@ export class Login extends Component {
             key={this.state.key}
           />
           <TextField
-            style={{ marginBottom: '10px' }}
+            style={{ marginBottom: "10px" }}
             // variant='outlined'
-            type='text'
+            type="text"
             label={Blockly.Msg.labels_username}
-            name='email'
+            name="email"
             value={this.state.email}
             onChange={this.onChange}
             fullWidth={true}
           />
           <TextField
             // variant='outlined'
-            type={this.state.showPassword ? 'text' : 'password'}
+            type={this.state.showPassword ? "text" : "password"}
             label={Blockly.Msg.labels_password}
-            name='password'
+            name="password"
             value={this.state.password}
             InputProps={{
-              endAdornment:
-                <InputAdornment
-                  position="end"
-                >
+              endAdornment: (
+                <InputAdornment position="end">
                   <IconButton
                     onClick={this.handleClickShowPassword}
                     onMouseDown={this.handleMouseDownPassword}
                     edge="end"
                   >
-                    <FontAwesomeIcon size='xs' icon={this.state.showPassword ? faEyeSlash : faEye} />
+                    <FontAwesomeIcon
+                      size="xs"
+                      icon={this.state.showPassword ? faEyeSlash : faEye}
+                    />
                   </IconButton>
                 </InputAdornment>
+              ),
             }}
             onChange={this.onChange}
             fullWidth={true}
           />
           <p>
-            <Button color="primary" variant='contained' onClick={this.onSubmit} style={{ width: '100%' }}>
-              {this.props.progress ?
-                <div style={{ height: '24.5px' }}><CircularProgress color="inherit" size={20} /></div>
-                : Blockly.Msg.button_login}
+            <Button
+              color="primary"
+              variant="contained"
+              onClick={this.onSubmit}
+              style={{ width: "100%" }}
+            >
+              {this.props.progress ? (
+                <div style={{ height: "24.5px" }}>
+                  <CircularProgress color="inherit" size={20} />
+                </div>
+              ) : (
+                Blockly.Msg.button_login
+              )}
             </Button>
           </p>
-          <p style={{ textAlign: 'center', fontSize: '0.8rem' }}>
-            <Link rel="noreferrer" target="_blank" href={'https://opensensemap.org/'} color="primary">{Blockly.Msg.login_lostpassword}</Link>
+          <p style={{ textAlign: "center", fontSize: "0.8rem" }}>
+            <Link
+              rel="noreferrer"
+              target="_blank"
+              href={"https://opensensemap.org/"}
+              color="primary"
+            >
+              {Blockly.Msg.login_lostpassword}
+            </Link>
           </p>
-          <Divider variant='fullWidth' />
-          <p style={{ textAlign: 'center', paddingRight: "34px", paddingLeft: "34px" }}>
-            {Blockly.Msg.login_createaccount}<Link rel="noreferrer" target="_blank" href={'https://opensensemap.org/'}>openSenseMap</Link>.
+          <Divider variant="fullWidth" />
+          <p
+            style={{
+              textAlign: "center",
+              paddingRight: "34px",
+              paddingLeft: "34px",
+            }}
+          >
+            {Blockly.Msg.login_createaccount}
+            <Link
+              rel="noreferrer"
+              target="_blank"
+              href={"https://opensensemap.org/"}
+            >
+              openSenseMap
+            </Link>
+            .
           </p>
         </div>
       </div>
@@ -155,12 +212,14 @@ Login.propTypes = {
   message: PropTypes.object.isRequired,
   login: PropTypes.func.isRequired,
   clearMessages: PropTypes.func.isRequired,
-  progress: PropTypes.bool.isRequired
+  progress: PropTypes.bool.isRequired,
 };
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
   message: state.message,
-  progress: state.auth.progress
+  progress: state.auth.progress,
 });
 
-export default connect(mapStateToProps, { login, clearMessages })(withRouter(Login));
+export default connect(mapStateToProps, { login, clearMessages })(
+  withRouter(Login)
+);