env variables usage, more form elements

README.md

@@ -9,12 +9,12 @@ npm install
 
 ### Compiles and hot-reloads for development
 ```
-npm run serve
+VUE_APP_API_URL=localhost:8000 npm run serve
 ```
 
 ### Compiles and minifies for production
 ```
-npm run build
+VUE_APP_API_URL=localhost:8000 npm run build
 ```
 
 ### Lints and fixes files
@@ -26,3 +26,6 @@ npm run lint
 See [Configuration Reference](https://cli.vuejs.org/config/).
 
 Vorraussetzung: Node & NPM
+
+### Enviroment Variable
+VUE_APP_API_URL ist die Enviroment Variable mit der die Adresse der API übergeben wird

src/views/Index.vue

@@ -26,6 +26,7 @@
       </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/">erzeuge ein neues Passwort</a>. 
     </div>
@@ -40,12 +41,19 @@ import axios from 'axios'
 
 export default {
   name: "Index",
+  data(){
+      return {
+          showErrorMessage: false,
+          email: '',
+          password: ''
+      }
+  },
   methods: {
       async submitLogin(){
           this.showErrorMessage = false
           try{
               const loginResult = await axios.post(
-                `${this.apiUrl}/login`,
+                `${process.env.VUE_APP_API_URL}/users/login`,
                 {
                     email: this.email,
                     password: this.password
@@ -63,13 +71,6 @@ export default {
           }
          
       }
-  },
-  data(){
-      return {
-          showErrorMessage: false,
-          email: '',
-          password: ''
-      }
   }
 }
 </script>

src/views/Search.vue

@@ -36,14 +36,14 @@ export default {
           this.showErrorMessage = false
           try{
               const loginResult = await axios.post(
-                `${this.apiUrl}/search`,
+                `${process.env.VUE_APP_API_URL}/search`,
                 // Beispiel Hafte Daten
                 {
                     searchText: this.searchText,
                 })
                 if(loginResult.status === 200){
                     //success login
-                    router.push({path: 's/search'})
+                    this.router.push({path: 's/search'})
                 }
                 else{
                     this.showErrorMessage = true

src/views/profile/Edit.vue

@@ -1,11 +1,69 @@
 <template>
   <div class="container">
     <h1>Profil Ändern</h1>
+    <form @submit.prevent="submitForm()">
+      <div class="row">
+        <div class="col-6 col-xs-12">
+          <label for="nickname" class="form-label">Nickname:</label>
+          <input
+            type="text"
+            class="form-control"
+            id="nickname"
+            v-model="nickname"
+            required
+          />
+        </div>
+        <div class="col-6 col-xs-12">
+          <label for="nickname" class="form-label">Pronomen:</label>
+          <input
+            type="text"
+            class="form-control"
+            id="pronouns"
+            v-model="pronouns"
+            required
+          />
+        <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>
+        </div>
+        <div class="col-12 col-xs-12">
+            <label for="freetext" class="form-label">Ehrentamtliche Arbeit:</label>
+            <textarea class="form-control" id="freetext" rows="3" v-model="freetext"></textarea>
+        </div>
       </div>
 
+      <button type="submit" class="btn btn-primary mb-4">Speichern</button>
+      <div
+        class="alert alert-danger mb-4 mt-4"
+        role="alert"
+        v-if="showErrorMessage"
+      >
+        Es ist Fehler aufgetreten
+      </div>
+    </form>
+  </div>
 </template>
 <script>
 export default {
-    name: 'profileEdit'
+  name: "profileEdit",
-}
+  created() {
+      // get user profile by jwt tocken and fill the form details
+  },
+  data() {
+    return {
+      showErrorMessage: false,
+      nickname: "",
+      pronouns: "",
+      freetext: "",
+      freetext: "",
+    };
+  },
+  methods: {
+    submitForm() {},
+  },
+};
 </script>