FtpPasswordDialog.tsx 2.5 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 { translate } 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 18 19
// 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';

interface IFtpPasswordPage extends React.ClassAttributes<any> {
  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 34
  t?: any;
}

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
35
        <Button onClick={ this.show }>{ t('user.dashboard.p.ftpPassword.generatePassword') }</Button>
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
36 37 38 39 40 41 42 43 44 45 46 47 48 49
        <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
50
    const { userProfile, generateFtpPassword } = this.props;
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
51

Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
52
    generateFtpPassword(userProfile.uuid)
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72
      .then((generatedPassword) => this.setState({ generatedPassword }));
  }

  private show = () => {
    const { t } = this.props;
    this.setState({ open: true });

    confirm(t('user.dashboard.p.ftpPassword.confirm'), {
      confirmLabel: t('common:label.yes'),
      abortLabel: t('common:label.no'),
    }).then(() => {
      this.generatePassword();
    });
  }

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

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

export default translate()(connect(null, mapDispatchToProps)(ChangePasswordPage));