From 7c5f6d71b3607e0529fd1359ac0346bdf5784a72 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Tue, 2 Apr 2024 09:39:55 -0700
Subject: [PATCH] refac

---
 src/lib/apis/auths/index.ts                   | 10 ++---
 .../components/chat/Settings/Account.svelte   | 44 +++++++++++--------
 src/routes/auth/+page.svelte                  | 13 +-----
 3 files changed, 31 insertions(+), 36 deletions(-)

diff --git a/src/lib/apis/auths/index.ts b/src/lib/apis/auths/index.ts
index b703e8746..548a9418d 100644
--- a/src/lib/apis/auths/index.ts
+++ b/src/lib/apis/auths/index.ts
@@ -319,7 +319,7 @@ export const updateJWTExpiresDuration = async (token: string, duration: string)
 	return res;
 };
 
-export const createApiKey = async (token: string) => {
+export const createAPIKey = async (token: string) => {
 	let error = null;
 
 	const res = await fetch(`${WEBUI_API_BASE_URL}/auths/api_key`, {
@@ -341,10 +341,10 @@ export const createApiKey = async (token: string) => {
 	if (error) {
 		throw error;
 	}
-	return res;
+	return res.api_key;
 };
 
-export const getApiKey = async (token: string) => {
+export const getAPIKey = async (token: string) => {
 	let error = null;
 
 	const res = await fetch(`${WEBUI_API_BASE_URL}/auths/api_key`, {
@@ -366,10 +366,10 @@ export const getApiKey = async (token: string) => {
 	if (error) {
 		throw error;
 	}
-	return res;
+	return res.api_key;
 };
 
-export const deleteApiKey = async (token: string) => {
+export const deleteAPIKey = async (token: string) => {
 	let error = null;
 
 	const res = await fetch(`${WEBUI_API_BASE_URL}/auths/api_key`, {
diff --git a/src/lib/components/chat/Settings/Account.svelte b/src/lib/components/chat/Settings/Account.svelte
index f368d90f9..916cd811a 100644
--- a/src/lib/components/chat/Settings/Account.svelte
+++ b/src/lib/components/chat/Settings/Account.svelte
@@ -3,7 +3,7 @@
 	import { onMount, getContext } from 'svelte';
 
 	import { user } from '$lib/stores';
-	import { updateUserProfile, createApiKey } from '$lib/apis/auths';
+	import { updateUserProfile, createAPIKey, getAPIKey } from '$lib/apis/auths';
 
 	import UpdatePassword from './Account/UpdatePassword.svelte';
 	import { getGravatarUrl } from '$lib/apis/utils';
@@ -15,11 +15,14 @@
 
 	let profileImageUrl = '';
 	let name = '';
+
 	let showJWTToken = false;
 	let JWTTokenCopied = false;
-	let showApiKey = false;
-	let ApiKeyCopied = false;
-	let localApiKey = localStorage.apiKey;
+
+	let APIKey = '';
+	let showAPIKey = false;
+	let APIKeyCopied = false;
+
 	let profileImageInputElement: HTMLInputElement;
 
 	const submitHandler = async () => {
@@ -36,20 +39,23 @@
 		return false;
 	};
 
-	const createApiKeyHandler = async () => {
-		const apiKey = await createApiKey(localStorage.token);
-		if (apiKey) {
-			localApiKey = apiKey['api_key'];
-			localStorage.apiKey = localApiKey;
+	const createAPIKeyHandler = async () => {
+		APIKey = await createAPIKey(localStorage.token);
+		if (APIKey) {
 			toast.success($i18n.t('API Key created.'));
 		} else {
 			toast.error($i18n.t('Failed to create API Key.'));
 		}
 	};
 
-	onMount(() => {
+	onMount(async () => {
 		name = $user.name;
 		profileImageUrl = $user.profile_image_url;
+
+		APIKey = await getAPIKey(localStorage.token).catch((error) => {
+			console.log(error);
+			return '';
+		});
 	});
 </script>
 
@@ -293,18 +299,18 @@
 					<div class="flex w-full">
 						<input
 							class="w-full rounded-l-lg py-1.5 pl-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
-							type={showApiKey ? 'text' : 'password'}
-							value={localApiKey}
+							type={showAPIKey ? 'text' : 'password'}
+							value={APIKey}
 							disabled
 						/>
 
 						<button
 							class="px-2 transition rounded-r-lg dark:bg-gray-800"
 							on:click={() => {
-								showApiKey = !showApiKey;
+								showAPIKey = !showAPIKey;
 							}}
 						>
-							{#if showApiKey}
+							{#if showAPIKey}
 								<svg
 									xmlns="http://www.w3.org/2000/svg"
 									viewBox="0 0 16 16"
@@ -341,14 +347,14 @@
 					<button
 						class="ml-1.5 px-1.5 py-1 hover:bg-gray-800 transition rounded-lg"
 						on:click={() => {
-							copyToClipboard(localApiKey);
-							ApiKeyCopied = true;
+							copyToClipboard(APIKey);
+							APIKeyCopied = true;
 							setTimeout(() => {
-								ApiKeyCopied = false;
+								APIKeyCopied = false;
 							}, 2000);
 						}}
 					>
-						{#if ApiKeyCopied}
+						{#if APIKeyCopied}
 							<svg
 								xmlns="http://www.w3.org/2000/svg"
 								viewBox="0 0 20 20"
@@ -385,7 +391,7 @@
 					<button
 						class=" px-1.5 py-1 hover:bg-gray-800 transition rounded-lg"
 						on:click={() => {
-							createApiKeyHandler();
+							createAPIKeyHandler();
 						}}
 					>
 						<svg
diff --git a/src/routes/auth/+page.svelte b/src/routes/auth/+page.svelte
index 4d84715c7..23dbc7eea 100644
--- a/src/routes/auth/+page.svelte
+++ b/src/routes/auth/+page.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { goto } from '$app/navigation';
-	import { userSignIn, userSignUp, getApiKey } from '$lib/apis/auths';
+	import { userSignIn, userSignUp } from '$lib/apis/auths';
 	import Spinner from '$lib/components/common/Spinner.svelte';
 	import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
 	import { WEBUI_NAME, config, user } from '$lib/stores';
@@ -27,17 +27,6 @@
 		}
 	};
 
-	const setApiKey = async (token) => {
-		const apiKey = await getApiKey(token).catch((error) => {
-			toast.error(error);
-			return null;
-		});
-
-		if (apiKey) {
-			localStorage.apiKey = apiKey['api-key'];
-		}
-	};
-
 	const signInHandler = async () => {
 		const sessionUser = await userSignIn(email, password).catch((error) => {
 			toast.error(error);