Update scaffold

generator/index.js

@@ -10,6 +10,7 @@ module.exports = (api, options) => {
             'vuex-persistedstate': '^2.5.4',
             'lodash.clonedeep': '^4.5.0',
             'css-vars-ponyfill': '^2.1.2',
+            'qs': '^6.9.4',
             'vue-router': '3.3.4',
         },
     });
@@ -19,12 +20,18 @@ module.exports = (api, options) => {
                 '@fortawesome/fontawesome-pro': '^5.8.1',
             },
         });
+    } else {
+        api.extendPackage({
+            dependencies: {
+                '@fortawesome/fontawesome-free': '^5.14.0',
+            },
+        });
     }
 
     if (options.useCrud) {
         api.extendPackage({
             dependencies: {
-                '@kingscode/vuetify-resource': '^1.4.1',
+                '@kingscode/vuetify-resource': '^2.0.3',
             },
         });
         api.render('./templates/Crud', options);

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

@@ -1,4 +1,4 @@
-import {post} from '../../implementation/app/wrapper';
+import {post} from '../../implementation/app';
 
 export default function (email, password) {
     return post('auth/login', {

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

@@ -1,4 +1,4 @@
-import {post} from '../../implementation/app/wrapper.js';
+import {post} from '../../implementation/app';
 
 export default function () {
     return post('auth/logout');

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

@@ -1,4 +1,4 @@
-import {post} from '../../implementation/app/wrapper.js';
+import {post} from '../../implementation/app';
 
 function passwordForgotten(email) {
     return post('password/forgotten', {

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

@@ -1,7 +1,21 @@
-import {post} from '../../implementation/app/wrapper.js';
+import {post} from '../../implementation/app';
 
-export default function (email, name) {
+function register(email, name) {
     return post('registration', {
         email, name,
     });
 }
+
+function verify(token, email, password, passwordConfirmation) {
+    return post('registration/verify', {
+        token: token,
+        email: email,
+        password: password,
+        password_confirmation: passwordConfirmation,
+    });
+}
+
+export {
+    register,
+    verify,
+};

generator/templates/Authorisation/src/api/endpoints/password/forgotten.js

@@ -1,4 +1,4 @@
-import {post} from '../../implementation/app/wrapper.js';
+import {post} from '../../implementation/app';
 
 export default function (email) {
     return post('password/forgotten', {

generator/templates/Authorisation/src/api/endpoints/password/reset.js

@@ -1,10 +1,10 @@
-import {post} from '../../implementation/app/wrapper.js';
+import {post} from '../../implementation/app';
 
 export default async function (email, token, password, passwordConfirmation) {
     return post('registration', {
         email: email,
         token: token,
         password: password,
-        password_confirmation: passwordConfirmation
+        password_confirmation: passwordConfirmation,
     });
 }

generator/templates/Authorisation/src/api/endpoints/user.js

@@ -0,0 +1,28 @@
+import axios from '../implementation/app';
+
+/**
+ * @param user {User}
+ */
+function create(user) {
+    return axios.post('user', user);
+}
+
+/**
+ * @param user {User}
+ */
+function update(user) {
+    return axios.put(`user/${user.id}`, user);
+}
+
+/**
+ * @param userId {number}
+ */
+function destroy(userId) {
+    return axios.delete(`user/${userId}`);
+}
+
+export {
+    create,
+    update,
+    destroy,
+};

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

@@ -43,6 +43,7 @@
 <script>
 import LoginRequest from '../../api/endpoints/authorisation/login';
 import {mapGetters} from 'vuex';
+import {getRateLimitMinutes} from '../../api/util/response.js';
 
 export default {
     name: 'LoginCard',
@@ -61,7 +62,7 @@ export default {
     },
     computed: {
         ...mapGetters({
-            findError: 'Error/find',
+            findError: 'error/find',
         }),
     },
     methods: {
@@ -70,9 +71,20 @@ export default {
             LoginRequest(this.form.email, this.form.password)
                 .then(res => {
                     this.isRedirecting = true;
-                    this.redirectToAuthDispense(res.data.token);
+                    this.redirectToAuthDispense(res.data.data.token);
+                })
+                .catch(err => {
+                    const response = err.response;
+                    const status = response.status;
+
+                    if (status === 429) {
+                        this.errorMessage =
+                            `Je hebt te veel foutieve inlog pogingen gedaan.
+                             Probeer het over ${getRateLimitMinutes(response, 15)} minuten opnieuw`;
+                    } else {
+                        this.errorMessage = this.findError('email');
+                    }
                 })
-                .catch(() => this.errorMessage = this.findError('email'))
                 .finally(() => this.isLoading = false);
         },
         redirectToAuthDispense(token) {

generator/templates/Authorisation/src/components/Authorisation/PasswordForgottenCard.vue

@@ -49,16 +49,15 @@ export default {
             if (!this.isValid) return;
 
             this.isLoading = true;
+            this.alertMessage = '';
+            this.alertType = 'error';
 
             ForgottenRequest(this.form.email)
                 .then(() => {
                     this.alertMessage = 'Er is een wachtwoord vergeten mail verstuurd mits er een account bestaat met het gegeven email adres.';
                     this.alertType = 'success';
                 })
-                .catch(() => {
-                    this.alertMessage = 'De ingevulde gegevens kloppen niet.';
-                    this.alertType = 'error';
-                })
+                .catch(() => this.alertMessage = 'De ingevulde gegevens kloppen niet.')
                 .finally(() => this.isLoading = false);
         },
     },

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

@@ -1,10 +1,10 @@
 <template>
     <v-card height="100%">
-        <v-form @submit.prevent="handleRegister()" ref="form" v-model="valid">
+        <v-form @submit.prevent="handleRegister()" ref="form" v-model="isValid">
             <v-card-title class="title">Ik wil een account aanvragen</v-card-title>
             <v-card-text>
                 <v-alert
-                    :value="alertMessage !== null"
+                    :value="!!alertMessage.length"
                     class="mb-10"
                     transition="fade-transition"
                     :type="alertType"
@@ -46,21 +46,22 @@
 
 <script>
 import resetRequest from '../../api/endpoints/password/reset.js';
+import {getRateLimitMinutes} from '../../api/util/response.js';
 
 export default {
     name: 'PasswordResetCard',
     props: {
         token: {
             type: String,
-            required: true
-        }
+            required: true,
+        },
     },
     data() {
         return {
-            alertType: 'info',
-            alertMessage: null,
+            alertType: 'success',
+            alertMessage: '',
             isLoading: false,
-            valid: null,
+            isValid: false,
             form: {
                 email: '',
                 password: '',
@@ -70,16 +71,35 @@ export default {
         };
     },
     methods: {
-        async handleRegister() {
+        handleRegister() {
             this.$refs.form.validate();
-            if (!this.valid) {
-                return;
-            }
+
+            if (!this.isValid) return;
+
             this.isLoading = true;
-            const {success, message} = await resetRequest(this.form.email, this.token, this.form.password, this.form.passwordConfirmation);
-            this.alertType = success ? 'success' : 'error';
-            this.alertMessage = message;
-            this.isLoading = false;
+            this.alertType = 'error';
+            this.errorMessage = '';
+
+            resetRequest(this.form.email, this.token, this.form.password, this.form.passwordConfirmation)
+                .then(() => {
+                    this.alertType = 'success';
+                    this.alertMessage = 'Je wachtwoord is opnieuw ingesteld, je kan nu inloggen.';
+                })
+                .catch(error => {
+                    const response = error.response;
+                    const status = response.status;
+
+                    if (status === 429) {
+                        this.alertMessage =
+                            `Je hebt tevaak een foutieve login poging gedaan. Probeer het over ${getRateLimitMinutes(response, 15)} minuten opnieuw`;
+                    } else if (status === 400) {
+                        this.alertMessage =
+                            'Deze wachtwoord reset pagina is verlopen, vraag opnieuw een wachtwoord aan via de wachtwoord vergeten optie';
+                    }
+
+                    this.$refs.form.validate();
+                })
+                .finally(() => this.isLoading = false);
         },
     },
 };

generator/templates/Authorisation/src/components/Authorisation/RegisterCard.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script>
-import RegisterRequest from '../../api/endpoints/authorisation/register.js';
+import {register} from '../../api/endpoints/authorisation/register.js';
 
 export default {
     name: 'RegisterCard',
@@ -56,8 +56,10 @@ export default {
             if (!this.isValid) return;
 
             this.isLoading = true;
+            this.alertType = 'error';
+            this.alertMessage = '';
 
-            RegisterRequest(this.form.email, this.form.name)
+            register(this.form.email, this.form.name)
                 .then(() => {
                     this.alertType = 'success';
                     this.alertMessage = 'Er is een account aangemaakt, controleer je e-mail om een wachtwoord te kiezen zodat je vervolgens kunt inloggen.';

generator/templates/Authorisation/src/guards/AuthorisationGuard.js

@@ -0,0 +1,11 @@
+import store from '../store';
+
+export default function (to, from, next) {
+    if (!store.getters['authorisation/isLoggedIn']) {
+        next({
+            name: 'login',
+        });
+        return;
+    }
+    next();
+}

generator/templates/Authorisation/src/templates/Authorisation.vue

@@ -1,28 +1,13 @@
 <template>
     <v-main>
-        <v-container fluid fill-height class="primary">
+        <v-container fluid class="fill-height primary">
             <router-view/>
         </v-container>
     </v-main>
 </template>
 
-<script>
-
+<script lang="js">
 export default {
-    components: {},
-    watch: {},
-    props: [],
-    name: 'template-authorisation',
-    data() {
-        return {};
-    },
-    created() {
-
-    },
-    methods: {},
+    name: 'Authorisation',
 };
 </script>
-
-<style scoped lang="scss">
-
-</style>

generator/templates/Authorisation/src/views/AuthorisationCallback.vue

@@ -1,23 +1,26 @@
 <template>
-    <v-overlay :value="true">
+    <v-overlay>
         <VProgressCircular indeterminate size="64"/>
     </v-overlay>
 </template>
-<script>
+
+<script lang="js">
 import {mapMutations} from 'vuex';
+import {getFragment} from '../application/util/url.js';
 
 export default {
     name: 'AuthorisationCallback',
     methods: {
         ...mapMutations({
-            setAuthorisationToken: 'Authorisation/setAuthorisationToken',
+            setAuthorisationToken: 'authorisation/setAuthorisationToken',
         }),
     },
     created() {
         const redirectUri = this.$route.query.redirect_uri;
 
-        const regex = new RegExp('[\\#&]token=([^&#]*)');
-        const token = decodeURIComponent(regex.exec(this.$route.hash)[1]);
+        const token = getFragment('token');
+
+        if (!token) throw new Error('AuthorisationCallback::created token hash not found');
 
         this.setAuthorisationToken(token);