Users can log in with email or username

api/controllers/user.js

@@ -29,8 +29,11 @@ router.post('/register', (req, res) => {
 
 // Login
 router.post('/login', (req, res) => {
- const { username, password } = req.body;
- models.User.findOne({ where: { username } })
+ const { emailOrUsername, password } = req.body;
+ models.User.findOne({ where: { [Op.or]: [
+ { email: emailOrUsername },
+ { username: emailOrUsername }
+ ] }})
  .then(async user => {
  if (!user) {
  return res.status(401).json({ error: 'Invalid credentials.' })
@@ -128,4 +131,4 @@ router.get('/health', (req, res) => {
  return res.send("I'm healthy!");
 });
 
-module.exports = router;
+module.exports = router;

frontend/src/app/Auth/Login.tsx

@@ -21,12 +21,12 @@ const LoginPage: React.FC<LoginSpecs.Props> = ({ login, history }) => {
  return (
  <Formik
  initialValues={{
-username: '',
+emailOrUsername: '',
  password: ''
  }}
  onSubmit={(values, formikActions) => {
  setAuthError(false);
- login(values.username, values.password)
+ login(values.emailOrUsername, values.password)
  .then(resp =>
  app.setAuthToken(resp.authToken).then(() => history.push(INVENTORY))
  )
@@ -36,7 +36,7 @@ const LoginPage: React.FC<LoginSpecs.Props> = ({ login, history }) => {
  });
  }}
  validationSchema={Yup.object().shape({
-username: Yup.string().required('Username is required'),
+emailOrUsername: Yup.string().required('Email or Username is required'),
  password: Yup.string().required('Password is required')
  })}
  >
@@ -50,14 +50,14 @@ const LoginPage: React.FC<LoginSpecs.Props> = ({ login, history }) => {
  <Box>
  <h1>Sign In</h1>
  {authError && (
- <Alert message="Invalid username or password. Please try again." type="error"/>
+ <Alert message="Invalid email/username or password. Please try again." type="error"/>
  )}
- <Input label="Username"
- value={values.username}
- error={wasSubmitted && !!errors.username}
- errorMsg={errors.username}
- autocomplete="username"
- onChange={v => setFieldValue('username', v)}/>
+ <Input label="Email/Username"
+ value={values.emailOrUsername}
+ error={wasSubmitted && !!errors.emailOrUsername}
+ errorMsg={errors.emailOrUsername}
+ autocomplete="emailOrUsername"
+ onChange={v => setFieldValue('emailOrUsername', v)}/>
 
  <Input label="Password"
  value={values.password}
@@ -94,4 +94,4 @@ const LoginWithApi = withApi<LoginSpecs.ApiProps>(api => ({
  login: api.UserService.login
 }))(LoginPage);
 
-export default LoginWithApi;
+export default LoginWithApi;

frontend/src/app/Auth/types.d.ts

@@ -7,7 +7,7 @@ export declare module LoginSpecs {
  }
 
  export interface FormValues {
-username: string;
+emailOrUsername: string;
  password: string;
  }
 
@@ -52,4 +52,4 @@ export declare module ResetPasswordSpecs {
  }
 
  export type Props = ApiProps & RouteComponentProps<{ callbackId: string }>;
-}
+}

frontend/src/lib/api/user.ts

@@ -19,8 +19,8 @@ export default class User implements UserService {
  .then((resp: AxiosResponse<UserInfo>) => resp.data);
  };
 
- login: Login = (username: string, password: string) => {
- return this.api.post(`${this.baseUrl}/login`, { username, password })
+ login: Login = (emailOrUsername: string, password: string) => {
+ return this.api.post(`${this.baseUrl}/login`, { emailOrUsername, password })
  .then((resp: AxiosResponse<AuthToken>) => resp.data);
  };
 
@@ -43,4 +43,4 @@ export default class User implements UserService {
  return this.api.post(`${this.baseUrl}/reset-password`, { callbackId, password })
  .then((resp: AxiosResponse<null>) => resp.data);
  }
-}
+}

frontend/src/types/api/user.ts

@@ -19,7 +19,7 @@ export interface Status {
 }
 
 export interface Login {
- (username: string, password: string): Promise<AuthToken>;
+ (emailOrUsername: string, password: string): Promise<AuthToken>;
 }
 
 export interface Register {
@@ -36,4 +36,4 @@ export interface RequestReset {
 
 export interface ResetPassword {
  (callbackId: string, password: string): Promise<null>;
-}
+}