login, profile edit

src/views/Index.vue

@@ -3,14 +3,14 @@
     <h1>Kompetenz Inventar by WTF eG</h1>
     <form @submit.prevent="submitLogin()">
       <div class="mb-3">
-        <label for="exampleInputEmail1" class="form-label"
+        <label for="exampleInputusername1" class="form-label"
           >E-Mail Aresse:
         </label>
         <input
-          type="email"
+          type="username"
           class="form-control"
-          id="exampleInputEmail1"
-          v-model="email"
+          id="exampleInputusername1"
+          v-model="username"
           required
         />
       </div>
@@ -27,8 +27,13 @@
       <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/">erzeuge ein neues Passwort</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/">erzeuge ein neues Passwort</a>.
     </div>
     <p>
       Das Login gilt nur für WTF eG Mitglieder. Du kannst dein Ldap Passwort
@@ -37,40 +42,42 @@
   </div>
 </template>
 <script>
-import axios from 'axios'
+import axios from "axios";
 
 export default {
   name: "Index",
-  data(){
+  data() {
     return {
       showErrorMessage: false,
-          email: '',
-          password: ''
-      }
+      username: "",
+      password: "",
+    };
   },
   methods: {
-      async submitLogin(){
-          this.showErrorMessage = false
-          try{
+    async submitLogin() {
+      this.showErrorMessage = false;
+      try {
         const loginResult = await axios.post(
           `${process.env.VUE_APP_API_URL}/users/login`,
           {
-                    email: this.email,
-                    password: this.password
-                })
-                if(loginResult.status === 200){
+            username: this.username,
+            password: this.password,
+          }
+        );
+        console.log(loginResult);
+        if (loginResult.status === 200) {
           //success login
-                    this.router.push({path: 's/search'})
+          localStorage.setItem("token", loginResult.token);
+          localStorage.setItem("user_id", loginResult.user_id);
+          this.router.push({ path: "s/search" });
+        } else {
+          this.showErrorMessage = true;
         }
-                else{
-                    this.showErrorMessage = true
+      } catch (error) {
+        console.error();
+        this.showErrorMessage = true;
       }
-          }catch(error){
-              console.error()
-                this.showErrorMessage = true
-          }
-         
-      }
-  }
-}
+    },
+  },
+};
 </script>

src/views/profile/Edit.vue

@@ -22,21 +22,70 @@
             v-model="pronouns"
             required
           />
-        <div id="emailHelp" class="form-text">Z.B.: Er/Ihn, Sie/Ihr, Es etc..</div>
+          <div id="emailHelp" class="form-text">
+            Z.B.: Er/Ihn, Sie/Ihr, Es etc..
+          </div>
         </div>
       </div>
       <div class="row">
         <div class="col-12 col-xs-12">
           <label for="freetext" class="form-label">Freitext Vorstellung:</label>
-            <textarea class="form-control" id="freetext" rows="3" v-model="freetext"></textarea>
+          <textarea
+            class="form-control"
+            id="freetext"
+            rows="3"
+            v-model="freetext"
+          ></textarea>
         </div>
         <div class="col-12 col-xs-12">
-            <label for="volunteerwork" class="form-label">Ehrentamtliche Arbeit:</label>
-            <textarea class="form-control" id="volunteerwork" rows="3" v-model="volunteerwork"></textarea>
+          <label for="volunteerwork" class="form-label"
+            >Ehrentamtliche Arbeit:</label
+          >
+          <textarea
+            class="form-control"
+            id="volunteerwork"
+            rows="3"
+            v-model="volunteerwork"
+          ></textarea>
+        </div>
+      </div>
+      <div>
+        <label for="skills" class="form-label">Deine Fähigkeiten: (Autocomplete)</label>
+        <input
+          autocomplete="off" 
+          type="text"
+          class="form-control"
+          id="pronouns"
+          v-model="searchSkillsText"
+          @keyup="searchSkills()"
+        />
+        <div class="" v-if="searchSkillResults">
+          <ul class="list-group">
+            <li 
+              class="list-group-item" 
+              v-for="result in searchSkillResults" 
+              :key="result.id"
+              @click="addSkill(result)">{{result.name}}</li>
+          </ul>
+        </div>
+        <div>
+          <span
+            v-for="skill in skills"
+            :key="skill.id"
+            class="badge bg-primary m-2"
+          >
+            {{ skill.name }}
+            <button
+              type="button"
+              class="btn-close"
+              aria-label="Close"
+              @click="removeSkill(skill.id)"
+            ></button>
+          </span>
         </div>
       </div>
 
-      <button type="submit" class="btn btn-primary mb-4">Speichern</button>
+      <button type="submit" class="btn btn-primary mb-4 mt-4">Speichern</button>
       <div
         class="alert alert-danger mb-4 mt-4"
         role="alert"
@@ -48,6 +97,8 @@
   </div>
 </template>
 <script>
+import axios from "axios";
+
 export default {
   name: "profileEdit",
   created() {
@@ -60,10 +111,49 @@ export default {
       pronouns: "",
       freetext: "",
       volunteerwork: "",
+      languages: [],
+      searchLanguagesText: "",
+      skills: [
+        { id: 3, name: "PHP" },
+        { id: 2, name: "PHP" },
+      ],
+      searchSkillsText: "",
+      searchSkillResults: [],
     };
   },
   methods: {
     submitForm() {},
+    async searchSkills() {
+      this.searchSkillResults = [{ id: 5, name: "JavaScript" }]
+      try {
+        const skillResult = await axios.get(
+          `${process.env.VUE_APP_API_URL}/skills?search=${this.searchSkillsText}`
+        );
+        console.log(skillResult);
+        if (skillResult.status === 200) {
+          this.searchSkillResults = skillResult.skills;
+        }
+      } catch (error) {
+        console.error();
+        this.showErrorMessage = true;
+      }
+    },
+    addSkill(skill){
+      if(this.skills.includes(skill)) return false
+      this.skills.push(skill)
+      this.searchSkillsText = ''
+      this.searchSkillResults = []
+    },
+    removeSkill(skillId) {
+      this.skills = this.skills.filter((skill) => {
+        if (skillId === skill.id) {
+          return false;
+        } else {
+          return true;
+        }
+      });
+    },
+    searchLanguages() {},
   },
 };
 </script>