From 291a376f381d06be7a9c92f7f91ec8e4cf102095 Mon Sep 17 00:00:00 2001
From: Thessa Kranendonk <thessakranendonk@gmail.com>
Date: Wed, 26 Oct 2022 12:08:08 -0400
Subject: [PATCH 1/7] Added @patternfly/react-icons package

---
 package.json | 2 +-
 yarn.lock    | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 5fe2ce3..a165882 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
     "@fnndsc/chrisstoreapi": "^3.0.1",
     "@patternfly/patternfly": "^4.59.1",
     "@patternfly/react-core": "^4.75.2",
-    "@patternfly/react-icons": "^4.7.16",
+    "@patternfly/react-icons": "^4.92.6",
     "@patternfly/react-table": "^4.27.7",
     "classnames": "^2.2.6",
     "core-js": "^2.5.7",
diff --git a/yarn.lock b/yarn.lock
index fe56379..c8b1372 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1499,11 +1499,16 @@
     tippy.js "5.1.2"
     tslib "^2.0.0"
 
-"@patternfly/react-icons@^4.32.1", "@patternfly/react-icons@^4.7.16":
+"@patternfly/react-icons@^4.32.1":
   version "4.32.1"
   resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-4.32.1.tgz#5989fa8c1563b16824f1239f56b50afa2655b6de"
   integrity sha512-E7Fpnvax37e2ow8Xc2GngQBM7IuOpRyphZXCIUAk/NGsqpvFX27YhIVZiOUIAuBXAI5VXQBwueW/tmhmlXP7+w==
 
+"@patternfly/react-icons@^4.92.6":
+  version "4.92.6"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-4.92.6.tgz#a1f2190edb49ab146c30ed07f8447af5d9401f13"
+  integrity sha512-UdMSDqJ7fCxi/E6vlsFHuDZ3L0+kqBZ4ujRi4mjokrsvzOR4WFdaMhC+7iRy4aPNjT0DpHVjVUUUoWwKID9VqA==
+
 "@patternfly/react-styles@^4.31.1":
   version "4.31.1"
   resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-4.31.1.tgz#878c44282edfc731948d952d845ff477931875aa"

From cbc2ccb8f07009585cf41406604bfb29f41c3577 Mon Sep 17 00:00:00 2001
From: Thessa Kranendonk <thessakranendonk@gmail.com>
Date: Wed, 26 Oct 2022 12:08:46 -0400
Subject: [PATCH 2/7] Added the option to toggle password visibility in
 SignIn.jsx

---
 src/components/SignIn/SignIn.jsx | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/components/SignIn/SignIn.jsx b/src/components/SignIn/SignIn.jsx
index a501c78..3ddf96f 100644
--- a/src/components/SignIn/SignIn.jsx
+++ b/src/components/SignIn/SignIn.jsx
@@ -9,7 +9,11 @@ import {
   CardTitle,
   Card,
   CardBody,
+  TextInput,
+  InputGroup,
 } from '@patternfly/react-core';
+import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
+import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
 
 import Button from '../Button';
 import './SignIn.css';
@@ -26,12 +30,14 @@ export class SignIn extends Component {
       password: '',
       loading: false,
       error: null,
+      hidePassword: true
     };
 
     this.handleChange = this.handleChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
     this.showError = this.showError.bind(this);
     this.hideError = this.hideError.bind(this);
