FtpPasswordDialog.tsx 2.23 KB
Newer Older
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70
import * as React from 'react';
import { translate } from 'react-i18next';
// model
import { User } from 'model/user/User';
// service
import { UserService } from 'service/UserService';
// 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;
  t?: any;
}

class ChangePasswordPage extends React.Component<IFtpPasswordPage> {

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

  public render() {
    const { userProfile, t } = this.props;
    return (
      <div>
        <Button className="m-20" onClick={ this.show }>{ t('user.dashboard.p.ftpPassword.generatePassword') }</Button>
        <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 = () => {
    const { userProfile } = this.props;

    UserService.generateFtpPassword(userProfile.uuid)
      .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 });
  }
}

export default translate()(ChangePasswordPage);