react-morning 0.0.1-security → 1.0.9

package/src/components/ReactComponent.jsx

@@ -0,0 +1,189 @@
+import {Formio} from 'formiojs';
+const Field = Formio.Components.components.field;
+
+export default class ReactComponent extends Field {
+  /**
+   * This is the first phase of component building where the component is instantiated.
+   *
+   * @param component - The component definition created from the settings form.
+   * @param options - Any options passed into the renderer.
+   * @param data - The submission data where this component's data exists.
+   */
+  constructor(component, options, data) {
+    super(component, options, data);
+    this.reactInstance = null;
+  }
+
+  /**
+   * This method is called any time the component needs to be rebuilt. It is most frequently used to listen to other
+   * components using the this.on() function.
+   */
+  init() {
+    return super.init();
+  }
+
+  /**
+   * This method is called before the component is going to be destroyed, which is when the component instance is
+   * destroyed. This is different from detach which is when the component instance still exists but the dom instance is
+   * removed.
+   */
+  destroy() {
+    return super.destroy();
+  }
+  /**
+   * This method is called before a form is submitted.
+   * It is used to perform any necessary actions or checks before the form data is sent.
+   *
+   */
+
+  beforeSubmit() {
+    return super.beforeSubmit();
+  }
+
+  /**
+   * The second phase of component building where the component is rendered as an HTML string.
+   *
+   * @returns {string} - The return is the full string of the component
+   */
+  render() {
+    // For react components, we simply render as a div which will become the react instance.
+    // By calling super.render(string) it will wrap the component with the needed wrappers to make it a full component.
+    return super.render(`<div ref="react-${this.id}"></div>`);
+  }
+
+  /**
+   * Callback ref to store a reference to the node.
+   *
+   * @param element - the node
+   */
+  setReactInstance(element) {
+    this.reactInstance = element;
+  }
+
+  /**
+   * The third phase of component building where the component has been attached to the DOM as 'element' and is ready
+   * to have its javascript events attached.
+   *
+   * @param element
+   * @returns {Promise<void>} - Return a promise that resolves when the attach is complete.
+   */
+  attach(element) {
+    super.attach(element);
+
+    // The loadRefs function will find all dom elements that have the "ref" setting that match the object property.
+    // It can load a single element or multiple elements with the same ref.
+    this.loadRefs(element, {
+      [`react-${this.id}`]: 'single',
+    });
+
+    if (this.refs[`react-${this.id}`]) {
+      this.attachReact(this.refs[`react-${this.id}`], this.setReactInstance.bind(this));
+      if (this.shouldSetValue) {
+        this.setValue(this.dataForSetting);
+        this.updateValue(this.dataForSetting);
+      }
+    }
+    return Promise.resolve();
+  }
+
+  /**
+   * The fourth phase of component building where the component is being removed from the page. This could be a redraw
+   * or it is being removed from the form.
+   */
+  detach() {
+    if (this.refs[`react-${this.id}`]) {
+      this.detachReact(this.refs[`react-${this.id}`]);
+    }
+    super.detach();
+  }
+
+  /**
+   * Override this function to insert your custom component.
+   *
+   * @param element
+   * @param ref - callback ref
+   */
+  attachReact(element, ref) {
+    return;
+  }
+
+  /**
+   * Override this function.
+   */
+  detachReact(element) {
+    return;
+  }
+
+  /**
+   * Something external has set a value and our component needs to be updated to reflect that. For example, loading a submission.
+   *
+   * @param value
+   */
+  setValue(value) {
+    if (this.reactInstance) {
+      this.reactInstance.setState({
+        value: value
+      });
+      this.shouldSetValue = false;
+    }
+    else {
+      this.shouldSetValue = true;
+      this.dataForSetting = value;
+    }
+  }
+
+  /**
+   * The user has changed the value in the component and the value needs to be updated on the main submission object and other components notified of a change event.
+   *
+   * @param value
+   */
+  updateValue = (value, flags) => {
+    flags = flags || {};
+    const newValue = value === undefined || value === null ? this.getValue() : value;
+    const changed = (newValue !== undefined) ? this.hasChanged(newValue, this.dataValue) : false;
+    this.dataValue = Array.isArray(newValue) ? [...newValue] : newValue;
+
+    this.updateOnChange(flags, changed);
+    return changed;
+  }
+
+  /**
+   * Get the current value of the component. Should return the value set in the react component.
+   *
+   * @returns {*}
+   */
+  getValue() {
+    if (this.reactInstance) {
+      return this.reactInstance.state.value;
+    }
+    return this.defaultValue;
+  }
+
+  /**
+   * Override normal validation check to insert custom validation in react component.
+   *
+   * @param data
+   * @param dirty
+   * @param rowData
+   * @returns {boolean}
+   */
+  checkValidity(data, dirty, rowData) {
+    const valid = super.checkValidity(data, dirty, rowData);
+    if (!valid) {
+      return false;
+    }
+    return this.validate(data, dirty, rowData);
+  }
+
+  /**
+   * Do custom validation.
+   *
+   * @param data
+   * @param dirty
+   * @param rowData
+   * @returns {boolean}
+   */
+  validate(data, dirty, rowData) {
+    return true;
+  }
+}

