Merge pull request #31 from kingscode/KCI-140

KCI-140 User can Resend their invitation

Author: ricardovanlaarhoven

generator/templates/Authorisation/src/api/endpoints/authorisation/register.js

@@ -18,7 +18,14 @@ function acceptInvitation(email, token, password, passwordConfirmation) {
   });
 }
 
+function resendInvitation(email) {
+  return post('invitation/resend', {
+    email,
+  });
+}
+
 export {
   verify,
   acceptInvitation,
+  resendInvitation,
 };

generator/templates/Authorisation/src/components/authorisation/LoginCard.vue

@@ -10,6 +10,13 @@
         >
           {{ errorMessage }}
         </v-alert>
+        <v-alert v-if="$route.query.message"
+                 class="mb-10"
+                 transition="fade-transition"
+                 type="success"
+        >
+          {{ $t(`authorisation.login.messages.${$route.query.message}`) }}
+        </v-alert>
         <k-field-group language-prefix="authorisation.fields">
           <KTextField field="email"
                       autofocus

generator/templates/Authorisation/src/components/authorisation/PasswordResetCard.vue

@@ -4,7 +4,7 @@
       <VCardTitle class="title" v-text="$t('authorisation.passwordReset.title')"/>
       <v-card-text>
         <v-alert
-            :type="alertType"
+            type="error"
             :value="!!alertMessage.length"
             class="mb-10"
             transition="fade-transition"
