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

package/src/register/data/sagas.js

@@ -0,0 +1,58 @@
+import { camelCaseObject, logError, logInfo } from '@openedx/frontend-base';
+import { call, put, takeEvery } from 'redux-saga/effects';
+
+import {
+  fetchRealtimeValidationsBegin,
+  fetchRealtimeValidationsFailure,
+  fetchRealtimeValidationsSuccess,
+  REGISTER_FORM_VALIDATIONS,
+  REGISTER_NEW_USER,
+  registerNewUserBegin,
+  registerNewUserFailure,
+  registerNewUserSuccess,
+} from './actions';
+import { INTERNAL_SERVER_ERROR } from './constants';
+import { getFieldsValidations, registerRequest } from './service';
+
+export function* handleNewUserRegistration(action) {
+  try {
+    yield put(registerNewUserBegin());
+
+    const { authenticatedUser, redirectUrl, success } = yield call(registerRequest, action.payload.registrationInfo);
+
+    yield put(registerNewUserSuccess(
+      camelCaseObject(authenticatedUser),
+      redirectUrl,
+      success,
+    ));
+  } catch (e) {
+    const statusCodes = [400, 403, 409];
+    if (e.response && statusCodes.includes(e.response.status)) {
+      yield put(registerNewUserFailure(camelCaseObject(e.response.data)));
+      logInfo(e);
+    } else {
+      yield put(registerNewUserFailure({ errorCode: INTERNAL_SERVER_ERROR }));
+      logError(e);
+    }
+  }
+}
+
+export function* fetchRealtimeValidations(action) {
+  try {
+    yield put(fetchRealtimeValidationsBegin());
+    const { fieldValidations } = yield call(getFieldsValidations, action.payload.formPayload);
+
+    yield put(fetchRealtimeValidationsSuccess(camelCaseObject(fieldValidations)));
+  } catch (e) {
+    if (e.response && e.response.status === 403) {
+      yield put(fetchRealtimeValidationsFailure());
+      logInfo(e);
+    } else {
+      logError(e);
+    }
+  }
+}
+export default function* saga() {
+  yield takeEvery(REGISTER_NEW_USER.BASE, handleNewUserRegistration);
+  yield takeEvery(REGISTER_FORM_VALIDATIONS.BASE, fetchRealtimeValidations);
+}

package/src/register/data/selectors.js

@@ -0,0 +1,34 @@
+import { createSelector } from 'reselect';
+
+/**
+ * Selector for backend validations which processes the api output and generates a
+ * key value dict for field errors.
+ * @returns {{username: string}|{name: string}|*|{}|null}
+ */
+const getRegistrationError = state => state.register.registrationError;
+const getValidations = state => state.register.validations;
+
+const getBackendValidations = createSelector(
+  [getRegistrationError, getValidations],
+  (registrationError, validations) => {
+    if (validations) {
+      return validations.validationDecisions;
+    }
+
+    if (Object.keys(registrationError).length > 0) {
+      const fields = Object.keys(registrationError).filter(
+        (fieldName) => !(fieldName in ['errorCode', 'usernameSuggestions']),
+      );
+
+      const validationDecisions = {};
+      fields.forEach(field => {
+        validationDecisions[field] = registrationError[field][0].userMessage || '';
+      });
+      return validationDecisions;
+    }
+
+    return null;
+  }
+);
+
+export default getBackendValidations;

package/src/register/data/service.js

