95 lines
2.8 KiB
Vue
95 lines
2.8 KiB
Vue
<template>
|
|
<div class="pw-reset">
|
|
<form class="pw-reset__form reset-form" novalidate @submit.prevent="validateBeforeSubmit">
|
|
<div class="reset-form__field sbform-input">
|
|
<label for="old-pw" class="sbform-input__label">Aktuells Passwort</label>
|
|
<input id="old-pw"
|
|
name="oldPassword"
|
|
type="text"
|
|
v-model="oldPassword"
|
|
v-validate="'required'"
|
|
:class="{ 'sbform-input__input--error': errors.has('oldPassword') }"
|
|
class="reset-form__old skillbox-input sbform-input__input">
|
|
<small v-if="errors.has('oldPassword') && submitted" class="sbform-input__error">{{ errors.first('oldPassword') }}</small>
|
|
<small v-for="error in oldPasswordErrors" :key="error" class=" sbform-input__error">{{ error }}</small>
|
|
</div>
|
|
<div class="reset-form__field sbform-input">
|
|
<label for="new-pw" class="sbform-input__label">Neues Passwort</label>
|
|
<input id="new-pw"
|
|
name="newPassword"
|
|
type="text"
|
|
v-model="newPassword"
|
|
v-validate="'required|min:8|strongPassword'"
|
|
:class="{ 'sbform-input__input--error': errors.has('newPassword') }"
|
|
class="reset-form__new skillbox-input sbform-input__input">
|
|
<small v-if="errors.has('newPassword') && submitted" class=" sbform-input__error">{{ errors.first('newPassword') }}</small>
|
|
<small v-for="error in newPasswordErrors" :key="error" class=" sbform-input__error">{{ error }}</small>
|
|
</div>
|
|
<button class="button button--primary reset-form__submit">Zurücksetzen</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
|
|
});
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/styles/_variables.scss";
|
|
@import "@/styles/_buttons.scss";
|
|
|
|
.reset-form {
|
|
width: 50%;
|
|
|
|
@media screen and (max-width: 1024px) {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.sbform-input {
|
|
|
|
margin-bottom: 20px;
|
|
font-family: $sans-serif-font-family;
|
|
|
|
&__label {
|
|
margin-bottom: 10px;
|
|
display: inline-block;
|
|
}
|
|
|
|
&__input {
|
|
width: 100%;
|
|
|
|
&--error {
|
|
border-color: $color-error;
|
|
}
|
|
}
|
|
|
|
&__error {
|
|
margin-top: 10px;
|
|
color: $color-error;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
</style>
|