+
+ );
+ }
+
+ 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',
+ });
+ }
+ };
+}
diff --git a/src/app/components/Authentication/ForgotPassword.tsx b/src/app/components/Authentication/ForgotPassword.tsx
new file mode 100644
index 00000000..246ef40e
--- /dev/null
+++ b/src/app/components/Authentication/ForgotPassword.tsx
@@ -0,0 +1,131 @@
+import { Routes } from 'app/routes';
+import * as styles from 'app/styles/Authentication.module.css';
+import * as registerStyles from 'app/styles/Register.module.css';
+import { AuthType } from 'app/types/Authentication';
+import * as LoginInterfaces from 'app/types/Authentication/Login';
+import classnames from 'classnames';
+import * as React from 'react';
+import { Col, Row } from 'react-bootstrap';
+
+// tslint:disable-next-line: variable-name
+const ForgotPassword = (props: LoginInterfaces.ForgotPasswordProps) => {
+ const forgotPasswordRef = React.createRef
+
+ Reset Password
+Enter your new password
+
+
+
+
+
+
+ );
+};
+
+export default ForgotPassword;
diff --git a/src/app/components/Authentication/Login.tsx b/src/app/components/Authentication/Login.tsx
index e7bbc7da..ceb623be 100644
--- a/src/app/components/Authentication/Login.tsx
+++ b/src/app/components/Authentication/Login.tsx
@@ -1,6 +1,7 @@
import { faSpinner } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { API_BASE_URL } from 'app/../config/config';
+import ForgotPassword from 'app/components/Authentication/ForgotPassword';
import PopUpMenu from 'app/components/PopUpMenu';
import { Routes } from 'app/routes';
import * as styles from 'app/styles/Authentication.module.css';
@@ -16,7 +17,6 @@ export enum OAUTH_ROUTES {
GOOGLE = 'login/google',
GITHUB = 'login/github',
}
-
export class Login extends React.Component
+
+
+
+
+
+
+
+
+
+
+
+
+ Forgot your password?
+
+
+
+
+
+
+
+
+ props.closeForgotPassword()}
+ >
+ Back{' '}
+
+
+
+ Don't have an account?{' '}
+ {
+ props.updateErrorMessage('');
+ props.handleSelectPanel(AuthType.REGISTER);
+ }}
+ >
+ Create one
+
+
+
+
-
-
- Welcome!
-Log in to access your dashboard and profile
-
- You can use your{' '}
-
- Pragyan
- {' '}
- account credentials to login.
-
-
- {
- window.location.href = `${API_BASE_URL}${OAUTH_ROUTES.GOOGLE}`;
- }}
- className={classnames(
- styles['google-btn'],
- 'border justify-content-center my-3',
- styles.oauth_btn,
- styles.no_margin,
- )}
- >
-
- {
- window.location.href = `${API_BASE_URL}${OAUTH_ROUTES.GITHUB}`;
- }}
- className={classnames(
- 'justify-content-center',
- styles['github-btn'],
- styles.oauth_btn,
- styles.no_margin,
- )}
- >
-
- 
-
-
- Log in with Google
-
- 
+ if (errorMessage === ' ' && isForgotPasswordOpen) {
+ this.setState({
+ isForgotPasswordOpen: false,
+ });
+ updateErrorMessage('');
+ }
+ if (!isForgotPasswordOpen) {
+ return (
+
+ if (errorMessage === ' ' && isForgotPasswordOpen) {
+ this.setState({
+ isForgotPasswordOpen: false,
+ });
+ updateErrorMessage('');
+ }
+ if (!isForgotPasswordOpen) {
+ return (
+
+
+
-
-
Welcome!
+Log in to access your dashboard and profile
+
+ You can use your{' '}
+
+ Pragyan
+ {' '}
+ account credentials to login.
- Log in with Github
- -
-
-
- or
+
+
+ {
+ window.location.href = `${API_BASE_URL}${OAUTH_ROUTES.GOOGLE}`;
+ }}
+ className={classnames(
+ styles['google-btn'],
+ 'border justify-content-center my-3',
+ styles.oauth_btn,
+ styles.no_margin,
+ )}
+ >
+
-
-
+
-
-