@@ -0,0 +1,45 @@
+import { getAuthenticatedHttpClient, getSiteConfig, getHttpClient } from '@openedx/frontend-base';
+import * as QueryString from 'query-string';
+
+export async function registerRequest(registrationInformation) {
+  const requestConfig = {
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    isPublic: true,
+  };
+
+  const { data } = await getAuthenticatedHttpClient()
+    .post(
+      `${getSiteConfig().lmsBaseUrl}/api/user/v2/account/registration/`,
+      QueryString.stringify(registrationInformation),
+      requestConfig,
+    )
+    .catch((e) => {
+      throw (e);
+    });
+
+  return {
+    redirectUrl: data.redirect_url || `${getSiteConfig().lmsBaseUrl}/dashboard`,
+    success: data.success || false,
+    authenticatedUser: data.authenticated_user,
+  };
+}
+
+export async function getFieldsValidations(formPayload) {
+  const requestConfig = {
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+  };
+
+  const { data } = await getHttpClient()
+    .post(
+      `${getSiteConfig().lmsBaseUrl}/api/user/v1/validation/registration`,
+      QueryString.stringify(formPayload),
+      requestConfig,
+    )
+    .catch((e) => {
+      throw (e);
+    });
+
+  return {
+    fieldValidations: data,
+  };
+}

package/src/register/data/tests/reducers.test.js

