helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(web): Added password field visibility toggle (#7368)

Browse source 
* Added password field visibility toggle

* improvements to password input field

* fix e2e and change tabindex

* add missing name=password

* remove unnecessary type prop

---------

Co-authored-by: Jan108 <dasJan108@gmail.com>
Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
This commit is contained in:
Jan108 2024-02-24 21:28:56 +01:00 • committed by GitHub
parent 9d3ed719e0
commit 038e69fd02
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 101 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

16
web/src/lib/components/forms/create-user-form.svelte
View file

@ -6,12 +6,13 @@
import { createEventDispatcher } from 'svelte';
import Button from '../elements/buttons/button.svelte';
import ImmichLogo from '../shared-components/immich-logo.svelte';
import PasswordField from '../shared-components/password-field.svelte';
let error: string;
let success: string;
let password = '';
let confirmPassowrd = '';
let confirmPassword = '';
let canCreateUser = false;
let quotaSize: number | undefined;
@ -20,7 +21,7 @@
$: quotaSizeWarning = quotaSize && convertToBytes(Number(quotaSize), 'GiB') > $serverInfo.diskSizeRaw;
$: {
if (password !== confirmPassowrd && confirmPassowrd.length > 0) {
if (password !== confirmPassword && confirmPassword.length > 0) {
error = 'Password does not match';
canCreateUser = false;
} else {
@ -91,19 +92,12 @@
<div class="m-4 flex flex-col gap-2">
<label class="immich-form-label" for="password">Password</label>
<input class="immich-form-input" id="password" name="password" type="password" required bind:value={password} />
<PasswordField id="password" name="password" bind:password autocomplete="new-password" />
</div>
<div class="m-4 flex flex-col gap-2">
<label class="immich-form-label" for="confirmPassword">Confirm Password</label>
<input
class="immich-form-input"
id="confirmPassword"
name="password"
type="password"
required
bind:value={confirmPassowrd}
/>
<PasswordField id="confirmPassword" bind:password={confirmPassword} autocomplete="new-password" />
</div>
<div class="m-4 flex flex-col gap-2">