From 565ba2af065c87b1d827b446d067f6f4a55fe959 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 7 May 2018 17:54:59 +0200
Subject: [PATCH] Restore cancel buttons

---
 .../components/ChangeEmailContentDialog.js    |   6 +-
 .../client/components/ChangePassword.js       |  10 +-
 .../components/ChangeUsernameContentDialog.js |   6 +-
 .../components/ChangeUsernameDialog.css       |  84 ------------
 .../client/components/ChangeUsernameDialog.js | 120 ------------------
 .../client/components/Profile.js              |  10 +-
 6 files changed, 24 insertions(+), 212 deletions(-)
 delete mode 100644 plugins/talk-plugin-local-auth/client/components/ChangeUsernameDialog.css
 delete mode 100644 plugins/talk-plugin-local-auth/client/components/ChangeUsernameDialog.js

diff --git a/plugins/talk-plugin-local-auth/client/components/ChangeEmailContentDialog.js b/plugins/talk-plugin-local-auth/client/components/ChangeEmailContentDialog.js
index 1f1719444..62540927f 100644
--- a/plugins/talk-plugin-local-auth/client/components/ChangeEmailContentDialog.js
+++ b/plugins/talk-plugin-local-auth/client/components/ChangeEmailContentDialog.js
@@ -64,7 +64,11 @@ class ChangeEmailContentDialog extends React.Component {
               showSuccess={false}
             />
             <div className={styles.bottomActions}>
-              <Button className={styles.cancel} onClick={this.props.cancel}>
+              <Button
+                className={styles.cancel}
+                onClick={this.props.cancel}
+                type="button"
+              >
                 {t('talk-plugin-local-auth.change_email.cancel')}
               </Button>
               <Button className={styles.confirmChanges} type="submit">
diff --git a/plugins/talk-plugin-local-auth/client/components/ChangePassword.js b/plugins/talk-plugin-local-auth/client/components/ChangePassword.js
index 8f86fff48..3e7210c10 100644
--- a/plugins/talk-plugin-local-auth/client/components/ChangePassword.js
+++ b/plugins/talk-plugin-local-auth/client/components/ChangePassword.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import styles from './ChangePassword.css';
-import { Button } from 'plugin-api/beta/client/components/ui';
+import { Button, BareButton } from 'plugin-api/beta/client/components/ui';
 import validate from 'coral-framework/helpers/validate';
 import errorMsj from 'coral-framework/helpers/error';
 import isEqual from 'lodash/isEqual';
@@ -231,9 +231,13 @@ class ChangePassword extends React.Component {
               >
                 {t('talk-plugin-local-auth.change_password.save')}
               </Button>
-              <a className={styles.cancelButton} onClick={this.cancel}>
+              <BareButton
+                type="button"
+                className={styles.cancelButton}
+                onClick={this.cancel}
+              >
                 {t('talk-plugin-local-auth.change_password.cancel')}
-              </a>
+              </BareButton>
             </div>
           </form>
         ) : (
diff --git a/plugins/talk-plugin-local-auth/client/components/ChangeUsernameContentDialog.js b/plugins/talk-plugin-local-auth/client/components/ChangeUsernameContentDialog.js
index 917d77782..3e7107922 100644
--- a/plugins/talk-plugin-local-auth/client/components/ChangeUsernameContentDialog.js
+++ b/plugins/talk-plugin-local-auth/client/components/ChangeUsernameContentDialog.js
@@ -84,7 +84,11 @@ class ChangeUsernameContentDialog extends React.Component {
               </span>
             </InputField>
             <div className={styles.bottomActions}>
-              <Button className={styles.cancel} onClick={this.props.cancel}>
+              <Button
+                className={styles.cancel}
+                onClick={this.props.cancel}
+                type="button"
+              >
                 {t('talk-plugin-local-auth.change_username.cancel')}
               </Button>
               <Button className={styles.confirmChanges} type="submit">
diff --git a/plugins/talk-plugin-local-auth/client/components/ChangeUsernameDialog.css b/plugins/talk-plugin-local-auth/client/components/ChangeUsernameDialog.css
deleted file mode 100644
index af681d596..000000000
--- a/plugins/talk-plugin-local-auth/client/components/ChangeUsernameDialog.css
+++ /dev/null
@@ -1,84 +0,0 @@
-.dialog {
-  border: none;
-  box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
-  width: 320px;
-  top: 10px;
-  font-family: Helvetica, 'Helvetica Neue', Verdana, sans-serif;
-  font-size: 14px;
-  border-radius: 4px;
-  padding: 12px 20px;
-}
-
-.close {
-  font-size: 20px;
-  line-height: 14px;
-  top: 10px;
-  right: 10px;
-  position: absolute;
-  display: block;
-  font-weight: bold;
-  color: #363636;
-  cursor: pointer;
-
-  &:hover {
-    color: #6b6b6b;
-  }
-}
-
-.title {
-  font-size: 1.3em;
-  margin-bottom: 8px;
-}
-
-.description {
-  font-size: 1em;
-  line-height: 20px;
-  margin: 0;
-}
-
-.item {
-  display: block;
-  color: #4C4C4D;
-  font-size: 1em;
-  margin-bottom: 2px;
-}
-
-.bottomNote {
-  font-size: 0.9em;
-  line-height: 20px;
-  padding-top: 10px;
-  display: block;
-}
-
-.bottomActions {
-  text-align: right;
-}
-
-.usernamesChange {
-  margin: 18px 0;
-}
-
-.cancel {
-  border: 1px solid #787d80;
-  background-color: transparent;
-  height: 30px;
-  font-size: 0.9em;
-  line-height: normal;
-
-  &:hover {
-    background-color: #eaeaea;
-  }
-}
-
-.confirmChanges {
-  background-color: #3498DB;
-  border-color: #3498DB;
-  color: white;
-  height: 30px;
-  font-size: 0.9em;
-  
-  &:hover {
-    background-color: #3ba3ec;
-    color: white;
-  }
-}
\ No newline at end of file
diff --git a/plugins/talk-plugin-local-auth/client/components/ChangeUsernameDialog.js b/plugins/talk-plugin-local-auth/client/components/ChangeUsernameDialog.js
deleted file mode 100644
index 097168b06..000000000
--- a/plugins/talk-plugin-local-auth/client/components/ChangeUsernameDialog.js
+++ /dev/null
@@ -1,120 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cn from 'classnames';
-import styles from './ChangeUsernameDialog.css';
-import InputField from './InputField';
-import { Button, Dialog } from 'plugin-api/beta/client/components/ui';
-import { t } from 'plugin-api/beta/client/services';
-
-class ChangeUsernameDialog extends React.Component {
-  state = {
-    showError: false,
-  };
-
-  showError = () => {
-    this.setState({
-      showError: true,
-    });
-  };
-
-  confirmChanges = async () => {
-    if (this.formHasError()) {
-      this.showError();
-      return;
-    }
-
-    if (!this.props.canUsernameBeUpdated) {
-      this.props.notify(
-        'error',
-        t('talk-plugin-local-auth.change_username.change_username_attempt')
-      );
-      return;
-    }
-
-    await this.props.saveChanges();
-    this.props.closeDialog();
-  };
-
-  formHasError = () =>
-    this.props.formData.confirmNewUsername !== this.props.formData.newUsername;
-
-  render() {
-    return (
-      <Dialog
-        open={this.props.showDialog}
-        className={cn(
-          styles.dialog,
-          'talk-plugin-local-auth--edit-profile-dialog'
-        )}
-      >
-        <span className={styles.close} onClick={this.props.closeDialog}>
-          ×
-        </span>
-        <h1 className={styles.title}>
-          {t('talk-plugin-local-auth.change_username.confirm_username_change')}
-        </h1>
-        <div className={styles.content}>
-          <p className={styles.description}>
-            {t('talk-plugin-local-auth.change_username.description')}
-          </p>
-          <div className={styles.usernamesChange}>
-            <span className={styles.item}>
-              {t('talk-plugin-local-auth.change_username.old_username')}:{' '}
-              {this.props.username}
-            </span>
-            <span className={styles.item}>
-              {t('talk-plugin-local-auth.change_username.new_username')}:{' '}
-              {this.props.formData.newUsername}
-            </span>
-          </div>
-          <form>
-            <InputField
-              id="confirmNewUsername"
-              label="Re-enter new username"
-              name="confirmNewUsername"
-              type="text"
-              onChange={this.props.onChange}
-              defaultValue=""
-              hasError={this.formHasError() && this.state.showError}
-              errorMsg={t(
-                'talk-plugin-local-auth.change_username.username_does_not_match'
-              )}
-              showError={this.state.showError}
-              columnDisplay
-              showSuccess={false}
-              validationType="username"
-            >
-              <span className={styles.bottomNote}>
-                {t('talk-plugin-local-auth.change_username.bottom_note')}
-              </span>
-            </InputField>
-          </form>
-          <div className={styles.bottomActions}>
-            <Button className={styles.cancel}>
-              {t('talk-plugin-local-auth.change_username.cancel')}
-            </Button>
-            <Button
-              className={styles.confirmChanges}
-              onClick={this.confirmChanges}
-            >
-              {t('talk-plugin-local-auth.change_username.confirm_changes')}
-            </Button>
-          </div>
-        </div>
-      </Dialog>
-    );
-  }
-}
-
-ChangeUsernameDialog.propTypes = {
-  saveChanges: PropTypes.func,
-  closeDialog: PropTypes.func,
-  showDialog: PropTypes.bool,
-  onChange: PropTypes.func,
-  username: PropTypes.string,
-  formData: PropTypes.object,
-  canUsernameBeUpdated: PropTypes.bool.isRequired,
-  notify: PropTypes.func.isRequired,
-};
-
-export default ChangeUsernameDialog;
diff --git a/plugins/talk-plugin-local-auth/client/components/Profile.js b/plugins/talk-plugin-local-auth/client/components/Profile.js
index 85c1f1295..e5d0276c7 100644
--- a/plugins/talk-plugin-local-auth/client/components/Profile.js
+++ b/plugins/talk-plugin-local-auth/client/components/Profile.js
@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import PropTypes from 'prop-types';
 import styles from './Profile.css';
-import { Button } from 'plugin-api/beta/client/components/ui';
+import { Button, BareButton } from 'plugin-api/beta/client/components/ui';
 import { t } from 'plugin-api/beta/client/services';
 import InputField from './InputField';
 import { getErrorMessages } from 'coral-framework/utils';
@@ -244,9 +244,13 @@ class Profile extends React.Component {
               >
                 {t('talk-plugin-local-auth.change_username.save')}
               </Button>
-              <a className={styles.cancelButton} onClick={this.cancel}>
+              <BareButton
+                className={styles.cancelButton}
+                onClick={this.cancel}
+                type="button"
+              >
                 {t('talk-plugin-local-auth.change_username.cancel')}
-              </a>
+              </BareButton>
             </div>
           </form>
         ) : (