Mercurial > gemma
changeset 485:7a8644e9e50e
client: add (unwired) password reset form
* Add password reset form to the Login view. Pressing the forgotton
link will blend it in and currently the send button will hide it again.
This is a good first place because an additional view and route would be
more work with the same functionality. It doe not yet trigger action
with the backend.
* Put password forgotten part and bottom logo in divs beside the first form
which matches the semantics better.
author | Bernhard Reiter <bernhard@intevation.de> |
---|---|
date | Fri, 24 Aug 2018 12:14:56 +0200 |
parents | 2ac37419f593 |
children | b2dc9c2f69e0 91d0f23360e6 8f3f7577fbe7 |
files | client/src/views/Login.vue |
diffstat | 1 files changed, 26 insertions(+), 3 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/views/Login.vue Fri Aug 24 11:36:11 2018 +0200 +++ b/client/src/views/Login.vue Fri Aug 24 12:14:56 2018 +0200 @@ -21,10 +21,28 @@ </div> </div> <button class="submitbutton btn btn-primary btn-block" :disabled="submitted" type="submit"><translate>Login</translate></button> - <div class="forgottenlink small"><a href="#"><translate>Forgot password</translate></a></div> - <div class="secondary-logo"><img :src="secondaryLogo"></div> </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 class="input-group mb-3 emailgroup"> + <input type="text" v-model="emailToReset" class="form-control" :placeholder="emailLabel" required> + </div> + <button class="btn btn-secondary btn-block" type="button" + @click="togglePasswordReset"><translate>Send</translate></button> + </div> + <div v-else class="forgottenlink small"> + <a href="#" @click.prevent="togglePasswordReset" + ><translate>Forgot password</translate></a></div> + </form> + </div> + + <!-- bottom logo section --> + <div class="secondary-logo d-flex flex-row justify-content-center" + ><img :src="secondaryLogo"></div> </div> </template>) @@ -107,7 +125,9 @@ password: "", submitted: false, loginFailed: false, - readablePassword: false + readablePassword: false, + showPasswordReset: false, + emailToReset: "" }; }, computed: { @@ -155,6 +175,9 @@ }, showPassword() { this.readablePassword = !this.readablePassword; + }, + togglePasswordReset() { + this.showPasswordReset = !this.showPasswordReset; } } };