📄 Add license for new script

With an entrypoint script, fill the configuration template from an
environment variable containing the KI API URL.

.dockerignore

@@ -1,11 +1,2 @@
-.browserslistrc
-.dockerignore
-.drone.yml
-.editorconfig
 .git
-.gitignore
-.reuse
-Dockerfile
-LICENSES
-README.md
 node_modules

.drone.yml

@@ -15,27 +15,12 @@ trigger:
 
 steps:
   - name: reuse
-    image: fsfe/reuse:4.0.3-debian@sha256:20e70745bf4aa1d37f4ac054f4df045e4f7df7f4ec95d7abd2e263aa1323f399
+    image: fsfe/reuse
   - name: lint
-    image: node:20.18.0-alpine@sha256:c13b26e7e602ef2f1074aef304ce6e9b7dd284c419b35d89fcf3cc8e44a8def9
+    image: node:20
     commands:
       - npm ci
-      - npm run lint -- --no-fix
-  - name: audit
-    image: node:20.18.0-alpine@sha256:c13b26e7e602ef2f1074aef304ce6e9b7dd284c419b35d89fcf3cc8e44a8def9
-    commands:
-      - npm install -g better-npm-audit
-      - better-npm-audit audit --production --level=moderate
-  - name: docker-dry-run
-    image: plugins/docker:20.18.4@sha256:a8d3d86853c721492213264815f1d00d3ed13f42f5c1855a02f47fa4d5f1e042
-    settings:
-      registry: git.wtf-eg.de
-      repo: git.wtf-eg.de/kompetenzinventar/frontend
-      target: ki-frontend
-      dry_run: true
-    when:
-      event:
-        - pull_request
+      - npm run lint
 
 ---
 kind: pipeline
@@ -53,7 +38,7 @@ depends_on:
 
 steps:
   - name: docker-publish
-    image: plugins/docker:20.18.4@sha256:a8d3d86853c721492213264815f1d00d3ed13f42f5c1855a02f47fa4d5f1e042
+    image: plugins/docker
     settings:
       registry: git.wtf-eg.de
       repo: git.wtf-eg.de/kompetenzinventar/frontend
@@ -80,7 +65,7 @@ depends_on:
 
 steps:
   - name: deploy-dev
-    image: appleboy/drone-ssh:1.7.5@sha256:995677e073454912f26d4c0fdd2f9df2e1f5a30d6603d3f2ece667311b6babb3
+    image: appleboy/drone-ssh
     settings:
       host:
         - dev01.wtf-eg.net
@@ -102,14 +87,14 @@ trigger:
 
 steps:
   - name: reuse
-    image: fsfe/reuse:4.0.3-debian@sha256:20e70745bf4aa1d37f4ac054f4df045e4f7df7f4ec95d7abd2e263aa1323f399
+    image: fsfe/reuse
   - name: lint
-    image: node:20.18.0-alpine@sha256:c13b26e7e602ef2f1074aef304ce6e9b7dd284c419b35d89fcf3cc8e44a8def9
+    image: node:20
     commands:
       - npm ci
-      - npm run lint -- --no-fix
+      - npm run lint
   - name: docker-publish
-    image: plugins/docker:20.18.4@sha256:a8d3d86853c721492213264815f1d00d3ed13f42f5c1855a02f47fa4d5f1e042
+    image: plugins/docker
     settings:
       registry: git.wtf-eg.de
       repo: git.wtf-eg.de/kompetenzinventar/frontend

.eslintrc.js

@@ -8,13 +8,10 @@ module.exports = {
     'eslint:recommended'
   ],
   parserOptions: {
-    parser: '@babel/eslint-parser'
+    parser: 'babel-eslint'
   },
   rules: {
     'no-console': 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'
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
   }
 }

.reuse/dep5