package/src/components/SubmissionGrid.jsx

@@ -0,0 +1,249 @@
+import {Utils as FormioUtils} from 'formiojs';
+import _get from 'lodash/get';
+import _isFunction from 'lodash/isFunction';
+import _isObject from 'lodash/isObject';
+import _isString from 'lodash/isString';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import {defaultPageSizes} from '../constants';
+import {
+  Columns,
+  Operations,
+  PageSizes,
+} from '../types';
+import {
+  getComponentDefaultColumn,
+  setColumnsWidth,
+  stopPropagationWrapper,
+} from '../utils';
+
+import Grid from './Grid';
+
+const SubmissionGrid = (props) => {
+  const getSortQuery = (key, sort) => {
+    const {
+      submissions: {
+        sort: currentSort,
+      },
+    } = props;
+
+    const sortKey = _isString(sort) ? sort : key;
+    const ascSort = sortKey;
+    const descSort = `-${sortKey}`;
+    const noSort = '';
+
+    if (currentSort === ascSort) {
+      return descSort;
+    }
+    else if (currentSort === descSort) {
+      return noSort;
+    }
+    else {
+      return ascSort;
+    }
+  };
+
+  const onSort = ({
+    key,
+    sort,
+  }) => {
+    if (_isFunction(sort)) {
+      return sort();
+    }
+
+    const {getSubmissions} = props;
+
+    getSubmissions(1, {
+      sort: getSortQuery(key, sort),
+    });
+  };
+
+  const getColumns = (form) => {
+    const columns = [];
+
+    FormioUtils.eachComponent(form.components, (component) => {
+      if (component.input && component.tableView && component.key) {
+        columns.push(getComponentDefaultColumn(component));
+      }
+    });
+
+    columns.push({
+      key: 'operations',
+      title: 'Operations',
+    });
+
+    setColumnsWidth(columns);
+
+    return columns;
+  };
+
+  const Icon = ({icon}) => (
+    <span>
+      <i className={`fa fa-${icon}`} />&nbsp;
+    </span>
+  );
+
+  const OperationButton = ({
+    action,
+    buttonType,
+    icon,
+    title,
+    onAction,
+    submission
+  }) => (
+    <span
+      className={`btn btn-${buttonType} btn-sm form-btn`}
+      onClick={stopPropagationWrapper(() => onAction(submission, action))}
+    >
+      {
+        icon
+          ? <Icon icon={icon}></Icon>
+          : null
+      }
+      {title}
+    </span>
+  );
+
+  const Cell = ({
+    row: submission,
+    column,
+  }) => {
+    const {
+      form,
+      onAction,
+      operations,
+    } = props;
+
+    if (column.key === 'operations') {
+      return (
+        <div>
+          {
+            operations.map(({
+              action,
+              buttonType = 'primary',
+              icon = '',
+              permissionsResolver = () => true,
+              title = '',
+            }) =>
+              permissionsResolver(form, submission)
+                ? <OperationButton
+                    key={action}
+                    action={action}
+                    buttonType={buttonType}
+                    icon={icon}
+                    title={title}
+                    submission={submission}
+                    onAction={onAction}
+                  ></OperationButton>
+                : null
+            )
+          }
+        </div>
+      );
+    }
+
+    const value = _isFunction(column.value)
+      ? column.value(submission)
+      : _get(submission, column.key, '');
+
+    return (_isObject(value) && value.content)
+      ? value.isHtml
+        ? <div dangerouslySetInnerHTML={{__html: value.content}} />
+        : <span>{String(value.content)}</span>
+      : <span>{String(value)}</span>;
+  };
+
+  const {
+    columns: propColumns,
+    form,
+    getSubmissions,
+    onAction,
+    onPageSizeChanged,
+    pageSizes,
+    submissions: {
+      limit,
+      pagination: {
+        page,
+        numPages,
+        total,
+      },
+      sort,
+      submissions,
+    },
+  } = props;
+
+  const columns = propColumns.length ? propColumns : getColumns(form);
+  const skip = (page - 1) * limit;
+  const last = Math.min(skip + limit, total);
+
+  return (
+    <Grid
+      Cell={Cell}
+      activePage={page}
+      columns={columns}
+      emptyText="No data found"
+      firstItem={skip + 1}
+      items={submissions}
+      lastItem={last}
+      onAction={onAction}
+      onPage={getSubmissions}
+      onPageSizeChanged={onPageSizeChanged}
+      onSort={onSort}
+      pageSize={limit}
+      pageSizes={pageSizes}
+      pages={numPages}
+      sortOrder={sort}
+      total={total}
+    />
+  );
+};
+
+SubmissionGrid.propTypes = {
+  columns: Columns,
+  form: PropTypes.object.isRequired,
+  getSubmissions: PropTypes.func,
+  onAction: PropTypes.func,
+  onPageSizeChanged: PropTypes.func,
+  operations: Operations,
+  pageSizes: PageSizes,
+  submissions: PropTypes.object.isRequired,
+};
+
+SubmissionGrid.defaultProps = {
+columns: [],
+getSubmissions: () => {},
+onAction: () => {},
+onPageSizeChanged: () => {},
+operations: [
+  {
+    action: 'view',
+    buttonType: 'warning',
+    icon: 'list-alt',
+    permissionsResolver() {
+      return true;
+    },
+    title: 'View',
+  },
+  {
+    action: 'edit',
+    buttonType: 'secondary',
+    icon: 'edit',
+    permissionsResolver() {
+      return true;
+    },
+    title: 'Edit',
+  },
+  {
+    action: 'delete',
+    buttonType: 'danger',
+    icon: 'trash',
+    permissionsResolver() {
+      return true;
+    },
+  },
+],
+pageSizes: defaultPageSizes,
+};
+
+export default SubmissionGrid;

