From 0da9f56bfcdbbaaab54f9ad6afc7005ab26fd308 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Fri, 5 Aug 2022 12:51:22 +0200
Subject: [PATCH] change(ui) - account settings toggle password change form

---
 .../Client/ProfileSettings/ChangePassword.js  | 215 ++++++++----------
 1 file changed, 100 insertions(+), 115 deletions(-)

diff --git a/frontend/app/components/Client/ProfileSettings/ChangePassword.js b/frontend/app/components/Client/ProfileSettings/ChangePassword.js
index d02638b9a..d0222abf0 100644
--- a/frontend/app/components/Client/ProfileSettings/ChangePassword.js
+++ b/frontend/app/components/Client/ProfileSettings/ChangePassword.js
@@ -6,130 +6,115 @@ import { updatePassword } from 'Duck/user';
 
 const ERROR_DOESNT_MATCH = "Passwords doesn't match";
 const MIN_LENGTH = 8;
-const PASSWORD_POLICY = `Password should contain at least ${ MIN_LENGTH } symbols`;
+const PASSWORD_POLICY = `Password should contain at least ${MIN_LENGTH} symbols`;
 const checkDoesntMatch = (newPassword, newPasswordRepeat) => newPasswordRepeat.length > 0 && newPasswordRepeat !== newPassword;
 
 const defaultState = {
-  oldPassword: '',
-  newPassword: '',
-  newPasswordRepeat: '',
-  success: false,
+    oldPassword: '',
+    newPassword: '',
+    newPasswordRepeat: '',
+    success: false,
+    show: false,
 };
