refac: disable jwt display for non-admin users

src/lib/components/chat/Settings/Account.svelte

@@ -87,7 +87,7 @@
 </script>
 
 <div class="flex flex-col h-full justify-between text-sm">
-	<div class=" space-y-3 overflow-y-scroll max-h-[28rem] lg:max-h-full">
+	<div class=" overflow-y-scroll max-h-[28rem] lg:max-h-full">
 		<input
 			id="profile-image-input"
 			bind:this={profileImageInputElement}
@@ -236,7 +236,7 @@
 
 					<div class="flex-1">
 						<input
-							class="w-full text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden"
+							class="w-full text-sm dark:text-gray-300 bg-transparent outline-hidden"
 							type="text"
 							bind:value={name}
 							required
@@ -265,98 +265,46 @@
 			{/if}
 		</div>
 
-		<div class="py-0.5">
-			<UpdatePassword />
-		</div>
-
 		<hr class="border-gray-50 dark:border-gray-850 my-2" />
 
-		<div class="flex justify-between items-center text-sm">
-			<div class="  font-medium">{$i18n.t('API keys')}</div>
-			<button
-				class=" text-xs font-medium text-gray-500"
-				type="button"
-				on:click={() => {
-					showAPIKeys = !showAPIKeys;
-				}}>{showAPIKeys ? $i18n.t('Hide') : $i18n.t('Show')}</button
-			>
+		<div class="my-2">
+			<UpdatePassword />
 		</div>
 
-		{#if showAPIKeys}
-			<div class="flex flex-col gap-4">
-				<div class="justify-between w-full">
-					<div class="flex justify-between w-full">
-						<div class="self-center text-xs font-medium">{$i18n.t('JWT Token')}</div>
-					</div>
+		{#if ($config?.features?.enable_api_key ?? true) || $user?.role === 'admin'}
+			<div class="flex justify-between items-center text-sm">
+				<div class="  font-medium">{$i18n.t('API keys')}</div>
+				<button
+					class=" text-xs font-medium text-gray-500"
+					type="button"
+					on:click={() => {
+						showAPIKeys = !showAPIKeys;
+					}}>{showAPIKeys ? $i18n.t('Hide') : $i18n.t('Show')}</button
+				>
+			</div>
 
-					<div class="flex mt-2">
-						<SensitiveInput value={localStorage.token} readOnly={true} />
+			{#if showAPIKeys}
+				<div class="flex flex-col gap-4">
+					{#if $user?.role === 'admin'}
+						<div class="justify-between w-full">
+							<div class="flex justify-between w-full">
+								<div class="self-center text-xs font-medium">{$i18n.t('JWT Token')}</div>
+							</div>
 
-						<button
-							class="ml-1.5 px-1.5 py-1 dark:hover:bg-gray-850 transition rounded-lg"
-							on:click={() => {
-								copyToClipboard(localStorage.token);
-								JWTTokenCopied = true;
-								setTimeout(() => {
-									JWTTokenCopied = false;
-								}, 2000);
-							}}
-						>
-							{#if JWTTokenCopied}
-								<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>
-					</div>
-				</div>
-				{#if $config?.features?.enable_api_key ?? true}
-					<div class="justify-between w-full">
-						<div class="flex justify-between w-full">
-							<div class="self-center text-xs font-medium">{$i18n.t('API Key')}</div>
-						</div>
-						<div class="flex mt-2">
-							{#if APIKey}
-								<SensitiveInput value={APIKey} readOnly={true} />
+							<div class="flex mt-2">
+								<SensitiveInput value={localStorage.token} 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;
+										copyToClipboard(localStorage.token);
+										JWTTokenCopied = true;
 										setTimeout(() => {
-											APIKeyCopied = false;
+											JWTTokenCopied = false;
 										}, 2000);
 									}}
 								>
-									{#if APIKeyCopied}
+									{#if JWTTokenCopied}
 										<svg
 											xmlns="http://www.w3.org/2000/svg"
 											viewBox="0 0 20 20"
@@ -389,46 +337,105 @@
 										</svg>
 									{/if}
 								</button>
+							</div>
+						</div>
+					{/if}
+
+					{#if $config?.features?.enable_api_key ?? true}
+						<div class="justify-between w-full">
+							{#if $user?.role === 'admin'}
+								<div class="flex justify-between w-full">
+									<div class="self-center text-xs font-medium">{$i18n.t('API Key')}</div>
+								</div>
+							{/if}
+							<div class="flex mt-2">
+								{#if APIKey}
+									<SensitiveInput value={APIKey} readOnly={true} />
 
-								<Tooltip content={$i18n.t('Create new key')}>
 									<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={() => {
-											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>
-								</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}
+									<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>
 						</div>
-					</div>
-				{/if}
-			</div>
+					{/if}
+				</div>
+			{/if}
 		{/if}
 	</div>