Disambiguate user and username. (#552)

src/components/Login/LoginActions.tsx

@@ -1,11 +1,12 @@
 import { Dispatch } from "react";
-import history from "../../history";
 import { ThunkAction } from "redux-thunk";
 import { AnyAction } from "redux";
+
 import * as backend from "../../backend";
 import { getCurrentUser, setAvatar } from "../../backend/localStorage";
-import { User } from "../../types/user";
+import history from "../../history";
 import { StoreAction, reset } from "../../rootActions";
+import { User } from "../../types/user";
 
 export const LOGIN_ATTEMPT = "LOGIN_ATTEMPT";
 export type LOGIN_ATTEMPT = typeof LOGIN_ATTEMPT;
@@ -35,7 +36,7 @@ export const REGISTER_RESET = "REGISTER_RESET";
 export type REGISTER_RESET = typeof REGISTER_RESET;
 
 export interface LoginData {
-  user: string;
+  username: string;
   password?: string;
 }
 
@@ -44,11 +45,11 @@ export type LoginType =
   | LOGIN_FAILURE
   | LOGIN_SUCCESS
   | LOGIN_RESET
-  | LOGOUT
   | REGISTER_ATTEMPT
-  | REGISTER_SUCCESS
   | REGISTER_FAILURE
-  | REGISTER_RESET;
+  | REGISTER_SUCCESS
+  | REGISTER_RESET
+  | LOGOUT;
 
 //action types
 
@@ -58,14 +59,15 @@ export interface UserAction {
 }
 
 //thunk action creator
-export function asyncLogin(user: string, password: string) {
+export function asyncLogin(username: string, password: string) {
   return async (dispatch: Dispatch<UserAction>, getState: any) => {
+    dispatch(loginAttempt(username));
     await backend
-      .authenticateUser(user, password)
-      .then(async (res: string) => {
-        await localStorage.setItem("user", res); //Store tokens'
-        dispatch(loginSuccess(user));
-        var currentUser = getCurrentUser();
+      .authenticateUser(username, password)
+      .then(async (userString: string) => {
+        await localStorage.setItem("user", userString); //Store tokens'
+        dispatch(loginSuccess(username));
+        const currentUser = getCurrentUser();
         if (currentUser) {
           try {
             var avatar = await backend.avatarSrc(currentUser!);
@@ -77,44 +79,45 @@ export function asyncLogin(user: string, password: string) {
         history.push("/");
       })
       .catch((err) => {
-        dispatch(loginFailure(user));
+        dispatch(loginFailure(username));
       });
   };
 }
 
-export function loginAttempt(user: string): UserAction {
+export function loginAttempt(username: string): UserAction {
   return {
     type: LOGIN_ATTEMPT,
-    payload: { user },
+    payload: { username },
   };
 }
 
-export function loginFailure(user: string): UserAction {
+export function loginFailure(username: string): UserAction {
   return {
     type: LOGIN_FAILURE,
-    payload: { user },
+    payload: { username },
   };
 }
 
-export function loginSuccess(user: string): UserAction {
+export function loginSuccess(username: string): UserAction {
   return {
     type: LOGIN_SUCCESS,
-    payload: { user },
+    payload: { username },
   };
 }
 
 export function loginReset(): UserAction {
   return {
     type: LOGIN_RESET,
-    payload: { user: "" },
+    payload: { username: "" },
   };
 }
 
 export function logoutAndResetStore() {
   return (dispatch: Dispatch<UserAction | StoreAction>) => {
-    const user = localStorage.getItem("user");
-    if (user) {
-      dispatch(logout(user));
+    const userString: string | null = localStorage.getItem("user");
+    if (userString) {
+      const user: User = JSON.parse(userString);
+      dispatch(logout(user.username));
     }
     dispatch(reset());
     localStorage.removeItem("user");
@@ -123,21 +126,21 @@ export function logoutAndResetStore() {
 
 export function asyncRegister(
   name: string,
-  user: string,
+  username: string,
   email: string,
   password: string
 ) {
   return async (
     dispatch: Dispatch<UserAction | ThunkAction<any, {}, {}, AnyAction>>
   ) => {
-    dispatch(registerAttempt(user));
+    dispatch(registerAttempt(username));
     // Create new user
-    let newUser = new User(name, user, password);
+    let newUser: User = new User(name, username, password);
     newUser.email = email;
     await backend
       .addUser(newUser)
       .then((res) => {
-        dispatch(registerSuccess(user));
+        dispatch(registerSuccess(username));
         setTimeout(() => {
           dispatch(registerReset());
           history.push("/login");
@@ -150,37 +153,37 @@ export function asyncRegister(
       });
   };
 }
-export function registerAttempt(user: string): UserAction {
+export function registerAttempt(username: string): UserAction {
   return {
     type: REGISTER_ATTEMPT,
-    payload: { user },
+    payload: { username },
   };
 }
 
-export function registerSuccess(user: string): UserAction {
+export function registerFailure(errorMessage: string): UserAction {
   return {
-    type: REGISTER_SUCCESS,
-    payload: { user },
+    type: REGISTER_FAILURE,
+    payload: { username: errorMessage },
   };
 }
 
-export function registerFailure(errorMessage: string): UserAction {
+export function registerSuccess(username: string): UserAction {
   return {
-    type: REGISTER_FAILURE,
-    payload: { user: errorMessage },
+    type: REGISTER_SUCCESS,
+    payload: { username },
   };
 }
 
 export function registerReset(): UserAction {
   return {
     type: REGISTER_RESET,
-    payload: { user: "" },
+    payload: { username: "" },
   };
 }
 
-function logout(user: string): UserAction {
+function logout(username: string): UserAction {
   return {
     type: LOGOUT,
-    payload: { user: user },
+    payload: { username },
   };
 }

src/components/Login/LoginPage/LoginComponent.tsx

@@ -1,26 +1,26 @@
-//external modules
-import * as React from "react";
-import {
-  Translate,
-  LocalizeContextProps,
-  withLocalize,
-} from "react-localize-redux";
-import Button from "@material-ui/core/Button";
-import TextField from "@material-ui/core/TextField";
 import {
-  Grid,
+  Button,
   Card,
   CardContent,
   CircularProgress,
-  Typography,
+  Grid,
   Link,
+  TextField,
+  Typography,
 } from "@material-ui/core";
-import history from "../../../history";
 import ReCaptcha from "@matt-block/react-recaptcha-v2";
+import * as React from "react";
+import {
+  LocalizeContextProps,
+  Translate,
+  withLocalize,
+} from "react-localize-redux";
+
+import history from "../../../history";
 import { RuntimeConfig } from "../../../types/runtimeConfig";
 
 export interface LoginDispatchProps {
-  login?: (user: string, password: string) => void;
+  login?: (username: string, password: string) => void;
   logout: () => void;
   reset: () => void;
 }
@@ -31,10 +31,15 @@ export interface LoginStateProps {
 }
 
 export interface LoginState {
-  user: string;
+  username: string;
   password: string;
   isVerified: boolean;
-  error: { password: boolean; username: boolean };
+  error: LoginError;
+}
+
+interface LoginError {
+  username: boolean;
+  password: boolean;
 }
 
 export class Login extends React.Component<
@@ -48,10 +53,10 @@ export class Login extends React.Component<
     this.props.logout(); //Hitting the login page will log a user out (doubles as a logout page, essentially)
 
     this.state = {
-      user: "",
+      username: "",
       password: "",
       isVerified: !RuntimeConfig.getInstance().captchaRequired(),
-      error: { password: false, username: false },
+      error: { username: false, password: false },
     };
   }
 
@@ -80,15 +85,15 @@ export class Login extends React.Component<
   login(e: React.FormEvent<EventTarget>) {
     e.preventDefault();
 
-    let user = this.state.user.trim();
-    let pass = this.state.password.trim();
+    const username: string = this.state.username.trim();
+    const password: string = this.state.password.trim();
     let error = { ...this.state.error };
-    error.password = pass === "";
-    error.username = user === "";
-    if (error.password || error.username) {
+    error.username = username === "";
+    error.password = password === "";
+    if (error.username || error.password) {
       this.setState({ error });
     } else if (this.props.login) {
-      this.props.login(user, pass);
+      this.props.login(username, password);
     }
   }
 
@@ -108,8 +113,8 @@ export class Login extends React.Component<
                 required
                 autoComplete="username"
                 label={<Translate id="login.username" />}
-                value={this.state.user}
-                onChange={(e) => this.updateField(e, "user")}
+                value={this.state.username}
+                onChange={(e) => this.updateField(e, "username")}
                 error={this.state.error["username"]}
                 helperText={
                   this.state.error["username"] ? (

src/components/Login/LoginPage/index.tsx

@@ -1,14 +1,14 @@
-import Login, { LoginStateProps, LoginDispatchProps } from "./LoginComponent";
-import { StoreState } from "../../../types";
-
 import { connect } from "react-redux";
 import { ThunkDispatch } from "redux-thunk";
+
+import { StoreState } from "../../../types";
 import {
   asyncLogin,
-  UserAction,
   loginReset,
   logoutAndResetStore,
+  UserAction,
 } from "../LoginActions";
+import Login, { LoginDispatchProps, LoginStateProps } from "./LoginComponent";
 
 function mapStateToProps(state: StoreState): LoginStateProps {
   return {
@@ -21,8 +21,8 @@ export function mapDispatchToProps(
   dispatch: ThunkDispatch<StoreState, any, UserAction>
 ): LoginDispatchProps {
   return {
-    login: (user: string, password: string) => {
-      dispatch(asyncLogin(user, password));
+    login: (username: string, password: string) => {
+      dispatch(asyncLogin(username, password));
     },
     logout: () => {
       dispatch(logoutAndResetStore());

src/components/Login/LoginPage/tests/LoginComponent.test.tsx

@@ -59,28 +59,28 @@ describe("Testing login component", () => {
   });
 
   test("Login: no password", () => {
-    testLogin("User", "", false, true);
+    testLogin("Username", "", false, true);
   });
 
-  test("Login: no user", () => {
+  test("Login: no username", () => {
     testLogin("", "Password", true, false);
   });
 
   test("Login: all fields good", () => {
-    testLogin("User", "Password", false, false);
+    testLogin("Username", "Password", false, false);
   });
 });
 
 function testLogin(
-  user: string,
+  username: string,
   password: string,
-  goodUser: boolean,
+  goodUsername: boolean,
   goodPassword: boolean
 ) {
-  loginHandle.instance.setState({ user: user, password: password });
+  loginHandle.instance.setState({ username, password });
   loginHandle.instance.login(MOCK_EVENT);
   expect(loginHandle.instance.state.error).toEqual({
-    username: goodUser,
+    username: goodUsername,
     password: goodPassword,
   });
 }