Push image to Gitea registry

Reviewed-on: #83

.drone.yml

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

Dockerfile

@@ -13,3 +13,8 @@ FROM nginx as ki-frontend
 
 COPY --from=builder /dist/ /usr/share/nginx/html/
 COPY etc/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf
+
+LABEL org.opencontainers.image.source=https://git.wtf-eg.de/kompetenzinventar/ki-frontend.git
+LABEL org.opencontainers.image.url=https://git.wtf-eg.de/kompetenzinventar/ki-frontend
+LABEL org.opencontainers.image.documentation=https://git.wtf-eg.de/kompetenzinventar/ki-frontend#docker
+LABEL org.opencontainers.image.vendor="WTF Kooperative eG"

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.

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;

package.json

@@ -7,10 +7,10 @@
     "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/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",
@@ -20,6 +20,7 @@
     "eslint-plugin-vue": "^7.0.0",
     "sass": "^1.37.5",
     "sass-loader": "^10.2.0",
+    "v-tooltip": "^4.0.0-alpha.1",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0-0",
     "vuex": "^4.0.2"

src/assets/language_level.json

@@ -1,6 +1,6 @@
 {
     "1": "Keine Angabe",
-    "2": "Grundkentnisse",
+    "2": "Grundkenntnisse",
     "3": "Gut",
     "4": "Fließend",
     "5": "Muttersprache"

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

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">
+    <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"
+              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"
@@ -32,36 +57,16 @@ SPDX-License-Identifier: AGPL-3.0-or-later
         </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,
@@ -76,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)
       ) {
@@ -101,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) => {
@@ -120,7 +140,7 @@ export default {
           return true;
         }
       });
-      this.$emit("update-values", newValues);
+      this.$emit('update-values', newValues);
     },
   },
 };

src/components/Footer.vue

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

src/components/Navbar.vue

@@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
         :class="{ show: showMobileNav }"
         id="navbarSupportedContent"
       >
-        <ul class="navbar-nav 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"
@@ -56,21 +56,6 @@ SPDX-License-Identifier: AGPL-3.0-or-later
           >
           </li>
         </ul>
-        <form class="flex-grow-1 d-flex ms-lg-3 me-lg-4 mb-3 mb-lg-0" @submit.prevent="searchRedirect()">
-          <input
-            class="form-control bg-white me-2"
-            v-model="searchText"
-            type="search"
-            placeholder="Profile durchsuchen"
-            aria-label="Search"
-          />
-          <button
-            class="btn btn-primary"
-            type="submit"
-          >
-            <i class="bi bi-search"></i>
-          </button>
-        </form>
         <ul class="navbar-nav">
           <li class="nav-item">
             <button class="btn btn-danger w-100" @click="logout()">
@@ -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 } } );
-    },
   }
 }
 

src/components/Paginator.vue

@@ -0,0 +1,49 @@
+<!--
+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"
+        @click="onPageClicked(page)"
+      >
+        {{ page }}
+      </span>
+    </li>
+  </ul>
+</template>
+<script>
+
+export default {
+  name: 'Paginator',
+  props: {
+    page: Number,
+    current: Number,
+    pages: Number
+  },
+  methods: {
+    onPageClicked(page) {
+      if (page == this.current) {
+        return
+      }
+
+      this.$emit('page', page)
+    }
+  }
+}
+
+</script>
+<style>
+.pointer {
+  cursor: pointer;
+}
+</style>

src/components/ProfileList.vue

@@ -5,84 +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"
+      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)"
           >
-            <i class="bi-trash"></i>
+            <i class="text-danger bi bi-x-circle"></i>
           </button>
         </div>
       </div>
@@ -90,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,
@@ -103,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,
@@ -123,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>

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>

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

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>

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>

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>

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">
+          <slot></slot>
+        </div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: String
+  }
+}
+</script>

src/main.js

@@ -6,12 +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)
 

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;

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()
+      }
+    }
   },
 ]
 

src/store/index.js

@@ -4,6 +4,7 @@
 
 import { createStore } from 'vuex'
 
+import profile from './profile'
 import search from './search'
 
 const localStorageKeys = {
@@ -13,13 +14,13 @@ const localStorageKeys = {
 
 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: {
@@ -42,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) {

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')
+    }
+  }
+}

src/store/search.js

@@ -12,8 +12,10 @@ export default {
       profiles: [],
       error: false,
       errorMessage: '',
+      pages: 1,
       query: {
-        search: ''
+        search: '',
+        page: 1
       }
     }
   },
