FtpPasswordDialog.tsx 2.53 KB
Newer Older
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
1
import * as React from 'react';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
2 3
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
4
import { WithTranslation, withTranslation } from 'react-i18next';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
5 6
// actions
import {generateFtpPassword} from 'user/actions/dashboard';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
7 8 9 10 11 12 13 14 15 16 17
// model
import { User } from 'model/user/User';
// ui
import { Properties, PropertiesItem } from 'ui/common/Properties';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogTitle from '@material-ui/core/DialogTitle';
import DialogContent from '@material-ui/core/DialogContent';
// utilities
import confirm from 'utilities/confirmAlert';

Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
18
interface IFtpPasswordPage extends React.ClassAttributes<any>, WithTranslation {
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
19
  userProfile: User;
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
20
  generateFtpPassword: (userUuid: string) => Promise<any>;
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
21 22 23 24 25 26 27 28 29 30 31 32 33
}

class ChangePasswordPage extends React.Component<IFtpPasswordPage> {

  public state = {
    open: false,
    generatedPassword: '',
  };

  public render() {
    const { userProfile, t } = this.props;
    return (
      <div>
Oleksii Savran's avatar
Oleksii Savran committed
34
        <Button onClick={ this.show }>{ t('user.dashboard.p.ftpPassword.generatePassword') }</Button>
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
35 36 37 38 39 40 41 42 43 44 45 46 47 48
        <Dialog open={ this.state.open } onClose={ this.hide } maxWidth="sm" fullWidth>
          <DialogTitle>{  this.state.generatedPassword ? t('user.dashboard.p.ftpPassword.newCredentials') : t('user.dashboard.p.ftpPassword.credentials') }</DialogTitle>
          <DialogContent>
            <Properties>
              <PropertiesItem title="user.dashboard.p.ftpPassword.username">{ userProfile.email }</PropertiesItem>
              <PropertiesItem title="user.dashboard.p.ftpPassword.password">{ this.state.generatedPassword || '****' }</PropertiesItem>
            </Properties>
          </DialogContent>
        </Dialog>
      </div>
    );
  }

  private generatePassword = () => {
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
49
    const { userProfile, generateFtpPassword } = this.props;
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
50

Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
51
    generateFtpPassword(userProfile.uuid)
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
52 53 54 55 56 57 58 59 60 61
      .then((generatedPassword) => this.setState({ generatedPassword }));
  }

  private show = () => {
    const { t } = this.props;

    confirm(t('user.dashboard.p.ftpPassword.confirm'), {
      confirmLabel: t('common:label.yes'),
      abortLabel: t('common:label.no'),
    }).then(() => {
62
      this.setState({ open: true });
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
63 64 65 66 67 68 69 70 71
      this.generatePassword();
    });
  }

  private hide = () => {
    this.setState({ generatedPassword: null, open: false });
  }
}

Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
72 73 74 75
const mapDispatchToProps = (dispatch) => bindActionCreators({
  generateFtpPassword,
}, dispatch);

Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
76
export default connect(null, mapDispatchToProps)(withTranslation()(ChangePasswordPage));