Merge pull request #583 from aziontech/dev

DEPLOY 2024.01.18

.eslintrc.cjs

@@ -19,6 +19,7 @@ module.exports = {
   },
   rules: {
     'no-case-declarations': 0,
-    'no-console': 'error'
+    'no-console': 'error',
+    'id-length': ['error', { min: 2 }]
   }
 }

.husky/pre-push

@@ -2,4 +2,4 @@
 . "$(dirname -- "$0")/_/husky.sh"
 
 yarn build
-
+rm -rf dist

package.json

@@ -1,6 +1,6 @@
 {
   "name": "azion-platform-kit",
-  "version": "1.6.2",
+  "version": "1.7.0",
   "private": true,
   "type": "module",
   "repository": {

src/assets/themes/scss/themes/azion-dark/_extensions.scss

@@ -26,4 +26,5 @@
   @import '../azion-dark/extended-components/progressbar';
   @import '../azion-dark/extended-components/dialog';
   @import '../azion-dark/extended-components/multiselect';
+  @import '../azion-dark/extended-components/picklist';
 }

src/assets/themes/scss/themes/azion-dark/extended-components/_divider.scss

@@ -1,4 +1,5 @@
 .p-divider {
+  padding-inline: 12px !important;
   .p-divider-content {
     background-color: $panelContentBg;
     font-weight: 500 !important;
@@ -9,11 +10,11 @@
     padding: $dividerHorizontalPadding;
 
     &:before {
-      border-top: 1px solid var(--surface-border);
+      border: 1px solid var(--surface-border);
     }
 
     .p-divider-content {
-      padding: 0 $inlineSpacing;
+      padding: $inlineSpacing;
     }
   }
 

src/assets/themes/scss/themes/azion-dark/extended-components/_picklist.scss

@@ -0,0 +1,24 @@
+// Custom PickList
+.p-picklist {
+  .p-picklist-buttons {
+    .p-button {
+      background-color: transparent;
+      transition: all 150ms;
+      border: 1px solid var(--surface-border);
+      color: $textSecondaryColor !important;
+    }
+    .p-button:hover {
+      background-color: var(--surface-hover) !important;
+    }
+  }
+  .p-picklist-list {
+    .p-picklist-item {
+      padding: 0 0.5rem !important;
+      font-size: 0.875rem;
+      min-height: 2.375rem !important;
+      border-radius: $borderRadius;
+      display: flex;
+      align-items: center;
+    }
+  }
+}

src/assets/themes/scss/themes/azion-light/_extensions.scss

@@ -26,4 +26,5 @@
   @import '../azion-light/extended-components/progressbar';
   @import '../azion-light/extended-components/dialog';
   @import '../azion-light/extended-components/multiselect';
+  @import '../azion-light/extended-components/picklist';
 }

src/assets/themes/scss/themes/azion-light/extended-components/_divider.scss

@@ -1,4 +1,5 @@
 .p-divider {
+  padding-inline: 12px !important;
   .p-divider-content {
     background-color: $panelContentBg;
     font-weight: 500 !important;
@@ -14,6 +15,7 @@
 
     .p-divider-content {
       padding: 0 $inlineSpacing;
+      z-index: 0;
     }
   }
 
@@ -27,12 +29,14 @@
 
     .p-divider-content {
       padding: $inlineSpacing 0;
+      background-color: transparent;
     }
   }
 
   &.p-divider-dashed {
     &.p-divider-horizontal:before {
       border-style: dashed;
+      background-color: transparent;
     }
   }
 }

src/assets/themes/scss/themes/azion-light/extended-components/_picklist.scss

@@ -0,0 +1,24 @@
+// Custom PickList
+.p-picklist {
+  .p-picklist-buttons {
+    .p-button {
+      background-color: transparent;
+      transition: all 150ms;
+      border: 1px solid var(--surface-border);
+      color: $textSecondaryColor !important;
+    }
+    .p-button:hover {
+      background-color: var(--surface-hover) !important;
+    }
+  }
+  .p-picklist-list {
+    .p-picklist-item {
+      padding: 0 0.5rem !important;
+      font-size: 0.875rem;
+      min-height: 2.375rem !important;
+      border-radius: $borderRadius;
+      display: flex;
+      align-items: center;
+    }
+  }
+}

src/helpers/account-handler.js

@@ -1,3 +1,4 @@
+import { ProccessRequestError } from '@/services/axios/errors'
 import { AccountNotFoundError } from '@/services/axios/errors/account-not-found-error'
 
 export class AccountHandler {
@@ -25,7 +26,7 @@ export class AccountHandler {
         pageSize: 1
       })
 
-      if (firstResult && firstResult.accountId) {
+      if (firstResult?.accountId) {
         return firstResult.accountId
       }
     }
@@ -59,4 +60,47 @@ export class AccountHandler {
 
     window.location.replace('/')
   }