@@ -40,11 +42,17 @@ export default {
       state.errorMessage = errorMessage
     },
     setQuerySearch(state, search) {
-      state.query.search = search
+      state.query = {...state.query, search}
+    },
+    setPages(state, pages) {
+      state.pages = pages
+    },
+    setQueryPage(state, page) {
+      state.query = {...state.query, page}
     }
   },
   actions: {
-    async search({state, commit, rootState}) {
+    async search({state, commit, rootState, dispatch}) {
       if (state.searching) {
         return
       }
@@ -60,11 +68,13 @@ export default {
       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}`,
       }
@@ -81,8 +91,19 @@ export default {
         return
       }
 
+      console.log(response.ok)
+      console.log(response.status)
+      console.log(state.query.page)
+
       clearTimeout(timeoutId)
 
+      if (!response.ok && response.status === 404 && state.query.page != 1) {
+        commit('setQueryPage', 1)
+        commit('setSearching', false)
+        await dispatch('search')
+        return
+      }
+
       if (!response.ok) {
         commit('setError', true)
         commit('clearProfiles')
@@ -93,6 +114,7 @@ export default {
 
       const responseData = await response.json()
       commit('setProfiles', responseData.profiles)
+      commit('setPages', responseData.pages)
       commit('setSearching', false)
       commit('hideSpinner')
     }

src/views/Index.vue

@@ -23,6 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
               id="exampleInputusername1"
               v-model="username"
               required
+              autofocus
             />
           </div>
           <div class="mb-3">

src/views/Search.vue

@@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
                     class="form-control"
                     id="searchText"
                     v-model="searchText"
-                    placeholder="Nick, Fähigkeit, Sprache"
+                    placeholder="Nick, Name, Fähigkeit, Sprache"
                     ref="searchTextInput"
                   />
                 </div>
@@ -53,12 +53,26 @@ SPDX-License-Identifier: AGPL-3.0-or-later
         <p v-if="searchText !== ''">Probiere eine andere Suche.</p>
       </div>
       <div v-else-if="showResults">
+        <div class="d-flex justify-content-around">
+          <Paginator 
+            :pages="pages" 
+            :current="currentPage"
+            @page="handlePageSelected"
+          />
+        </div>
         <SearchResult
           v-for="profile in profiles"
           :key="profile.user_id"
           class="mb-3"
           :profile="profile"
         />
+        <div class="d-flex justify-content-around">
+          <Paginator 
+            :pages="pages" 
+            :current="currentPage"
+            @page="handlePageSelected"
+          />
+        </div>
       </div>
     </div>
   </div>
@@ -67,21 +81,29 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 <script>
 import { mapState } from 'vuex'
 
+import Paginator from '@/components/Paginator'
 import SearchResult from '@/components/SearchResult'
 import Spinner from '@/components/Spinner'
 
 export default {
   name: 'Search',
   components: {
+    Paginator,
     SearchResult,
     Spinner,
   },
+  data() {
+    return {
+      textChanged: false
+    }
+  },
   computed: {
     ...mapState({
       searching: state => state.search.searching,
       profiles: state => state.search.profiles,
       error: state => state.search.error,
       showSpinner: state => state.search.showSpinner,
+      pages: state => state.search.pages,
     }),
       searchText: {
         get() {
@@ -89,6 +111,15 @@ export default {
         },
         set(text) {
           this.$store.commit('search/setQuerySearch', text)
+          this.textChanged = true
+        }
+      },
+      currentPage: {
+        get() {
+          return this.$store.state.search.query.page
+        },
+        set(page) {
+          this.$store.commit('search/setQueryPage', page)
         }
       },
       showNoResults() {
@@ -100,24 +131,46 @@ export default {
   },
   watch: {
     searching(value) {
-      if (value) {
+      if (!value) {
         if (this.$refs.searchTextInput) {
-            this.$refs.searchTextInput.focus()
+          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 !== undefined) {
+    if (this.$route.query.query) {
       this.searchText = this.$route.query.query
       this.$store.commit('search/clearProfiles')
     }
 
+    if (this.$route.query.page) {
+      this.currentPage = parseInt(this.$route.query.page, 10)
+      this.$store.commit('search/clearProfiles')
+    }
+
     this.$store.dispatch('search/search')
   }
 };

src/views/profile/Edit.vue

@@ -5,190 +5,260 @@ 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()">
+        <Section title="Grunddaten">
+          <div class="mb-4">
+            <div class="form-check form-switch">
+              <input
+                class="form-check-input"
+                type="checkbox"
+                role="switch"
+                v-model="profile.visible"
+                id="visibility"
+              >
+              <label
+                class="form-check-label"
+                for="visibility">
+                Profil für angemeldete Benutzer sichtbar
+              </label>
+            </div>
+          </div>
+
+          <div class="row mb-4">
+            <div class="col-12 col-md-4 mb-3 mb-md-0">
+              <label class="form-label">Nickname</label>
+              <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">
+                <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-primary ms-3"
+              @click="submitFormEdit()"
+            >
+              Speichern
+            </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 +269,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>

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>