From 28f85cce87cce24fa07ce3568c3bfb2811e5ca37 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Fri, 29 Apr 2022 11:41:32 +0200
Subject: [PATCH] Refactor ResetPassword to remove thx page, a start

---
 frontend/src/pages/ResetPassword.vue | 120 ++++++++++++++++-----------
 1 file changed, 72 insertions(+), 48 deletions(-)

diff --git a/frontend/src/pages/ResetPassword.vue b/frontend/src/pages/ResetPassword.vue
index a737246bc..fef56a112 100644
--- a/frontend/src/pages/ResetPassword.vue
+++ b/frontend/src/pages/ResetPassword.vue
@@ -1,55 +1,66 @@
 <template>
   <div class="resetpwd-form">
-    <b-container>
-      <div class="header p-4" ref="header">
-        <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">
-              <!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
-              <h1>{{ $t(displaySetup.title) }}</h1>
-              <div class="pb-4">
-                <span>
-                  <!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
-                  {{ $t(displaySetup.text) }}
-                </span>
-              </div>
-            </b-col>
-          </b-row>
+    <div v-if="!showPageMessage">
+      <b-container>
+        <div class="header p-4" ref="header">
+          <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">
+                <!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
+                <h1>{{ $t(displaySetup.title) }}</h1>
+                <div class="pb-4">
+                  <span>
+                    <!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
+                    {{ $t(displaySetup.text) }}
+                  </span>
+                </div>
+              </b-col>
+            </b-row>
+          </div>
         </div>
-      </div>
-    </b-container>
-    <b-container class="mt--8 p-1">
-      <b-row class="justify-content-center">
-        <b-col lg="6" md="8">
-          <b-card no-body class="border-0 gradido-custom-background">
-            <b-card-body class="p-4">
-              <validation-observer ref="observer" v-slot="{ handleSubmit }">
-                <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
-                  <input-password-confirmation v-model="form" />
-                  <div class="text-center">
-                    <b-button type="submit" variant="primary" class="mt-4">
-                      <!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
-                      {{ $t(displaySetup.button) }}
-                    </b-button>
-                  </div>
-                </b-form>
-              </validation-observer>
-            </b-card-body>
-          </b-card>
-        </b-col>
-      </b-row>
-      <b-row v-if="displaySetup.linkTo">
-        <b-col class="text-center py-lg-4">
-          <router-link :to="displaySetup.linkTo" class="mt-3">{{ $t('back') }}</router-link>
-        </b-col>
-      </b-row>
-    </b-container>
+      </b-container>
+      <b-container class="mt--8 p-1">
+        <b-row class="justify-content-center">
+          <b-col lg="6" md="8">
+            <b-card no-body class="border-0 gradido-custom-background">
+              <b-card-body class="p-4">
+                <validation-observer ref="observer" v-slot="{ handleSubmit }">
+                  <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
+                    <input-password-confirmation v-model="form" />
+                    <div class="text-center">
+                      <b-button type="submit" variant="primary" class="mt-4">
+                        <!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
+                        {{ $t(displaySetup.button) }}
+                      </b-button>
+                    </div>
+                  </b-form>
+                </validation-observer>
+              </b-card-body>
+            </b-card>
+          </b-col>
+        </b-row>
+        <b-row v-if="displaySetup.linkTo">
+          <b-col class="text-center py-lg-4">
+            <router-link :to="displaySetup.linkTo" class="mt-3">{{ $t('back') }}</router-link>
+          </b-col>
+        </b-row>
+      </b-container>
+    </div>
+    <div v-else>
+      <message
+        :headline="$t('site.thx.errorTitle')"
+        :subtitle="errorMessage"
+        :buttonText="$t('settings.password.reset')"
+        linkTo="/forgot-password/resetPassword"
+      />
+    </div>
   </div>
 </template>
 <script>
-import InputPasswordConfirmation from '@/components/Inputs/InputPasswordConfirmation'
 import { setPassword } from '@/graphql/mutations'
 import { queryOptIn } from '@/graphql/queries'
+import InputPasswordConfirmation from '@/components/Inputs/InputPasswordConfirmation'
+import Message from '@/components/Message/Message'
 
 const textFields = {
   reset: {
@@ -64,9 +75,10 @@ const textFields = {
     button: 'settings.password.set',
     linkTo: '/login',
   },
+  // Wolle: seems unused
   login: {
     headline: 'site.thx.errorTitle',
-    subtitle: 'site.thx.activateEmail',
+    subtitle: 'site.thx.activateEmail', // Wolle: error.backend.ERR_EMAIL_NOT_VALIDATED
   },
 }
 
@@ -74,6 +86,7 @@ export default {
   name: 'ResetPassword',
   components: {
     InputPasswordConfirmation,
+    Message,
   },
   data() {
     return {
@@ -82,6 +95,8 @@ export default {
         passwordRepeat: '',
       },
       displaySetup: {},
+      showPageMessage: false,
+      errorMessage: '',
     }
   },
   methods: {
@@ -107,13 +122,21 @@ export default {
           }
         })
         .catch((error) => {
-          this.toastError(error.message)
+          let errorMessage
+          // Wolle: how to solve this with error codes?
           if (
             error.message.match(
               /email was sent more than ([0-9]+ hours)?( and )?([0-9]+ minutes)? ago/,
             )
-          )
-            this.$router.push('/forgot-password/resetPassword')
+          ) {
+            // Wolle: this.$router.push('/forgot-password/resetPassword')
+            errorMessage = error.message
+          } else {
+            errorMessage = error.message
+          }
+          this.showPageMessage = true
+          this.toastError(errorMessage)
+          this.errorSubtitle = errorMessage
         })
     },
     checkOptInCode() {
@@ -126,6 +149,7 @@ export default {
         })
         .then()
         .catch((error) => {
+          // Wolle: show message as well?
           this.toastError(error.message)
           this.$router.push('/forgot-password/resetPassword')
         })