Mercurial > gemma
changeset 529:b07763345352
client: add more password reset ui
* Add user interface to show a password reset button that relies
on the already entered user name. Not yet wired. Not yet using
the same HTML form verification for the user name input.
| author | Bernhard Reiter <bernhard@intevation.de> |
|---|---|
| date | Tue, 28 Aug 2018 12:30:41 +0200 |
| parents | 076996a41c31 |
| children | a6d732584c4e |
| files | client/src/views/Login.vue |
| diffstat | 1 files changed, 42 insertions(+), 7 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/views/Login.vue Tue Aug 28 11:50:13 2018 +0200 +++ b/client/src/views/Login.vue Tue Aug 28 12:30:41 2018 +0200 @@ -11,28 +11,46 @@ <div id="alert" v-if="loginFailed" class="loginerrormessage alert alert-danger" role="alert"> <span class="loginerror"><translate>Login failed</translate></span> </div> + <div id="alert" v-if="passwordJustResetted" + class="loginerrormessage alert alert-danger" role="alert"> + <span class="loginerror" + ><translate>Password reset requested!</translate></span> + </div> <div class="input-group mb-3 usernamegroup"> <input type="text" v-model="user" id="inputUsername" class="form-control" :placeholder="usernameLabel" required autofocus> </div> <div class="input-group mb-3 passwordgroup"> - <input :type="isPasswordVisible" v-model="password" id="inputPassword" class="form-control" :placeholder='passwordLabel' required> + <input :type="isPasswordVisible" v-model="password" + id="inputPassword" class="form-control" + :placeholder='passwordLabel' + :required='!showPasswordReset' :disabled='showPasswordReset'> <div class="input-group-append"> - <span class="input-group-text" id="basic-addon2" @click="showPassword"><i :class="eyeIcon"></i></span> + <span class="input-group-text disabled" id="basic-addon2" + @click="showPassword"><i :class="eyeIcon"></i></span> </div> </div> - <button class="submitbutton btn btn-primary btn-block" :disabled="submitted" type="submit"><translate>Login</translate></button> + <button class="submitbutton btn btn-primary btn-block" + :disabled="submitted || showPasswordReset" type="submit" + ><translate>Login</translate></button> </form> </div> <!-- password forgotten part --> <div class="d-flex flex-row justify-content-center"> <form class="loginform form-signin"> - <div v-if="showPasswordReset" class="small">TODO text and action for password reset + <div v-if="showPasswordReset" class="passwordreset"> + <!-- + TODO text and action for password reset <div class="input-group mb-3 usernamegroup"> <input type="text" v-model="usernameToReset" class="form-control" :placeholder="usernameLabel" required> </div> - <button class="btn btn-secondary btn-block" type="button" - @click="togglePasswordReset"><translate>Send</translate></button> + --> + <button class="btn btn-warning btn-block" type="button" + @click="resetPassword" + ><translate>Request password reset!</translate></button> + <div class="forgottenlink small"> + <a href="#" @click.prevent="togglePasswordReset" + ><translate>back to login</translate></a></div> </div> <div v-else class="forgottenlink small"> <a href="#" @click.prevent="togglePasswordReset" @@ -93,6 +111,10 @@ margin-top: $offset; margin-bottom: $offset; } +.passwordreset { + margin-top: $offset; + margin-bottom: $offset; +} .mail-icon { width: $iconwidth; } @@ -125,6 +147,7 @@ password: "", submitted: false, loginFailed: false, + passwordJustResetted: false, readablePassword: false, showPasswordReset: false, usernameToReset: "" @@ -161,6 +184,7 @@ methods: { login() { this.submitted = true; + this.passwordJustResetted = false; const { user, password } = this; this.$store .dispatch("user/login", { user, password }) @@ -174,10 +198,21 @@ }); }, showPassword() { - this.readablePassword = !this.readablePassword; + // disable button when in reset mode + if (!this.showPasswordReset) { + this.readablePassword = !this.readablePassword; + } }, togglePasswordReset() { + this.passwordJustResetted = false; this.showPasswordReset = !this.showPasswordReset; + }, + resetPassword() { + if (this.user) { + console.log("FIXME send reset password to api"); + this.togglePasswordReset(); + this.passwordJustResetted = true; + } } } };