📄 Add license for new script

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

.drone.yml

@@ -4,22 +4,103 @@
 # SPDX-License-Identifier: AGPL-3.0-or-later
 kind: pipeline
 type: docker
-name: default
+name: qa
+
+trigger:
+  event:
+    - push
+    - pull_request
+  branch:
+    - main
 
 steps:
-- name: reuse
+  - name: reuse
-  image: fsfe/reuse:latest
+    image: fsfe/reuse
-- name: docker-publish
+  - name: lint
+    image: node:20
+    commands:
+      - npm ci
+      - npm run lint
+
+---
+kind: pipeline
+type: docker
+name: build
+
+trigger:
+  event:
+    - push
+  branch:
+    - main
+
+depends_on:
+  - qa
+
+steps:
+  - name: docker-publish
     image: plugins/docker
     settings:
-    registry: registry.wtf-eg.net
+      registry: git.wtf-eg.de
-    repo: registry.wtf-eg.net/ki-frontend
+      repo: git.wtf-eg.de/kompetenzinventar/frontend
       target: ki-frontend
       auto_tag: true
       username:
         from_secret: "docker_username"
       password:
         from_secret: "docker_password"
-  when:
+
+---
+kind: pipeline
+type: docker
+name: deploy
+
+trigger:
+  event:
+    - push
   branch:
     - main
+
+depends_on:
+  - build
+
+steps:
+  - name: deploy-dev
+    image: appleboy/drone-ssh
+    settings:
+      host:
+        - dev01.wtf-eg.net
+      username: drone_deployment
+      key:
+        from_secret: "dev01_deployment_key"
+      command_timeout: 2m
+      script:
+        - echo "Executing forced command..."
+
+---
+kind: pipeline
+type: docker
+name: tag-release
+
+trigger:
+  event:
+    - tag
+
+steps:
+  - name: reuse
+    image: fsfe/reuse
+  - name: lint
+    image: node:20
+    commands:
+      - npm ci
+      - npm run lint
+  - name: docker-publish
+    image: plugins/docker
+    settings:
+      registry: git.wtf-eg.de
+      repo: git.wtf-eg.de/kompetenzinventar/frontend
+      target: ki-frontend
+      auto_tag: true
+      username:
+        from_secret: "docker_username"
+      password:
+        from_secret: "docker_password"

Dockerfile

@@ -13,3 +13,16 @@ 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 .

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 "$@"

etc/nginx/conf.d/default.conf

