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

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

@@ -1,126 +0,0 @@
-import { distance } from 'fastest-levenshtein';
-
-import { VALID_EMAIL_REGEX } from '../../../data/constants';
-import messages from '../../messages';
-import {
-  COMMON_EMAIL_PROVIDERS,
-  DEFAULT_SERVICE_PROVIDER_DOMAINS,
-  DEFAULT_TOP_LEVEL_DOMAINS,
-} from './constants';
-
-export const emailRegex = new RegExp(VALID_EMAIL_REGEX, 'i');
-
-export const getLevenshteinSuggestion = (word, knownWords, similarityThreshold = 4) => {
-  if (!word) {
-    return null;
-  }
-
-  let minEditDistance = 100;
-  let mostSimilar = word;
-
-  for (const knownWord of knownWords) {
-    const editDistance = distance(knownWord.toLowerCase(), word.toLowerCase());
-    if (editDistance < minEditDistance) {
-      minEditDistance = editDistance;
-      mostSimilar = knownWord;
-    }
-  }
-
-  return minEditDistance <= similarityThreshold && word !== mostSimilar ? mostSimilar : null;
-};
-
-export const getSuggestionForInvalidEmail = (domain, username) => {
-  if (!domain) {
-    return '';
-  }
-
-  const defaultDomains = ['yahoo', 'aol', 'hotmail', 'live', 'outlook', 'gmail'];
-  const suggestion = getLevenshteinSuggestion(domain, COMMON_EMAIL_PROVIDERS);
-
-  if (suggestion) {
-    return `${username}@${suggestion}`;
-  }
-
-  for (const defaultDomain of defaultDomains) {
-    if (domain.includes(defaultDomain)) {
-      return `${username}@${defaultDomain}.com`;
-    }
-  }
-
-  return '';
-};
-
-export const validateEmailAddress = (value, username, domainName) => {
-  let suggestion = null;
-  const validation = {
-    hasError: false,
-    suggestion: '',
-    type: '',
-  };
-
-  const hasMultipleSubdomains = value.match(/\./g).length > 1;
-  const [serviceLevelDomain, topLevelDomain] = domainName.split('.');
-  const tldSuggestion = !DEFAULT_TOP_LEVEL_DOMAINS.includes(topLevelDomain);
-  const serviceSuggestion = getLevenshteinSuggestion(serviceLevelDomain, DEFAULT_SERVICE_PROVIDER_DOMAINS, 2);
-
-  if (DEFAULT_SERVICE_PROVIDER_DOMAINS.includes(serviceSuggestion || serviceLevelDomain)) {
-    suggestion = `${username}@${serviceSuggestion || serviceLevelDomain}.com`;
-  }
-
-  if (!hasMultipleSubdomains && tldSuggestion) {
-    validation.suggestion = suggestion;
-    validation.type = 'error';
-  } else if (serviceSuggestion) {
-    validation.suggestion = suggestion;
-    validation.type = 'warning';
-  } else {
-    suggestion = getLevenshteinSuggestion(domainName, COMMON_EMAIL_PROVIDERS, 3);
-    if (suggestion) {
-      validation.suggestion = `${username}@${suggestion}`;
-      validation.type = 'warning';
-    }
-  }
-
-  if (!hasMultipleSubdomains && tldSuggestion) {
-    validation.hasError = true;
-  }
-
-  return validation;
-};
-
-const validateEmail = (value, confirmEmailValue, formatMessage) => {
-  let fieldError = '';
-  let confirmEmailError = '';
-  let emailSuggestion = { suggestion: '', type: '' };
-
-  if (!value) {
-    fieldError = formatMessage(messages['empty.email.field.error']);
-  } else if (value.length <= 2) {
-    fieldError = formatMessage(messages['email.invalid.format.error']);
-  } else {
-    const [username, domainName] = value.split('@');
-    // Check if email address is invalid. If we have a suggestion for invalid email
-    // provide that along with the error message.
-    if (!emailRegex.test(value)) {
-      fieldError = formatMessage(messages['email.invalid.format.error']);
-      emailSuggestion = {
-        suggestion: getSuggestionForInvalidEmail(domainName, username),
-        type: 'error',
-      };
-    } else {
-      const response = validateEmailAddress(value, username, domainName);
-      if (response.hasError) {
-        fieldError = formatMessage(messages['email.invalid.format.error']);
-        delete response.hasError;
-      }
-      emailSuggestion = { ...response };
-
-      if (confirmEmailValue && value !== confirmEmailValue) {
-        confirmEmailError = formatMessage(messages['email.do.not.match']);
-      }
-    }
-  }
-  return { fieldError, confirmEmailError, suggestion: emailSuggestion };
-};
-
-export default validateEmail;

