tno-ssi-lab · Quitlox · Apr 12, 2023 · Apr 12, 2023 · Apr 12, 2023 · Apr 13, 2023
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -2,11 +2,9 @@ module.exports = {
   root: true,
   env: {
     node: true,
+    es2015:true,
   },
   extends: ["plugin:vue/recommended", "eslint:recommended", "@vue/prettier"],
-  parserOptions: {
-    parser: "babel-eslint",
-  },
   rules: {
     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
     "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",

diff --git a/Dockerfile b/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:lts
+FROM node:16-slim
 
 RUN npm install --global @vue/cli
 
@@ -13,7 +13,7 @@ WORKDIR /app
 COPY package.json yarn.lock ./
 
 # Install all Packages
-RUN yarn install
+RUN yarn install --frozen-lockfile
 
 # Copy all other source code to work directory
 COPY . ./
@@ -22,4 +22,4 @@ ENV SSI_SERVER_URL=https://path/to/my/server
 
 EXPOSE 8080
 
-CMD [ "yarn", "run", "serve" ]
+CMD [ "yarn", "run", "dev"]
diff --git a/babel.config.js b/babel.config.js
diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -4,13 +4,14 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <link rel="icon" href="/favicon.ico" />
+    <script type="module" src="/src/main.js"></script>
+    <title>TNO EASSI</title>
   </head>
   <body class="bg-light">
     <noscript>
       <strong>
-        We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
+        We're sorry but TNO EASSI doesn't work
         properly without JavaScript enabled. Please enable it to continue.
       </strong>
     </noscript>

diff --git a/package.json b/package.json
@@ -3,39 +3,36 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
   },
   "dependencies": {
     "@privacybydesign/irmajs": "^0.2.3",
+    "@vitejs/plugin-vue": "^1.6.1",
+    "@vue/compiler-sfc": "^3.2.47",
     "axios": "^0.24.0",
     "bootstrap-vue": "^2.21.2",
-    "core-js": "^3.20.2",
     "socket.io-client": "2.3.0",
+    "vite": "^2.5.4",
+    "vite-plugin-vue2": "1.9.0",
     "vue": "^2.6.14",
     "vue-router": "^3.5.3",
-    "vue-socket.io-extended": "^4.2.0"
+    "vue-socket.io-extended": "^4.2.0",
+    "vue-template-compiler": "^2.7.14"
   },
   "devDependencies": {
-    "@babel/polyfill": "^7.12.1",
-    "@vue/cli-plugin-babel": "~4.5.15",
-    "@vue/cli-plugin-eslint": "~4.5.15",
-    "@vue/cli-plugin-router": "~4.5.15",
-    "@vue/cli-service": "~4.5.15",
     "@vue/eslint-config-prettier": "^6.0.0",
-    "babel-eslint": "^10.1.0",
     "bootstrap": "^4.6.1",
-    "eslint": "^6.8.0",
-    "eslint-plugin-prettier": "^3.4.1",
-    "eslint-plugin-vue": "^6.2.2",
-    "mutationobserver-shim": "^0.3.7",
+    "eslint": "8",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "8",
     "popper.js": "^1.16.1",
     "portal-vue": "^2.1.7",
-    "prettier": "^1.19.1",
+    "prettier": "^2.4.1",
     "sass": "^1.47.0",
-    "sass-loader": "^12.4.0",
-    "vue-cli-plugin-bootstrap-vue": "~0.8.2",
-    "vue-template-compiler": "^2.6.14"
+    "vite-plugin-rewrite-all": "^1.0.1"
   }
 }
diff --git a/src/components/ConnectorCard.vue b/src/components/ConnectorCard.vue
@@ -26,19 +26,15 @@
     <template #footer>
       <div class="d-inline-flex mx-1">
         <a :href="connector.appleDownloadUrl" target="_blank" @click.stop>
