@openedx/frontend-app-authn 1.0.0-alpha.0

package/src/register/RegistrationFields/UsernameField/UsernameField.jsx

@@ -0,0 +1,162 @@
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { useIntl } from '@openedx/frontend-base';
+import { Button, Icon, IconButton } from '@openedx/paragon';
+import { Close } from '@openedx/paragon/icons';
+import PropTypes from 'prop-types';
+
+import { FormGroup } from '../../../common-components';
+import {
+  clearRegistrationBackendError,
+  clearUsernameSuggestions,
+  fetchRealtimeValidations,
+} from '../../data/actions';
+import messages from '../../messages';
+import validateUsername from './validator';
+
+/**
+ * Username field wrapper. It accepts following handlers
+ * - handleChange for setting value change and
+ * - handleErrorChange for setting error
+ *
+ * It is responsible for
+ * - Rendering username suggestions
+ * - Setting and clearing username suggestions
+ * - Performing username field validations
+ * - clearing error on focus
+ * - setting value on change
+ */
+const UsernameField = (props) => {
+  const { formatMessage } = useIntl();
+  const dispatch = useDispatch();
+
+  const {
+    value,
+    errorMessage,
+    handleChange,
+    handleErrorChange,
+  } = props;
+
+  let className = '';
+  let suggestedUsernameDiv = null;
+  let iconButton = null;
+  const usernameSuggestions = useSelector(state => state.register.usernameSuggestions);
+  const validationApiRateLimited = useSelector(state => state.register.validationApiRateLimited);
+
+  /**
+   * We need to remove the placeholder from the field, adding a space will do that.
+   * This is needed because we are placing the username suggestions on top of the field.
+   */
+  useEffect(() => {
+    if (usernameSuggestions.length && !value) {
+      handleChange({ target: { name: 'username', value: ' ' } });
+    }
+  }, [handleChange, usernameSuggestions, value]);
+
+  const handleOnBlur = (event) => {
+    const { value: username } = event.target;
+    const fieldError = validateUsername(username, formatMessage);
+    if (fieldError) {
+      handleErrorChange('username', fieldError);
+    } else if (!validationApiRateLimited) {
+      dispatch(fetchRealtimeValidations({ username }));
+    }
+  };
+
+  const handleOnChange = (event) => {
+    let username = event.target.value;
+    if (username.length > 30) {
+      return;
+    }
+    if (event.target.value.startsWith(' ')) {
+      username = username.trim();
+    }
+    handleChange({ target: { name: 'username', value: username } });
+  };
+
+  const handleOnFocus = (event) => {
+    const username = event.target.value;
+    dispatch(clearUsernameSuggestions());
+    // If we added a space character to username field to display the suggestion
+    // remove it before user enters the input. This is to ensure user doesn't
+    // have a space prefixed to the username.
+    if (username === ' ') {
+      handleChange({ target: { name: 'username', value: '' } });
+    }
+    handleErrorChange('username', '');
+    dispatch(clearRegistrationBackendError('username'));
+  };
+
+  const handleSuggestionClick = (event, suggestion = '') => {
+    event.preventDefault();
+    handleErrorChange('username', ''); // clear error
+    handleChange({ target: { name: 'username', value: suggestion } }); // to set suggestion as value
+    dispatch(clearUsernameSuggestions());
+  };
+
+  const handleUsernameSuggestionClose = () => {
+    handleChange({ target: { name: 'username', value: '' } }); // to remove space in field
+    dispatch(clearUsernameSuggestions());
+  };
+
+  const suggestedUsernames = () => (
+    <div className={className}>
+      <span className="text-gray username-suggestion--label">{formatMessage(messages['registration.username.suggestion.label'])}</span>
+      <div className="username-scroll-suggested--form-field">
+        {usernameSuggestions.map((username, index) => (
+          <Button
+            type="button"
+            name="username"
+            variant="outline-dark"
+            className="username-suggestions--chip data-hj-suppress"
+            autoComplete={props.autoComplete}
+            key={`suggestion-${index.toString()}`}
+            onClick={(e) => handleSuggestionClick(e, username)}
+          >
+            {username}
+          </Button>
+        ))}
+      </div>
+      {iconButton}
+    </div>
+  );
+
+  if (usernameSuggestions.length > 0 && errorMessage && value === ' ') {
+    className = 'username-suggestions__error';
+    iconButton = <IconButton src={Close} iconAs={Icon} alt="Close" onClick={() => handleUsernameSuggestionClose()} variant="black" size="sm" className="username-suggestions__close__button" />;
+    suggestedUsernameDiv = suggestedUsernames();
+  } else if (usernameSuggestions.length > 0 && value === ' ') {
+    className = 'username-suggestions d-flex align-items-center';
+    iconButton = <IconButton src={Close} iconAs={Icon} alt="Close" onClick={() => handleUsernameSuggestionClose()} variant="black" size="sm" className="username-suggestions__close__button" />;
+    suggestedUsernameDiv = suggestedUsernames();
+  } else if (usernameSuggestions.length > 0 && errorMessage) {
+    suggestedUsernameDiv = suggestedUsernames();
+  }
+  return (
+    <FormGroup
+      {...props}
+      handleChange={handleOnChange}
+      handleFocus={handleOnFocus}
+      handleBlur={handleOnBlur}
+    >
+      {suggestedUsernameDiv}
+    </FormGroup>
+  );
+};
+
+UsernameField.defaultProps = {
+  errorMessage: '',
+  autoComplete: null,
+};
+
+UsernameField.propTypes = {
+  handleChange: PropTypes.func.isRequired,
+  handleErrorChange: PropTypes.func.isRequired,
+  errorMessage: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  autoComplete: PropTypes.string,
+};
+
+export default UsernameField;

