More

client/coral-admin/src/components/BanUserDialog.js

@@ -15,30 +15,28 @@ const BanUserDialog = ({open, onCancel, onPerform, username, info}) => (
     onCancel={onCancel}
     title={t('bandialog.ban_user')}>
     <span className={styles.close} onClick={onCancel}>×</span>
-    <div>
-      <div className={styles.header}>
-        <h2>{t('bandialog.ban_user')}</h2>
-      </div>
-      <div className={styles.separator}>
-        <h3>{t('bandialog.are_you_sure', username)}</h3>
-        <i>{info}</i>
-      </div>
-      <div className={styles.buttons}>
-        <Button
-          className={cn(styles.cancel, 'talk-ban-user-dialog-button-cancel')}
-          cStyle="cancel"
-          onClick={onCancel}
-          raised >
-          {t('bandialog.cancel')}
-        </Button>
-        <Button 
-          className={cn(styles.ban, 'talk-ban-user-dialog-button-ban')}
-          cStyle="black"
-          onClick={onPerform}
-          raised >
-          {t('bandialog.yes_ban_user')}
-        </Button>
-      </div>
+    <div className={styles.header}>
+      <h2>{t('bandialog.ban_user')}</h2>
+    </div>
+    <div className={styles.separator}>
+      <h3>{t('bandialog.are_you_sure', username)}</h3>
+      <i>{info}</i>
+    </div>
+    <div className={styles.buttons}>
+      <Button
+        className={cn(styles.cancel, 'talk-ban-user-dialog-button-cancel')}
+        cStyle="cancel"
+        onClick={onCancel}
+        raised >
+        {t('bandialog.cancel')}
+      </Button>
+      <Button 
+        className={cn(styles.ban, 'talk-ban-user-dialog-button-confirm')}
+        cStyle="black"
+        onClick={onPerform}
+        raised >
+        {t('bandialog.yes_ban_user')}
+      </Button>
     </div>
   </Dialog>
 );

client/coral-ui/components/Dialog.js