@@ -9,10 +9,24 @@ server {
 
     #access_log  /var/log/nginx/host.access.log  main;
 
-    location / {
     root   /usr/share/nginx/html;
-        index  index.html index.htm;
+
-        try_files $uri $uri/ /index.html;
+    # routes without dots serve the index.html without caching
+    location / {
+        add_header Cache-Control "no-cache";
+        try_files $uri $uri/index.html /index.html;
+    }
+  
+    # static js and css files that get replaced instead of updated
+    location ~ \.(js|css) {
+        add_header Cache-Control "public, max-age=31536000, immutable";
+        try_files $uri =404;
+    }
+  
+    # cache other static files for 30 days
+    location ~ \.(?!html) {
+        add_header Cache-Control "public, max-age=2592000";
+        try_files $uri =404;
     }
 
     #error_page  404              /404.html;

package.json

@@ -7,10 +7,10 @@
     "lint": "vue-cli-service lint"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-babel": "^4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-eslint": "^4.5.0",
-    "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-plugin-router": "^4.5.0",
-    "@vue/cli-service": "~4.5.0",
+    "@vue/cli-service": "^4.5.0",
     "@vue/compiler-sfc": "^3.0.0",
     "babel-eslint": "^10.1.0",
     "bootstrap": "^5.0.1",

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"
+}

src/components/Footer.vue

@@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
           <div class="fw-bold text-white mb-2">Kompetenzinventar</div>
           <ul class="list-unstyled">
             <li><a href="https://git.wtf-eg.de/kompetenzinventar">Quellcode</a></li>
-            <li><a href="https://git.wtf-eg.de/kompetenzinventar/ki-frontend/issues/new">Problem melden</a></li>
+            <li><a href="https://git.wtf-eg.de/kompetenzinventar/ki-doku/issues/new/choose">Problem melden</a></li>
           </ul>
         </div>
       </div>

src/components/Paginator.vue

@@ -1,3 +1,9 @@
+<!--
+SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
 <template>
   <ul class="pagination">
     <li

src/components/profile/Header.vue

@@ -16,6 +16,14 @@ SPDX-License-Identifier: AGPL-3.0-or-later
           </span>
         </div>
       </div>
+      <div v-if="profile?.address?.name">
+        <div class="d-flex align-items-center">
+          <i class="fs-4 bi bi-person-fill text-dark mx-2"></i>
+          <div class="text-white">
+            a.k.a. {{ profile.address.name }}
+          </div>
+        </div>
+      </div>
       <div v-if="location">
         <div class="d-flex align-items-center">
           <i class="fs-4 bi bi-geo-alt-fill text-dark mx-2"></i>

src/store/search.js

@@ -42,17 +42,17 @@ export default {
       state.errorMessage = errorMessage
     },
     setQuerySearch(state, search) {
-      state.query.search = search
+      state.query = {...state.query, search}
     },
     setPages(state, pages) {
       state.pages = pages
     },
     setQueryPage(state, page) {
-      state.query.page = page
+      state.query = {...state.query, page}
     }
   },
   actions: {
-    async search({state, commit, rootState}) {
+    async search({state, commit, rootState, dispatch}) {
       if (state.searching) {
         return
       }
@@ -91,8 +91,19 @@ export default {
         return
       }
 
+      console.log(response.ok)
+      console.log(response.status)
+      console.log(state.query.page)
+
       clearTimeout(timeoutId)
 
+      if (!response.ok && response.status === 404 && state.query.page != 1) {
+        commit('setQueryPage', 1)
+        commit('setSearching', false)
+        await dispatch('search')
+        return
+      }
+
       if (!response.ok) {
         commit('setError', true)
         commit('clearProfiles')

src/views/Search.vue

@@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
                     class="form-control"
                     id="searchText"
                     v-model="searchText"
-                    placeholder="Nick, Fähigkeit, Sprache"
+                    placeholder="Nick, Name, Fähigkeit, Sprache"
                     ref="searchTextInput"
                   />
                 </div>
@@ -161,11 +161,16 @@ export default {
     }
   },
   created() {
-    if (this.$route.query.query !== undefined) {
+    if (this.$route.query.query) {
       this.searchText = this.$route.query.query
       this.$store.commit('search/clearProfiles')
     }
 
+    if (this.$route.query.page) {
+      this.currentPage = parseInt(this.$route.query.page, 10)
+      this.$store.commit('search/clearProfiles')
+    }
+
     this.$store.dispatch('search/search')
   }
 };

src/views/profile/Edit.vue

@@ -32,7 +32,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
           </div>
 
           <div class="row mb-4">
-            <div class="col-6 mb-3">
+            <div class="col-12 col-md-4 mb-3 mb-md-0">
               <label class="form-label">Nickname</label>
               <input
                 type="text"
@@ -43,7 +43,17 @@ SPDX-License-Identifier: AGPL-3.0-or-later
                 required
               />
             </div>
-            <div class="col-6 mb-3">
+            <div class="col-12 col-md-4 mb-3 mb-md-0">
+              <label class="form-label">Klarname (optional)</label>
+              <input
+                type="text"
+                class="form-control"
+                id="realname"
+                maxlength="25"
+                v-model="profile.address.name"
+              />
+            </div>
+            <div class="col-12 col-md-4">
               <label class="form-label">
                 Pronomen
                 <i class="bi bi-info-circle" v-tooltip="pronounsTooltip"></i>

src/views/profile/View.vue

@@ -75,7 +75,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
           <label class="form-label fw-bold">
             Anmerkungen
           </label>
-          <div>{{ profile.availability_text }}</div>
+          <div class="line-break-text">{{ profile.availability_text }}</div>
         </div>
       </Section>
 
@@ -98,11 +98,11 @@ SPDX-License-Identifier: AGPL-3.0-or-later
         title="Sonstiges">
         <div v-if="profile.freetext" :class="{ 'lh-base': true, 'mb-4': profile.volunteerwork }">
           <h5>Über mich</h5>
-          {{ profile.freetext }}
+           <div class="line-break-text">{{ profile.freetext }}</div>
         </div>
         <div v-if="profile.volunteerwork" class="lh-base">
           <h5>Ehrenamtliche Arbeit</h5>
-          {{ profile.volunteerwork }}
+          <div class="line-break-text">{{ profile.volunteerwork }}</div>
         </div>
       </Section>
     </template>
@@ -154,4 +154,7 @@ export default {
 </script>
 
 <style>
+.line-break-text{
+  white-space: pre-line;
+}
 </style>