package/src/register/RegistrationFields/EmailField/validator.test.js

@@ -1,39 +0,0 @@
-import { COMMON_EMAIL_PROVIDERS } from './constants';
-import {
-  getLevenshteinSuggestion,
-  getSuggestionForInvalidEmail,
-} from './validator';
-
-describe('Email Validators Utils', () => {
-  describe('getLevenshteinSuggestion Tests', () => {
-    it('test getLevenshteinSuggestion returns null for invalid word', () => {
-      const output = getLevenshteinSuggestion('', COMMON_EMAIL_PROVIDERS);
-      expect(output).toEqual(null);
-    });
-
-    it('test getLevenshteinSuggestion returns output for valid word', () => {
-      const output = getLevenshteinSuggestion('gmail', COMMON_EMAIL_PROVIDERS);
-      expect(output).toEqual('gmail.com');
-    });
-  });
-  describe('getSuggestionForInvalidEmail Tests', () => {
-    it('test getSuggestionForInvalidEmail returns empty string for invalid domain', () => {
-      const output = getSuggestionForInvalidEmail('', 'username');
-      expect(output).toEqual('');
-    });
-
-    it('test getSuggestionForInvalidEmail returns valid suggestion when domain is nearly matched', () => {
-      const output = getSuggestionForInvalidEmail('gmail', 'username');
-      expect(output).toEqual('username@gmail.com');
-    });
-
-    it('test getSuggestionForInvalidEmail returns valid suggestion for default domains', () => {
-      const output = getSuggestionForInvalidEmail('aol', 'username');
-      expect(output).toEqual('username@aol.com');
-    });
-    it('test getSuggestionForInvalidEmail returns empty for totally different domain', () => {
-      const output = getSuggestionForInvalidEmail('invalid-domain', 'username');
-      expect(output).toEqual('');
-    });
-  });
-});

package/src/register/RegistrationFields/HonorCodeField/HonorCode.jsx

@@ -1,104 +0,0 @@
-import { useEffect } from 'react';
-
-import { FormattedMessage, useAppConfig, getSiteConfig, useIntl } from '@openedx/frontend-base';
-import { Form, Hyperlink } from '@openedx/paragon';
-import PropTypes from 'prop-types';
-
-import messages from '../../messages';
-
-const HonorCode = (props) => {
-  const { formatMessage } = useIntl();
-  const {
-    errorMessage, onChangeHandler, fieldType, value,
-  } = props;
-
-  useEffect(() => {
-    if (fieldType === 'tos_and_honor_code' && !value) {
-      onChangeHandler({ target: { name: 'honor_code', value: true } });
-    }
-  }, [fieldType, onChangeHandler, value]);
-
-  if (fieldType === 'tos_and_honor_code') {
-    return (
-      <div id="honor-code" className="micro text-muted mt-4">
-        <FormattedMessage
-          id="register.page.terms.of.service.and.honor.code"
-          defaultMessage="By creating an account, you agree to the {tosAndHonorCode} and you acknowledge that {platformName} and each
-                Member process your personal data in accordance with the {privacyPolicy}."
-          description="Text that appears on registration form stating honor code and privacy policy"
-          values={{
-            platformName: getSiteConfig().siteName,
-            tosAndHonorCode: (
-              <Hyperlink
-                className="inline-link"
-                destination={useAppConfig().TOS_AND_HONOR_CODE || '#'}
-                target="_blank"
-                showLaunchIcon={false}
-              >
-                {formatMessage(messages['terms.of.service.and.honor.code'])}
-              </Hyperlink>
-            ),
-            privacyPolicy: (
-              <Hyperlink
-                className="inline-link"
-                destination={useAppConfig().PRIVACY_POLICY || '#'}
-                target="_blank"
-                showLaunchIcon={false}
-              >
-                {formatMessage(messages['privacy.policy'])}
-              </Hyperlink>
-            ),
-          }}
-        />
-      </div>
-    );
-  }
-
-  return (
-    <div id="honor-code" className="micro text-muted">
-      <Form.Checkbox
-        className="form-field--checkbox mt-1"
-        id="honor-code"
-        checked={value}
-        name="honor_code"
-        value={value}
-        onChange={onChangeHandler}
-      >
-        <FormattedMessage
-          id="register.page.honor.code"
-          defaultMessage="I agree to the {platformName}&nbsp;{tosAndHonorCode}"
-          description="Text that appears on registration form stating honor code"
-          values={{
-            platformName: getSiteConfig().siteName,
-            tosAndHonorCode: (
-              <Hyperlink variant="muted" destination={useAppConfig().TOS_AND_HONOR_CODE || '#'} target="_blank">
-                {formatMessage(messages['honor.code'])}
-              </Hyperlink>
-            ),
-          }}
-        />
-      </Form.Checkbox>
-      {errorMessage && (
-        <Form.Control.Feedback type="invalid" className="form-text-size" hasIcon={false}>
-          {errorMessage}
-        </Form.Control.Feedback>
-      )}
-    </div>
-  );
-};
-
-HonorCode.defaultProps = {
-  errorMessage: '',
-  onChangeHandler: null,
-  fieldType: 'honor_code',
-  value: false,
-};
-
-HonorCode.propTypes = {
-  errorMessage: PropTypes.string,
-  onChangeHandler: PropTypes.func,
-  fieldType: PropTypes.string,
-  value: PropTypes.bool,
-};
-
-export default HonorCode;