@@ -63,7 +63,6 @@ export default {
   },
   data() {
     return {
-      alertType: 'success',
       alertMessage: '',
       isLoading: false,
       isValid: false,
@@ -85,16 +84,13 @@ export default {
       if (!this.isValid) return;
 
       this.isLoading = true;
-      this.alertType = 'error';
       this.errorMessage = '';
 
       resetRequest(this.form.email, this.token, this.form.password, this.form.passwordConfirmation)
           .then(() => {
-            this.alertType = 'success';
-            this.alertMessage = this.$t('authorisation.passwordReset.successMessage');
+            this.$router.push({name: 'login', query: {message: 'passwordResetSuccess'}});
           })
           .catch((error) => {
-            this.alertType = 'error';
             const { response } = error;
             const { status } = response;
 

generator/templates/Authorisation/src/locales/nl/authorisation.json

@@ -1,11 +1,16 @@
 {
     "login": {
         "title": "Inloggen",
-        "successMessage": "Je bent ingelogd, we sturen je nu door."
+        "successMessage": "Je bent ingelogd, we sturen je nu door.",
+        "messages": {
+            "acceptInvitationSuccess": "Je account is geactiveerd, je kunt nu inloggen.",
+            "resendInvitationSuccess": "De uitnodiging is opnieuw verstuurd, controleer je mail.",
+            "passwordResetSuccess": "Je wachtwoord is veranderd, je kunt nu inloggen.",
+            "registrationVerify": "Je registratie is voltooid, je kunt nu inloggen."
+        }
     },
     "registrationVerify": {
         "title": "Registratie afronden",
-        "successMessage": "Je registratie is voltooid, je kunt nu inloggen.",
         "errorMessage": "Er is iets misgegaan. Waarschijnlijk is de registratie link uit je mail verlopen."
     },
     "passwordForgotten": {
@@ -15,15 +20,14 @@
     },
     "passwordReset": {
         "title": "Wachtwoord opnieuw instellen",
-        "successMessage": "Je wachtwoord is veranderd, je kunt nu inloggen.",
         "errorMessage": "Er is iets misgegaan. Waarschijnlijk is de wachtwoord reset link uit je mail verlopen.",
         "request": "Wachtwoord aanvragen"
     },
     "invitationAccept": {
         "title": "Uitnodiging accepteren",
         "request": "Uitnodiging accepteren",
-        "successMessage": "Je account is geactiveerd, je kunt nu inloggen.",
-        "errorMessage": "Er is iets misgegaan. Waarschijnlijk is de uitnodigings link uit je mail verlopen."
+        "errorMessage": "Er is iets misgegaan. Waarschijnlijk is de uitnodigings link uit je mail verlopen.",
+        "resend": "Opnieuw versturen"
     },
     "fields": {
         "email": "E-mail",

generator/templates/Authorisation/src/views/authorisation/InvitationAccept.vue

@@ -9,9 +9,14 @@
                 :value="!!alertMessage.length"
                 class="mb-10"
                 transition="fade-transition"
-                :type="alertType"
+                type="error"
             >
               {{ alertMessage }}
+              <v-row class="mx-0 mt-3 justify-end">
+                <v-btn v-if="errorCode === 400 && !!alertMessage.length" outlined @click="handleResend">
+                  {{ $t('authorisation.invitationAccept.resend') }}
+                </v-btn>
+              </v-row>
             </v-alert>
 
             <k-field-group language-prefix="authorisation.fields">
@@ -54,7 +59,7 @@
 </template>
 
 <script lang="js">
-import { acceptInvitation } from '@/api/endpoints/authorisation/register.js';
+import { acceptInvitation, resendInvitation } from '@/api/endpoints/authorisation/register.js';
 import { getRateLimitMinutes } from '@/api/util/response.js';
 import KFieldGroup from '@/components/crud/fields/KFieldGroup.vue';
 import KTextField from '@/components/crud/fields/KTextField.vue';
@@ -68,13 +73,14 @@ export default {
   },
   data() {
     return {
-      alertType: 'success',
+      errorCode: 0,
       alertMessage: '',
       isLoading: false,
+      isValid: false,
+
       email: this.$route.query.email,
       password: '',
       passwordConfirmation: '',
-      isValid: false,
     };
   },
   computed: {
@@ -99,18 +105,21 @@ export default {
     }
   },
   methods: {
+    async handleResend() {
+      await resendInvitation(this.email);
+      this.$router.push({name: 'login', query: {message: 'resendInvitationSuccess'}});
+    },
     handleAccept() {
       this.isLoading = true;
       acceptInvitation(this.email, this.$route.params.token, this.password, this.passwordConfirmation)
           .then(() => {
-            this.alertType = 'success';
-            this.alertMessage = this.$t('authorisation.invitationAccept.successMessage');
+            this.$router.push({name: 'login', query: {message: 'acceptInvitationSuccess'}});
           })
           .catch((error) => {
-            this.alertType = 'error';
             const { response } = error;
             const { status } = response;
 
+            this.errorCode = status;
             if (status === 429) {
               this.alertMessage = this.$t('errors.429', { minutes: getRateLimitMinutes(response) });
             } else if (status === 400) {

generator/templates/Authorisation/src/views/authorisation/RegistrationVerify.vue

@@ -6,7 +6,7 @@
           <VCardTitle class="title" v-text="$t('authorisation.registrationVerify.title')"/>
           <v-card-text>
             <v-alert
-                :type="alertType"
+                type="error"
                 :value="!!alertMessage.length"
                 text
                 transition="fade-transition"
@@ -67,7 +67,6 @@ export default {
         email: '',
       },
       isLoading: false,
-      alertType: 'success',
       alertMessage: '',
       valid: true,
       showPassword: false,
@@ -86,14 +85,12 @@ export default {
 
       verify(token, this.form.email, this.form.password, this.form.passwordConfirmation)
           .then(() => {
-            this.alertMessage = this.$t('authorisation.registrationVerify.successMessage');
-            this.alertType = 'success';
+            this.$router.push({name: 'login', query: {message: 'registrationVerify'}});
           })
           .catch((error) => {
             const { response } = error;
             const { status } = response;
 
-            this.alertType = 'error';
             if (status === 429) {
               this.alertMessage = this.$t('errors.429', { minutes: getRateLimitMinutes(response) });
             } else if (status === 400) {