Merge pull request 'chore(deps): update fsfe/reuse docker tag to v5' (!144) from renovate/fsfe-reuse-5.x into main

Reviewed-on: #144

.dockerignore

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

.drone.yml

@@ -4,22 +4,118 @@
 # 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:5.0.2-debian@sha256:7928d25ed14a1bc22758d917ebc6aecbb8bcd1a4da7aa748d7179c9011bbfb0b
-- name: docker-publish
+  - name: lint
-  image: plugins/docker
+    image: node:20.18.0-alpine@sha256:c13b26e7e602ef2f1074aef304ce6e9b7dd284c419b35d89fcf3cc8e44a8def9
-  settings:
+    commands:
-    registry: registry.wtf-eg.net
+      - npm ci
-    repo: registry.wtf-eg.net/ki-frontend
+      - npm run lint -- --no-fix
-    target: ki-frontend
+  - name: audit
-    auto_tag: true
+    image: node:20.18.0-alpine@sha256:c13b26e7e602ef2f1074aef304ce6e9b7dd284c419b35d89fcf3cc8e44a8def9
-    username:
+    commands:
-      from_secret: "docker_username"
+      - npm install -g better-npm-audit
-    password:
+      - better-npm-audit audit --production --level=moderate
-      from_secret: "docker_password"
+  - name: docker-dry-run
-  when:
+    image: plugins/docker:20.18.4@sha256:a8d3d86853c721492213264815f1d00d3ed13f42f5c1855a02f47fa4d5f1e042
-    branch:
+    settings:
-      - main
+      registry: git.wtf-eg.de
+      repo: git.wtf-eg.de/kompetenzinventar/frontend
+      target: ki-frontend
+      dry_run: true
+    when:
+      event:
+        - pull_request
+
+---
+kind: pipeline
+type: docker
+name: build
+
+trigger:
+  event:
+    - push
+  branch:
+    - main
+
+depends_on:
+  - qa
+
+steps:
+  - name: docker-publish
+    image: plugins/docker:20.18.4@sha256:a8d3d86853c721492213264815f1d00d3ed13f42f5c1855a02f47fa4d5f1e042
+    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"
+
+---
+kind: pipeline
+type: docker
+name: deploy
+
+trigger:
+  event:
+    - push
+  branch:
+    - main
+
+depends_on:
+  - build
+
+steps:
+  - name: deploy-dev
+    image: appleboy/drone-ssh:1.7.5@sha256:995677e073454912f26d4c0fdd2f9df2e1f5a30d6603d3f2ece667311b6babb3
+    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:5.0.2-debian@sha256:7928d25ed14a1bc22758d917ebc6aecbb8bcd1a4da7aa748d7179c9011bbfb0b
+  - name: lint
+    image: node:20.18.0-alpine@sha256:c13b26e7e602ef2f1074aef304ce6e9b7dd284c419b35d89fcf3cc8e44a8def9
+    commands:
+      - npm ci
+      - npm run lint -- --no-fix
+  - name: docker-publish
+    image: plugins/docker:20.18.4@sha256:a8d3d86853c721492213264815f1d00d3ed13f42f5c1855a02f47fa4d5f1e042
+    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"

.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'
   }
 }

.reuse/dep5

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

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

REUSE.toml

@@ -0,0 +1,40 @@
+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"

etc/nginx/conf.d/default.conf

