Refactor Login page

frontend/src/components/Message/Message.vue

@@ -2,7 +2,7 @@
   <div>
     <!-- Header -->
     <div class="header py-lg-6">
-      <b-container>
+      <b-container class="w-50">
         <div class="header-body text-center mb-7">
           <!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
           <p class="h1 test-message-headline">{{ headline }}</p>

frontend/src/locales/de.json

@@ -230,7 +230,8 @@
       "register": "Du bist jetzt registriert, bitte überprüfe deine Emails und klicke auf den Aktivierungslink.",
       "reset": "Dein Passwort wurde geändert.",
       "resetPassword": "Den Code den Du genutzt hast ist zu alt bitte fordere ein neuen über die Passwort Reset Seite an.",
-      "title": "Danke!"
+      "title": "Danke!",
+      "unsetPassword": "Dein Passwort wurde noch nicht gesetzt. Bitte setze es neu."
     }
   },
   "success": "Erfolg",

frontend/src/locales/en.json

@@ -222,7 +222,7 @@
       "uppercase": "One uppercase letter required."
     },
     "thx": {
-      "activateEmail": "Your account has not been activated yet, please check your emails and click the activation link or order a new activation link over the password reset page.",
+      "activateEmail": "Your account has not been activated yet. Please check your emails and click the activation link or order a new activation link over the password reset page.",
       "checkEmail": "Your email has been successfully verified. You can sign in now.",
       "email": "We have sent you an email.",
       "emailActivated": "Thank you your email has been activated.",
@@ -230,7 +230,8 @@
       "register": "You are registered now, please check your emails and click the activation link.",
       "reset": "Your password has been changed.",
       "resetPassword": "The code you used was to old please order a new on over the password reset page.",
-      "title": "Thank you!"
+      "title": "Thank you!",
+      "unsetPassword": "Your password has not been set yet. Please set it again."
     }
   },
   "success": "Success",

frontend/src/pages/Login.vue

@@ -13,7 +13,7 @@
         </div>
       </b-container>
     </div>
-    <b-container class="mt--8">
+    <b-container v-if="!showPageMessage" class="mt--8 p-1">
       <b-row class="justify-content-center">
         <b-col lg="5" md="7">
           <b-card no-body class="border-0 mb-0 gradido-custom-background">
@@ -57,11 +57,31 @@
         </b-col>
       </b-row>
     </b-container>
+    <b-container v-else class="mt--8 p-1">
+      <!-- eslint-disable @intlify/vue-i18n/no-dynamic-keys-->
+      <message
+        v-if="errorReason === 'email-unvalidated'"
+        :headline="$t('site.thx.errorTitle')"
+        :subtitle="$t('site.thx.activateEmail')"
+        :buttonText="$t('settings.password.reset')"
+        linkTo="/forgot-password"
+      />
+      <message
+        v-else-if="errorReason === 'password-unset'"
+        :headline="$t('site.thx.errorTitle')"
+        :subtitle="$t('site.thx.unsetPassword')"
+        :buttonText="$t('settings.password.reset')"
+        linkTo="/reset-password/login"
+      />
+      <!-- eslint-enable @intlify/vue-i18n/no-dynamic-keys-->
+    </b-container>
   </div>
 </template>
+
 <script>
 import InputPassword from '@/components/Inputs/InputPassword'
 import InputEmail from '@/components/Inputs/InputEmail'
+import Message from '@/components/Message/Message'
 import { login } from '@/graphql/queries'
 import { getCommunityInfoMixin } from '@/mixins/getCommunityInfo'
 
@@ -70,6 +90,7 @@ export default {
   components: {
     InputPassword,
     InputEmail,
+    Message,
   },
   mixins: [getCommunityInfoMixin],
   data() {
@@ -79,6 +100,8 @@ export default {
         password: '',
       },
       passwordVisible: false,
+      showPageMessage: false,
+      errorReason: null,
     }
   },
   methods: {
@@ -111,9 +134,11 @@ export default {
         .catch((error) => {
           this.toastError(this.$t('error.no-account'))
           if (error.message.includes('User email not validated')) {
-            this.$router.push('/thx/login')
+            this.showPageMessage = true
+            this.errorReason = 'email-unvalidated'
           } else if (error.message.includes('User has no password set yet')) {
-            this.$router.push('/reset-password/login')
+            this.showPageMessage = true
+            this.errorReason = 'password-unset'
           }
           loader.hide()
         })