@@ -10,12 +10,12 @@ export default class Dialog extends Component {
     onCancel: PropTypes.func,
     onClose: PropTypes.func,
     open: PropTypes.bool,
-    style: PropTypes.object
+    style: PropTypes.object,
   };
 
   static defaultProps = {
     onCancel: (e) => e.preventDefault(),
-    onClose: (e) => e.preventDefault()
+    onClose: (e) => e.preventDefault(),
   };
 
   componentDidMount(){

plugins/talk-plugin-moderation-actions/client/components/BanUserDialog.js

@@ -1,10 +1,12 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
 import styles from './BanUserDialog.css';
 import {t} from 'plugin-api/beta/client/services';
 import {Dialog, Button} from 'plugin-api/beta/client/components/ui';
 
-export default ({showBanDialog, closeBanDialog, banUser}) => (
-  <Dialog open={showBanDialog} className={styles.dialog}>
+const BanUserDialog = ({showBanDialog, closeBanDialog, banUser}) => (
+  <Dialog open={showBanDialog} className={cn(styles.dialog, 'talk-ban-user-dialog')}>
     <span className={styles.close} onClick={closeBanDialog}>×</span>
     <h2>{t('talk-plugin-moderation-actions.ban_user_dialog_headline')}</h2>
     <h3>{t('talk-plugin-moderation-actions.ban_user_dialog_sub')}</h3>
@@ -12,12 +14,28 @@ export default ({showBanDialog, closeBanDialog, banUser}) => (
       {t('talk-plugin-moderation-actions.ban_user_dialog_copy')}
     </p>
     <div className={styles.buttons}>
-      <Button cStyle="cancel" onClick={closeBanDialog} className={styles.cancel} raised>
+      <Button
+        cStyle="cancel"
+        onClick={closeBanDialog}
+        className={cn(styles.cancel, 'talk-ban-user-dialog-button-cancel')}
+        raised >
         {t('talk-plugin-moderation-actions.ban_user_dialog_cancel')}
       </Button>
-      <Button cStyle="black" onClick={banUser} className={styles.confirm} raised>
+      <Button
+        cStyle="black"
+        onClick={banUser}
+        className={cn(styles.confirm, 'talk-ban-user-dialog-button-confirm')}
+        raised >
         {t('talk-plugin-moderation-actions.ban_user_dialog_yes')}
       </Button>
     </div>
   </Dialog>
 );
+
+BanUserDialog.propTypes = {
+  showBanDialog: PropTypes.func.isRequired,
+  closeBanDialog: PropTypes.func.isRequired,
+  banUser: PropTypes.func.isRequired,
+};
+
+export default BanUserDialog;

test/e2e/page_objects/embedStream.js

@@ -2,16 +2,50 @@ const iframeId = 'coralStreamEmbed_iframe';
 
 module.exports = {
   commands: [{
-    navigateToAsset: function(asset) {
+    navigateToAsset(asset) {
       this.api.url(`${this.api.launchUrl}/assets/title/${asset}`);
       return this;
     },
-    getEmbedSection: function() {
+    getEmbedSection() {
       this.waitForElementVisible('@iframe');
       this.api.frame(iframeId);
       this.expect.section('@embed').to.be.present;
       return this.section.embed;
     },
+    login(user = {}) {
+      const embedStream = this.page.embedStream();
+  
+      const embed = embedStream
+        .navigate()
+        .getEmbedSection();
+  
+      embed
+        .waitForElementVisible('@signInButton')
+        .click('@signInButton');
+  
+      this.pause(3000);
+  
+      // Focusing on the Login PopUp
+      this.windowHandles((result) => {
+        const handle = result.value[1];
+        this.switchWindow(handle);
+      });
+
+      const login = this.page.login();
+      
+      login
+        .setValue('@emailInput', user.email)
+        .setValue('@passwordInput', user.password)
+        .waitForElementVisible('@signIn')
+        .waitForElementVisible('@loginButton')
+        .click('@loginButton');
+
+      // Focusing on the Embed Window
+      this.windowHandles((result) => {
+        const handle = result.value[0];
+        this.switchWindow(handle);
+      });
+    },
   }],
   url: function() {
     return this.api.launchUrl;
@@ -22,12 +56,12 @@ module.exports = {
   sections: {
     embed: {
       commands: [{
-        getProfileSection: function() {
+        getProfileSection() {
           this.click('@profileTabButton');
           this.expect.section('@profile').to.be.present;
           return this.section.profile;
         },
-        getCommentsSection: function() {
+        getCommentsSection() {
           this.click('@commentsTabButton');
           this.expect.section('@comments').to.be.present;
           return this.section.comments;
@@ -64,7 +98,9 @@ module.exports = {
           elements: {
             arrow: '.talk-plugin-moderation-actions-arrow',
             menu: '.talk-plugin-modetarion-actions-menu',
-            banButton: 'talk-plugin-moderation-actions-ban',
+            banButton: '.talk-plugin-moderation-actions-ban',
+            banDialog: '.talk-ban-user-dialog',
+            banDialogbanButton: '.talk-ban-user-dialog-button-ban',
           },
         },
         profile: {

test/e2e/specs/04_banUser.js

@@ -1,4 +1,5 @@
 module.exports = {
+
   'admin logs in': (client) => {
     const adminPage = client.page.admin();
     const {testData: {admin}} = client.globals;
@@ -24,7 +25,7 @@ module.exports = {
       .navigate()
       .getEmbedSection();
   },
-  'ban': (client) => {
+  'admin bans user': (client) => {
     const modSection = client.page.embedStream().section.embed.section.mod;
 
     modSection
@@ -32,6 +33,27 @@ module.exports = {
       .click('@arrow')
       .waitForElementVisible('@menu')
       .waitForElementVisible('@banButton')
-      .click('@banButton');
-  }
+      .click('@banButton')
+      .waitForElementVisible('@banDialog')
+      .waitForElementVisible('@banDialogbanButton')
+      .click('@banDialogbanButton')
+      .waitForElementNotVisible('@banDialog');
+  },
+  'user logs in': (client) => {
+    const {testData: {user}} = client.globals;
+    const embedStream = client.page.embedStream();
+
+    embedStream
+      .login(user);
+  },
+  'user account is banned, should see restricted message box': (client) => {
+    const embedStream = client.page.embedStream();
+
+    const embed = embedStream
+      .navigate()
+      .getEmbedSection();
+
+    embed
+      .waitForElementVisible('@restrictedMessageBox');
+  },
 };