-          <b-img
-            class="store-badge"
-            src="../assets/app-store-badge.svg"
-            fluid
-          />
+          <b-img class="store-badge" :src="appStoreBadge" fluid />
         </a>
       </div>
       <div class="d-inline-flex mx-1">
         <a :href="connector.googleDownloadUrl" target="_blank" @click.stop>
           <b-img
             class="store-badge"
             alt="Get it on Google Play"
-            src="../assets/google-play-badge.svg"
+            :src="googlePlayBadge"
             fluid
           />
         </a>
@@ -48,6 +44,9 @@
 </template>
 
 <script>
+import appStoreBadge from "@/assets/app-store-badge.svg";
+import googlePlayBadge from "@/assets/google-play-badge.svg";
+
 export default {
   name: "ConnectorCard",
   props: {
@@ -56,6 +55,12 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      googlePlayBadge: googlePlayBadge,
+      appStoreBadge: appStoreBadge,
+    };
+  },
 };
 </script>
 

diff --git a/src/components/PerformCredentialRequest.vue b/src/components/PerformCredentialRequest.vue
@@ -29,15 +29,15 @@ import axios from "axios";
 
 import { CONNECTORS } from "../constants";
 import ConnectorImage from "./ConnectorImage.vue";
-import JolocomIssue from "./JolocomIssue.vue";
-import JolocomVerify from "./JolocomVerify.vue";
-import IrmaVerify from "./IrmaVerify.vue";
-import IndyIssue from "./IndyIssue.vue";
-import IndyVerify from "./IndyVerify.vue";
-import IdaIssue from "./IdaIssue.vue";
-import IdaVerify from "./IdaVerify.vue";
-import TrinsicIssue from "./TrinsicIssue.vue";
-import TrinsicVerify from "./TrinsicVerify.vue";
+import JolocomIssue from "./connectors/jolocom/JolocomIssue.vue";
+import JolocomVerify from "./connectors/jolocom/JolocomVerify.vue";
+import IrmaVerify from "./connectors/irma/IrmaVerify.vue";
+import IndyIssue from "./connectors/indy/IndyIssue.vue";
+import IndyVerify from "./connectors/indy/IndyVerify.vue";
+import IdaIssue from "./connectors/ida/IdaIssue.vue";
+import IdaVerify from "./connectors/ida/IdaVerify.vue";
+import TrinsicIssue from "./connectors/trinsic/TrinsicIssue.vue";
+import TrinsicVerify from "./connectors/trinsic/TrinsicVerify.vue";
 
 const componentMap = {
   jolocom: {

diff --git a/src/components/IdaIssue.vue → src/components/connectors/ida/IdaIssue.vue b/src/components/IdaIssue.vue → src/components/connectors/ida/IdaIssue.vue
diff --git a/src/components/IdaVerify.vue → src/components/connectors/ida/IdaVerify.vue b/src/components/IdaVerify.vue → src/components/connectors/ida/IdaVerify.vue
diff --git a/src/components/IndyConnectionModal.vue → ...s/connectors/indy/IndyConnectionModal.vue b/src/components/IndyConnectionModal.vue → ...s/connectors/indy/IndyConnectionModal.vue
diff --git a/src/components/IndyIssue.vue → src/components/connectors/indy/IndyIssue.vue b/src/components/IndyIssue.vue → src/components/connectors/indy/IndyIssue.vue
diff --git a/src/components/IndyVerify.vue → ...components/connectors/indy/IndyVerify.vue b/src/components/IndyVerify.vue → ...components/connectors/indy/IndyVerify.vue
diff --git a/src/components/IrmaSession.vue → ...omponents/connectors/irma/IrmaSession.vue b/src/components/IrmaSession.vue → ...omponents/connectors/irma/IrmaSession.vue
diff --git a/src/components/IrmaVerify.vue → ...components/connectors/irma/IrmaVerify.vue b/src/components/IrmaVerify.vue → ...components/connectors/irma/IrmaVerify.vue
diff --git a/src/components/JolocomIssue.vue → ...nents/connectors/jolocom/JolocomIssue.vue b/src/components/JolocomIssue.vue → ...nents/connectors/jolocom/JolocomIssue.vue
diff --git a/src/components/JolocomVerify.vue → ...ents/connectors/jolocom/JolocomVerify.vue b/src/components/JolocomVerify.vue → ...ents/connectors/jolocom/JolocomVerify.vue
diff --git a/src/components/TrinsicConnectionModal.vue → ...ectors/trinsic/TrinsicConnectionModal.vue b/src/components/TrinsicConnectionModal.vue → ...ectors/trinsic/TrinsicConnectionModal.vue
diff --git a/src/components/TrinsicIssue.vue → ...nents/connectors/trinsic/TrinsicIssue.vue b/src/components/TrinsicIssue.vue → ...nents/connectors/trinsic/TrinsicIssue.vue
diff --git a/src/components/TrinsicVerify.vue → ...ents/connectors/trinsic/TrinsicVerify.vue b/src/components/TrinsicVerify.vue → ...ents/connectors/trinsic/TrinsicVerify.vue
diff --git a/src/constants.js b/src/constants.js
@@ -1,9 +1,15 @@
+import jolocomImageUrl from '@/assets/connector-jolocom-logo.svg';
+import irmaImageUrl from '@/assets/connector-irma-logo.svg';
+import indyImageUrl from '@/assets/connector-indy-logo.png';
+import idaImageUrl from '@/assets/connector-ida-logo.png';
+import trinsicImageUrl from '@/assets/connector-trinsic-logo.jpg';
+
 export const CONNECTORS = [
   {
     name: "jolocom",
     title: "Jolocom",
     walletProviderUrl: "https://jolocom.io/",
-    imageUrl: require("./assets/connector-jolocom-logo.svg"),
+    imageUrl: jolocomImageUrl,
     appleDownloadUrl:
       "https://apps.apple.com/us/app/jolocom-smartwallet/id1223869062",
     googleDownloadUrl:
@@ -13,7 +19,7 @@ export const CONNECTORS = [
     name: "irma",
     title: "IRMA",
     walletProviderUrl: "https://irma.app/",
-    imageUrl: require("./assets/connector-irma-logo.svg"),
+    imageUrl: irmaImageUrl,
     appleDownloadUrl:
       "https://apps.apple.com/nl/app/irma-authenticatie/id1294092994",
     googleDownloadUrl:
@@ -23,7 +29,7 @@ export const CONNECTORS = [
     name: "indy",
     title: "Esatus",
     walletProviderUrl: "https://esatus.com/",
-    imageUrl: require("./assets/connector-indy-logo.png"),
+    imageUrl: indyImageUrl,
     appleDownloadUrl:
       "https://apps.apple.com/us/app/esatus-wallet/id1496769057",
     googleDownloadUrl:
@@ -33,7 +39,7 @@ export const CONNECTORS = [
     name: "ida",
     title: "Datakeeper",
     walletProviderUrl: "https://rabobank.nl/",
-    imageUrl: require("./assets/connector-ida-logo.png"),
+    imageUrl: idaImageUrl,
     appleDownloadUrl:
       "https://apps.apple.com/nl/app/ida/id1546059184",
     googleDownloadUrl:
@@ -43,7 +49,7 @@ export const CONNECTORS = [
     name: "trinsic",
     title: "Trinsic",
     walletProviderUrl: "https://trinsic.id/",
-    imageUrl: require("./assets/connector-trinsic-logo.jpg"),
+    imageUrl: trinsicImageUrl,
     appleDownloadUrl:
       "https://apps.apple.com/nl/app/trinsic-wallet/id1475160728",
     googleDownloadUrl:

diff --git a/src/main.js b/src/main.js
@@ -1,5 +1,3 @@
-import "@babel/polyfill";
-import "mutationobserver-shim";
 import Vue from "vue";
 import "./plugins/bootstrap-vue";
 import "./plugins/sockets";

diff --git a/src/plugins/bootstrap-vue.js b/src/plugins/bootstrap-vue.js
@@ -1,7 +1,7 @@
-import Vue from "vue";
-
-import BootstrapVue from "bootstrap-vue";
-import "bootstrap/dist/css/bootstrap.min.css";
-import "bootstrap-vue/dist/bootstrap-vue.css";
-
-Vue.use(BootstrapVue);
+import Vue from "vue";
+
+import BootstrapVue from "bootstrap-vue";
+import "bootstrap/dist/css/bootstrap.min.css";
+import "bootstrap-vue/dist/bootstrap-vue.css";
+
+Vue.use(BootstrapVue);
diff --git a/src/router/index.js b/src/router/index.js
@@ -108,8 +108,8 @@ const routes = [
 ];
 
 const router = new VueRouter({
-  mode: process.env.NODE_ENV === "development" ? "hash" : "history", // FIXME history in production.
-  base: process.env.BASE_URL,
+  mode: import.meta.env.NODE_ENV === "development" ? "hash" : "history", // FIXME history in production.
+  base: import.meta.env.BASE_URL,
   routes,
 });
 

diff --git a/src/views/CreateIssueRequest.vue b/src/views/CreateIssueRequest.vue
@@ -1,10 +1,6 @@
 <template>
   <div class="issue">
-    <create-credential-request
-      :token="token"
-      type="issue"
-      @choice="handleChoice"
-    >
+    <create-credential-request :token="token" type="issue" @choice="handleChoice">
       <div class="py-5 text-center">
         <h2>Select your Wallet app</h2>
         <p>
@@ -20,7 +16,7 @@
 import CreateCredentialRequest from "../components/CreateCredentialRequest.vue";
 
 export default {
-  name: "Issue",
+  name: "CreateIssueRequest",
   components: {
     CreateCredentialRequest,
   },

diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -67,7 +67,7 @@ import ConnectorCard from "../components/ConnectorCard.vue";
 import { CONNECTORS } from "../constants";
 
 export default {
-  name: "Home",
+  name: "Home", // eslint-disable-line vue/multi-word-component-names
 
   components: {
     ConnectorCard,
@@ -98,4 +98,4 @@ export default {
     font-size: 50%;
     opacity: 0.75;
   }
-</style>
+</style>
diff --git a/src/views/Utils.vue b/src/views/Utils.vue
@@ -35,4 +35,7 @@
 //     this.$router.push("/utils/create-token");
 //   },
 // };
+  export default{
+    name: "Utils" // eslint-disable-line 
+  }
 </script>
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,12 @@
+  {
+    "include": [
+      "./src/**/*"
+    ],
+    "compilerOptions": {
+      "module": "es2015",
+      "moduleResolution": "node",
+      "target": "es6",
+      "sourceMap": true,
+      "allowJs": true
+    }
+  }
diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,40 @@
+import { defineConfig } from "vite";
+// import vue from '@vitejs/plugin-vue' // vue3
+import { createVuePlugin as vue } from "vite-plugin-vue2";
+
+// Needed for devServer to prevent dots ('.') in a URL breaking routing
+import pluginRewriteAll from "vite-plugin-rewrite-all";
+
+const path = require("path");
+export default defineConfig({
+  plugins: [vue(), pluginRewriteAll()],
+  server: {
+    host: "0.0.0.0",
+    port: 8080,
+    strictPort: true,
+    cors: {
+      origin: [
+        ".gitpod.io",
+        ".eu.ngrok.io",
+        "localhost",
+        "authn.io",
+        "backend",
+        "frontend",
+      ],
+    },
+    proxy: {
+      "^/api": {
+        target: "http://backend:3000",
+        changeOrigin: true,
+        ws: true,
+      },
+    },
+  },
+  resolve: {
+    alias: {
+      // Ensure we don't have to add .vue to imports
+      extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+});
diff --git a/vue.config.js b/vue.config.js