Added a comingFrom parameter to ForgotPassword so we can have different texte in case of optin code expired.

frontend/src/locales/de.json

@@ -146,6 +146,7 @@
       "change-password": "Passwort ändern",
       "forgot_pwd": "Passwort vergessen?",
       "not-authenticated": "Leider konnten wir dich nicht authentifizieren. Bitte wende dich an den Support.",
+      "resend_subtitle": "Dein Aktivierungslink ist abgelaufen, Du kannst hier ein neuen anfordern.",
       "reset": "Passwort zurücksetzen",
       "reset-password": {
         "text": "Jetzt kannst du ein neues Passwort speichern, mit dem du dich zukünftig in der Gradido-App anmelden kannst."

frontend/src/locales/en.json

@@ -146,6 +146,7 @@
       "change-password": "Change password",
       "forgot_pwd": "Forgot password?",
       "not-authenticated": "Unfortunately we could not authenticate you. Please contact the support.",
+      "resend_subtitle": "Your activation link is expired, here you can order a new one.",
       "reset": "Reset password",
       "reset-password": {
         "text": "Now you can save a new password to login to the Gradido-App in the future."

frontend/src/routes/routes.js

@@ -62,6 +62,10 @@ const routes = [
     path: '/password',
     component: () => import('../views/Pages/ForgotPassword.vue'),
   },
+  {
+    path: '/password/:comingFrom',
+    component: () => import('../views/Pages/ForgotPassword.vue'),
+  },
   {
     path: '/register-community',
     component: () => import('../views/Pages/RegisterCommunity.vue'),

frontend/src/views/Pages/ForgotPassword.vue

@@ -5,8 +5,8 @@
         <div class="header-body text-center mb-7">
           <b-row class="justify-content-center">
             <b-col xl="5" lg="6" md="8" class="px-2">
-              <h1>{{ $t('settings.password.reset') }}</h1>
-              <p class="text-lead">{{ $t('settings.password.subtitle') }}</p>
+              <h1>{{ $t(displaySetup.headline) }}</h1>
+              <p class="text-lead">{{ $t(displaySetup.subtitle) }}</p>
             </b-col>
           </b-row>
         </div>
@@ -22,7 +22,7 @@
                   <input-email v-model="form.email"></input-email>
                   <div class="text-center">
                     <b-button type="submit" variant="primary">
-                      {{ $t('settings.password.send_now') }}
+                      {{ $t(displaySetup.button) }}
                     </b-button>
                   </div>
                 </b-form>
@@ -41,6 +41,21 @@
 import { sendResetPasswordEmail } from '../../graphql/queries'
 import InputEmail from '../../components/Inputs/InputEmail'
 
+const textFields = {
+  reset: {
+    headline: 'settings.password.reset',
+    subtitle: 'settings.password.resend_subtitle',
+    button: 'settings.password.send_now',
+    cancel: 'back',
+  },
+  login: {
+    headline: 'settings.password.reset',
+    subtitle: 'settings.password.subtitle',
+    button: 'settings.password.send_now',
+    cancel: 'back',
+  },
+}
+
 export default {
   name: 'password',
   components: {
@@ -52,6 +67,7 @@ export default {
       form: {
         email: '',
       },
+      displaySetup: {},
     }
   },
   methods: {
@@ -71,6 +87,14 @@ export default {
         })
     },
   },
+  created() {
+    console.log('comingFrom', this.$route.params.comingFrom)
+    if (this.$route.params.comingFrom) {
+      this.displaySetup = textFields[this.$route.params.comingFrom]
+    } else {
+      this.displaySetup = textFields.login
+    }
+  },
 }
 </script>
 <style></style>

frontend/src/views/Pages/ResetPassword.vue

@@ -77,6 +77,7 @@ export default {
         password: '',
         passwordRepeat: '',
       },
+      displaySetup: {},
     }
   },
   methods: {
@@ -94,20 +95,29 @@ export default {
           this.$router.push('/thx/reset')
         })
         .catch((error) => {
-          this.$toasted.error(error.message)
+          if (error.message.includes('Code is older than 10 minutes')) {
+            this.$toasted.error(error.message)
+            this.$router.push('/password/reset')
+          } else {
+            this.$toasted.error(error.message)
+          }
         })
     },
     async authenticate() {
       // TODO validate somehow if present and looks good?
       // const optin = this.$route.params.optin
     },
-    setDisplaySetup(from) {
-      this.displaySetup = textFields[this.$route.params.comingFrom]
+    setDisplaySetup() {
+      if (!this.$route.params.comingFrom) {
+        this.displaySetup = textFields.reset
+      } else {
+        this.displaySetup = textFields[this.$route.params.comingFrom]
+      }
     },
   },
-  async mounted() {
-    await this.authenticate()
+  created() {
     this.setDisplaySetup()
+    // await this.authenticate()
   },
 }
 </script>