+    this.togglePassword = this.togglePassword.bind(this)
   }
 
   componentDidMount() {
@@ -78,9 +84,14 @@ export class SignIn extends Component {
   hideError() {
     this.setState({ error: null });
   }
+
+  togglePassword() {
+    this.setState(prevState => ({ hidePassword: !prevState.hidePassword }))
+  }
+
   render() {
     const {
-      error, username, password, loading,
+      error, username, password, loading, hidePassword
     } = this.state;
 
     return (
@@ -127,16 +138,22 @@ export class SignIn extends Component {
                   autoComplete="username"
                   className="signin-username-form-group"
                 />
-                <FormInput
+                <InputGroup>
+                <TextInput
+                  type={hidePassword ? "password" : "text"}
                   placeholder="Password"
-                  fieldName="password"
                   value={password}
-                  inputType="password"
                   id="password"
                   onChange={(val) => this.handleChange(val, 'password')}
                   autoComplete="current-password"
                   className="signin-password-form-group"
                 />
+                <Button 
+                  variant="control"
+                  onClick={this.togglePassword}>
+                  {hidePassword ? <EyeIcon /> : <EyeSlashIcon />}
+                  </Button>
+                </InputGroup>
                 <Button
                   className="signin-login-btn"
                   variant="primary"

From 24956e35fee2ddba73cd3d13bc403e9111db6b96 Mon Sep 17 00:00:00 2001
From: Thessa Kranendonk <thessakranendonk@gmail.com>
Date: Thu, 27 Oct 2022 13:15:56 -0400
Subject: [PATCH 3/7] Added @patternfly/react-icons for password visibility
 icons

---
 package.json | 1 +
 yarn.lock    | 5 +++++
 2 files changed, 6 insertions(+)

diff --git a/package.json b/package.json
index a165882..99f7c90 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "@patternfly/patternfly": "^4.59.1",
     "@patternfly/react-core": "^4.75.2",
     "@patternfly/react-icons": "^4.92.6",
+    "@patternfly/react-styles": "^4.91.6",
     "@patternfly/react-table": "^4.27.7",
     "classnames": "^2.2.6",
     "core-js": "^2.5.7",
diff --git a/yarn.lock b/yarn.lock
index c8b1372..1ee9d5b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1514,6 +1514,11 @@
   resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-4.31.1.tgz#878c44282edfc731948d952d845ff477931875aa"
   integrity sha512-Yw2hgg3T2qEqPYej5xprYD0iTTkzFMNjaF8u/YFyZOBNwfhjK8QQDZx8Du7Z6em8zGtajXFG5rZqxDiiz8bDfQ==
 
+"@patternfly/react-styles@^4.91.6":
+  version "4.91.6"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-4.91.6.tgz#2cd4f0d5dca7774fe6a64505b8a3e7bd2abd66c6"
+  integrity sha512-3wCYkvGRgbx6u5JrCaUNcpDvyTOrgvXU/Mh2hs8s/njBUDpyuyRb+gkFoE3l3Ro3Lk0DnRLYpIjCSjl38Bd0iA==
+
 "@patternfly/react-table@^4.27.7":
   version "4.50.1"
   resolved "https://registry.yarnpkg.com/@patternfly/react-table/-/react-table-4.50.1.tgz#c1784a66d80e28a314d1bc7f4de86b0ae1023a83"

From f35eb207af9f49b3b79702ad1201a284db160ac0 Mon Sep 17 00:00:00 2001
From: Thessa Kranendonk <thessakranendonk@gmail.com>
Date: Thu, 27 Oct 2022 13:18:45 -0400
Subject: [PATCH 4/7] Added isDisabled option to disable the ButtonComponent

---
 src/components/Button/index.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Button/index.jsx b/src/components/Button/index.jsx
index 24c4fca..0e61099 100644
--- a/src/components/Button/index.jsx
+++ b/src/components/Button/index.jsx
@@ -4,13 +4,14 @@ import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
 import './button.css';
 
-const ButtonComponent = ({ variant, onClick, loading, toRoute, children, type }) => {
+const ButtonComponent = ({ variant, onClick, loading, toRoute, children, type, isDisabled }) => {
   const history = useHistory();
 
   return (
     <div>
       <Button
         isLoading={loading}
+        isDisabled={isDisabled}
         variant={variant}
         onClick={
           toRoute

From 46e496b9c05ef42e97d9ca1b8d01ec608575e30a Mon Sep 17 00:00:00 2001
From: Thessa Kranendonk <thessakranendonk@gmail.com>
Date: Thu, 27 Oct 2022 13:26:37 -0400
Subject: [PATCH 5/7] Prevent DeveloperSignup form from reload after submitting

---
 .../Developers/components/DeveloperSignup/DeveloperSignup.jsx    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Developers/components/DeveloperSignup/DeveloperSignup.jsx b/src/components/Developers/components/DeveloperSignup/DeveloperSignup.jsx
index 1c4dba9..ec1d6a1 100644
--- a/src/components/Developers/components/DeveloperSignup/DeveloperSignup.jsx
+++ b/src/components/Developers/components/DeveloperSignup/DeveloperSignup.jsx
@@ -37,6 +37,7 @@ export class DeveloperSignup extends Component {
   }
 
   handleSubmit(event) {
+    event.preventDefault()
     event.persist();
     const { username, email, password, passwordConfirm } = this.state;
     const { store } = this.props;

From 1a131974bf9ff3f7a7fc46acef5f791c13db36d0 Mon Sep 17 00:00:00 2001
From: Thessa Kranendonk <thessakranendonk@gmail.com>
Date: Thu, 27 Oct 2022 13:42:54 -0400
Subject: [PATCH 6/7] Added password visibility toggle in DeveloperSignup.jsx

---
 .../DeveloperSignup/DeveloperSignup.jsx       | 95 ++++++++++++++-----
 1 file changed, 70 insertions(+), 25 deletions(-)

diff --git a/src/components/Developers/components/DeveloperSignup/DeveloperSignup.jsx b/src/components/Developers/components/DeveloperSignup/DeveloperSignup.jsx
index ec1d6a1..a4aa767 100644
--- a/src/components/Developers/components/DeveloperSignup/DeveloperSignup.jsx
+++ b/src/components/Developers/components/DeveloperSignup/DeveloperSignup.jsx
@@ -3,7 +3,9 @@ import { Redirect } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
 import { validate } from 'email-validator';
-import { Form, Spinner } from '@patternfly/react-core';
+import { Form, InputGroup, Spinner, TextInput } from '@patternfly/react-core';
+import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
+import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
 
 import './DeveloperSignup.css';
 import StoreClient from '@fnndsc/chrisstoreapi';
@@ -17,6 +19,8 @@ export class DeveloperSignup extends Component {
     super(props);
     this.handleSubmit = this.handleSubmit.bind(this);
     this.handleChange = this.handleChange.bind(this);
+    this.togglePassword = this.togglePassword.bind(this)
+
     const queryParams = new URLSearchParams(window.location.search);
     const emailVal = queryParams.get('email');
     this.state = {
@@ -29,6 +33,7 @@ export class DeveloperSignup extends Component {
       email: emailVal,
       password: String(),
       passwordConfirm: String(),
+      hidePassword: true
     };
   }
 
@@ -73,7 +78,16 @@ export class DeveloperSignup extends Component {
       return this.setState({
         error: {
           message: 'Confirmation is required',
-          controls: ['confirmation'],
+          controls: ['passwordConfirm'],
+        },
+      });
+    }
+
+    if (password.length < 8) {
+      return this.setState({
+        error: {
+          message: 'Password requires at least 8 characters',
+          controls: ['password'],
         },
       });
     }
@@ -82,7 +96,7 @@ export class DeveloperSignup extends Component {
       return this.setState({
         error: {
           message: 'Password and confirmation do not match',
-          controls: ['password', 'confirmation'],
+          controls: ['passwordConfirm'],
         },
       });
     }
@@ -155,6 +169,11 @@ export class DeveloperSignup extends Component {
     );
   }
 
+  togglePassword() {
+    this.setState(prevState => ({ hidePassword: !prevState.hidePassword }))
+  }
+
+
   render() {
     const {
       error,
@@ -165,6 +184,7 @@ export class DeveloperSignup extends Component {
       email,
       password,
       passwordConfirm,
+      hidePassword
     } = this.state;
 
     if (toDashboard) return <Redirect to="/dashboard" />;
@@ -199,32 +219,57 @@ export class DeveloperSignup extends Component {
           disableControls={disableControls}
           error={error}
         />
+       <FormInput
+            formLabel="Password"
+            fieldId="password"
+            fieldName="password"
+            validationState={error.controls.includes('password') ? 'error' : 'default'}
+            disableControls={disableControls}
+            error={error}
+            >
+          <InputGroup>
+            <TextInput
+              placeholder="Enter an 8 character password"
+              type={hidePassword ? "password" : "text"}
+              id="password"
+              inputType="password"
+              value={password}
+              onChange={(val) => this.handleChange(val, 'password')}
+              validated={error.controls.includes('password') ? 'error' : 'default'}
+            />
+            <Button 
+              variant="control"
+              onClick={this.togglePassword}>
+              {hidePassword ? <EyeIcon /> : <EyeSlashIcon />}
+            </Button>
+          </InputGroup>
+        </FormInput>
+
         <FormInput
-          formLabel="Password"
-          fieldId="password"
-          validationState={error.controls.includes('password') ? 'error' : 'default'}
-          placeholder="Enter a password"
-          inputType="password"
-          id="password"
-          fieldName="password"
-          value={password}
-          onChange={(val) => this.handleChange(val, 'password')}
-          disableControls={disableControls}
-          error={error}
-        />
-        <FormInput
-          formLabel="Password Confirmation"
-          fieldId="password-confirm"
-          validationState={error.controls.includes('confirmation') ? 'error' : 'default'}
-          placeholder="Re-type your password"
-          inputType="password"
-          id="password-confirm"
+          formLabel="Confirm Password"
+          fieldId="passwordConfirm"
           fieldName="passwordConfirm"
-          value={passwordConfirm}
-          onChange={(val) => this.handleChange(val, 'passwordConfirm')}
+          validationState={error.controls.includes('passwordConfirm') ? 'error' : 'default'}
           disableControls={disableControls}
           error={error}
-        />
+          >
+          <InputGroup>
+            <TextInput
+              placeholder="Re-type your password"
+              type={hidePassword ? "password" : "text"}
+              id="passwordConfirm"
+              value={passwordConfirm}
+              onChange={(val) => this.handleChange(val, 'passwordConfirm')}
+              validated={error.controls.includes('passwordConfirm') ? 'error' : 'default'}
+              />
+            <Button 
+              variant="control"
+              onClick={this.togglePassword}>
+              {hidePassword ? <EyeIcon /> : <EyeSlashIcon />}
+            </Button>
+          </InputGroup>
+        </FormInput>
+
         <div style={{ padding: '1em 0' }}>
           {loading ? (
             <Spinner size="md" />

From eb3e6f103a5d2dc0bc0107c4d9b78b4ee30e71b9 Mon Sep 17 00:00:00 2001
From: Thessa Kranendonk <thessakranendonk@gmail.com>
Date: Thu, 27 Oct 2022 13:51:15 -0400
Subject: [PATCH 7/7] Added disabling of the submit button if input fields
 aren't populated and bugfix for wrong error message display

---
 .../DeveloperSignup/DeveloperSignup.jsx       | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/components/Developers/components/DeveloperSignup/DeveloperSignup.jsx b/src/components/Developers/components/DeveloperSignup/DeveloperSignup.jsx
index a4aa767..9f34e2b 100644
--- a/src/components/Developers/components/DeveloperSignup/DeveloperSignup.jsx
+++ b/src/components/Developers/components/DeveloperSignup/DeveloperSignup.jsx
@@ -33,12 +33,22 @@ export class DeveloperSignup extends Component {
       email: emailVal,
       password: String(),
       passwordConfirm: String(),
-      hidePassword: true
+      hidePassword: true,
+      disableSubmit: true
     };
   }
 
   handleChange(value, name) {
+    const {password, passwordConfirm, email, username} = this.state
     this.setState({ [name]: value });
+
+    if (password.length >= 8 && passwordConfirm && email && username) {
+      this.setState({disableSubmit: false})
+    }
+
+    if ((password.length < 8) || (passwordConfirm.length <= 8) || (email.length <= 1) || (username.length <= 1)) {
+      this.setState({disableSubmit: true})
+    }
   }
 
   handleSubmit(event) {
@@ -135,7 +145,7 @@ export class DeveloperSignup extends Component {
               controls: ['username'],
             },
           });
-        } else {
+        } else if (_.has(e, 'response.data.email')){
           this.setState({
             loading: false,
             error: {
@@ -184,7 +194,8 @@ export class DeveloperSignup extends Component {
       email,
       password,
       passwordConfirm,
-      hidePassword
+      hidePassword,
+      disableSubmit
     } = this.state;
 
     if (toDashboard) return <Redirect to="/dashboard" />;
@@ -274,7 +285,8 @@ export class DeveloperSignup extends Component {
           {loading ? (
             <Spinner size="md" />
           ) : (
-            <Button variant="primary" type="submit" loading={disableControls}>
+            <Button variant="primary" type="submit" loading={disableControls} isDisabled={disableSubmit}
+            >
               Create Account
             </Button>
           )}