dozzle/assets/components/Notification/CloudDestinationForm.vue

<template>
  <div class="space-y-4">
    <!-- Cloud linked (when editing with prefix) -->
    <fieldset v-if="destination?.prefix" class="fieldset">
      <legend class="fieldset-legend text-lg">{{ $t("notifications.destination-form.api-key") }}</legend>
      <div class="join w-full">
        <input
          type="text"
          :value="destination.prefix + '**************************************'"
          readonly
          disabled
          class="input join-item w-full font-mono"
          :class="
            cloudStatusError === 'auth'
              ? 'input-error'
              : cloudStatusError === 'unavailable'
                ? 'input-warning'
                : 'input-success'
          "
        />
        <span
          class="join-item btn pointer-events-none"
          :class="
            cloudStatusError === 'auth'
              ? 'btn-error'
              : cloudStatusError === 'unavailable'
                ? 'btn-warning'
                : 'btn-success'
          "
        >
          <mdi:alert-circle v-if="cloudStatusError === 'auth'" class="text-lg" />
          <mdi:cloud-off-outline v-else-if="cloudStatusError === 'unavailable'" class="text-lg" />
          <mdi:check v-else class="text-lg" />
        </span>
      </div>

      <!-- Cloud Status -->
      <div v-if="isLoadingCloudStatus" class="mt-3 flex items-center gap-2">
        <span class="loading loading-spinner loading-sm"></span>
        <span class="text-base-content/60 text-sm">{{ $t("notifications.destination-form.cloud-checking") }}</span>
      </div>
      <div v-else-if="cloudStatusError" class="mt-3">
        <div class="alert" :class="cloudStatusError === 'auth' ? 'alert-error' : 'alert-warning'">
          <mdi:alert-circle v-if="cloudStatusError === 'auth'" class="text-lg" />
          <mdi:cloud-off-outline v-else class="text-lg" />
          <span>{{
            cloudStatusError === "auth"
              ? $t("notifications.destination-form.cloud-relink")
              : $t("notifications.destination-form.cloud-unavailable")
          }}</span>
        </div>
      </div>
      <div v-else-if="cloudStatus" class="mt-3 space-y-3">
        <div class="flex items-center justify-between text-sm">
          <span class="text-base-content/60">{{ $t("notifications.destination-form.cloud-plan") }}</span>
          <span class="badge badge-primary badge-sm capitalize">{{ cloudStatus.plan.name }}</span>
        </div>
        <div>
          <div class="mb-1 flex items-center justify-between text-sm">
            <span class="text-base-content/60">{{ $t("notifications.destination-form.cloud-usage") }}</span>
            <span
              >{{ cloudStatus.usage.events_used.toLocaleString() }} /
              {{ cloudStatus.usage.events_limit.toLocaleString() }}</span
            >
          </div>
          <progress
            class="progress w-full"
            :class="usagePercent > 90 ? 'progress-error' : usagePercent > 70 ? 'progress-warning' : 'progress-primary'"
            :value="cloudStatus.usage.events_used"
            :max="cloudStatus.usage.events_limit"
          ></progress>
        </div>
      </div>

      <p class="text-base-content/60 mt-2 text-sm">
        {{ $t("notifications.destination-form.cloud-settings-hint") }}
        <a :href="cloudSettingsUrl" target="_blank" class="link link-primary">
          {{ $t("notifications.destination-form.cloud-settings-link") }}
        </a>
      </p>
    </fieldset>

    <!-- Link Dozzle Cloud (when creating or not linked) -->
    <div v-else class="card card-border border-primary/30 bg-primary/5">
      <div class="card-body items-center text-center">
        <mdi:cloud-outline class="text-primary text-4xl" />
        <h3 class="card-title">{{ $t("notifications.destination-form.link-cloud") }}</h3>
        <p class="text-base-content/60 text-sm">{{ $t("notifications.destination-form.cloud-description") }}</p>
        <a :href="cloudLinkUrl" class="btn btn-primary btn-lg mt-2">
          <mdi:link-variant class="text-lg" />
          {{ $t("notifications.destination-form.link-cloud-button") }}
        </a>
      </div>
    </div>

    <!-- Actions -->
    <div class="flex items-center gap-2 pt-4">
      <div class="flex-1"></div>
      <button class="btn" @click="close?.()">
        {{ $t("notifications.destination-form.close") }}
      </button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { Dispatcher } from "@/types/notifications";

const { destination, close } = defineProps<{
  destination?: Dispatcher;
  close?: () => void;
}>();

const callbackUrl = `${window.location.origin}${withBase("/")}`;
const cloudLinkUrl = `${__CLOUD_URL__}/link?appUrl=${encodeURIComponent(callbackUrl)}&from=notifications`;
const cloudSettingsUrl = `${__CLOUD_URL__}/settings`;

const { cloudStatus, cloudStatusError, isLoadingCloudStatus, fetchCloudStatus } = useCloudConfig();

const usagePercent = computed(() => {
  if (!cloudStatus.value) return 0;
  return (cloudStatus.value.usage.events_used / cloudStatus.value.usage.events_limit) * 100;
});

if (destination?.prefix) {
  fetchCloudStatus();
}
</script>