-@connect(state => ({
-  passwordErrors: state.getIn(['user', 'passwordErrors']),
-  loading: state.getIn(['user', 'updatePasswordRequest', 'loading'])
-}), {
-  updatePassword
-})
+@connect(
+    (state) => ({
+        passwordErrors: state.getIn(['user', 'passwordErrors']),
+        loading: state.getIn(['user', 'updatePasswordRequest', 'loading']),
+    }),
+    {
+        updatePassword,
+    }
+)
 export default class ChangePassword extends React.PureComponent {
-  state = defaultState
+    state = defaultState;
 
-  write = ({ target: { name, value } }) => {
-    this.setState({
-      [ name ]: value,
-    });
-  }
-
-  handleSubmit = (e) => {
-    e.preventDefault();
-    if (this.isSubmitDisabled()) return;
-
-    const { oldPassword, newPassword } = this.state;
-    this.setState({
-      success: false,
-    });
-
-    this.props.updatePassword({
-      oldPassword,
-      newPassword,
-    }).then(() => {
-      if (this.props.passwordErrors.size === 0) {
+    write = ({ target: { name, value } }) => {
         this.setState({
-          ...defaultState,
-          success: true,
+            [name]: value,
         });
-      }
-    });
-  }
+    };
 
-  isSubmitDisabled() {
-    const { oldPassword, newPassword, newPasswordRepeat } = this.state;
-    if (newPassword !== newPasswordRepeat ||
-      newPassword.length < MIN_LENGTH ||
-      oldPassword.length < MIN_LENGTH) return true;
-    return false;
-  }
+    handleSubmit = (e) => {
+        e.preventDefault();
+        if (this.isSubmitDisabled()) return;
 
-  render() {
-    const {
-      oldPassword, newPassword, newPasswordRepeat, success
-    } = this.state;
-    const { loading, passwordErrors } = this.props;
+        const { oldPassword, newPassword } = this.state;
+        this.setState({
+            success: false,
+        });
 
-    const doesntMatch = checkDoesntMatch(newPassword, newPasswordRepeat);
-    return (
-      <Form onSubmit={ this.handleSubmit } className={ styles.form } >
-        <Form.Field>
-          <label htmlFor="oldPassword">
-            { 'Old Password: ' }
-          </label>
-          <Input
-            // label="Old Password: "
-            id="oldPassword"
-            name="oldPassword"
-            value={ oldPassword }
-            type="password"
-            // error={ wrongPassword }
-            onChange={ this.write }
-          />
-        </Form.Field>
-        <Form.Field>
-          <label htmlFor="newPassword">
-            { 'New Password: ' }
-          </label>
-          <Input
-            id="newPassword"            
-            name="newPassword"
-            value={ newPassword }
-            type="password"
-            onChange={ this.write }
-          />
-          <div className={ styles.passwordPolicy } >
-            { PASSWORD_POLICY }
-          </div>
-        </Form.Field>
-        <Form.Field>
-          <label htmlFor="newPasswordRepeat">
-            { 'Repeat New Password: ' }
-          </label>
-          <Input
-            id="newPasswordRepeat"            
-            name="newPasswordRepeat"
-            value={ newPasswordRepeat }
-            type="password"
-            onChange={ this.write }
-          />
-        </Form.Field>
-        { passwordErrors.map(err => (
-          <Message error>
-            { err }
-          </Message>
-        ))}
-        <Message error hidden={ !doesntMatch }>
-          { ERROR_DOESNT_MATCH }
-        </Message>
-        <Button
-          type="submit"
-          variant="outline"
-          disabled={ this.isSubmitDisabled() }
-          loading={ loading }
-        >        
-          Change Password
-        </Button>
-        <Message success hidden={ !success }>
-          { 'Successfully changed the password!' }
-        </Message>
-      </Form>
-    );
-  }
+        this.props
+            .updatePassword({
+                oldPassword,
+                newPassword,
+            })
+            .then(() => {
+                if (this.props.passwordErrors.size === 0) {
+                    this.setState({
+                        ...defaultState,
+                        success: true,
+                    });
+                }
+            });
+    };
+
+    isSubmitDisabled() {
+        const { oldPassword, newPassword, newPasswordRepeat } = this.state;
+        if (newPassword !== newPasswordRepeat || newPassword.length < MIN_LENGTH || oldPassword.length < MIN_LENGTH) return true;
+        return false;
+    }
+
+    render() {
+        const { oldPassword, newPassword, newPasswordRepeat, success, show } = this.state;
+        const { loading, passwordErrors } = this.props;
+
+        const doesntMatch = checkDoesntMatch(newPassword, newPasswordRepeat);
+        return show ? (
+            <Form onSubmit={this.handleSubmit} className={styles.form}>
+                <Form.Field>
+                    <label htmlFor="oldPassword">{'Old Password: '}</label>
+                    <Input
+                        // label="Old Password: "
+                        id="oldPassword"
+                        name="oldPassword"
+                        value={oldPassword}
+                        type="password"
+                        // error={ wrongPassword }
+                        onChange={this.write}
+                    />
+                </Form.Field>
+                <Form.Field>
+                    <label htmlFor="newPassword">{'New Password: '}</label>
+                    <Input id="newPassword" name="newPassword" value={newPassword} type="password" onChange={this.write} />
+                    <div className={styles.passwordPolicy}>{PASSWORD_POLICY}</div>
+                </Form.Field>
+                <Form.Field>
+                    <label htmlFor="newPasswordRepeat">{'Repeat New Password: '}</label>
+                    <Input id="newPasswordRepeat" name="newPasswordRepeat" value={newPasswordRepeat} type="password" onChange={this.write} />
+                </Form.Field>
+                {passwordErrors.map((err) => (
+                    <Message error>{err}</Message>
+                ))}
+                <Message error hidden={!doesntMatch}>
+                    {ERROR_DOESNT_MATCH}
+                </Message>
+                <div className="flex items-center">
+                    <Button type="submit" variant="outline" disabled={this.isSubmitDisabled()} loading={loading}>
+                        Change Password
+                    </Button>
+
+                    <Button className="ml-2" onClick={() => this.setState(defaultState)}>
+                        Cancel
+                    </Button>
+                </div>
+                <Message success hidden={!success}>
+                    {'Successfully changed the password!'}
+                </Message>
+            </Form>
+        ) : (
+            <div onClick={() => this.setState({ show: true })}>
+                <Button variant="text-primary">Change Password</Button>
+            </div>
+        );
+    }
 }