forked from kompetenzinventar/ki-frontend
login, profile edit
This commit is contained in:
parent
ffc335f935
commit
356aa738fb
@ -3,14 +3,14 @@
|
|||||||
<h1>Kompetenz Inventar by WTF eG</h1>
|
<h1>Kompetenz Inventar by WTF eG</h1>
|
||||||
<form @submit.prevent="submitLogin()">
|
<form @submit.prevent="submitLogin()">
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label for="exampleInputEmail1" class="form-label"
|
<label for="exampleInputusername1" class="form-label"
|
||||||
>E-Mail Aresse:
|
>E-Mail Aresse:
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
type="email"
|
type="username"
|
||||||
class="form-control"
|
class="form-control"
|
||||||
id="exampleInputEmail1"
|
id="exampleInputusername1"
|
||||||
v-model="email"
|
v-model="username"
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@ -27,8 +27,13 @@
|
|||||||
<button type="submit" class="btn btn-primary mb-4">Login</button>
|
<button type="submit" class="btn btn-primary mb-4">Login</button>
|
||||||
</form>
|
</form>
|
||||||
<a href="https://resetpw.wtf-eg.de/">Globales WTF Passwort zurücksetzen</a>
|
<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">
|
<div
|
||||||
Mit deinen Login Daten ist ein Fehler aufgetreten. Versuch es nochmal oder <a href="https://resetpw.wtf-eg.de/">erzeuge ein neues Passwort</a>.
|
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>
|
</div>
|
||||||
<p>
|
<p>
|
||||||
Das Login gilt nur für WTF eG Mitglieder. Du kannst dein Ldap Passwort
|
Das Login gilt nur für WTF eG Mitglieder. Du kannst dein Ldap Passwort
|
||||||
@ -37,40 +42,42 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import axios from 'axios'
|
import axios from "axios";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "Index",
|
name: "Index",
|
||||||
data(){
|
data() {
|
||||||
return {
|
return {
|
||||||
showErrorMessage: false,
|
showErrorMessage: false,
|
||||||
email: '',
|
username: "",
|
||||||
password: ''
|
password: "",
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
async submitLogin(){
|
async submitLogin() {
|
||||||
this.showErrorMessage = false
|
this.showErrorMessage = false;
|
||||||
try{
|
try {
|
||||||
const loginResult = await axios.post(
|
const loginResult = await axios.post(
|
||||||
`${process.env.VUE_APP_API_URL}/users/login`,
|
`${process.env.VUE_APP_API_URL}/users/login`,
|
||||||
{
|
{
|
||||||
email: this.email,
|
username: this.username,
|
||||||
password: this.password
|
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
|
|
||||||
}
|
}
|
||||||
|
);
|
||||||
|
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>
|
</script>
|
@ -22,21 +22,70 @@
|
|||||||
v-model="pronouns"
|
v-model="pronouns"
|
||||||
required
|
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>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-12 col-xs-12">
|
<div class="col-12 col-xs-12">
|
||||||
<label for="freetext" class="form-label">Freitext Vorstellung:</label>
|
<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>
|
||||||
<div class="col-12 col-xs-12">
|
<div class="col-12 col-xs-12">
|
||||||
<label for="volunteerwork" class="form-label">Ehrentamtliche Arbeit:</label>
|
<label for="volunteerwork" class="form-label"
|
||||||
<textarea class="form-control" id="volunteerwork" rows="3" v-model="volunteerwork"></textarea>
|
>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>
|
||||||
</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
|
<div
|
||||||
class="alert alert-danger mb-4 mt-4"
|
class="alert alert-danger mb-4 mt-4"
|
||||||
role="alert"
|
role="alert"
|
||||||
@ -48,10 +97,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "profileEdit",
|
name: "profileEdit",
|
||||||
created() {
|
created() {
|
||||||
// get user profile by jwt tocken and fill the form details
|
// get user profile by jwt tocken and fill the form details
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@ -60,10 +111,49 @@ export default {
|
|||||||
pronouns: "",
|
pronouns: "",
|
||||||
freetext: "",
|
freetext: "",
|
||||||
volunteerwork: "",
|
volunteerwork: "",
|
||||||
|
languages: [],
|
||||||
|
searchLanguagesText: "",
|
||||||
|
skills: [
|
||||||
|
{ id: 3, name: "PHP" },
|
||||||
|
{ id: 2, name: "PHP" },
|
||||||
|
],
|
||||||
|
searchSkillsText: "",
|
||||||
|
searchSkillResults: [],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
submitForm() {},
|
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>
|
</script>
|
Loading…
Reference in New Issue
Block a user