88 lines
3.3 KiB
Vue
88 lines
3.3 KiB
Vue
<template>
|
|
<div class="pw-change">
|
|
<form class="pw-change__form change-form" novalidate @submit.prevent="validateBeforeSubmit">
|
|
<div class="change-form__field skillboxform-input">
|
|
<label for="old-pw" class="skillboxform-input__label">Aktuelles Passwort</label>
|
|
<input id="old-pw"
|
|
name="oldPassword"
|
|
type="text"
|
|
v-model="oldPassword"
|
|
v-validate="'required'"
|
|
:class="{ 'skillboxform-input__input--error': errors.has('oldPassword') }"
|
|
class="change-form__old skillbox-input skillboxform-input__input"
|
|
autocomplete="off"
|
|
data-vv-as="Altes Passwort"
|
|
data-cy="old-password">
|
|
<small v-if="errors.has('oldPassword') && submitted" class="skillboxform-input__error" data-cy="old-password-local-errors">{{ errors.first('oldPassword') }}</small>
|
|
<small v-for="error in oldPasswordErrors" :key="error" class=" skillboxform-input__error" data-cy="old-password-remote-errors">{{ error }}</small>
|
|
</div>
|
|
<div class="change-form__field skillboxform-input">
|
|
<label for="new-pw" class="skillboxform-input__label">Neues Passwort</label>
|
|
<input id="new-pw"
|
|
name="newPassword"
|
|
type="text"
|
|
v-model="newPassword"
|
|
data-vv-as="Neues Passwort"
|
|
v-validate="'required|min:8|strongPassword'"
|
|
:class="{ 'skillboxform-input__input--error': errors.has('newPassword') }"
|
|
class="change-form__new skillbox-input skillboxform-input__input"
|
|
autocomplete="off"
|
|
data-cy="new-password">
|
|
<small v-if="errors.has('newPassword') && submitted" class=" skillboxform-input__error" data-cy="new-password-local-errors">{{ errors.first('newPassword') }}</small>
|
|
<small v-for="error in newPasswordErrors" :key="error" class=" skillboxform-input__error" data-cy="new-password-remote-errors">{{ error }}</small>
|
|
<p class="skillboxform-input__hint">Das Passwort muss mindestens 8 Zeichen lang sein und Grossbuchstaben, Zahlen und Sonderzeichen beinhalten.</p>
|
|
</div>
|
|
<button class="button button--primary change-form__submit" data-cy="change-password-button">Speichern</button>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: ['newPasswordErrors', 'oldPasswordErrors'],
|
|
data: () => ({
|
|
oldPassword: '',
|
|
newPassword: '',
|
|
submitted: false
|
|
}),
|
|
methods: {
|
|
validateBeforeSubmit () {
|
|
this.$validator.validate().then((result) => {
|
|
this.submitted = true;
|
|
if (result) {
|
|
this.$emit('passwordSubmited', {
|
|
oldPassword: this.oldPassword,
|
|
newPassword: this.newPassword
|
|
});
|
|
}
|
|
})
|
|
},
|
|
resetForm () {
|
|
this.oldPassword = '';
|
|
this.newPassword = '';
|
|
this.submitted = false;
|
|
this.$validator.reset();
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$root.$on('reset-password-form', () => {
|
|
this.resetForm();
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/styles/_variables.scss";
|
|
@import "@/styles/_buttons.scss";
|
|
|
|
.change-form {
|
|
width: 50%;
|
|
|
|
@media screen and (max-width: 1024px) {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
</style>
|