Merge branch 'CorentinTh:main' into main

.eslintrc-auto-import.json

@@ -96,7 +96,6 @@
     "toReactive": true,
     "toRef": true,
     "toRefs": true,
-    "toValue": true,
     "triggerRef": true,
     "tryOnBeforeMount": true,
     "tryOnBeforeUnmount": true,

.github/workflows/codeql-analysis.yml

@@ -41,7 +41,7 @@ jobs:
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@v1
+      uses: github/codeql-action/init@v2
       with:
         languages: ${{ matrix.language }}
         # If you wish to specify custom queries, you can do so here or in a config file.
@@ -52,7 +52,7 @@ jobs:
     # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
     # If this step fails, then you should remove it and run the build manually (see below)
     - name: Autobuild
-      uses: github/codeql-action/autobuild@v1
+      uses: github/codeql-action/autobuild@v2
 
     # ℹ️ Command-line programs to run using the OS shell.
     # 📚 https://git.io/JvXDl
@@ -66,4 +66,4 @@ jobs:
     #   make release
 
     - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v1
+      uses: github/codeql-action/analyze@v2

.github/workflows/e2e-tests.yml

@@ -1,26 +1,44 @@
 name: E2E tests
-on:
+on: [deployment_status]
-  pull_request:
+
-  push:
-    branches:
-      - main
 jobs:
   test:
+    if: github.event.deployment_status.state == 'success'
     timeout-minutes: 60
     runs-on: ubuntu-latest
+    env:
+      BASE_URL: ${{ github.event.deployment_status.target_url }}
     strategy:
       matrix:
         shard: [1/3, 2/3, 3/3]
     steps:
       - uses: actions/checkout@v3
+
       - run: corepack enable
+
       - uses: actions/setup-node@v3
         with:
           node-version: 16
           cache: 'pnpm'
+
+      - name: Get Playwright version
+        id: playwright-version
+        run: echo "PLAYWRIGHT_VERSION=$(jq -r .dependencies.playwright package.json)" >> "$GITHUB_OUTPUT"
+
       - name: Install dependencies
         run: pnpm install
+
+      - name: Restore Playwright browsers from cache
+        uses: actions/cache@v3
+        with:
+          path: ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ steps.playwright-version.outputs.PLAYWRIGHT_VERSION }}-${{ hashFiles('**/playwright.config.ts') }}
+          restore-keys: |
+            ${{ runner.os }}-playwright-${{ steps.playwright-version.outputs.PLAYWRIGHT_VERSION }}-
+            ${{ runner.os }}-playwright-
+
       - name: Install Playwright Browsers
         run: pnpm exec playwright install --with-deps
+
       - name: Run Playwright tests
         run: pnpm run test:e2e --shard=${{ matrix.shard }}

.gitignore

@@ -31,3 +31,5 @@ coverage
 /test-results/
 /playwright-report/
 /playwright/.cache/
+# Webkit with playwright creates a salt file
+salt

.nvmrc

@@ -1 +1 @@
-16.20.1
+18.16.1

package.json

@@ -42,7 +42,7 @@
     "@vicons/material": "^0.12.0",
     "@vicons/tabler": "^0.12.0",
     "@vueuse/core": "^10.1.2",
-    "@vueuse/head": "^0.9.0",
+    "@vueuse/head": "^1.0.0",
     "@vueuse/router": "^9.13.0",
     "bcryptjs": "^2.4.3",
     "change-case": "^4.1.2",
@@ -79,6 +79,7 @@
     "vue": "^3.3.4",
     "vue-i18n": "^9.2.2",
     "vue-router": "^4.1.6",
+    "vue-tsc": "^1.8.1",
     "xml-formatter": "^3.3.2",
     "yaml": "^2.2.1"
   },
@@ -94,7 +95,7 @@
     "@types/lodash": "^4.14.192",
     "@types/mime-types": "^2.1.1",
     "@types/netmask": "^2.0.0",
-    "@types/node": "^16.18.23",
+    "@types/node": "^18.0.0",
     "@types/node-forge": "^1.3.2",
     "@types/prettier": "^2.7.2",
     "@types/qrcode": "^1.5.0",
@@ -106,7 +107,6 @@
     "@vitejs/plugin-vue": "^2.3.4",
     "@vitejs/plugin-vue-jsx": "^1.3.10",
     "@vue/compiler-sfc": "^3.2.47",
-    "@vue/runtime-core": "^3.2.47",
     "@vue/runtime-dom": "^3.3.4",
     "@vue/test-utils": "^2.3.2",
     "@vue/tsconfig": "^0.1.3",
@@ -116,17 +116,16 @@
     "jsdom": "^19.0.0",
     "less": "^4.1.3",
     "prettier": "^2.8.7",
-    "typescript": "~4.5.5",
+    "typescript": "~4.9.0",
     "unocss": "^0.53.0",
     "unplugin-icons": "^0.16.1",
     "unplugin-vue-components": "^0.25.0",
