Set up oidc and logos

openubl/deploy/compose/scripts/keycloak/setup.sh

@@ -6,15 +6,26 @@ while ! $KEYCLOAK_HOME/bin/kcadm.sh config credentials config --server "$KEYCLOA
   sleep 3
 done
 
+# Create realm
 $KEYCLOAK_HOME/bin/kcadm.sh create realms -s realm=openubl -s enabled=true -o
+
+# Create clients
 $KEYCLOAK_HOME/bin/kcadm.sh create clients -r openubl  -f - << EOF
   {
     "clientId": "openubl-api",
     "secret": "secret"
   }
 EOF
+
 $KEYCLOAK_HOME/bin/kcadm.sh create clients -r openubl  -f - << EOF
   {
     "clientId": "openubl-ui",
+    "publicClient": true,
+    "redirectUris": ["*"],
+    "webOrigins": ["*"]
   }
 EOF
+
+# Create user
+$KEYCLOAK_HOME/bin/kcadm.sh create users -r=openubl -s username=carlos -s enabled=true
+$KEYCLOAK_HOME/bin/kcadm.sh set-password -r=openubl --username carlos --new-password carlos

openubl/ui/client/src/app/Constants.ts

@@ -1,7 +1,16 @@
-export const uploadLimit = "500m";
+import ENV from "./env";
+
+export enum BrandType {
+  Openubl = "openubl",
+  LF = "lf",
+}
+export const APP_BRAND = ENV.PROFILE as BrandType;
 
 // URL param prefixes: should be short, must be unique for each table that uses one
 export enum TableURLParamKeyPrefix {
   repositories = "r",
   tags = "t",
 }
+
+export const isAuthRequired = ENV.AUTH_REQUIRED !== "false";
+export const uploadLimit = "500m";

openubl/ui/client/src/app/axios-config/apiInit.ts

@@ -1,10 +1,9 @@
 import axios from "axios";
-import { getUser } from "@app/oidc";
 
-export const initInterceptors = () => {
+export const initInterceptors = (access_token: String) => {
   axios.interceptors.request.use(
     (config) => {
-      const token = getUser()?.access_token;
+      const token = access_token;
       if (token) {
         config.headers.Authorization = `Bearer ${token}`;
       }

openubl/ui/client/src/app/components/OidcProvider.tsx

@@ -35,17 +35,22 @@ const AuthEnabledOidcProvider: React.FC<IOidcProviderProps> = ({
   const auth = useAuth();
 
   React.useEffect(() => {
-    initInterceptors();
-  }, []);
+    if (!auth.isAuthenticated && !auth.isLoading) {
+      auth.signinRedirect();
+    }
+  }, [auth.isAuthenticated, auth.isLoading]);
+
+  React.useEffect(() => {
+    if (auth.user?.access_token) {
+      initInterceptors(auth.user.access_token);
+    }
+  }, [auth.user?.access_token]);
 
   if (auth.isAuthenticated) {
     return <Suspense fallback={<AppPlaceholder />}>{children}</Suspense>;
   } else if (auth.isLoading) {
     return <AppPlaceholder />;
   } else {
-    auth.signinRedirect().then(() => {
-      console.log("Login in...");
-    });
     return <p>Login in...</p>;
   }
 };

openubl/ui/client/src/app/layout/about.tsx

@@ -2,11 +2,20 @@ import React from "react";
 
 import {
   AboutModal,
+  Text,
   TextContent,
+  TextList,
+  TextListItem,
+  TextVariants,
 } from "@patternfly/react-core";
 
-import logo from "../images/logo.svg";
-import backgroundImage from "../images/pfbg-icon.svg";
+import openublBrandImage from "@app/images/Openubl-white-logo.svg";
+import lfBrandImage from "@app/images/Openubl-white-logo.svg";
+
+import backgroundImage from "@app/images/pfbg-icon.svg";
+
+import { APP_BRAND, BrandType } from "@app/Constants";
+import ENV from "@app/env";
 
 interface IButtonAboutAppProps {
   isOpen: boolean;
@@ -17,17 +26,62 @@ export const AboutApp: React.FC<IButtonAboutAppProps> = ({
   isOpen,
   onClose,
 }) => {
+  const brandName = APP_BRAND === BrandType.Openubl ? "Openubl" : "LibreFact";
+
   return (
     <AboutModal
       isOpen={isOpen}
       onClose={onClose}
-      productName={"SbomHub"}
-      brandImageAlt="Brand Image"
-      brandImageSrc={logo}
+      productName={brandName}
+      brandImageAlt="Logo"
+      brandImageSrc={
+        APP_BRAND === BrandType.Openubl ? openublBrandImage : lfBrandImage
+      }
       backgroundImageSrc={backgroundImage}
-      trademark="Copyright © 2020, 2023 by SbomHub"
+      trademark="COPYRIGHT © 2022."
     >
-      <TextContent>Description</TextContent>
+      <TextContent>
+        <Text component={TextVariants.h4}>Acerca de</Text>
+        <Text component={TextVariants.p}>
+          {brandName} es una colección de herramientas que ayudan en la
+          administración de documentos electrónicos basados en UBL (Universal
+          Busissess Language) y los estándares de la SUNAT (Perú).
+        </Text>
+        <Text component={TextVariants.p}>
+          {brandName} Permite crear, firmar, enviar, y consultar comprobantes
+          electrónicos en la SUNAT
+        </Text>
+        <Text component={TextVariants.p}>
+          {brandName} es un proyecto de{" "}
+          <Text
+            component={TextVariants.a}
+            href="https://www.konveyor.io/"
+            target="_blank"
+          >
+            Project OpenUBL
+          </Text>
+          .
+        </Text>
+        <Text component={TextVariants.p}>
+          Para mayor información por favor diríjase a{" "}
+          <Text
+            component={TextVariants.a}
+            href={"https://project-openubl.github.io/"}
+            target="_blank"
+          >
+            {brandName} documentación
+          </Text>
+          .
+        </Text>
+      </TextContent>
+      <TextContent className="pf-v5-u-py-xl">
+        <TextContent>
+          <TextList component="dl">
+            <TextListItem component="dt">Versión</TextListItem>
+            <TextListItem component="dd">{ENV.VERSION}</TextListItem>
+          </TextList>
+        </TextContent>
+      </TextContent>
     </AboutModal>
   );
 };