ki-frontend/src/views/profile/Edit.vue

<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",
  created() {
      // get user profile by jwt tocken and fill the form details
  },
  data() {
    return {
      showErrorMessage: false,
      nickname: "",
      pronouns: "",
      freetext: "",
      freetext: "",
    };
  },
  methods: {
    submitForm() {},
  },
};
</script>