59 lines
1.6 KiB
HTML
59 lines
1.6 KiB
HTML
<div class="login-container">
|
|
<div class="card-container">
|
|
<mat-card class="login-card">
|
|
<h1>Log in</h1>
|
|
<p>Continue to OpenVidu Meet</p>
|
|
<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" 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]="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"
|
|
>
|
|
Login
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
@if (loginErrorMessage) {
|
|
<mat-error class="login-error">{{ loginErrorMessage }}</mat-error>
|
|
}
|
|
</mat-card>
|
|
<div class="signup-section">
|
|
<div>
|
|
<img src="https://openvidu.io/assets/images/openvidu_white_bg_transp.png" alt="Sign Up" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|