ki-frontend/src/views/Index.vue

75 lines
2.0 KiB
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>