Mercurial > gemma

changeset 485:7a8644e9e50e

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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;
     }
   }
 };