@dasidev/dasi-ui 1.0.0

package/src/layouts/AuthLayout.vue

@@ -0,0 +1,68 @@
+<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/src/layouts/DefaultLayout.vue

@@ -0,0 +1,119 @@
+<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>