mirror of
https://github.com/open-webui/open-webui.git
synced 2025-12-12 04:15:25 +00:00
refac: account setting styling
This commit is contained in:
Timothy Jaeryang Baek
parent
01f438c3fe
commit
8f51c11bc2
1 changed files with 74 additions and 57 deletions
|
|
@ -13,6 +13,7 @@
|
|||
import Plus from '$lib/components/icons/Plus.svelte';
|
||||
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||
import SensitiveInput from '$lib/components/common/SensitiveInput.svelte';
|
||||
import Textarea from '$lib/components/common/Textarea.svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
|
|
@ -21,6 +22,7 @@
|
|||
|
||||
let profileImageUrl = '';
|
||||
let name = '';
|
||||
let bio = '';
|
||||
|
||||
let webhookUrl = '';
|
||||
let showAPIKeys = false;
|
||||
|
|
@ -152,11 +154,19 @@
|
|||
/>
|
||||
|
||||
<div class="space-y-1">
|
||||
<div>
|
||||
<div class="text-base font-medium">{$i18n.t('Your Account')}</div>
|
||||
|
||||
<div class="text-xs text-gray-500 mt-0.5">
|
||||
{$i18n.t('Manage your account information.')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class=" text-sm font-medium">{$i18n.t('Account')}</div> -->
|
||||
|
||||
<div class="flex space-x-5">
|
||||
<div class="flex flex-col">
|
||||
<div class="self-center mt-2">
|
||||
<div class="flex space-x-5 mt-4">
|
||||
<div class="flex flex-col self-start group">
|
||||
<div class="self-center flex">
|
||||
<button
|
||||
class="relative rounded-full dark:bg-gray-700"
|
||||
type="button"
|
||||
|
|
@ -167,18 +177,16 @@
|
|||
<img
|
||||
src={profileImageUrl !== '' ? profileImageUrl : generateInitialsImage(name)}
|
||||
alt="profile"
|
||||
class=" rounded-full size-16 object-cover"
|
||||
class=" rounded-full size-14 md:size-20 object-cover"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="absolute flex justify-center rounded-full bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-gray-700 bg-fixed opacity-0 transition duration-300 ease-in-out hover:opacity-50"
|
||||
>
|
||||
<div class="my-auto text-gray-100">
|
||||
<div class="absolute bottom-0 right-0 opacity-0 group-hover:opacity-100 transition">
|
||||
<div class="p-1 rounded-full bg-white text-black border-gray-100 shadow">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
class="w-5 h-5"
|
||||
class="size-3"
|
||||
>
|
||||
<path
|
||||
d="m2.695 14.762-1.262 3.155a.5.5 0 0 0 .65.65l3.155-1.262a4 4 0 0 0 1.343-.886L17.5 5.501a2.121 2.121 0 0 0-3-3L3.58 13.419a4 4 0 0 0-.885 1.343Z"
|
||||
|
|
@ -188,14 +196,16 @@
|
|||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 flex flex-col self-center gap-0.5">
|
||||
<div class=" mb-0.5 text-sm font-medium">{$i18n.t('Profile Image')}</div>
|
||||
|
||||
<div>
|
||||
<div class="flex flex-col w-full justify-center mt-2">
|
||||
<button
|
||||
class=" text-xs text-center text-gray-800 dark:text-gray-400 rounded-full px-4 py-0.5 bg-gray-100 dark:bg-gray-850"
|
||||
class=" text-xs text-center text-gray-500 rounded-lg py-0.5 opacity-0 group-hover:opacity-100 transition-all"
|
||||
on:click={async () => {
|
||||
profileImageUrl = `${WEBUI_BASE_URL}/user.png`;
|
||||
}}>{$i18n.t('Remove')}</button
|
||||
>
|
||||
|
||||
<button
|
||||
class=" text-xs text-center text-gray-800 dark:text-gray-400 rounded-lg py-0.5 opacity-0 group-hover:opacity-100 transition-all"
|
||||
on:click={async () => {
|
||||
if (canvasPixelTest()) {
|
||||
profileImageUrl = generateInitialsImage(name);
|
||||
|
|
@ -209,73 +219,80 @@
|
|||
}
|
||||
);
|
||||
}
|
||||
}}>{$i18n.t('Use Initials')}</button
|
||||
}}>{$i18n.t('Initials')}</button
|
||||
>
|
||||
|
||||
<button
|
||||
class=" text-xs text-center text-gray-800 dark:text-gray-400 rounded-full px-4 py-0.5 bg-gray-100 dark:bg-gray-850"
|
||||
class=" text-xs text-center text-gray-800 dark:text-gray-400 rounded-lg py-0.5 opacity-0 group-hover:opacity-100 transition-all"
|
||||
on:click={async () => {
|
||||
const url = await getGravatarUrl(localStorage.token, $user?.email);
|
||||
|
||||
profileImageUrl = url;
|
||||
}}>{$i18n.t('Use Gravatar')}</button
|
||||
>
|
||||
|
||||
<button
|
||||
class=" text-xs text-center text-gray-800 dark:text-gray-400 rounded-lg px-2 py-1"
|
||||
on:click={async () => {
|
||||
profileImageUrl = `${WEBUI_BASE_URL}/user.png`;
|
||||
}}>{$i18n.t('Remove')}</button
|
||||
}}>{$i18n.t('Gravatar')}</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-1 flex-col">
|
||||
<div class=" flex-1">
|
||||
<div class="flex flex-col w-full">
|
||||
<div class=" mb-1 text-xs font-medium">{$i18n.t('Name')}</div>
|
||||
|
||||
<div class="pt-0.5">
|
||||
<div class="flex-1">
|
||||
<input
|
||||
class="w-full text-sm dark:text-gray-300 bg-transparent outline-hidden"
|
||||
type="text"
|
||||
bind:value={name}
|
||||
required
|
||||
placeholder={$i18n.t('Enter your name')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col w-full mt-2">
|
||||
<div class=" mb-1 text-xs font-medium">{$i18n.t('Bio')}</div>
|
||||
|
||||
<div class="flex-1">
|
||||
<Textarea
|
||||
className="w-full text-sm dark:text-gray-300 bg-transparent outline-hidden"
|
||||
bind:value={bio}
|
||||
minSize={100}
|
||||
placeholder={$i18n.t('Share your background and interests')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if $config?.features?.enable_user_webhooks}
|
||||
<div class="mt-2">
|
||||
<div class="flex flex-col w-full">
|
||||
<div class=" mb-1 text-xs font-medium">{$i18n.t('Name')}</div>
|
||||
<div class=" mb-1 text-xs font-medium">{$i18n.t('Notification Webhook')}</div>
|
||||
|
||||
<div class="flex-1">
|
||||
<input
|
||||
class="w-full text-sm dark:text-gray-300 bg-transparent outline-hidden"
|
||||
type="text"
|
||||
bind:value={name}
|
||||
class="w-full text-sm outline-hidden"
|
||||
type="url"
|
||||
placeholder={$i18n.t('Enter your webhook URL')}
|
||||
bind:value={webhookUrl}
|
||||
required
|
||||
placeholder={$i18n.t('Enter your name')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if $config?.features?.enable_user_webhooks}
|
||||
<div class="pt-2">
|
||||
<div class="flex flex-col w-full">
|
||||
<div class=" mb-1 text-xs font-medium">{$i18n.t('Notification Webhook')}</div>
|
||||
|
||||
<div class="flex-1">
|
||||
<input
|
||||
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden"
|
||||
type="url"
|
||||
placeholder={$i18n.t('Enter your webhook URL')}
|
||||
bind:value={webhookUrl}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<hr class="border-gray-50 dark:border-gray-850 my-2" />
|
||||
<hr class="border-gray-50 dark:border-gray-850 my-4" />
|
||||
|
||||
{#if $config?.features.enable_login_form}
|
||||
<div class="my-2">
|
||||
<div class="mt-2">
|
||||
<UpdatePassword />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if ($config?.features?.enable_api_key ?? true) || $user?.role === 'admin'}
|
||||
<div class="flex justify-between items-center text-sm mb-2">
|
||||
<div class="flex justify-between items-center text-sm mt-2">
|
||||
<div class=" font-medium">{$i18n.t('API keys')}</div>
|
||||
<button
|
||||
class=" text-xs font-medium text-gray-500"
|
||||
|
|
@ -287,7 +304,7 @@
|
|||
</div>
|
||||
|
||||
{#if showAPIKeys}
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex flex-col py-2.5">
|
||||
{#if $user?.role === 'admin'}
|
||||
<div class="justify-between w-full">
|
||||
<div class="flex justify-between w-full">
|
||||
|
|
@ -345,7 +362,7 @@
|
|||
{/if}
|
||||
|
||||
{#if $config?.features?.enable_api_key ?? true}
|
||||
<div class="justify-between w-full">
|
||||
<div class="justify-between w-full mt-2">
|
||||
{#if $user?.role === 'admin'}
|
||||
<div class="flex justify-between w-full">
|
||||
<div class="self-center text-xs font-medium mb-1">{$i18n.t('API Key')}</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue