Username Change Fixes

2026-08-13 12:40:11 +08:00 · 2018-05-04 11:16:53 -06:00
parent 822193bba5
commit 9a8f0e98a4
6 changed files with 120 additions and 107 deletions
@@ -16,7 +16,8 @@ class ChangeEmailContentDialog extends React.Component {
    });
  };

-  confirmChanges = async () => {
+  confirmChanges = async e => {
+    e.preventDefault();
    await this.props.save();
    this.props.next();
  };
@@ -44,7 +45,7 @@ class ChangeEmailContentDialog extends React.Component {
              {this.props.formData.newEmail}
            </span>
          </div>
-          <form>
+          <form onSubmit={this.confirmChanges}>
            <InputField
              id="confirmPassword"
              label={t('talk-plugin-local-auth.change_email.enter_password')}
@@ -67,10 +68,7 @@ class ChangeEmailContentDialog extends React.Component {
            <Button className={styles.cancel} onClick={this.props.cancel}>
              {t('talk-plugin-local-auth.change_email.cancel')}
            </Button>
-            <Button
-              className={styles.confirmChanges}
-              onClick={this.confirmChanges}
-            >
+            <Button className={styles.confirmChanges} type="submit">
              {t('talk-plugin-local-auth.change_email.confirm_change')}
            </Button>
          </div>
@@ -16,7 +16,9 @@ class ChangeUsernameContentDialog extends React.Component {
    });
  };

-  confirmChanges = async () => {
+  confirmChanges = async e => {
+    e.preventDefault();
+
    if (this.formHasError()) {
      this.showError();
      return;
@@ -60,7 +62,7 @@ class ChangeUsernameContentDialog extends React.Component {
              {this.props.formData.newUsername}
            </span>
          </div>
-          <form>
+          <form onSubmit={this.confirmChanges}>
            <InputField
              id="confirmNewUsername"
              label="Re-enter new username"
@@ -81,18 +83,15 @@ class ChangeUsernameContentDialog extends React.Component {
                {t('talk-plugin-local-auth.change_username.bottom_note')}
              </span>
            </InputField>
+            <div className={styles.bottomActions}>
+              <Button className={styles.cancel} onClick={this.props.cancel}>
+                {t('talk-plugin-local-auth.change_username.cancel')}
+              </Button>
+              <Button className={styles.confirmChanges} type="submit">
+                {t('talk-plugin-local-auth.change_username.confirm_changes')}
+              </Button>
+            </div>
          </form>
-          <div className={styles.bottomActions}>
-            <Button className={styles.cancel} onClick={this.props.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>
      </div>
    );
@@ -7,30 +7,38 @@
  border-radius: 2px;
  box-sizing: border-box;
  justify-content: space-between;
-  
-  &.editing { 
+
+  &.editing {
    background-color: #EDEDED;
  }
 }

+.wrapper {
+  display: flex;
+  position: relative;
+  box-sizing: inherit;
+  justify-content: inherit;
+  flex-grow: 1;
+}
+
 .content {
  flex-grow: 1;
-} 
+}

 .actions {
  flex-grow: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
-}                                                                       
+}

 .email {
  margin: 0;
 }

-.username {   
+.username {
  margin-bottom: 4px;
-}         
+}

 .button {
  border: 1px solid #787d80;
@@ -48,7 +56,7 @@
  > i {
    font-size: 17px;
  }
-    
+
  &:hover {
    background-color: #399ee2;
    color: white;
@@ -82,13 +90,13 @@
  height: 30px;
  display: inline-block;
  width: 230px;
-  display: flex;  
+  display: flex;

  > .detailLabelIcon {
    font-size: 1.2em;
    padding: 0 5px;
    color: #787D80;
-    line-height: 30px; 
+    line-height: 30px;
  }

  &.disabled {
@@ -115,7 +123,7 @@
  list-style: none;
  margin: 0;
  padding: 0;
-} 
+}

 .detailItem {
  margin-bottom: 12px;
@@ -50,8 +50,12 @@ class Profile extends React.Component {
    });
  };

-  onSave = async () => {
-    this.showDialog();
+  onSave = async e => {
+    e.preventDefault();
+
+    if (this.isSaveEnabled()) {
+      this.showDialog();
+    }
  };

  addError = err => {
@@ -121,10 +125,10 @@ class Profile extends React.Component {

  saveUsername = async () => {
    const { newUsername } = this.state.formData;
-    const { changeUsername } = this.props;
+    const { setUsername } = this.props;

    try {
-      await changeUsername(this.props.root.me.id, newUsername);
+      await setUsername(newUsername);
      this.props.notify(
        'success',
        t('talk-plugin-local-auth.change_username.changed_username_success_msg')
@@ -163,6 +167,8 @@ class Profile extends React.Component {
    } = this.props;
    const { editing, formData, showDialog } = this.state;

+    const usernameCanBeUpdated = canUsernameBeUpdated(status);
+
    return (
      <section
        className={cn(
@@ -178,15 +184,17 @@ class Profile extends React.Component {
          closeDialog={this.closeDialog}
          finish={this.finish}
        >
-          <ChangeUsernameContentDialog
-            notify={notify}
-            canUsernameBeUpdated={canUsernameBeUpdated(status)}
-            save={this.saveUsername}
-            onChange={this.onChange}
-            formData={this.state.formData}
-            username={username}
-            enable={formData.newUsername && username !== formData.newUsername}
-          />
+          {usernameCanBeUpdated && (
+            <ChangeUsernameContentDialog
+              notify={notify}
+              canUsernameBeUpdated={usernameCanBeUpdated}
+              save={this.saveUsername}
+              onChange={this.onChange}
+              formData={this.state.formData}
+              username={username}
+              enable={formData.newUsername && username !== formData.newUsername}
+            />
+          )}
          <ChangeEmailContentDialog
            save={this.saveEmail}
            onChange={this.onChange}
@@ -197,63 +205,65 @@ class Profile extends React.Component {
        </ConfirmChangesDialog>

        {editing ? (
-          <div className={styles.content}>
-            <div className={styles.detailList}>
-              <InputField
-                icon="person"
-                id="newUsername"
-                name="newUsername"
-                onChange={this.onChange}
-                defaultValue={username}
-                validationType="username"
-                columnDisplay
-              >
-                <span className={styles.bottomText}>
-                  {t(
-                    'talk-plugin-local-auth.change_username.change_username_note'
-                  )}
-                </span>
-              </InputField>
-              <InputField
-                icon="email"
-                id="newEmail"
-                name="newEmail"
-                onChange={this.onChange}
-                defaultValue={email}
-                validationType="email"
-                columnDisplay
-              />
+          <form className={styles.wrapper} onSubmit={this.onSave}>
+            <div className={styles.content}>
+              <div className={styles.detailList}>
+                <InputField
+                  icon="person"
+                  id="newUsername"
+                  name="newUsername"
+                  onChange={this.onChange}
+                  defaultValue={username}
+                  validationType="username"
+                  disabled={!usernameCanBeUpdated}
+                  columnDisplay
+                >
+                  <span className={styles.bottomText}>
+                    {t(
+                      'talk-plugin-local-auth.change_username.change_username_note'
+                    )}
+                  </span>
+                </InputField>
+                <InputField
+                  icon="email"
+                  id="newEmail"
+                  name="newEmail"
+                  onChange={this.onChange}
+                  defaultValue={email}
+                  validationType="email"
+                  columnDisplay
+                />
+              </div>
            </div>
-          </div>
+            <div className={styles.actions}>
+              <Button
+                className={cn(styles.button, styles.saveButton)}
+                icon="save"
+                type="submit"
+                disabled={!this.isSaveEnabled()}
+              >
+                {t('talk-plugin-local-auth.change_username.save')}
+              </Button>
+              <a className={styles.cancelButton} onClick={this.cancel}>
+                {t('talk-plugin-local-auth.change_username.cancel')}
+              </a>
+            </div>
+          </form>
        ) : (
-          <div className={styles.content}>
-            <h2 className={styles.username}>{username}</h2>
-            {email ? <p className={styles.email}>{email}</p> : null}
-          </div>
-        )}
-        {editing ? (
-          <div className={styles.actions}>
-            <Button
-              className={cn(styles.button, styles.saveButton)}
-              icon="save"
-              onClick={this.onSave}
-              disabled={!this.isSaveEnabled()}
-            >
-              {t('talk-plugin-local-auth.change_username.save')}
-            </Button>
-            <a className={styles.cancelButton} onClick={this.cancel}>
-              {t('talk-plugin-local-auth.change_username.cancel')}
-            </a>
-          </div>
-        ) : (
-          <div className={styles.actions}>
-            <Button
-              className={styles.button}
-              icon="settings"
-              onClick={this.enableEditing}
-            >
-              {t('talk-plugin-local-auth.change_username.edit_profile')}
-            </Button>
+          <div className={styles.wrapper}>
+            <div className={styles.content}>
+              <h2 className={styles.username}>{username}</h2>
+              {email ? <p className={styles.email}>{email}</p> : null}
+            </div>
+            <div className={styles.actions}>
+              <Button
+                className={styles.button}
+                icon="settings"
+                onClick={this.enableEditing}
+              >
+                {t('talk-plugin-local-auth.change_username.edit_profile')}
+              </Button>
+            </div>
          </div>
        )}
      </section>
@@ -263,9 +273,8 @@ class Profile extends React.Component {

 Profile.propTypes = {
  updateEmailAddress: PropTypes.func.isRequired,
-  changeUsername: PropTypes.func.isRequired,
+  setUsername: PropTypes.func.isRequired,
  root: PropTypes.object.isRequired,
-  changeUsername: PropTypes.func.isRequired,
  notify: PropTypes.func.isRequired,
  username: PropTypes.string,
  emailAddress: PropTypes.string,
@@ -3,7 +3,7 @@ import { bindActionCreators } from 'redux';
 import { connect, withFragments } from 'plugin-api/beta/client/hocs';
 import Profile from '../components/Profile';
 import { notify } from 'coral-framework/actions/notification';
-import { withChangeUsername } from 'plugin-api/beta/client/hocs';
+import { withSetUsername } from 'plugin-api/beta/client/hocs';
 import { withUpdateEmailAddress } from '../hocs';

 const mapDispatchToProps = dispatch => bindActionCreators({ notify }, dispatch);
@@ -33,7 +33,7 @@ const withData = withFragments({

 export default compose(
  connect(null, mapDispatchToProps),
-  withChangeUsername,
+  withSetUsername,
  withUpdateEmailAddress,
  withData
 )(Profile);
@@ -22,19 +22,18 @@ en:
      confirm_changes: "Confirm Changes"
      username_does_not_match: "Username does not match"
      cant_be_equal: "Your new {0} must be different to your current one"
-      change_username_attempt: "Username can't be updated. Usernames can be changed every 14 days"
+      changed_username_success_msg: "Username Changed - Your username has been successfully changed. You will not be able to change your user name for 14 days."
+      change_username_attempt: "Username can't be updated. Usernames can only be changed every 14 days."
    change_email:
      confirm_email_change: "Confirm Email Address Change"
      description: "You are attempting to change your email address. Your new email address will be used for your login and to receive account notifications."
-      old_email: "Old Email Address" 
+      old_email: "Old Email Address"
      new_email: "New Email Address"
      enter_password: "Enter Password"
      incorrect_password: "Incorrect Password"
      confirm_change: "Confirm Change"
      cancel: "Cancel"
      change_email_msg: "Email Address Changed - Your email address has been successfully changed. This email address will now be used for signing in and email notifications."
-      changed_username_success_msg: "Username Changed - Your username has been successfully changed. You will not be able to change your user name for 14 days."
-      change_username_attempt: "Username can't be updated. Usernames can only be changed every 14 days."
    add_email:
      add_email_address: "Add Email Address"
      enter_email_address: "Enter Email Address:"
@@ -52,7 +51,7 @@ en:
      verify:
        title: "Verify Your Email Address"
        description:  "We’ve sent an email to {0} to verify your account. You must verify your email address so that it can be used for account change confirmations and notifications."
-      added: 
+      added:
        title: "Email Address Added"
        description: "Your email address has been added to your account."
        subtitle: "Need to change your email address?"
@@ -82,4 +81,4 @@ es:
      confirm_changes: "Confirmar Cambios"
      username_does_not_match: "El usuario no coincide"
      changed_username_success_msg: "Usuario Actualizado - Tu usuario ha sido exitosamente actualizado. No podrás cambiar el usuario por 14 días."
-      change_username_attempt: "El usuario no puede ser actualizado. Los usuarios pueden ser cambiados cada 14 días."
+      change_username_attempt: "El usuario no puede ser actualizado. Los usuarios pueden ser cambiados cada 14 días."