Merge branch 'main' of git.wtf-eg.de:kompetenzinventar/ki-frontend into main

Reviewed-on: kompetenzinventar/ki-frontend#24

.editorconfig

@@ -0,0 +1,24 @@
+# SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
+#
+# SPDX-License-Identifier: AGPL-3.0-or-later
+
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+charset = utf-8
+indent_style = space
+indent_size = 4
+
+[*.{json,js,vue}]
+indent_size = 2
+
+[*.{yml,yaml}]
+indent_size = 2
+
+[*.html]
+indent_size = 2
+
+[*.{css,scss}]
+indent_size = 2

src/App.vue

@@ -1,7 +1,8 @@
 <!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
 <template>
   <div class="alert alert-success text-center mb-0" role="alert">
-    Willkommen in der Alpha Version! <a href="https://git.wtf-eg.de/kompetenzinventar/ki-frontend/issues/new">Problem? Einfach ein neues Issue Anlegen.</a>
+    Willkommen beim Alpha-Test!
+    <a href="https://git.wtf-eg.de/kompetenzinventar/ki-frontend/issues/new">Problem gefunden? Bitte hier ein Issue anlegen.</a>
   </div>
   <header v-if="this.$route.path.includes('/s/')">
     <nav class="navbar navbar-expand-lg navbar-light bg-light">
@@ -63,7 +64,7 @@
               class="form-control me-2"
               v-model="searchText"
               type="search"
-              placeholder="Direkt Suchen"
+              placeholder="Profile durchsuchen"
               aria-label="Search"
             />
             <button
@@ -85,7 +86,7 @@
     <a href="https://wtf-eg.de/impressum/" class="m-4">Impressum</a>
     <a href="https://wtf-eg.de/datenschutz/" class="m-4">Datenschutz</a>
     <a href="https://git.wtf-eg.de/kompetenzinventar" class="m-4">git(ea)</a>
-    <a href="https://git.wtf-eg.de/kompetenzinventar/ki-frontend/issues/new" class="m-4">Problem Melden</a>
+    <a href="https://git.wtf-eg.de/kompetenzinventar/ki-frontend/issues/new" class="m-4">Problem melden</a>
   </footer>
 </template>
 <script>

src/components/AutoComplete.vue

@@ -11,45 +11,16 @@
           id="searchText"
           v-model="searchText"
           @keyup="search()"
+          @keyup.enter="addResult()"
         />
       </div>
-      <div class="col">
-        <div v-if="selectedResult">
-          <div v-if="type === 'contacttype'">
-            <input
-              type="text"
-              class="form-control"
-              id="contactContent"
-              v-model="contactContent"
-            />
-          </div>
-          <div v-if="type === 'language'">
-            <select
-              class="form-select"
-              aria-label="Selektiere dein Level"
-              v-model="level"
-            >
-              <option v-for="(value, key) in languagesSelection" :value="key" :key="key">{{value}}</option>
-            </select>
-          </div>
-          <div v-else>
-            <select
-              class="form-select"
-              aria-label="Selektiere dein Level"
-              v-model="level"
-            >
-              <option v-for="(value, key) in levelSelection" :value="key" :key="key">{{value}}</option>
-            </select>
-          </div>
-        </div>
-      </div>
       <div class="col">
         <button
-          v-if="selectedResult && !selectedResult.edit"
+          v-if="searchText != ''"
           type="button"
           class="btn btn-outline-success"
           aria-label="Hinzufügen"
-          @click="addSelectedResult()"
+          @click="addResult()"
         >
           <img
             src="/img/bootstrap-icons-1.5.0/plus-lg.svg"
@@ -57,15 +28,6 @@
           />
           Hinzufügen
         </button>
-        <button
-          v-if="selectedResult && selectedResult.edit"
-          type="button"
-          class="btn btn-outline-success"
-          aria-label="Hinzufügen"
-          @click="editSelectedResult()"
-        >
-          Änderung Speichern
-        </button>
       </div>
     </div>
     <div class="" v-if="searchResults">
