{"size": 3513, "ext": "js", "max_stars_repo_path": "src/pages/password/index.js", "max_stars_repo_name": "factly/dega-identity", "max_stars_repo_stars_event_min_datetime": "2021-01-15T09:51:57.000Z", "max_stars_repo_stars_event_max_datetime": "2021-03-15T21:23:01.000Z", "max_issues_repo_path": "src/pages/password/index.js", "max_issues_repo_name": "factly/dega-identity", "max_issues_repo_issues_event_min_datetime": "2020-06-27T13:35:32.000Z", "max_issues_repo_issues_event_max_datetime": "2021-04-30T16:01:56.000Z", "max_forks_repo_path": "src/pages/password/index.js", "max_forks_repo_name": "factly/dega-identity", "max_forks_repo_forks_event_min_datetime": "2020-11-20T18:27:27.000Z", "max_forks_repo_forks_event_max_datetime": "2020-11-20T18:27:27.000Z"}
{"max_stars_count": 2, "max_issues_count": 37, "max_forks_count": 1, "avg_line_length": 30.8157894737, "max_line_length": 99, "alphanum_fraction": 0.5562197552}
import React from 'react';
import { Card, Form, Input, Button, notification } from 'antd';
import { LockOutlined } from '@ant-design/icons';

function Password() {
  const [password, setPassword] = React.useState({});

  React.useEffect(() => {
    var obj = {};

    window.location.search
      .split('?')
      .filter((each) => each.trim() !== '')
      .forEach((each) => {
        var temp = each.split('=');
        obj[temp[0]] = temp[1];
      });

    if (!obj['flow']) {
      window.location.href = window.REACT_APP_KRATOS_PUBLIC_URL + '/self-service/settings/browser';
    }

    fetch(window.REACT_APP_KRATOS_PUBLIC_URL + '/self-service/settings/flows?id=' + obj['flow'])
      .then((res) => {
        if (res.status === 200) {
          return res.json();
        } else {
          throw new Error(res.status);
        }
      })
      .then((res) => {
        setPassword(res.methods.password);
        if (res.update_successful) {
          notification.success({
            message: 'Success',
            description: 'Password has been successful updated',
          });
        }
      })
      .catch((err) => {
        window.location.href =
          window.REACT_APP_KRATOS_PUBLIC_URL + '/self-service/settings/browser';
      });
  }, []);

  const changePassword = (values) => {
    var updatePasswordForm = document.createElement('form');
    updatePasswordForm.action = password.config.action;
    updatePasswordForm.method = password.config.method;
    updatePasswordForm.style.display = 'none';

    var passwordInput = document.createElement('input');
    passwordInput.name = 'password';
    passwordInput.value = values.password;

    var csrfInput = document.createElement('input');
    csrfInput.name = 'csrf_token';
    csrfInput.value = password.config.fields.find((value) => value.name === 'csrf_token').value;

    updatePasswordForm.appendChild(passwordInput);
    updatePasswordForm.appendChild(csrfInput);

    document.body.appendChild(updatePasswordForm);

    updatePasswordForm.submit();
  };

  return (
    <div className="content">
      <Card title="Update Password" style={{ width: 400 }}>
        <Form name="update_password" onFinish={changePassword}>
          <Form.Item
            name="password"
            rules={[{ required: true, message: 'Please input your Password!' }]}
          >
            <Input.Password
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="Password"
            />
          </Form.Item>
          <Form.Item
            name="confirmPassword"
            dependencies={['password']}
            rules={[{ required: true, message: 'Please re-enter your Password!' },
            ({ getFieldValue }) => ({
              validator(rule, value) {
                if(getFieldValue('password') !== value) {
                  return Promise.reject('Password do no match!');
                }
                  return Promise.resolve();
              }
            })
          ]}
          >
            <Input.Password
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="Confirm Password"
            />
          </Form.Item>
          <Form.Item>
            <Button form="update_password" type="primary" htmlType="submit" block>
              Update
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
}

export default Password;
