@openedx/frontend-app-authn 1.0.0-alpha.5 → 1.0.0-alpha.6

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

@@ -1,162 +0,0 @@
-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

@@ -1,319 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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;