package/src/register/RegistrationFields/HonorCodeField/HonorCode.test.jsx

@@ -1,70 +0,0 @@
-import {
-  CurrentAppProvider, getSiteConfig, injectIntl, IntlProvider, mergeAppConfig
-} from '@openedx/frontend-base';
-import { render } from '@testing-library/react';
-
-import { appId } from '../../../constants';
-import { HonorCode } from '../index';
-
-const IntlHonorCode = injectIntl(HonorCode);
-
-const providerWrapper = children => (
-  <IntlProvider locale="en">
-    <CurrentAppProvider appId={appId}>
-      {children}
-    </CurrentAppProvider>
-  </IntlProvider>
-);
-
-describe('HonorCodeTest', () => {
-  mergeAppConfig(appId, {
-    PRIVACY_POLICY: 'http://privacy-policy.com',
-    TOS_AND_HONOR_CODE: 'http://tos-and-honot-code.com',
-  });
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  let value = false;
-
-  const changeHandler = (e) => {
-    value = e.target.checked;
-  };
-
-  beforeEach(() => {
-    value = false;
-  });
-
-  it('should render error msg if honor code is not checked', () => {
-    const errorMessage = `You must agree to the ${getSiteConfig().siteName} Honor Code`;
-    const { container } = render(providerWrapper(
-      <IntlHonorCode
-        errorMessage={errorMessage}
-        onChangeHandler={changeHandler}
-      />
-    ));
-    const errorElement = container.querySelector('.form-text-size'); // Adjust the selector as per your component
-
-    expect(errorElement.textContent).toEqual(errorMessage);
-  });
-
-  it('should render Honor code field', () => {
-    const expectedMsg = `I agree to the ${getSiteConfig().siteName}\u00a0Honor Codein a new tab`;
-    const { container } = render(providerWrapper(
-      <IntlHonorCode onChangeHandler={changeHandler} />
-    ));
-
-    const honorCodeField = container.querySelector('#honor-code');
-    honorCodeField.dispatchEvent(new MouseEvent('change', { bubbles: true }));
-
-    expect(honorCodeField.querySelector('label').textContent).toEqual(expectedMsg);
-  });
-
-  it('should render Terms of Service and Honor code field', () => {
-    const { container } = render(providerWrapper(
-      <IntlHonorCode fieldType="tos_and_honor_code" onChangeHandler={changeHandler} />
-    ));
-    const expectedMsg = 'By creating an account, you agree to the Terms of Service and Honor Code and you '
-      + `acknowledge that ${getSiteConfig().siteName} and each Member process your personal data in `
-      + 'accordance with the Privacy Policy.';
-    const honorCodeField = container.querySelector('#honor-code');
-    expect(honorCodeField.textContent).toEqual(expectedMsg);
-  });
-});

package/src/register/RegistrationFields/NameField/NameField.jsx

