@beinformed/ui 1.25.6 → 1.27.0-beta.0

package/src/models/href/Href.js

@@ -1,5 +1,5 @@
 // @flow
-import { BASE, CONTENT_PATH, HTTP_METHODS } from "../../constants/Constants";
+import { getBasePath, HTTP_METHODS, CONTENT_PATH } from "../../constants";
 
 import Parameter from "../parameter/Parameter";
 import { IllegalArgumentException } from "../../exceptions";
@@ -341,14 +341,14 @@ class Href {
   }
 
   /**
-   * Retrieve the path combined with the BASE of the application, e.g. /BeInformed
+   * Retrieve the path combined with the base path (context-path) of the application, e.g. /BeInformed
    */
   get absolutepath(): string {
     if (this.isExternal) {
       return this.path;
     }
 
-    return BASE + this.path;
+    return getBasePath() + this.path;
   }
 
   /**
@@ -433,7 +433,7 @@ class Href {
    * Indicates if the link is a content link
    */
   get isContent(): boolean {
-    return this.absolutepath.startsWith(CONTENT_PATH);
+    return this.absolutepath.startsWith(`${getBasePath()}${CONTENT_PATH}`);
   }
 
   /**

package/src/models/href/__tests__/Href.spec.js

@@ -1,4 +1,4 @@
-import { BASE, APPLICATION_PATH } from "../../../constants";
+import { getBasePath } from "../../../constants";
 import Href from "../Href";
 
 describe("href spec", () => {
@@ -140,8 +140,7 @@ describe("href spec", () => {
   });
 
   it("a tab can have the same uri as the contextPath", () => {
-    expect(BASE).toBe("/BeInformed");
-    expect(APPLICATION_PATH).toBe("/BeInformed/");
+    expect(getBasePath()).toBe("/BeInformed");
 
     const tabHref = new Href("/BeInformed");
 

package/src/modularui/Authenticate.js

@@ -1,5 +1,5 @@
 // @flow
-import { BASE, HTTP_METHODS } from "../constants/Constants";
+import { HTTP_METHODS } from "../constants/Constants";
 
 import universalFetch from "../utils/fetch/universalFetch";
 import Cache from "../utils/browser/Cache";
@@ -11,6 +11,7 @@ import {
   loginPasswordField,
   loginUsernameField,
   logoutPath,
+  getBasePath,
 } from "../constants";
 
 /**
@@ -57,7 +58,7 @@ class Authenticate {
    */
   requestLogin(): Promise<any> {
     return universalFetch({
-      url: `${BASE}/login`,
+      url: `${getBasePath()}/login`,
       method: HTTP_METHODS.GET,
       headers: {
         Accept: "application/json",
@@ -104,9 +105,9 @@ class Authenticate {
     switch (this.authenticationType) {
       case "PAC4J_BASIC":
       case "PAC4J_FORM":
-        return `${BASE}${loginPath()}`;
+        return `${getBasePath()}${loginPath()}`;
       default:
-        return `${BASE}/j_security_check`;
+        return `${getBasePath()}/j_security_check`;
     }
   }
 
@@ -161,7 +162,7 @@ class Authenticate {
    */
   logout(): Promise<any> {
     return universalFetch({
-      url: `${BASE}${logoutPath()}`,
+      url: `${getBasePath()}${logoutPath()}`,
     }).then((response) => {
       // clear cache because of cached contributions
       Cache.clear();

package/src/modularui/CaptchaRequest.js

@@ -0,0 +1,45 @@
+// @flow
+import xhr from "../utils/fetch/xhr";
+import { getCaptchaPath, HTTP_METHODS } from "../constants";
+
+type CaptchaResponse = {
+  tokenId: string,
+  image: any,
+  valid: boolean,
+};
+
+/**
+ */
+class CaptchaRequest {
+  #tokenId: string;
+
+  /**
+   */
+  init(): Promise<CaptchaResponse> {
+    return xhr({
+      url: getCaptchaPath(),
+    }).then((response) => {
+      this.#tokenId = response.tokenId;
+
+      return response;
+    });
+  }
+
+  /**
+   */
+  send(answer: string): Promise<CaptchaResponse> {
+    return xhr({
+      url: getCaptchaPath(),
+      method: HTTP_METHODS.POST,
+      data: {
+        tokenId: this.#tokenId ?? "",
+        answer: answer ?? "",
+      },
+    }).catch((error) => {
+      this.#tokenId = error.response.tokenId;
+      return error.response;
+    });
+  }
+}
+
+export default CaptchaRequest;

package/src/modularui/ModularUIRequest.js

@@ -1,15 +1,11 @@
 // @flow
 import deepmerge from "deepmerge";
 
-import {
-  BASE,
-  HTTP_METHODS,
-  TIMEVERSION_FILTER_NAME,
-} from "../constants/Constants";
+import { HTTP_METHODS, TIMEVERSION_FILTER_NAME } from "../constants/Constants";
 
 import { HIDE_WHEN_EMPTY } from "../constants/LayoutHints";
 
-import { getSetting } from "../constants/Settings";
+import { getBasePath, getSetting } from "../constants/Settings";
 
 import Href from "../models/href/Href";
 
@@ -49,6 +45,8 @@ class ModularUIRequest {
 
   _progressEvent: ProgressEventHandler;
 
+  #basePath: string = "/BeInformed";
+
   /**
    */
   constructor(
@@ -61,6 +59,8 @@ class ModularUIRequest {
       );
     }
 
+    this.#basePath = getBasePath();
+
     this.options = options;
 
     this._response = new ModularUIResponse();
@@ -331,7 +331,7 @@ class ModularUIRequest {
     }
 
     return universalFetch({
-      url: `${BASE}${this.contributionsHref}`,
+      url: `${this.#basePath}${this.contributionsHref}`,
       cache: true,
       locale: this.options.locale,
     });
@@ -342,7 +342,7 @@ class ModularUIRequest {
   fetchDataService(): Promise<any> {
     return universalFetch({
       ...this.requestOptions,
-      url: `${BASE}${this.href.path}`,
+      url: `${this.#basePath}${this.href.path}`,
       params: this.href.getQuerystringForModularUI(),
       locale: this.options.locale,
       onProgress: this.onProgress,
@@ -519,7 +519,7 @@ class ModularUIRequest {
 
     return universalFetch({
       ...this.requestOptions,
-      url: `${BASE}${href}`,
+      url: `${this.#basePath}${href}`,
     })
       .then((response: Object) => {
         if (isPlainObject(response)) {
@@ -587,7 +587,7 @@ class ModularUIRequest {
       const validationHref = this.href.setParameter("commit", "false");
       return universalFetch({
         ...this.requestOptions,
-        url: `${BASE}${this.href.path}`,
+        url: `${this.#basePath}${this.href.path}`,
         params: validationHref.getQuerystringForModularUI(),
         data: this.getDynamicValidationData(model),
       }).then((data) => {
@@ -763,6 +763,45 @@ class ModularUIRequest {
       return form.update(response);
     });
   }
+
+  /**
+   * Simplified synchronous version of fetch (returns the model, not a Promise)
+   * This can be used on the server to retrieve a model. It only loads the request url and it's child models
+   */
+  fetchSync(): ModularUIModel {
+    const options = { headers: { "Accept-Language": this.locale } };
+
+    const dataString = dataFetcher.fetch(this.href.toString(), options);
+    if (dataString == null) {
+      throw new Error(`No data received for ${this.href.toString()}`);
+    }
+
+    this.processDataService(JSON.parse(dataString));
+
+    const contributionsString = dataFetcher.fetch(
+      this.contributionsHref.toString(),
+      options
+    );
+    if (contributionsString == null) {
+      throw new Error(
+        `No constributions received for ${this.contributionsHref.toString()}`
+      );
+    }
+    this.processContributionsService(JSON.parse(contributionsString));
+
+    const model = this.createModel();
+
+    const childModelLinks = model.getInitialChildModelLinks();
+
+    const childModels = childModelLinks.map((childModelLink) => {
+      return new ModularUIRequest(childModelLink.href, {
+        locale: this.locale,
+      }).fetchSync();
+    });
+    model.addChildModels(childModels);
+
+    return model;
+  }
 }
 
 export default ModularUIRequest;

package/src/modularui/UploadRequest.js

@@ -0,0 +1,125 @@
+// @flow
+import { getUploadPath, HTTP_METHODS } from "../constants";
+
+import xhr from "../utils/fetch/xhr";
+
+import type {
+  FilesizeConstraintsType,
+  FiletypeConstraintsType,
+} from "../models";
+import ErrorModel from "../models/error/ErrorModel";
+
+type ProgressHandler = (file: File, uploadInfo: Object) => void;
+
+type UploadResponse = {
+  token: string,
+};
+
+/**
+ * Upload a file to the upload file service of Be Informed
+ */
+class UploadRequest {
+  #uploadConstraints: {
+    fileTypes: FiletypeConstraintsType,
+    maxFileSize: FilesizeConstraintsType,
+  };
+  #progressHandler: ProgressHandler;
+
+  constructor(
+    uploadConstraints: {
+      fileTypes: FiletypeConstraintsType,
+      maxFileSize: FilesizeConstraintsType,
+    },
+    progressHandler: ProgressHandler
+  ) {
+    this.#uploadConstraints = uploadConstraints;
+    this.#progressHandler = progressHandler;
+  }
+
+  /**
+   */
+  getFileExtension(file: File): string {
+    return file.name.split(".").pop().toLowerCase();
+  }
+
+  /**
+   */
+  isNotAllowedFileType(file: File): boolean {
+    const allowedFileTypes = this.#uploadConstraints.fileTypes;
+
+    if (allowedFileTypes.length > 0) {
+      const fileExtension = this.getFileExtension(file);
+
+      return !allowedFileTypes.some((fileType) =>
+        fileType.extensions.includes(fileExtension)
+      );
+    }
+
+    return false;
+  }
+
+  /**
+   */
+  exceedsMaxFileSize(file: File): boolean {
+    const maxFileSize = this.#uploadConstraints?.maxFileSize?.fileSize ?? -1;
+    return maxFileSize > -1 && file.size > maxFileSize;
+  }
+
+  /**
+   */
+  uploadFile(file: File): Promise<UploadResponse> {
+    const maxFileSize = this.#uploadConstraints?.maxFileSize?.fileSize ?? -1;
+
+    if (this.exceedsMaxFileSize(file)) {
+      this.#progressHandler(file, { error: "errorExceedsMaxFileSize" });
+      return Promise.reject(
+        new ErrorModel(
+          "Constraint.File.MaxFileSizeExceeded",
+          "Maximum file upload size is ${max-filesize}",
+          {
+            "max-filesize": maxFileSize,
+          },
+          true
+        )
+      );
+    }
+
+    if (this.isNotAllowedFileType(file)) {
+      this.#progressHandler(file, { error: "errorExtensionNotAllowed" });
+      return Promise.reject(
+        new ErrorModel(
+          "Constraint.File.InvalidExtension",
+          "Allowed extensions are: ${extensions}",
+          {
+            extension: this.getFileExtension(file),
+            extensions: this.#uploadConstraints.fileTypes.join(", "),
+          },
+          true
+        )
+      );
+    }
+
+    return xhr({
+      url: getUploadPath(),
+      method: HTTP_METHODS.POST,
+      headers: {
+        "Content-Type": file.type,
+        "x-filename": encodeURIComponent(file.name),
+        "x-filesize": file.size.toString(),
+      },
+      onProgress: (e: ProgressEvent) => {
+        if (this.#progressHandler && e.lengthComputable) {
+          this.#progressHandler(file, {
+            progress: Math.ceil((e.loaded / e.total) * 100),
+          });
+        }
+      },
+      data: file,
+    }).then((response) => {
+      this.#progressHandler(file, { progress: 100, token: response.token });
+      return response;
+    });
+  }
+}
+
+export default UploadRequest;

package/src/modularui/index.js

@@ -2,3 +2,5 @@
 export { default as Authenticate } from "./Authenticate";
 export { default as ModularUIRequest } from "./ModularUIRequest";
 export { default as ModularUIResponse } from "./ModularUIResponse";
+export { default as UploadRequest } from "./UploadRequest";
+export { default as CaptchaRequest } from "./CaptchaRequest";

package/src/react-client/client.js

@@ -17,7 +17,7 @@ import { createBrowserHistory } from "history";
 import configureStore from "../redux/store/configureStore";
 
 import rehydrate from "./rehydrate";
-import { BASE } from "../constants/Constants";
+import { getBasePath } from "../constants/Settings";
 
 import {
   setAllContentInDataSetting,
@@ -87,7 +87,7 @@ const client = (props: Props) => {
 
   // $FlowExpectedError
   const browserHistory: RouterHistory = createBrowserHistory({
-    basename: BASE,
+    basename: getBasePath(),
   });
   const { history, store } = configureStore(
     browserHistory,

package/src/react-server/contextPath.js

@@ -1,8 +1,8 @@
 // @flow
-import { BASE } from "../constants/Constants";
+import { getBasePath } from "../constants/Settings";
 
 (function x() {
-  __webpack_public_path__ = `${BASE}/`; // NOSONAR
+  __webpack_public_path__ = `${getBasePath()}/`; // NOSONAR
 })();
 
 export {};

package/src/react-server/renderSSRComplete.js

@@ -10,7 +10,7 @@ import { ServerStyleSheet, StyleSheetManager } from "styled-components";
 import createSSRComplete from "./createSSRComplete";
 import htmlpage from "./htmlpage";
 
-import { BASE } from "../constants/Constants";
+import { getBasePath } from "../constants/Settings";
 
 import ThemeProvider from "../react-theme/ThemeProvider";
 import ErrorBoundary from "../react/ErrorBoundary";
@@ -52,6 +52,8 @@ const renderSSRComplete = ({
   // $FlowFixMe[prop-missing]
   const location: Location = requestHref.toLocation();
 
+  const basePath = getBasePath();
+
   return createSSRComplete(store, () =>
     renderToString(
       <Provider store={store}>
@@ -60,7 +62,7 @@ const renderSSRComplete = ({
             <HelmetProvider context={helmetContext}>
               <ErrorBoundary>
                 <Router
-                  basename={BASE}
+                  basename={basePath}
                   location={location}
                   context={routerContext}
                 >
@@ -77,7 +79,7 @@ const renderSSRComplete = ({
       handleErrors(store);
       const head = createHead(sheet, UUID, helmetContext);
       return template({
-        contextPath: BASE,
+        contextPath: basePath,
         html: appHTML,
         head,
         state: dehydrate(store),
@@ -86,7 +88,7 @@ const renderSSRComplete = ({
     })
     .catch((error) =>
       template({
-        contextPath: BASE,
+        contextPath: basePath,
         html: renderToString(
           <StyleSheetManager sheet={sheet.instance}>
             <ThemeProvider theme={theme}>

package/src/react-server/renderSSRMinimal.js

@@ -6,7 +6,7 @@ import { Provider } from "react-redux";
 import { ServerStyleSheet, StyleSheetManager } from "styled-components";
 import ThemeProvider from "../react-theme/ThemeProvider";
 
-import { BASE } from "../constants/Constants";
+import { getBasePath } from "../constants/Settings";
 
 import { createHead, dehydrate } from "./serverUtil";
 import htmlpage from "./htmlpage";
@@ -43,7 +43,7 @@ const renderSSRMinimal = ({
 
   const head = createHead(sheet, UUID);
   return template({
-    contextPath: BASE,
+    contextPath: getBasePath(),
     html: appHTML,
     head,
     state: dehydrate(store),

package/src/react-server/serverNoSSR.js

@@ -7,6 +7,7 @@ import { getFullRequestHref } from "./requestInformation";
 import {
   createReduxStore,
   setI18n,
+  setApplication,
   setServerPreferences,
   setConfigurationTheme,
   handleErrors,
@@ -23,6 +24,7 @@ import type { BeforeRenderHook } from "../redux/store/beforeRenderHooks";
 import type { PreferenceValue } from "./serverUtil";
 import type { LocaleConfiguration } from "../i18n/types";
 import type { Theme } from "../react-theme/types";
+
 type serverProps = {
   request: HttpServletRequestJava,
   locales?: Array<LocaleConfiguration>,
@@ -50,6 +52,7 @@ const serverNoSSR = ({
   __webpack_nonce__ = UUID; // NOSONAR
 
   const requestHref = getFullRequestHref(request);
+
   const store = createReduxStore(requestHref, customReducers);
 
   setServerPreferences(store, serverPreferences);
@@ -63,6 +66,8 @@ const serverNoSSR = ({
 
   setI18n(store, locales, request);
 
+  setApplication(store);
+
   handleErrors(store);
 
   handleBeforeRenderHooks(beforeRenderHooks, { store, request });

package/src/react-server/serverUtil.js

@@ -23,8 +23,13 @@ import { getSetting } from "../constants/Settings";
 
 import { IllegalArgumentException } from "../exceptions";
 
+import { initModels } from "../redux";
+import { getLocale } from "../redux/selectors/i18n";
+
+import ModularUIRequest from "../modularui/ModularUIRequest";
+
 import type { LocaleConfiguration } from "../i18n/types";
-import type { ReduxStore } from "../redux/types";
+import type { ReduxState, ReduxStore } from "../redux/types";
 import type Href from "../models/href/Href";
 import type { RouterHistory } from "react-router";
 
@@ -38,14 +43,15 @@ export type PreferenceValue = {
  */
 const createReduxStore = (
   requestHref: Href,
-  customReducers: Object
+  customReducers: Object,
+  initialState?: $Shape<ReduxState>
 ): ReduxStore => {
   // $FlowExpectedError
   const history: RouterHistory = createMemoryHistory({
     initialEntries: [requestHref.toString()],
   });
 
-  const { store } = configureStore(history, customReducers);
+  const { store } = configureStore(history, customReducers, initialState);
 
   return store;
 };
@@ -161,6 +167,29 @@ const setConfigurationTheme = (store: ReduxStore) => {
   }
 };
 
+/**
+ */
+const setApplication = (store: ReduxStore) => {
+  try {
+    const locale = getLocale(store.getState());
+    const application = new ModularUIRequest("/", {
+      locale: locale,
+    }).fetchSync();
+
+    store.dispatch(
+      initModels([
+        {
+          key: `application(/)(${locale})`,
+          model: application,
+        },
+      ])
+    );
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.info("Could not load webapplication on server");
+  }
+};
+
 /**
  */
 const handleErrors = (store: ReduxStore) => {
@@ -180,19 +209,23 @@ const handleErrors = (store: ReduxStore) => {
 const dehydrate = (store: ReduxStore): string => {
   const state = store.getState();
 
-  const modularui: { [key: string]: { status: string, model: ?Object } } = {};
+  const modularui: {
+    [key: string]: { status: string, lastModification: number, model: ?Object },
+  } = {};
+
   for (const key in state.modularui) {
-    const status = state.modularui[key].status;
-    const model = state.modularui[key].model;
+    const { status, model, lastModification } = state.modularui[key];
 
     if (model) {
       modularui[key] = {
         status,
+        lastModification,
         model: model.dehydrate(),
       };
     } else {
       modularui[key] = {
         status,
+        lastModification,
         model: undefined,
       };
     }
@@ -233,6 +266,7 @@ const createHead = (
 export {
   createReduxStore,
   setI18n,
+  setApplication,
   setServerPreferences,
   setConfigurationTheme,
   createHead,

package/src/redux/_modularui/ModularUIActions.js

@@ -10,6 +10,7 @@ import type { Dispatch, ThunkAction } from "../types";
 import type {
   ModularUIAction,
   SetModelAction,
+  InitModelAction,
   UpdateModelAction,
   RemoveModelByKeyAction,
   ResetModularUIAction,
@@ -34,6 +35,15 @@ export const setModel = (
   };
 };
 
+/**
+ */
+export const initModels = (
+  models: Array<{ key: string, model: ModularUIModel }>
+): InitModelAction => ({
+  type: "MODULARUI/INIT",
+  payload: models,
+});
+
 /**
  */
 export const updateModel = (model: ModularUIModel): UpdateModelAction => ({

package/src/redux/_modularui/ModularUIMiddleware.js

@@ -21,7 +21,7 @@ import type { TargetModel } from "../../modularui/types";
 type RequestOptions = {
   href: Href,
   method?: $Keys<typeof HTTP_METHODS>,
-  data?: string | { [key: string]: string },
+  data?: any,
   locale: string,
   childmodels?: boolean,
   targetModel?: TargetModel,

package/src/redux/_modularui/ModularUIReducer.js

@@ -53,6 +53,25 @@ const setModel = (
   throw new IllegalArgumentException("No model for setModel");
 };
 
+/**
+ */
+const initModularUI = (
+  state: ModularUIState,
+  models: Array<{ key: string, model: ModularUIModel }>
+) => {
+  const newState = Object.assign({}, state);
+
+  models.forEach(({ key, model }) => {
+    newState[key] = {
+      status: MODULARUI_STATUS.FINISHED,
+      lastModification: Date.now(),
+      model,
+    };
+  });
+
+  return newState;
+};
+
 /**
  */
 const getModelKey = (state: ModularUIState, model: ModularUIModel) =>
@@ -112,6 +131,9 @@ export const ModularUIReducer: Reducer<ModularUIState, ReduxAction> = (
   }
 
   switch (action.type) {
+    case "MODULARUI/INIT":
+      return initModularUI(state, action.payload);
+
     case "MODULARUI/RESET":
       return resetModularUI(state);