Merge pull request #95 from thembones79/feature/users-list-and-change…

…=password

initial commit

src/actions/dashboardActions/backToUsersList.ts

@@ -0,0 +1,11 @@
+import { ActionTypes } from "../../actions";
+
+export type BackToUsersListAction = {
+  type: ActionTypes.BACK_TO_USERS_LIST;
+};
+
+export const backToUsersList = (): BackToUsersListAction => {
+  return {
+    type: ActionTypes.BACK_TO_USERS_LIST,
+  };
+};

src/actions/dashboardActions/changePassword.ts

@@ -0,0 +1,47 @@
+import axios from "axios";
+import { Dispatch } from "redux";
+import { ActionTypes } from "..";
+import { ROOT_URL, headers } from "../../config";
+
+export interface IChangePassword {
+  password: string;
+  _id: string;
+}
+
+export type ChangePasswordAction = {
+  type: ActionTypes.CHANGE_PASSWORD;
+  payload: string;
+};
+
+export type ChangePasswordActionError = {
+  type: ActionTypes.CHANGE_PASSWORD_ERROR;
+  payload: string;
+};
+
+export const changePassword =
+  (
+    { password,
+      _id }: IChangePassword
+  ) =>
+    async (dispatch: Dispatch) => {
+      try {
+        const response = await axios.put(
+          `${ROOT_URL}/api/user/password/${_id}`,
+          {
+            password,
+          },
+          {
+            headers,
+          }
+        );
+        dispatch<ChangePasswordAction>({
+          type: ActionTypes.CHANGE_PASSWORD,
+          payload: response.data,
+        });
+      } catch (e: any) {
+        dispatch<ChangePasswordActionError>({
+          type: ActionTypes.CHANGE_PASSWORD_ERROR,
+          payload: e.response.data.error,
+        });
+      }
+    };

src/actions/dashboardActions/getUsers.ts

@@ -0,0 +1,47 @@
+import axios from "axios";
+import { Dispatch } from "redux";
+import { ActionTypes } from "..";
+import { ROOT_URL, headers } from "../../config";
+
+export type UserType = {
+  _id: string;
+  firstname: string;
+  lastname: string;
+  type: string;
+  email: string;
+  password: string;
+};
+
+export type GetUsersBeginAction = {
+  type: ActionTypes.GET_USERS_BEGIN;
+};
+
+export type GetUsersSuccessAction = {
+  type: ActionTypes.GET_USERS_SUCCESS;
+  payload: UserType[];
+};
+
+export type GetUsersActionError = {
+  type: ActionTypes.GET_USERS_ERROR;
+  payload: string;
+};
+
+export const getUsers = () => async (dispatch: Dispatch) => {
+  dispatch<GetUsersBeginAction>({
+    type: ActionTypes.GET_USERS_BEGIN,
+  });
+  try {
+    const response = await axios.get(`${ROOT_URL}/api/user`, {
+      headers,
+    });
+    dispatch<GetUsersSuccessAction>({
+      type: ActionTypes.GET_USERS_SUCCESS,
+      payload: response.data.users,
+    });
+  } catch (e: any) {
+    dispatch<GetUsersActionError>({
+      type: ActionTypes.GET_USERS_ERROR,
+      payload: e.response ? e.response.data.error : "server is not responding",
+    });
+  }
+};

src/actions/dashboardActions/index.ts

@@ -16,3 +16,8 @@ export * from "./savePartnumber";
 export * from "./startEditingPartnumber";
 export * from "./updateGivenTactTime";
 export * from "./updateGivenHourlyRate";
+export * from "./backToUsersList";
+export * from "./changePassword";
+export * from "./getUsers";
+export * from "./startAddingUser";
+export * from "./startChangingPassword";

src/actions/dashboardActions/startAddingUser.ts

@@ -0,0 +1,11 @@
+import { ActionTypes } from "../../actions";
+
+export type StartAddingUserAction = {
+  type: ActionTypes.START_ADDING_USER;
+};
+
+export const startAddingUser = (): StartAddingUserAction => {
+  return {
+    type: ActionTypes.START_ADDING_USER,
+  };
+};

src/actions/dashboardActions/startChangingPassword.ts