@@ -1,68 +0,0 @@
-import { useDispatch, useSelector } from 'react-redux';
-
-import { useIntl } from '@openedx/frontend-base';
-import PropTypes from 'prop-types';
-
-import { FormGroup } from '../../../common-components';
-import { clearRegistrationBackendError, fetchRealtimeValidations } from '../../data/actions';
-import validateName from './validator';
-
-/**
- * Name field wrapper. It accepts following handlers
- * - handleChange for setting value change and
- * - handleErrorChange for setting error
- *
- * It is responsible for
- * - Making backend call for generating username suggestions
- * - Performing name field validations
- * - Clearing error on focus
- * - Setting value on change
- */
-const NameField = (props) => {
-  const { formatMessage } = useIntl();
-  const dispatch = useDispatch();
-  const validationApiRateLimited = useSelector(state => state.register.validationApiRateLimited);
-
-  const {
-    handleErrorChange,
-    shouldFetchUsernameSuggestions,
-  } = props;
-
-  const handleOnBlur = (e) => {
-    const { value } = e.target;
-    const fieldError = validateName(value, formatMessage);
-    if (fieldError) {
-      handleErrorChange('name', fieldError);
-    } else if (shouldFetchUsernameSuggestions && !validationApiRateLimited) {
-      dispatch(fetchRealtimeValidations({ name: value }));
-    }
-  };
-
-  const handleOnFocus = () => {
-    handleErrorChange('name', '');
-    dispatch(clearRegistrationBackendError('name'));
-  };
-
-  return (
-    <FormGroup
-      {...props}
-      handleBlur={handleOnBlur}
-      handleFocus={handleOnFocus}
-    />
-  );
-};
-
-NameField.defaultProps = {
-  errorMessage: '',
-  shouldFetchUsernameSuggestions: false,
-};
-
-NameField.propTypes = {
-  errorMessage: PropTypes.string,
-  shouldFetchUsernameSuggestions: PropTypes.bool,
-  value: PropTypes.string.isRequired,
-  handleChange: PropTypes.func.isRequired,
-  handleErrorChange: PropTypes.func.isRequired,
-};
-
-export default NameField;

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

@@ -1,146 +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, fetchRealtimeValidations } from '../../data/actions';
-import { NameField } from '../index';
-
-const IntlNameField = injectIntl(NameField);
-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('NameField', () => {
-  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: {},
-  };
-
-  beforeEach(() => {
-    store = mockStore(initialState);
-    props = {
-      name: 'name',
-      value: '',
-      errorMessage: '',
-      handleChange: jest.fn(),
-      handleErrorChange: jest.fn(),
-      floatingLabel: '',
-    };
-    window.location = { search: '' };
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
-  describe('Test Name Field', () => {
-    const fieldValidation = { name: 'Enter your full name' };
-
-    it('should run name field validation when onBlur is fired', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<IntlNameField {...props} />)));
-
-      const nameInput = container.querySelector('input#name');
-      fireEvent.blur(nameInput, { target: { value: '', name: 'name' } });
-
-      expect(props.handleErrorChange).toHaveBeenCalledTimes(1);
-      expect(props.handleErrorChange).toHaveBeenCalledWith(
-        'name',
-        fieldValidation.name,
-      );
-    });
-
-    it('should update errors for frontend validations', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<IntlNameField {...props} />)));
-
-      const nameInput = container.querySelector('input#name');
-      fireEvent.blur(nameInput, { target: { value: 'https://invalid-name.com', name: 'name' } });
-
-      expect(props.handleErrorChange).toHaveBeenCalledTimes(1);
-      expect(props.handleErrorChange).toHaveBeenCalledWith(
-        'name',
-        'Enter a valid name',
-      );
-    });
-
-    it('should clear error on focus', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<IntlNameField {...props} />)));
-
-      const nameInput = container.querySelector('input#name');
-      fireEvent.focus(nameInput, { target: { value: '', name: 'name' } });
-
-      expect(props.handleErrorChange).toHaveBeenCalledTimes(1);
-      expect(props.handleErrorChange).toHaveBeenCalledWith(
-        'name',
-        '',
-      );
-    });
-
-    it('should call backend validation api on blur event, if frontend validations have passed', () => {
-      store.dispatch = jest.fn(store.dispatch);
-      props = {
-        ...props,
-        shouldFetchUsernameSuggestions: true,
-      };
-      const { container } = render(routerWrapper(reduxWrapper(<IntlNameField {...props} />)));
-
-      const nameInput = container.querySelector('input#name');
-      // Enter a valid name so that frontend validations are passed
-      fireEvent.blur(nameInput, { target: { value: 'test', name: 'name' } });
-
-      expect(store.dispatch).toHaveBeenCalledWith(fetchRealtimeValidations({ name: 'test' }));
-    });
-
-    it('should clear the registration validation error on focus on field', () => {
-      const nameError = 'temp error';
-      store = mockStore({
-        ...initialState,
-        register: {
-          ...initialState.register,
-          registrationError: {
-            name: [{ userMessage: nameError }],
-          },
-        },
-      });
-
-      store.dispatch = jest.fn(store.dispatch);
-      const { container } = render(routerWrapper(reduxWrapper(<IntlNameField {...props} />)));
-
-      const nameInput = container.querySelector('input#name');
-
-      fireEvent.focus(nameInput, { target: { value: 'test', name: 'name' } });
-
-      expect(store.dispatch).toHaveBeenCalledWith(clearRegistrationBackendError('name'));
-    });
-  });
-});

