@dasidev/dasi-ui 1.0.19 → 1.0.21

package/template/src/layouts/AuthLayout.vue

@@ -1,68 +0,0 @@
-<script setup lang="ts">
-import Copyright from "../components/helper/Copyright.vue";
-import { useDarkMode } from "../composables/useDarkMode";
-import { useAppConfig } from "../composables/useAppConfig";
-import { Moon, Sun } from "lucide-vue-next";
-import { onMounted, computed } from "vue";
-import { RouterView, useRoute } from "vue-router";
-
-const route = useRoute();
-const { isDark, toggleDarkMode } = useDarkMode();
-const { companyName, logo, logoAlt, tokenKey, loginBackgroundDay, loginBackgroundNight } = useAppConfig();
-
-// Computed background image based on dark mode
-const loginBackground = computed(() => {
-  return isDark.value ? loginBackgroundNight.value : loginBackgroundDay.value;
-});
-
-onMounted(() => {
-  const userKey = tokenKey.value.replace('.token', '.name');
-  if (localStorage.getItem(userKey)) {
-    window.location.href = route.query.next && String(route.query.next) !== "/" ? String(route.query.next) : "/";
-  }
-});
-</script>
-
-<template>
-  <div class="container relative flex h-screen flex-col items-center justify-center dark:bg-dark_bg_transparent md:flex-row lg:max-w-none lg:px-0">
-    <div class="lg:w-5/12 lg:p-8">
-      <div class="mx-auto flex w-full flex-col justify-center space-y-6 sm:max-w-[380px]">
-        <RouterView />
-      </div>
-    </div>
-    <div class="relative hidden h-full flex-col bg-muted text-bg_main dark:bg-dark_bg_transparent dark:text-white/95 lg:flex lg:w-7/12">
-      <div 
-        class="login-img absolute bottom-4 left-4 right-4 top-4 overflow-hidden rounded-xl bg-cover bg-center text-center"
-        :style="{
-          backgroundImage: `url(${loginBackground})`
-        }"
-      >
-        <div class="absolute z-3 h-full w-full bg-gradient-to-b from-black/30 to-black/20"></div>
-        <button
-          @click="toggleDarkMode"
-          class="absolute right-4 top-3 z-30 ml-2 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-white transition hover:bg-hover_main hover:text-primary_main dark:hover:bg-dark_bg4 dark:hover:text-white">
-          <Sun v-if="isDark" class="size-[18px] transition 2xl:size-[22px]" />
-          <Moon v-else class="size-[18px] transition 2xl:size-[22px]" />
-        </button>
-        <!-- <div class="absolute left-4 top-4 z-20">
-          <img :src="logo" :alt="logoAlt" />
-        </div> -->
-        <div class="flex h-full items-center justify-center p-8">
-          <div class="relative z-20 w-full px-5 text-center font-sans opacity-80">
-            <h1 class="text-5xl font-bold">{{ companyName }}</h1>
-            <div class="mt-4 text-2xl font-light">Welcome to your digital platform</div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="fixed bottom-2 left-5 text-sm opacity-65">
-    <Copyright />
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.login-img {
-  transition: background-image 0.3s ease;
-}
-</style>

package/template/src/layouts/DefaultLayout.vue

@@ -1,119 +0,0 @@
-<script setup lang="ts">
-import { RouterView } from "vue-router";
-import Header from "../components/pages/Header.vue";
-import Leftbar from "../components/pages/Leftbar.vue";
-import LoadingScreen from "../components/loadings/LoadingScreen.vue";
-import ErrorScreen from "../components/helper/ErrorScreen.vue";
-import api from "../api/api";
-import { onBeforeMount, onMounted, ref } from "vue";
-import { toast, Toaster } from "vue-sonner";
-import RakorConfirmDialog from "./RakorConfirmDialog.vue";
-import GlobalDialog from "./GlobalDialog.vue";
-import FormGlobal from "./FormGlobal.vue";
-import ConfigSwitcher from "../components/helper/ConfigSwitcher.vue";
-import { useAuthStore } from "../stores/auth";
-
-/**
- * Global el
-*
- */
-const leftbarEl: any = ref(null);
-const authStore = useAuthStore();
-const token = authStore.getAuthToken();
-
-/**
- * Loading and error states
- */
-const isLoading = ref(true);
-const hasError = ref(false);
-const errorMessage = ref("");
-
-/**
- * Global function
- * that can be called via emits
- *
- */
-function openSearch() {
-  leftbarEl.value.openSearch();
-}
-
-function checkStatus() {
-  api
-    .get("/auth/status")
-    .then(r => {
-      console.log("Logged in!");
-      isLoading.value = false;
-      hasError.value = false;
-      if (r.data.auth_token) localStorage.setItem("app.user.token", r.data.auth_token);
-      if (!wsInitialized.value) {
-        // initializeWebSocket(); // TODO: Implement WebSocket initialization
-      }
-      setTimeout(() => {
-        checkStatus();
-      }, 15000);
-    })
-    .catch((err: any) => {
-      if (err.response?.status === 401) {
-        localStorage.clear();
-        const uri = `${window.location.pathname}${window.location.search}`;
-        window.location.href = `/login?next=${encodeURIComponent(uri)}`;
-      } else {
-        isLoading.value = false;
-        // hasError.value = true;
-        // errorMessage.value = "Gagal terhubung ke server. Silakan periksa koneksi Anda.";
-      }
-    });
-}
-
-function retryConnection() {
-  isLoading.value = true;
-  hasError.value = false;
-  errorMessage.value = "";
-  checkStatus();
-}
-
-onBeforeMount(() => {
-  checkStatus();
-});
-
-const wsInitialized = ref(false);
-
-onMounted(() => {
-  if (!isLoading.value && !hasError.value) {
-  }
-});
-</script>
-
-<template>
-  <!-- Loading Screen -->
-  <LoadingScreen v-if="isLoading" />
-
-  <!-- Error Screen -->
-  <ErrorScreen v-else-if="hasError" :error-message="errorMessage" @retry="retryConnection" />
-
-  <!-- Main App -->
-  <template v-else>
-    <Header v-on:openSearch="openSearch"></Header>
-    <Leftbar ref="leftbarEl" />
-    <main class="min-h-dvh bg-slate-100 pl-20 pt-[4.5rem] dark:bg-dark_bg 2xl:pt-24">
-      <RouterView />
-    </main>
-    <FormGlobal />
-    <RakorConfirmDialog />
-    <GlobalDialog />
-    <ConfigSwitcher />
-    <Toaster richColors closeButton />
-  </template>
-</template>
-<style>
-button#buttonValidasiNtpn {
-  display: flex;
-  align-items: center;
-  margin-top: 3.5vh;
-}
-button#buttonCekEmailAms {
-  display: flex;
-  align-items: center;
-  margin-top: 2.5vh;
-}
-</style>