neoris/openvidu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

frontend: enhance login form with password visibility toggle and improved input handling

Browse Source
This commit is contained in:
juancarmore 2025-08-22 22:47:17 +02:00
parent e1fd2a343b
commit a2e78afda5
2 changed files with 32 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/projects/shared-meet-components/src/lib/pages/login/login.component.html
View File

@ -6,18 +6,40 @@
<form [formGroup]="loginForm" (ngSubmit)="login()" id="login-form">
<mat-form-field class="form-input" appearance="fill">
<mat-label>Username</mat-label>
<input matInput formControlName="username" required id="username-input" />
<input matInput formControlName="username" placeholder="Enter your username" id="username-input" />
<mat-icon matPrefix>person</mat-icon>
</mat-form-field>
<mat-form-field class="form-input" appearance="fill">
<mat-label>Password</mat-label>
<input matInput type="password" formControlName="password" required id="password-input" />
<input
matInput
[type]="showPassword ? 'text' : 'password'"
formControlName="password"
placeholder="Enter your password"
id="password-input"
/>
<mat-icon matPrefix>lock</mat-icon>
<button
mat-icon-button
matSuffix
type="button"
class="input-btn"
(click)="showPassword = !showPassword"
matTooltip="{{ showPassword ? 'Hide password' : 'Show password' }}"
>
<mat-icon>{{ showPassword ? 'visibility_off' : 'visibility' }}</mat-icon>
</button>
</mat-form-field>
<div class="login-button">
<button mat-raised-button color="primary" type="submit" [disabled]="loginForm.invalid" id="login-button">
<button
mat-raised-button
color="primary"
type="submit"
[disabled]="loginForm.invalid"
id="login-button"
>
Login
</button>
</div>

9
frontend/projects/shared-meet-components/src/lib/pages/login/login.component.ts
View File

@ -6,6 +6,7 @@ import { MatCardModule } from '@angular/material/card';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatTooltipModule } from '@angular/material/tooltip';
import { ActivatedRoute, RouterModule } from '@angular/router';
import { AuthService, NavigationService } from '@lib/services';
@ -20,6 +21,7 @@ import { AuthService, NavigationService } from '@lib/services';
FormsModule,
MatCardModule,
MatIconModule,
MatTooltipModule,
RouterModule
],
templateUrl: './login.component.html',
@ -27,10 +29,13 @@ import { AuthService, NavigationService } from '@lib/services';
})
export class LoginComponent implements OnInit {
loginForm = new FormGroup({
username: new FormControl('', [Validators.required, Validators.minLength(4)]),
password: new FormControl('', [Validators.required, Validators.minLength(4)])
username: new FormControl('', [Validators.required]),
password: new FormControl('', [Validators.required])
});
showPassword = false;
loginErrorMessage: string | undefined;
redirectTo = ''; // By default, redirect to home page
constructor(