Change password component

__tests__/app/containers/Authentication/__snapshots__/Login.test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`Login Container Should render 1`] = `
 <Login
   errorMessage=""
+  forgotPassword={[Function]}
   handleSelectPanel={[Function]}
   isLoggedIn={false}
   isLoginLoading={false}

src/app/actions/User.ts

@@ -10,6 +10,8 @@ export namespace UserActions {
     GET_USER_DETAILS = 'GET_USER_DETAILS',
     EDIT_USER_PROFILE = 'EDIT_USER_PROFILE',
     EDIT_USER_PASSWORD = 'EDIT_USER_PASSWORD',
+    CHANGE_USER_PASSWORD = 'CHANGE_USER_PASSWORD',
+    FORGOT_PASSWORD = 'FORGOT_PASSWORD',
     UPDATE_ERROR_MESSAGE = 'UPDATE_ERROR_MESSAGE',
     UPDATE_USER_DETAILS = 'UPDATE_USER_DETAILS',
     CHECK_EMAIL_EXISTS = 'CHECK_EMAIL_EXISTS',
@@ -70,6 +72,17 @@ export namespace UserActions {
   export const checkUsernameExists = (username: string) =>
     action(Type.CHECK_USERNAME_EXISTS, { username });
 
+  export const changeUserPassword = (
+    newPassword: string,
+    passwordResetToken: string,
+    userId: number,
+  ) =>
+    action(Type.CHANGE_USER_PASSWORD, {
+      newPassword,
+      passwordResetToken,
+      userId,
+    });
+
   export const toggleUserProfileModal = (isUserProfileModalOpen: boolean) =>
     action(Type.TOGGLE_USER_PROFILE_MODAL, { isUserProfileModalOpen });
 
@@ -82,4 +95,6 @@ export namespace UserActions {
 
   export const setIsLoginLoading = (isLoginLoading: boolean) =>
     action(Type.SET_IS_LOGIN_LOADING, { isLoginLoading });
+
+  export const forgotPassword = (email: string) => action(Type.FORGOT_PASSWORD, { email });
 }

src/app/apiFetch/Code.ts

@@ -131,7 +131,6 @@ export const getLastSaveTime = () => {
       return textResponseWrapper(response);
     })
     .then((data) => {
-      console.log(data);
       return data;
     })
     .catch((error) => {

src/app/apiFetch/User.ts

@@ -131,6 +131,43 @@ export const userEditPassword = (body: UserInterfaces.EditUserPassword) => {
     });
 };
 
+export const changeUserPassword = (body: UserInterfaces.ChangeUserPassword) => {
+  return fetch(`${API_BASE_URL}user/password`, {
+    body: JSON.stringify(body),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    method: 'POST',
+  })
+    .then((response) => {
+      return jsonResponseWrapper(response);
+    })
+    .then((data) => {
+      return data;
+    })
+    .catch((error) => {
+      console.error(error);
+    });
+};
+export const userForgotPassword = (email: string) => {
+  return fetch(`${API_BASE_URL}user/forgot-password`, {
+    body: email,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    method: 'POST',
+  })
+    .then((response) => {
+      return response.text();
+    })
+    .then((data) => {
+      return data;
+    })
+    .catch((error) => {
+      console.error(error);
+    });
+};
+
 export const userGetDetails = () => {
   return fetch(`${API_BASE_URL}user`, {
     credentials: 'include',

src/app/components/Authentication/ChangePassword.tsx

@@ -0,0 +1,146 @@
+import * as authStyles from 'app/styles/Authentication.module.css';
+import * as registerStyles from 'app/styles/Register.module.css';
+import { changePasswordProps, ChangePasswordState } from 'app/types/Authentication/ChangePassword';
+import classnames from 'classnames';
+import * as React from 'react';
+
+export class ChangePassword extends React.Component<changePasswordProps, ChangePasswordState> {
+  private credentialsFormRef = React.createRef<HTMLFormElement>();
+  private passwordResetToken = '';
+  private userId = 0;
+  constructor(props: changePasswordProps) {
+    super(props);
+    this.state = {
+      password: '',
+      passwordError: '',
+      repeatPassword: '',
+    };
+  }
+
+  public componentDidMount() {
+    // get string from url
+    const search = this.props.location.search;
+    const urlParams = search.split('&');
+    this.passwordResetToken = urlParams[0].split('=')[1];
+    this.userId = parseInt(urlParams[1].split('=')[1], 0);
+  }
+
+  public render() {
+    return (
+      <div className={classnames(authStyles.registerRoot)}>
+        <div className={classnames(authStyles.registerMessage)}>
+          <h1 className={classnames(authStyles['register-h1'])}> Reset Password </h1>
+          <p> Enter your new password </p>
+        </div>
+        <div className={classnames('col-sm-12', authStyles.form)}>
+          <form
+            className={classnames(
+              'registerForm d-flex flex-wrap',
+              authStyles['main-register-form'],
+            )}
+            noValidate
+          >
+            <div className={classnames(authStyles['stage-div'])}>
+              <form
+                className={classnames(authStyles['stage-form'])}
+                noValidate
+                ref={this.credentialsFormRef}
+              >
+                <div className={classnames(authStyles['login-label'])}> New Password </div>
+                <div className={classnames(registerStyles['input-group'])}>
+                  <input
+                    type="password"
+                    className={classnames('form-control', authStyles['register-input'])}
+                    id="registerValidationPassword"
+                    aria-describedby="inputGroupPrepend"
+                    pattern=".{5,}"
+                    value={this.state.password}
+                    onChange={(e) =>
+                      this.setState({
+                        password: e.target.value,
+                      })
+                    }
+                    required
+                  />
+                  <div className={classnames('invalid-feedback', authStyles['register-error'])}>
+                    Password should have minimum 5 characters.
+                  </div>
+                </div>
+                <div className={classnames(authStyles['login-label'])}> Confirm Password </div>
+                <div className={classnames(registerStyles['input-group'])}>
+                  <input
+                    type="password"
+                    className={classnames('form-control', authStyles['register-input'])}
+                    id="registerValidationrepeatPassword"
+                    aria-describedby="inputGroupPrepend"
+                    pattern=".{5,}"
+                    value={this.state.repeatPassword}
+                    onChange={(e) =>
+                      this.setState({
+                        repeatPassword: e.target.value,
+                      })
+                    }
+                    required
+                  />
+                </div>
+
+                <div
+                  className={
+                    this.state.passwordError !== '' || this.props.errorMessage !== ''
+                      ? classnames('form-row', authStyles['register-error-active'])
+                      : classnames('form-row', authStyles['register-error-inactive'])
+                  }
+                >
+                  <div
+                    className={classnames(
+                      'col text-center mt -0 mb-2 errorMessage',
+                      registerStyles.errorMessage,
+                    )}
+                  >
+                    {this.state.passwordError}
+                    {'\n'}
+                    {this.props.errorMessage}
+                  </div>
+                </div>
+                <div
+                  className={classnames(
+                    registerStyles['input-group'],
+                    'd-flex justify-content-center',
+                  )}
+                >
+                  <button
+                    className={classnames(authStyles['register-button'])}
+                    onClick={(e) => this.submitPassword(e)}
+                  >
+                    Confirm
+                  </button>
+                </div>
+              </form>
+            </div>
+          </form>
+        </div>
+      </div>
+    );
+  }
+
+  private submitPassword = (e: React.MouseEvent) => {
+    e.preventDefault();
+    if (this.state.password === this.state.repeatPassword) {
+      if (this.credentialsFormRef.current) {
+        this.credentialsFormRef.current.classList.add('was-validated');
+        if (this.credentialsFormRef.current.checkValidity()) {
+          this.setState({
+            ...this.state,
+            passwordError: '',
+          });
+          this.props.changePassword(this.state.password, this.passwordResetToken, this.userId);
+        }
+      }
+    } else {
+      this.setState({
+        ...this.state,
+        passwordError: 'Password and confirm passwords have different values',
+      });
+    }
+  };
+}

src/app/components/Authentication/ForgotPassword.tsx

@@ -0,0 +1,143 @@
+import * as styles from 'app/styles/Authentication.module.css';
+import classnames from 'classnames';
+import * as React from 'react';
+import { Col, Row } from 'react-bootstrap';
+import * as registerStyles from 'app/styles/Register.module.css';
+import { Routes } from 'app/routes';
+import * as LoginInterfaces from 'app/types/Authentication/Login';
+import { AuthType } from 'app/types/Authentication';
+
+// tslint:disable-next-line: variable-name
+const ForgotPassword = (props: LoginInterfaces.ForgotPasswordProps) => {
+  const forgotPasswordRef = React.createRef<HTMLFormElement>();
+  const [username, setUsername] = React.useState('');
+
+  const handleForgotPassword = (event: React.FormEvent<HTMLFormElement>) => {
+    const form = forgotPasswordRef.current;
+
+    event.preventDefault();
+    if (form) {
+      if (form.checkValidity()) {
+        props.forgotPassword(username);
+      }
+      form.classList.add('was-validated');
+    }
+  };
+
+  return (
+    <div>
+      <div className={classnames(styles.loginRoot)}>
+        <div className={classnames(styles.welcomeBack)}>
+          <h1> Forgot your password? </h1>
+        </div>
+        <Row>
+          <Col className="text-center my-3 ml-auto mr-auto">
+            <div className="text-dark">
+              Don't have an account?
+              <a
+                href={Routes.REGISTER}
+                className={classnames(styles['create-one-button'])}
+                onClick={() => {
+                  props.updateErrorMessage('');
+                  props.handleSelectPanel(AuthType.REGISTER);
+                }}
+              >
+                Create one
+              </a>
+              <Row>
+                <div className={classnames('col-sm-10', styles.form)}>
+                  <form
+                    className={classnames(styles.loginForm)}
+                    noValidate
+                    ref={forgotPasswordRef}
+                    onSubmit={handleForgotPassword}
+                  >
+                    <div className="form-row">
+                      <div className="col mb-4">
+                        <div className={classnames(styles['login-label'])}> Your Email: </div>
+                        <div className="input-group">
+                          <input
+                            type="email"
+                            className={classnames('form-control', styles['login-input'])}
+                            id="validationUsername"
+                            aria-describedby="inputGroupPrepend"
+                            required
+                            value={username}
+                            onChange={(e) => setUsername(e.target.value)}
+                          />
+                          <div className={classnames('invalid-feedback', styles['login-error'])}>
+                            {' '}
+                            Please enter a valid Email.{' '}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div className={classnames('form-row', styles['error-row'])}>
+                      <div
+                        className={
+                          !props.errorMessage
+                            ? classnames(
+                                'col text-center mt-0 mb-2 ',
+                                styles['register-error-inactive'],
+                                registerStyles.errorMessage,
+                              )
+                            : classnames(
+                                'col text-center mt-0 mb-2 errorMessage',
+                                styles['register-error-active'],
+                                registerStyles.errorMessageLogin,
+                                styles['login-error-active'],
+                              )
+                        }
+                      >
+                        {props.errorMessage}
+                      </div>
+                    </div>
+                    <div className="form-row">
+                      <div className="col text-center">
+                        <button
+                          className={classnames('btn btn-info', styles.loginButton)}
+                          type="submit"
+                        >
+                          Reset Password&nbsp;
+                        </button>
+                      </div>
+                    </div>
+                  </form>
+                </div>
+              </Row>
+            </div>
+          </Col>
+        </Row>
+        <Row>
+          <Col className="text-center my-3 ml-auto mr-auto">
+            <div
+              className={classnames('text-dark', styles['forgot-your-password'])}
+              onClick={() => props.closeForgotPassword()}
+            >
+              Back{' '}
+            </div>
+          </Col>
+        </Row>
+        <Row>
+          <Col className="text-center my-3 ml-auto mr-auto">
+            <div className="text-dark">
+              Don't have an account?{' '}
+              <a
+                href={Routes.REGISTER}
+                className={classnames(styles['create-one-button'])}
+                onClick={() => {
+                  props.updateErrorMessage('');
+                  props.handleSelectPanel(AuthType.REGISTER);
+                }}
+              >
+                Create one
+              </a>
+            </div>
+          </Col>
+        </Row>
+      </div>
+    </div>
+  );
+};
+
+export default ForgotPassword;