+
+  /**
+   * Refreshes the given refresh service.
+   *
+   * @param {Function} refreshService - The service to refreshed token.
+   * @return {Promise} - A promise that resolves when the refresh is complete.
+   * @throws {ProccessRequestError} - Throws an error if the refresh fails.
+   */
+  static async refresh(refreshService) {
+    try {
+      await refreshService()
+    } catch {
+      throw new ProccessRequestError().message
+    }
+  }
+
+  /**
+   * Asynchronously switches the account from a social IDP.
+   *
+   * @param {function} verifyService - The function that verifies the service.
+   * @param {function} refreshService - The function that refreshes the service.
+   * @return {string | object} The URL string or object to redirect to.
+   */
+  async switchAccountFromSocialIdp(verifyService, refreshService) {
+    try {
+      const { twoFactor, trustedDevice, user_tracking_info: userInfo } = await verifyService()
+
+      if (!userInfo) {
+        return '/login'
+      }
+
+      if (twoFactor) {
+        const mfaRoute = trustedDevice ? 'authentication' : 'setup'
+        return `/mfa/${mfaRoute}`
+      }
+
+      const { account_id: accountId } = userInfo.props
+
+      return this.switchAndReturnAccountPage(accountId)
+    } catch {
+      await AccountHandler.refresh(refreshService)
+    }
+  }
 }

src/helpers/azion-documentation-catalog.js

