Merge pull request 'chore: Configure Renovate' (!91 ) from renovate/configure into main

Reviewed-on: #91
Disable Dependency Dashboard because of external issues
2024-08-22 11:26:15 +02:00 · 2024-08-21 22:12:43 +02:00 · 2024-08-21 22:01:01 +02:00 · 2024-08-21 19:35:10 +00:00 · 2024-08-21 20:28:45 +02:00 · 2024-08-21 20:25:28 +02:00
49 changed files with 10445 additions and 24240 deletions
--- a/.dockerignore
+++ b/.dockerignore
@ -1,2 +1,11 @@
+.browserslistrc
+.dockerignore
+.drone.yml
+.editorconfig
 .git
+.gitignore
+.reuse
+Dockerfile
+LICENSES
+README.md
 node_modules
--- a/.drone.yml
+++ b/.drone.yml
@ -4,19 +4,115 @@
 # 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
-  image: fsfe/reuse:latest
- name: docker-publish
-  image: plugins/docker
-  settings:
-    registry: registry.wtf-eg.net
-    repo: registry.wtf-eg.net/ki-frontend
-    target: ki-frontend
-    auto_tag: true
-    username:
-      from_secret: "docker_username"
-    password:
-      from_secret: "docker_password"
+  - name: reuse
+    image: fsfe/reuse:3.0.2-debian
+  - name: lint
+    image: node:20.12.2
+    commands:
+      - npm ci
+      - npm run lint
+  - 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
+      target: ki-frontend
+      dry_run: true
+
+---
+kind: pipeline
+type: docker
+name: build
+
+trigger:
+  event:
+    - push
+  branch:
+    - main
+
+depends_on:
+  - qa
+
+steps:
+  - name: docker-publish
+    image: plugins/docker:20.17.3
+    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
+    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:3.0.2-debian
+  - name: lint
+    image: node:20.12.2
+    commands:
+      - npm ci
+      - npm run lint
+  - name: docker-publish
+    image: plugins/docker:20.17.3
+    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"
--- a/.eslintrc.js
+++ b/.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'
  }
 }
--- a/.reuse/dep5
+++ b/.reuse/dep5
@ -3,15 +3,15 @@ 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
+Files: package.json package-lock.json renovate.json
 Copyright: WTF Kooperative eG <https://wtf-eg.de/>
 License: AGPL-3.0-or-later

-Files: .browserslistrc .dockerignore .eslintrc.js .gitignore 
+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_logo*
+Files: src/assets/img/wtf*
 Copyright: WTF Kooperative eG <https://wtf-eg.de/>
 License: LicenseRef-WTF

--- a/21
+++ b/21
@ -2,14 +2,27 @@
 #
 # SPDX-License-Identifier: AGPL-3.0-or-later

-FROM node:14-alpine as builder
+FROM node:20.12.2-alpine 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.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
+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 .
--- a/LICENSES/MIT.txt
+++ b/LICENSES/MIT.txt
@ -1,9 +0,0 @@
-MIT License
-
-Copyright (c) <year> <copyright holders>
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--- a/README.md
+++ b/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
--- a/etc/nginx/conf.d/default.conf
+++ b/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;
-        index  index.html index.htm;
-        try_files $uri $uri/ /index.html;
+        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;
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,26 +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",
-    "core-js": "^3.6.5",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^7.0.0",
-    "sass": "^1.37.5",
-    "sass-loader": "^10.2.0",
-    "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"
  }
 }
--- a/public/img/bootstrap-icons-1.5.0/pencil.license
+++ b/public/img/bootstrap-icons-1.5.0/pencil.license
@ -1 +0,0 @@
-SPDX-License-Identifier: MIT
--- a/public/img/bootstrap-icons-1.5.0/pencil.svg
+++ b/public/img/bootstrap-icons-1.5.0/pencil.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil" viewBox="0 0 16 16">
-  <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
-</svg>
--- a/public/img/bootstrap-icons-1.5.0/plus-lg.svg
+++ b/public/img/bootstrap-icons-1.5.0/plus-lg.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-lg" viewBox="0 0 16 16">
-  <path d="M8 0a1 1 0 0 1 1 1v6h6a1 1 0 1 1 0 2H9v6a1 1 0 1 1-2 0V9H1a1 1 0 0 1 0-2h6V1a1 1 0 0 1 1-1z"/>
-</svg>
--- a/public/img/bootstrap-icons-1.5.0/plus-lg.svg.license
+++ b/public/img/bootstrap-icons-1.5.0/plus-lg.svg.license
@ -1 +0,0 @@
-SPDX-License-Identifier: MIT
--- a/public/img/bootstrap-icons-1.5.0/search.svg
+++ b/public/img/bootstrap-icons-1.5.0/search.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
-  <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
-</svg>
--- a/public/img/bootstrap-icons-1.5.0/search.svg.license
+++ b/public/img/bootstrap-icons-1.5.0/search.svg.license
@ -1 +0,0 @@
-SPDX-License-Identifier: MIT
--- a/public/img/bootstrap-icons-1.5.0/trash.svg
+++ b/public/img/bootstrap-icons-1.5.0/trash.svg
@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
-  <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
-  <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
-</svg>
--- a/public/img/bootstrap-icons-1.5.0/trash.svg.license
+++ b/public/img/bootstrap-icons-1.5.0/trash.svg.license
@ -1 +0,0 @@
-SPDX-License-Identifier: MIT
--- a/renovate.json
+++ b/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]\\./"
+    }
+  ]
+}
--- a/src/App.vue
+++ b/src/App.vue
@ -12,8 +12,8 @@ SPDX-License-Identifier: AGPL-3.0-or-later
  <Footer />
 </template>
 <script>
