.reuse/dep5

@@ -11,7 +11,7 @@ Files: .browserslistrc .dockerignore .eslintrc.js .gitignore
 Copyright: WTF Kooperative eG <https://wtf-eg.de/>
 License: AGPL-3.0-or-later
 
-Files: public/img/wtf_logo*
+Files: public/img/wtf_logo.svg src/assets/img/wtf_logo_white.svg
 Copyright: WTF Kooperative eG <https://wtf-eg.de/>
 License: LicenseRef-WTF
 

package-lock.json

@@ -13,6 +13,7 @@
         "@vue/cli-plugin-router": "~4.5.0",
         "@vue/cli-service": "~4.5.0",
         "@vue/compiler-sfc": "^3.0.0",
+        "axios": "^0.21.1",
         "babel-eslint": "^10.1.0",
         "bootstrap": "^5.0.1",
         "core-js": "^3.6.5",
@@ -2586,6 +2587,15 @@
       "integrity": "sha1-1h9G2DslGSUOJ4Ta9bCUeai0HFk=",
       "dev": true
     },
+    "node_modules/axios": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
+      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
+      "dev": true,
+      "dependencies": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "node_modules/babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npm.taobao.org/babel-eslint/download/babel-eslint-10.1.0.tgz",
@@ -16902,6 +16912,15 @@
       "integrity": "sha1-1h9G2DslGSUOJ4Ta9bCUeai0HFk=",
       "dev": true
     },
+    "axios": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
+      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
+      "dev": true,
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npm.taobao.org/babel-eslint/download/babel-eslint-10.1.0.tgz",

package.json

@@ -12,6 +12,7 @@
     "@vue/cli-plugin-router": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "@vue/compiler-sfc": "^3.0.0",
+    "axios": "^0.21.1",
     "babel-eslint": "^10.1.0",
     "bootstrap": "^5.0.1",
     "core-js": "^3.6.5",

src/App.vue

@@ -5,21 +5,97 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
 <template>
+  <div class="alert alert-success text-center mb-0" role="alert">
+    Willkommen beim Alpha-Test!
+    <a target="_blank" 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/')">
-    <Navbar />
+    <nav class="navbar navbar-expand-lg navbar-light bg-light">
+      <div class="container-fluid">
+        <a class="navbar-brand" href="#">KI</a>
+        <button
+          @click="showMobileNavbar = !showMobileNavbar"
+          class="navbar-toggler"
+          type="button"
+          data-bs-toggle="collapse"
+          data-bs-target="#navbarSupportedContent"
+          aria-controls="navbarSupportedContent"
+          aria-expanded="false"
+          aria-label="Toggle navigation"
+        >
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div
+          class="collapse navbar-collapse"
+          :class="{
+            show: showMobileNavbar,
+          }"
+          id="navbarSupportedContent"
+        >
+          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+            <li class="nav-item">
+              <router-link
+                class="nav-link"
+                :to="{ path: `/s/search` }"
+                active-class="active"
+                >Suche</router-link
+              >
+            </li>
+            <li class="nav-item">
+              <router-link
+                class="nav-link"
+                :to="{ path: `/s/profile/${memberId}` }"
+                active-class="active"
+                >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
+              >
+            </li>
+            <li class="nav-item">
+              <button class="btn btn-outline-danger" @click="logout()">
+                Logout
+              </button>
+              <a class="nav-link active" aria-current="page" href="#"></a>
+            </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>
   </header>
   <router-view />
   <Footer />
 </template>
 <script>
 import Footer from '@/views/partials/Footer.vue'
