Merge pull request #512 from ditrit/feature/update_server

Feature: update backend server

.gitignore

@@ -45,3 +45,4 @@ test-report.xml
 # Cypress
 /cypress/screenshots
 /cypress/videos
+/cypress/downloads

README.md

@@ -167,24 +167,14 @@ We have administration view [Leto-Modelizer-Admin](https://github.com/ditrit/let
 
 ```json
 {
-    "backend": {
-        "url": "http://localhost:1337",
-        "appId": "leto-modelizer-api-dev",
-        "adminUrl": "http://localhost:9000"
-    }
+  "backendUrl": "https://localhost:8443"
 }
 ```
 
-To get authentication setup, `backend.url` and `backend.appId` are mandatory.
-To get administration view, all the fields inside `backend` are mandatory.
-
-Here's a description of each key in the provided configuration:
-- `url`: the url of the backend.
-- `appId`: the application ID of the backend.
-- `adminUrl`: the url of the administration application.
+To get the authentication setup, `backendUrl`is mandatory.
 
-**_NOTE:_**: If the previous configuration is not present in the configuration file, Leto-Modelizer will be launched with the backend mode deactivated.
-**_NOTE:_**: For now, there is no UI associated to the backend, but the UI for the admin is coming soon !
+**_NOTE_**: If the previous configuration is not present in the configuration file, Leto-Modelizer will be launched with the backend mode deactivated.
+**_NOTE_**: For now, there is no UI associated to the backend, but the UI for the admin is coming soon !
 
 ## How to build this app
 
@@ -254,15 +244,12 @@ http {
 }
 ```
 
-**_NOTE:_**  You can use the global configuration file `global.config.json` to define environment variables like so :
+**_NOTE:_** You can use the global configuration file `global.config.json` to define environment variables like so :
 
 ```json
 {
   "templateLibrary": "YOUR_TEMPLATE_LIBRARY_BASE_URL",
-  "backend": {
-    "url": "YOUR_URL",
-    "appId": "YOUR_APP_ID",
-  }
+  "backendUrl": "YOUR_URL"
 }
 ```
 

changelog.md

@@ -41,6 +41,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 * Merge add/create diagram buttons into a drop down button, see [this issue](https://github.com/ditrit/leto-modelizer/issues/471).
 * Improve Authentication by re-doing login process if the token is expired, see [this issue](https://github.com/ditrit/leto-modelizer/issues/478).
 * Handle external id.
+* Replaced old authentication (Parse) by the new LetoModelizeApi (Java/Spring).
 
 ### Fixed
 

quasar.config.js

@@ -109,12 +109,8 @@ module.exports = configure((ctx) => ({
     env: {
       TEMPLATE_LIBRARY_BASE_URL: process.env.TEMPLATE_LIBRARY_BASE_URL || configuration?.templateLibrary || '',
       VERSION: version,
-      HAS_BACKEND: configuration?.backend
-        ? Object.prototype.hasOwnProperty.call(configuration?.backend, 'url')
-          && Object.prototype.hasOwnProperty.call(configuration?.backend, 'appId')
-        : false,
-      ADMIN_URL: configuration?.backend?.adminUrl || null,
-      BACKEND_APP_ID: configuration?.backend?.appId,
+      HAS_BACKEND: Object.prototype.hasOwnProperty.call(configuration, 'backendUrl'),
+      BACKEND_URL: configuration?.backendUrl || null,
     },
     // extractCSS: false,
 
@@ -161,9 +157,9 @@ module.exports = configure((ctx) => ({
         secure: true,
         changeOrigin: true,
       },
-      '/backend': {
-        pathRewrite: { '^/backend': '' },
-        target: configuration?.backend?.url,
+      '/api': {
+        target: configuration.backendUrl,
+        secure: false,
         changeOrigin: true,
       },
     },

src/boot/axios.js

@@ -5,9 +5,24 @@ const templateLibraryApiClient = axios.create({
   timeout: 15000,
 });
 
+const api = axios.create({
+  baseURL: '/api',
+  timeout: 15000,
+});
+
 templateLibraryApiClient.interceptors.response.use(
   (response) => Promise.resolve(response),
   (error) => Promise.reject(error),
 );
 
-export { axios, templateLibraryApiClient };
+api.interceptors.response.use(
+  ({ data }) => Promise.resolve(data),
+  (error) => {
+    if (error.response.status === 401) {
+      window.location.href = `${process.env.BACKEND_URL}/api/login`;
+    }
+    return Promise.reject(error);
+  },
+);
+
+export { api, templateLibraryApiClient };

src/boot/vue-simple-acl.js

@@ -4,21 +4,26 @@ import { computed } from 'vue';
 import { useUserStore } from 'stores/UserStore';
 
 const userStore = useUserStore();
-const userRoles = computed(() => ({ roles: userStore.roles }));
+const userPermissions = computed(() => ({ permissions: userStore.permissions }));
+
+const findPermission = (user, action, entity) => user.permissions.find(
+  ({ action: userAction, entity: userEntity }) => userAction === action && userEntity === entity,
+);
+
 const rules = () => defineAclRules((setRule) => {
-  setRule('admin', (user) => process.env.HAS_BACKEND && process.env.ADMIN_URL && user.roles.includes('admin'));
-  setRule('create-diagram', (user) => !process.env.HAS_BACKEND || user.roles.includes('CF_createDiagram'));
-  setRule('create-diagram-from-template', (user) => !process.env.HAS_BACKEND || user.roles.includes('CF_createDiagramFromTemplate'));
-  setRule('create-component', (user) => !process.env.HAS_BACKEND || user.roles.includes('CF_createComponent'));
-  setRule('create-component-from-template', (user) => !process.env.HAS_BACKEND || user.roles.includes('CF_createComponentFromTemplate'));
-  setRule('create-project', (user) => !process.env.HAS_BACKEND || user.roles.includes('CF_createProject'));
-  setRule('create-project-from-template', (user) => !process.env.HAS_BACKEND || user.roles.includes('CF_createProjectFromTemplate'));
-  setRule('delete-diagram', (user) => !process.env.HAS_BACKEND || user.roles.includes('CF_deleteDiagram'));
+  setRule('admin', (user) => process.env.HAS_BACKEND && findPermission(user, 'ACCESS', 'ADMIN'));
+  setRule('create-diagram', (user) => !process.env.HAS_BACKEND || findPermission(user, 'CREATE', 'DIAGRAM'));
+  setRule('create-diagram-from-template', (user) => !process.env.HAS_BACKEND || findPermission(user, 'CREATE', 'DIAGRAM_TEMPLATE'));
+  setRule('create-component', (user) => !process.env.HAS_BACKEND || findPermission(user, 'CREATE', 'COMPONENT'));
+  setRule('create-component-from-template', (user) => !process.env.HAS_BACKEND || findPermission(user, 'CREATE', 'COMPONENT_TEMPLATE'));
+  setRule('create-project', (user) => !process.env.HAS_BACKEND || findPermission(user, 'CREATE', 'COMPONENT'));
+  setRule('create-project-from-template', (user) => !process.env.HAS_BACKEND || findPermission(user, 'CREATE', 'COMPONENT_TEMPLATE'));
+  setRule('delete-diagram', (user) => !process.env.HAS_BACKEND || findPermission(user, 'DELETE', 'DIAGRAM'));
 });
 
 export default boot(({ app }) => {
   app.use(createAcl({
-    user: userRoles,
+    user: userPermissions,
     rules,
     disabledAttrTitle: 'Custom Disabled Title',
   }));

src/components/menu/ModelizerSettingsMenu.vue

@@ -14,9 +14,9 @@
         text-color="white"
         size="md"
         font-size="12px"
-        :title="`${userStore.firstname} ${userStore.username}`"
+        :title="userStore.login"
       >
-        {{ userInitials }}
+        {{ userStore.name?.at(0) }}
       </q-avatar>
       <q-avatar
         v-else
@@ -29,19 +29,31 @@
       />
     </template>
     <q-list>
-      <q-item>
+      <q-item
+        v-if="!(userStore?.isEmpty)"
+      >
         <q-item-section>
           <q-item-label overline>
-            {{ userStore.firstname }}
+            {{ userStore.name }}
           </q-item-label>
           <q-item-label caption>
-            {{ userStore.username }}
+            {{ userStore.login }}
           </q-item-label>
-          <q-item-label caption>
+          <q-item-label
+            v-if="userStore.email"
+            caption
+          >
             {{ userStore.email }}
           </q-item-label>
         </q-item-section>
       </q-item>
+      <q-item v-else>
+        <q-item-section>
+          <q-item-label overline>
+            {{ $t('page.modelizer.settings.user.unknown') }}
+          </q-item-label>
+        </q-item-section>
+      </q-item>
       <template
         v-for="menuItem in menuItems"
         :key="menuItem.key"
@@ -122,9 +134,6 @@ const menuItems = computed(() => [
     visible: !!props.projectName,
   },
 ]);
-const userInitials = computed(
-  () => userStore.value.firstname?.at(0).toUpperCase(),
-);
 
 /**
  * Send event to open the dialog corresponding to the key.

src/i18n/en-US/index.js

@@ -227,8 +227,8 @@ export default {
       },
     },
     authentication: {
-      login: 'An error occured while login. Please check your leto-modelizer-api.',
-      fetchingData: 'An error occured while fetching data',
+      fetchingUserInformation: 'An error occured while fetching user data information',
+      fetchingUserPermissions: 'An error occured while fetching user data permissions',
     },
   },
   error404: {