@appscode/ui-builder/src/main.js

## Motivation

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import defaultPresetJson from "@/plugins/presets";
import { initVeeValidate } from "@/plugins/vee-validate";

// taoster
import Toasted from "vue-toasted";
Vue.use(Toasted, {
  position: "bottom-right",
  duration: 2500,
  theme: "bubble",
  iconPack: "fontawesome",
});

import Axios from "@/plugins/axios";
Vue.use(Axios);

Vue.config.productionTip = false;
// initialize vee validate
initVeeValidate();

// firebase initialize
import * as firebase from "firebase/app";
const firebaseConfig = {
  apiKey: "AIzaSyCLdRhxZ41NzOIK2W0182LVuAnBbxhW80E",
  authDomain: "kubedb-new-e7965.firebaseapp.com",
  databaseURL: "https://kubedb-new-e7965.firebaseio.com",
  projectId: "kubedb-new-e7965",
  storageBucket: "kubedb-new-e7965.appspot.com",
  messagingSenderId: "213135113005",
  appId: "1:213135113005:web:e6e3acb9028a44082a71a4",
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);

// firebase firestore
import "firebase/firestore";
const db = firebase.firestore();

// firebase auth
import "firebase/auth";
// add observer to listen to firebase user state change
firebase.auth().onAuthStateChanged(async function (user) {
  if (user) {
    store.commit("user$set", { loggedIn: true, data: user });
    try {
      // check if user already added to firestore
      const userSnap = await db.collection("users").doc(user.uid).get();
      if (!userSnap.exists) {
        // user not in firestore
        // add user to firestore
        const userData = {
          displayName: user.displayName,
          email: user.email,
          emailDomain: user.email.split("@")[1],
          photoURL: user.photoURL,
          uid: user.uid,
        };
        await db
          .collection("users")
          .doc(user.uid)
          .set(
            {
              ...userData,
            },
            { merge: true }
          );

        // also add a default preset to the preset collection
        await db.collection("presets").add({
          owner: { ...userData },
          title: defaultPresetJson.title,
          ui: JSON.stringify(defaultPresetJson.ui || {}),
          schema: JSON.stringify(defaultPresetJson.schema || {}),
          model: JSON.stringify(defaultPresetJson.model || {}),
          functionsString: defaultPresetJson.functionsString || "",
          language: JSON.stringify(defaultPresetJson.language || {}),
          time: new Date().getTime(),
        });
      }
    } catch (e) {
      console.log(e);
    }

    // redirect if necessary
    if (router.currentRoute.name === "AuthPage") router.push("/");

    // add listener to constantly update the user presets array
    db.collection("presets")
      .where("owner.emailDomain", "==", user.email.split("@")[1])
      .orderBy("time", "desc")
      .onSnapshot((querySnap) => {
        const presetArray = [];
        querySnap.forEach((doc) => {
          presetArray.push({ id: doc.id, ...doc.data() });
        });

        // store the presets
        store.commit("presets$set", presetArray);

        const { status, selectedPresetId } = store.state.keepSelected;
        let selectedPreset = undefined;
        if (status) {
          // keep the current selected as selectedPreset
          selectedPreset = presetArray.find(
            (pst) => pst.id === selectedPresetId
          );

          // clear the keepSelected store variable
          store.commit("keepSelected$set", {
            status: false,
            selectedPresetId: "",
          });
        } else {
          // store latest select preset that belongs to the user
          selectedPreset = presetArray.find(
            (pst) => pst.owner.uid === user.uid
          );
        }

        // set the selected preset or set latest preset
        const selectedPresetToSet = selectedPreset || presetArray[0];
        store.commit("selectedPreset$set", selectedPresetToSet);

        // set the jsons
        const {
          optionsUi: ui,
          optionsSchema: schema,
          optionsModel: model,
          optionsFunctionsString: functionsString,
          optionsLanguage: language,
        } = selectedPresetToSet;

        defaultPresetJson.jsonSetter(
          store,
          ui || {},
          schema || {},
          model || {},
          functionsString || "",
          language || {}
        );
      });
  } else {
    store.commit("user$set", { loggedIn: false, data: {} });

    // redirect if necessary
    if (router.currentRoute.name !== "AuthPage") router.push("/authenticate");
  }
});

// for i18n
import { initializeVueI18n, addGlobalTranslateFunc } from "@/plugins/vue-i18n";
// get the i18n instance to pass it to vue create
const i18n = initializeVueI18n();
// globally register ui builder translate function
addGlobalTranslateFunc(Vue, i18n);

new Vue({
  i18n,
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");