fixup! change Forgot Password to Component

Author: bestinbthomas

src/app/apiFetch/User.ts

@@ -1,5 +1,10 @@
 /* tslint:disable:no-console*/
-import { HeadReqType, headResponseWrapper, jsonResponseWrapper } from 'app/apiFetch/utils';
+import {
+  HeadReqType,
+  headResponseWrapper,
+  jsonResponseWrapper,
+  textResponseWrapper,
+} from 'app/apiFetch/utils';
 import * as UserInterfaces from 'app/types/User';
 import { API_BASE_URL } from '../../config/config';
 
@@ -140,7 +145,7 @@ export const changeUserPassword = (body: UserInterfaces.ChangeUserPassword) => {
     method: 'POST',
   })
     .then((response) => {
-      return jsonResponseWrapper(response);
+      return textResponseWrapper(response);
     })
     .then((data) => {
       return data;

src/app/apiFetch/utils/index.ts

@@ -90,8 +90,11 @@ export function textResponseWrapper(response: any) {
         case 302:
         case 409:
         case 401:
+        case 404:
+        case 403:
         case 500:
         case 403:
+        case 501:
           error = 'Oops! Something went wrong.';
           type = resType.ERROR;
       }

src/app/components/Authentication/ForgotPassword.tsx

@@ -1,24 +1,23 @@
+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';
-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);
+        props.forgotPassword(props.username);
       }
       form.classList.add('was-validated');
     }
@@ -62,8 +61,8 @@ const ForgotPassword = (props: LoginInterfaces.ForgotPasswordProps) => {
                             id="validationUsername"
                             aria-describedby="inputGroupPrepend"
                             required
-                            value={username}
-                            onChange={(e) => setUsername(e.target.value)}
+                            value={props.username}
+                            onChange={(e) => props.setUsername(e.target.value)}
                           />
                           <div className={classnames('invalid-feedback', styles['login-error'])}>
                             {' '}

src/app/components/Authentication/Login.tsx

@@ -2,6 +2,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';
 import * as registerStyles from 'app/styles/Register.module.css';
@@ -65,7 +66,7 @@ export class Login extends React.Component<LoginInterfaces.Props, LoginInterface
     if (isLoggedIn) {
       return <Redirect to={Routes.ROOT} />;
     }
-    if (this.props.errorMessage === ' ' && this.state.isForgotPasswordOpen) {
+    if (errorMessage === ' ' && isForgotPasswordOpen) {
       this.setState({
         isForgotPasswordOpen: false,
       });
@@ -247,21 +248,31 @@ export class Login extends React.Component<LoginInterfaces.Props, LoginInterface
               </div>
             </Col>
           </Row>
+          <PopUpMenu />
         </div>
       );
     }
     return (
-      <ForgotPassword
-        updateErrorMessage={updateErrorMessage}
-        handleSelectPanel={this.props.handleSelectPanel}
-        errorMessage={this.props.errorMessage}
-        forgotPassword={this.props.forgotPassword}
-        closeForgotPassword={() =>
-          this.setState({
-            isForgotPasswordOpen: false,
-          })
-        }
-      />
+      <div>
+        <ForgotPassword
+          updateErrorMessage={updateErrorMessage}
+          handleSelectPanel={this.props.handleSelectPanel}
+          errorMessage={this.props.errorMessage}
+          forgotPassword={this.props.forgotPassword}
+          username={username}
+          setUsername={(newUsername) =>
+            this.setState({
+              username: newUsername,
+            })
+          }
+          closeForgotPassword={() =>
+            this.setState({
+              isForgotPasswordOpen: false,
+            })
+          }
+        />
+        <PopUpMenu />
+      </div>
     );
   }
 

src/app/types/Authentication/Login.ts

@@ -26,6 +26,8 @@ export interface ForgotPasswordProps {
   handleSelectPanel: (authType: AuthType) => void;
   closeForgotPassword: () => void;
   errorMessage: string;
+  username: string;
+  setUsername: (username: string) => void;
   forgotPassword: (email: string) => void;
 }