Toggle password visibility and fix wrong error message display in DeveloperSignup.jsx

package.json

@@ -25,7 +25,8 @@
     "@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-styles": "^4.91.6",
     "@patternfly/react-table": "^4.27.7",
     "classnames": "^2.2.6",
     "core-js": "^2.5.7",

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

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,14 +33,26 @@ export class DeveloperSignup extends Component {
       email: emailVal,
       password: String(),
       passwordConfirm: String(),
+      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) {
+    event.preventDefault()
     event.persist();
     const { username, email, password, passwordConfirm } = this.state;
     const { store } = this.props;
@@ -72,7 +88,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'],
         },
       });
     }
@@ -81,7 +106,7 @@ export class DeveloperSignup extends Component {
       return this.setState({
         error: {
           message: 'Password and confirmation do not match',
-          controls: ['password', 'confirmation'],
+          controls: ['passwordConfirm'],
         },
       });
     }
@@ -120,7 +145,7 @@ export class DeveloperSignup extends Component {
               controls: ['username'],
             },
           });
-        } else {
+        } else if (_.has(e, 'response.data.email')){
           this.setState({
             loading: false,
             error: {
@@ -154,6 +179,11 @@ export class DeveloperSignup extends Component {
     );
   }
 
+  togglePassword() {
+    this.setState(prevState => ({ hidePassword: !prevState.hidePassword }))
+  }
+
+
   render() {
     const {
       error,
@@ -164,6 +194,8 @@ export class DeveloperSignup extends Component {
       email,
       password,
       passwordConfirm,
+      hidePassword,
+      disableSubmit
     } = this.state;
 
     if (toDashboard) return <Redirect to="/dashboard" />;
@@ -198,37 +230,63 @@ 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" />
           ) : (
-            <Button variant="primary" type="submit" loading={disableControls}>
+            <Button variant="primary" type="submit" loading={disableControls} isDisabled={disableSubmit}
+            >
               Create Account
             </Button>
           )}

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"

yarn.lock

@@ -1499,16 +1499,26 @@
     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"
   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"