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

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

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

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

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

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

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

@@ -0,0 +1,146 @@
+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/NameField/validator.js

@@ -0,0 +1,22 @@
+import messages from '../../messages';
+
+// regex more focused towards url matching
+export const URL_REGEX = /[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)?/gi; // eslint-disable-line no-useless-escape
+
+// regex for html tags
+export const HTML_REGEX = /<|>/u;
+
+// regex from backend
+export const INVALID_NAME_REGEX = /https?:\/\/(?:[-\w.]|(?:%[\da-fA-F]{2}))*/g;
+
+const validateName = (value, formatMessage) => {
+  let fieldError = '';
+  if (!value.trim()) {
+    fieldError = formatMessage(messages['empty.name.field.error']);
+  } else if (URL_REGEX.test(value) || HTML_REGEX.test(value) || INVALID_NAME_REGEX.test(value)) {
+    fieldError = formatMessage(messages['name.validation.message']);
+  }
+  return fieldError;
+};
+
+export default validateName;

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

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

@@ -0,0 +1,55 @@
+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);
+  });
+});