package/src/register/RegistrationFields/UsernameField/UsernameField.test.jsx

@@ -0,0 +1,319 @@
+import { Provider } from 'react-redux';
+
+import { injectIntl, IntlProvider } from '@openedx/frontend-base';
+import { fireEvent, render } from '@testing-library/react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+
+import { clearRegistrationBackendError, clearUsernameSuggestions, fetchRealtimeValidations } from '../../data/actions';
+import { UsernameField } from '../index';
+
+const IntlUsernameField = injectIntl(UsernameField);
+const mockStore = configureStore();
+
+jest.mock('react-router-dom', () => {
+  const mockNavigation = jest.fn();
+
+  // eslint-disable-next-line react/prop-types
+  const Navigate = ({ to }) => {
+    mockNavigation(to);
+    return <div />;
+  };
+
+  return {
+    ...jest.requireActual('react-router-dom'),
+    Navigate,
+    mockNavigate: mockNavigation,
+  };
+});
+
+describe('UsernameField', () => {
+  let props = {};
+  let store = {};
+
+  const reduxWrapper = children => (
+    <IntlProvider locale="en">
+      <Provider store={store}>{children}</Provider>
+    </IntlProvider>
+  );
+
+  const routerWrapper = children => (
+    <Router>
+      {children}
+    </Router>
+  );
+
+  const initialState = {
+    register: {
+      usernameSuggestions: [],
+    },
+  };
+
+  beforeEach(() => {
+    store = mockStore(initialState);
+    props = {
+      name: 'username',
+      value: '',
+      errorMessage: '',
+      handleChange: jest.fn(),
+      handleErrorChange: jest.fn(),
+      floatingLabel: '',
+    };
+    window.location = { search: '' };
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Test Username Field', () => {
+    const fieldValidation = {
+      username: 'Username must be between 2 and 30 characters',
+    };
+
+    it('should run username field validation when onBlur is fired', () => {
+      const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
+
+      const usernameField = container.querySelector('input#username');
+      fireEvent.blur(usernameField, { target: { value: '', name: 'username' } });
+
+      expect(props.handleErrorChange).toHaveBeenCalledTimes(1);
+      expect(props.handleErrorChange).toHaveBeenCalledWith(
+        'username',
+        fieldValidation.username,
+      );
+    });
+
+    it('should update errors for frontend validations', () => {
+      const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
+
+      const usernameField = container.querySelector('input#username');
+      fireEvent.blur(usernameField, { target: { value: 'user#', name: 'username' } });
+
+      expect(props.handleErrorChange).toHaveBeenCalledTimes(1);
+      expect(props.handleErrorChange).toHaveBeenCalledWith(
+        'username',
+        'Usernames can only contain letters (A-Z, a-z), numerals (0-9), underscores (_), and hyphens (-). Usernames cannot contain spaces',
+      );
+    });
+
+    it('should clear error on focus', () => {
+      const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
+
+      const usernameField = container.querySelector('input#username');
+      fireEvent.focus(usernameField, { target: { value: '', name: 'username' } });
+
+      expect(props.handleErrorChange).toHaveBeenCalledTimes(1);
+      expect(props.handleErrorChange).toHaveBeenCalledWith(
+        'username',
+        '',
+      );
+    });
+
+    it('should remove space from field on focus if space exists', () => {
+      const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
+
+      const usernameField = container.querySelector('input#username');
+      fireEvent.focus(usernameField, { target: { value: ' ', name: 'username' } });
+
+      expect(props.handleChange).toHaveBeenCalledTimes(1);
+      expect(props.handleChange).toHaveBeenCalledWith(
+        { target: { name: 'username', value: '' } },
+      );
+    });
+
+    it('should call backend validation api on blur event, if frontend validations have passed', () => {
+      store.dispatch = jest.fn(store.dispatch);
+      const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
+
+      const usernameField = container.querySelector('input#username');
+      // Enter a valid username so that frontend validations are passed
+      fireEvent.blur(usernameField, { target: { value: 'test', name: 'username' } });
+
+      expect(store.dispatch).toHaveBeenCalledWith(fetchRealtimeValidations({ username: 'test' }));
+    });
+
+    it('should remove space from the start of username on change', () => {
+      const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
+      const usernameField = container.querySelector('input#username');
+      fireEvent.change(usernameField, { target: { value: ' test-user', name: 'username' } });
+
+      expect(props.handleChange).toHaveBeenCalledTimes(1);
+      expect(props.handleChange).toHaveBeenCalledWith(
+        { target: { name: 'username', value: 'test-user' } },
+      );
+    });
+
+    it('should not set username if it is more than 30 character long', () => {
+      const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
+
+      const usernameField = container.querySelector('input#username');
+      fireEvent.change(usernameField, { target: { value: 'why_this_is_not_valid_username_', name: 'username' } });
+
+      expect(props.handleChange).toHaveBeenCalledTimes(0);
+    });
+
+    it('should clear username suggestions when username field is focused in', () => {
+      store.dispatch = jest.fn(store.dispatch);
+
+      const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
+
+      const usernameField = container.querySelector('input#username');
+      fireEvent.focus(usernameField);
+
+      expect(store.dispatch).toHaveBeenCalledWith(clearUsernameSuggestions());
+    });
+
+    it('should show username suggestions in case of conflict with an existing username', () => {
+      store = mockStore({
+        ...initialState,
+        register: {
+          ...initialState.register,
+          usernameSuggestions: ['test_1', 'test_12', 'test_123'],
+        },
+      });
+
+      props = {
+        ...props,
+        errorMessage: 'It looks like this username is already taken',
+      };
+
+      const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
+      const usernameSuggestions = container.querySelectorAll('button.username-suggestions--chip');
+      expect(usernameSuggestions.length).toEqual(3);
+    });
+
+    it('should show username suggestions when they are populated in redux', () => {
+      store = mockStore({
+        ...initialState,
+        register: {
+          ...initialState.register,
+          usernameSuggestions: ['test_1', 'test_12', 'test_123'],
+        },
+      });
+
+      props = {
+        ...props,
+        value: ' ',
+      };
+
+      const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
+      const usernameSuggestions = container.querySelectorAll('button.username-suggestions--chip');
+      expect(usernameSuggestions.length).toEqual(3);
+    });
+
+    it('should show username suggestions even if there is an error in field', () => {
+      store = mockStore({
+        ...initialState,
+        register: {
+          ...initialState.register,
+          usernameSuggestions: ['test_1', 'test_12', 'test_123'],
+        },
+      });
+
+      props = {
+        ...props,
+        value: ' ',
+        errorMessage: 'username error',
+      };
+
+      const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
+      const usernameSuggestions = container.querySelectorAll('button.username-suggestions--chip');
+      expect(usernameSuggestions.length).toEqual(3);
+    });
+
+    it('should put space in username field if suggestions are populated in redux', () => {
+      store = mockStore({
+        ...initialState,
+        register: {
+          ...initialState.register,
+          usernameSuggestions: ['test_1', 'test_12', 'test_123'],
+        },
+      });
+
+      render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
+      expect(props.handleChange).toHaveBeenCalledTimes(1);
+      expect(props.handleChange).toHaveBeenCalledWith(
+        { target: { name: 'username', value: ' ' } },
+      );
+    });
+
+    it('should set suggestion as username by clicking on it', () => {
+      store = mockStore({
+        ...initialState,
+        register: {
+          ...initialState.register,
+          usernameSuggestions: ['test_1', 'test_12', 'test_123'],
+        },
+      });
+
+      props = {
+        ...props,
+        value: ' ',
+      };
+
+      const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
+      const usernameSuggestion = container.querySelector('.username-suggestions--chip');
+      fireEvent.click(usernameSuggestion);
+      expect(props.handleChange).toHaveBeenCalledTimes(1);
+      expect(props.handleChange).toHaveBeenCalledWith(
+        { target: { name: 'username', value: 'test_1' } },
+      );
+    });
+
+    it('should clear username suggestions when close icon is clicked', () => {
+      store = mockStore({
+        ...initialState,
+        register: {
+          ...initialState.register,
+          usernameSuggestions: ['test_1', 'test_12', 'test_123'],
+        },
+      });
+      store.dispatch = jest.fn(store.dispatch);
+
+      props = {
+        ...props,
+        value: ' ',
+      };
+
+      const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
+      let closeButton = container.querySelector('button.username-suggestions__close__button');
+      fireEvent.click(closeButton);
+      expect(store.dispatch).toHaveBeenCalledWith(clearUsernameSuggestions());
+
+      props = {
+        ...props,
+        errorMessage: 'username error',
+      };
+
+      render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
+      closeButton = container.querySelector('button.username-suggestions__close__button');
+      fireEvent.click(closeButton);
+      expect(store.dispatch).toHaveBeenCalledWith(clearUsernameSuggestions());
+    });
+
+    it('should clear the registration validation error on focus on field', () => {
+      store.dispatch = jest.fn(store.dispatch);
+
+      const usernameError = 'It looks like this username is already taken';
+      store = mockStore({
+        ...initialState,
+        register: {
+          ...initialState.register,
+          registrationError: {
+            username: [{ userMessage: usernameError }],
+          },
+        },
+      });
+
+      store.dispatch = jest.fn(store.dispatch);
+
+      const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
+
+      const usernameField = container.querySelector('input#username');
+      fireEvent.focus(usernameField, { target: { value: 'test', name: 'username' } });
+
+      expect(store.dispatch).toHaveBeenCalledWith(clearRegistrationBackendError('username'));
+    });
+  });
+});

package/src/register/RegistrationFields/UsernameField/validator.js

@@ -0,0 +1,16 @@
+import messages from '../../messages';
+
+export const VALID_USERNAME_REGEX = /^[a-zA-Z0-9_-]*$/i;
+export const usernameRegex = new RegExp(VALID_USERNAME_REGEX, 'i');
+
+const validateUsername = (value, formatMessage) => {
+  let fieldError = '';
+  if (!value || value.length <= 1 || value.length > 30) {
+    fieldError = formatMessage(messages['username.validation.message']);
+  } else if (!usernameRegex.test(value)) {
+    fieldError = formatMessage(messages['username.format.validation.message']);
+  }
+  return fieldError;
+};
+
+export default validateUsername;

package/src/register/RegistrationFields/index.js

@@ -0,0 +1,6 @@
+export { default as NameField } from './NameField/NameField';
+export { default as EmailField } from './EmailField/EmailField';
+export { default as UsernameField } from './UsernameField/UsernameField';
+export { default as CountryField } from './CountryField/CountryField';
+export { default as HonorCode } from './HonorCodeField/HonorCode';
+export { default as TermsOfService } from './TermsOfServiceField/TermsOfService';