integrate sdk auth with kanvas

.eslintrc.js

@@ -85,6 +85,7 @@ module.exports = {
         accounting: true,
         axios: true,
         moment: true,
-        window: true
+        window: true,
+        kanvasSDK: true
     }
 }

src/config/index.js

@@ -5,6 +5,7 @@ import "@/config/cookies";
 import "@/config/vee-validate";
 import "@/config/sentry";
 import "@/config/element-ui";
+import "@/config/kanvasSDK";
 import * as filters from "@/utils/filters";
 import methods from "@/utils/methods";
 

src/config/kanvasSDK.js

@@ -0,0 +1,22 @@
+import KanvasSDK from "client-sdk";
+import store from "@/store";
+
+const kanvasSDK = new KanvasSDK({
+    appKey: process.env.VUE_APPKEY,
+    endpoint: process.env.VUE_APP_BASE_API_URL,
+    domain: process.env.VUE_APP_DOMAIN,
+    cookies: true
+})
+
+kanvasSDK.auth.on("loggedIn", (token) => {
+    store.dispatch("User/setToken", token);
+})
+
+kanvasSDK.auth.on("loggedOut", () => {
+    store.dispatch("User/setToken", null);
+})
+
+window.kanvasSDK = kanvasSDK;
+
+export default kanvasSDK;
+

src/mixins/auth.js

@@ -1,4 +1,5 @@
 import AuthContainer from "@v/auth/container";
+import { mapState } from "vuex";
 
 export default {
     components: {
@@ -12,6 +13,11 @@ export default {
             }
         }
     },
