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="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>