@beinformed/ui 1.26.0 → 1.27.0-beta.1

package/src/hooks/useAuthentication.js

@@ -6,9 +6,9 @@ import { login, logout, resetAuthErrors } from "../redux/actions";
 
 import Cache from "../utils/browser/Cache";
 import {
-  BASE,
-  fallbackDefaultAuthenticationType,
-  getSetting,
+  DEFAULT_AUTHENTICATION_TYPE,
+  getBasePath,
+  logoutPath,
 } from "../constants";
 
 import type { ResetAuthErrorsAction } from "../redux/types";
@@ -43,7 +43,7 @@ export const useLogin = (): LoginHook => {
   return {
     isAuthenticated,
     authenticationTypes: application?.authenticationTypes ?? [
-      fallbackDefaultAuthenticationType,
+      DEFAULT_AUTHENTICATION_TYPE,
     ],
     errorMessage: auth.error,
     resetErrors: () => dispatch(resetAuthErrors()),
@@ -62,7 +62,7 @@ export const useLogin = (): LoginHook => {
       if (!isAuthenticated) {
         Cache.setItem("isRedirectLogin", true);
         window.location.assign(
-          `${BASE}${authenticationType.redirectUri ?? ""}`
+          `${getBasePath()}${authenticationType.redirectUri ?? ""}`
         );
       }
     },
@@ -75,18 +75,19 @@ export const useLogout = (): LogoutHook => {
   const dispatch = useDispatch();
   const application = useSelector(getApplication);
 
-  const LOGOUT_PATH = getSetting("LOGOUT_PATH", "/signout");
+  const LOGOUT_PATH = logoutPath();
+  const BASE_PATH = getBasePath();
 
   const isAuthenticated = application?.isLoggedIn ?? false;
   return {
     isAuthenticated,
     authenticationTypes: application?.authenticationTypes ?? [
-      fallbackDefaultAuthenticationType,
+      DEFAULT_AUTHENTICATION_TYPE,
     ],
     logout: () => {
       if (Cache.getItem("isRedirectLogin")) {
         const origin = window.location.origin;
-        const url = `${origin}${BASE}/logout?url=${origin}${BASE}${LOGOUT_PATH}`;
+        const url = `${origin}${BASE_PATH}/logout?url=${origin}${BASE_PATH}${LOGOUT_PATH}`;
         Cache.setItem("isRedirectLogin", false);
         window.location.assign(url);
       } else {

package/src/models/application/ApplicationModel.js

@@ -5,11 +5,12 @@ import UserServicesModel from "../user/UserServicesModel";
 
 import { NotAllowedUriException } from "../../exceptions";
 
+import { DEFAULT_AUTHENTICATION_TYPE } from "../../constants";
+
 import type { ModularUIModel, AuthenticationType } from "../types";
 import type { ModularUIResponse } from "../../modularui";
 import type LinkCollection from "../links/LinkCollection";
 import type Href from "../href/Href";
-import { fallbackDefaultAuthenticationType } from "../../constants";
 
 /**
  * The Application model
@@ -76,7 +77,7 @@ export default class ApplicationModel extends ResourceModel {
    */
   get authenticationTypes(): Array<AuthenticationType> {
     const authenticationTypes = this.getContribution("security", [
-      fallbackDefaultAuthenticationType,
+      DEFAULT_AUTHENTICATION_TYPE,
     ]);
 
     //put primary first

package/src/models/attributes/UploadAttributeModel.js

@@ -108,6 +108,7 @@ export default class UploadAttributeModel extends StringAttributeModel {
   get uploadConstraints(): {
     fileTypes: FiletypeConstraintsType,
     maxFileSize: FilesizeConstraintsType,
+    acceptedFiles: Array<string>,
   } {
     const mimeTypes = this.contributions.allowedMimeTypes
       ? this.contributions.allowedMimeTypes.filter(
@@ -132,9 +133,29 @@ export default class UploadAttributeModel extends StringAttributeModel {
         maxTotalFileSize: this.maxTotalFileSize,
         isMaxTotal: this.maxTotalFileSize !== undefined,
       },
+      acceptedFiles: this.acceptedFiles,
     };
   }
 
+  /**
+   * Array of accepted file extensions and mime types.
+   * Convenience method for accept attribute of file input html control
+   */
+  get acceptedFiles(): Array<string> {
+    const mimeTypes = this.contributions.allowedMimeTypes
+      ? this.contributions.allowedMimeTypes.filter(
+          (mimeType) => mimeType !== "[...]"
+        )
+      : [];
+    const extensions = this.contributions.allowedExtensions
+      ? this.contributions.allowedExtensions
+          .filter((extension) => extension !== "[...]")
+          .map((extension) => `.${extension}`)
+      : [];
+
+    return [...extensions, ...mimeTypes];
+  }
+
   /**
    * Add upload constraints
    */

package/src/models/error/ErrorModel.js

@@ -1,5 +1,5 @@
 // @flow
-import type { MessageParameters } from "../../i18n/types";
+import type { MessageObject, MessageParameters } from "../../i18n/types";
 import LayoutHintCollection from "../layouthint/LayoutHintCollection";
 
 /**
@@ -67,6 +67,17 @@ class ErrorModel {
   get isMandatoryConstraint(): boolean {
     return this.id === "Constraint.Mandatory";
   }
+
+  /**
+   * Returns a message object from the error
+   */
+  getMessage(): MessageObject {
+    return {
+      id: this.id,
+      defaultMessage: this.defaultMessage ?? "",
+      parameters: this.parameters ?? {},
+    };
+  }
 }
 
 export default ErrorModel;

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) => {

package/src/modularui/UploadRequest.js

@@ -0,0 +1,127 @@
+// @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,
+    acceptedFiles: Array<string>,
+  };
+  _progressHandler: ProgressHandler;
+
+  constructor(
+    uploadConstraints: {
+      fileTypes: FiletypeConstraintsType,
+      maxFileSize: FilesizeConstraintsType,
+      acceptedFiles: Array<string>,
+    },
+    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/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/types.js

@@ -62,7 +62,7 @@ export type ModularUIAction = {
   payload: {
     href: Href,
     method?: $Keys<HTTP_METHODS>,
-    data?: string | { [key: string]: string },
+    data?: any,
     locale: string,
     childmodels?: boolean,
     targetModel?: TargetModel,

package/src/utils/browser/Cookies.js

@@ -1,7 +1,7 @@
 // @flow
 import Cookies from "js-cookie";
 
-import { BASE } from "../../constants/Constants";
+import { getBasePath } from "../../constants/Settings";
 
 type CookieOptions = {
   days?: number,
@@ -18,14 +18,18 @@ type CookieAttributes = {
 
 /**
  */
-const getCookie = (name: string): null | string => {
+export const getCookie = (name: string): null | string => {
   return Cookies.get(name);
 };
 
 /**
  */
-const setCookie = (name: string, value: any, options?: CookieOptions) => {
-  const attributes: CookieAttributes = { path: BASE };
+export const setCookie = (
+  name: string,
+  value: any,
+  options?: CookieOptions
+) => {
+  const attributes: CookieAttributes = { path: getBasePath() };
   attributes.expires = options?.days;
   attributes.sameSite = options?.sameSite ?? "Strict";
   attributes.secure = options?.secure;
@@ -35,8 +39,6 @@ const setCookie = (name: string, value: any, options?: CookieOptions) => {
 
 /**
  */
-const clearCookie = (name: string) => {
-  Cookies.remove(name, { path: BASE });
+export const clearCookie = (name: string) => {
+  Cookies.remove(name, { path: getBasePath() });
 };
-
-export { getCookie, setCookie, clearCookie };

package/src/utils/fetch/serverFetch.js

@@ -1,5 +1,5 @@
 // @flow
-import { BASE } from "../../constants/Constants";
+import { getBasePath } from "../../constants/Settings";
 import { FetchException } from "../../exceptions";
 
 import type { RequestOptions } from "./types";
@@ -11,7 +11,7 @@ export default function serverFetch(args: RequestOptions): Promise<any> {
   // remove contextPath of url, when the request is internal the context path is not needed
   const urlNoBase = args.url.includes("http")
     ? args.url
-    : args.url.replace(BASE, "");
+    : args.url.replace(getBasePath(), "");
   const params = args.params
     ? args.params.replace("includeContext=true", "")
     : "";

package/src/utils/fetch/types.js

@@ -10,7 +10,7 @@ export type RequestURLOptions = {
 export type RequestBaseOptions = {
   method?: $Keys<HTTP_METHODS>,
   params?: string,
-  data?: string | { [key: string]: string },
+  data?: any,
   timeout?: number,
   responseType?: string,
   headers?: {