diff --git a/client/coral-admin/src/components/BanUserDialog.js b/client/coral-admin/src/components/BanUserDialog.js
index 9df28f984..d9746dd0d 100644
--- a/client/coral-admin/src/components/BanUserDialog.js
+++ b/client/coral-admin/src/components/BanUserDialog.js
@@ -7,47 +7,112 @@ import styles from './BanUserDialog.css';
import Button from 'coral-ui/components/Button';
import t from 'coral-framework/services/i18n';
-const BanUserDialog = ({open, onCancel, onPerform, username, info, handleMessageChange, message}) => (
-
-
-
{t('bandialog.are_you_sure', username)}
-
{info}
-
-
-
-
-
-
-
-);
+const initialState = {step: 0, message: ''};
+
+class BanUserDialog extends React.Component {
+
+ state = initialState;
+
+ handleMessageChange = (e) => {
+ const {value: message} = e;
+ this.setState({message});
+ }
+
+ goToStep = (step) => {
+ this.setState({step});
+ }
+
+ renderStep0() {
+ const {
+ onCancel,
+ username,
+ info,
+ } = this.props;
+
+ return (
+
+
+
{t('bandialog.ban_user')}
+
+
+
{t('bandialog.are_you_sure', username)}
+
{info}
+
+
+
+
+
+
+ );
+ }
+
+ renderStep1() {
+ const {
+ onCancel,
+ onPerform,
+ handleMessageChange,
+ } = this.props;
+ const {message} = this.state;
+
+ return (
+
+
Notify the user of ban
+
This will notify the user by email that they have been banned from the community
+
+
+
+
+ )
+ }
+
+ render() {
+ const {step} = this.state;
+ const {open, onCancel} = this.props;
+ return (
+
+ )
+ }
+ };
BanUserDialog.propTypes = {
open: PropTypes.bool,
@@ -55,8 +120,6 @@ BanUserDialog.propTypes = {
onCancel: PropTypes.func.isRequired,
username: PropTypes.string,
info: PropTypes.string,
- message: PropTypes.string,
- handleMessageChange: PropTypes.func.isRequired,
};
export default BanUserDialog;
diff --git a/client/coral-admin/src/containers/BanUserDialog.js b/client/coral-admin/src/containers/BanUserDialog.js
index 367a84490..da3611e9e 100644
--- a/client/coral-admin/src/containers/BanUserDialog.js
+++ b/client/coral-admin/src/containers/BanUserDialog.js
@@ -11,18 +11,6 @@ import {getErrorMessages} from 'coral-framework/utils';
import {notify} from 'coral-framework/actions/notification';
class BanUserDialogContainer extends Component {
- constructor() {
- super();
-
- this.state = {
- message: '',
- };
- }
-
- handleMessageChange = (e) => {
- const {value: message} = e;
- this.setState(message);
- }
banUser = async () => {
const {userId, commentId, commentStatus, banUser, setCommentStatus, hideBanUserDialog, notify} = this.props;
@@ -54,8 +42,6 @@ class BanUserDialogContainer extends Component {
onCancel={this.props.hideBanUserDialog}
username={this.props.username}
info={this.getInfo()}
- message={this.state.message}
- handleMessageChange={this.handleMessageChange}
/>
);
}
diff --git a/locales/en.yml b/locales/en.yml
index 7c3768fae..64c119e24 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -13,6 +13,7 @@ en:
note_ban_user: "Banning this user will not let them edit comment or remove anything."
yes_ban_user: "Yes, Ban User"
write_a_message: "Write a message"
+ send: "Send"
bio_offensive: "This bio is offensive"
cancel: "Cancel"
characters_remaining: "characters remaining"
diff --git a/locales/es.yml b/locales/es.yml
index 63a49b205..fc14d5ed5 100644
--- a/locales/es.yml
+++ b/locales/es.yml
@@ -13,6 +13,7 @@ es:
note_ban_user: "Suspender a este usuario no le va a permitir (al usuario) borrar ni editar ni comentar."
yes_ban_user: "Si, Suspender al usuario"
write_a_message: "Escribe un mensaje"
+ send: "Enviar"
bio_offensive: "Esta biografia es ofensiva"
cancel: Cancelar
characters_remaining: "carácteres restantes"