add password reset pages (#1164)

impresso · Aug 21, 2023 · f2c5889 · f2c5889
1 parent 69422e5
commit f2c5889
Show file tree

Hide file tree

Showing 8 changed files with 376 additions and 47 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -387,7 +387,8 @@ $clr-grey-900: #ddd;
 }
 
 .btn-outline-primary,
-.btn-outline-secondary {
+.btn-outline-secondary,
+.btn-primary {
   border-radius: 2px;
   box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 3px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
 }

diff --git a/src/components/UserLoginPage.vue b/src/components/UserLoginPage.vue
@@ -1,55 +1,70 @@
-<template lang="html">
+<template>
   <i-layout id="UserLoginPage">
     <i-layout-section class="section">
       <div class="login-form">
         <form v-on:submit.prevent="authenticate" class="form-signin">
           <div class="header p-3">
-            {{$t("login_title")}}
+            {{ $t('login_title') }}
           </div>
           <div class="body py-4 px-3">
             <div class="alert alert-danger" v-show="error" role="alert">
-              {{error}}
+              {{ error }}
             </div>
             <label for="inputEmail" class="sr-only">Email address</label>
             <input
               v-model="email"
               type="email"
               class="form-control"
+              placeholder="Email address"
               required
               autofocus
-              v-bind:autocomplete="autocomplete()">
+              v-bind:autocomplete="autocomplete()"
+            />
             <label for="inputPassword" class="sr-only">Password</label>
             <input
               v-model="password"
               type="password"
               class="form-control"
               placeholder="Password"
               required
-              v-bind:autocomplete="autocomplete()">
-            <div class="checkbox mb-3">
+              v-bind:autocomplete="autocomplete()"
+            />
+            <div class="checkbox">
               <label>
-                <input type="checkbox" value="remember-me" v-model="rememberCredentials"> {{$t("login_remember")}}
+                <input type="checkbox" value="remember-me" v-model="rememberCredentials" />
+                {{ $t('login_remember') }}
               </label>
             </div>
+
             <div class="footer mb-3">
-              <button class="btn btn-sm btn-primary btn-block" type="submit">{{$t("login_button")}}</button>
+              <button class="btn btn-md btn-primary btn-block" type="submit">
+                {{ $t('login_button') }}
+              </button>
             </div>
+            <!-- Password forgotten -->
 
+            <p class="mb-0">
+              Did you forget your password? <br />
+              <router-link :to="{ name: 'passwordReset' }" v-html="$t('actions.resetMyPassword')" />
+            </p>
           </div>
           <div class="footer p-3">
             <h5>Do you need an account?</h5>
-            <router-link to="register" class="btn btn-sm btn-outline-primary btn-block">{{$t("signup_button")}}</router-link>
-            <p class="mt-3">Any Questions? <br/>Contact us at <a href="mailto:info@impresso-project.ch">info@impresso-project.ch</a></p>
+            <router-link to="register" class="btn btn-sm btn-outline-primary btn-block">{{
+              $t('signup_button')
+            }}</router-link>
+            <p class="mt-3">
+              Any Questions? <br />Contact us at
+              <a href="mailto:info@impresso-project.ch">info@impresso-project.ch</a>
+            </p>
           </div>
-
         </form>
       </div>
     </i-layout-section>
   </i-layout>
 </template>
 
 <script>
-
 export default {
   data: () => ({
     email: '',
@@ -58,49 +73,54 @@ export default {
   }),
   methods: {
     autocomplete() {
-      return this.rememberCredentials === true ? 'on' : 'off';
+      return this.rememberCredentials === true ? 'on' : 'off'
     },
     authenticate() {
-      this.error = false;
-      const path = this.$route.query.redirect || window.redirect || '/';
+      this.error = false
+      const path = this.$route.query.redirect || window.redirect || '/'
 
-      this.$store.dispatch('user/LOGIN', {
-        email: this.email,
-        password: this.password,
-      }).then(() => {
-        this.$router.push({
-          path,
-          ...this.$store.getters.redirectionParams,
-        });
-      }).catch((err) => {
-        if (err.code === 401) {
-          this.error = this.$t('errors.LoginFailed');
-        }
-        console.warn('error', err);
-      });
+      this.$store
+        .dispatch('user/LOGIN', {
+          email: this.email,
+          password: this.password,
+        })
+        .then(() => {
+          this.$router.push({
+            path,
+            ...this.$store.getters.redirectionParams,
+          })
+        })
+        .catch(err => {
+          if (err.code === 401) {
+            this.error = this.$t('errors.LoginFailed')
+          }
+          console.warn('error', err)
+        })
     },
   },
   computed: {
     rememberCredentials: {
       get() {
-        return this.$store.state.user.rememberCredentials;
+        return this.$store.state.user.rememberCredentials
       },
       set(val) {
         this.$store.commit('user/SET_REMEMBER_CREDENTIALS', {
           remember: val,
-        });
+        })
       },
     },
   },
-  components: {
-  },
-};
+  components: {},
+}
 </script>
 
 <style scoped lang="scss">
