Mirrors/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2025-12-15 11:27:46 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add password visibility toggle to password fields w SensitiveInput.svelte component

Browse Source
This commit is contained in:
silentoplayz
2025-08-03 16:07:12 -04:00
parent 7c29084a19
commit 56eeed6277
4 changed files with 14 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/lib/components/admin/Users/UserList/AddUserModal.svelte
View File

@@ -10,6 +10,7 @@
import Modal from '$lib/components/common/Modal.svelte'; import Modal from '$lib/components/common/Modal.svelte';
import { generateInitialsImage } from '$lib/utils'; import { generateInitialsImage } from '$lib/utils';
import XMark from '$lib/components/icons/XMark.svelte'; import XMark from '$lib/components/icons/XMark.svelte';
import SensitiveInput from '$lib/components/common/SensitiveInput.svelte';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@@ -224,12 +225,13 @@
<div class=" mb-1 text-xs text-gray-500">{$i18n.t('Password')}</div> <div class=" mb-1 text-xs text-gray-500">{$i18n.t('Password')}</div>
<div class="flex-1"> <div class="flex-1">
<input <SensitiveInput
class="w-full text-sm bg-transparent disabled:text-gray-500 dark:disabled:text-gray-500 outline-hidden" class="w-full text-sm bg-transparent disabled:text-gray-500 dark:disabled:text-gray-500 outline-hidden"
type="password" type="password"
bind:value={_user.password} bind:value={_user.password}
placeholder={$i18n.t('Enter Your Password')} placeholder={$i18n.t('Enter Your Password')}
autocomplete="off" autocomplete="off"
required
/> />
</div> </div>
</div> </div>

4
src/lib/components/admin/Users/UserList/EditUserModal.svelte
View File

@@ -9,6 +9,7 @@
import Modal from '$lib/components/common/Modal.svelte'; import Modal from '$lib/components/common/Modal.svelte';
import localizedFormat from 'dayjs/plugin/localizedFormat'; import localizedFormat from 'dayjs/plugin/localizedFormat';
import XMark from '$lib/components/icons/XMark.svelte'; import XMark from '$lib/components/icons/XMark.svelte';
import SensitiveInput from '$lib/components/common/SensitiveInput.svelte';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@@ -139,12 +140,13 @@
<div class=" mb-1 text-xs text-gray-500">{$i18n.t('New Password')}</div> <div class=" mb-1 text-xs text-gray-500">{$i18n.t('New Password')}</div>
<div class="flex-1"> <div class="flex-1">
<input <SensitiveInput
class="w-full text-sm bg-transparent outline-hidden" class="w-full text-sm bg-transparent outline-hidden"
type="password" type="password"
placeholder={$i18n.t('Enter New Password')} placeholder={$i18n.t('Enter New Password')}
bind:value={_user.password} bind:value={_user.password}
autocomplete="new-password" autocomplete="new-password"
required
/> />
</div> </div>
</div> </div>

9
src/lib/components/chat/Settings/Account/UpdatePassword.svelte
View File

@@ -2,6 +2,7 @@
import { getContext } from 'svelte'; import { getContext } from 'svelte';
import { toast } from 'svelte-sonner'; import { toast } from 'svelte-sonner';
import { updateUserPassword } from '$lib/apis/auths'; import { updateUserPassword } from '$lib/apis/auths';
import SensitiveInput from '$lib/components/common/SensitiveInput.svelte';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
@@ -59,8 +60,8 @@
<div class=" mb-1 text-xs text-gray-500">{$i18n.t('Current Password')}</div> <div class=" mb-1 text-xs text-gray-500">{$i18n.t('Current Password')}</div>
<div class="flex-1"> <div class="flex-1">
<input <SensitiveInput
class="w-full bg-transparent dark:text-gray-300 outline-hidden placeholder:opacity-30" class="w-full bg-transparent text-sm dark:text-gray-300 outline-hidden placeholder:opacity-30"
type="password" type="password"
bind:value={currentPassword} bind:value={currentPassword}
placeholder={$i18n.t('Enter your current password')} placeholder={$i18n.t('Enter your current password')}
@@ -74,7 +75,7 @@
<div class=" mb-1 text-xs text-gray-500">{$i18n.t('New Password')}</div> <div class=" mb-1 text-xs text-gray-500">{$i18n.t('New Password')}</div>
<div class="flex-1"> <div class="flex-1">
<input <SensitiveInput
class="w-full bg-transparent text-sm dark:text-gray-300 outline-hidden placeholder:opacity-30" class="w-full bg-transparent text-sm dark:text-gray-300 outline-hidden placeholder:opacity-30"
type="password" type="password"
bind:value={newPassword} bind:value={newPassword}
@@ -89,7 +90,7 @@
<div class=" mb-1 text-xs text-gray-500">{$i18n.t('Confirm Password')}</div> <div class=" mb-1 text-xs text-gray-500">{$i18n.t('Confirm Password')}</div>
<div class="flex-1"> <div class="flex-1">
<input <SensitiveInput
class="w-full bg-transparent text-sm dark:text-gray-300 outline-hidden placeholder:opacity-30" class="w-full bg-transparent text-sm dark:text-gray-300 outline-hidden placeholder:opacity-30"
type="password" type="password"
bind:value={newPasswordConfirm} bind:value={newPasswordConfirm}

5
src/routes/auth/+page.svelte
View File

@@ -18,6 +18,7 @@
import Spinner from '$lib/components/common/Spinner.svelte'; import Spinner from '$lib/components/common/Spinner.svelte';
import OnBoarding from '$lib/components/OnBoarding.svelte'; import OnBoarding from '$lib/components/OnBoarding.svelte';
import SensitiveInput from '$lib/components/common/SensitiveInput.svelte';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
@@ -306,7 +307,7 @@
<label for="password" class="text-sm font-medium text-left mb-1 block" <label for="password" class="text-sm font-medium text-left mb-1 block"
>{$i18n.t('Password')}</label >{$i18n.t('Password')}</label
> >
<input <SensitiveInput
bind:value={password} bind:value={password}
type="password" type="password"
id="password" id="password"
@@ -325,7 +326,7 @@
class="text-sm font-medium text-left mb-1 block" class="text-sm font-medium text-left mb-1 block"
>{$i18n.t('Confirm Password')}</label >{$i18n.t('Confirm Password')}</label
> >
<input <SensitiveInput
bind:value={confirmPassword} bind:value={confirmPassword}
type="password" type="password"
id="confirm-password" id="confirm-password"