-import Navbar from '@/views/partials/Navbar.vue'
 
 export default {
   name: "App",
   components: {
-    Footer,
-    Navbar,
+    Footer
   },
   data() {
     return {

src/assets/global.scss

@@ -6,7 +6,3 @@
 
 @import "variables";
 @import "bootstrap/scss/bootstrap";
-
-.btn-primary {
-  color: #fff !important;
-}

src/assets/variables.scss

@@ -4,13 +4,5 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-$gray-100: #edefeb;
-$gray-800: #344b5d;
-
 $primary: #0790a9;
-$dark: $gray-800;
-
-$body-bg: $gray-100;
-
-$link-decoration: none;
-$link-hover-decoration: underline;
+$dark: #344b5d;

src/mixins/request.mixin.js

@@ -2,33 +2,29 @@
 //
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
+import axios from "axios";
+
 export default {
   methods: {
     async submitLogin() {
       this.showErrorMessage = false;
       try {
-        const data = JSON.stringify({
-          username: this.username,
-          password: this.password,
-        })
-
-        const response = await fetch(`${this.apiUrl}/users/login`, {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: data
-        })
-
-        if (!response.ok) {
-          this.showErrorMessage = true
-          return
+        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;
         }
-
-        const responseData = await response.json()
-        localStorage.setItem('token', responseData.token);
-        localStorage.setItem('user_id', responseData.user_id);
-        this.$router.push({ path: '/s/search' });
       } catch (error) {
         console.error(error);
         this.showErrorMessage = true;
@@ -36,28 +32,23 @@ export default {
     },
     async search() {
       try {
-        const response = await fetch(`${this.apiUrl}/${this.type}s?search=${this.searchText}`, {
+        const request = await axios.get(
+          `${this.apiUrl}/${this.type}s?search=${this.searchText}`,
+          {
             headers: {
               Authorization: `Bearer ${localStorage.getItem("token")}`,
             },
           }
         );
-
-        if (!response.ok) {
-          console.error();
-          this.showErrorMessage = true;
-          return
-        }
-
-        const responseData = await response.json()
-        this.searchResults = responseData[`${this.type}s`];
-
-        if (
-          !this.values
-          .map((item) => item[this.type].name.toLowerCase())
-          .includes(this.searchText.toLowerCase())
-        ) {
-          this.searchResults.unshift({ name: this.searchText });
+        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();
@@ -65,52 +56,36 @@ export default {
       }
     },
     async initEditPage() {
-      const userId = localStorage.getItem('user_id')
-      const url = `${this.apiUrl}/users/${userId}/profile`
-
       try {
-        const response = await fetch(url, {
-            headers: { 
-              Authorization: `Bearer ${localStorage.getItem("token")}` 
-            },
+        const userProfile = await axios.get(
+          `${this.apiUrl}/users/${localStorage.getItem("user_id")}/profile`,
+          {
+            headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
           }
         );
-
-        if (!response.ok) {
-          return
-        }
-
-        const responseData = await response.json()
-        
-        this.profile = responseData.profile;
+        this.profile = userProfile.data.profile;
       } catch (error) {
         console.error(error);
       }
     },
     async submitFormEdit() {
-      this.showErrorMessage = false
-      this.showSuccessMessage = false
-
       try {
-        const body = JSON.stringify(this.profile)
-        const response = await fetch(
+        const formSubmitResult = await axios.post(
           `${this.apiUrl}/users/${localStorage.getItem("user_id")}/profile`,
+          this.profile,
           {
-            method: 'POST',
             headers: {
               Authorization: `Bearer ${localStorage.getItem("token")}`,
-              'Content-Type': 'application/json',
             },
-            body
           }
         );
-
-        if (!response.ok) {
-          this.showErrorMessage = true
-          return
+        if (formSubmitResult.status === 200) {
+          // success
+          this.showSuccessMessage = true;
+        } else {
+          // failure
+          this.showErrorMessage = true;
         }
-        
-        this.showSuccessMessage = true
       } catch (error) {
         console.error(error);
         this.showErrorMessage = true;
@@ -118,50 +93,35 @@ export default {
     },
     async initViewPage() {
       try {
-        const response = await fetch(`${this.apiUrl}/users/${this.$route.params.memberId}/profile`, {
+        const userProfile = await axios.get(
+          `${this.apiUrl}/users/${this.$route.params.memberId}/profile`,
+          {
             headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
           }
         );
-
-        if (!response.ok) {
-          return
-        }
-
-        const responseData = await response.json()
-        this.profile = responseData.profile;
+        this.profile = userProfile.data.profile;
       } catch (error) {
         console.error(error);
       }
     },
     async submitSearch() {
       this.showErrorMessage = false;
-
       try {
-        const url = new URL(`${this.apiUrl}/users/profiles`)
-
+        let url = `${this.apiUrl}/users/profiles`;
         if (this.searchText != "") {
-          url.searchParams.append('nickname', this.searchText)
+          url += `?nickname=${this.searchText}`;
         }
-
-        const response = await fetch(url, {
+        const result = await axios.get(url, {
           headers: {
             Authorization: `Bearer ${localStorage.getItem("token")}`,
           },
         });
-
-        if (!response.ok) {
-          this.showErrorMessage = true
-          return
-        }
-
-        const responseData = await response.json()
-
-        this.searchResults = responseData.profiles;
-        this.searchTotal = responseData.total;
+        this.searchResults = result.data.profiles;
+        this.searchTotal = result.data.total;
       } catch (error) {
         console.error(error);
         this.showErrorMessage = true;
       }
     },
   },
-}
+}

src/views/Index.vue

@@ -5,15 +5,12 @@ 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>
-    <form @submit.prevent="submitLogin()" class="bg-white p-3 login-form">
+  <div class="container">
+    <h1>WTF Kompetenzinventar</h1>
+    <form @submit.prevent="submitLogin()">
       <div class="mb-3">
-        <label for="exampleInputusername1" class="form-label" >
-          WTF-Benutzername:
+        <label for="exampleInputusername1" class="form-label"
+          >Benutzername:
         </label>
         <input
           type="username"
@@ -33,16 +30,21 @@ SPDX-License-Identifier: AGPL-3.0-or-later
           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>
+      <button type="submit" class="btn btn-primary mb-4">Login</button>
     </form>
+    <a href="https://resetpw.wtf-eg.de/">Globales WTF Passwort zurücksetzen</a>
+    <div
+      class="alert alert-danger mb-4 mt-4"
+      role="alert"
+      v-if="showErrorMessage"
+    >
+      Mit deinen Login Daten ist ein Fehler aufgetreten. Versuch es nochmal oder
+      <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
+      hier ändern.
+    </p>
   </div>
 </template>
 <script>
@@ -60,18 +62,3 @@ export default {
   },
 };
 </script>
-
-<style scoped>
-.container {
-  min-height: 100vh;
-}
-
-.login-form {
-  margin: 0 auto;
-  max-width: 500px;
-}
-
-.wtf-logo--index {
-  max-width: 200px;
-}
-</style>

src/views/partials/Navbar.vue

@@ -1,77 +0,0 @@
-<template>
-  <nav class="navbar navbar-expand-lg navbar-light bg-light">
-    <div class="container-fluid">
-      <a class="navbar-brand" href="#">KI</a>
-      <button
-        @click="showMobileNavbar = !showMobileNavbar"
-        class="navbar-toggler"
-        type="button"
-        data-bs-toggle="collapse"
-        data-bs-target="#navbarSupportedContent"
-        aria-controls="navbarSupportedContent"
-        aria-expanded="false"
-        aria-label="Toggle navigation"
-      >
-        <span class="navbar-toggler-icon"></span>
-      </button>
-      <div
-        class="collapse navbar-collapse"
-        :class="{
-          show: showMobileNavbar,
-        }"
-        id="navbarSupportedContent"
-      >
-        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-          <li class="nav-item">
-            <router-link
-              class="nav-link"
-              :to="{ path: `/s/search` }"
-              active-class="active"
-              >Suche</router-link
-            >
-          </li>
-          <li class="nav-item">
-            <router-link
-              class="nav-link"
-              :to="{ path: `/s/profile/${memberId}` }"
-              active-class="active"
-              >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
-            >
-          </li>
-          <li class="nav-item">
-            <button class="btn btn-outline-danger" @click="logout()">
-              Logout
-            </button>
-            <a class="nav-link active" aria-current="page" href="#"></a>
-          </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>
-</template>