-@import "impresso-theme/src/scss/variables.sass";
+@import 'impresso-theme/src/scss/variables.sass';
 
-#UserLoginPage{
+#UserLoginPage a {
+  text-decoration: underline;
+}
+#UserLoginPage {
   height: 100%;
   background: url(./../assets/img/login_bg.jpg) no-repeat center center fixed;
   -webkit-background-size: cover;
@@ -109,38 +129,44 @@ export default {
   background-size: cover;
   background-color: rgba(0, 0, 0, 0.3);
   background-blend-mode: multiply;
-  .section{
+  .section {
     align-items: center;
-    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAG0lEQVQYV2NkYGD4z8DAwMgABXAGNgGwSgwVAFbmAgXQdISfAAAAAElFTkSuQmCC) repeat;
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAG0lEQVQYV2NkYGD4z8DAwMgABXAGNgGwSgwVAFbmAgXQdISfAAAAAElFTkSuQmCC)
+      repeat;
   }
-};
+}
 
-.login-form{
+.login-form {
   background: white;
   width: 100%;
-  max-width: 330px;
+  max-width: 350px;
   margin: 40px auto;
   box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
-  .header{
+
+  .header {
     background: $clr-accent-light;
     font-weight: bold;
     font-size: larger;
   }
 
-  .footer{
+  .footer {
     background: #f4f5f6;
   }
+
+  form {
+    border-radius: 2px;
+  }
 }
 
 .form-signin {
   .form-control:focus {
     position: relative;
     z-index: 2;
   }
-  input[type="email"] {
+  input[type='email'] {
     margin-bottom: -1px;
   }
-  input[type="password"] {
+  input[type='password'] {
     margin-bottom: 10px;
   }
 }

diff --git a/src/i18n/messages.js b/src/i18n/messages.js
@@ -65,6 +65,7 @@ export default {
       agree: 'I agree to the terms of use',
       accept: 'accept',
       browseAll: 'show all ...',
+      changePassword: 'Change password',
       compare: 'compare ...',
       detail: 'more details...',
       downloadCsv: 'download csv',
@@ -85,6 +86,7 @@ export default {
       applyChangesDetailed: 'apply changes (added: {added}, removed: {removed})',
       addToCurrentFilters: 'Add as search filter',
       removeFromCurrentFilters: 'Remove filter from current search',
+      resetPassword: 'Reset my password',
       addToCurrentFiltersDetailed:
         'Add selected option as search filter|Add <b> {count}</b> selected options',
       addToCurrentItemsDetailed:
@@ -100,6 +102,7 @@ export default {
       requestAccount: 'Request User Account',
       resetFilters: 'start fresh, reset filters!',
       resetItems: 'reset list',
+      resetMyPassword: 'Reset your password',
       resetObservedItems: 'reset observed list',
       loadRandomPage: 'load random page',
       useCurrentQuery: 'Use most recent search query',
@@ -209,7 +212,9 @@ export default {
       loggedInOnly: 'You need to be logged in to access this content.',
       TypeError: 'TypeError:',
       Timeout: 'Timeout:',
+      formError: 'Please correct the form below. <b>{error}</b>',
       BadRequest: 'Bad request.',
+      NotImplemented: 'Not implemented.',
       Conflict: {
         UsernameExistError: 'This username is already taken!',
       },
@@ -223,6 +228,8 @@ export default {
       Notauthenticated: 'Please logout, then login again. Authentication failed',
       Invalidauthenticationinformationnostrategyset:
         'Please reload the page, a couple of errors occurred',
+      ResetPasswordGeneralError:
+        'The reset password service is not is currently unavailable. Please try again later. <br/><br/>If the problem persists, please contact us at <a href="mailto:info@impresso-project.ch">info@impresso-project.ch</a>. <br/><br/> Message received: <b>{error}</b>',
     },
     paths: {
       newspapers: {