Add (vite build)

resources/js/AppAuth.vue

@@ -0,0 +1,9 @@
+<template>
+  <div></div>
+</template>
+<script>
+export default {
+  name: "AppAuth",
+};
+</script>
+<style></style>

resources/js/AppFront.vue

@@ -0,0 +1,9 @@
+<template>
+  <div></div>
+</template>
+<script>
+export default {
+  name: "AppFront",
+};
+</script>
+<style></style>

resources/js/app-auth.js

@@ -0,0 +1,51 @@
+import { createApp, defineAsyncComponent } from "vue";
+
+import AppAuth from "@/AppAuth.vue";
+
+const app = createApp({ AppAuth });
+const vueComponents = import.meta.glob("@/vue/auth/**/*.vue", {
+  eager: false,
+});
+
+import.meta.glob(["../images/**", "../fonts/**"]);
+
+import { createPinia } from "pinia";
+app.use(createPinia());
+
+import axios from "./plugins/axios";
+import VueAxios from "vue-axios";
+app.use(VueAxios, axios);
+
+import auth from "./plugins/auth";
+app.use(auth);
+
+import eventBus from "./plugins/event-bus";
+app.use(eventBus);
+
+import Vue3Toastify from "vue3-toastify";
+import "../css/toastify.css";
+app.use(Vue3Toastify);
+
+import { Ziggy as ZiggyRoute } from "./ziggy";
+import { ZiggyVue } from "ziggy-js/dist/vue";
+app.use(ZiggyVue, ZiggyRoute);
+
+window.Ziggy = ZiggyRoute;
+
+Object.entries({ ...vueComponents }).forEach(([path, definition]) => {
+  // Get name of component, based on filename
+  // "./components/Fruits.vue" will become "Fruits"
+  const componentName = path
+    .split("/")
+    .pop()
+    .replace(/\.\w+$/, "")
+    .replace(/([a-z])([A-Z])/g, "$1-$2")
+    .toLowerCase();
+  // console.log(componentName);
+  // console.log(typeof definition);
+
+  // Register component on this Vue instance
+  app.component(componentName, defineAsyncComponent(definition));
+});
+
+app.mount("#app");

resources/js/app-front.js

@@ -1 +1,53 @@
 import * as bootstrap from "~bootstrap";
+
+import { createApp, defineAsyncComponent } from "vue";
+
+import AppFront from "@/AppFront.vue";
+
+const app = createApp({ AppFront });
+const vueComponents = import.meta.glob("@/vue/front/**/*.vue", {
+  eager: false,
+});
+
+import.meta.glob(["../images/**", "../fonts/**"]);
+
+import { createPinia } from "pinia";
+app.use(createPinia());
+
+import axios from "./plugins/axios";
+import VueAxios from "vue-axios";
+app.use(VueAxios, axios);
+
+import auth from "./plugins/auth";
+app.use(auth);
+
+import eventBus from "./plugins/event-bus";
+app.use(eventBus);
+
+import Vue3Toastify from "vue3-toastify";
+import "../css/toastify.css";
+app.use(Vue3Toastify);
+
+import { Ziggy as ZiggyRoute } from "./ziggy";
+import { ZiggyVue } from "ziggy-js/dist/vue";
+app.use(ZiggyVue, ZiggyRoute);
+
+window.Ziggy = ZiggyRoute;
+
+Object.entries({ ...vueComponents }).forEach(([path, definition]) => {
+  // Get name of component, based on filename
+  // "./components/Fruits.vue" will become "Fruits"
+  const componentName = path
+    .split("/")
+    .pop()
+    .replace(/\.\w+$/, "")
+    .replace(/([a-z])([A-Z])/g, "$1-$2")
+    .toLowerCase();
+  // console.log(componentName);
+  // console.log(typeof definition);
+
+  // Register component on this Vue instance
+  app.component(componentName, defineAsyncComponent(definition));
+});
+
+app.mount("#app");

resources/js/plugins/auth.js

@@ -0,0 +1,11 @@
+import { useAuthStore } from "@/stores/useAuth";
+
+export default {
+  install: ({ config }) => {
+    config.globalProperties.$auth = useAuthStore();
+
+    if (useAuthStore().loggedIn) {
+      useAuthStore().ftechUser();
+    }
+  },
+};

resources/js/plugins/axios.js

