Merge pull request #354 from aesirxio/develop

Deploy to master

.gitmodules

@@ -6,3 +6,7 @@
 	path = packages/aesirx-lib
 	url = https://github.com/aesirxio/aesirx-lib.git
 	branch = master
+[submodule "packages/aesirx-sso"]
+	path = packages/aesirx-sso
+	url = https://github.com/aesirxio/sso.git
+	branch = master

README.md

@@ -13,8 +13,8 @@ Find out more in [https://dam.aesirx.io](https://dam.aesirx.io)
 3. Run `yarn prepare` to build the dependencies.
 2. Rename the `.env.dist` file to `.env` on `packages/aesirx-dam-app` folder.
 3. Replace license keys in the `.env` file with the one provided in your profile account.
-   1. `REACT_APP_SSO_CLIENT_ID` replace this with the provided `REACT_APP_SSO_CLIENT_ID` from https://dapp.shield.aesirx.io/
-   2. `REACT_APP_SSO_CLIENT_SECRET` replace this with the provided `REACT_APP_SSO_CLIENT_SECRET` from https://dapp.shield.aesirx.io/
+   1. `REACT_APP_SSO_CLIENT_ID` replace this with the provided `SSO CLIENT ID` from https://dapp.shield.aesirx.io/licenses
+   2. `REACT_APP_SSO_CLIENT_SECRET` replace this with the provided `SSO CLIENT SECRET` from https://dapp.shield.aesirx.io/licenses
    3. `PORT` change the port. Default is 3000
 
 5. Run  `yarn dev`

package.json

@@ -13,10 +13,13 @@
     "jsdom": "^16",
     "json5": "^2",
     "postcss": "^8",
-    "nth-check":"^2.0.1"
+    "nth-check": "^2.0.1",
+    "clipboardy": "3.0.0",
+    "tsup": "6",
+    "@types/react": "^18"
   },
   "scripts": {
-    "prepare": "nx run-many -t build -p aesirx-uikit aesirx-lib && nx run-many -t build:lib --exclude aesirx-uikit aesirx-lib",
+    "prepare": "nx run aesirx-lib:build && nx run aesirx-sso:build && nx run aesirx-uikit:build  && nx run-many -t build:lib --exclude aesirx-uikit aesirx-lib",
     "dev": "nx run-many -t dev",
     "dev:lib": "nx run aesirx-dam-app:dev:lib",
     "build": "nx run aesirx-dam-app:build",

packages/aesirx-dam-app/package.json

@@ -12,8 +12,9 @@
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@toast-ui/react-image-editor": "^3.15.2",
-    "aesirx-lib": "^1.11.1",
-    "aesirx-uikit": "^1.1.5",
+    "aesirx-lib": "*",
+    "aesirx-uikit": "*",
+    "aesirx-sso": "*",
     "file-saver": "^2.0.5",
     "mobx": "^6.9.0",
     "mobx-react": "^7.6.0",

packages/aesirx-dam-app/src/components/Storage/index.jsx

@@ -14,6 +14,23 @@ import { DAM_SUBSCIPTION_FIELD_KEY } from 'aesirx-lib';
 import DamStore from 'store/DamStore/DamStore';
 import storage from './storage.svg';
 
+const gigabyte = 1000000000;
+const mbToByte = 1000000;
+
+function formatBytes(bytes, decimals = 2) {
+  if (!+bytes) return 0;
+
+  const k = 1000;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return {
+    usageValue: parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) ?? 0,
+    usageType: sizes[i] ?? 'KB',
+  };
+}
+
 const calculatorPercentage = (a, b) => {
   return (a / b) * 100 ?? 0;
 };
