at the end of the day, it was inevitable

2022-12-09 08:36:26 -06:00
commit 1218570914
1768 changed files with 887087 additions and 0 deletions
@@ -0,0 +1,122 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { translate } from 'react-i18next';
+import {
+  Button,
+  Label,
+  Input,
+  FormGroup,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter
+} from 'reactstrap';
+
+export class SettingsPopup extends React.Component {
+  static propTypes = {
+    hidePopup: PropTypes.func.isRequired,
+    setErrorMsg: PropTypes.func.isRequired,
+    changePassword: PropTypes.func.isRequired,
+    errorMsg: PropTypes.string,
+    t: PropTypes.func.isRequired
+  };
+
+  constructor() {
+    super();
+    this.state = {
+      oldPassword: '',
+      newPassword: '',
+      confirmPassword: ''
+    };
+  }
+
+  hidePopup = () => {
+    this.props.hidePopup();
+    this.props.setErrorMsg(null);
+  };
+
+  onSubmit = () => {
+    const { t } = this.props;
+    const { oldPassword, newPassword, confirmPassword } = this.state;
+
+    // need more validations
+    if (!oldPassword || !newPassword || !confirmPassword) {
+      return this.props.setErrorMsg(t('userSettings.enterRequiredFields'));
+    }
+
+    if (newPassword !== confirmPassword) {
+      return this.props.setErrorMsg(t('userSettings.passwordsNotMatched'));
+    }
+
+    if (oldPassword && newPassword) {
+      this.props.changePassword(newPassword, oldPassword);
+    }
+  };
+
+  handleChange = (e) => {
+    const { name, value } = e.target;
+    this.setState({ [name]: value });
+  };
+
+  render() {
+    const { t, errorMsg } = this.props;
+
+    return (
+      <Modal isOpen toggle={this.hidePopup} backdrop="static">
+        <ModalHeader toggle={this.hidePopup}>
+          {t('userSettings.changePassword')}
+        </ModalHeader>
+        <ModalBody>
+          <FormGroup>
+            <Label>
+              {t('userSettings.enterOldPassword')}
+              <span className="text-danger">*</span>
+            </Label>
+            <Input
+              type="password"
+              name="oldPassword"
+              onChange={this.handleChange}
+            />
+          </FormGroup>
+          <FormGroup>
+            <Label>
+              {t('userSettings.enterNewPassword')}
+              <span className="text-danger">*</span>
+            </Label>
+            <Input
+              type="password"
+              name="newPassword"
+              onChange={this.handleChange}
+            />
+          </FormGroup>
+          <FormGroup>
+            <Label>
+              {t('userSettings.retypeNewPassword')}
+              <span className="text-danger">*</span>
+            </Label>
+            <Input
+              type="password"
+              name="confirmPassword"
+              onChange={this.handleChange}
+            />
+          </FormGroup>
+
+          <p className="text-danger">{errorMsg}</p>
+        </ModalBody>
+
+        <ModalFooter>
+          <Button color="light" onClick={this.hidePopup}>
+            {t('common:commonWords.Cancel')}
+          </Button>
+          <Button color="primary" onClick={this.onSubmit}>
+            {t('userSettings.changePassword')}
+          </Button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+export default translate(['tabsContent', 'common'], { wait: true })(
+  SettingsPopup
+);