@@ -0,0 +1,71 @@
+import { useErrorStore } from "../stores/useError";
+import axios from "axios";
+import Cookies from "js-cookie";
+
+axios.defaults.headers.common["Authorization"] = localStorage.getItem("token");
+axios.defaults.withCredentials = true;
+axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
+
+const setCSRFToken = () => {
+  return axios.get("/sanctum/csrf-cookie"); // resolves to '/api/csrf-cookie'.
+};
+
+// Add a request interceptor
+axios.interceptors.request.use(
+  function (config) {
+    // Do something before request is sent
+
+    useErrorStore().$reset();
+
+    if (!Cookies.get("XSRF-TOKEN")) {
+      return setCSRFToken().then((response) => config);
+    }
+
+    return config;
+  },
+  function (error) {
+    // Do something with request error
+    return Promise.reject(error);
+  },
+);
+
+// Add a response interceptor
+axios.interceptors.response.use(
+  function (response) {
+    // console.warn("axios.interceptors.response");
+    // console.warn(response);
+
+    if (response?.data?.data?.csrf_token?.length > 0) {
+      Cookies.set("XSRF-TOKEN", response.data.data.csrf_token);
+    } else if (response?.data?.data?.token?.length > 0) {
+      Cookies.set("XSRF-TOKEN", response.data.data.csrf_token);
+    }
+
+    // Any status code that lie within the range of 2xx cause this function to trigger
+    // Do something with response data
+    return response;
+  },
+  function (error) {
+    // Any status codes that falls outside the range of 2xx cause this function to trigger
+    // Do something with response error
+    switch (error.response.status) {
+      case 401:
+        localStorage.removeItem("token");
+        window.location.reload();
+        break;
+      case 403:
+      case 404:
+        console.error("404");
+        break;
+      case 422:
+        useErrorStore().$state = error.response.data;
+        break;
+      default:
+        console.log(error.response.data);
+    }
+
+    return Promise.reject(error);
+  },
+);
+
+export default axios;

resources/js/plugins/event-bus.js

@@ -0,0 +1,7 @@
+import mitt from "mitt";
+
+export default {
+  install: (app, options) => {
+    app.config.globalProperties.$eventBus = mitt();
+  },
+};

resources/js/stores/useAuth.js

@@ -0,0 +1,44 @@
+import { defineStore } from "pinia";
+import axios from "axios";
+
+export const useAuthStore = defineStore("auth", {
+  state: () => ({
+    loggedIn: localStorage.getItem("token") ? true : false,
+    user: null,
+  }),
+
+  getters: {},
+
+  actions: {
+    async login(credentials) {
+      await axios.get("sanctum/csrf-cookie");
+
+      const response = (await axios.post("api/login", credentials)).data;
+
+      if (response) {
+        const token = `Bearer ${response.token}`;
+
+        localStorage.setItem("token", token);
+        axios.defaults.headers.common["Authorization"] = token;
+
+        await this.ftechUser();
+      }
+    },
+
+    async logout() {
+      const response = (await axios.post("api/logout")).data;
+
+      if (response) {
+        localStorage.removeItem("token");
+
+        this.$reset();
+      }
+    },
+
+    async ftechUser() {
+      this.user = (await axios.get("api/me")).data;
+
+      this.loggedIn = true;
+    },
+  },
+});

resources/js/stores/useError.js

@@ -0,0 +1,8 @@
+import { defineStore } from "pinia";
+
+export const useErrorStore = defineStore("error", {
+  state: () => ({
+    message: null,
+    errors: {},
+  }),
+});

resources/js/ziggy.js

@@ -0,0 +1,7 @@
+const Ziggy = {"url":"https:\/\/echoscoop.com","port":null,"defaults":{},"routes":{"sanctum.csrf-cookie":{"uri":"sanctum\/csrf-cookie","methods":["GET","HEAD"]},"ignition.healthCheck":{"uri":"_ignition\/health-check","methods":["GET","HEAD"]},"ignition.executeSolution":{"uri":"_ignition\/execute-solution","methods":["POST"]},"ignition.updateConfig":{"uri":"_ignition\/update-config","methods":["POST"]}}};
+
+if (typeof window !== 'undefined' && typeof window.Ziggy !== 'undefined') {
+    Object.assign(Ziggy.routes, window.Ziggy.routes);
+}
+
+export { Ziggy };