Catching if username cant be updated

client/coral-embed-stream/src/tabs/profile/containers/Profile.js

@@ -54,6 +54,15 @@ const withProfileQuery = withQuery(
     me {
       id
       username
+      state {
+        status {
+          username {
+            history {
+              created_at
+            }
+          }
+        }
+      }
     }
     ...${getDefinitionName(TabPanel.fragments.root)}
     ${getSlotFragmentSpreads(slots, 'root')}

client/coral-framework/utils/user.js

@@ -1,4 +1,5 @@
 import get from 'lodash/get';
+import moment from 'moment';
 
 /**
  * getReliability
@@ -33,3 +34,18 @@ export const isSuspended = user => {
 export const isBanned = user => {
   return get(user, 'state.status.banned.status');
 };
+
+/**
+ * canUsernameBeUpdated
+ * retrieves boolean whether a username can be updated or not
+ */
+
+export const canUsernameBeUpdated = status => {
+  const oldestEditTime = moment()
+    .subtract(14, 'days')
+    .toDate();
+
+  return !status.username.history.some(({ created_at }) =>
+    moment(created_at).isAfter(oldestEditTime)
+  );
+};

plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsername.js

@@ -7,6 +7,7 @@ import ChangeUsernameDialog from './ChangeUsernameDialog';
 import { t } from 'plugin-api/beta/client/services';
 import InputField from './InputField';
 import { getErrorMessages } from 'coral-framework/utils';
+import { canUsernameBeUpdated } from 'coral-framework/utils/user';
 
 const initialState = {
   editing: false,
@@ -84,8 +85,13 @@ class ChangeUsername extends React.Component {
   };
 
   render() {
-    const { username, emailAddress } = this.props;
-    const { editing } = this.state;
+    const {
+      username,
+      emailAddress,
+      root: { me: { state: { status } } },
+      notify,
+    } = this.props;
+    const { editing, formData, showDialog } = this.state;
 
     return (
       <section
@@ -94,12 +100,14 @@ class ChangeUsername extends React.Component {
         })}
       >
         <ChangeUsernameDialog
-          showDialog={this.state.showDialog}
+          canUsernameBeUpdated={canUsernameBeUpdated(status)}
+          showDialog={showDialog}
           onChange={this.onChange}
-          formData={this.state.formData}
+          formData={formData}
           username={username}
           closeDialog={this.closeDialog}
           saveChanges={this.saveChanges}
+          notify={notify}
         />
 
         {editing ? (
@@ -170,6 +178,7 @@ class ChangeUsername extends React.Component {
 }
 
 ChangeUsername.propTypes = {
+  root: PropTypes.object.isRequired,
   setUsername: PropTypes.func.isRequired,
   notify: PropTypes.func.isRequired,
   username: PropTypes.string,

plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsernameDialog.js

@@ -20,10 +20,19 @@ class ChangeUsernameDialog extends React.Component {
   confirmChanges = async () => {
     if (this.formHasError()) {
       this.showError();
-    } else {
-      await this.props.saveChanges();
-      this.props.closeDialog();
+      return;
     }
+
+    if (!this.props.canUsernameBeUpdated) {
+      this.props.notify(
+        'error',
+        "Username can't be updated. Usernames can be changed every 14 days"
+      );
+      return;
+    }
+
+    await this.props.saveChanges();
+    this.props.closeDialog();
   };
 
   formHasError = () =>
@@ -101,6 +110,8 @@ ChangeUsernameDialog.propTypes = {
   onChange: PropTypes.func,
   username: PropTypes.string,
   formData: PropTypes.object,
+  canUsernameBeUpdated: PropTypes.bool.isRequired,
+  notify: PropTypes.func.isRequired,
 };
 
 export default ChangeUsernameDialog;