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));