-import Footer from '@/components/Footer.vue'
-import Navbar from '@/components/Navbar.vue'
+import Footer from '@/components/Footer'
+import Navbar from '@/components/Navbar'

 export default {
  name: 'App',
--- a/src/assets/global.scss
+++ b/src/assets/global.scss
@ -7,6 +7,13 @@
@import "variables";
@import "bootstrap/scss/bootstrap";

+.bg-wtf {
+  background-image: url(../assets/img/wtf-header-bg.jpg);
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
 .btn-primary {
  color: #fff !important;
 }
--- a/src/assets/img/wtf-header-bg.jpg
+++ b/src/assets/img/wtf-header-bg.jpg
--- a/src/assets/language_level.json
+++ b/src/assets/language_level.json
@ -1,6 +1,6 @@
 {
    "1": "Keine Angabe",
-    "2": "Grundkentnisse",
+    "2": "Grundkenntnisse",
    "3": "Gut",
    "4": "Fließend",
    "5": "Muttersprache"
--- a/src/assets/skill_level.json
+++ b/src/assets/skill_level.json
@ -1,7 +1,22 @@
 {
-    "1": "bis 6 Monate",
-    "2": "bis 1 Jahr",
-    "3": "bis 3 Jahre",
-    "4": "bis 5 Jahre",
-    "5": "mehr als 5 Jahre"
-}
+  "1": {
+    "short": "≤ 6M",
+    "long": "bis 6 Monate"
+  },
+  "2":{
+    "short": "≤ 1J",
+    "long": "bis 1 Jahr"
+  },
+  "3": {
+    "short": "≤ 3J",
+    "long": "bis 3 Jahre"
+  },
+  "4": {
+    "short": "≤ 5J",
+    "long": "bis 5 Jahre"
+  },
+  "5": {
+    "short": "> 5J",
+    "long": "mehr als 5 Jahre"
+  }
+}
--- a/src/assets/variables.scss
+++ b/src/assets/variables.scss
@ -14,3 +14,5 @@ $body-bg: $gray-100;

 $link-decoration: none;
 $link-hover-decoration: underline;
+
+$spinner-animation-speed: 1s;
--- a/src/components/AutoComplete.vue
+++ b/src/components/AutoComplete.vue
@ -5,21 +5,46 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 -->

 <template>
-  <div>
-    <label for="searchText" class="form-label fw-bold">{{ label }}</label>
-    <div class="row mb-2">
-      <div class="col">
+  <profile-list
+    :values="values"
+    :type="type"
+    :editable="true"
+    :show-secondary="showSecondary"
+    @remove-value="removeValue($event)"
+    @update-values="this.$emit('update-values', this.values)"
+  >
+  </profile-list>
+  <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>
+      </div>
+      <div class="col-12 col-md-6">
        <input
          autocomplete="off"
          type="text"
-          class="form-control"
+          class="form-control form-control-sm"
          id="searchText"
+          :maxlength="maxlength"
+          :placeholder="placeholder"
          v-model="searchText"
-          @keyup="search()"
+          @input="search()"
          @keyup.enter="addResult()"
        />
+        <div v-if="searchResults">
+          <ul class="list-group">
+            <li
+              class="list-group-item bg-white"
+              v-for="result in searchResults"
+              :key="result.id"
+              @click="addResult(result)"
+            >
+              {{ result.name }}
+            </li>
+          </ul>
+        </div>
      </div>
-      <div class="col">
+      <div class="col-md-2">
        <button
          v-if="searchText != ''"
          type="button"
@ -27,44 +52,21 @@ SPDX-License-Identifier: AGPL-3.0-or-later
          aria-label="Hinzufügen"
          @click="addResult()"
        >
-          <img
-            src="/img/bootstrap-icons-1.5.0/plus-lg.svg"
-            alt="Hinzufügen Icon"
-          />
+          <i clas="bi-plus-lg"></i>
          Hinzufügen
        </button>
      </div>
    </div>
-    <div class="" v-if="searchResults">
-      <ul class="list-group">
-        <li
-          class="list-group-item"
-          v-for="result in searchResults"
-          :key="result.id"
-          @click="addResult(result)"
-        >
-          {{ result.name }}
-        </li>
-      </ul>
-    </div>
-    <profile-list
-      :values="values"
-      :type="type"
-      :editable="true"
-      @remove-value="removeValue($event)"
-      @update-values="this.$emit('update-values', this.values)"
-    >
-    </profile-list>
  </div>
 </template>
 <script>
 import { mapState } from 'vuex'

-import RequestMixin from "@/mixins/request.mixin"
-import ProfileList from "@/components/ProfileList";
+import RequestMixin from '@/mixins/request.mixin'
+import ProfileList from '@/components/ProfileList';

 export default {
-  name: "AutoComplete",
+  name: 'AutoComplete',
  mixins: [RequestMixin],
  components: {
    ProfileList,
@ -79,21 +81,33 @@ export default {
    values: {
      type: Array,
    },
+    showSecondary: {
+      type: Boolean,
+      default: true,
+    },
+    placeholder: {
+      type: String,
+      default: "",
+    },
  },
  data() {
    return {
      iconUrl: this.apiUrl,
-      searchText: "",
+      searchText: '',
      searchResults: [],
      showErrorMessage: false,
    };
  },
  computed: {
-    ...mapState(['currentUserId'])
+    ...mapState(['currentUserId']),
+    maxlength() {
+      return this.type === 'skill' ? 50 : 25
+    }
  },
  methods: {
    addResult(result = false) {
      if (!result) result = this.searchResults[0];
+
      if (
        this.values.map((item) => item[this.type].name).includes(result.name)
      ) {
@ -104,16 +118,19 @@ export default {
      let newValue = {
        profile_id: this.currentUserId,
      };
-      if (this.type != "contacttype") {
+
+      if (this.type != 'contacttype') {
        newValue.level = 1;
      } else {
-        newValue.content = "";
+        newValue.content = '';
      }
+
      newValue[this.type] = result;
      changeValues.unshift(newValue);
-      this.searchText = "";
+
+      this.searchText = '';
      this.searchResults = [];
-      this.$emit("update-values", changeValues);
+      this.$emit('update-values', changeValues);
    },
    removeValue(valueName) {
      const newValues = this.values.filter((value) => {
@ -123,7 +140,7 @@ export default {
          return true;
        }
      });
-      this.$emit("update-values", newValues);
+      this.$emit('update-values', newValues);
    },
  },
 };
--- a/src/components/Avatar.vue
+++ b/src/components/Avatar.vue
@ -0,0 +1,37 @@
+<!--
+SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+  <div class="avatar bg-dark">
+    {{ avatarLetters }}
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    name: String
+  },
+  computed: {
+    avatarLetters() {
+      return this.name.substr(0, 2)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.avatar {
+  align-items: center;
+  border-radius: .25rem;
+  color: white;
+  display: flex;
+  font-weight: bold;
+  height: 2.5rem;
+  justify-content: center;
+  width: 2.5rem;
+}
+</style>
--- a/src/components/Footer.vue
+++ b/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>
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@ -26,59 +26,44 @@ SPDX-License-Identifier: AGPL-3.0-or-later
        <span class="navbar-toggler-icon"></span>
      </button>
      <div
-        class="collapse navbar-collapse"
+        class="collapse navbar-collapse d-lg-flex"
        :class="{ show: showMobileNav }"
        id="navbarSupportedContent"
      >
-        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+        <ul class="navbar-nav mb-2 mb-lg-0 me-auto">
          <li class="nav-item">
            <router-link
              class="nav-link"
              :to="{ path: `/s/search` }"
              active-class="active"
-              >Suche</router-link
-            >
+            >Suche</router-link
+          >
          </li>
          <li class="nav-item">
            <router-link
              class="nav-link"
              :to="{ path: `/s/profile/${currentUserId}` }"
              active-class="active"
-              >Mein Profil</router-link
-            >
+            >Mein Profil</router-link
+          >
          </li>
          <li class="nav-item">
            <router-link
              class="nav-link"
              :to="{ path: `/s/profile-edit` }"
              active-class="active"
-              >Bearbeiten</router-link
-            >
+            >Bearbeiten</router-link
+          >
          </li>
+        </ul>
+        <ul class="navbar-nav">
          <li class="nav-item">
-            <button class="btn btn-outline-danger" @click="logout()">
+            <button class="btn btn-danger w-100" @click="logout()">
+              <i class="bi bi-box-arrow-right"></i>
              Logout
            </button>
          </li>
        </ul>
-        <form class="d-flex" @submit.prevent="searchRedirect()">
-          <input
-            class="form-control me-2"
-            v-model="searchText"
-            type="search"
-            placeholder="Profile durchsuchen"
-            aria-label="Search"
-          />
-          <button
-            class="btn btn-outline-primary"
-            type="submit"
-          >
-            <img
-              src="/img/bootstrap-icons-1.5.0/search.svg"
-              alt="Suche Icon"
-            />
-          </button>
-        </form>
      </div>
    </div>
  </nav>
@ -95,7 +80,6 @@ export default {
  mixins: [RequestMixin],
  data() {
    return {
-      searchText: '',
      showMobileNav: false
    }
  },
@ -110,9 +94,6 @@ export default {
      this.$store.dispatch('clear')
      this.$router.push({ path: '/' });
    },
-    searchRedirect() {
-      this.$router.push({ path: `/s/search?text`, query: { query: this.searchText } } );
-    },
  }
 }

--- a/src/components/Paginator.vue
+++ b/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>
--- a/src/components/ProfileList.vue
+++ b/src/components/ProfileList.vue
@ -5,87 +5,72 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 -->

 <template>
-  <ul>
-    <li v-for="(value, valueKey) in values" :key="value.id">
-      <div class="row m-1">
-        <div class="col">
-          <img
-            style="max-width: 64px"
+  <ul class="list-group list-group-flush">
+    <li
+      class="list-group-item bg-white"
+      v-for="(value, valueKey) in values"
+      :key="value.id"
+    >
+      <div class="row">
+        <div class="col-12 col-md-5 d-flex align-items-center">
+          <div
+            class="list-icon me-1"
+            :style="{ backgroundImage: `url('${iconBaseUrl + value[type].icon_url}'` }"
            v-if="value[type].icon_url"
-            :src="iconUrl + value[type].icon_url"
-            :alt="`${value[type].name} Logo`"
          />
-          {{ value[type].name }}
+          <div>
+            {{ value[type].name }}
+          </div>
        </div>
-        <div class="col">
-          <div v-if="type == 'skill'">
-            <div v-if="editable">
-              <select
-                v-if="editableValues[valueKey]"
-                class="form-select"
-                aria-label="Selektiere dein Level"
-                v-model="editableValues[valueKey].level"
-                @input="$emit('update-values', editableValues)"
+        <div class="col-10 col-md-5">
+          <div v-if="type == 'skill' && showSecondary">
+            <select
+              class="form-select form-select-sm"
+              aria-label="Selektiere dein Level"
+              v-model="editableValues[valueKey].level"
+              @input="$emit('update-values', editableValues)"
+            >
+              <option
+                v-for="(value, key) in levelSelection"
+                :value="key"
+                :key="key"
              >
-                <option
-                  v-for="(value, key) in levelSelection"
-                  :value="key"
-                  :key="key"
-                >
-                  {{ value }}
-                </option>
-              </select>
-            </div>
-            <div v-else><span v-if="value.level">({{ levelSelection[value.level] }})</span></div>
+                {{ value.long || value }}
+              </option>
+            </select>
          </div>
          <div v-else-if="type == 'language'">
-            <div v-if="editable">
-              <div v-if="editable">
-              <select
-                v-if="editableValues[valueKey]"
-                class="form-select"
-                aria-label="Selektiere dein Level"
-                v-model="editableValues[valueKey].level"
-                @input="$emit('update-values', editableValues)"
+            <select
+              class="form-select form-select-sm"
+              aria-label="Selektiere dein Level"
+              v-model="editableValues[valueKey].level"
+              @input="$emit('update-values', editableValues)"
+            >
+              <option
+                v-for="(value, key) in languagesSelection"
+                :value="key"
+                :key="key"
              >
-                <option
-                  v-for="(value, key) in languagesSelection"
-                  :value="key"
-                  :key="key"
-                >
-                  {{ value }}
-                </option>
-              </select>
-            </div>
-            </div>
-            <div v-else><span v-if="value.level">({{languagesSelection[value.level]}})</span></div>
+                {{ value }}
+              </option>
+            </select>
          </div>
          <div v-else-if="type == 'contacttype'">
-            <div v-if="editable">
-              <input class="form-control" v-model="editableValues[valueKey].content"/>
-            </div>
-            <div v-else>
-              <span v-if="value[type].name === 'E-Mail'">
-                <a :href="`mailto:${value.content}`">{{ value.content }}</a>
-              </span>
-              <span v-else>
-                {{ value.content }}
-              </span>
-            </div>
+            <input
+              class="form-control form-control-sm"
+              maxlength="200"
+              v-model="editableValues[valueKey].content"
+            />
          </div>
        </div>
-        <div class="col">
+        <div class="col-2 text-end">
          <button
-            v-if="editable"
            type="button"
-            class="btn btn-outline-danger"
+            class="btn btn-sm btn-light"
            aria-label="Löschen"
            @click="$emit('removeValue', value[type].name)"
          >
-            <img
-              src="/img/bootstrap-icons-1.5.0/trash.svg"
-              alt="Löschen Icon"
-            />
+            <i class="text-danger bi bi-x-circle"></i>
          </button>
        </div>
      </div>
@ -93,11 +78,11 @@ SPDX-License-Identifier: AGPL-3.0-or-later
  </ul>
 </template>
 <script>
-import levelJson from "@/assets/skill_level.json";
-import languagesJson from "@/assets/language_level.json";
+import levelJson from '@/assets/skill_level.json';
+import languagesJson from '@/assets/language_level.json';

 export default {
-  name: "ProfileList",
+  name: 'ProfileList',
  props: {
    type: {
      type: String,
@ -106,14 +91,14 @@ export default {
      type: Array,
      required: true,
    },
-    editable: {
+    showSecondary: {
      type: Boolean,
-      default: false,
-    },
+      default: true
+    }
  },
  data() {
    return {
-      iconUrl: this.apiUrl,
+      iconBaseUrl: this.apiUrl,
      levelSelection: levelJson,
      languagesSelection: languagesJson,
      editableValues: this.values,
@ -126,3 +111,13 @@ export default {
  },
 };
 </script>
+
+<style scope>
+.list-icon {
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  height: 32px;
+  width: 32px;
+}
+</style>
--- a/src/components/SearchResult.vue
+++ b/src/components/SearchResult.vue
@ -0,0 +1,54 @@
+<!--
+SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+  <router-link
+    class="text-decoration-none d-flex"
+    :to="{ path: `/s/profile/${profile.user_id}` }"
+  >
+    <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"/>
+        </div>
+        <div class="text-body">
+        <h5 class="card-title mb-1 lh-1">
+          {{ profile.nickname}}
+          <span v-if="profile.pronouns"> ({{ profile.pronouns }})</span>
+        </h5>
+        <small
+          class="card-text lh-1 text-dark"
+          v-if="profile.skills && profile.skills.length > 0"
+        >
+          Top-Fähigkeiten: {{ topSkills }}
+        </small>
+        </div>
+      </div>
+    </div>
+  </router-link>
+</template>
+<script>
+import Avatar from '@/components/Avatar'
+
+export default {
+  components: {
+    Avatar,
+  },
+  props: {
+    profile: Object
+  },
+  computed: {
+    topSkills() {
+      return this.profile.skills.slice(0, 5).map(s => s.skill.name).join(', ')
+    }
+  }
+}
+</script>
+<style scoped>
+.card:hover {
+  background-color: #f8f9fa;
+}
+</style>
--- a/src/components/Skill.vue
+++ b/src/components/Skill.vue
@ -0,0 +1,81 @@
+<!--
+SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+  <div class="skill rounded me-2">
+    <div class="skill__left p-2">
+      <div class="skill__icon" :style="{ backgroundImage: iconUrl }"></div>
+    </div>
+    <div class="skill__right d-flex align-items-center rounded-end px-2">
+      <div>
+        <div class="skill__name fw-bold me-1">
+          {{ profileSkill.skill.name }}
+        </div>
+        <small class="skill__level" v-if="showLevel" :title="levelTitle">
+          {{ level }}
+        </small>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import levels from '@/assets/skill_level.json';
+
+export default {
+  props: {
+    profileSkill: Object,
+    showLevel: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      levels
+    }
+  },
+  computed: {
+    iconUrl() {
+      return `url("${window.ki.apiUrl}/${this.profileSkill.skill.icon_url}")`
+    },
+    level() {
+      return levels[this.profileSkill.level].short
+    },
+    levelTitle() {
+      return levels[this.profileSkill.level].long
+    }
+  }
+}
+</script>
+
+<style>
+.skill {
+  align-items: stretch;
+  border: 1px solid #acacac;
+  display: inline-flex;
+  line-height: 1;
+}
+
+.skill__icon {
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  height: 32px;
+  width: 32px;
+}
+
+.skill__right {
+  background-color: #edefeb;
+  color: #202020;
+}
+
+.skill__name,
+.skill__level {
+  display: inline-block;
+  white-space: nowrap;
+}
+</style>
--- a/src/components/Spinner.vue
+++ b/src/components/Spinner.vue
@ -0,0 +1,9 @@
+<!--
+SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+  <div class="spinner-grow" role="status"></div>
+</template>
--- a/src/components/ViewError.vue
+++ b/src/components/ViewError.vue
@ -0,0 +1,39 @@
+<!--
+SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+  <div class="container text-center py-5">
+    <template v-if="notFound">
+      <div v-if="isOwnProfile">
+        <div class="fs-1 lh-1">nullptr :/</div>
+        <div class="fs-3 mb-4">Du hast noch kein Profil</div>
+        <router-link :to="{ name: 'ProfileEdit' }" class="btn btn-primary" >
+          Jetzt Profil erstellen
+        </router-link>
+      </div>
+      <div v-else>
+        <div class="fs-1 mb-3">nullptr :/</div>
+        <div class="mb-3">
+          Profil nicht gefunden
+        </div>
+      </div>
+    </template>
+    <template v-else>
+      <div class="fs-1 mb-3">Kernel panic :/</div>
+      Das Profil konnte nicht geladen werden
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    isOwnProfile: Boolean,
+    notFound: Boolean
+  }
+}
+</script>
+
--- a/src/components/profile/Contact.vue
+++ b/src/components/profile/Contact.vue
@ -0,0 +1,39 @@
+<!--
+SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+  <div class="contact rounded d-inline-flex align-items-center">
+    <div class="contact__left px-2">
+      {{ profileContact.contacttype.name }}
+    </div>
+    <div class="contact__right d-flex align-items-center rounded-end px-2">
+      {{ profileContact.content }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    profileContact: Object,
+  }
+}
+</script>
+
+<style>
+.contact {
+  align-items: stretch;
+  border: 1px solid #acacac;
+  display: inline-flex;
+}
+
+.contact__right {
+  background-color: #edefeb;
+  color: #202020;
+  font-weight: bold;
+  height: 32px;
+}
+</style>
--- a/src/components/profile/Header.vue
+++ b/src/components/profile/Header.vue
@ -0,0 +1,79 @@
+<!--
+SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+  <div class="bg-wtf py-3">
+    <div class="container">
+      <div class="d-flex align-items-center mb-3">
+        <Avatar class="me-3" :name="profile.nickname" />
+        <div class="text-white fs-3">
+          <span class="fs-3">{{ profile.nickname }}</span>
+          <span v-if="profile.pronouns" class="fs-5">
+            ({{ profile.pronouns }})
+          </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>
+          <div class="text-white">
+            {{ location }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import Avatar from '@/components/Avatar'
+
+export default {
+  name: 'ProfileHeader',
+  components: {
+    Avatar
+  },
+  props: {
+    profile: Object
+  },
+  computed: {
+    location() {
+      if (!this.profile.address) {
+        return
+      }
+
+      const parts = []
+
+      if (this.profile.address.postcode) {
+        parts.push(this.profile.address.postcode)
+      }
+
+      if (this.profile.address.city) {
+        parts.push(this.profile.address.city)
+      }
+
+      if (this.profile.address.country) {
+        parts.push(this.profile.address.country)
+      }
+
+      return parts.join(', ')
+    }
+  }
+}
+</script>
+
+<style>
+.content {
+  min-height: calc(100vh - 60px);
+}
+</style>
--- a/src/components/profile/Language.vue
+++ b/src/components/profile/Language.vue
@ -0,0 +1,69 @@
+<!--
+SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+  <div class="language rounded me-2">
+    <div class="language__left px-2">
+      <div class="language__icon" :style="{ backgroundImage: iconUrl }"></div>
+    </div>
+    <div class="language__right d-flex align-items-center rounded-end px-2">
+      <div>
+        <div class="language__name me-1">{{ profileLanguage.language.name }}</div>
+        <small class="language__level">{{ level }}</small>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import levels from '@/assets/language_level.json';
+
+export default {
+  props: {
+    profileLanguage: Object,
+  },
+  data() {
+    return {
+      levels
+    }
+  },
+  computed: {
+    iconUrl() {
+      return `url("${window.ki.apiUrl}/${this.profileLanguage.language.icon_url}")`
+    },
+    level() {
+      return levels[this.profileLanguage.level]
+    }
+  }
+}
+</script>
+
+<style>
+.language {
+  align-items: stretch;
+  border: 1px solid #acacac;
+  display: inline-flex;
+}
+
+.language__icon {
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  height: 32px;
+  width: 32px;
+}
+
+.language__right {
+  background-color: #edefeb;
+  color: #202020;
+}
+
+.language__name {
+  display: inline-block;
+  font-weight: bold;
+  white-space: nowrap;
+}
+</style>
--- a/src/components/profile/Section.vue
+++ b/src/components/profile/Section.vue
@ -0,0 +1,28 @@
+<!--
+SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+  <div class="container mb-5">
+    <h3 class="text-center">
+      {{ title }}
+    </h3>
+    <div class="card w-100">
+      <slot name="card-body">
+        <div class="card-body bg-white">
+          <slot></slot>
+        </div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: String
+  }
+}
+</script>
--- a/src/main.js
+++ b/src/main.js
@ -6,11 +6,15 @@ import { createApp } from 'vue/dist/vue.esm-bundler'
 import App from './App.vue'
 import router from './router'
 import store from '@/store'
+import VTooltipPlugin from 'v-tooltip'

+import 'v-tooltip/dist/v-tooltip.css'
+import 'bootstrap-icons/font/bootstrap-icons.css'
 import './assets/global.scss'

 const app = createApp(App)

+app.use(VTooltipPlugin)
 app.use(router)
 app.use(store)

--- a/src/mixins/request.mixin.js
+++ b/src/mixins/request.mixin.js
@ -37,6 +37,11 @@ export default {
      }
    },
    async search() {
+      if (!this.searchText) {
+        this.searchResults = []
+        return
+      }
+
      try {
        const response = await fetch(`${this.apiUrl}/${this.type}s?search=${this.searchText}`, {
            headers: {
@ -52,15 +57,16 @@ export default {
        }

        const responseData = await response.json()
-        this.searchResults = responseData[`${this.type}s`];
+        const searchResults = responseData[`${this.type}s`];

        if (
-          !this.values
-          .map((item) => item[this.type].name.toLowerCase())
-          .includes(this.searchText.toLowerCase())
+          !searchResults.map((item) => item.name.toLowerCase())
+            .includes(this.searchText.toLowerCase())
        ) {
-          this.searchResults.unshift({ name: this.searchText });
+          searchResults.unshift({ name: this.searchText });
        }
+
+        this.searchResults = searchResults
      } catch (error) {
        console.error();
        this.showErrorMessage = true;
@ -89,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)
--- a/src/router/index.js
+++ b/src/router/index.js
@ -46,7 +46,14 @@ const routes = [
  {
    path: '/',
    name: 'Index',
-    component: Index
+    component: Index,
+    beforeEnter: (_to, _from, next) => {
+      if (store.state.token) {
+        next({name: 'Search'})
+      } else {
+        next()
+      }
+    }
  },
 ]

--- a/src/store/index.js
+++ b/src/store/index.js
@ -4,17 +4,23 @@

 import { createStore } from 'vuex'

+import profile from './profile'
+import search from './search'
+
 const localStorageKeys = {
  currentUserId: 'ki_current_user_id',
  token: 'ki_token',
 }

 export default createStore({
+  modules: {
+    profile,
+    search,
+  },
  state() {
    return {
      currentUserId: JSON.parse(localStorage.getItem(localStorageKeys.currentUserId)),
      token: JSON.parse(localStorage.getItem(localStorageKeys.token)),
-      currentProfile: null
    }
  },
  mutations: {
@ -37,9 +43,6 @@ export default createStore({
      state.token = token
      localStorage.setItem(localStorageKeys.token, JSON.stringify(token))
    },
-    setCurrentProfile(state, profile) {
-      state.currentProfile = profile
-    }
  },
  actions: {
    clear(context) {
--- a/src/store/profile.js
+++ b/src/store/profile.js
@ -0,0 +1,120 @@
+// SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
+//
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+export default {
+  namespaced: true,
+  state() {
+    return {
+      loading: false,
+      showSpinner: false,
+      profileId: null,
+      profile: null,
+      isOwnProfile: false,
+      error: false,
+      notFound: false
+    }
+  },
+  mutations: {
+    setProfileId(state, profileId) {
+      state.profileId = profileId
+    },
+    clearProfileId(state) {
+      state.profileId = null
+    },
+    setProfile(state, profile) {
+      state.profile = profile
+    },
+    clearProfile(state) {
+      state.profile = null
+    },
+    setLoading(state) {
+      state.loading = true
+    },
+    setNotLoading(state) {
+      state.loading = false
+    },
+    setError(state) {
+      state.error = true
+    },
+    clearError(state) {
+      state.error = false
+    },
+    showSpinner(state) {
+      state.showSpinner = true
+    },
+    hideSpinner(state) {
+      state.showSpinner = false
+    },
+    setNotFound(state, notFound) {
+      state.notFound = notFound
+    },
+    setIsOwnProfile(state, isOwnProfile) {
+      state.isOwnProfile = isOwnProfile
+    }
+  },
+  actions: {
+    onError({commit, dispatch}) {
+      commit('setError')
+      dispatch('clear')
+    },
+    onNotFound({commit, dispatch}) {
+      dispatch('onError')
+      commit('setNotFound', true)
+    },
+    clear({commit}) {
+      commit('clearProfileId')
+      commit('clearProfile')
+      commit('hideSpinner')
+      commit('setNotLoading')
+    },
+    async load({state, commit, dispatch, rootState}, profileId) {
+      if (state.loading) {
+        return
+      }
+      
+      commit('setProfileId', profileId)
+      commit('setIsOwnProfile', rootState.currentUserId === profileId)
+      commit('setLoading')
+
+      const timeoutId = setTimeout(() => {
+        commit('showSpinner')
+        commit('clearProfile')
+      }, 0)
+
+      commit('clearError')
+      commit('setNotFound', false)
+
+      const url = new URL(`${window.ki.apiUrl}/users/${profileId}/profile`)
+      const headers = {
+        Authorization: `Bearer ${rootState.token}`
+      }
+
+      let response
+
+      try {
+        response = await fetch(url, {headers})
+      } catch {
+        dispatch('onError')
+        return
+      }
+
+      clearTimeout(timeoutId)
+
+      if (response.status === 404) {
+        dispatch('onNotFound')
+        return
+      }
+
+      if (!response.ok) {
+        dispatch('onError')
+        return
+      }
+
+      const responseData = await response.json()
+      commit('setProfile', responseData.profile)
+      commit('hideSpinner')
+      commit('setNotLoading')
+    }
+  }
+}
--- a/src/store/search.js
+++ b/src/store/search.js
@ -0,0 +1,122 @@
+// SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
+//
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+export default {
+  namespaced: true,
+  state() {
+    return {
+      searching: false,
+      showSpinner: false,
+      searched: false,
+      profiles: [],
+      error: false,
+      errorMessage: '',
+      pages: 1,
+      query: {
+        search: '',
+        page: 1
+      }
+    }
+  },
+  mutations: {
+    setSearching(state, searching) {
+      state.searching = searching
+    },
+    showSpinner(state) {
+      state.showSpinner = true
+    },
+    hideSpinner(state) {
+      state.showSpinner = false
+    },
+    clearProfiles(state) {
+      state.profiles = []
+    },
+    setProfiles(state, profiles) {
+      state.profiles = profiles
+    },
+    setError(state, error) {
+      state.error = error
+    },
+    setErrorMessage(state, errorMessage) {
+      state.errorMessage = errorMessage
+    },
+    setQuerySearch(state, 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, dispatch}) {
+      if (state.searching) {
+        return
+      }
+
+      commit('setSearching', true)
+
+      const timeoutId = setTimeout(() => {
+        commit('showSpinner')
+        commit('clearProfiles')
+      }, 100)
+
+      commit('setError', false)
+      commit('setErrorMessage', '')
+
+      const url = new URL(`${window.ki.apiUrl}/users/profiles`)
+
+      if (state.query.search) {
+        url.searchParams.append('search', state.query.search)
+      }
+
+      url.searchParams.append('page', state.query.page)
+
+      const headers = {
+        Authorization: `Bearer ${rootState.token}`,
+      }
+
+      let response
+
+      try {
+        response = await fetch(url, {headers})
+      } catch {
+        commit('setError', true)
+        commit('clearProfiles')
+        commit('setSearching', false)
+        commit('hideSpinner')
+        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')
+        commit('setSearching', false)
+        commit('hideSpinner')
+        return
+      }
+
+      const responseData = await response.json()
+      commit('setProfiles', responseData.profiles)
+      commit('setPages', responseData.pages)
+      commit('setSearching', false)
+      commit('hideSpinner')
+    }
+  }
+}
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@ -5,46 +5,52 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 -->

 <template>
-  <div class="container pt-5">
-    <div class="text-center mb-5">
-      <img class="wtf-logo wtf-logo--index" src="@/assets/img/wtf_logo.svg">
-      <h1>Kompetenzinventar</h1>
+  <div class="bg-wtf">
+    <div class="container pt-5">
+      <div class="text-center mb-5">
+        <img class="wtf-logo wtf-logo--index" src="@/assets/img/wtf_logo.svg">
+        <h1 class="text-white">Kompetenzinventar</h1>
+      </div>
+      <form @submit.prevent="submitLogin()" class="card bg-white login-form">
+        <div class="card-body">
+          <div class="mb-3">
+            <label for="exampleInputusername1" class="form-label" >
+              WTF-Benutzername:
+            </label>
+            <input
+              type="username"
+              class="form-control"
+              id="exampleInputusername1"
+              v-model="username"
+              required
+              autofocus
+            />
+          </div>
+          <div class="mb-3">
+            <label for="exampleInputPassword1" class="form-label">Passwort:</label>
+            <input
+              type="password"
+              class="form-control"
+              id="exampleInputPassword1"
+              v-model="password"
+              required
+            />
+          </div>
+          <button type="submit" class="btn btn-primary">Login</button>
+          <a class="btn btn-link" href="https://resetpw.wtf-eg.de/">Passwort vergessen?</a>
+          <div
+            class="alert alert-danger mt-3 mb-0"
+            role="alert"
+            v-if="showErrorMessage"
+          >
+            Dein Benutzername oder Passwort ist falsch.<br>Versuche es noch einmal.
+          </div>
+        </div>
+      </form>
    </div>
-    <form @submit.prevent="submitLogin()" class="bg-white p-3 login-form">
-      <div class="mb-3">
-        <label for="exampleInputusername1" class="form-label" >
-          WTF-Benutzername:
-        </label>
-        <input
-          type="username"
-          class="form-control"
-          id="exampleInputusername1"
-          v-model="username"
-          required
-        />
-      </div>
-      <div class="mb-3">
-        <label for="exampleInputPassword1" class="form-label">Passwort:</label>
-        <input
-          type="password"
-          class="form-control"
-          id="exampleInputPassword1"
-          v-model="password"
-          required
-        />
-      </div>
-      <button type="submit" class="btn btn-primary">Login</button>
-      <a class="btn btn-link" href="https://resetpw.wtf-eg.de/">Passwort vergessen?</a>
-      <div
-        class="alert alert-danger mt-3 mb-0"
-        role="alert"
-        v-if="showErrorMessage"
-      >
-        Dein Benutzername oder Passwort ist falsch.<br>Versuche es noch einmal.
-      </div>
-    </form>
  </div>
 </template>
+
 <script>
 import RequestMixin from "@/mixins/request.mixin"

@ -62,6 +68,7 @@ export default {
 </script>

 <style scoped>
+
 .container {
  min-height: 100vh;
 }
--- a/src/views/Search.vue
+++ b/src/views/Search.vue
@ -5,88 +5,182 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 -->

 <template>
-  <div class="container">
-    <h1>Suche</h1>
-    <form @submit.prevent="submitSearch()">
-      <div class="row">
-        <div class="col">
-          <input
-            type="text"
-            class="form-control"
-            id="searchText"
-            v-model="searchText"
-          />
-        </div>
-        <div class="col">
-          <button type="submit" class="btn btn-primary mb-4">
-            Suche starten
-          </button>
+  <div class="content">
+    <div class="bg-wtf text-white pt-3 pb-4">
+      <div class="container">
+        <div class="fs-3 text-center lh-1 mb-3">Finde WTF Member</div>
+        <div class="card mx-auto bg-white">
+          <div class="card-body">
+            <form @submit.prevent="handleSubmit">
+              <fieldset class="d-flex" :disabled="searching">
+                <div class="flex-grow-1 me-3">
+                  <input
+                    type="text"
+                    class="form-control"
+                    id="searchText"
+                    v-model="searchText"
+                    placeholder="Nick, Name, Fähigkeit, Sprache"
+                    ref="searchTextInput"
+                  />
+                </div>
+                <div class="">
+                  <button type="submit" class="btn btn-primary">
+                    <i class="bi-search"></i>
+                    <span class="d-none d-md-inline"> Suchen</span>
+                  </button>
+                </div>
+              </fieldset>
+            </form>
+          </div>
        </div>
      </div>
-    </form>
-    <div
-      class="alert alert-danger mb-4 mt-4"
-      role="alert"
-      v-if="showErrorMessage"
-    >
-      Bei der Suche ist ein Fehler aufgetreten
    </div>
-    <div v-if="searchTotal == 0">
-      Es wurde kein Suchergebnis gefunden.
-      <p v-if="searchText !== ''">Probiere eine andere Suche.</p>
-    </div>
-    <div v-else>
-      <div class="row">
-        <div
-          class="col-4 p-2"
-          v-for="result in searchResults"
-          :key="result.user_id"
-        >
-          <router-link
-            class="text-decoration-none"
-            :to="{ path: `/s/profile/${result.user_id}` }"
-          >
-            <div class="card search-card">
-              <div class="card-body">
-                <h5 class="card-title">
-                  {{ result.nickname}}
-                  <span v-if="result.pronouns"> ({{ result.pronouns }})</span>
-                </h5>
-                <p
-                  class="card-text"
-                  v-if="result.skills && result.skills.length > 0"
-                >
-                  Fähigkeiten:
-                  <span v-for="(skill, index) in result.skills" :key="index"
-                    >
-                    {{ skill.skill.name}}<span v-if="index != result.skills.length - 1">, </span>
-                  </span>
-                </p>
-              </div>
-            </div>
-          </router-link>
+    <div class="container pt-4 pb-3">
+      <div class="text-center" v-if="showSpinner">
+        <Spinner />
+      </div>
+      <div
+        class="fs-2 text-danger text-center"
+        role="alert"
+        v-if="error"
+      >
+        <div class="fs-1 mb-3">Kernel panic :/</div>
+        Bei der Suche ist ein Fehler aufgetreten.
+      </div>
+      <div v-else-if="showNoResults" class="fs-2 text-black-50 text-center">
+        <div class="fs-1 mb-3">nullptr :/</div>
+        Es wurde kein Suchergebnis gefunden.
+        <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>
 </template>
+
 <script>
-import RequestMixin from "@/mixins/request.mixin";
+import { mapState } from 'vuex'
+
+import Paginator from '@/components/Paginator'
+import SearchResult from '@/components/SearchResult'
+import Spinner from '@/components/Spinner'

 export default {
-  name: "Search",
-  mixins: [RequestMixin],
+  name: 'Search',
+  components: {
+    Paginator,
+    SearchResult,
+    Spinner,
+  },
  data() {
    return {
-      showErrorMessage: false,
-      searchText: "",
-      searchResults: null,
-      searchTotal: 0,
-    };
+      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() {
+          return this.$store.state.search.query.search
+        },
+        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() {
+        return !this.searching && (!this.profiles || this.profiles.length === 0)
+      },
+      showResults() {
+        return !this.error && this.profiles && this.profiles.length > 0
+      }
+  },
+  watch: {
+    searching(value) {
+      if (!value) {
+        if (this.$refs.searchTextInput) {
+          this.focusSearchText()
+        }
+      }
+    }
+  },
+  methods: {
+    handleSubmit() {
+      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) this.searchText = this.$route.query.query;
-    this.submitSearch();
-  },
+    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')
+  }
 };
 </script>
+<style scoped>
+.container {
+  max-width: 768px;
+}
+
+.content {
+  min-height: calc(100vh - 60px);
+}
+</style>
--- a/src/views/profile/Edit.vue
+++ b/src/views/profile/Edit.vue
@ -5,190 +5,249 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 -->

 <template>
-  <div class="container">
-    <h1>Profil bearbeiten</h1>
-    <form @submit.prevent="submitFormEdit()">
-      <div class="row">
-        <div class="col">
-          <input
-            type="radio"
-            id="false"
-            :value="false"
-            v-model="profile.visible"
-            class="mr-2"
-          />
-          <label for="false" class="m-2 fw-bold"> Nicht öffentlich</label>
-        </div>
-        <div class="col">
-          <input
-            type="radio"
-            id="true"
-            :value="true"
-            v-model="profile.visible"
-          />
-          <label for="true" class="m-2 fw-bold"> Öffentlich</label>
-        </div>
+  <div>
+    <div class="bg-wtf py-3 mb-4">
+      <div class="container">
+        <h3 class="text-white text-center mb-0">Profil bearbeiten</h3>
      </div>
-      <div id="visibilityHelp" class="form-text">
-        Erst wenn du dein Profil Öffentlich stellst, können andere Genoss:innen
-        darauf zugreifen oder es in der Suche finden.
-      </div>
-      <div class="row">
-        <div class="col-6 col-xs-12">
-          <label for="nickname" class="form-label fw-bold">Nickname:</label>
-          <input
-            type="text"
-            class="form-control"
-            id="nickname"
-            v-model="profile.nickname"
-            required
-          />
+    </div>
+    <div class="container">
+      <form @submit.prevent="submitFormEdit(false)">
+        <Section title="Grunddaten">
+          <div class="row mb-4">
+            <div class="col-12 col-md-4 mb-3 mb-md-0">
+              <label class="form-label">Nickname</label>
+              <input
+                type="text"
+                class="form-control"
+                id="nickname"
+                maxlength="25"
+                v-model="profile.nickname"
+                required
+              />
+            </div>
+            <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>
+              </label>
+              <input
+                type="text"
+                class="form-control"
+                id="pronouns"
+                maxlength="25"
+                v-model="profile.pronouns"
+              />
+            </div>
+          </div>
+
+          <label class="form-label">Anschrift</label>
+          <div class="row">
+            <div class="col-12 col-md-4 mb-3 mb-md-0">
+              <input
+                type="text"
+                class="form-control"
+                id="postcode"
+                maxlength="10"
+                placeholder="Postleitzahl"
+                v-model="profile.address.postcode"
+              />
+            </div>
+            <div class="col-12 col-md-4 mb-3 mb-md-0">
+              <input
+                type="text"
+                class="form-control"
+                id="city"
+                maxlength="25"
+                placeholder="Ort"
+                v-model="profile.address.city"
+              />
+            </div>
+            <div class="col-12 col-md-4">
+              <input
+                type="text"
+                class="form-control"
+                id="country"
+                maxlength="25"
+                placeholder="Land"
+                v-model="profile.address.country"
+              />
+            </div>
+          </div>
+        </Section>
+
+        <Section title="Meine Fähigkeiten">
+          <template v-slot:card-body>
+            <auto-complete
+              type="skill"
+              :values="profile.skills"
+              placeholder="z.B. Python, JavaScript, Linux"
+              @update-values="profile.skills = $event"
+            ></auto-complete>
+          </template>
+        </Section>
+
+        <Section title="Meine Sprachkenntnisse">
+          <template v-slot:card-body>
+            <auto-complete
+              type="language"
+              :values="profile.languages"
+              placeholder="z.B. Deutsch, Englisch, Französisch"
+              @update-values="profile.languages = $event"
+            ></auto-complete>
+          </template>
+      </Section>
+
+        <Section title="Ich suche für mich Projekte/Aufträge in folgenden Bereichen">
+          <template v-slot:card-body>
+            <auto-complete
+              type="skill"
+              label="Ich suche für mich Projekte/Aufträge in folgenden Bereichen"
+              :values="profile.searchtopics"
+              :showSecondary="false"
+              placeholder="z.B. Python, JavaScript, Linux"
+              @update-values="profile.searchtopics = $event"
+            ></auto-complete>
+          </template>
+        </Section>
+
+        <Section title="Verfügbarkeit">
+          <div class="form-check mb-3">
+            <input
+              v-model="profile.availability_status"
+              class="form-check-input me-2"
+              type="checkbox"
+              id="availability_status">
+              <label class="form-check-label" for="availability_status">
+                Ich bin aktuell verfügbar
+              </label>
+            </div>
+            <div class="mb-3" v-if="profile.availability_status">
+              <label class="form-label">
+                Stunden pro Woche
+              </label>
+              <input
+                v-model="profile.availability_hours_per_week"
+                type="number"
+                min="0"
+                max="168"
+                class="form-control">
+              </div>
+              <label for="availability" class="form-label">
+                Anmerkungen
+              </label>
+              <textarea
+                class="form-control"
+                id="availability"
+                rows="3"
+                maxlength="4000"
+                v-model="profile.availability_text"
+              ></textarea>
+            </Section>
+
+            <Section title="Meine Kontaktmöglichkeiten">
+              <template v-slot:card-body>
+                <auto-complete
+                  type="contacttype"
+                  :values="profile.contacts"
+                  placeholder="z.B. E-Mail, Mobiltelefon, Matrix, Web"
+                  @update-values="profile.contacts = $event"
+                ></auto-complete>
+              </template>
+            </Section>
+
+            <Section title="Sonstiges">
+              <div class="mb-3 bg-white">
+                <label class="form-label">Über mich</label>
+                <textarea
+                  class="form-control"
+                  rows="3"
+                  maxlength="4000"
+                  v-model="profile.freetext"
+                />
+              </div>
+              <div>
+                <label class="form-label">Ehrenamtliche Arbeit</label>
+                <textarea
+                  class="form-control"
+                  rows="3"
+                  maxlength="4000"
+                  v-model="profile.volunteerwork"
+                />
+              </div>
+            </Section>
+            <input type="submit" class="d-none">
+          </form>
        </div>
-        <div class="col-6 col-xs-12">
-          <label for="pronouns" class="form-label fw-bold">Pronomen:</label>
-          <input
-            type="text"
-            class="form-control"
-            id="pronouns"
-            v-model="profile.pronouns"
-          />
-          <div for="pronouns" class="form-text">
-            Z.B.: Er/Ihn, Sie/Ihr, Es etc..
+        <div class="savebar bg-white border-top py-3">
+          <div class="container d-flex align-items-center justify-content-end">
+            <div
+              class="text-danger"
+              v-if="showErrorMessage"
+            >
+              <i class="bi bi-bug"></i>
+              Beim Speichern ist ein Fehler aufgetreten.
+            </div>
+            <div
+              class="text-success"
+              v-if="showSuccessMessage"
+            >
+              <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)"
+            >
+              Speichern und Veröffentlichen
+            </button>
          </div>
        </div>
      </div>
-      <div class="row">
-        <div class="col-12 col-xs-12">
-          <label for="freetext" class="form-label fw-bold">Vorstellung:</label>
-          <textarea
-            class="form-control"
-            id="freetext"
-            rows="3"
-            v-model="profile.freetext"
-          ></textarea>
-        </div>
-        <div class="col-12 col-xs-12">
-          <label for="volunteerwork" class="form-label fw-bold"
-            >Ehrenamtliche Arbeit:</label
-          >
-          <textarea
-            class="form-control"
-            id="volunteerwork"
-            rows="3"
-            v-model="profile.volunteerwork"
-          ></textarea>
-        </div>
-      </div>
-      <auto-complete
-        type="skill"
-        label="Deine Fähigkeiten"
-        :values="profile.skills"
-        @update-values="profile.skills = $event"
-      ></auto-complete>
-      <auto-complete
-        type="language"
-        label="Deine Sprachen"
-        :values="profile.languages"
-        @update-values="profile.languages = $event"
-      ></auto-complete>
-      <auto-complete
-        type="skill"
-        label="Ich suche"
-        :values="profile.searchtopics"
-        @update-values="profile.searchtopics = $event"
-      ></auto-complete>
-
-      <div class="col-12 col-xs-12">
-        <label for="availability" class="form-label fw-bold"
-          >Ich bin für Anfragen verfügbar:</label
-        >
-        <textarea
-          class="form-control"
-          id="availability"
-          rows="3"
-          v-model="profile.availability"
-        ></textarea>
-      </div>
-
-      <auto-complete
-        type="contacttype"
-        label="Kontaktmöglichkeiten"
-        :values="profile.contacts"
-        @update-values="profile.contacts = $event"
-      ></auto-complete>
-
-      <div class="row">
-        <div class="col">
-          <label for="pzl" class="form-label fw-bold">PLZ</label>
-          <input
-            type="text"
-            class="form-control"
-            id="pzl"
-            v-model="profile.address.postcode"
-          />
-        </div>
-        <div class="col">
-          <label for="city" class="form-label fw-bold">Stadt</label>
-          <input
-            type="text"
-            class="form-control"
-            id="city"
-            v-model="profile.address.city"
-          />
-        </div>
-        <div class="col">
-          <label for="country" class="form-label fw-bold">Land</label>
-          <input
-            type="text"
-            class="form-control"
-            id="country"
-            v-model="profile.address.country"
-          />
-        </div>
-      </div>
-
-      <button type="submit" class="btn btn-outline-success mb-4 mt-4 col-12">
-        Speichern
-      </button>
-      <div
-        class="alert alert-danger mb-4 mt-4"
-        role="alert"
-        v-if="showErrorMessage"
-      >
-        Es ist Fehler aufgetreten
-      </div>
-      <div
-        class="alert alert-success mb-4 mt-4"
-        role="alert"
-        v-if="showSuccessMessage"
-      >
-        Deine Änderungen wurden erfolgreich gespeichert
-      </div>
-    </form>
-  </div>
 </template>
 <script>
 import RequestMixin from "@/mixins/request.mixin"

 import AutoComplete from "@/components/AutoComplete";
+import Section from '@/components/profile/Section'

 export default {
  name: "profileEdit",
  mixins: [RequestMixin],
  components: {
    AutoComplete,
+    Section,
  },
  data() {
    return {
      showErrorMessage: false,
      showSuccessMessage: false,
+      clearMessagesHandle: null,
      profile: {
        visible: false,
        nickname: "",
        pronouns: "",
        volunteerwork: "",
        freetext: "",
-        availability: "",
+        availability_status: false,
+        availability_hours_per_week: null,
+        availability_text: "",
        address: {
          postcode: "",
          city: "",
@ -199,10 +258,49 @@ export default {
        searchtopics: [],
        contacts: [],
      },
+      pronounsTooltip: {
+        content:  'Wie möchtest du angesprochen werden?<br>Zum Beispiel "er/ihn" oder "sie/ihre".',
+        html: true
+      }
    };
  },
  async created() {
    await this.initEditPage();
  },
+  unmounted() {
+    this.cancelClearMessages()
+  },
+  methods: {
+    cancelClearMessages() {
+      if (this.clearMessagesHandle) {
+        window.clearTimeout(this.clearMessagesHandle)
+      }
+    },
+    scheduleClearMessages() {
+      this.cancelClearMessages()
+      this.clearMessagesHandle = window.setTimeout(() => {
+        this.showErrorMessage = false
+        this.showSuccessMessage = false
+      }, 2500)
+    }
+  },
+  watch: {
+    showErrorMessage(curr) {
+      if (curr) {
+        this.scheduleClearMessages()
+      }
+    },
+    showSuccessMessage(curr) {
+      if (curr) {
+        this.scheduleClearMessages()
+      }
+    }
+  }
 };
 </script>
+<style scoped>
+.savebar {
+  bottom: 0;
+  position: sticky;
+}
+</style>
--- a/src/views/profile/View.vue
+++ b/src/views/profile/View.vue
@ -5,60 +5,156 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 -->

 <template>
-  <div v-if="profile" class="container">
-    <h1>
-        {{profile.nickname}}
-        <span v-if="profile.pronouns">({{profile.pronouns}})</span>
-    </h1>
-    <p><label class="fw-bold">Vorstellung: </label> {{profile.freetext}}</p>
-    <p><label class="fw-bold">Ehrentamtliche Arbeit: </label> {{profile.volunteerwork}}</p>
-    <p><label class="fw-bold">Verfügbarkeit: </label> {{profile.availability}}</p>
-    <h3>Das kann ich:</h3>
-    <profile-list
-      :values="profile.skills"
-      type="skill"
-    ></profile-list>
-    <h3>Das suche ich:</h3>
-    <profile-list
-      :values="profile.searchtopics"
-      type="skill"
-    ></profile-list>
-    <h3>Meine Kontaktmöglichkeiten:</h3>
-    <profile-list
-      :values="profile.contacts"
-      type="contacttype"
-    ></profile-list>
-    <h3>Ich Spreche Folgende Sprachen:</h3>
-    <profile-list
-      :values="profile.languages"
-      type="language"
-    ></profile-list>
-    <div v-if="profile.address">
-      <h3>Meine Location:</h3>
-      {{profile.address.city}}<span v-if="profile.address && profile.address.postcode"> ({{profile.address.postcode}})</span>, {{profile.address.country}}
-    </div>
+  <div>
+    <template v-if="error">
+      <ViewError :isOwnProfile="isOwnProfile" :notFound="notFound" />
+    </template>
+    <template
+      v-else-if="profile"
+      class="container">
+      <ProfileHeader
+        class="mb-4"
+        :profile="profile" />
+
+      <Section
+        v-if="profile.skills && profile.skills.length > 0"
+        title="Das kann ich">
+        <div style="margin-bottom: -.5rem;">
+          <Skill
+            class="me-2 mb-2"
+            v-for="skill in profile.skills"
+            :key="skill.skill.id"
+            :profileSkill="skill"
+            :showLevel="true" />
+        </div>
+      </Section>
+
+      <Section
+        v-if="profile.searchtopics && profile.searchtopics.length > 0"
+        title="Ich suche für mich Projekte/Aufträge in folgenden Bereichen">
+        <div style="margin-bottom: -.5rem;">
+          <Skill
+            class="me-2 mb-2"
+            v-for="skill in profile.searchtopics"
+            :key="skill.skill.id"
+            :profileSkill="skill"
+            :showLevel="false" />
+        </div>
+      </Section>
+
+      <Section
+        v-if="profile.languages && profile.languages.length > 0"
+        title="Ich spreche diese Sprachen">
+        <div style="margin-bottom: -.5rem;">
+          <Language
+            class="me-2 mb-2"
+            v-for="language in profile.languages"
+            :key="language.language.id"
+            :profileLanguage="language"
+          />
+        </div>
+      </Section>
+
+      <Section title="Verfügbarkeit">
+        <div class="d-flex align-items-center">
+          <div v-if="profile.availability_status">
+            <i class="bi bi-check-square me-1"></i>
+            ja
+          </div>
+          <div v-else>
+            <i class="bi bi-x-square me-1"></i>
+            nein
+          </div>
+          <span
+            class="ms-3"
+            v-if="profile.availability_status && profile.availability_hours_per_week">
+            ({{ profile.availability_hours_per_week }} Stunden pro Woche)
+          </span>
+        </div>
+        <div v-if="profile.availability_text" class="mt-3">
+          <label class="form-label fw-bold">
+            Anmerkungen
+          </label>
+          <div class="line-break-text">{{ profile.availability_text }}</div>
+        </div>
+      </Section>
+
+      <Section
+        v-if="profile.contacts && profile.contacts.length > 0"
+        title="Meine Kontaktmöglichkeiten"
+      >
+        <div style="margin-bottom: -.5rem;">
+          <Contact
+            class="me-2 mb-2"
+            v-for="profileContact in profile.contacts"
+            :key="profileContact.id"
+            :profileContact="profileContact"
+          />
+        </div>
+      </Section>
+
+      <Section
+        v-if="profile.volunteerwork || profile.freetext"
+        title="Sonstiges">
+        <div v-if="profile.freetext" :class="{ 'lh-base': true, 'mb-4': profile.volunteerwork }">
+          <h5>Über mich</h5>
+           <div class="line-break-text">{{ profile.freetext }}</div>
+        </div>
+        <div v-if="profile.volunteerwork" class="lh-base">
+          <h5>Ehrenamtliche Arbeit</h5>
+          <div class="line-break-text">{{ profile.volunteerwork }}</div>
+        </div>
+      </Section>
+    </template>
  </div>
 </template>
 <script>
-import { mapState } from 'vuex'
+import { mapState, mapActions } from 'vuex'

-import RequestMixin from '@/mixins/request.mixin'
-
-import ProfileList from '@/components/ProfileList';
+import ViewError from '@/components/ViewError'
+import ProfileHeader from '@/components/profile/Header'
+import Section from '@/components/profile/Section'
+import Contact from '@/components/profile/Contact'
+import Language from '@/components/profile/Language'
+import Skill from '@/components/Skill'

 export default {
-  name: "profileView",
-  mixins: [RequestMixin],
+  name: 'profileView',
  components: {
-    ProfileList,
+    Contact,
+    Language,
+    ProfileHeader,
+    Section,
+    Skill,
+    ViewError,
+  },
+  methods: {
+    ...mapActions({
+      loadProfile: 'profile/load',
+      clearStore: 'profile/clear',
+    })
  },
  computed: {
    ...mapState({
-      profile: 'currentProfile'
+      profile: state => state.profile.profile,
+      error: state => state.profile.error,
+      notFound: state => state.profile.notFound,
+      isOwnProfile: state => state.profile.isOwnProfile,
+      showSpinner: state =>  state.profile.showSpinner
    })
  },
  async created() {
-    await this.initViewPage();
-  }
+    const id = parseInt(this.$route.params.memberId, 10)
+    this.loadProfile(id)
+  },
+  unmounted() {
+    this.clearStore()
+  },
 };
 </script>
+
+<style>
+.line-break-text{
+  white-space: pre-line;
+}
+</style>
Author	SHA1	Message	Date
Brain	abd1e0ee31	Merge pull request 'chore: Configure Renovate' (!91 ) from renovate/configure into main All checks were successful continuous-integration/drone/tag Build is passing Details continuous-integration/drone/push Build is passing Details Reviewed-on: #91	2024-08-22 11:26:15 +02:00
Brain	563f492bc3	Disable Dependency Dashboard because of external issues All checks were successful continuous-integration/drone/pr Build is passing Details	2024-08-21 22:12:43 +02:00
Brain	72d6756749	Update Renovate config All checks were successful continuous-integration/drone/pr Build is passing Details	2024-08-21 22:01:01 +02:00
Renovate Bot	d1fdde6d10	Add renovate.json Some checks failed continuous-integration/drone/pr Build is failing Details	2024-08-21 19:35:10 +00:00
Brain	a1c758a4b6	Merge pull request 'Upgrade dependencies' (!90 ) from upgrade-dependencies into main All checks were successful continuous-integration/drone/push Build is passing Details Reviewed-on: #90	2024-08-21 20:28:45 +02:00
Brain	c463c2f1ad	Use Bootstrap classes All checks were successful continuous-integration/drone/pr Build is passing Details	2024-08-21 20:25:28 +02:00
Brain	eb5de926d0	chore(deps): Update dependencies All checks were successful continuous-integration/drone/pr Build is passing Details	2024-08-21 19:49:40 +02:00
Brain	5c4c76356a	Merge remote-tracking branch 'origin/main' into upgrade-dependencies All checks were successful continuous-integration/drone/pr Build is passing Details	2024-08-21 19:40:45 +02:00
Brain	61a6115071	Pin Docker images in CI	2024-08-21 19:33:50 +02:00
Brain	d46aaa0f31	Merge pull request 'Fix Dockerfile' (!89 ) from fix-dockerfile into main All checks were successful continuous-integration/drone/push Build is passing Details Reviewed-on: #89	2024-04-23 23:07:43 +02:00
Brain	81dcf5ebe7	Try to build Docker image for Pull Requests All checks were successful continuous-integration/drone/pr Build is passing Details	2024-04-23 22:48:01 +02:00
Brain	7433d25716	Add missing trailing slash	2024-04-23 22:47:54 +02:00
Brain	7feee07d35	Merge pull request '♻️ Optimize Dockerfile' (!85 ) from optimize-dockerfile into main Some checks failed continuous-integration/drone/push Build is failing Details Reviewed-on: #85 Reviewed-by: srsh <srsh@noreply.git.wtf-eg.de>	2024-04-23 22:26:14 +02:00
Nikolai	f728f1f72b	Merge branch 'main' into feature/upgrade-dependencies All checks were successful continuous-integration/drone/pr Build is passing Details	2024-02-21 20:21:57 +01:00
Nikolai Gotzmann	663db94cb8	ISSUE-72\| Move audit to qa in drone All checks were successful continuous-integration/drone/pr Build is passing Details	2024-02-21 09:42:31 +01:00
Nikolai Gotzmann	a49bd3feef	ISSUE-72\| Update more deps All checks were successful continuous-integration/drone/pr Build is passing Details	2024-02-21 06:40:53 +01:00
Nikolai Gotzmann	6f12f577d4	ISSUE-72\| Update more deps Some checks failed continuous-integration/drone/pr Build is failing Details	2024-02-21 06:31:13 +01:00
Nikolai Gotzmann	872ff894b5	ISSUE-72\| Update coreks All checks were successful continuous-integration/drone/pr Build is passing Details	2024-02-20 21:07:53 +01:00
Nikolai Gotzmann	0b02df26e8	ISSUE-72\| Update eslint All checks were successful continuous-integration/drone/pr Build is passing Details	2024-02-20 21:01:15 +01:00
Nikolai Gotzmann	17e43d94c4	ISSUE-72\| Update eslint Some checks failed continuous-integration/drone/pr Build is failing Details	2024-02-20 20:58:50 +01:00
Nikolai Gotzmann	c79ada2123	ISSUE-58\| Move profile visiblity (!87 ) All checks were successful continuous-integration/drone/push Build is passing Details Move switch profile visibility button to save bar Rename Save button to save as draft and offer save and publish Fixes kompetenzinventar/ki-doku#58 Reviewed-on: #87 Reviewed-by: srsh <srsh@noreply.git.wtf-eg.de> Co-authored-by: Nikolai Gotzmann <self@ngotzmann.net> Co-committed-by: Nikolai Gotzmann <self@ngotzmann.net>	2024-02-20 20:26:54 +01:00
Nikolai Gotzmann	7b0e38296f	Add pre requirements to readme All checks were successful continuous-integration/drone/pr Build is passing Details	2024-02-11 15:09:35 +01:00
Nikolai Gotzmann	bc1a079503	KI-frontend update * Add better npm audit to pipeline * pipeline will fail if vulneralabity is found higher then moderate	2024-02-11 11:52:11 +01:00
Nikolai Gotzmann	cd36d39fad	KI Frontend update\| Update vue-compiler-sfc	2024-02-11 10:06:03 +01:00
Nikolai Gotzmann	ba701b2ac8	KI Frontend update\| Update sass	2024-02-11 10:02:50 +01:00
Nikolai Gotzmann	9d35989ba9	Updating ki-frontend * Frontend works with node 20 * vue dependencies are updated	2024-02-11 09:48:56 +01:00
Mic Szillat	f8e78d1cc8	♻️ Optimize Dockerfile All checks were successful continuous-integration/drone/pr Build is passing Details - add all non-essential files to .dockerignore - improve cachability by layers - re-order lines to reduce layer generation	2024-01-12 18:42:27 +01:00
jaschop	c2552f3c3a	Merge pull request 'Push image to Gitea registry' (!84 ) from gitea-registry into main All checks were successful continuous-integration/drone/push Build is passing Details Reviewed-on: #84	2023-12-10 18:47:54 +01:00
Brain	687454afdb	Push image to Gitea registry All checks were successful continuous-integration/drone/pr Build is passing Details	2023-12-04 20:09:52 +01:00
jaschop	a7c8774cc4	Merge pull request 'Add labels to Docker images' (!83 ) from docker-labels into main All checks were successful continuous-integration/drone/push Build is passing Details Reviewed-on: #83	2023-11-16 11:18:44 +01:00
jaschop	b63e5a6c2d	Merge pull request 'Rewrite Drone config' (!82 ) from drone-config into main Some checks are pending continuous-integration/drone/push Build is pending Details Reviewed-on: #82	2023-11-16 11:18:35 +01:00
jaschop	1b221ab180	Merge pull request 'Improve SPA cacheing' (!81 ) from nginx-cacheing into main All checks were successful continuous-integration/drone/push Build is passing Details Reviewed-on: #81	2023-11-13 16:51:10 +01:00
Brain	e2b101eb89	Add labels to Docker images All checks were successful continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details	2023-11-07 14:54:40 +01:00
Brain	654169c383	Rewrite Drone config All checks were successful continuous-integration/drone/pr Build is passing Details - Split PR and "push to main" actions - Deploy latest main to dev system - Build image for Git tags	2023-11-06 23:33:33 +01:00
Brain	26edf1d4b2	Improve SPA cacheing All checks were successful continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details	2023-11-06 18:35:05 +01:00
jaschop	e7ff487aeb	Merge pull request '"Problem melden"-Link korrigiert' (!78 ) from brain-patch-1 into main All checks were successful continuous-integration/drone/push Build is passing Details Reviewed-on: #78	2023-10-27 15:12:55 +02:00
jaschop	c5bda80f11	Merge pull request 'Klarnamen in der Suche berücksichtigen' (!80 ) from zeitschlag/ki-frontend:feature/48-search-address-name into main All checks were successful continuous-integration/drone/push Build is passing Details Reviewed-on: #80	2023-10-27 15:12:06 +02:00
Nathan Mattes	379ddaf5b9	Change placeholder (kompetenzinventar/ki-doku#48 ) All checks were successful continuous-integration/drone/pr Build is passing Details	2023-04-20 18:14:07 +02:00
Brain	13fb15e033	Fix link for new issues	2022-07-20 18:26:39 +02:00
weeman	aaa0883692	Merge pull request 'add tag trigger' (!77 ) from feature/tag-trigger into main All checks were successful continuous-integration/drone/tag Build is passing Details continuous-integration/drone/push Build is passing Details Reviewed-on: #77	2022-02-28 19:32:33 +01:00
Michael Weimann	e404bef2a9	add tag trigger All checks were successful continuous-integration/drone/push Build is passing Details	2022-02-28 19:32:04 +01:00
scammo	cbbcfd0f37	Merge pull request 'add address.name to frontend' (!76 ) from feature/realname into main All checks were successful continuous-integration/drone/push Build is passing Details continuous-integration/drone/tag Build is passing Details Reviewed-on: #76	2022-01-26 22:03:08 +01:00
Michael Weimann	5c5f157a77	add address.name to frontend All checks were successful continuous-integration/drone/push Build is passing Details	2022-01-25 21:04:17 +01:00
scammo	3017c001b2	Merge pull request 'Paginierung' (!74 ) from feature/pagination into main All checks were successful continuous-integration/drone/push Build is passing Details Reviewed-on: #74	2022-01-24 19:46:59 +01:00
scammo	fefe9a034d	Merge pull request 'Aktualisierung NPM Pakete' (!75 ) from fix/npm-update into main All checks were successful continuous-integration/drone/push Build is passing Details Reviewed-on: #75	2022-01-24 19:11:50 +01:00
Michael Weimann	bac8731e17	add pagination All checks were successful continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details	2022-01-23 20:14:52 +01:00
Michael Weimann	dc883ac302	update npm packages All checks were successful continuous-integration/drone/push Build is passing Details	2022-01-23 19:56:14 +01:00
scammo	16feb41f8a	kompetenzinventar/ki-doku#18 line-break new text (!72 ) All checks were successful continuous-integration/drone/push Build is passing Details Co-authored-by: scammo <samuel.brinkmann@googlemail.com> Reviewed-on: #72 Reviewed-by: weeman <weeman@noreply.git.wtf-eg.de> Co-authored-by: scammo <scammo@noreply.git.wtf-eg.de> Co-committed-by: scammo <scammo@noreply.git.wtf-eg.de>	2022-01-17 14:44:13 +01:00
weeman	04cb8a7217	Merge pull request '#64 "Ich Suche" besser definiert' (#71 ) from profile-page into main All checks were successful continuous-integration/drone/push Build is passing Details Reviewed-on: #71	2022-01-14 13:10:10 +01:00
weeman	e3115f9944	Merge branch 'main' into profile-page All checks were successful continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details	2022-01-14 13:09:46 +01:00
scammo	122b13b6a2	#64 ich besser definiert All checks were successful continuous-integration/drone/push Build is passing Details	2022-01-14 12:53:23 +01:00
frlan	872d544075	Merge pull request 'Fix typo for language levels' (#67 ) from zeitschlag/ki-frontend:typo into main All checks were successful continuous-integration/drone/push Build is passing Details Reviewed-on: #67	2021-12-17 20:41:45 +01:00
Nathan Mattes	fba33d20a7	Fix typo for language levels	2021-12-17 18:29:54 +01:00
Michael Weimann	e035fa3289	extend skill length to 50 All checks were successful continuous-integration/drone/push Build is passing Details	2021-11-22 20:14:45 +01:00
Michael Weimann	324203216a	fix typo	2021-11-22 18:48:13 +01:00
scammo	b270a5d56a	Merge pull request 'Weitere Arbeiten Profilseite' (#53 ) from profile-page into main All checks were successful continuous-integration/drone/push Build is passing Details Reviewed-on: #53	2021-10-25 14:15:38 +02:00
Michael Weimann	6ecf80f34c	improve profile page #36 All checks were successful continuous-integration/drone/push Build is passing Details	2021-10-24 18:16:19 +02:00
weeman	016a1bd959	Merge pull request 'Profile bearbeiten Ansicht' (#52 ) from feature/profile-view into main Reviewed-on: #52	2021-10-18 20:47:23 +02:00
Michael Weimann	4e8390cf96	update profile edit view	2021-10-18 20:45:18 +02:00
scammo	04d59d5520	Merge pull request 'Verfügbarkeit: Status, Stunden pro Woche und Text' (#50 ) from availability into main All checks were successful continuous-integration/drone/push Build is passing Details Reviewed-on: #50	2021-10-11 18:57:38 +02:00
Michael Weimann	0f0d3cd861	implement advanced availability logic All checks were successful continuous-integration/drone/push Build is passing Details	2021-10-11 18:55:19 +02:00
scammo	2b63603957	Merge pull request 'fix profile display' (#49 ) from fix/48-profile into main All checks were successful continuous-integration/drone/push Build is passing Details Reviewed-on: #49	2021-10-11 09:43:07 +02:00
Michael Weimann	9a51b416e5	run drone only for main branch All checks were successful continuous-integration/drone/push Build is passing Details	2021-10-10 19:59:07 +02:00
Michael Weimann	3ea7eb48b4	fix profile display All checks were successful continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details	2021-10-10 19:41:45 +02:00
weeman	8c8021bedc	Merge pull request 'Verschiedenes seit Freitag' (#47 ) from freitag into main All checks were successful continuous-integration/drone/push Build is passing Details Reviewed-on: #47	2021-10-04 17:42:09 +02:00
Michael Weimann	46fcaa2db6	implement profile view All checks were successful continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details	2021-10-03 20:05:08 +02:00
Michael Weimann	2d700c77dc	redirect users with token #38	2021-10-03 20:05:07 +02:00
Michael Weimann	c1d78fa8c1	implement seach view autofocus #41	2021-10-03 20:05:07 +02:00
Michael Weimann	7c8a1bb423	add login page name field autofocus #42	2021-10-03 20:05:06 +02:00
weeman	8e42c7fdbe	Merge pull request 'Suchparameter in URL' (#46 ) from feature/44-suchparameter-in-url into main All checks were successful continuous-integration/drone/push Build is passing Details Reviewed-on: #46	2021-09-27 18:02:23 +02:00
scammo	c25639b40c	Suchparameter in URL All checks were successful continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details	2021-09-27 17:50:01 +02:00
scammo	a2048d0eb9	Merge pull request 'Überarbeitung Suchansicht' (#37 ) from feature-search into main All checks were successful continuous-integration/drone/push Build is passing Details Reviewed-on: #37	2021-09-23 16:57:31 +02:00
scammo	b19a770d61	no more search in navbar All checks were successful continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details	2021-09-23 16:57:09 +02:00
scammo	8098c54c06	Merge branch 'feature-search' of git.wtf-eg.de:kompetenzinventar/ki-frontend into feature-search	2021-09-22 00:09:27 +02:00
Michael Weimann	73847022e2	implement search layout #32 #33 #35 All checks were successful continuous-integration/drone/pr Build is passing Details continuous-integration/drone/push Build is passing Details	2021-09-22 00:01:17 +02:00
Michael Weimann	93cb302ca7	implement search layout #32 #33 #35 Some checks failed continuous-integration/drone/push Build is failing Details continuous-integration/drone/pr Build is failing Details	2021-09-21 23:58:42 +02:00