diff --git a/client/coral-embed-stream/src/tabs/profile/containers/Profile.js b/client/coral-embed-stream/src/tabs/profile/containers/Profile.js index 9bc9cc703..0272c1535 100644 --- a/client/coral-embed-stream/src/tabs/profile/containers/Profile.js +++ b/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')} diff --git a/client/coral-framework/utils/user.js b/client/coral-framework/utils/user.js index f50fca335..610557542 100644 --- a/client/coral-framework/utils/user.js +++ b/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) + ); +}; diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsername.js b/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsername.js index 4d6bc41f6..c30a43a29 100644 --- a/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsername.js +++ b/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 (
{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, diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsernameDialog.js b/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsernameDialog.js index 3ebf6ff02..441a60594 100644 --- a/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsernameDialog.js +++ b/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;