opencatd-open/frontend/src/views/dashboard/TokenNew.vue

<template>
  <div class="mx-auto w-full max-w-3xl">
    <header class="mb-4 pr-8">
      <h2 class="text-lg font-semibold tracking-tight">Create New Token</h2>
      <p class="mt-0.5 text-sm text-base-content/60">Tokens authenticate OpenAI-compatible clients with your team.</p>
    </header>

    <div v-if="error" role="alert" class="alert alert-error mb-4 text-sm">
      <CircleAlert class="h-4 w-4 shrink-0" aria-hidden="true" />
      <span class="flex-1">Error: {{ error }}</span>
      <button type="button" class="btn btn-ghost btn-xs" aria-label="Dismiss error" @click="error = null">✕</button>
    </div>

    <form class="card border border-base-300/60 bg-base-100 shadow-sm" @submit.prevent="createToken">
      <div class="card-body gap-5 p-4 sm:p-6">
        <section class="space-y-4">
          <h3 class="text-xs font-semibold uppercase tracking-wider text-base-content/50">Basic Information</h3>
          <div class="grid grid-cols-1 gap-x-4 gap-y-4 md:grid-cols-2">
            <div>
              <label for="token-name" class="mb-1 block text-sm font-medium">
                Name <span class="text-error" aria-hidden="true">*</span>
              </label>
              <input id="token-name" name="name" type="text" v-model="newToken.name"
                placeholder="e.g. my-laptop" autocomplete="off"
                class="input input-bordered w-full" required />
            </div>
          </div>
        </section>

        <section class="collapse collapse-arrow rounded-lg border border-base-300/60">
          <input type="checkbox" v-model="showAdvancedOptions" class="min-h-0 py-2" />
          <div class="collapse-title min-h-0 px-3 py-2 text-sm font-medium">
            Advanced Options
          </div>
          <div class="collapse-content px-3">
            <div class="grid grid-cols-1 gap-x-4 gap-y-4 pt-3 md:grid-cols-2">
              <div>
                <label for="token-key" class="mb-1 block text-sm font-medium">Key</label>
                <div class="relative">
                  <input id="token-key" name="key" :type="isTokenVisible ? 'text' : 'password'" v-model="newToken.key"
                    autocomplete="off" spellcheck="false" placeholder="Leave blank to generate"
                    class="input input-bordered w-full pr-10" />
                  <button type="button" @click="toggleTokenVisibility"
                    class="absolute inset-y-0 right-0 flex items-center px-3 text-base-content/60 hover:text-base-content"
                    :aria-label="isTokenVisible ? 'Hide token key' : 'Show token key'"
                    id="token-visibility-toggle">
                    <EyeOff v-if="!isTokenVisible" class="h-4 w-4" aria-hidden="true" />
                    <Eye v-else class="h-4 w-4" aria-hidden="true" />
                  </button>
                </div>
              </div>

              <div>
                <label for="token-expired" class="mb-1 block text-sm font-medium">Expired at</label>
                <div class="flex items-center gap-3">
                  <input id="token-expired" name="expired_at" type="date" v-model="newToken.format_expired_at"
                    class="input input-bordered w-full" :disabled="newToken.never_expired" />
                  <label class="flex cursor-pointer items-center gap-1.5 whitespace-nowrap text-sm">
                    <input type="checkbox" name="never_expired" v-model="newToken.never_expired" class="checkbox checkbox-sm" />
                    Never
                  </label>
                </div>
              </div>

              <div>
                <label for="token-quota" class="mb-1 block text-sm font-medium">Quota</label>
                <div class="flex items-center gap-3">
                  <input id="token-quota" name="quota" type="number" inputmode="numeric" v-model="newToken.quota"
                    placeholder="e.g. 10" autocomplete="off"
                    class="input input-bordered w-full flex-grow" :disabled="newToken.unlimited_quota" />
                  <label class="flex cursor-pointer items-center gap-1.5 whitespace-nowrap text-sm">
                    <input type="checkbox" name="unlimited_quota" v-model="newToken.unlimited_quota" class="checkbox checkbox-sm" />
                    Unlimited
                  </label>
                </div>
              </div>

              <div>
                <span class="mb-1 block text-sm font-medium">Status</span>
                <div class="flex h-9 items-center gap-3">
                  <input type="checkbox" name="active" v-model="newToken.active" role="switch"
                    class="toggle toggle-sm" :class="newToken.active ? 'toggle-success' : 'toggle-error'"
                    aria-label="Token active" />
                  <span class="text-sm text-base-content/70">
                    {{ newToken.active ? 'Active' : 'Inactive' }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </section>

        <div class="flex items-center justify-end gap-3 border-t border-base-300/40 pt-4">
          <button type="button" class="btn btn-ghost btn-sm" @click="cancel">
            Cancel
          </button>
          <button type="submit" class="btn btn-primary btn-sm px-5" :disabled="!isFormValid || creating">
            <span v-if="creating" class="loading loading-spinner loading-xs" aria-hidden="true"></span>
            Create Token
          </button>
        </div>
      </div>
    </form>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { Eye, EyeOff, CircleAlert } from '@lucide/vue'
import { dateToUnix } from '@/utils/format-date';
import { useToast } from '@/composables/toast';
import type { TokenPayload } from '@/types';

const authStore = useAuthStore()
const { setToast } = useToast()
const error = ref<string | null>(null)
const creating = ref(false)
const user = computed(() => authStore.user);

const showAdvancedOptions = ref(false)


const newToken = ref<TokenPayload>({
  name: '',
  key: '',
  user_id: user.value?.user_id as number | undefined,
  active: true,
  quota: 0,
  unlimited_quota: true,
  expired_at: 0,
  format_expired_at: '',
  never_expired: true,
})

const resetnewToken = () => {
  newToken.value = {
    name: '',
    key: '',
    user_id: '',
    active: true,
    quota: 0,
    unlimited_quota: true,
    expired_at: 0,
    format_expired_at: '',
    never_expired: true,
  }
}

watch(
  () => newToken.value.never_expired,
  (newNeverExpiredValue) => {
    if (newNeverExpiredValue) {
      newToken.value.expired_at = 0;
    }
  }
);
watch(
  () => newToken.value.format_expired_at,
  (format_expired_at) => {
    if (!newToken.value.never_expired && format_expired_at) {
      newToken.value.expired_at = dateToUnix(format_expired_at);
    } else {
      newToken.value.expired_at = 0;
    }
  }
)

const isFormValid = computed(() => {
  return newToken.value.name
})

const createToken = async () => {
  if (!isFormValid.value) {
    setToast('Please fill in all required fields Name.', 'error')
    return
  }

  creating.value = true
  try {
    const res = await authStore.createToken(newToken.value)
    if (res.data?.code === 200) {
      error.value = null;
      resetnewToken();
      setToast('Token created successfully.', 'success')
      emit('closeModal', true)
    } else {
      console.log(res)
      error.value = res.data?.error || 'Failed to create token'
    }
  } catch (err: any) {
    error.value = err.response?.data?.error || 'Failed to create token'

  } finally {
    creating.value = false
  }
}

const cancel = () => {
  resetnewToken()
  emit('closeModal', false)
}

// 显示密码
const isTokenVisible = ref(false);

function toggleTokenVisibility() {
  isTokenVisible.value = !isTokenVisible.value;
}

const emit = defineEmits<{
  (e: 'closeModal', value: boolean): void
}>()

</script>