|
@@ -2,7 +2,7 @@
|
|
import { toast } from 'svelte-sonner';
|
|
import { toast } from 'svelte-sonner';
|
|
import { onMount, getContext } from 'svelte';
|
|
import { onMount, getContext } from 'svelte';
|
|
|
|
|
|
- import { user } from '$lib/stores';
|
|
|
|
|
|
+ import { user, config } from '$lib/stores';
|
|
import { updateUserProfile, createAPIKey, getAPIKey } from '$lib/apis/auths';
|
|
import { updateUserProfile, createAPIKey, getAPIKey } from '$lib/apis/auths';
|
|
|
|
|
|
import UpdatePassword from './Account/UpdatePassword.svelte';
|
|
import UpdatePassword from './Account/UpdatePassword.svelte';
|
|
@@ -27,6 +27,8 @@
|
|
let APIKey = '';
|
|
let APIKey = '';
|
|
let APIKeyCopied = false;
|
|
let APIKeyCopied = false;
|
|
|
|
|
|
|
|
+ $: enableApiKeyAuth = $config?.features.enable_api_key_auth ?? true;
|
|
|
|
+
|
|
let profileImageInputElement: HTMLInputElement;
|
|
let profileImageInputElement: HTMLInputElement;
|
|
|
|
|
|
const submitHandler = async () => {
|
|
const submitHandler = async () => {
|
|
@@ -306,90 +308,96 @@
|
|
<div class="self-center text-xs font-medium">{$i18n.t('API Key')}</div>
|
|
<div class="self-center text-xs font-medium">{$i18n.t('API Key')}</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
- <div class="flex mt-2">
|
|
|
|
- {#if APIKey}
|
|
|
|
- <SensitiveInput value={APIKey} readOnly={true} />
|
|
|
|
-
|
|
|
|
- <button
|
|
|
|
- class="ml-1.5 px-1.5 py-1 dark:hover:bg-gray-850 transition rounded-lg"
|
|
|
|
- on:click={() => {
|
|
|
|
- copyToClipboard(APIKey);
|
|
|
|
- APIKeyCopied = true;
|
|
|
|
- setTimeout(() => {
|
|
|
|
- APIKeyCopied = false;
|
|
|
|
- }, 2000);
|
|
|
|
- }}
|
|
|
|
- >
|
|
|
|
- {#if APIKeyCopied}
|
|
|
|
- <svg
|
|
|
|
- xmlns="http://www.w3.org/2000/svg"
|
|
|
|
- viewBox="0 0 20 20"
|
|
|
|
- fill="currentColor"
|
|
|
|
- class="w-4 h-4"
|
|
|
|
- >
|
|
|
|
- <path
|
|
|
|
- fill-rule="evenodd"
|
|
|
|
- d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
|
|
|
|
- clip-rule="evenodd"
|
|
|
|
- />
|
|
|
|
- </svg>
|
|
|
|
- {:else}
|
|
|
|
- <svg
|
|
|
|
- xmlns="http://www.w3.org/2000/svg"
|
|
|
|
- viewBox="0 0 16 16"
|
|
|
|
- fill="currentColor"
|
|
|
|
- class="w-4 h-4"
|
|
|
|
- >
|
|
|
|
- <path
|
|
|
|
- fill-rule="evenodd"
|
|
|
|
- d="M11.986 3H12a2 2 0 0 1 2 2v6a2 2 0 0 1-1.5 1.937V7A2.5 2.5 0 0 0 10 4.5H4.063A2 2 0 0 1 6 3h.014A2.25 2.25 0 0 1 8.25 1h1.5a2.25 2.25 0 0 1 2.236 2ZM10.5 4v-.75a.75.75 0 0 0-.75-.75h-1.5a.75.75 0 0 0-.75.75V4h3Z"
|
|
|
|
- clip-rule="evenodd"
|
|
|
|
- />
|
|
|
|
- <path
|
|
|
|
- fill-rule="evenodd"
|
|
|
|
- d="M3 6a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H3Zm1.75 2.5a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5h-3.5ZM4 11.75a.75.75 0 0 1 .75-.75h3.5a.75.75 0 0 1 0 1.5h-3.5a.75.75 0 0 1-.75-.75Z"
|
|
|
|
- clip-rule="evenodd"
|
|
|
|
- />
|
|
|
|
- </svg>
|
|
|
|
- {/if}
|
|
|
|
- </button>
|
|
|
|
|
|
+ {#if !enableApiKeyAuth}
|
|
|
|
+ <div class="mt-2 p-2 bg-yellow-500/20 text-yellow-700 dark:text-yellow-200 rounded-lg">
|
|
|
|
+ {$i18n.t('Private API keys are disabled in this environment')}
|
|
|
|
+ </div>
|
|
|
|
+ {:else}
|
|
|
|
+ <div class="flex mt-2">
|
|
|
|
+ {#if APIKey}
|
|
|
|
+ <SensitiveInput value={APIKey} readOnly={true} />
|
|
|
|
|
|
- <Tooltip content={$i18n.t('Create new key')}>
|
|
|
|
<button
|
|
<button
|
|
- class=" px-1.5 py-1 dark:hover:bg-gray-850transition rounded-lg"
|
|
|
|
|
|
+ class="ml-1.5 px-1.5 py-1 dark:hover:bg-gray-850 transition rounded-lg"
|
|
on:click={() => {
|
|
on:click={() => {
|
|
- createAPIKeyHandler();
|
|
|
|
|
|
+ copyToClipboard(APIKey);
|
|
|
|
+ APIKeyCopied = true;
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ APIKeyCopied = false;
|
|
|
|
+ }, 2000);
|
|
}}
|
|
}}
|
|
>
|
|
>
|
|
- <svg
|
|
|
|
- xmlns="http://www.w3.org/2000/svg"
|
|
|
|
- fill="none"
|
|
|
|
- viewBox="0 0 24 24"
|
|
|
|
- stroke-width="2"
|
|
|
|
- stroke="currentColor"
|
|
|
|
- class="size-4"
|
|
|
|
- >
|
|
|
|
- <path
|
|
|
|
- stroke-linecap="round"
|
|
|
|
- stroke-linejoin="round"
|
|
|
|
- d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
|
|
|
|
- />
|
|
|
|
- </svg>
|
|
|
|
|
|
+ {#if APIKeyCopied}
|
|
|
|
+ <svg
|
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
|
+ viewBox="0 0 20 20"
|
|
|
|
+ fill="currentColor"
|
|
|
|
+ class="w-4 h-4"
|
|
|
|
+ >
|
|
|
|
+ <path
|
|
|
|
+ fill-rule="evenodd"
|
|
|
|
+ d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
|
|
|
|
+ clip-rule="evenodd"
|
|
|
|
+ />
|
|
|
|
+ </svg>
|
|
|
|
+ {:else}
|
|
|
|
+ <svg
|
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
|
+ viewBox="0 0 16 16"
|
|
|
|
+ fill="currentColor"
|
|
|
|
+ class="w-4 h-4"
|
|
|
|
+ >
|
|
|
|
+ <path
|
|
|
|
+ fill-rule="evenodd"
|
|
|
|
+ d="M11.986 3H12a2 2 0 0 1 2 2v6a2 2 0 0 1-1.5 1.937V7A2.5 2.5 0 0 0 10 4.5H4.063A2 2 0 0 1 6 3h.014A2.25 2.25 0 0 1 8.25 1h1.5a2.25 2.25 0 0 1 2.236 2ZM10.5 4v-.75a.75.75 0 0 0-.75-.75h-1.5a.75.75 0 0 0-.75.75V4h3Z"
|
|
|
|
+ clip-rule="evenodd"
|
|
|
|
+ />
|
|
|
|
+ <path
|
|
|
|
+ fill-rule="evenodd"
|
|
|
|
+ d="M3 6a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H3Zm1.75 2.5a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5h-3.5ZM4 11.75a.75.75 0 0 1 .75-.75h3.5a.75.75 0 0 1 0 1.5h-3.5a.75.75 0 0 1-.75-.75Z"
|
|
|
|
+ clip-rule="evenodd"
|
|
|
|
+ />
|
|
|
|
+ </svg>
|
|
|
|
+ {/if}
|
|
</button>
|
|
</button>
|
|
- </Tooltip>
|
|
|
|
- {:else}
|
|
|
|
- <button
|
|
|
|
- class="flex gap-1.5 items-center font-medium px-3.5 py-1.5 rounded-lg bg-gray-100/70 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-850 transition"
|
|
|
|
- on:click={() => {
|
|
|
|
- createAPIKeyHandler();
|
|
|
|
- }}
|
|
|
|
- >
|
|
|
|
- <Plus strokeWidth="2" className=" size-3.5" />
|
|
|
|
|
|
|
|
- {$i18n.t('Create new secret key')}</button
|
|
|
|
- >
|
|
|
|
- {/if}
|
|
|
|
- </div>
|
|
|
|
|
|
+ <Tooltip content={$i18n.t('Create new key')}>
|
|
|
|
+ <button
|
|
|
|
+ class=" px-1.5 py-1 dark:hover:bg-gray-850transition rounded-lg"
|
|
|
|
+ on:click={() => {
|
|
|
|
+ createAPIKeyHandler();
|
|
|
|
+ }}
|
|
|
|
+ >
|
|
|
|
+ <svg
|
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
|
+ fill="none"
|
|
|
|
+ viewBox="0 0 24 24"
|
|
|
|
+ stroke-width="2"
|
|
|
|
+ stroke="currentColor"
|
|
|
|
+ class="size-4"
|
|
|
|
+ >
|
|
|
|
+ <path
|
|
|
|
+ stroke-linecap="round"
|
|
|
|
+ stroke-linejoin="round"
|
|
|
|
+ d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
|
|
|
|
+ />
|
|
|
|
+ </svg>
|
|
|
|
+ </button>
|
|
|
|
+ </Tooltip>
|
|
|
|
+ {:else}
|
|
|
|
+ <button
|
|
|
|
+ class="flex gap-1.5 items-center font-medium px-3.5 py-1.5 rounded-lg bg-gray-100/70 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-850 transition"
|
|
|
|
+ on:click={() => {
|
|
|
|
+ createAPIKeyHandler();
|
|
|
|
+ }}
|
|
|
|
+ >
|
|
|
|
+ <Plus strokeWidth="2" className=" size-3.5" />
|
|
|
|
+
|
|
|
|
+ {$i18n.t('Create new secret key')}</button
|
|
|
|
+ >
|
|
|
|
+ {/if}
|
|
|
|
+ </div>
|
|
|
|
+ {/if}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
{/if}
|