Refactor Registration page

frontend/src/components/Message/Message.vue

@@ -10,9 +10,10 @@
           <p class="h4 test-message-subtitle">{{ subtitle }}</p>
           <hr />
           <b-button
-            v-if="buttonText"
+            v-if="buttonText && (linkTo || callback)"
             class="test-message-button"
-            :to="linkTo + (code ? `/${code}` : '')"
+            :to="linkTo ? linkTo + (code ? `/${code}` : '') : null"
+            @click="callback()"
           >
             <!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
             {{ buttonText }}
@@ -32,7 +33,8 @@ export default {
     subtitle: { type: String, required: true },
     buttonText: { type: String, required: false, default: null },
     linkTo: { type: String, required: false, default: null },
-    code: { type: String, required: false, default: null },
+    callback: { type: Function, required: false, default: () => {} },
+    code: { type: String, required: false, default: null }, // Wolle: to be removed by adding it directly to the "linkTo"
   },
 }
 </script>

frontend/src/locales/de.json

@@ -35,7 +35,9 @@
     "error": "Fehler!",
     "no-account": "Leider konnten wir keinen (aktivierten) Account mit diesen Daten finden.",
     "no-transactionlist": "Es gab leider einen Fehler. Es wurden keine Transaktionen vom Server übermittelt.",
-    "session-expired": "Die Sitzung wurde aus Sicherheitsgründen beendet."
+    "session-expired": "Die Sitzung wurde aus Sicherheitsgründen beendet.",
+    "unknown-error": "Unbekanter Fehler: ",
+    "user-already-exists": "Ein Benutzer mit diesen Daten existiert bereits."
   },
   "footer": {
     "app_version": "App version {version}",
@@ -213,6 +215,9 @@
       "new_wallet": "Neues Konto erstellen",
       "signin": "Anmelden"
     },
+    "register": {
+      "message-button-text": "Alles klar"
+    },
     "signup": {
       "agree": "Ich stimme der <a href='https://gradido.net/de/datenschutz/' target='_blank' >Datenschutzerklärung</a> zu.",
       "dont_match": "Die Passwörter stimmen nicht überein.",

frontend/src/locales/en.json

@@ -35,7 +35,9 @@
     "error": "Error!",
     "no-account": "Unfortunately we could not find an (activated) account to the given data.",
     "no-transactionlist": "Unfortunately, there was an error. No transactions have been sent from the server.",
-    "session-expired": "The session was closed for security reasons."
+    "session-expired": "The session was closed for security reasons.",
+    "unknown-error": "Unknown error: ",
+    "user-already-exists": "A user with this data already exists."
   },
   "footer": {
     "app_version": "App version {version}",
@@ -213,6 +215,9 @@
       "new_wallet": "Create new account",
       "signin": "Sign in"
     },
+    "register": {
+      "message-button-text": "Okay"
+    },
     "signup": {
       "agree": "I agree to the <a href='https://gradido.net/en/datenschutz/' target='_blank' > privacy policy</a>.",
       "dont_match": "Passwords don't match.",

frontend/src/pages/ForgotPassword.vue

@@ -69,7 +69,6 @@ export default {
   },
   data() {
     return {
-      // Wolle disable: 'disabled',
       form: {
         email: '',
       },

frontend/src/pages/Register.vue

@@ -15,7 +15,7 @@
     </div>
 
     <!-- Page content -->
-    <b-container class="mt--8 p-1">
+    <b-container v-if="!showPageMessage" class="mt--8 p-1">
       <!-- Table -->
 
       <b-row class="justify-content-center">
@@ -177,6 +177,23 @@
         </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="success"
+        :headline="$t('site.thx.title')"
+        :subtitle="$t('site.thx.register')"
+        :buttonText="$t('site.login.signin')"
+      />
+      <message
+        v-else
+        :headline="$t('site.thx.errorTitle')"
+        :subtitle="messageError"
+        :buttonText="$t('site.register.message-button-text')"
+        :callback="solveError"
+      />
+      <!-- eslint-enable @intlify/vue-i18n/no-dynamic-keys-->
+    </b-container>
     <!--
     <div class="text-center pt-4">
       <router-link class="test-button-another-community" to="/select-community">
@@ -189,13 +206,18 @@
   </div>
 </template>
 <script>
-import InputEmail from '@/components/Inputs/InputEmail.vue'
-import LanguageSwitchSelect from '@/components/LanguageSwitchSelect.vue'
 import { createUser } from '@/graphql/mutations'
 import CONFIG from '@/config'
+import InputEmail from '@/components/Inputs/InputEmail.vue'
+import LanguageSwitchSelect from '@/components/LanguageSwitchSelect.vue'
+import Message from '@/components/Message/Message'
 
 export default {
-  components: { InputEmail, LanguageSwitchSelect },
+  components: {
+    InputEmail,
+    LanguageSwitchSelect,
+    Message,
+  },
   name: 'Register',
   data() {
     return {
@@ -206,6 +228,7 @@ export default {
         agree: false,
       },
       language: '',
+      showPageMessage: false,
       submitted: false,
       showError: false,
       messageError: '',
@@ -240,13 +263,27 @@ export default {
           },
         })
         .then(() => {
-          this.$router.push('/thx/register')
+          // Wolle: this.$router.push('/thx/register')
+          this.showPageMessage = true
+          this.success = true
         })
         .catch((error) => {
+          this.showPageMessage = true
+          this.success = false
           this.showError = true
-          this.messageError = error.message
+          switch (error.message) {
+            case 'GraphQL error: User already exists.':
+              this.messageError = this.$t('error.user-already-exists')
+              break
+            default:
+              this.messageError = this.$t('error.unknown-error') + error.message
+              break
+          }
+          // Wolle: this.toastError(this.$t('error.email-already-sent'))
+          // Wolle: shall the alert be replaced by a toaster or shall only the page message be shown?
         })
     },
+    // Wolle: remove this?
     closeAlert() {
       this.showError = false
       this.messageError = ''
@@ -254,6 +291,15 @@ export default {
       this.form.firstname = ''
       this.form.lastname = ''
     },
+    solveError() {
+      this.showPageMessage = false
+      this.showError = false
+      this.messageError = ''
+      this.form.email = ''
+      this.form.firstname = ''
+      this.form.lastname = ''
+      this.form.agree = false
+    },
   },
   computed: {
     namesFilled() {