@@ -0,0 +1,28 @@
+Format: https://www.debian.org/doc/packaging-manuals/copyright-format/1.0/
+Upstream-Name: ki-frontend
+Upstream-Contact: Scammo <kontakt@samuelbrinkmann.de>
+Source: https://git.wtf-eg.de/kompetenzinventar/ki-frontend
+
+Files: package.json package-lock.json
+Copyright: WTF Kooperative eG <https://wtf-eg.de/>
+License: AGPL-3.0-or-later
+
+Files: .browserslistrc .dockerignore .eslintrc.js .gitignore 
+Copyright: WTF Kooperative eG <https://wtf-eg.de/>
+License: AGPL-3.0-or-later
+
+Files: src/assets/img/wtf*
+Copyright: WTF Kooperative eG <https://wtf-eg.de/>
+License: LicenseRef-WTF
+
+Files: src/assets/language_level.json src/assets/skill_level.json
+Copyright: WTF Kooperative eG <https://wtf-eg.de/>
+License: AGPL-3.0-or-later
+
+Files: public/img/bootstrap-icons-1.5.0/*
+Copyright: Copyright (c) 2019-2020 The Bootstrap Authors
+License: MIT
+
+Files: public/fonts/Lato*
+Copyright: 2010-2015, Łukasz Dziedzic (dziedzic@typoland.com)
+License: OFL-1.1-RFN

Dockerfile

@@ -2,27 +2,27 @@
 #
 # SPDX-License-Identifier: AGPL-3.0-or-later
 
-FROM node:20.18.0-alpine@sha256:c13b26e7e602ef2f1074aef304ce6e9b7dd284c419b35d89fcf3cc8e44a8def9 as builder
+FROM node:14-alpine as builder
 
-COPY package.json package-lock.json ./
-RUN npm install
-
-COPY .eslintrc.js .
-COPY babel.config.js .
-COPY public public
-COPY src src
+COPY . ./
 
 RUN npm ci && npm run build
 
 
-FROM nginx:1.27-alpine@sha256:2140dad235c130ac861018a4e13a6bc8aea3a35f3a40e20c1b060d51a7efd250 as ki-frontend
+FROM nginx as ki-frontend
+
+COPY --from=builder /dist/ /usr/share/nginx/html/
+COPY etc/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf
 
 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
 LABEL org.opencontainers.image.documentation=https://git.wtf-eg.de/kompetenzinventar/ki-frontend#docker
 LABEL org.opencontainers.image.vendor="WTF Kooperative eG"
 
+ENV KI_API_URL http://ki-backend:5000
+
 WORKDIR /usr/share/nginx/html
 
 COPY etc/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf
+COPY configure.sh /docker-entrypoint.d/
 COPY --from=builder /dist .

README.md

@@ -41,14 +41,6 @@ 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
 
 ```
@@ -56,6 +48,7 @@ cp public/config.js.dev public/config.js
 vi public/config.js
 ```
 
+
 ### Compiles and hot-reloads for development
 ```
 npm run serve

REUSE.toml

@@ -1,40 +0,0 @@
-version = 1
-SPDX-PackageName = "ki-frontend"
-SPDX-PackageSupplier = "Scammo <kontakt@samuelbrinkmann.de>"
-SPDX-PackageDownloadLocation = "https://git.wtf-eg.de/kompetenzinventar/ki-frontend"
-
-[[annotations]]
-path = ["package.json", "package-lock.json", "renovate.json"]
-precedence = "aggregate"
-SPDX-FileCopyrightText = "WTF Kooperative eG <https://wtf-eg.de/>"
-SPDX-License-Identifier = "AGPL-3.0-or-later"
-
-[[annotations]]
-path = [".browserslistrc", ".dockerignore", ".eslintrc.js", ".gitignore", "REUSE.toml"]
-precedence = "aggregate"
-SPDX-FileCopyrightText = "WTF Kooperative eG <https://wtf-eg.de/>"
-SPDX-License-Identifier = "AGPL-3.0-or-later"
-
-[[annotations]]
-path = "src/assets/img/wtf**"
-precedence = "aggregate"
-SPDX-FileCopyrightText = "WTF Kooperative eG <https://wtf-eg.de/>"
-SPDX-License-Identifier = "LicenseRef-WTF"
-
-[[annotations]]
-path = ["src/assets/language_level.json", "src/assets/skill_level.json"]
-precedence = "aggregate"
-SPDX-FileCopyrightText = "WTF Kooperative eG <https://wtf-eg.de/>"
-SPDX-License-Identifier = "AGPL-3.0-or-later"
-
-[[annotations]]
-path = "public/img/bootstrap-icons-1.5.0/**"
-precedence = "aggregate"
-SPDX-FileCopyrightText = "Copyright (c) 2019-2020 The Bootstrap Authors"
-SPDX-License-Identifier = "MIT"
-
-[[annotations]]
-path = "public/fonts/Lato**"
-precedence = "aggregate"
-SPDX-FileCopyrightText = "2010-2015, Łukasz Dziedzic (dziedzic@typoland.com)"
-SPDX-License-Identifier = "OFL-1.1-RFN"

configure.sh

@@ -0,0 +1,13 @@
+#!/bin/bash
+# SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
+#
+# SPDX-License-Identifier: AGPL-3.0-or-later
+
+set -o errexit
+set +x
+
+: ${KI_API_URL:=http://ki-backend:5000}
+
+sed -e "s%\$KI_API_URL%$KI_API_URL%g" /usr/share/nginx/html/config.js.in > /usr/share/nginx/html/config.js
+
+exec "$@"

package.json

@@ -1,31 +1,28 @@
 {
   "name": "@wtf/ki-frontend",
-  "version": "1.1.0",
+  "version": "0.1.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "7.25.9",
-    "@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.5.6",
-    "bootstrap": "5.3.3",
-    "bootstrap-icons": "1.11.3",
-    "core-js": "3.39.0",
-    "eslint": "8.57.1",
-    "eslint-plugin-vue": "9.30.0",
-    "sass": "1.80.4",
-    "sass-loader": "16.0.3",
-    "v-tooltip": "4.0.0-beta.17",
-    "vue": "3.5.6",
-    "vue-router": "4.4.5",
-    "vuex": "4.1.0"
-  },
-  "optionalDependencies": {
-    "sass-embedded": "1.80.4"
+    "@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"
   }
 }

public/config.js.in

@@ -0,0 +1,7 @@
+// SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
+//
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+window.ki = {
+  apiUrl: "$KI_API_URL"
+}

renovate.json

@@ -1,21 +0,0 @@
-{
-  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": [
-    "config:best-practices",
-    "group:linters",
-    "group:test",
-    "npm:unpublishSafe",
-    ":disableDependencyDashboard",
-    ":maintainLockFilesWeekly",
-    ":pinAllExceptPeerDependencies",
-    ":separateMultipleMajorReleases"
-  ],
-  "packageRules": [
-    {
-      "matchPackageNames": [
-        "node"
-      ],
-      "allowedVersions": "/^[1-9][02468]\\./"
-    }
-  ]
-}

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 bg-white">
+  <div v-bind="$attrs" class="card-body">
     <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 bg-white"
+              class="list-group-item"
               v-for="result in searchResults"
               :key="result.id"
               @click="addResult(result)"

src/components/Paginator.vue

@@ -14,7 +14,6 @@ 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 bg-white"
+      class="list-group-item"
       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 bg-white">
+    <div class="card w-100">
       <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 bg-white">
+        <div class="card-body">
           <slot></slot>
         </div>
       </slot>

src/mixins/request.mixin.js

@@ -95,11 +95,10 @@ export default {
         console.error(error);
       }
     },
-    async submitFormEdit(isProfileVisible) {
+    async submitFormEdit() {
       this.showErrorMessage = false
       this.showSuccessMessage = false
       const userId = store.state.currentUserId
-      this.profile.visible = isProfileVisible;
 
       try {
         const body = JSON.stringify(this.profile)

src/views/profile/Edit.vue

@@ -12,8 +12,25 @@ SPDX-License-Identifier: AGPL-3.0-or-later
       </div>
     </div>
     <div class="container">
-      <form @submit.prevent="submitFormEdit(false)">
+      <form @submit.prevent="submitFormEdit()">
         <Section title="Grunddaten">
+          <div class="mb-4">
+            <div class="form-check form-switch">
+              <input
+                class="form-check-input"
+                type="checkbox"
+                role="switch"
+                v-model="profile.visible"
+                id="visibility"
+              >
+              <label
+                class="form-check-label"
+                for="visibility">
+                Profil für angemeldete Benutzer sichtbar
+              </label>
+            </div>
+          </div>
+
           <div class="row mb-4">
             <div class="col-12 col-md-4 mb-3 mb-md-0">
               <label class="form-label">Nickname</label>
@@ -167,7 +184,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
             </Section>
 
             <Section title="Sonstiges">
-              <div class="mb-3 bg-white">
+              <div class="mb-3">
                 <label class="form-label">Über mich</label>
                 <textarea
                   class="form-control"
@@ -205,17 +222,11 @@ SPDX-License-Identifier: AGPL-3.0-or-later
               <i class="bi bi-check-lg"></i>
               Gespeichert
             </div>
-            <button
-              class="btn btn-secondary ms-3"
-              @click="submitFormEdit(false)"
-            >
-              Entwurf Speichern
-            </button>
             <button
               class="btn btn-primary ms-3"
-              @click="submitFormEdit(true)"
+              @click="submitFormEdit()"
             >
-              Speichern und Veröffentlichen
+              Speichern
             </button>
           </div>
         </div>