package/src/components/index.js

@@ -0,0 +1,9 @@
+export {default as Errors} from './Errors';
+export {default as Form} from './Form';
+export {default as FormBuilder} from './FormBuilder';
+export {default as FormEdit} from './FormEdit';
+export {default as FormGrid} from './FormGrid';
+export {default as Grid} from './Grid';
+export {default as ReactComponent} from './ReactComponent';
+export {default as SubmissionGrid} from './SubmissionGrid';
+export {default as Pagination} from './Pagination';

package/src/constants.js

@@ -0,0 +1,3 @@
+import {AllItemsPerPage} from './types';
+
+export const defaultPageSizes = [10, 25, 50, 100, AllItemsPerPage];

package/src/index.js

@@ -0,0 +1,19 @@
+import {Formio} from 'formiojs';
+const Webform = Formio.Webform;
+const WebformBuilder = Formio.WebformBuilder;
+const Wizard = Formio.Wizard;
+const WizardBuilder = Formio.WizardBuilder;
+
+export {
+  Webform,
+  WebformBuilder,
+  Wizard,
+  WizardBuilder,
+};
+
+export * from './components';
+export * from './constants';
+export * from './modules';
+export * from './types';
+export * from './utils';
+export {Components, Formio, Utils, Templates} from 'formiojs';

package/src/modules/auth/actions.js

@@ -0,0 +1,115 @@
+import {Formio as formiojs} from 'formiojs';
+import * as type from './constants';
+
+const requestUser = () => ({
+  type: type.USER_REQUEST,
+});
+
+const receiveUser = (user) => ({
+  type: type.USER_REQUEST_SUCCESS,
+  user,
+});
+
+const failUser = (error) => ({
+  type: type.USER_REQUEST_FAILURE,
+  error,
+});
+
+const logoutUser = () => ({
+  type: type.USER_LOGOUT,
+});
+
+const submissionAccessUser = (submissionAccess) => ({
+  type: type.USER_SUBMISSION_ACCESS,
+  submissionAccess,
+});
+
+const formAccessUser = (formAccess) => ({
+  type: type.USER_FORM_ACCESS,
+  formAccess,
+});
+
+const projectAccessUser = (projectAccess) => ({
+  type: type.USER_PROJECT_ACCESS,
+  projectAccess,
+});
+
+const rolesUser = (roles) => ({
+  type: type.USER_ROLES,
+  roles,
+});
+
+function transformSubmissionAccess(forms) {
+  return Object.values(forms).reduce((result, form) => ({
+    ...result,
+    [form.name]: form.submissionAccess.reduce((formSubmissionAccess, access) => ({
+      ...formSubmissionAccess,
+      [access.type]: access.roles,
+    }), {}),
+  }), {});
+}
+
+function transformFormAccess(forms) {
+  return Object.values(forms).reduce((result, form) => ({
+    ...result,
+    [form.name]: form.access.reduce((formAccess, access) => ({
+      ...formAccess,
+      [access.type]: access.roles,
+    }), {}),
+  }), {});
+}
+
+function transformProjectAccess(projectAccess) {
+  return projectAccess.reduce((result, access) => ({
+    ...result,
+    [access.type]: access.roles,
+  }), {});
+}
+
+export const initAuth = () => (dispatch) => {
+  const projectUrl = formiojs.getProjectUrl();
+
+  dispatch(requestUser());
+
+  Promise.all([
+    formiojs.currentUser(),
+    formiojs.makeStaticRequest(`${projectUrl}/access`)
+      .then((result) => {
+        const submissionAccess = transformSubmissionAccess(result.forms);
+        const formAccess = transformFormAccess(result.forms);
+
+        dispatch(submissionAccessUser(submissionAccess));
+        dispatch(formAccessUser(formAccess));
+        dispatch(rolesUser(result.roles));
+      })
+      .catch(() => {}),
+    formiojs.makeStaticRequest(projectUrl)
+      .then((project) => {
+        const projectAccess = transformProjectAccess(project.access);
+        dispatch(projectAccessUser(projectAccess));
+      })
+      .catch(() => {}),
+  ])
+    .then(([user]) => {
+      if (user) {
+        dispatch(receiveUser(user));
+      }
+      else {
+        dispatch(logoutUser());
+      }
+    })
+    .catch((result) => {
+      dispatch(failUser(result));
+    });
+};
+
+export const setUser = (user) => (dispatch) => {
+  formiojs.setUser(user);
+  dispatch(receiveUser(user));
+};
+
+export const logout = () => (dispatch) => {
+  formiojs.logout().then(() => {
+    dispatch(logoutUser());
+  });
+};