@@ -74,13 +36,7 @@
           class="list-group-item"
           v-for="result in searchResults"
           :key="result.id"
-          :class="{
-            'bg-info':
-              selectedResult &&
-              selectedResult.id &&
-              result.id === selectedResult.id,
-          }"
-          @click="selectedResult = result"
+          @click="addResult(result)"
         >
           {{ result.name }}
         </li>
@@ -90,19 +46,20 @@
       :values="values"
       :type="type"
       :editable="true"
-      @edit-value="editValue($event)"
       @remove-value="removeValue($event)"
-    ></profile-list>
+      @update-values="this.$emit('update-values', this.values)"
+    >
+    </profile-list>
   </div>
 </template>
 <script>
-import ProfileList from "@/components/ProfileList";
+import RequestMixin from "@/mixins/request.mixin"
 
-import levelJson from "@/assets/skill_level.json"
-import languagesJson from "@/assets/language_level.json"
+import ProfileList from "@/components/ProfileList";
 
 export default {
   name: "AutoComplete",
+  mixins: [RequestMixin],
   components: {
     ProfileList,
   },
@@ -121,39 +78,15 @@ export default {
     return {
       iconUrl: this.apiUrl,
       searchText: "",
-      contactContent: "",
       searchResults: [],
       showErrorMessage: false,
-      level: "1",
-      selectedResult: null,
-      levelSelection: levelJson,
-      languagesSelection: languagesJson,
     };
   },
   methods: {
-    async search() {
-      try {
-        const request = await this.axios.get(
-          `${this.apiUrl}/${this.type}s?search=${this.searchText}`,
-          {
-            headers: {
-              Authorization: `Bearer ${localStorage.getItem("token")}`,
-            },
-          }
-        );
-        if (request.status === 200) {
-          this.searchResults = request.data[`${this.type}s`];
-        }
-      } catch (error) {
-        console.error();
-        this.showErrorMessage = true;
-      }
-    },
-    addSelectedResult() {
+    addResult(result = false) {
+      if (!result) result = this.searchResults[0];
       if (
-        this.values
-          .map((item) => item[this.type].id)
-          .includes(this.selectedResult.id)
+        this.values.map((item) => item[this.type].name).includes(result.name)
       ) {
         return false;
       }
@@ -163,35 +96,19 @@ export default {
         profile_id: localStorage.getItem("user_id"),
       };
       if (this.type != "contacttype") {
-        newValue.level = this.level;
+        newValue.level = 1;
       } else {
-        newValue.content = this.contactContent;
+        newValue.content = "";
       }
-      newValue[this.type] = this.selectedResult;
-      changeValues.push(newValue);
+      newValue[this.type] = result;
+      changeValues.unshift(newValue);
       this.searchText = "";
       this.searchResults = [];
-      this.selectedResult = null;
-      this.level = 1;
       this.$emit("update-values", changeValues);
     },
-    editSelectedResult() {
-      this.values.map((item) => {
-        if (item[this.type].name == this.selectedResult.name) {
-          if (this.type != "contacttype") {
-            item.level = this.level;
-          } else {
-            item.content = this.contactContent;
-          }
-        }
-        return item;
-      });
-
-      this.$emit("update-values", this.values);
-    },
-    removeValue(valueId) {
+    removeValue(valueName) {
       const newValues = this.values.filter((value) => {
-        if (valueId === value[this.type].id) {
+        if (valueName === value[this.type].name) {
           return false;
         } else {
           return true;
@@ -199,21 +116,6 @@ export default {
       });
       this.$emit("update-values", newValues);
     },
-    editValue(value) {
-      this.searchResults = [value[this.type]];
-      this.selectedResult = {
-        ...value[this.type],
-        level: value.level,
-        edit: true,
-      };
-
-      if (this.type != "contacttype") {
-        this.level = value.level;
-      } else {
-        this.contactContent = value.content;
-      }
-      this.level = value.level;
-    },
   },
 };
 </script>

src/components/ProfileList.vue

@@ -1,7 +1,9 @@
 <!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
 <template>
   <ul>
-    <li v-for="value in values" :key="value.id">
+    <li v-for="(value, valueKey) in values" :key="value.id">
+      <div class="row m-1">
+        <div class="col">
           <img
             style="max-width: 64px"
             v-if="value[type].icon_url"
@@ -9,46 +11,85 @@
             :alt="`${value[type].name} Logo`"
           />
           {{ value[type].name }}
-      <span v-if="value.level">
-        <span v-if="type == 'skill'">({{ levelSelection[value.level] }})</span>
-        <span v-if="type == 'language'">({{ languagesSelection[value.level] }})</span>
-      </span>
-      <span v-if="value.content">:
+        </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)"
+              >
+                <option
+                  v-for="(value, key) in levelSelection"
+                  :value="key"
+                  :key="key"
+                >
+                  {{ value }}
+                </option>
+              </select>
+            </div>
+            <div v-else>({{ levelSelection[value.level] }})</div>
+          </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)"
+              >
+                <option
+                  v-for="(value, key) in languagesSelection"
+                  :value="key"
+                  :key="key"
+                >
+                  {{ value }}
+                </option>
+              </select>
+            </div>
+            </div>
+            <div v-else></div>
+          </div>
+          <div v-else-if="value.content">
+            <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>
-        </span>
-
+            </div>
+          </div>
+        </div>
+        <div class="col">
           <button
-        v-if="this.editable"
+            v-if="editable"
             type="button"
-        class="btn btn-outline-warning m-2"
-        aria-label="Bearbeiten"
-        @click="this.$emit('editValue', value)"
+            class="btn btn-outline-danger"
+            aria-label="Löschen"
+            @click="$emit('removeValue', value[type].name)"
           >
             <img
-          src="/img/bootstrap-icons-1.5.0/pencil.svg"
-          alt="Bearbeiten Icon"
+              src="/img/bootstrap-icons-1.5.0/trash.svg"
+              alt="Löschen Icon"
             />
           </button>
-      <button
-        v-if="this.editable"
-        type="button"
-        class="btn btn-outline-danger m-2"
-        aria-label="Löschen"
-        @click="this.$emit('removeValue', value[type].id)"
-      >
-        <img src="/img/bootstrap-icons-1.5.0/trash.svg" alt="Löschen Icon" />
-      </button>
+        </div>
+      </div>
     </li>
   </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",
@@ -58,6 +99,7 @@ export default {
     },
     values: {
       type: Array,
+      required: true,
     },
     editable: {
       type: Boolean,
@@ -69,7 +111,13 @@ export default {
       iconUrl: this.apiUrl,
       levelSelection: levelJson,
       languagesSelection: languagesJson,
-    }
-  }
+      editableValues: this.values,
+    };
+  },
+  watch: {
+    values: function (newVal) {
+      this.editableValues = newVal;
+    },
+  },
 };
 </script>

