ki-frontend/src/views/Index.vue

    <template>
  <div class="container">
    <h1>Kompetenz Inventar by WTF eG</h1>
    <form @submit.prevent="submitLogin()">
      <div class="mb-3">
        <label for="exampleInputusername1" class="form-label"
          >E-Mail Aresse:
        </label>
        <input
          type="username"
          class="form-control"
          id="exampleInputusername1"
          v-model="username"
          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>
    <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>
    <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",
  data() {
    return {
      showErrorMessage: false,
      username: "",
      password: "",
    };
  },
  methods: {
    async submitLogin() {
      this.showErrorMessage = false;
      try {
        const loginResult = await axios.post(
          `${process.env.VUE_APP_API_URL}/users/login`,
          {
            username: this.username,
            password: this.password,
          }
        );
        console.log(loginResult);
        if (loginResult.status === 200) {
          //success login
          localStorage.setItem("token", loginResult.token);
          localStorage.setItem("user_id", loginResult.user_id);
          this.router.push({ path: "s/search" });
        } else {
          this.showErrorMessage = true;
        }
      } catch (error) {
        console.error();
        this.showErrorMessage = true;
      }
    },
  },
};
</script>