talk/client/coral-embed-stream/src/components/SuspendedAccount.js

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import t from 'coral-framework/services/i18n';
import styles from './SuspendAccount.css';
import {Button} from 'coral-ui';
import validate from 'coral-framework/helpers/validate';
import RestrictedMessageBox from 'coral-framework/components/RestrictedMessageBox';

class SuspendedAccount extends Component {

  static propTypes = {
    canEditName: PropTypes.bool,
    editName: PropTypes.func.isRequired,
    currentUsername: PropTypes.string.isRequired,
  }

  state = {
    username: '',
    alert: ''
  }

  onSubmitClick = (e) => {
    const {editName} = this.props;
    const {username} = this.state;
    e.preventDefault();

    if (username === this.props.currentUsername) {
      this.setState({alert: t('error.SAME_USERNAME_PROVIDED')});
    }
    else if (validate.username(username)) {
      editName(username)
        .then(() => location.reload())
        .catch((error) => {
          this.setState({alert: t(`error.${error.translation_key}`)});
        });
    } else {
      this.setState({alert: t('framework.edit_name.error')});
    }

  }

  render () {
    const {canEditName} = this.props;
    const {username, alert} = this.state;

    return <RestrictedMessageBox>
      <span>{
        canEditName ?
          t('framework.edit_name.msg')
          :
          <span>
            <b>{t('framework.banned_account_header')}</b><br/> {t('framework.banned_account_body')}
          </span>
      }</span>
      {
        canEditName ?
          <div>
            <div className={styles.alert}>
              {alert}
            </div>
            <label
              htmlFor='username'
              className="screen-reader-text"
              aria-hidden={true}>
              {t('framework.edit_name.label')}
            </label>
            <input
              type='text'
              className={styles.editNameInput}
              value={username}
              placeholder={t('framework.edit_name.label')}
              id='username'
              onChange={(e) => this.setState({username: e.target.value})}
              rows={3}/><br/>
            <Button
              onClick={this.onSubmitClick}>
              {
                t('framework.edit_name.button')
              }
            </Button>
          </div> : null
      }
    </RestrictedMessageBox>;
  }
}

export default SuspendedAccount;