@@ -25,14 +42,21 @@ const Storage = () => {
   const getSubscription = async () => {
     try {
       const store = new DamStore();
-      const subscriptionFromLibrary = await store.getSubscription();
-      if (subscriptionFromLibrary) {
-        const damSubscirption = subscriptionFromLibrary?.find((item) => {
-          if (item[DAM_SUBSCIPTION_FIELD_KEY.PRODUCT]?.type === 'product-aesirx-dam') {
-            return item;
-          }
+      const subscriptionDetail = await store.getSubscription();
+      const usage = subscriptionDetail[DAM_SUBSCIPTION_FIELD_KEY.PRODUCT_STORAGE_USAGE];
+      const limit = subscriptionDetail[DAM_SUBSCIPTION_FIELD_KEY.PACKAGE_STORAGE_LIMIT];
+      if (usage != undefined && limit != undefined) {
+        const percentage = calculatorPercentage(usage, limit);
+        const isGb = limit >= gigabyte;
+        const convertUsage = formatBytes(usage);
+        const convertLimit = isGb ? limit / gigabyte : limit / mbToByte;
+        setSubscription({
+          [DAM_SUBSCIPTION_FIELD_KEY.PRODUCT_STORAGE_USAGE]: convertUsage.usageValue,
+          [DAM_SUBSCIPTION_FIELD_KEY.PACKAGE_STORAGE_LIMIT]: convertLimit,
+          limit_type: isGb ? 'GB' : 'MB',
+          usage_type: convertUsage.usageType,
+          percentage: percentage,
         });
-        setSubscription(damSubscirption);
       }
     } catch (error) {
       console.log(error);
@@ -59,54 +83,30 @@ const Storage = () => {
           className="progress-bar bg-cyan"
           role="progressbar"
           style={{
-            width: `${calculatorPercentage(
-              subscription?.[DAM_SUBSCIPTION_FIELD_KEY.PRODUCT]?.[
-                DAM_SUBSCIPTION_FIELD_KEY.PRODUCT_STORAGE_USAGE
-              ],
-              subscription?.[DAM_SUBSCIPTION_FIELD_KEY.PACKAGE]?.[
-                DAM_SUBSCIPTION_FIELD_KEY.PACKAGE_STORAGE_LIMIT
-              ]
-            )}%`,
+            width: `${subscription?.percentage ?? 0}%`,
           }}
           aria-label="Basic example"
-          aria-valuenow={calculatorPercentage(
-            subscription?.[DAM_SUBSCIPTION_FIELD_KEY.PRODUCT]?.[
-              DAM_SUBSCIPTION_FIELD_KEY.PRODUCT_STORAGE_USAGE
-            ],
-            subscription?.[DAM_SUBSCIPTION_FIELD_KEY.PACKAGE]?.[
-              DAM_SUBSCIPTION_FIELD_KEY.PACKAGE_STORAGE_LIMIT
-            ]
-          )}
+          aria-valuenow={subscription?.percentage ?? 0}
           aria-valuemin="0"
           aria-valuemax="100"
         ></div>
       </div>
       <p className="mb-0 d-flex flex-wrap ">
         <span className="text-white fs-14">
-          {subscription?.[DAM_SUBSCIPTION_FIELD_KEY.PRODUCT]?.[
-            DAM_SUBSCIPTION_FIELD_KEY.PRODUCT_STORAGE_USAGE
-          ]
-            ? subscription?.[DAM_SUBSCIPTION_FIELD_KEY.PRODUCT]?.[
-                DAM_SUBSCIPTION_FIELD_KEY.PRODUCT_STORAGE_USAGE
-              ]
+          {subscription?.[DAM_SUBSCIPTION_FIELD_KEY.PRODUCT_STORAGE_USAGE]
+            ? subscription?.[DAM_SUBSCIPTION_FIELD_KEY.PRODUCT_STORAGE_USAGE]
             : 0}
-          {'MB '}
-          {t('txt_of')}{' '}
-          {subscription?.[DAM_SUBSCIPTION_FIELD_KEY.PACKAGE]?.[
-            DAM_SUBSCIPTION_FIELD_KEY.PACKAGE_STORAGE_LIMIT
-          ]
-            ? subscription?.[DAM_SUBSCIPTION_FIELD_KEY.PACKAGE]?.[
-                DAM_SUBSCIPTION_FIELD_KEY.PACKAGE_STORAGE_LIMIT
-              ]
+          {subscription?.usage_type ?? 'MB'} {t('txt_of')}{' '}
+          {subscription?.[DAM_SUBSCIPTION_FIELD_KEY.PACKAGE_STORAGE_LIMIT]
+            ? subscription?.[DAM_SUBSCIPTION_FIELD_KEY.PACKAGE_STORAGE_LIMIT]
             : 0}
-          {'MB '}
-          {t('txt_used')}
-          {/* {subscription?.[DAM_SUBSCIPTION_FIELD_KEY.PACKAGE]?.[
+          {subscription?.limit_type ?? 'MB'} {t('txt_used')}
+          {/* {subscription?.[
               DAM_SUBSCIPTION_FIELD_KEY.PACKAGE_STORAGE_LIMIT
             ] ?? 'Unlimited'} */}
         </span>
         <a
-          href="https://dam.aesirx.io/#packages"
+          href="https://dapp.shield.aesirx.io/licenses"
           className="text-cyan text-decoration-underline fs-14 d-inline-block ps-1"
           target="_blank"
           rel="noreferrer"

packages/aesirx-dam-app/src/components/Table/index.jsx

@@ -140,7 +140,7 @@ const Table = ({
       const limitStart =
         listViewModel.dataFilter['list[limit]'] + listViewModel.dataFilter['list[start]'];
 
-        console.log('limitStart', limitStart, listViewModel.totalAsset)
+      console.log('limitStart', limitStart, listViewModel.totalAsset);
 
       if (limitStart < listViewModel.totalAsset) {
         const collectionId = history.location.pathname.split('/');

packages/aesirx-dam-app/src/routes/menu.js

@@ -1,11 +1,15 @@
-import { faUser } from '@fortawesome/free-solid-svg-icons/faUser';
-
 const settingMenu = [
   {
     name: 'profile',
     text: 'txt_menu_profile',
     link: '/profile',
-    icons_fa: faUser,
+    icons_color: '/assets/images/Profile.png',
+  },
+  {
+    name: 'SSO',
+    text: 'txt_sso',
+    link: '/sso',
+    icons_color: '/assets/images/SSO.png',
   },
 ];
 
@@ -15,6 +19,11 @@ const profileMenu = [
     text: 'txt_profile',
     link: '/profile',
   },
+  {
+    key: 2,
+    text: 'txt_sso',
+    link: '/sso',
+  },
 ];
 
 export { profileMenu, settingMenu };

packages/aesirx-dam-app/src/routes/routes.js

@@ -6,7 +6,9 @@
 import React, { lazy } from 'react';
 import { LoginPage, ProfilePage } from 'aesirx-uikit';
 import { Redirect } from 'react-router-dom';
-
+const SSOConfig = lazy(() =>
+  import('aesirx-sso').then((module) => ({ default: module.SSOConfig }))
+);
 const DashboardPage = lazy(() => import('../containers/Homepage'));
 
 const authRoutes = [
@@ -36,6 +38,11 @@ const settingRoutes = [
     exact: false,
     main: () => <ProfilePage />,
   },
+  {
+    path: '/sso',
+    exact: false,
+    main: () => <SSOConfig />,
+  },
 ];
 
 export { authRoutes, mainRoutes, settingRoutes };

packages/aesirx-dam-app/src/translations/dk/common.json

@@ -89,5 +89,6 @@
   "txt_keywords": "Søgeord",
   "txt_tags" : "Tags",
   "double_click_to_edit" : "Dobbeltklik for at redigere",
-  "right-click_to_get_a_list_of_actions" : "Højreklik for at få en liste over handlinger"
+  "right-click_to_get_a_list_of_actions" : "Højreklik for at få en liste over handlinger",
+  "txt_sso" : "Single Sign On"
 }

packages/aesirx-dam-app/src/translations/en/common.json

@@ -90,5 +90,6 @@
   "txt_keywords": "Keywords",
   "txt_tags" : "Tags",
   "double_click_to_edit" : "Double click to edit",
-  "right-click_to_get_a_list_of_actions" : "Right click to get a list of actions"
+  "right-click_to_get_a_list_of_actions" : "Right click to get a list of actions",
+  "txt_sso" : "Single Sign On"
 }

packages/aesirx-dam-app/src/translations/es/common.json

@@ -85,5 +85,6 @@
   "txt_keywords": "Palabras clave",
   "txt_tags": "Etiquetas",
   "double_click_to_edit": "Doble clic para editar",
-  "right-click_to_get_a_list_of_actions": "Haz clic derecho para obtener una lista de acciones"
+  "right-click_to_get_a_list_of_actions": "Haz clic derecho para obtener una lista de acciones",
+  "txt_sso": "Inicio de sesión único"
 }

packages/aesirx-dam-app/src/translations/fr/common.json

@@ -85,5 +85,6 @@
   "txt_keywords": "Mots clés",
   "txt_tags" : "Balises",
   "double_click_to_edit" : "Double-cliquez pour éditer",
-  "right-click_to_get_a_list_of_actions" : "Cliquez avec le bouton droit pour obtenir une liste d'actions"
+  "right-click_to_get_a_list_of_actions" : "Cliquez avec le bouton droit pour obtenir une liste d'actions",
+  "txt_sso" : "Authentification unique"
 }

packages/aesirx-dam-app/src/translations/hr/common.json

@@ -85,5 +85,6 @@
   "txt_keywords": "Ključne riječi",
   "txt_tags" : "Oznake",
   "double_click_to_edit" : "Dvaput kliknite za uređivanje",
-  "right-click_to_get_a_list_of_actions" : "Desni klik za dobivanje popisa radnji"
+  "right-click_to_get_a_list_of_actions" : "Desni klik za dobivanje popisa radnji",
+  "txt_sso" : "Jednostruka prijava"
 }

packages/aesirx-dam-app/src/translations/th/common.json

@@ -86,5 +86,6 @@
   "txt_keywords": "คำหลัก",
   "txt_tags" : "แท็ก",
   "double_click_to_edit": "ดับเบิลคลิกเพื่อแก้ไข",
-  "right-click_to_get_a_list_of_actions": "คลิกขวาเพื่อดูรายการการกระทำ"
+  "right-click_to_get_a_list_of_actions": "คลิกขวาเพื่อดูรายการการกระทำ",
+  "txt_sso" : "การลงชื่อเพียงครั้งเดียว"
 }

packages/aesirx-dam-app/src/translations/ua/common.json

@@ -86,5 +86,6 @@
   "txt_keywords": "Ключові слова",
   "txt_tags" : "Теги",
   "double_click_to_edit" : "Двічі клацніть, щоб редагувати",
-  "right-click_to_get_a_list_of_actions" : "Клацніть правою кнопкою миші, щоб отримати список дій"
+  "right-click_to_get_a_list_of_actions" : "Клацніть правою кнопкою миші, щоб отримати список дій",
+  "txt_sso" : "Єдиний вхід"
 }

packages/aesirx-dam-app/src/translations/vi/common.json

@@ -86,5 +86,6 @@
   "txt_keywords": "Từ khóa",
   "txt_tags" : "Thẻ",
   "double_click_to_edit" : "Nhấp đúp để chỉnh sửa",
-  "right-click_to_get_a_list_of_actions" : "Nhấp chuột phải để xem danh sách hành động"
+  "right-click_to_get_a_list_of_actions" : "Nhấp chuột phải để xem danh sách hành động",
+  "txt_sso" : "Đăng nhập một lần"
 }