+    data() {
+        return {
+            isLoading: false
+        }
+    },
     computed: {
         allowUserRegistration() {
             return this.appSettings.settings && Boolean(Number(this.appSettings.settings.allow_user_registration));
@@ -33,11 +39,13 @@ export default {
         }
     },
     methods: {
-        handleResponse({ data }, isSignup = false) {
-            const auth = isSignup ? data.session : data;
-
-            Cookies.set("token", auth.token, { expires: new Date(auth.expires), path: "/", domain: process.env.VUE_APP_DOMAIN });
-            this.$store.dispatch("User/setToken", auth.token);
+        handleResponse(responseData, isSignup = false) {
+            if (responseData) {
+                // support old modules
+                const auth = isSignup ? responseData.session : responseData.data;
+                Cookies.set("token", auth.token, { expires: new Date(auth.expires), path: "/", domain: process.env.VUE_APP_DOMAIN });
+                this.$store.dispatch("User/setToken", auth.token);
+            }
 
             if (isSignup) {
                 this.$modal.show("after-signup-wizard");
@@ -47,33 +55,37 @@ export default {
             this.$router.replace({ name: "dashboard" });
             this.$store.dispatch("Application/setIsLoading", false);
         },
-        prepareData() {
-            const data = new FormData();
+        prepareData(asObject) {
+            const data = {};
 
             Object.keys(this.form.fields).forEach((field) => {
                 const apiField = this.form.fields[field].map || field;
 
-                data.append(apiField, this.form.fields[field].value);
+                data[apiField] = this.form.fields[field].value;
             });
-
+            if (!asObject) {
+                const formData = new FormData();
+                Object.entries(data).forEach(([key, value]) => {
+                    formData.append(key, value)
+                })
+            }
             return data;
         },
-        submitData(isSignup) {
+        async submitData(isSignup) {
             const data = this.prepareData();
-
             axios({
                 url: `${this.form.endpoint}`,
                 method: "POST",
                 data
-            }).then((response) => {
-                this.handleResponse(response, isSignup);
+            }).then(({ data }) => {
+                this.handleResponse(data, isSignup);
             }).catch((error) => {
                 this.$notify({
                     title: "Error",
                     text: error.response.data.errors.message,
                     type: "error"
                 });
-            });
+            })
         },
         validateInvitation() {
             axios({

src/views/auth/forgot-password.vue

@@ -62,10 +62,10 @@ export default {
         }
     },
     methods: {
-        handleResponse(response) {
+        handleResponse(data) {
             this.$notify({
                 title: "Confirmation",
-                text: response.data,
+                text: data,
                 type: "success"
             });
 
@@ -74,6 +74,26 @@ export default {
             this.$router.push({
                 name: "login"
             });
+        },
+
+        submitData() {
+            if (!this.isLoading) {
+                this.isLoading = true;
+                const data = this.prepareData(true);
+                kanvasSDK.auth.sendPasswordResetEmail(data.email)
+                    .then((responseData) => {
+                        this.handleResponse(responseData)
+                    })
+                    .catch(error => {
+                        this.$notify({
+                            title: "Error",
+                            text: error.errors.message,
+                            type: "error"
+                        });
+                    }).finally(() => {
+                        this.isLoading = false;
+                    })
+            }
         }
     }
 }

src/views/auth/login.vue

@@ -39,8 +39,9 @@
                 </div>
                 <span class="text-danger">{{ errors.first("password") }}</span>
 
-                <button class="btn btn-primary btn-block my-4" type="submit">
+                <button class="btn btn-primary btn-block my-4" type="submit" :disabled="isLoading">
                     Sign In
+                    <i v-if="isLoading" class="fa fa-circle-notch fa-spin" />
                 </button>
                 <social-auth :app-settings="appSettings" />
                 <div v-if="allowUserRegistration" class="text-center small">
@@ -89,6 +90,27 @@ export default {
                 endpoint: "/auth"
             }
         }
+    },
+    methods: {
+        submitData() {
+            if (!this.isLoading) {
+                this.isLoading = true;
+                const data = this.prepareData(true);
+                kanvasSDK.auth.login(data.email, data.password)
+                    .then(() => {
+                        this.handleResponse()
+                    })
+                    .catch(error => {
+                        this.$notify({
+                            title: "Error",
+                            text: error.errors.message,
+                            type: "error"
+                        });
+                    }).finally(() => {
+                        this.isLoading = false;
+                    })
+            }
+        }
     }
 }
 </script>

src/views/auth/reset-password.vue

@@ -79,16 +79,36 @@ export default {
         }
     },
     methods: {
-        handleResponse(response) {
+        handleResponse(data) {
             this.$notify({
                 title: "Confirmation",
-                text: response.data,
+                text: data,
                 type: "success"
             });
 
             this.$router.push({
                 name: "login"
             });
+        },
+
+        submitData() {
+            if (!this.isLoading) {
+                this.isLoading = true;
+                const data = this.prepareData(true);
+                kanvasSDK.auth.resetPassword(data.new_password, data.verify_password,this.$route.params.resetKey)
+                    .then((responseData) => {
+                        this.handleResponse(responseData)
+                    })
+                    .catch(error => {
+                        this.$notify({
+                            title: "Error",
+                            text: error.errors.message,
+                            type: "error"
+                        });
+                    }).finally(() => {
+                        this.isLoading = false;
+                    })
+            }
         }
     }
 }

src/views/auth/sign-up.vue

@@ -91,8 +91,9 @@
                     </div>
                 </div>
                 <span class="text-danger">{{ errors.first("company") }}</span>
-                <button class="btn btn-primary btn-block my-4" type="submit">
+                <button class="btn btn-primary btn-block my-4" type="submit" :disabled="isLoading">
                     Sign Up
+                    <i v-if="isLoading" class="fa fa-circle-notch fa-spin" />
                 </button>
                 <div class="text-center small">
                     Already have an account?
@@ -151,6 +152,27 @@ export default {
                 endpoint: "/users"
             }
         }
+    },
+    methods: {
+        submitData() {
+            if (!this.isLoading) {
+                this.isLoading = true;
+                const data = this.prepareData(true);
+                kanvasSDK.auth.register(data)
+                    .then(() => {
+                        this.handleResponse(null, true)
+                    })
+                    .catch(error => {
+                        this.$notify({
+                            title: "Error",
+                            text: error.errors.message,
+                            type: "error"
+                        });
+                    }).finally(() => {
+                        this.isLoading = false;
+                    })
+            }
+        }
     }
 }
 </script>