@@ -0,0 +1,277 @@
+import { getSiteConfig } from '@openedx/frontend-base';
+
+import { DEFAULT_REDIRECT_URL, DEFAULT_STATE, PENDING_STATE } from '../../../data/constants';
+import {
+  BACKUP_REGISTRATION_DATA,
+  REGISTER_CLEAR_USERNAME_SUGGESTIONS,
+  REGISTER_FORM_VALIDATIONS,
+  REGISTER_NEW_USER,
+  REGISTER_SET_COUNTRY_CODE,
+  REGISTER_SET_EMAIL_SUGGESTIONS,
+  REGISTER_SET_USER_PIPELINE_DATA_LOADED,
+  REGISTRATION_CLEAR_BACKEND_ERROR,
+} from '../actions';
+import reducer from '../reducers';
+
+describe('Registration Reducer Tests', () => {
+  const defaultState = {
+    backendCountryCode: '',
+    registrationError: {},
+    registrationResult: {},
+    registrationFormData: {
+      configurableFormFields: {
+        marketingEmailsOptIn: true,
+      },
+      formFields: {
+        name: '', email: '', username: '', password: '',
+      },
+      emailSuggestion: {
+        suggestion: '', type: '',
+      },
+      errors: {
+        name: '', email: '', username: '', password: '',
+      },
+    },
+    validations: null,
+    submitState: DEFAULT_STATE,
+    userPipelineDataLoaded: false,
+    usernameSuggestions: [],
+    validationApiRateLimited: false,
+    shouldBackupState: false,
+  };
+
+  it('should return the initial state', () => {
+    expect(reducer(undefined, {})).toEqual(defaultState);
+  });
+
+  it('should set username suggestions returned by the backend validations', () => {
+    const validations = {
+      usernameSuggestions: ['test12'],
+      validationDecisions: {
+        name: '',
+      },
+    };
+    const { usernameSuggestions, ...validationWithoutUsernameSuggestions } = validations;
+    const action = {
+      type: REGISTER_FORM_VALIDATIONS.SUCCESS,
+      payload: { validations },
+    };
+
+    expect(reducer(defaultState, action)).toEqual(
+      {
+        ...defaultState,
+        usernameSuggestions,
+        validations: validationWithoutUsernameSuggestions,
+      },
+    );
+  });
+
+  it('should set email suggestions', () => {
+    const emailSuggestion = {
+      type: 'test type',
+      suggestion: 'test suggestion',
+    };
+    const action = {
+      type: REGISTER_SET_EMAIL_SUGGESTIONS,
+      payload: { emailSuggestion },
+    };
+
+    expect(reducer(defaultState, action)).toEqual(
+      {
+        ...defaultState,
+        registrationFormData: {
+          ...defaultState.registrationFormData,
+          emailSuggestion: {
+            type: 'test type', suggestion: 'test suggestion',
+          },
+        },
+      }
+    );
+  });
+
+  it('should set redirect url dashboard on registration success action', () => {
+    const payload = {
+      redirectUrl: `${getSiteConfig().baseUrl}${DEFAULT_REDIRECT_URL}`,
+      success: true,
+    };
+    const action = {
+      type: REGISTER_NEW_USER.SUCCESS,
+      payload,
+    };
+
+    expect(reducer(defaultState, action)).toEqual(
+      {
+        ...defaultState,
+        registrationResult: payload,
+      },
+    );
+  });
+
+  it('should set the registration call and set the registration error object empty', () => {
+    const action = {
+      type: REGISTER_NEW_USER.BEGIN,
+    };
+
+    expect(reducer({
+      ...defaultState,
+      registrationError: {
+        email: 'This email already exist.',
+      },
+    }, action)).toEqual(
+      {
+        ...defaultState,
+        submitState: PENDING_STATE,
+        registrationError: {},
+      },
+    );
+  });
+
+  it('should show username suggestions returned by registration error', () => {
+    const payload = { usernameSuggestions: ['test12'] };
+    const action = {
+      type: REGISTER_NEW_USER.FAILURE,
+      payload,
+    };
+
+    expect(reducer(defaultState, action)).toEqual(
+      {
+        ...defaultState,
+        registrationError: payload,
+        usernameSuggestions: payload.usernameSuggestions,
+      },
+    );
+  });
+  it('should set the register user when SSO pipeline data is loaded', () => {
+    const payload = { value: true };
+    const action = {
+      type: REGISTER_SET_USER_PIPELINE_DATA_LOADED,
+      payload,
+    };
+
+    expect(reducer(defaultState, action)).toEqual(
+      {
+        ...defaultState,
+        userPipelineDataLoaded: true,
+      },
+    );
+  });
+
+  it('should set country code on blur', () => {
+    const action = {
+      type: REGISTER_SET_COUNTRY_CODE,
+      payload: { countryCode: 'PK' },
+    };
+
+    expect(reducer({
+      ...defaultState,
+      registrationFormData: {
+        ...defaultState.registrationFormData,
+        configurableFormFields: {
+          ...defaultState.registrationFormData.configurableFormFields,
+          country: {
+            name: 'Pakistan',
+            code: 'PK',
+          },
+        },
+      },
+    }, action)).toEqual(
+      {
+        ...defaultState,
+        registrationFormData: {
+          ...defaultState.registrationFormData,
+          configurableFormFields: {
+            ...defaultState.registrationFormData.configurableFormFields,
+            country: {
+              name: 'Pakistan',
+              code: 'PK',
+            },
+          },
+        },
+      },
+    );
+  });
+  it(' registration api failure when api rate limit hits', () => {
+    const action = {
+      type: REGISTER_FORM_VALIDATIONS.FAILURE,
+    };
+
+    expect(reducer(defaultState, action)).toEqual(
+      {
+        ...defaultState,
+        validationApiRateLimited: true,
+        validations: null,
+      },
+    );
+  });
+  it('should clear username suggestions', () => {
+    const state = {
+      ...defaultState,
+      usernameSuggestions: ['test_1'],
+    };
+    const action = {
+      type: REGISTER_CLEAR_USERNAME_SUGGESTIONS,
+    };
+
+    expect(reducer(state, action)).toEqual({ ...defaultState });
+  });
+
+  it('should take back data during form reset', () => {
+    const state = {
+      ...defaultState,
+      shouldBackupState: true,
+    };
+    const action = {
+      type: BACKUP_REGISTRATION_DATA.BASE,
+    };
+
+    expect(reducer(state, action)).toEqual({
+      ...defaultState,
+      shouldBackupState: true,
+    });
+  });
+
+  it('should not reset username suggestions and fields data during form reset', () => {
+    const state = {
+      ...defaultState,
+      usernameSuggestions: ['test1', 'test2'],
+    };
+    const action = {
+      type: BACKUP_REGISTRATION_DATA.BEGIN,
+      payload: { ...state.registrationFormData },
+    };
+
+    expect(reducer(state, action)).toEqual(state);
+  });
+
+  it('should reset email error field data on focus of email field', () => {
+    const state = {
+      ...defaultState,
+      registrationError: { email: `This email is already associated with an existing or previous ${getSiteConfig().siteName} account` },
+    };
+    const action = {
+      type: REGISTRATION_CLEAR_BACKEND_ERROR,
+      payload: 'email',
+    };
+
+    expect(reducer(state, action)).toEqual({
+      ...state,
+      registrationError: {},
+    });
+  });
+
+  it('should set country code', () => {
+    const countryCode = 'PK';
+
+    const action = {
+      type: REGISTER_SET_COUNTRY_CODE,
+      payload: { countryCode },
+    };
+
+    expect(reducer(defaultState, action)).toEqual(
+      {
+        ...defaultState,
+        backendCountryCode: countryCode,
+      },
+    );
+  });
+});