-    "vite": "^2.9.15",
+    "vite": "^4.0.0",
-    "vite-plugin-md": "^0.12.4",
+    "vite-plugin-pwa": "^0.16.0",
-    "vite-plugin-pwa": "^0.11.13",
+    "vite-plugin-vue-markdown": "^0.23.5",
-    "vite-svg-loader": "^3.6.0",
+    "vite-svg-loader": "^4.0.0",
     "vitest": "^0.32.0",
-    "vue-tsc": "^0.31.4",
+    "workbox-window": "^7.0.0",
-    "workbox-window": "^6.5.4",
     "zx": "^7.2.1"
   }
 }

playwright.config.ts

@@ -1,10 +1,7 @@
 import { defineConfig, devices } from '@playwright/test';
 
-/**
+const isCI = !!process.env.CI;
- * Read environment variables from file.
+const baseUrl = process.env.BASE_URL || 'http://localhost:5050';
- * https://github.com/motdotla/dotenv
- */
-// require('dotenv').config();
 
 /**
  * See https://playwright.dev/docs/test-configuration.
@@ -15,17 +12,17 @@ export default defineConfig({
   /* Run tests in files in parallel */
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
-  forbidOnly: !!process.env.CI,
+  forbidOnly: isCI,
   /* Retry on CI only */
-  retries: process.env.CI ? 2 : 0,
+  retries: isCI ? 2 : 0,
   /* Opt out of parallel tests on CI. */
-  workers: process.env.CI ? 1 : undefined,
+  workers: isCI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: 'html',
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: 'http://127.0.0.1:3000',
+    baseURL: baseUrl,
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
@@ -51,32 +48,17 @@ export default defineConfig({
       name: 'webkit',
       use: { ...devices['Desktop Safari'] },
     },
-
-    /* Test against mobile viewports. */
-    // {
-    //   name: 'Mobile Chrome',
-    //   use: { ...devices['Pixel 5'] },
-    // },
-    // {
-    //   name: 'Mobile Safari',
-    //   use: { ...devices['iPhone 12'] },
-    // },
-
-    /* Test against branded browsers. */
-    // {
-    //   name: 'Microsoft Edge',
-    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
-    // },
-    // {
-    //   name: 'Google Chrome',
-    //   use: { ..devices['Desktop Chrome'], channel: 'chrome' },
-    // },
   ],
 
   /* Run your local dev server before starting the tests */
-  webServer: {
+
-    command: 'npm run dev',
+  ...(isCI
-    url: 'http://127.0.0.1:3000',
+    ? {}
-    reuseExistingServer: !process.env.CI,
+    : {
-  },
+        webServer: {
+          command: 'npm run preview',
+          url: 'http://127.0.0.1:5050',
+          reuseExistingServer: true,
+        },
+      }),
 });

src/layouts/base.layout.vue

@@ -84,9 +84,8 @@ const tools = computed<ToolCategory[]>(() => [
     </template>
 
     <template #content>
-      <div class="navigation">
+      <div flex items-center justify-center gap-2>
         <c-button
-          :size="styleStore.isSmallScreen ? 'medium' : 'large'"
           circle
           variant="text"
           aria-label="Toggle menu"
@@ -104,9 +103,11 @@ const tools = computed<ToolCategory[]>(() => [
           Home
         </n-tooltip>
 
-        <command-palette mx-2 />
+        <command-palette />
 
-        <NavbarButtons v-if="!styleStore.isSmallScreen" />
+        <div>
+          <NavbarButtons v-if="!styleStore.isSmallScreen" />
+        </div>
 
         <n-tooltip trigger="hover">
           <template #trigger>
@@ -206,21 +207,4 @@ const tools = computed<ToolCategory[]>(() => [
     }
   }
 }
-
-// ::v-deep(.n-menu-item-content-header) {
-//   overflow: visible !important;
-//   // overflow-x: hidden !important;
-// }
-
-.navigation {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: row;
-
-  .search-bar {
-    // width: 100%;
-    flex-grow: 1;
-  }
-}
 </style>

src/tools/otp-code-generator-and-validator/otp-code-generator.e2e.spec.ts

@@ -2,6 +2,9 @@ import { expect, test } from '@playwright/test';
 
 test.describe('Tool - OTP code generator', () => {
   test.beforeEach(async ({ page }) => {
+    await page.addInitScript(() => {
+      Date.now = () => 1609477200000; // Jan 1, 2021
+    });
     await page.goto('/otp-generator');
   });
 
@@ -18,10 +21,6 @@ test.describe('Tool - OTP code generator', () => {
   });
 
   test('OTP a generated from the provided secret', async ({ page }) => {
-    page.evaluate(() => {
-      Date.now = () => 1609477200000; // Jan 1, 2021
-    });
-
     await page.getByPlaceholder('Paste your TOTP secret...').fill('ITTOOLS');
 
     const previousOtp = await page.getByTestId('previous-otp').innerText();

vite.config.ts

@@ -4,7 +4,7 @@ import { resolve } from 'node:path';
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx';
-import markdown from 'vite-plugin-md';
+import markdown from 'vite-plugin-vue-markdown';
 import svgLoader from 'vite-svg-loader';
 import { VitePWA } from 'vite-plugin-pwa';
 import AutoImport from 'unplugin-auto-import/vite';