@initsolusidigital/worksuite-shell 0.0.0-stage → 0.3.0

package/src/components/layout/AppLegalConsentModal.vue

@@ -0,0 +1,484 @@
+<script setup>
+// Modal persetujuan naskah hukum. Kontrak: `legal-consent.md` §2–§4.
+//
+// Dipasang SEKALI di `App.vue`, bukan di `AppLayout`: layar tanpa `AppLayout` (editor penuh layar)
+// juga menolak tulis selama naskah belum disetujui, dan tanpa modal di sana tombol Simpan terasa
+// mati tanpa sebab.
+//
+// Yang memutuskan tampil-tidaknya hanya server: `legal.must_accept` dari `/auth/me`, atau 403
+// `legal_acceptance_required` yang dicatat `api/legalGate.js`. Versi tak pernah dibandingkan di
+// sini. Isi (versi + alamat) hanya dari `legal.documents`; ⚠️ modal ini TIDAK boleh memakai
+// `utils/legalLinks.js`: persetujuan yang tercatat harus menunjuk versi yang dicatat backend, dan
+// alamat cadangan bisa menautkan naskah yang berbeda dari yang dicatat.
+//
+// Bukan `AppModal`: komponen itu selalu punya tombol tutup dan menutup lewat Escape, sedangkan
+// modal ini hanya selesai lewat Setuju, Tolak, atau Keluar.
+import { computed, onBeforeUnmount, onMounted, ref, useId, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute, useRouter } from 'vue-router'
+import { ExternalLink, LogOut, RefreshCw, ScrollText } from '@lucide/vue'
+import { useAuthStore } from '@initsolusidigital/worksuite-core/stores/auth.js'
+import { legalApi } from '@initsolusidigital/worksuite-core/api/endpoints/legal.js'
+import { normalizeApiError } from '@initsolusidigital/worksuite-core/api/errors.js'
+import { legalGateState as gate, setLegalRefresher, refreshLegal, clearLegalGate } from '@initsolusidigital/worksuite-core/api/legalGate.js'
+import { maintenanceState } from '@initsolusidigital/worksuite-core/api/maintenance.js'
+import { usePreferences } from '@initsolusidigital/worksuite-core/composables/usePreferences.js'
+import { redirectToIdentityLogin } from '@initsolusidigital/worksuite-core/utils/loginRedirect.js'
+import { parseDateOnly } from '@initsolusidigital/worksuite-core/utils/dateOnly.js'
+import AppButton from '@initsolusidigital/worksuite-ui/AppButton.vue'
+import AppSpinner from '@initsolusidigital/worksuite-ui/AppSpinner.vue'
+
+const { t, locale } = useI18n()
+const route = useRoute()
+const router = useRouter()
+const auth = useAuthStore()
+const { applyLocale, save: savePreferences } = usePreferences()
+
+const DOCS = ['terms', 'privacy']
+const titleId = useId()
+const bodyId = useId()
+
+// ── Kapan modal tampil ────────────────────────────────────────────────────────────────────────
+// Rute tanpa modal: halaman publik dan pintu pelanggan Client Zone (pelanggan portal bukan pihak
+// naskah ini), serta rute ber-`meta.legalGateExempt`. Nilai `'systemOwner'` mengecualikan System
+// Owner saja: endpoint setelan naskah lolos dari gerbang server supaya sakelarnya selalu bisa
+// dimatikan, dan modal yang menutupi layar setelan itu membatalkan kelonggaran tersebut.
+const exemptRoute = computed(() => route.matched.some(
+  (r) => r.meta.public || r.meta.portalGuest || r.meta.requiresPortalAuth || r.meta.legalGateExempt === true,
+))
+const ownerExemptRoute = computed(() => auth.isSystemOwner
+  && route.matched.some((r) => r.meta.legalGateExempt === 'systemOwner'))
+
+const needed = computed(() => auth.isAuthenticated && (auth.legalMustAccept || gate.required))
+// Akun karyawan nonaktif hanya bisa keluar (halaman blokir); meminta persetujuannya tak berguna,
+// dan Tolak dari sana mengirim notifikasi ke admin untuk akun yang memang sudah ditutup.
+const suppressed = computed(() => auth.isBlocked || exemptRoute.value || (ownerExemptRoute.value && !gate.forceShow))
+const visible = computed(() => needed.value && !suppressed.value)
+
+// `flush: 'sync'`: `useToast` membaca dua bendera ini pada saat `catch` pemanggil berjalan, yaitu
+// sebelum Vue sempat memperbarui tampilan.
+watch(suppressed, (v) => { gate.suppressed = v }, { immediate: true, flush: 'sync' })
+watch(visible, (v) => { gate.shown = v }, { immediate: true, flush: 'sync' })
+watch(() => auth.isAuthenticated, (ok) => { if (!ok) clearLegalGate() })
+// Permintaan membuka modal di rute yang dikecualikan berlaku untuk kunjungan itu saja: kembali ke
+// rute tersebut harus kembali tanpa modal, sebab pengecualiannya ada supaya layarnya terjangkau.
+watch(() => route.fullPath, () => { gate.forceShow = false })
+
+// ── Isi ───────────────────────────────────────────────────────────────────────────────────────
+const legal = computed(() => auth.legal)
+const documents = computed(() => legal.value?.documents ?? {})
+const ready = computed(() => DOCS.every((d) => documents.value[d]?.version))
+// Daftar tertunda bisa kosong sesaat: 403 datang lebih dulu daripada `/auth/me` yang dimuat ulang.
+// Selama itu kedua naskah ditampilkan; server tetap menolak versi yang bukan versi berlaku.
+const pending = computed(() => {
+  const list = (legal.value?.pending ?? []).filter((d) => DOCS.includes(d))
+  return DOCS.filter((d) => (list.length ? list.includes(d) : true))
+})
+const onBehalf = computed(() => legal.value?.on_behalf_of_company === true)
+const isUpdate = computed(() => DOCS.some((d) => legal.value?.accepted?.[d]))
+const linkLang = computed(() => (String(locale.value).toLowerCase().startsWith('id') ? 'id' : 'en'))
+
+function docUrl(doc) {
+  const url = documents.value[doc]?.urls?.[linkLang.value]
+  return typeof url === 'string' && url.startsWith('https://') ? url : null
+}
+
+function docDate(doc) {
+  const d = parseDateOnly(documents.value[doc]?.effective_date)
+  if (!d) return ''
+  return new Intl.DateTimeFormat(linkLang.value === 'id' ? 'id-ID' : 'en-US', { dateStyle: 'long' }).format(d)
+}
+
+const agreeLabel = computed(() => (pending.value.length === 1
+  ? t('legal.modal.agreeOne', { doc: t(`legal.doc.${pending.value[0]}`) })
+  : t('legal.modal.agreeBoth')))
+
+// ── Keadaan form ──────────────────────────────────────────────────────────────────────────────
+const step = ref('main')          // main | decline
+const agreed = ref(false)
+const authority = ref(false)
+const busy = ref('')              // '' | accept | decline | logout
+const error = ref('')
+const notice = ref('')
+// Bahasa yang dipilih DI DALAM modal. Tidak disimpan ke server selama naskah belum disetujui
+// (simpan preferensi ikut ditolak gerbang); baru disimpan sesudah persetujuan tercatat.
+let chosenLocale = null
+
+const canAccept = computed(() => ready.value && agreed.value && (!onBehalf.value || authority.value) && !busy.value)
+
+function resetForm() {
+  step.value = 'main'
+  agreed.value = false
+  authority.value = false
+  error.value = ''
+  notice.value = ''
+}
+
+function setLanguage(loc) {
+  chosenLocale = loc
+  applyLocale(loc)
+}
+
+function messageFor(e) {
+  if (e.isMaintenance) return t('maintenance.unsaved')
+  if (e.isNetwork) return t('common.networkError')
+  if (e.isRateLimited) return e.retryAfter ? t('common.rateLimited', { seconds: e.retryAfter }) : t('common.rateLimitedNoWait')
+  if (e.isImpersonationRestricted) return t('legal.modal.impersonation')
+  if (e.isServer && e.errorId) return t('common.serverErrorWithId', { id: e.errorId })
+  return t('common.serverError')
+}
+
+async function accept() {
+  if (!canAccept.value) return
+  busy.value = 'accept'
+  error.value = ''
+  notice.value = ''
+  try {
+    const { data } = await legalApi.accept({
+      terms_version: documents.value.terms.version,
+      privacy_version: documents.value.privacy.version,
+      ...(onBehalf.value ? { on_behalf_of_company: true } : {}),
+      locale: linkLang.value,
+    })
+    const next = data?.data?.legal
+    if (next) auth.setLegal(next)
+    else await auth.fetchLegal()
+    clearLegalGate()
+    if (chosenLocale && chosenLocale !== auth.user?.preferences?.locale) savePreferences({ locale: chosenLocale })
+    chosenLocale = null
+  } catch (err) {
+    const e = normalizeApiError(err)
+    if (e.status === 409 && e.reason === 'legal_version_outdated') {
+      // Versi naik sejak modal dibuka: naskah terbaru dipasang, centang diminta ulang. Blok lain
+      // (`pending`, `on_behalf_of_company`) menyusul dari `/auth/me`.
+      if (e.data.documents) auth.setLegal({ ...(legal.value ?? {}), documents: e.data.documents })
+      agreed.value = false
+      authority.value = false
+      notice.value = t('legal.modal.outdated')
+      refreshLegal()
+    } else if (e.reason === 'authority_confirmation_required') {
+      error.value = t('legal.modal.authorityRequired')
+    } else {
+      error.value = messageFor(e)
+    }
+  } finally {
+    busy.value = ''
+  }
+}
+
+// Sesi sudah berakhir di server; yang tersisa membersihkan state lalu pindah ke pintu login.
+function leave() {
+  auth.clearUser()
+  clearLegalGate()
+  if (!redirectToIdentityLogin()) router.push({ name: 'login' }).catch(() => {})
+}
+
+async function decline() {
+  if (busy.value) return
+  busy.value = 'decline'
+  error.value = ''
+  try {
+    await legalApi.decline()
+  } catch (err) {
+    const e = normalizeApiError(err)
+    busy.value = ''
+    if (e.status === 401) return          // interceptor sudah membawa pengguna ke pintu login
+    if (e.status === 409 && e.reason === 'legal_nothing_pending') {
+      // Sudah disetujui di tab lain: tak ada yang ditolak, modal menutup begitu keadaan dimuat ulang.
+      step.value = 'main'
+      await refreshLegal()
+      return
+    }
+    error.value = messageFor(e)
+    return
+  }
+  leave()
+}
+
+// Keluar TANPA mencatat penolakan: `POST /logout` biasa, yang memang lolos dari gerbang.
+async function logout() {
+  if (busy.value) return
+  busy.value = 'logout'
+  try {
+    await auth.logout()
+  } catch { /* state lokal tetap dibersihkan `logout()` */ }
+  leave()
+}
+
+// ── Pemuat ulang `/auth/me` ───────────────────────────────────────────────────────────────────
+// Hanya blok `legal` yang dimuat ulang (`fetchLegal`), bukan seluruh `/auth/me` ke store: mengganti
+// `user` menjalankan ulang apa pun yang mengikutinya di balik modal (lihat `stores/auth.js`).
+setLegalRefresher(async () => {
+  try {
+    await auth.fetchLegal()
+  } catch (err) {
+    if (err?.response?.status === 401) { leave(); return }
+    throw err
+  }
+  if (!auth.legalMustAccept) clearLegalGate()
+})
+
+function retryLoad() {
+  refreshLegal()
+}
+
+// Persetujuan di satu tab harus menutup modal di tab lain: selama modal tampil, keadaan dimuat
+// ulang tiap tab ini kembali aktif.
+function onVisibility() {
+  if (document.visibilityState === 'visible' && visible.value && !busy.value) refreshLegal()
+}
+
+// ── Kunci halaman, fokus, papan tik ───────────────────────────────────────────────────────────
+const rootRef = ref(null)
+const panelRef = ref(null)
+const modalStack = (window.__wsModalStack ||= [])
+const stackToken = Symbol('legal-consent')
+let inerted = []
+let observer = null
+let returnFocusTo = null
+
+const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])'
+
+// Halaman di balik modal dibuat `inert`: tetap terpasang (isian form utuh), tapi tak bisa difokus
+// atau diklik. Elemen yang sudah `inert` oleh layar pemeliharaan dilewati, dan inangnya sendiri
+// tak disentuh: layar pemeliharaan harus tetap bisa dipakai di atas modal ini.
+function lockPage() {
+  for (const el of document.body.children) {
+    if (el === rootRef.value || el.hasAttribute('data-maintenance-host') || el.inert) continue
+    el.inert = true
+    inerted.push(el)
+  }
+}
+
+function unlockPage() {
+  for (const el of inerted) el.inert = false
+  inerted = []
+}
+
+function onKeydown(e) {
+  if (!visible.value) return
+  if (e.key === 'Escape') {
+    // Escape tak menutup modal ini, dan tak boleh sampai ke dialog di baliknya: menutup form yang
+    // sedang diisi pengguna membuang isiannya.
+    e.preventDefault()
+    e.stopPropagation()
+    if (step.value === 'decline' && !busy.value) step.value = 'main'
+    return
+  }
+  if (e.key !== 'Tab' || !panelRef.value) return
+  const els = [...panelRef.value.querySelectorAll(FOCUSABLE)].filter((el) => el.offsetParent !== null)
+  if (!els.length) return
+  const first = els[0]
+  const last = els[els.length - 1]
+  const inside = panelRef.value.contains(document.activeElement)
+  if (e.shiftKey && (document.activeElement === first || !inside)) {
+    e.preventDefault(); last.focus()
+  } else if (!e.shiftKey && (document.activeElement === last || !inside)) {
+    e.preventDefault(); first.focus()
+  }
+}
+
+function onShow() {
+  resetForm()
+  returnFocusTo = document.activeElement
+  // Dialog lain membaca tumpukan ini untuk memutuskan siapa yang menanggapi Escape; selama token
+  // modal ini di puncak, dialog di baliknya diam.
+  if (!modalStack.includes(stackToken)) modalStack.push(stackToken)
+  lockPage()
+  // Elemen yang ditambahkan ke `<body>` sesudah modal tampil (dialog yang baru di-teleport) ikut dikunci.
+  observer = new MutationObserver(lockPage)
+  observer.observe(document.body, { childList: true })
+  document.addEventListener('keydown', onKeydown, true)
+  document.addEventListener('visibilitychange', onVisibility)
+  panelRef.value?.focus()
+  // Naskah belum ada di store (403 mendahului `/auth/me`) dan tak ada pemuatan yang berjalan.
+  if (!ready.value && !gate.loading) refreshLegal()
+}
+
+function onHide() {
+  observer?.disconnect()
+  observer = null
+  document.removeEventListener('keydown', onKeydown, true)
+  document.removeEventListener('visibilitychange', onVisibility)
+  const i = modalStack.indexOf(stackToken)
+  if (i !== -1) modalStack.splice(i, 1)
+  unlockPage()
+  if (returnFocusTo?.isConnected) returnFocusTo.focus?.()
+  returnFocusTo = null
+}
+
+// `flush: 'post'`: `onShow` memakai elemen modal, yang baru ada sesudah tampilan diperbarui.
+watch(visible, (v) => (v ? onShow() : onHide()), { flush: 'post' })
+// Layar pemeliharaan membuka kembali elemen yang ia kunci; selama modal ini masih tampil, elemen
+// itu dikunci lagi.
+watch(() => maintenanceState.active, (active) => { if (!active && visible.value) lockPage() })
+
+onMounted(() => { if (visible.value) onShow() })
+onBeforeUnmount(() => {
+  onHide()
+  gate.shown = false
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="visible"
+      ref="rootRef"
+      class="fixed inset-0 z-[900] flex items-center justify-center overflow-y-auto p-4"
+      data-legal-consent
+    >
+      <div class="fixed inset-0 bg-gray-900/60 backdrop-blur-sm" aria-hidden="true"></div>
+
+      <div
+        ref="panelRef"
+        role="dialog"
+        aria-modal="true"
+        tabindex="-1"
+        :aria-labelledby="titleId"
+        :aria-describedby="bodyId"
+        class="relative flex max-h-[calc(100dvh-2rem)] w-full max-w-lg flex-col rounded-2xl bg-white shadow-2xl focus:outline-none dark:bg-gray-800"
+      >
+        <!-- Kepala: judul + pemilih bahasa (hanya mengubah tampilan, tidak menyimpan preferensi) -->
+        <div class="flex shrink-0 items-start gap-3 border-b border-gray-200 px-5 py-4 dark:border-gray-700 sm:px-6">
+          <div class="grid h-10 w-10 shrink-0 place-items-center rounded-full bg-blue-50 text-blue-600 dark:bg-blue-900/40 dark:text-blue-300" aria-hidden="true">
+            <ScrollText class="h-5 w-5" />
+          </div>
+          <h2 :id="titleId" class="min-w-0 flex-1 pt-1.5 text-base font-semibold text-gray-900 dark:text-white [text-wrap:balance]">
+            {{ step === 'decline' ? t('legal.modal.declineTitle') : t('legal.modal.title') }}
+          </h2>
+          <div class="flex shrink-0 overflow-hidden rounded-lg border border-gray-200 dark:border-gray-600" role="group" :aria-label="t('legal.modal.language')">
+            <button
+              v-for="loc in ['id', 'en']"
+              :key="loc"
+              type="button"
+              class="px-2.5 py-1.5 text-xs font-semibold uppercase transition-colors"
+              :class="linkLang === loc
+                ? 'bg-blue-600 text-white'
+                : 'bg-white text-gray-600 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'"
+              :aria-pressed="linkLang === loc"
+              :aria-label="t(`lang.${loc}`)"
+              :data-legal-lang="loc"
+              @click="setLanguage(loc)"
+            >{{ loc }}</button>
+          </div>
+        </div>
+
+        <div :id="bodyId" class="scrollbar-rounded flex-1 overflow-y-auto px-5 py-5 sm:px-6">
+          <!-- Konfirmasi penolakan -->
+          <div v-if="step === 'decline'" data-legal-decline-confirm>
+            <p class="text-sm leading-relaxed text-gray-700 dark:text-gray-300">
+              {{ onBehalf ? t('legal.modal.declineBodyCompany', { company: auth.companyName }) : t('legal.modal.declineBody') }}
+            </p>
+          </div>
+
+          <!-- Naskah belum ada di store: tunggu atau coba lagi. Tanpa alamat cadangan. -->
+          <div v-else-if="!ready" class="py-6 text-center" data-legal-pending-load>
+            <template v-if="gate.loading">
+              <AppSpinner class="mx-auto" />
+              <p class="mt-3 text-sm text-gray-500 dark:text-gray-400">{{ t('legal.modal.loading') }}</p>
+            </template>
+            <template v-else>
+              <p class="text-sm text-gray-700 dark:text-gray-300">{{ t('legal.modal.loadFailed') }}</p>
+              <AppButton class="mt-4" variant="secondary" data-legal-retry @click="retryLoad">
+                <RefreshCw class="h-4 w-4" aria-hidden="true" />{{ t('common.retry') }}
+              </AppButton>
+            </template>
+          </div>
+
+          <div v-else class="space-y-4">
+            <p class="text-sm leading-relaxed text-gray-700 dark:text-gray-300">
+              {{ isUpdate ? t('legal.modal.introUpdated') : t('legal.modal.introFirst') }}
+            </p>
+
+            <ul class="divide-y divide-gray-100 rounded-xl border border-gray-200 dark:divide-gray-700 dark:border-gray-700">
+              <li v-for="doc in pending" :key="doc" class="px-4 py-3" :data-legal-doc="doc">
+                <a
+                  v-if="docUrl(doc)"
+                  :href="docUrl(doc)"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="inline-flex items-center gap-1.5 text-sm font-semibold text-blue-700 hover:underline dark:text-blue-300"
+                  :aria-label="t('legal.modal.openDoc', { doc: t(`legal.doc.${doc}`) })"
+                >
+                  {{ t(`legal.doc.${doc}`) }}
+                  <ExternalLink class="h-3.5 w-3.5" aria-hidden="true" />
+                </a>
+                <span v-else class="text-sm font-semibold text-gray-900 dark:text-white">{{ t(`legal.doc.${doc}`) }}</span>
+                <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">
+                  {{ t('legal.modal.docMeta', { version: documents[doc].version, date: docDate(doc) }) }}
+                </p>
+              </li>
+            </ul>
+
+            <p v-if="notice" role="status" class="rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800 dark:border-amber-900/40 dark:bg-amber-900/20 dark:text-amber-200" data-legal-notice>
+              {{ notice }}
+            </p>
+
+            <label class="flex cursor-pointer items-start gap-3">
+              <input
+                v-model="agreed"
+                type="checkbox"
+                class="mt-0.5 h-4 w-4 shrink-0 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600"
+                data-legal-agree
+              />
+              <span class="text-sm text-gray-800 dark:text-gray-200">{{ agreeLabel }}</span>
+            </label>
+
+            <!-- Bagian A Ketentuan Layanan belum disetujui perusahaan, dan akun ini admin utamanya:
+                 satu aksi mencatat persetujuan perusahaan + persetujuan akun. -->
+            <div v-if="onBehalf" class="space-y-3 rounded-xl bg-gray-50 px-4 py-3 dark:bg-gray-900/40">
+              <p class="text-xs leading-relaxed text-gray-600 dark:text-gray-400">
+                {{ t('legal.modal.authorityNote', { company: auth.companyName }) }}
+              </p>
+              <label class="flex cursor-pointer items-start gap-3">
+                <input
+                  v-model="authority"
+                  type="checkbox"
+                  class="mt-0.5 h-4 w-4 shrink-0 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600"
+                  data-legal-authority
+                />
+                <span class="text-sm text-gray-800 dark:text-gray-200">{{ t('legal.modal.authority', { company: auth.companyName }) }}</span>
+              </label>
+            </div>
+          </div>
+
+          <p v-if="error" role="alert" class="mt-4 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700 dark:border-red-900/40 dark:bg-red-900/20 dark:text-red-300" data-legal-error>
+            {{ error }}
+          </p>
+        </div>
+
+        <div class="shrink-0 border-t border-gray-200 px-5 py-4 dark:border-gray-700 sm:px-6">
+          <div v-if="step === 'decline'" class="flex items-center justify-end gap-2">
+            <AppButton variant="secondary" :disabled="!!busy" @click="step = 'main'">{{ t('legal.modal.declineBack') }}</AppButton>
+            <AppButton variant="danger" :loading="busy === 'decline'" data-legal-decline-confirm-button @click="decline">
+              {{ t('legal.modal.declineConfirm') }}
+            </AppButton>
+          </div>
+          <div v-else class="flex items-center justify-end gap-2">
+            <AppButton variant="secondary" :disabled="!!busy" data-legal-decline @click="step = 'decline'; error = ''">
+              {{ t('legal.modal.decline') }}
+            </AppButton>
+            <AppButton variant="primary" :disabled="!canAccept" :loading="busy === 'accept'" data-legal-accept @click="accept">
+              {{ t('legal.modal.accept') }}
+            </AppButton>
+          </div>
+
+          <!-- Keluar tanpa memutuskan: bukan penolakan, tak ada yang diberi tahu. -->
+          <div v-if="step === 'main'" class="mt-3 border-t border-gray-100 pt-3 text-center dark:border-gray-700">
+            <button
+              type="button"
+              class="inline-flex items-center gap-1.5 rounded text-sm font-medium text-gray-600 hover:text-gray-900 hover:underline disabled:opacity-50 dark:text-gray-300 dark:hover:text-white"
+              :disabled="!!busy"
+              data-legal-logout
+              @click="logout"
+            >
+              <LogOut class="h-4 w-4" aria-hidden="true" />{{ t('legal.modal.logout') }}
+            </button>
+            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ t('legal.modal.logoutHint') }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>