@@ -24,7 +24,10 @@ export const documentationCatalog = {
   users: () => openSearchResult('users'),
   activityHistory: () => openSearchResult('activity history'),
   edgeNodes: () => openSearchResult('edge nodes'),
-  records: () => openSearchResult('records')
+  records: () => openSearchResult('records'),
+  waf: () => openSearchResult('waf'),
+  wafAllowed: () => openSearchResult('Allowed Rules'),
+  wafTuning: () => openSearchResult('Tuning')
 }
 
 export const documentationGuideProducts = {

src/helpers/index.js

@@ -1,35 +1,37 @@
-import { clipboardWrite } from './clipboard'
 import { documentationCatalog, documentationGuideProducts } from './azion-documentation-catalog'
 import {
-  openDocumentation,
   openAPIDocumentation,
   openContactSupport,
-  openSearchResult,
-  openGoogleAuthenticatorAppDocumentation
+  openDocumentation,
+  openGoogleAuthenticatorAppDocumentation,
+  openSearchResult
 } from './azion-documentation-window-opener'
-import InviteSession from './invite-session'
-import { themeSelect } from './theme-select'
 import { azionPrivacyPolicyWindowOpener } from './azion-privacy-policy-opener'
 import { azionTermsAndServicesWindowOpener } from './azion-terms-and-services-opener'
-import { parseCamelToSnake, parseSnakeToCamel } from './parse-api-body'
+import { clipboardWrite } from './clipboard'
 import { getEnvironmentFromUrl } from './get-environment-from-url'
 import { getFirstApiError } from './get-first-api-error'
+import InviteSession from './invite-session'
+import { metricsPlaygroundOpener } from './metrics-playground-opener'
+import { parseCamelToSnake, parseSnakeToCamel } from './parse-api-body'
+import { themeSelect } from './theme-select'
 
 export {
-  themeSelect,
+  InviteSession,
+  azionPrivacyPolicyWindowOpener,
+  azionTermsAndServicesWindowOpener,
   clipboardWrite,
   documentationCatalog,
   documentationGuideProducts,
-  openDocumentation,
+  getEnvironmentFromUrl,
+  getFirstApiError,
+  metricsPlaygroundOpener,
   openAPIDocumentation,
   openContactSupport,
-  InviteSession,
-  azionPrivacyPolicyWindowOpener,
-  azionTermsAndServicesWindowOpener,
+  openDocumentation,
+  openGoogleAuthenticatorAppDocumentation,
+  openSearchResult,
   parseCamelToSnake,
   parseSnakeToCamel,
-  openSearchResult,
-  getEnvironmentFromUrl,
-  openGoogleAuthenticatorAppDocumentation,
-  getFirstApiError
+  themeSelect
 }

src/helpers/metrics-playground-opener.js

@@ -0,0 +1,3 @@
+export const metricsPlaygroundOpener = () => {
+  window.open('https://azion.com', '_blank')
+}

src/helpers/parse-api-body.js

@@ -1,5 +1,5 @@
 const snakeToCamelCase = (str) => {
-  return str.replace(/_([a-z])/g, function (_, letter) {
+  return str.replace(/_([a-z])/g, function (__, letter) {
     return letter.toUpperCase()
   })
 }

src/router/hooks/afterEachRoute.js

@@ -0,0 +1,6 @@
+import { useLoadingStore } from '@/stores/loading'
+
+export default function afterEachRoute() {
+  const loadingStore = useLoadingStore()
+  loadingStore.finishLoading()
+}

src/router/hooks/beforeEachRoute.js

@@ -1,10 +1,12 @@
-import { getUserInfoService, getAccountInfoService } from '@/services/account-services'
+import { getAccountInfoService, getUserInfoService } from '@/services/account-services'
 import { logoutService } from '@/services/auth-services'
 import { useAccountStore } from '@/stores/account'
+import { useLoadingStore } from '@/stores/loading'
 
-export default async function beforeEachRoute(to, _, next) {
+export default async function beforeEachRoute(to, __, next) {
   const accountStore = useAccountStore()
-  const cliCallbackURLs = ['/cli-callback-fail', '/cli-callback-success']
+  const loadingStore = useLoadingStore()
+
   // TODO: remove the usage of localStorage when API returns the theme
   const theme = localStorage.getItem('theme')
 
@@ -17,8 +19,10 @@ export default async function beforeEachRoute(to, _, next) {
     return next()
   }
 
-  if (cliCallbackURLs.includes(to.path)) {
-    return next()
+  loadingStore.startLoading()
+
+  if (to.meta?.hideLoading) {
+    loadingStore.finishLoading()
   }
 
   if (!accountStore.hasActiveUserId && !to.meta.isPublic) {

src/router/index.js

@@ -1,34 +1,40 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { accountRoutes } from '@routes/account-routes'
+import { activityHistoryRoutes } from '@routes/activity-history-routes'
+import { cliCallbackRoutes } from '@routes/cli-callback-routes'
+import { createNewRoutes } from '@routes/create-new-routes'
+import { credentialsRoutes } from '@routes/credentials-routes'
 import { dataStreamingRoutes } from '@routes/data-streaming-routes'
 import { digitalCertificatesRoutes } from '@routes/digital-certificates-routes'
 import { domainsRoutes } from '@routes/domains-routes'
-import { homeRoutes } from '@routes/home-routes'
 import { edgeApplicationRoutes } from '@routes/edge-application-routes'
 import { edgeFirewallRoutes } from '@routes/edge-firewall-routes'
 import { edgeFunctionsRoutes } from '@routes/edge-functions-routes'
+import { edgeNodeRoutes } from '@routes/edge-node-routes'
 import { edgePulseRoutes } from '@routes/edge-pulse-routes'
 import { edgeServicesRoutes } from '@routes/edge-services-routes'
+import { errorRoutes } from '@routes/error-routes'
+import { homeRoutes } from '@routes/home-routes'
 import { intelligentDnsRoutes } from '@routes/intelligent-dns-routes'
 import { loginRoutes } from '@routes/login-routes'
+import { marketplaceRoutes } from '@routes/marketplace-routes'
+import { metricsRoutes } from '@routes/metrics-routes'
+import { mfaRoutes } from '@routes/mfa-routes'
 import { networkListsRoutes } from '@routes/network-lists-routes'
+import { passwordRoutes } from '@routes/password-routes'
 import { personalTokensRoutes } from '@routes/personal-tokens-routes'
-import { variablesRoutes } from '@routes/variables-routes'
-import { edgeNodeRoutes } from '@routes/edge-node-routes'
-import { credentialsRoutes } from '@routes/credentials-routes'
+import { playgroundRoutes } from '@routes/playground-routes'
 import { realTimePurgeRoutes } from '@routes/real-time-purge'
+import { signupRoutes } from '@routes/signup-routes'
+import { switchAccountRoutes } from '@routes/switch-account-routes'
 import { teamsPermissionRoutes } from '@routes/team-permission'
 import { usersListsRoutes } from '@routes/users-routes'
-import { passwordRoutes } from '@routes/password-routes'
-import { activityHistoryRoutes } from '@routes/activity-history-routes'
-import { errorRoutes } from '@routes/error-routes'
-import { playgroundRoutes } from '@routes/playground-routes'
-import { createNewRoutes } from '@routes/create-new-routes'
-import { mfaRoutes } from '@routes/mfa-routes'
-import { signupRoutes } from '@routes/signup-routes'
-import { marketplaceRoutes } from '@routes/marketplace-routes'
-import { accountRoutes } from '@/router/routes/account-routes'
-import { settingsRoutes } from '@/router/routes/your-settings-routes'
-import { cliCallbackRoutes } from '@/router/routes/cli-callback-routes'
+import { variablesRoutes } from '@routes/variables-routes'
+import { wafRulesRoutes } from '@routes/waf-rules-routes'
+import { settingsRoutes } from '@routes/your-settings-routes'
+
+import { createRouter, createWebHistory } from 'vue-router'
+
+import afterEachRoute from './hooks/afterEachRoute'
 import beforeEachRoute from './hooks/beforeEachRoute'
 
 const router = createRouter({
@@ -60,12 +66,16 @@ const router = createRouter({
     realTimePurgeRoutes,
     teamsPermissionRoutes,
     signupRoutes,
+    switchAccountRoutes,
     marketplaceRoutes,
     accountRoutes,
-    settingsRoutes
+    settingsRoutes,
+    wafRulesRoutes,
+    metricsRoutes
   ].concat(errorRoutes)
 })
 
 router.beforeEach(beforeEachRoute)
+router.afterEach(afterEachRoute)
 
 export default router