@@ -0,0 +1,16 @@
+import { ActionTypes } from "../../actions";
+
+export type StartChangingPasswordAction = {
+  type: ActionTypes.START_CHANGING_PASSWORD;
+  payload: string;
+};
+
+export const startChangingPassword = (userId:string): StartChangingPasswordAction => {
+  return {
+    type: ActionTypes.START_CHANGING_PASSWORD,
+    payload: userId,
+  };
+};
+
+
+

src/actions/types.ts

@@ -81,6 +81,14 @@ import {
   UpdateGivenHourlyRateAction,
   UpdateGivenTactTimeAction,
   BackToPartnumbersListAction,
+  BackToUsersListAction,
+  ChangePasswordAction,
+  ChangePasswordActionError,
+  GetUsersBeginAction,
+  GetUsersSuccessAction,
+  GetUsersActionError,
+  StartAddingUserAction,
+  StartChangingPasswordAction,
 } from "./dashboardActions";
 
 import {
@@ -133,8 +141,6 @@ export const UPDATE_MANY_PRODS_WITH_ONE_REDIR_ERROR =
 export enum ActionTypes {
   AUTH_USER,
   AUTH_ERROR,
-  ADD_USER,
-  ADD_USER_ERROR,
   FETCH_MESSAGE,
   INSERT_SCAN,
   INSERT_SCAN_ERROR,
@@ -212,6 +218,17 @@ export enum ActionTypes {
   VIEW_ORDER_DETAILS,
   BACK_TO_ORDERS_LIST,
 
+  START_ADDING_USER,
+  ADD_USER,
+  ADD_USER_ERROR,
+  BACK_TO_USERS_LIST,
+  GET_USERS_BEGIN,
+  GET_USERS_SUCCESS,
+  GET_USERS_ERROR,
+  START_CHANGING_PASSWORD,
+  CHANGE_PASSWORD,
+  CHANGE_PASSWORD_ERROR,
+
   GET_PARTNUMBERS_BEGIN,
   GET_PARTNUMBERS_SUCCESS,
   GET_PARTNUMBERS_ERROR,
@@ -225,6 +242,7 @@ export enum ActionTypes {
   SAVE_PARTNUMBER,
   SAVE_PARTNUMBER_ERROR,
   START_EDITING_PARTNUMBER,
+  START_ADDING_PARTNUMBER,
   CONFIGURE_PARTNUMBERS,
   UPDATE_PARTNUMBERS_LIST,
   EDIT_PARTNUMBER_DETAILS,
@@ -345,7 +363,15 @@ export type DashboardAction =
   | GetOrderDetailsSuccessAction
   | GetOrderDetailsActionError
   | ViewOrderDetailsAction
-  | BackToOrdersListAction;
+  | BackToOrdersListAction
+ | BackToUsersListAction      
+ | ChangePasswordAction
+ | ChangePasswordActionError
+ | GetUsersBeginAction
+ | GetUsersSuccessAction
+ | GetUsersActionError
+ | StartAddingUserAction
+ | StartChangingPasswordAction;
 
 export type WidsAction =
   | GetRedirectionsAction

src/components/Dashboard/ManagementUsers.tsx

@@ -2,21 +2,20 @@ import React, { Component, ElementType } from "react";
 import { connect } from "react-redux";
 import * as actions from "../../actions";
 import requireAuth from "../requireAuth";
-import AddUser from "./AddUser";
+import UsersRouter from "./Users/UserRouter";
 import { StoreState } from "../../reducers";
 import "./MainStyle.scss";
 
 interface IManagementUsersProps {
-  authenticated: string | null;
-  AddUser: ElementType;
+  UsersRouter: React.ElementType;
 }
 
 class ManagementUsers extends Component<IManagementUsersProps> {
   render() {
-    const { AddUser } = this.props;
+    const { UsersRouter } = this.props;
     return (
       <div className="main-page">
-        <AddUser />
+        <UsersRouter />
       </div>
     );
   }
@@ -25,8 +24,12 @@ class ManagementUsers extends Component<IManagementUsersProps> {
 function mapStateToProps(state: StoreState) {
   return {
     authenticated: state.auth.authenticated,
-    AddUser,
+    UsersRouter,
   };
 }
 
-export default connect(mapStateToProps, actions)(requireAuth(ManagementUsers));
+export default connect(
+  mapStateToProps,
+  actions
+)(requireAuth(ManagementUsers)) as ElementType;
+

src/components/Dashboard/AddUser.tsx → src/components/Dashboard/Users/AddUser.tsx

@@ -3,10 +3,10 @@ import { reduxForm, Field, InjectedFormProps } from "redux-form";
 import { compose } from "redux";
 import { connect } from "react-redux";
 import { withRouter, RouteComponentProps } from "react-router-dom";
-import * as actions from "../../actions";
-import { IAddUser, AddUserAction, AddUserActionError } from "../../actions";
-import requireAuth from "../requireAuth";
-import { StoreState } from "../../reducers";
+import * as actions from "../../../actions";
+import { IAddUser, AddUserAction, AddUserActionError } from "../../../actions";
+import requireAuth from "../../requireAuth";
+import { StoreState } from "../../../reducers";
 import "./AddUserStyle.scss";
 
 interface IAddUserProps extends RouteComponentProps {

src/components/Dashboard/AddUserStyle.scss → src/components/Dashboard/Users/AddUserStyle.scss

@@ -1,4 +1,4 @@
-@import "../base";
+@import "../../base";
 
 .add-user-page {
   height: $page-height;

src/components/Dashboard/Users/ChangePassword.tsx

@@ -0,0 +1,90 @@
+import React, { Component, ElementType } from "react";
+import { reduxForm, Field, InjectedFormProps } from "redux-form";
+import { compose } from "redux";
+import { connect } from "react-redux";
+import { withRouter, RouteComponentProps } from "react-router-dom";
+import * as actions from "../../../actions";
+import { IChangePassword, ChangePasswordAction, ChangePasswordActionError } from "../../../actions";
+import requireAuth from "../../requireAuth";
+import { StoreState } from "../../../reducers";
+import "./AddUserStyle.scss";
+
+interface IChangePasswordProps extends RouteComponentProps {
+  errorMessage: string;
+  _id: string;
+  changePassword: ({ password, _id }: IChangePassword) => ChangePasswordAction | ChangePasswordActionError;
+}
+
+class ChangePassword extends Component<InjectedFormProps<IChangePassword> & IChangePasswordProps> {
+  onSubmit = (formProps: IChangePassword) => {
+    const { _id, changePassword } = this.props;
+    const { password } = formProps;
+    changePassword({ password, _id })
+  };
+
+  render() {
+    const { handleSubmit, submitting } = this.props;
+    return (
+      <div className="add-user-page">
+        <form className="add-user-form " onSubmit={handleSubmit(this.onSubmit)}>
+          <fieldset>
+            <label className="add-user-form__label" htmlFor="password">
+              Password
+            </label>
+            <Field
+              className="add-user-form__select"
+              name="password"
+              type="password"
+              component="input"
+              label="Password"
+              required
+              autoComplete="none"
+            />
+          </fieldset>
+          <fieldset>
+            <label className="add-user-form__label" htmlFor="passwordConfirm">
+              Confirm Password
+            </label>
+            <Field
+              className="add-user-form__select"
+              name="passwordConfirm"
+              type="password"
+              component="input"
+              required
+              autoComplete="none"
+            />
+          </fieldset>
+          <div>{this.props.errorMessage}</div>
+
+          <button className="btn btn--accent spacer" disabled={submitting}>
+            Change Password
+          </button>
+        </form>
+      </div>
+    );
+  }
+}
+
+interface IValidate {
+  passwordConfirm?: string;
+  password?: string;
+}
+
+const validate: (values: IValidate) => IValidate = (values) => {
+  const errors: IValidate = {};
+
+  if (values.password !== values.passwordConfirm) {
+    errors.password = "Passwords must match";
+  }
+
+  return errors;
+};
+
+function mapStateToProps(state: StoreState) {
+  return { errorMessage: state.auth.errorMessage, _id: state.dashboard.userId };
+}
+
+export default compose(
+  connect(mapStateToProps, actions),
+  reduxForm({ form: "changePassword", validate: validate })
+)(requireAuth(withRouter(ChangePassword))) as ElementType;