Cutlery/Kavita
1
0
Fork 0
mirror of https://github.com/Kareadita/Kavita.git synced 2025-08-30 23:00:06 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fixing validation

Browse Source
This commit is contained in:
Robbie Davis 2025-08-03 13:45:03 -04:00
parent 4ee1377ca4
commit b13936daad
3 changed files with 77 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
UI/Web/src/app/registration/user-login/user-login.component.html
View File

@ -9,18 +9,55 @@
<div class="card-text">
<div class="mb-3">
<label for="username" class="form-label visually-hidden">{{t('username')}}</label>
<input class="form-control custom-input" formControlName="username" id="username" autocomplete="username"
type="text" autofocus [placeholder]="t('username')">
<input class="form-control custom-input"
formControlName="username"
id="username"
autocomplete="username"
type="text"
autofocus
[placeholder]="t('username')"
[class.is-invalid]="loginForm.get('username')?.invalid && loginForm.get('username')?.touched">
@if (loginForm.get('username')?.invalid && loginForm.get('username')?.touched) {
<div class="invalid-feedback">
{{t('username-required')}}
</div>
}
</div>
<div class="mb-2">
<label for="password" class="form-label visually-hidden">{{t('password')}}</label>
<input class="form-control custom-input" formControlName="password" name="password" autocomplete="current-password"
id="password" type="password" [placeholder]="t('password')">
<input class="form-control custom-input"
formControlName="password"
name="password"
autocomplete="current-password"
id="password"
type="password"
[placeholder]="t('password')"
[class.is-invalid]="loginForm.get('password')?.invalid && loginForm.get('password')?.touched">
@if (loginForm.get('password')?.invalid && loginForm.get('password')?.touched) {
<div class="invalid-feedback">
@if (loginForm.get('password')?.errors?.['required']) {
<span>{{t('password-required')}}</span>
}
@if (loginForm.get('password')?.errors?.['minlength']) {
<span>{{t('password-min-length')}}</span>
}
@if (loginForm.get('password')?.errors?.['maxlength']) {
<span>{{t('password-max-length')}}</span>
}
</div>
}
</div>
<div class="sign-in">
<button class="btn btn-outline-primary" type="submit" [disabled]="isSubmitting">{{t('submit')}}</button>
<button class="btn btn-outline-primary"
type="submit"
[disabled]="isSubmitting() || loginForm.invalid">
@if (isSubmitting()) {
<span class="spinner-border spinner-border-sm me-2"></span>
}
{{t('submit')}}
</button>
</div>
<div class="mt-3 forgot-password">
@ -31,15 +68,16 @@
}
@if (showOidcButton()) {
<hr/>
<a
class="btn btn-outline-primary mt-2 d-flex align-items-center gap-2"
href="oidc/login"
>
<app-image height="36px" width="36px" [imageUrl]="'assets/icons/open-id-connect-logo.svg'" [styles]="{'object-fit': 'contains'}"></app-image>
<app-image height="25px" width="25px" [imageUrl]="'assets/icons/open-id-connect-logo.svg'" [styles]="{'object-fit': 'contains'}"></app-image>
{{oidcConfig()?.providerName || t('oidc')}}
</a>
}
}
</ng-container>
</app-splash-container>
</ng-container>
</ng-container>

18
UI/Web/src/app/registration/user-login/user-login.component.scss
View File

@ -8,6 +8,12 @@ div {
a {
font-size: 0.8rem;
font-family: var(--login-input-font-family);
&.btn {
font-size: 1rem;
padding: 0.375rem 0.75rem;
}
}
.custom-input {
@ -31,8 +37,9 @@ a {
.invalid-feedback {
display: inline-block;
color: var(--bs-form-invalid-color);
background: var(--bs-form-invalid-color);
font-family: var(--login-input-font-family);
color: var(--login-input-color);
}
.forgot-password {
@ -52,3 +59,12 @@ a {
.text-muted {
font-size: 0.8rem;
}
hr {
border-top: 1px solid;
max-width: 80%;
text-align: center;
margin-left: auto;
margin-right: auto;
}

18
UI/Web/src/app/registration/user-login/user-login.component.ts
View File

@ -43,7 +43,7 @@ export class UserLoginComponent implements OnInit {
loginForm: FormGroup = new FormGroup({
username: new FormControl('', [Validators.required]),
password: new FormControl('', [Validators.required, Validators.maxLength(256), Validators.minLength(6), Validators.pattern("^.{6,256}$")])
password: new FormControl('', [Validators.required, Validators.maxLength(256), Validators.minLength(6)])
});
/**
@ -95,6 +95,9 @@ export class UserLoginComponent implements OnInit {
}
ngOnInit(): void {
// Ensure isSubmitting is false on component initialization
this.isSubmitting.set(false);
this.accountService.currentUser$.pipe(take(1)).subscribe(user => {
if (user) {
this.navService.handleLogin()
@ -113,6 +116,7 @@ export class UserLoginComponent implements OnInit {
}
this.isLoaded.set(true);
this.cdRef.markForCheck();
});
this.route.queryParamMap.subscribe(params => {
@ -138,20 +142,28 @@ export class UserLoginComponent implements OnInit {
login(apiKey: string = '') {
// Don't proceed if form is invalid (for regular form submission)
if (!apiKey && this.loginForm.invalid) {
this.loginForm.markAllAsTouched();
return;
}
const model = this.loginForm.getRawValue();
model.apiKey = apiKey;
this.isSubmitting.set(true);
this.accountService.login(model).subscribe({
next: () => {
this.loginForm.reset();
this.navService.handleLogin()
this.isSubmitting.set(false);
this.cdRef.markForCheck();
},
error: (err) => {
this.toastr.error(err.error);
this.isSubmitting.set(false);
this.cdRef.markForCheck();
}
});
}
}
}