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

Merge pull request #16246 from silentoplayz/sensitiveinput-password-fields

Browse Source 
feat: Add password visibility toggle to password fields with SensitiveInput.svelte component
This commit is contained in:
Tim Jaeryang Baek
2025-08-04 10:51:39 +04:00
committed by GitHub
parent 7c29084a19 56eeed6277
commit 01320d99d6
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 { generateInitialsImage } from '$lib/utils';
import XMark from '$lib/components/icons/XMark.svelte';
import SensitiveInput from '$lib/components/common/SensitiveInput.svelte';
const i18n = getContext('i18n');
const dispatch = createEventDispatcher();
@@ -224,12 +225,13 @@
<div class=" mb-1 text-xs text-gray-500">{$i18n.t('Password')}</div>
<div class="flex-1">
<input
<SensitiveInput
class="w-full text-sm bg-transparent disabled:text-gray-500 dark:disabled:text-gray-500 outline-hidden"
type="password"
bind:value={_user.password}
placeholder={$i18n.t('Enter Your Password')}
autocomplete="off"
required
/>
</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 localizedFormat from 'dayjs/plugin/localizedFormat';
import XMark from '$lib/components/icons/XMark.svelte';
import SensitiveInput from '$lib/components/common/SensitiveInput.svelte';
const i18n = getContext('i18n');
const dispatch = createEventDispatcher();
@@ -139,12 +140,13 @@
<div class=" mb-1 text-xs text-gray-500">{$i18n.t('New Password')}</div>
<div class="flex-1">
<input
<SensitiveInput
class="w-full text-sm bg-transparent outline-hidden"
type="password"
placeholder={$i18n.t('Enter New Password')}
bind:value={_user.password}
autocomplete="new-password"
required
/>
</div>
</div>

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

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

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

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