fix: improve reset password form.

See issue #297
This commit is contained in:
Leo Mouyna 2020-03-03 20:41:18 +01:00 committed by Thomas Citharel
parent 080432dbe5
commit 5e3eb00708
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773

View File

@ -1,37 +1,43 @@
<template> <template>
<section class="section container columns is-mobile is-centered"> <section class="section container">
<div class="card column is-half-desktop"> <div class="columns is-mobile is-centered">
<h1>{{ $t("Password reset") }}</h1> <div class="column is-half-desktop">
<b-message <h1 class="title">
title="Error" {{ $t("Password reset") }}
type="is-danger" </h1>
v-for="error in errors" <b-message
:key="error" title="Error"
>{{ error }}</b-message type="is-danger"
> v-for="error in errors"
<form @submit="resetAction"> :key="error"
<b-field :label="$t('Password')"> >{{ error }}</b-message
<b-input >
aria-required="true" <form @submit="resetAction">
required <b-field :label="$t('Password')">
type="password" <b-input
password-reveal aria-required="true"
minlength="6" required
v-model="credentials.password" type="password"
/> password-reveal
</b-field> minlength="6"
<b-field :label="$t('Password (confirmation)')"> v-model="credentials.password"
<b-input />
aria-required="true" </b-field>
required <b-field :label="$t('Password (confirmation)')">
type="password" <b-input
password-reveal aria-required="true"
minlength="6" required
v-model="credentials.passwordConfirmation" type="password"
/> password-reveal
</b-field> minlength="6"
<button class="button is-primary">{{ $t("Reset my password") }}</button> v-model="credentials.password_confirmation"
</form> />
</b-field>
<button class="button is-primary">
{{ $t("Reset my password") }}
</button>
</form>
</div>
</div> </div>
</section> </section>
</template> </template>
@ -97,3 +103,12 @@ export default class PasswordReset extends Vue {
} }
} }
</script> </script>
<style lang="scss" scoped>
section.section.container {
background: $white;
}
.container .columns {
margin: 1rem auto 3rem;
}
</style>