kickoff

src/views/About.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

src/views/Home.vue

@@ -1,18 +0,0 @@
-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
-export default {
-  name: 'Home',
-  components: {
-    HelloWorld
-  }
-}
-</script>

src/views/Index.vue

@@ -0,0 +1,75 @@
+    <template>
+  <div class="container">
+    <h1>Kompetenz Inventar by WTF eG</h1>
+    <form @submit.prevent="submitLogin()">
+      <div class="mb-3">
+        <label for="exampleInputEmail1" class="form-label"
+          >E-Mail Aresse:
+        </label>
+        <input
+          type="email"
+          class="form-control"
+          id="exampleInputEmail1"
+          v-model="email"
+          required
+        />
+      </div>
+      <div class="mb-3">
+        <label for="exampleInputPassword1" class="form-label">Passwort:</label>
+        <input
+          type="password"
+          class="form-control"
+          id="exampleInputPassword1"
+          v-model="password"
+          required
+        />
+      </div>
+      <button type="submit" class="btn btn-primary mb-4">Login</button>
+    </form>
+    <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/">erzeuge ein neues Passwort</a>. 
+    </div>
+    <p>
+      Das Login gilt nur für WTF eG Mitglieder. Du kannst dein Ldap Passwort
+      hier ändern.
+    </p>
+  </div>
+</template>
+<script>
+import axios from 'axios'
+
+export default {
+  name: "Index",
+  methods: {
+      async submitLogin(){
+          this.showErrorMessage = false
+          try{
+              const loginResult = await axios.post(
+                `${this.apiUrl}/login`,
+                {
+                    email: this.email,
+                    password: this.password
+                })
+                if(loginResult.status === 200){
+                    //success login
+                    this.router.push({path: 's/search'})
+                }
+                else{
+                    this.showErrorMessage = true
+                }
+          }catch(error){
+              console.error()
+                this.showErrorMessage = true
+          }
+         
+      }
+  },
+  data(){
+      return {
+          showErrorMessage: false,
+          email: '',
+          password: ''
+      }
+  }
+}
+</script>

src/views/Search.vue

@@ -0,0 +1,58 @@
+<template>
+    <h1>Suche</h1>
+    <form @submit.prevent="submitSearch()">
+        <div class="row">
+            <div class="col">
+                <input
+                    type="text"
+                    class="form-control"
+                    id="searchText"
+                    v-model="searchText"
+                    required
+                    />
+            </div>
+            <div class="col">
+                 <button type="submit" class="btn btn-primary mb-4">Suche Starten</button>
+            </div>
+        </div>
+    </form>
+    <div class="alert alert-danger mb-4 mt-4" role="alert" v-if="showErrorMessage">
+        Bei der Suche ist ein Fehler aufgetreten
+    </div>
+</template>
+<script>
+import axios from 'axios'
+
+export default {
+    name: 'Search',
+  data(){
+      return {
+          showErrorMessage: false,
+          searchText: '',
+      }
+  },
+  methods: {
+      async submitSearch(){
+          this.showErrorMessage = false
+          try{
+              const loginResult = await axios.post(
+                `${this.apiUrl}/search`,
+                // Beispiel Hafte Daten
+                {
+                    searchText: this.searchText,
+                })
+                if(loginResult.status === 200){
+                    //success login
+                    router.push({path: 's/search'})
+                }
+                else{
+                    this.showErrorMessage = true
+                }
+          }catch(error){
+              console.error()
+                this.showErrorMessage = true
+          }
+      }
+  }
+}
+</script>

src/views/profile/Edit.vue

@@ -0,0 +1,11 @@
+<template>
+    <div class="container">
+        <h1>Profil Ändern</h1>
+    </div>
+    
+</template>
+<script>
+export default {
+    name: 'profileEdit'
+}
+</script>

src/views/profile/View.vue

@@ -0,0 +1,11 @@
+<template>
+    <div class="container">
+        <h1>Profil Ansehen</h1>
+        
+    </div>
+</template>
+<script>
+export default {
+    name: 'profileView'
+}
+</script>