Merge pull request #14 from kingscode/implement-laravel-api-starter-2.0

KCI-28 implement-laravel-api-starter-2.0

Author: ricardovanlaarhoven

generator/index.js

@@ -5,7 +5,8 @@ module.exports = (api, options) => {
     api.extendPackage({
         dependencies: {
             'axios': '^0.18.0',
-            'vuex': '^3.1.0',
+            "dayjs": "^1.8.19",
+            'vuex': '^3.1.2',
             'vuex-persistedstate': '^2.5.4',
             'lodash.clonedeep': '^4.5.0',
             'css-vars-ponyfill': '^2.1.2',

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

@@ -0,0 +1,26 @@
+import API from './../../API.js';
+import handleTooManyRequestsError from '../utils/handleTooManyRequestsError.js';
+
+export default async function (email, password) {
+    const result = await API.post('auth/login', {
+        email, password,
+    }).catch((error) => {
+        return error.response;
+    });
+
+    if (result.status === 200) {
+        return {
+            success: true,
+            token: result.data.data.token,
+        };
+    }
+
+    if (result.status === 429) {
+        return handleTooManyRequestsError(result);
+    }
+
+    return {
+        message: 'De ingevulde gegevens zijn niet juist.',
+        success: false,
+    };
+}

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

@@ -0,0 +1,11 @@
+import API from './../../API.js';
+
+export default async function () {
+    await API.post('auth/logout').catch((error) => {
+        return error.response;
+    });
+    return {
+        success: true,
+    };
+}
+

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

@@ -0,0 +1,26 @@
+import API from './../../API.js';
+import handleTooManyRequestsError from '../utils/handleTooManyRequestsError.js';
+
+export default async function (email, name) {
+    const result = await API.post('registration', {
+        email, name,
+    }).catch((error) => {
+        return error.response;
+    });
+
+    if (result.status === 201) {
+        return {
+            success: true,
+            message: 'Er is een account aangemaakt, controleer je e-mail om een wachtwoord te kiezen zodat je vervolgens kunt inloggen.',
+        };
+    }
+
+    if (result.status === 429) {
+        return handleTooManyRequestsError(result);
+    }
+
+    return {
+        message: `De ingevulde gegevens kloppen niet.`,
+        success: false,
+    };
+}

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

@@ -0,0 +1,26 @@
+import API from './../../API.js';
+import handleTooManyRequestsError from '../utils/handleTooManyRequestsError.js';
+
+export default async function (email) {
+    const result = await API.post('password/forgotten', {
+        email,
+    }).catch((error) => {
+        return error.response;
+    });
+
+    if (result.status === 200) {
+        return {
+            success: true,
+            message: 'Er is een wachtwoord vergeten mail verstuurd mits er een account bestaat met het gegeven email adres.',
+        };
+    }
+
+    if (result.status === 429) {
+        return handleTooManyRequestsError(result);
+    }
+
+    return {
+        message: 'De ingevulde gegevens kloppen niet.',
+        success: false,
+    };
+}

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

@@ -0,0 +1,34 @@
+import API from './../../API.js';
+import handleTooManyRequestsError from '../utils/handleTooManyRequestsError.js';
+
+export default async function (email, token, password, passwordConfirmation) {
+    const result = await API.post('registration', {
+        email,
+        token,
+        password,
+        password_confirmation: passwordConfirmation
+    }).catch((error) => error.response);
+
+    if (result.status === 200) {
+        return {
+            success: true,
+            message: 'Uw wachtwoord is opnieuw ingesteld.',
+        };
+    }
+
+    if (result.status === 400) {
+        return {
+            success: false,
+            message: 'De ingegeven token is verlopen.',
+        }
+    }
+
+    if (result.status === 429) {
+        return handleTooManyRequestsError(result);
+    }
+
+    return {
+        message: 'De ingevulde gegevens kloppen niet.',
+        success: false,
+    };
+}

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

@@ -0,0 +1,110 @@
+<template>
+    <v-card height="100%">
+        <v-form @submit.prevent="handleLogin()" ref="form" v-model="valid">
+            <v-card-title class="title">Ik wil inloggen</v-card-title>
+            <v-card-text>
+                <v-alert
+                    :value="errorMessage !== null"
+                    class="mb-10"
+                    transition="fade-transition"
+                    type="error"
+                >
+                    {{errorMessage}}
+                </v-alert>
+                <VTextField
+                    :rules="[(v) => !!v || 'E-Mail is verplicht']"
+                    label="E-Mail"
+                    v-model="form.email"
+                    tabindex="1"
+                />
+                <VTextField
+                    :append-icon="showPassword ? 'fa-eye-slash' : 'fa-eye'"
+                    :rules="[(v) => !!v || 'Wachtwoord is verplicht']"
+                    :type="showPassword ? 'text' : 'password'"
+                    @click:append="showPassword = !showPassword"
+                    label="Wachtwoord"
+                    v-model="form.password"
+                    tabindex="2"
+                />
+            </v-card-text>
+            <v-card-actions>
+                <VSpacer/>
+                <v-btn :to="{name: 'password.forgotten'}" tabindex="4" color="primary" text>Wachtwoord vergeten</v-btn>
+                <v-btn tabindex="3" type="submit" color="primary" :loading="isLoading">Inloggen</v-btn>
+            </v-card-actions>
+        </v-form>
+
+        <v-overlay v-model="isRedirecting" class="text-center">
+            <VProgressCircular indeterminate size="64"/>
+            <div class="mt-5">Je bent ingelogd, we sturen je nu door.</div>
+        </v-overlay>
+    </v-card>
+</template>
+
+<script>
+import loginRequest from './../../api/authorisation/login';
+
+export default {
+    name: 'LoginCard',
+    data() {
+        return {
+            errorMessage: null,
+            isLoading: false,
+            showPassword: false,
+            valid: null,
+            form: {
+                email: '',
+                password: '',
+            },
+            isRedirecting: false,
+        };
+    },
+    methods: {
+        async handleLogin() {
+            this.$refs.form.validate();
+            if (!this.valid) {
+                return;
+            }
+            this.isLoading = true;
+            const {success, message, token} = await loginRequest(this.form.email, this.form.password);
+
+            this.isLoading = false;
+
+            if (success) {
+                this.isRedirecting = true;
+                return this.redirectToAuthDispense(token);
+            }
+
+            this.errorMessage = message;
+        },
+        redirectToAuthDispense(token) {
+            const form = document.createElement("form");
+
+            form.method = 'POST';
+            form.action = process.env.VUE_APP_ROOT_API + '/auth/dispense';
+
+            const redirectUriElement = document.createElement("input");
+            redirectUriElement.name = 'redirect_uri';
+            redirectUriElement.value= 'home';
+            form.appendChild(redirectUriElement);
+
+            const emailElement = document.createElement("input");
+            emailElement.name = 'email';
+            emailElement.value= this.form.email;
+            form.appendChild(emailElement);
+
+            const tokenElement = document.createElement("input");
+            tokenElement.name = 'token';
+            tokenElement.value= token;
+            form.appendChild(tokenElement);
+
+            document.body.appendChild(form);
+            form.submit();
+        }
+    },
+};
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,63 @@
+<template>
+    <v-card height="100%">
+        <v-form @submit.prevent="handleRegister()" ref="form" v-model="valid">
+            <v-card-title class="title">Ik wil een account aanvragen</v-card-title>
+            <v-card-text>
+                <v-alert
+                    :value="alertMessage !== null"
+                    class="mb-10"
+                    transition="fade-transition"
+                    :type="alertType"
+                >
+                    {{alertMessage}}
+                </v-alert>
+                <VTextField
+                    :rules="[(v) => !!v || 'E-Mail is verplicht']"
+                    label="E-Mail"
+                    v-model="form.email"
+                    tabindex="11"
+                />
+            </v-card-text>
+            <v-card-actions>
+                <VSpacer/>
+                <v-btn tabindex="12" type="submit" color="primary" :loading="isLoading">Wachtwoord aanvragen</v-btn>
+            </v-card-actions>
+        </v-form>
+    </v-card>
+</template>
+
+<script>
+import forgottenRequest from '../../api/password/forgotten.js';
+
+export default {
+    name: 'PasswordForgottenCard',
+    data() {
+        return {
+            alertType: 'info',
+            alertMessage: null,
+            isLoading: false,
+            valid: null,
+            form: {
+                email: '',
+            },
+        };
+    },
+    methods: {
+        async handleRegister() {
+            this.$refs.form.validate();
+            if (!this.valid) {
+                return;
+            }
+            this.isLoading = true;
+            const {success, message} = await forgottenRequest(this.form.email);
+            this.alertType = success ? 'success' : 'error';
+            this.alertMessage = message;
+            this.isLoading = false;
+        },
+    },
+};
+</script>
+
+<style scoped>
+
+</style>