package/src/register/RegistrationFields/TermsOfServiceField/TermsOfService.jsx

@@ -1,58 +0,0 @@
-import { FormattedMessage, useAppConfig, getSiteConfig, useIntl } from '@openedx/frontend-base';
-import { Form, Hyperlink } from '@openedx/paragon';
-import PropTypes from 'prop-types';
-
-import messages from '../../messages';
-
-const TermsOfService = (props) => {
-  const { formatMessage } = useIntl();
-  const {
-    errorMessage, onChangeHandler, value,
-  } = props;
-
-  return (
-    <div id="terms-of-service" className="micro text-muted">
-      <Form.Checkbox
-        className="form-field--checkbox mt-1"
-        id="tos"
-        checked={value}
-        name="terms_of_service"
-        value={value}
-        onChange={onChangeHandler}
-      >
-        <FormattedMessage
-          id="register.page.terms.of.service"
-          defaultMessage="I agree to the {platformName}&nbsp;{termsOfService}"
-          description="Text that appears on registration form stating terms of service.
-                       It is a legal document that users must agree to."
-          values={{
-            platformName: getSiteConfig().siteName,
-            termsOfService: (
-              <Hyperlink variant="muted" destination={useAppConfig().TOS_LINK || '#'} target="_blank">
-                {formatMessage(messages['terms.of.service'])}
-              </Hyperlink>
-            ),
-          }}
-        />
-      </Form.Checkbox>
-      {errorMessage && (
-        <Form.Control.Feedback type="invalid" className="form-text-size" hasIcon={false}>
-          {errorMessage}
-        </Form.Control.Feedback>
-      )}
-    </div>
-  );
-};
-
-TermsOfService.defaultProps = {
-  errorMessage: '',
-  value: false,
-};
-
-TermsOfService.propTypes = {
-  errorMessage: PropTypes.string,
-  onChangeHandler: PropTypes.func.isRequired,
-  value: PropTypes.bool,
-};
-
-export default TermsOfService;

package/src/register/RegistrationFields/TermsOfServiceField/TermsOfService.test.jsx

@@ -1,55 +0,0 @@
-import { getSiteConfig, injectIntl, IntlProvider } from '@openedx/frontend-base';
-import { fireEvent, render } from '@testing-library/react';
-
-import { TermsOfService } from '../index';
-
-const IntlTermsOfService = injectIntl(TermsOfService);
-
-describe('TermsOfServiceTest', () => {
-  let value = false;
-
-  const changeHandler = (e) => {
-    value = e.target.checked;
-  };
-
-  beforeEach(() => {
-    value = false;
-  });
-
-  it('should render error msg if Terms of Service checkbox is not checked', () => {
-    const errorMessage = `You must agree to the ${getSiteConfig().siteName} Terms of Service`;
-    const { container } = render(
-      <IntlProvider locale="en">
-        <IntlTermsOfService errorMessage={errorMessage} onChangeHandler={changeHandler} />
-      </IntlProvider>,
-    );
-    const errorElement = container.querySelector('.form-text-size');
-    expect(errorElement.textContent).toEqual(errorMessage);
-  });
-
-  it('should render Terms of Service field', () => {
-    const { container } = render(
-      <IntlProvider locale="en">
-        <IntlTermsOfService onChangeHandler={changeHandler} />
-      </IntlProvider>,
-    );
-
-    const expectedMsg = `I agree to the ${getSiteConfig().siteName}\u00a0Terms of Servicein a new tab`;
-
-    const termsOfServiceLabel = container.querySelector('#terms-of-service label');
-    expect(termsOfServiceLabel.textContent).toEqual(expectedMsg);
-
-    expect(value).toEqual(false);
-  });
-
-  it('should change value when Terms of Service field is checked', () => {
-    const { container } = render(
-      <IntlProvider locale="en">
-        <IntlTermsOfService onChangeHandler={changeHandler} />
-      </IntlProvider>,
-    );
-    const field = container.querySelector('input#tos');
-    fireEvent.click(field);
-    expect(value).toEqual(true);
-  });
-});