login, profile edit

This commit is contained in:
scammo 2021-06-24 00:40:27 +02:00
parent ffc335f935
commit 356aa738fb
2 changed files with 139 additions and 42 deletions

View File

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

View File

@ -22,21 +22,70 @@
v-model="pronouns"
required
/>
<div id="emailHelp" class="form-text">Z.B.: Er/Ihn, Sie/Ihr, Es etc..</div>
<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>
<textarea
class="form-control"
id="freetext"
rows="3"
v-model="freetext"
></textarea>
</div>
<div class="col-12 col-xs-12">
<label for="volunteerwork" class="form-label">Ehrentamtliche Arbeit:</label>
<textarea class="form-control" id="volunteerwork" rows="3" v-model="volunteerwork"></textarea>
<label for="volunteerwork" class="form-label"
>Ehrentamtliche Arbeit:</label
>
<textarea
class="form-control"
id="volunteerwork"
rows="3"
v-model="volunteerwork"
></textarea>
</div>
</div>
<div>
<label for="skills" class="form-label">Deine Fähigkeiten: (Autocomplete)</label>
<input
autocomplete="off"
type="text"
class="form-control"
id="pronouns"
v-model="searchSkillsText"
@keyup="searchSkills()"
/>
<div class="" v-if="searchSkillResults">
<ul class="list-group">
<li
class="list-group-item"
v-for="result in searchSkillResults"
:key="result.id"
@click="addSkill(result)">{{result.name}}</li>
</ul>
</div>
<div>
<span
v-for="skill in skills"
:key="skill.id"
class="badge bg-primary m-2"
>
{{ skill.name }}
<button
type="button"
class="btn-close"
aria-label="Close"
@click="removeSkill(skill.id)"
></button>
</span>
</div>
</div>
<button type="submit" class="btn btn-primary mb-4">Speichern</button>
<button type="submit" class="btn btn-primary mb-4 mt-4">Speichern</button>
<div
class="alert alert-danger mb-4 mt-4"
role="alert"
@ -48,6 +97,8 @@
</div>
</template>
<script>
import axios from "axios";
export default {
name: "profileEdit",
created() {
@ -60,10 +111,49 @@ export default {
pronouns: "",
freetext: "",
volunteerwork: "",
languages: [],
searchLanguagesText: "",
skills: [
{ id: 3, name: "PHP" },
{ id: 2, name: "PHP" },
],
searchSkillsText: "",
searchSkillResults: [],
};
},
methods: {
submitForm() {},
async searchSkills() {
this.searchSkillResults = [{ id: 5, name: "JavaScript" }]
try {
const skillResult = await axios.get(
`${process.env.VUE_APP_API_URL}/skills?search=${this.searchSkillsText}`
);
console.log(skillResult);
if (skillResult.status === 200) {
this.searchSkillResults = skillResult.skills;
}
} catch (error) {
console.error();
this.showErrorMessage = true;
}
},
addSkill(skill){
if(this.skills.includes(skill)) return false
this.skills.push(skill)
this.searchSkillsText = ''
this.searchSkillResults = []
},
removeSkill(skillId) {
this.skills = this.skills.filter((skill) => {
if (skillId === skill.id) {
return false;
} else {
return true;
}
});
},
searchLanguages() {},
},
};
</script>