package/src/register/data/tests/sagas.test.js

@@ -0,0 +1,239 @@
+import { camelCaseObject } from '@openedx/frontend-base';
+import { runSaga } from 'redux-saga';
+
+import { initializeMockServices } from '../../../setupTest';
+import * as actions from '../actions';
+import { FORBIDDEN_REQUEST, INTERNAL_SERVER_ERROR } from '../constants';
+import {
+  fetchRealtimeValidations,
+  handleNewUserRegistration,
+} from '../sagas';
+import * as api from '../service';
+
+const { loggingService } = initializeMockServices();
+
+describe('fetchRealtimeValidations', () => {
+  const params = {
+    payload: {
+      registrationFormData: {
+        email: 'test@test.com',
+        username: '',
+        password: 'test-password',
+        name: 'test-name',
+        honor_code: true,
+        country: 'test-country',
+      },
+    },
+  };
+
+  beforeEach(() => {
+    loggingService.logInfo.mockReset();
+  });
+
+  const data = {
+    validationDecisions: {
+      username: 'Username must be between 2 and 30 characters long.',
+    },
+  };
+
+  it('should call service and dispatch success action', async () => {
+    const getFieldsValidations = jest.spyOn(api, 'getFieldsValidations')
+      .mockImplementation(() => Promise.resolve({ fieldValidations: data }));
+
+    const dispatched = [];
+    await runSaga(
+      { dispatch: (action) => dispatched.push(action) },
+      fetchRealtimeValidations,
+      params,
+    );
+
+    expect(getFieldsValidations).toHaveBeenCalledTimes(1);
+    expect(dispatched).toEqual([
+      actions.fetchRealtimeValidationsBegin(),
+      actions.fetchRealtimeValidationsSuccess(data),
+    ]);
+    getFieldsValidations.mockClear();
+  });
+
+  it('should call service and dispatch error action', async () => {
+    const validationRatelimitResponse = {
+      response: {
+        status: 403,
+        data: {
+          detail: 'You do not have permission to perform this action.',
+        },
+      },
+    };
+    const getFieldsValidations = jest.spyOn(api, 'getFieldsValidations')
+      .mockImplementation(() => Promise.reject(validationRatelimitResponse));
+
+    const dispatched = [];
+    await runSaga(
+      { dispatch: (action) => dispatched.push(action) },
+      fetchRealtimeValidations,
+      params,
+    );
+
+    expect(getFieldsValidations).toHaveBeenCalledTimes(1);
+    expect(loggingService.logInfo).toHaveBeenCalled();
+    expect(dispatched).toEqual([
+      actions.fetchRealtimeValidationsBegin(),
+      actions.fetchRealtimeValidationsFailure(
+        validationRatelimitResponse.response.data,
+        validationRatelimitResponse.response.status,
+      ),
+    ]);
+    getFieldsValidations.mockClear();
+  });
+
+  it('should call logError on 500 server error', async () => {
+    const validationRatelimitResponse = {
+      response: {
+        status: 500,
+        data: {},
+      },
+    };
+    const getFieldsValidations = jest.spyOn(api, 'getFieldsValidations')
+      .mockImplementation(() => Promise.reject(validationRatelimitResponse));
+
+    const dispatched = [];
+    await runSaga(
+      { dispatch: (action) => dispatched.push(action) },
+      fetchRealtimeValidations,
+      params,
+    );
+
+    expect(getFieldsValidations).toHaveBeenCalledTimes(1);
+    expect(loggingService.logError).toHaveBeenCalled();
+    getFieldsValidations.mockClear();
+  });
+});
+
+describe('handleNewUserRegistration', () => {
+  const params = {
+    payload: {
+      registrationFormData: {
+        email: 'test@test.com',
+        username: 'test-username',
+        password: 'test-password',
+        name: 'test-name',
+        honor_code: true,
+        country: 'test-country',
+      },
+    },
+  };
+
+  beforeEach(() => {
+    loggingService.logError.mockReset();
+    loggingService.logInfo.mockReset();
+  });
+
+  it('should call service and dispatch success action', async () => {
+    const authenticatedUser = { username: 'test', user_id: 123 };
+    const data = {
+      redirectUrl: '/dashboard',
+      success: true,
+      authenticatedUser,
+    };
+    const registerRequest = jest.spyOn(api, 'registerRequest')
+      .mockImplementation(() => Promise.resolve(data));
+
+    const dispatched = [];
+    await runSaga(
+      { dispatch: (action) => dispatched.push(action) },
+      handleNewUserRegistration,
+      params,
+    );
+
+    expect(registerRequest).toHaveBeenCalledTimes(1);
+    expect(dispatched).toEqual([
+      actions.registerNewUserBegin(),
+      actions.registerNewUserSuccess(camelCaseObject(authenticatedUser), data.redirectUrl, data.success),
+    ]);
+    registerRequest.mockClear();
+  });
+
+  it('should handle 500 error code', async () => {
+    const registerErrorResponse = {
+      response: {
+        status: 500,
+        data: {
+          errorCode: INTERNAL_SERVER_ERROR,
+        },
+      },
+    };
+
+    const registerRequest = jest.spyOn(api, 'registerRequest').mockImplementation(() => Promise.reject(registerErrorResponse));
+
+    const dispatched = [];
+    await runSaga(
+      { dispatch: (action) => dispatched.push(action) },
+      handleNewUserRegistration,
+      params,
+    );
+
+    expect(loggingService.logError).toHaveBeenCalled();
+    expect(dispatched).toEqual([
+      actions.registerNewUserBegin(),
+      actions.registerNewUserFailure(camelCaseObject(registerErrorResponse.response.data)),
+    ]);
+    registerRequest.mockClear();
+  });
+
+  it('should call service and dispatch error action', async () => {
+    const registerErrorResponse = {
+      response: {
+        status: 400,
+        data: {
+          error: 'something went wrong',
+        },
+      },
+    };
+    const registerRequest = jest.spyOn(api, 'registerRequest')
+      .mockImplementation(() => Promise.reject(registerErrorResponse));
+
+    const dispatched = [];
+    await runSaga(
+      { dispatch: (action) => dispatched.push(action) },
+      handleNewUserRegistration,
+      params,
+    );
+
+    expect(registerRequest).toHaveBeenCalledTimes(1);
+    expect(loggingService.logInfo).toHaveBeenCalled();
+    expect(dispatched).toEqual([
+      actions.registerNewUserBegin(),
+      actions.registerNewUserFailure(registerErrorResponse.response.data),
+    ]);
+    registerRequest.mockClear();
+  });
+
+  it('should handle rate limit error code', async () => {
+    const registerErrorResponse = {
+      response: {
+        status: 403,
+        data: {
+          errorCode: FORBIDDEN_REQUEST,
+        },
+      },
+    };
+
+    const registerRequest = jest.spyOn(api, 'registerRequest')
+      .mockImplementation(() => Promise.reject(registerErrorResponse));
+
+    const dispatched = [];
+    await runSaga(
+      { dispatch: (action) => dispatched.push(action) },
+      handleNewUserRegistration,
+      params,
+    );
+
+    expect(registerRequest).toHaveBeenCalledTimes(1);
+    expect(loggingService.logInfo).toHaveBeenCalled();
+    expect(dispatched).toEqual([
+      actions.registerNewUserBegin(),
+      actions.registerNewUserFailure(registerErrorResponse.response.data),
+    ]);
+    registerRequest.mockClear();
+  });
+});