src/main.js

@@ -3,15 +3,12 @@ import { createApp } from 'vue/dist/vue.esm-bundler'
 import App from './App.vue'
 import router from './router'
 
-import axios from 'axios'
-
 import './assets/global.scss'
 
 const app = createApp(App)
 
 app.use(router)
 
-app.config.globalProperties.axios=axios
 app.config.globalProperties.apiUrl = window.ki.apiUrl
 
 app.mount('#app')

src/mixins/request.mixin.js

@@ -0,0 +1,123 @@
+import axios from "axios";
+
+export default {
+  methods: {
+    async submitLogin() {
+      this.showErrorMessage = false;
+      try {
+        const loginResult = await axios.post(
+          `${this.apiUrl}/users/login`,
+          {
+            username: this.username,
+            password: this.password,
+          }
+        );
+        if (loginResult.status === 200) {
+          this.showErrorMessage = false;
+          //success login
+          localStorage.setItem("token", loginResult.data.token);
+          localStorage.setItem("user_id", loginResult.data.user_id);
+          this.$router.push({ path: "/s/search" });
+        } else {
+          this.showErrorMessage = true;
+        }
+      } catch (error) {
+        console.error(error);
+        this.showErrorMessage = true;
+      }
+    },
+    async search() {
+      try {
+        const request = await axios.get(
+          `${this.apiUrl}/${this.type}s?search=${this.searchText}`,
+          {
+            headers: {
+              Authorization: `Bearer ${localStorage.getItem("token")}`,
+            },
+          }
+        );
+        if (request.status === 200) {
+          this.searchResults = request.data[`${this.type}s`];
+          if (
+            !this.values
+              .map((item) => item[this.type].name.toLowerCase())
+              .includes(this.searchText.toLowerCase())
+          ) {
+            this.searchResults.unshift({ name: this.searchText });
+          }
+        }
+      } catch (error) {
+        console.error();
+        this.showErrorMessage = true;
+      }
+    },
+    async initEditPage() {
+      try {
+        const userProfile = await axios.get(
+          `${this.apiUrl}/users/${localStorage.getItem("user_id")}/profile`,
+          {
+            headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
+          }
+        );
+        this.profile = userProfile.data.profile;
+      } catch (error) {
+        console.error(error);
+      }
+    },
+    async submitFormEdit() {
+      try {
+        const formSubmitResult = await axios.post(
+          `${this.apiUrl}/users/${localStorage.getItem("user_id")}/profile`,
+          this.profile,
+          {
+            headers: {
+              Authorization: `Bearer ${localStorage.getItem("token")}`,
+            },
+          }
+        );
+        if (formSubmitResult.status === 200) {
+          // success
+          this.showSuccessMessage = true;
+        } else {
+          // failure
+          this.showErrorMessage = true;
+        }
+      } catch (error) {
+        console.error(error);
+        this.showErrorMessage = true;
+      }
+    },
+    async initViewPage() {
+      try {
+        const userProfile = await axios.get(
+          `${this.apiUrl}/users/${this.$route.params.memberId}/profile`,
+          {
+            headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
+          }
+        );
+        this.profile = userProfile.data.profile;
+      } catch (error) {
+        console.error(error);
+      }
+    },
+    async submitSearch() {
+      this.showErrorMessage = false;
+      try {
+        let url = `${this.apiUrl}/users/profiles`;
+        if (this.searchText != "") {
+          url += `?nickname=${this.searchText}`;
+        }
+        const result = await axios.get(url, {
+          headers: {
+            Authorization: `Bearer ${localStorage.getItem("token")}`,
+          },
+        });
+        this.searchResults = result.data.profiles;
+        this.searchTotal = result.data.total;
+      } catch (error) {
+        console.error(error);
+        this.showErrorMessage = true;
+      }
+    },
+  },
+}

