upgrade frontend stack

*.dt.ts

@@ -0,0 +1,8 @@
+declare module 'vue' {
+  import { CompatVue } from '@vue/runtime-dom'
+  const Vue: CompatVue
+  export default Vue
+  export * from '@vue/runtime-dom'
+  const { configureCompat } = Vue
+  export { configureCompat }
+}

.editorconfig

@@ -0,0 +1,6 @@
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue}]
+charset = utf-8
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true

.env.deploy

@@ -1,2 +1,2 @@
-NODE_ENV=production
-VUE_APP_DJANGO_PATH=
+VITE_NODE_ENV=production
+VITE_VUE_APP_DJANGO_PATH=

.env.development

@@ -1,3 +1,3 @@
-NODE_ENV=development
-VUE_APP_DJANGO_PATH=http://localhost:8000
-# VUE_APP_DJANGO_PATH=https://acc.dashboard.internet.nl
+VITE_NODE_ENV=development
+VITE_VUE_APP_DJANGO_PATH=http://localhost:8000
+# VITE_VUE_APP_DJANGO_PATH=https://acc.dashboard.internet.nl

.env.development.example

@@ -1,3 +1,3 @@
-NODE_ENV=development
-VUE_APP_DJANGO_PATH=http://localhost:8000
-# VUE_APP_DJANGO_PATH=https://dashboard.internet.nl
+VITE_NODE_ENV=development
+VITE_VUE_APP_DJANGO_PATH=http://localhost:8000
+# VITE_VUE_APP_DJANGO_PATH=https://dashboard.internet.nl

.env.production

@@ -1,3 +1,3 @@
-NODE_ENV=production
-VUE_APP_DJANGO_PATH=http://localhost:8000
-# VUE_APP_DJANGO_PATH=https://dashboard.internet.nl
+VITE_NODE_ENV=production
+VITE_VUE_APP_DJANGO_PATH=http://localhost:8000
+# VITE_VUE_APP_DJANGO_PATH=https://dashboard.internet.nl

.env.staging

@@ -1,2 +1,2 @@
-NODE_ENV=production
-VUE_APP_DJANGO_PATH=https://acc.dashboard.internet.nl
+VITE_NODE_ENV=production
+VITE_VUE_APP_DJANGO_PATH=https://acc.dashboard.internet.nl

.gitignore

@@ -1,26 +1,34 @@
-.DS_Store
-node_modules
-/dist
-
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
 
 # Editor directories and files
+.vscode/*
+!.vscode/extensions.json
 .idea
-.vscode
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
 
+*.tsbuildinfo
+
 # development
 .env.development
+template_app

.gitlab-ci.yml

@@ -0,0 +1,13 @@
+# You can override the included template(s) by including variable overrides
+# SAST customization: https://docs.gitlab.com/ee/user/application_security/sast/#customizing-the-sast-settings
+# Secret Detection customization: https://docs.gitlab.com/ee/user/application_security/secret_detection/pipeline/#customization
+# Dependency Scanning customization: https://docs.gitlab.com/ee/user/application_security/dependency_scanning/#customizing-the-dependency-scanning-settings
+# Container Scanning customization: https://docs.gitlab.com/ee/user/application_security/container_scanning/#customizing-the-container-scanning-settings
+# Note that environment variables can be set in several places
+# See https://docs.gitlab.com/ee/ci/variables/#cicd-variable-precedence
+stages:
+- test
+sast:
+  stage: test
+include:
+- template: Security/SAST.gitlab-ci.yml

.prettierrc.json

@@ -0,0 +1,7 @@
+
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 100
+}

Dockerfile

@@ -1,9 +1,6 @@
 # Build container to serve static content
 FROM node AS build
 
-# https://github.com/webpack/webpack/issues/14532
-ENV NODE_OPTIONS=--openssl-legacy-provider
-
 RUN mkdir /src
 WORKDIR /src
 
@@ -14,7 +11,7 @@ ADD package-lock.json package-lock.json
 RUN make setup
 
 ADD . /src/
-RUN make build-gui-deploy
+RUN make build
 
 # Copy all compiled content into simple http server container
 FROM nginx

Makefile

@@ -18,22 +18,20 @@ $(vue-cli):
 	npm install
 vue-cli: | $(vue-cli)
 
-run: vue-cli ## only run the gui
-	# the extra -- is because of hell and fail. https://github.com/vuejs/vue-cli/issues/1528
-	# Because of a legacy stuff this flag needs to be set. This is also set in the deployed environment
-	NODE_OPTIONS=--openssl-legacy-provider npm run serve -- --mode development
-
-run-csp: vue-cli
-	npm run serve -- --mode production
-
-build-gui-staging: vue-cli
-	npm run build -- --mode staging
-
-build-gui-production: vue-cli
-	npm run build -- --mode production
-
-build-gui-deploy: vue-cli
-	npm run build -- --mode deploy
+run: vue-cli
+	npm run dev
+
+# run-csp: vue-cli
+# 	npm run serve -- --mode production
+#
+# build-gui-staging: vue-cli
+# 	npm run build -- --mode staging
+#
+# build-gui-production: vue-cli
+# 	npm run build -- --mode production
+
+build: vue-cli
+	npm run build
 
 pull_image:
 	# optimize build by caching previously build image

README.md

@@ -1,25 +1,51 @@
 # dashboard_frontend
 
-## Project setup
-```
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vite.dev/config/).
+
+## Project Setup
+
+```sh
 npm install
 ```
 
-### Compiles and hot-reloads for development
-```
-npm run serve
-```
+### Compile and Hot-Reload for Development
 
-### Compiles and minifies for production
+```sh
+make run
 ```
-npm run build
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+make build
 ```
 
-### Lints and fixes files
+### Run Unit Tests with [Vitest](https://vitest.dev/)
+
+```sh
+npm run test:unit
 ```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
 npm run lint
 ```
 
+
+
 ## Translations
 Translations are maintained by babeledit in the locales directory. A mapping.md is present
 that helps mapping from the merged-to-js internet.nl repository values to dashboard metrics.
@@ -47,10 +73,3 @@ make push_image
 
 ## Step 2: on the server run the update
 /usr/local/bin/dashboard-frontend-update
-
-
-# issues:
-
-## ERR_OSSL_EVP_UNSUPPORTED
-`export NODE_OPTIONS=--openssl-legacy-provider`
-https://stackoverflow.com/questions/69394632/webpack-build-failing-with-err-ossl-evp-unsupported