package/src/modules/auth/constants.js

@@ -0,0 +1,8 @@
+export const USER_REQUEST = 'USER_REQUEST';
+export const USER_REQUEST_SUCCESS = 'USER_REQUEST_SUCCESS';
+export const USER_REQUEST_FAILURE = 'USER_REQUEST_FAILURE';
+export const USER_LOGOUT = 'USER_LOGOUT';
+export const USER_SUBMISSION_ACCESS = 'USER_SUBMISSION_ACCESS';
+export const USER_FORM_ACCESS = 'USER_FORM_ACCESS';
+export const USER_PROJECT_ACCESS = 'USER_PROJECT_ACCESS';
+export const USER_ROLES = 'USER_ROLES';

package/src/modules/auth/index.js

@@ -0,0 +1,4 @@
+export * from './actions';
+export * from './constants';
+export * from './reducers';
+export * from './selectors';

package/src/modules/auth/reducers.js

@@ -0,0 +1,87 @@
+import * as type from './constants';
+
+const initialState = {
+  init: false,
+  isActive: false,
+  user: null,
+  authenticated: false,
+  submissionAccess: {},
+  formAccess: {},
+  projectAccess: {},
+  roles: {},
+  is: {},
+  error: '',
+};
+
+function mapProjectRolesToUserRoles(projectRoles, userRoles) {
+  return Object.entries(projectRoles).reduce((result, [name, role]) => ({
+    ...result,
+    [name]: userRoles.includes(role._id),
+  }), {});
+}
+
+function getUserRoles(projectRoles) {
+  return Object.keys(projectRoles).reduce((result, name) => ({
+    ...result,
+    [name]: name === 'anonymous',
+  }), {});
+}
+
+export const auth = config => (state = initialState, action) => {
+  switch (action.type) {
+    case type.USER_REQUEST:
+      return {
+        ...state,
+        init: true,
+        submissionAccess: false,
+        isActive: true
+      };
+    case type.USER_REQUEST_SUCCESS:
+      return {
+        ...state,
+        isActive: false,
+        user: action.user,
+        authenticated: true,
+        is: mapProjectRolesToUserRoles(state.roles, action.user.roles),
+        error: '',
+      };
+    case type.USER_REQUEST_FAILURE:
+      return {
+        ...state,
+        isActive: false,
+        is: getUserRoles(state.roles),
+        error: action.error,
+      };
+    case type.USER_LOGOUT:
+      return {
+        ...state,
+        user: null,
+        isActive: false,
+        authenticated: false,
+        is: getUserRoles(state.roles),
+        error: '',
+      };
+    case type.USER_SUBMISSION_ACCESS:
+      return {
+        ...state,
+        submissionAccess: action.submissionAccess,
+      };
+    case type.USER_FORM_ACCESS:
+      return {
+        ...state,
+        formAccess: action.formAccess,
+      };
+    case type.USER_PROJECT_ACCESS:
+      return {
+        ...state,
+        projectAccess: action.projectAccess,
+      };
+    case type.USER_ROLES:
+      return {
+        ...state,
+        roles: action.roles,
+      };
+    default:
+      return state;
+  }
+};

package/src/modules/auth/selectors.js

@@ -0,0 +1,2 @@
+export default {};
+