@@ -9,10 +9,24 @@ server {
 
     #access_log  /var/log/nginx/host.access.log  main;
 
+    root   /usr/share/nginx/html;
+
+    # routes without dots serve the index.html without caching
     location / {
-        root   /usr/share/nginx/html;
+        add_header Cache-Control "no-cache";
-        index  index.html index.htm;
+        try_files $uri $uri/index.html /index.html;
-        try_files $uri $uri/ /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

@@ -1,28 +1,31 @@
 {
   "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",
+    "@babel/eslint-parser": "7.25.9",
-    "@vue/cli-plugin-eslint": "^4.5.0",
+    "@vue/cli-plugin-babel": "5.0.8",
-    "@vue/cli-plugin-router": "^4.5.0",
+    "@vue/cli-plugin-eslint": "5.0.8",
-    "@vue/cli-service": "^4.5.0",
+    "@vue/cli-plugin-router": "5.0.8",
-    "@vue/compiler-sfc": "^3.0.0",
+    "@vue/cli-service": "5.0.8",
-    "babel-eslint": "^10.1.0",
+    "@vue/compiler-sfc": "3.5.6",
-    "bootstrap": "^5.0.1",
+    "bootstrap": "5.3.3",
-    "bootstrap-icons": "^1.5.0",
+    "bootstrap-icons": "1.11.3",
-    "core-js": "^3.6.5",
+    "core-js": "3.39.0",
-    "eslint": "^6.7.2",
+    "eslint": "8.57.1",
-    "eslint-plugin-vue": "^7.0.0",
+    "eslint-plugin-vue": "9.30.0",
-    "sass": "^1.37.5",
+    "sass": "1.80.4",
-    "sass-loader": "^10.2.0",
+    "sass-loader": "16.0.3",
-    "v-tooltip": "^4.0.0-alpha.1",
+    "v-tooltip": "4.0.0-beta.17",
-    "vue": "^3.0.0",
+    "vue": "3.5.6",
-    "vue-router": "^4.0.0-0",
+    "vue-router": "4.4.5",
-    "vuex": "^4.0.2"
+    "vuex": "4.1.0"
+  },
+  "optionalDependencies": {
+    "sass-embedded": "1.80.4"
   }
 }

renovate.json

@@ -0,0 +1,21 @@
+{
+  "$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">
+  <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/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

@@ -0,0 +1,50 @@
+<!--
+SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+  <ul class="pagination">
+    <li
+      class="page-item"
+        :class="{ active: page === current }"
+      v-for="page in pages"
+      :key="page"
+    >
+      <span
+        class="page-link pointer"
+        :class="{ 'bg-white': page !== current }"
+        @click="onPageClicked(page)"
+      >
+        {{ page }}
+      </span>
+    </li>
+  </ul>
+</template>
+<script>
+
+export default {
+  name: 'Paginator',
+  props: {
+    page: Number,
+    current: Number,
+    pages: Number
+  },
+  methods: {
+    onPageClicked(page) {
+      if (page == this.current) {
+        return
+      }
+
+      this.$emit('page', page)
+    }
+  }
+}
+
+</script>
+<style>
+.pointer {
+  cursor: pointer;
+}
+</style>

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/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/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/mixins/request.mixin.js

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

src/store/search.js

@@ -12,8 +12,10 @@ export default {
       profiles: [],
       error: false,
       errorMessage: '',
+      pages: 1,
       query: {
-        search: ''
+        search: '',
+        page: 1
       }
     }
   },
@@ -40,11 +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 = {...state.query, page}
     }
   },
   actions: {
-    async search({state, commit, rootState}) {
+    async search({state, commit, rootState, dispatch}) {
       if (state.searching) {
         return
       }
@@ -65,6 +73,8 @@ export default {
         url.searchParams.append('search', state.query.search)
       }
 
+      url.searchParams.append('page', state.query.page)
+
       const headers = {
         Authorization: `Bearer ${rootState.token}`,
       }
@@ -81,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')
@@ -93,6 +114,7 @@ export default {
 
       const responseData = await response.json()
       commit('setProfiles', responseData.profiles)
+      commit('setPages', responseData.pages)
       commit('setSearching', false)
       commit('hideSpinner')
     }

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>
@@ -53,12 +53,26 @@ SPDX-License-Identifier: AGPL-3.0-or-later
         <p v-if="searchText !== ''">Probiere eine andere Suche.</p>
       </div>
       <div v-else-if="showResults">
+        <div class="d-flex justify-content-around">
+          <Paginator 
+            :pages="pages" 
+            :current="currentPage"
+            @page="handlePageSelected"
+          />
+        </div>
         <SearchResult
           v-for="profile in profiles"
           :key="profile.user_id"
           class="mb-3"
           :profile="profile"
         />
+        <div class="d-flex justify-content-around">
+          <Paginator 
+            :pages="pages" 
+            :current="currentPage"
+            @page="handlePageSelected"
+          />
+        </div>
       </div>
     </div>
   </div>
@@ -67,21 +81,29 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 <script>
 import { mapState } from 'vuex'
 
+import Paginator from '@/components/Paginator'
 import SearchResult from '@/components/SearchResult'
 import Spinner from '@/components/Spinner'
 
 export default {
   name: 'Search',
   components: {
+    Paginator,
     SearchResult,
     Spinner,
   },
+  data() {
+    return {
+      textChanged: false
+    }
+  },
   computed: {
     ...mapState({
       searching: state => state.search.searching,
       profiles: state => state.search.profiles,
       error: state => state.search.error,
       showSpinner: state => state.search.showSpinner,
+      pages: state => state.search.pages,
     }),
       searchText: {
         get() {
@@ -89,6 +111,15 @@ export default {
         },
         set(text) {
           this.$store.commit('search/setQuerySearch', text)
+          this.textChanged = true
+        }
+      },
+      currentPage: {
+        get() {
+          return this.$store.state.search.query.page
+        },
+        set(page) {
+          this.$store.commit('search/setQueryPage', page)
         }
       },
       showNoResults() {
@@ -109,21 +140,37 @@ export default {
   },
   methods: {
     handleSubmit() {
-      this.$router.push({ query: { query: this.searchText }})
+      if (this.textChanged === true) {
+        this.$store.commit('search/setQueryPage', 1)
+      }
+      this.pushState()
       this.$store.dispatch('search/search')
     },
     focusSearchText() {
       this.$nextTick(() => {
         this.$refs.searchTextInput.focus()
       })
+    },
+    handlePageSelected(page) {
+      this.currentPage = page
+      this.pushState()
+      this.$store.dispatch('search/search')
+    },
+    pushState() {
+      this.$router.push({ query: { query: this.searchText, page: this.currentPage }})
     }
   },
   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

@@ -12,27 +12,10 @@ SPDX-License-Identifier: AGPL-3.0-or-later
       </div>
     </div>
     <div class="container">
-      <form @submit.prevent="submitFormEdit()">
+      <form @submit.prevent="submitFormEdit(false)">
         <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-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 +26,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>
@@ -174,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"
@@ -213,10 +206,16 @@ SPDX-License-Identifier: AGPL-3.0-or-later
               Gespeichert
             </div>
             <button
-              class="btn btn-primary ms-3"
+              class="btn btn-secondary ms-3"
-              @click="submitFormEdit()"
+              @click="submitFormEdit(false)"
             >
-              Speichern
+              Entwurf Speichern
+            </button>
+            <button
+              class="btn btn-primary ms-3"
+              @click="submitFormEdit(true)"
+            >
+              Speichern und Veröffentlichen
             </button>
           </div>
         </div>