src/router/index.js

@@ -13,10 +13,7 @@ const routes = [
       template: "<router-view/>",
     },
     beforeEnter: (to, from, next) => {
-      console.log('test')
-      console.log('token', localStorage.getItem('token'))
       if(localStorage.getItem('token') !== null){
-        console.log('next')
         next()
       }else{
         next({path: '/', query: {url: to.fullPath, access: false}})

src/views/Index.vue

@@ -1,11 +1,11 @@
 <!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
 <template>
   <div class="container">
-    <h1>Kompetenz Inventar by WTF eG</h1>
+    <h1>WTF Kompetenzinventar</h1>
     <form @submit.prevent="submitLogin()">
       <div class="mb-3">
         <label for="exampleInputusername1" class="form-label"
-          >E-Mail Aresse:
+          >Benutzername:
         </label>
         <input
           type="username"
@@ -34,19 +34,20 @@
       v-if="showErrorMessage"
     >
       Mit deinen Login Daten ist ein Fehler aufgetreten. Versuch es nochmal oder
-      <a href="https://resetpw.wtf-eg.de/">erzeuge ein neues Passwort</a>.
+      <a href="https://resetpw.wtf-eg.de/">hast du dein Passwort vergessen?</a>.
     </div>
     <p>
-      Das Login gilt nur für WTF eG Mitglieder. Du kannst dein Ldap Passwort
+      Das Login gilt nur für WTF eG Mitglieder. Du kannst dein LDAP Passwort
       hier ändern.
     </p>
   </div>
 </template>
 <script>
-import axios from "axios";
+import RequestMixin from "@/mixins/request.mixin"
 
 export default {
   name: "Index",
+  mixins: [RequestMixin],
   data() {
     return {
       showErrorMessage: false,
@@ -54,35 +55,5 @@ export default {
       password: "",
     };
   },
-  methods: {
-    async submitLogin() {
-      this.showErrorMessage = false;
-      try {
-        console.log(this.apiUrl)
-        const loginResult = await axios.post(
-          `${this.apiUrl}/users/login`,
-          {
-            username: this.username,
-            password: this.password,
-          }
-        );
-        console.log(loginResult);
-        console.log(loginResult.status);
-        if (loginResult.status === 200) {
-          console.log('if true')
-          this.showErrorMessage = false;
-          //success login
-          localStorage.setItem("token", loginResult.data.token);
-          localStorage.setItem("user_id", loginResult.data.user_id);
-          this.$router.push({ path: "/s/search" });
-        } else {
-          this.showErrorMessage = true;
-        }
-      } catch (error) {
-        console.error(error);
-        this.showErrorMessage = true;
-      }
-    },
-  },
 };
 </script>

src/views/Search.vue

@@ -14,7 +14,7 @@
         </div>
         <div class="col">
           <button type="submit" class="btn btn-primary mb-4">
-            Suche Starten
+            Suche starten
           </button>
         </div>
       </div>
@@ -28,7 +28,7 @@
     </div>
     <div v-if="searchTotal == 0">
       Es wurde kein Suchergebnis gefunden.
-      <p v-if="searchText !== ''">Am besten suchst du weniger Spezifisch.</p>
+      <p v-if="searchText !== ''">Probiere eine andere Suche.</p>
     </div>
     <div v-else>
       <div class="row">
@@ -63,8 +63,11 @@
   </div>
 </template>
 <script>
+import RequestMixin from "@/mixins/request.mixin"
+
 export default {
   name: "Search",
+  mixins: [RequestMixin],
   data() {
     return {
       showErrorMessage: false,
@@ -77,26 +80,5 @@ export default {
     if (this.$route.query.query) this.searchText = this.$route.query.query;
     this.submitSearch();
   },
-  methods: {
-    async submitSearch() {
-      this.showErrorMessage = false;
-      try {
-        let url = `${this.apiUrl}/users/profiles`;
-        if (this.searchText != "") {
-          url += `?nickname=${this.searchText}`;
-        }
-        const result = await this.axios.get(url, {
-          headers: {
-            Authorization: `Bearer ${localStorage.getItem("token")}`,
-          },
-        });
-        this.searchResults = result.data.profiles;
-        this.searchTotal = result.data.total;
-      } catch (error) {
-        console.error(error);
-        this.showErrorMessage = true;
-      }
-    },
-  },
 };
 </script>

src/views/profile/Edit.vue

@@ -1,20 +1,32 @@
 <!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
 <template>
   <div class="container">
-    <h1>Profil Ändern</h1>
-    <form @submit.prevent="submitForm()">
+    <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>
+          <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" />
+          <input
+            type="radio"
+            id="true"
+            :value="true"
+            v-model="profile.visible"
+          />
           <label for="true" class="m-2 fw-bold"> Öffentlich</label>
         </div>
       </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.
+        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">
@@ -42,7 +54,7 @@
       </div>
       <div class="row">
         <div class="col-12 col-xs-12">
-          <label for="freetext" class="form-label fw-bold">Freitext Vorstellung:</label>
+          <label for="freetext" class="form-label fw-bold">Vorstellung:</label>
           <textarea
             class="form-control"
             id="freetext"
@@ -52,7 +64,7 @@
         </div>
         <div class="col-12 col-xs-12">
           <label for="volunteerwork" class="form-label fw-bold"
-            >Ehrentamtliche Arbeit:</label
+            >Ehrenamtliche Arbeit:</label
           >
           <textarea
             class="form-control"
@@ -64,19 +76,19 @@
       </div>
       <auto-complete
         type="skill"
-        label="Deine Fähigkeiten (Autocomplete)"
+        label="Deine Fähigkeiten"
         :values="profile.skills"
         @update-values="profile.skills = $event"
       ></auto-complete>
       <auto-complete
         type="language"
-        label="Deine Sprachen (Autocomplete)"
+        label="Deine Sprachen"
         :values="profile.languages"
         @update-values="profile.languages = $event"
       ></auto-complete>
       <auto-complete
         type="skill"
-        label="Ich Suche"
+        label="Ich suche"
         :values="profile.searchtopics"
         @update-values="profile.searchtopics = $event"
       ></auto-complete>
@@ -130,7 +142,9 @@
         </div>
       </div>
 
-      <button type="submit" class="btn btn-outline-success mb-4 mt-4 col-12">Speichern</button>
+      <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"
@@ -149,11 +163,13 @@
   </div>
 </template>
 <script>
-import axios from "axios";
+import RequestMixin from "@/mixins/request.mixin"
+
 import AutoComplete from "@/components/AutoComplete";
 
 export default {
   name: "profileEdit",
+  mixins: [RequestMixin],
   components: {
     AutoComplete,
   },
@@ -181,46 +197,7 @@ export default {
     };
   },
   async created() {
-    try {
-      const userProfile = await axios.get(
-        `${this.apiUrl}/users/${localStorage.getItem(
-          "user_id"
-        )}/profile`,
-        {
-          headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
-        }
-      );
-      this.profile = userProfile.data.profile;
-    } catch (error) {
-      console.error(error);
-    }
-  },
-  methods: {
-    async submitForm() {
-      try {
-        const formSubmitResult = await axios.post(
-          `${this.apiUrl}/users/${localStorage.getItem(
-            "user_id"
-          )}/profile`,
-          this.profile,
-          {
-            headers: {
-              Authorization: `Bearer ${localStorage.getItem("token")}`,
-            },
-          }
-        );
-        if (formSubmitResult.status === 200) {
-          // success
-          this.showSuccessMessage = true;
-        } else {
-          // failure
-          this.showErrorMessage = true;
-        }
-      } catch (error) {
-        console.error(error);
-        this.showErrorMessage = true;
-      }
-    }
+    await this.initEditPage();
   },
 };
 </script>

src/views/profile/View.vue

@@ -1,16 +1,19 @@
 <!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
 <template>
   <div v-if="profile" class="container">
-    <h1>{{profile.nickname}}({{profile.pronouns}})</h1>
+    <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>Meine Skills:</h3>
+    <h3>Das kann ich:</h3>
     <profile-list
       :values="profile.skills"
       type="skill"
     ></profile-list>
-    <h3>Ich Suche:</h3>
+    <h3>Das suche ich:</h3>
     <profile-list
       :values="profile.searchtopics"
       type="skill"
@@ -25,15 +28,20 @@
       :values="profile.languages"
       type="language"
     ></profile-list>
+    <div v-if="profile.address">
       <h3>Meine Location:</h3>
       {{profile.address.city}} ({{profile.address.postcode}}), {{profile.address.country}}
     </div>
+  </div>
 </template>
 <script>
+import RequestMixin from "@/mixins/request.mixin"
+
 import ProfileList from "@/components/ProfileList";
 
 export default {
   name: "profileView",
+  mixins: [RequestMixin],
   components: {
     ProfileList,
   },
@@ -43,17 +51,7 @@ export default {
     };
   },
   async created() {
-    try {
-      const userProfile = await this.axios.get(
-        `${this.apiUrl}/users/${this.$route.params.memberId}/profile`,
-        {
-          headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
+    await this.initViewPage();
   }
-      );
-      this.profile = userProfile.data.profile;
-    } catch (error) {
-      console.error(error);
-    }
-  },
 };
 </script>