.drone.yml

@@ -15,14 +15,19 @@ trigger:
 
 steps:
   - name: reuse
-    image: fsfe/reuse
+    image: fsfe/reuse:3.0.2-debian
   - name: lint
-    image: node:20
+    image: node:20.12.2
     commands:
       - npm ci
       - npm run lint
-  - name: docker-build
-    image: plugins/docker
+  - name: audit
+    image: node:20.12.2
+    commands:
+      - npm install -g better-npm-audit
+      - better-npm-audit audit --production --level=moderate
+  - name: docker-dry-run
+    image: plugins/docker:20.17.3
     settings:
       registry: git.wtf-eg.de
       repo: git.wtf-eg.de/kompetenzinventar/frontend
@@ -45,7 +50,7 @@ depends_on:
 
 steps:
   - name: docker-publish
-    image: plugins/docker
+    image: plugins/docker:20.17.3
     settings:
       registry: git.wtf-eg.de
       repo: git.wtf-eg.de/kompetenzinventar/frontend
@@ -72,7 +77,7 @@ depends_on:
 
 steps:
   - name: deploy-dev
-    image: appleboy/drone-ssh
+    image: appleboy/drone-ssh:1.7.5
     settings:
       host:
         - dev01.wtf-eg.net
@@ -94,14 +99,14 @@ trigger:
 
 steps:
   - name: reuse
-    image: fsfe/reuse
+    image: fsfe/reuse:3.0.2-debian
   - name: lint
-    image: node:20
+    image: node:20.12.2
     commands:
       - npm ci
       - npm run lint
   - name: docker-publish
-    image: plugins/docker
+    image: plugins/docker:20.17.3
     settings:
       registry: git.wtf-eg.de
       repo: git.wtf-eg.de/kompetenzinventar/frontend

.eslintrc.js

@@ -8,10 +8,13 @@ module.exports = {
     'eslint:recommended'
   ],
   parserOptions: {
-    parser: 'babel-eslint'
+    parser: '@babel/eslint-parser'
   },
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'vue/multi-word-component-names': 'off',
+    'vue/no-useless-template-attributes': 'off',
+    'vue/no-reserved-component-names': 'off'
   }
 }

Dockerfile

@@ -2,7 +2,7 @@
 #
 # SPDX-License-Identifier: AGPL-3.0-or-later
 
-FROM node:14-alpine as builder
+FROM node:20.12.2-alpine as builder
 
 COPY package.json package-lock.json ./
 RUN npm install
@@ -15,7 +15,7 @@ COPY src src
 RUN npm ci && npm run build
 
 
-FROM nginx as ki-frontend
+FROM nginx:1.24-alpine as ki-frontend
 
 LABEL org.opencontainers.image.source=https://git.wtf-eg.de/kompetenzinventar/ki-frontend.git
 LABEL org.opencontainers.image.url=https://git.wtf-eg.de/kompetenzinventar/ki-frontend

README.md

@@ -41,6 +41,14 @@ Folgende Kanäle gibt es für die Kommunikation über das Kompetenzinventar:
 npm ci
 ```
 
+### Pre requirements
+
+* Node 20
+  * Wenn du eine andere node version installiert hast, kannst du [nvm](https://github.com/nvm-sh/nvm) benutzen um schnell zwischen node version zu wechseln
+* NPM
+* (KI-backend)[https://git.wtf-eg.de/kompetenzinventar/ki-backend] muss lokal laufen
+
+
 ### Konfigurationsdatei anpassen
 
 ```
@@ -48,7 +56,6 @@ cp public/config.js.dev public/config.js
 vi public/config.js
 ```
 
-
 ### Compiles and hot-reloads for development
 ```
 npm run serve

package.json

@@ -1,28 +1,28 @@
 {
   "name": "@wtf/ki-frontend",
-  "version": "0.1.0",
+  "version": "1.1.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.5.0",
-    "@vue/cli-plugin-eslint": "^4.5.0",
-    "@vue/cli-plugin-router": "^4.5.0",
-    "@vue/cli-service": "^4.5.0",
-    "@vue/compiler-sfc": "^3.0.0",
-    "babel-eslint": "^10.1.0",
-    "bootstrap": "^5.0.1",
-    "bootstrap-icons": "^1.5.0",
-    "core-js": "^3.6.5",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^7.0.0",
-    "sass": "^1.37.5",
-    "sass-loader": "^10.2.0",
-    "v-tooltip": "^4.0.0-alpha.1",
-    "vue": "^3.0.0",
-    "vue-router": "^4.0.0-0",
-    "vuex": "^4.0.2"
+    "@babel/eslint-parser": "7.23.10",
+    "@vue/cli-plugin-babel": "~5.0.8",
+    "@vue/cli-plugin-eslint": "~5.0.8",
+    "@vue/cli-plugin-router": "~5.0.8",
+    "@vue/cli-service": "~5.0.8",
+    "@vue/compiler-sfc": "^3.4.19",
+    "bootstrap": "^5.3.3",
+    "bootstrap-icons": "^1.11.3",
+    "core-js": "^3.38.1",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^9.27.0",
+    "sass": "^1.77.8",
+    "sass-loader": "^14.2.1",
+    "v-tooltip": "^4.0.0-beta.17",
+    "vue": "^3.4.0",
+    "vue-router": "^4.4.3",
+    "vuex": "^4.1.0"
   }
 }

src/components/AutoComplete.vue

@@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
     @update-values="this.$emit('update-values', this.values)"
   >
   </profile-list>
-  <div v-bind="$attrs" class="card-body">
+  <div v-bind="$attrs" class="card-body bg-white">
     <div class="row">
       <div class="col-12 col-md-4 col-lg-3 col-xl-2">
         <div class="form-control-plaintext form-control-sm">Eintrag hinzufügen:</div>
@@ -34,7 +34,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
         <div v-if="searchResults">
           <ul class="list-group">
             <li
-              class="list-group-item"
+              class="list-group-item bg-white"
               v-for="result in searchResults"
               :key="result.id"
               @click="addResult(result)"

src/components/Paginator.vue

@@ -14,6 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
     >
       <span
         class="page-link pointer"
+        :class="{ 'bg-white': page !== current }"
         @click="onPageClicked(page)"
       >
         {{ page }}

src/components/ProfileList.vue

@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 <template>
   <ul class="list-group list-group-flush">
     <li
-      class="list-group-item"
+      class="list-group-item bg-white"
       v-for="(value, valueKey) in values"
       :key="value.id"
     >

src/components/SearchResult.vue

@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
     class="text-decoration-none d-flex"
     :to="{ path: `/s/profile/${profile.user_id}` }"
   >
-    <div class="card w-100">
+    <div class="card w-100 bg-white">
       <div class="card-body d-flex">
         <div class="d-flex align-items-center justify-content-center me-3">
           <Avatar :name="profile.nickname"/>

src/components/profile/Section.vue

@@ -11,7 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
     </h3>
     <div class="card w-100">
       <slot name="card-body">
-        <div class="card-body">
+        <div class="card-body bg-white">
           <slot></slot>
         </div>
       </slot>

src/views/profile/Edit.vue

@@ -167,7 +167,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
             </Section>
 
             <Section title="Sonstiges">
-              <div class="mb-3">
+              <div class="mb-3 bg-white">
                 <label class="form-label">Über mich</label>
                 <textarea
                   class="form-control"