frontend: refactor login component to simplify structure, enhance styling, and improve error handling
This commit is contained in:
juancarmore
parent
76178a9b7f
commit
53779278fa
@ -1,77 +1,36 @@
|
||||
<div class="section1" [style]="{ '--background-image-url': 'url(' + backgroundImageUrl + ')' }">
|
||||
<mat-toolbar id="header"> </mat-toolbar>
|
||||
<div class="openvidu-slogan-container">
|
||||
<a href="https://openvidu.io/" target="_blank">
|
||||
<img id="form-img" [src]="openviduLogoUrl" />
|
||||
</a>
|
||||
<h4 id="slogan-text">Videoconference rooms in one click</h4>
|
||||
</div>
|
||||
<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()">
|
||||
<mat-form-field class="form-input" appearance="fill">
|
||||
<mat-label>Username</mat-label>
|
||||
<input matInput formControlName="username" required />
|
||||
<mat-icon matPrefix>person</mat-icon>
|
||||
</mat-form-field>
|
||||
|
||||
<div class="form-container">
|
||||
<div class="grid">
|
||||
<form [formGroup]="loginForm" novalidate (ngSubmit)="login()" id="form-login" class="form login">
|
||||
<div class="form-field" id="login-username">
|
||||
<label for="login-username" [ngClass]="{ error: loginErrorMessage }">
|
||||
<mat-icon matTooltip="Username">person</mat-icon>
|
||||
<span class="hidden">Username</span>
|
||||
</label>
|
||||
<input
|
||||
formControlName="username"
|
||||
autocomplete="off"
|
||||
type="text"
|
||||
name="username"
|
||||
class="form-input"
|
||||
placeholder="Username"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-field" id="login-password">
|
||||
<label for="login-password" [ngClass]="{ error: loginErrorMessage }">
|
||||
<mat-icon matTooltip="Password">lock</mat-icon>
|
||||
<span class="hidden">Password</span>
|
||||
</label>
|
||||
<input
|
||||
formControlName="password"
|
||||
type="password"
|
||||
name="password"
|
||||
class="form-input"
|
||||
placeholder="Password"
|
||||
/>
|
||||
</div>
|
||||
@if (loginErrorMessage) {
|
||||
<div class="loginError" id="login-error">
|
||||
{{ loginErrorMessage }}
|
||||
@if (invalidRole) {
|
||||
<a [routerLink]="'/console/login'">go to the admin console page</a>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
<div class="form-field">
|
||||
<button mat-button id="join-btn" type="submit" [disabled]="loginForm.invalid">Login</button>
|
||||
<mat-form-field class="form-input" appearance="fill">
|
||||
<mat-label>Password</mat-label>
|
||||
<input matInput type="password" formControlName="password" required />
|
||||
<mat-icon matPrefix>lock</mat-icon>
|
||||
</mat-form-field>
|
||||
|
||||
<div class="login-button">
|
||||
<button mat-raised-button color="primary" type="submit" [disabled]="loginForm.invalid">
|
||||
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>
|
||||
|
||||
<mat-toolbar class="footer">
|
||||
<span>
|
||||
Photo by
|
||||
<a
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
href="https://unsplash.com/@danielleone?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText"
|
||||
>
|
||||
Daniel Leone
|
||||
</a>
|
||||
on
|
||||
<a
|
||||
href="https://unsplash.com/s/photos/mountain?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText"
|
||||
target="_blank"
|
||||
>
|
||||
Unsplash
|
||||
</a>
|
||||
</span>
|
||||
<div id="meet-version">
|
||||
<span>{{ version }}</span>
|
||||
</div>
|
||||
</mat-toolbar>
|
||||
</div>
|
||||
|
||||
@ -1,260 +1,146 @@
|
||||
$loginBorderRadius: 0.35rem;
|
||||
$loginColor: #e6e6e6;
|
||||
$loginError: #770000;
|
||||
$loginInputBackgroundColor: #434a52;
|
||||
$loginInputHoverBackgroundColor: #3c4249;
|
||||
$loginLabelBackgroundColor: #363b41;
|
||||
$loginSubmitBackgroundColor: #0087a9;
|
||||
$loginSubmitDisabledBackgroundColor: #264b55;
|
||||
|
||||
$loginSubmitColor: #eee;
|
||||
$loginSubmitDisabledColor: #bdbdbd;
|
||||
|
||||
$loginSubmitHoverBackgroundColor: #006a85;
|
||||
$iconFill: #606468;
|
||||
$formGap: 0.375rem;
|
||||
|
||||
.section1 {
|
||||
background:
|
||||
linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)),
|
||||
var(--background-image-url) top center no-repeat;
|
||||
background-size: cover;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
color: $loginColor;
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#header,
|
||||
.footer {
|
||||
background-color: transparent;
|
||||
color: $loginColor;
|
||||
}
|
||||
|
||||
.loginError {
|
||||
font-size: 14px;
|
||||
color: $loginError;
|
||||
text-shadow: 0.2px 0px #ffffff;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.loginError mat-icon {
|
||||
vertical-align: bottom;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.loginError a {
|
||||
color: $loginError;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
font-size: 9px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
color: $loginColor;
|
||||
}
|
||||
|
||||
#meet-version,
|
||||
#logout-content {
|
||||
right: 15px;
|
||||
position: absolute;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 25px;
|
||||
font-weight: 300;
|
||||
color: #ffffff;
|
||||
position: relative;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
/* Extra small devices (phones, 600px and down) */
|
||||
@media only screen and (max-width: 600px) {
|
||||
#header_img,
|
||||
.ovVersion,
|
||||
.footer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.openvidu-slogan-container {
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
||||
#form-img {
|
||||
max-width: 290px;
|
||||
margin-right: 10px;
|
||||
margin-top: 10px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
/* Extra large devices (large laptops and desktops, 1200px and up) */
|
||||
@media only screen and (min-width: 1200px) {
|
||||
.section1 {
|
||||
background-attachment: fixed;
|
||||
}
|
||||
}
|
||||
|
||||
.grid {
|
||||
inline-size: 90%;
|
||||
margin-inline: auto;
|
||||
max-inline-size: 26rem;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.icons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icon {
|
||||
block-size: 1em;
|
||||
display: inline-block;
|
||||
fill: $iconFill;
|
||||
inline-size: 1em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
input {
|
||||
background-image: none;
|
||||
border: 0;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
body {
|
||||
margin: 0;
|
||||
outline: 0;
|
||||
padding: 0;
|
||||
transition: background-color 0.3s;
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f8fafa;
|
||||
}
|
||||
|
||||
input[type='submit'] {
|
||||
cursor: pointer;
|
||||
.login-container {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.form {
|
||||
display: grid;
|
||||
gap: $formGap;
|
||||
}
|
||||
|
||||
.form input[type='password'],
|
||||
.form input[type='text'],
|
||||
.form button[type='submit'] {
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
||||
.form-field {
|
||||
.card-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 75%;
|
||||
margin: auto;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
padding: 40px;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
// box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: none;
|
||||
border-top-right-radius: 0px;
|
||||
border-bottom-right-radius: 0px;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.login {
|
||||
color: $loginColor;
|
||||
}
|
||||
|
||||
.login label.error {
|
||||
background-color: $loginError;
|
||||
}
|
||||
.login label,
|
||||
.login input[type='text'],
|
||||
.login input[type='password'] {
|
||||
border-radius: $loginBorderRadius;
|
||||
padding: 0.85rem;
|
||||
}
|
||||
#room-id-input {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.login button[type='submit'] {
|
||||
border-radius: $loginBorderRadius;
|
||||
padding: 0.4rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.login button:disabled[type='submit'] {
|
||||
cursor: auto;
|
||||
color: $loginSubmitDisabledColor !important;
|
||||
background-color: $loginSubmitDisabledBackgroundColor !important;
|
||||
}
|
||||
|
||||
.login label {
|
||||
background-color: $loginLabelBackgroundColor;
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
padding-inline: 1.25rem;
|
||||
}
|
||||
|
||||
.login input[type='password'],
|
||||
.login input[type='text'] {
|
||||
background-color: $loginInputBackgroundColor;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.login input[type='password']:focus,
|
||||
.login input[type='password']:hover,
|
||||
.login input[type='text']:focus,
|
||||
.login input[type='text']:hover {
|
||||
background-color: $loginInputHoverBackgroundColor;
|
||||
}
|
||||
|
||||
.login button[type='submit'] {
|
||||
background-color: $loginSubmitBackgroundColor;
|
||||
color: $loginSubmitColor;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.login button[type='submit']:focus,
|
||||
.login button[type='submit']:hover {
|
||||
background-color: $loginSubmitHoverBackgroundColor;
|
||||
}
|
||||
#clear-room-id-btn {
|
||||
height: auto;
|
||||
background-color: $loginInputBackgroundColor;
|
||||
border-radius: 0;
|
||||
color: $loginColor;
|
||||
mat-icon {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
#room-id-generator-btn {
|
||||
height: auto;
|
||||
background-color: $loginInputBackgroundColor;
|
||||
border-radius: $loginBorderRadius;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
color: $loginColor;
|
||||
mat-icon {
|
||||
vertical-align: middle;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $loginInputHoverBackgroundColor;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-block: 1.5rem;
|
||||
}
|
||||
|
||||
.text--center {
|
||||
.login-button {
|
||||
text-align: center;
|
||||
button {
|
||||
width: 100%;
|
||||
background-color: #0088aa;
|
||||
color: #ffffff;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
}
|
||||
.login-button button:hover {
|
||||
background-color: #00777f;
|
||||
}
|
||||
|
||||
.login-button button:disabled {
|
||||
background-color: #a19f9f;
|
||||
}
|
||||
|
||||
.login-error {
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.signup-section {
|
||||
display: flex;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
background-color: #4d4d4d;
|
||||
padding: 20px;
|
||||
flex: 1;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
max-width: 400px;
|
||||
max-height: 400px;
|
||||
border-top-right-radius: 12px;
|
||||
border-bottom-right-radius: 12px;
|
||||
// box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.signup-section img {
|
||||
max-width: 80%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #6a5acd;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
/* Hide .signup-section on medium screens */
|
||||
.signup-section {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card-container {
|
||||
width: 75%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
border-radius: 12px;
|
||||
height: auto;
|
||||
// box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.15);
|
||||
padding: 40px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.login-button button {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small devices (landscape phones, 576px and up) */
|
||||
@media (max-width: 576px) {
|
||||
.login-card {
|
||||
padding: 40px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.login-button button {
|
||||
font-size: 0.85em;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.card-container {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.signup-section {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { LoginComponent } from './login.component';
|
||||
|
||||
describe('LoginComponent', () => {
|
||||
|
||||
@ -1,47 +1,45 @@
|
||||
import { NgClass } from '@angular/common';
|
||||
import { HttpErrorResponse } from '@angular/common/http';
|
||||
import { Component } from '@angular/core';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
|
||||
import { MatButton } from '@angular/material/button';
|
||||
import { MatIcon } from '@angular/material/icon';
|
||||
import { MatToolbar } from '@angular/material/toolbar';
|
||||
import { MatTooltip } from '@angular/material/tooltip';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
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 { ActivatedRoute, Router, RouterModule } from '@angular/router';
|
||||
import { UserRole } from 'shared-meet-components';
|
||||
import { AuthService, ContextService } from '../../services/index';
|
||||
import { AuthService } from '../../services/index';
|
||||
|
||||
@Component({
|
||||
selector: 'app-login',
|
||||
selector: 'ov-login',
|
||||
standalone: true,
|
||||
imports: [MatToolbar, MatTooltip, MatIcon, FormsModule, ReactiveFormsModule, NgClass, MatButton, RouterModule],
|
||||
imports: [
|
||||
MatFormFieldModule,
|
||||
ReactiveFormsModule,
|
||||
MatInputModule,
|
||||
MatButtonModule,
|
||||
FormsModule,
|
||||
MatCardModule,
|
||||
MatIconModule,
|
||||
RouterModule
|
||||
],
|
||||
templateUrl: './login.component.html',
|
||||
styleUrl: './login.component.scss'
|
||||
})
|
||||
export class LoginComponent {
|
||||
version = '';
|
||||
openviduLogoUrl = '';
|
||||
backgroundImageUrl = '';
|
||||
|
||||
export class LoginComponent implements OnInit {
|
||||
loginForm = new FormGroup({
|
||||
username: new FormControl('', [Validators.required, Validators.minLength(4)]),
|
||||
password: new FormControl('', [Validators.required, Validators.minLength(4)])
|
||||
});
|
||||
loginErrorMessage: string | undefined;
|
||||
invalidRole = false;
|
||||
redirectTo = ''; // By default, redirect to RoomCreatorComponent
|
||||
redirectTo = 'console'; // By default, redirect to the console page
|
||||
|
||||
constructor(
|
||||
private router: Router,
|
||||
private route: ActivatedRoute,
|
||||
private authService: AuthService,
|
||||
private contextService: ContextService
|
||||
private authService: AuthService
|
||||
) {}
|
||||
|
||||
async ngOnInit() {
|
||||
this.version = this.contextService.getVersion();
|
||||
this.openviduLogoUrl = this.contextService.getOpenViduLogoUrl();
|
||||
this.backgroundImageUrl = this.contextService.getBackgroundImageUrl();
|
||||
|
||||
ngOnInit() {
|
||||
this.route.queryParams.subscribe((params) => {
|
||||
if (params['redirectTo']) {
|
||||
this.redirectTo = params['redirectTo'];
|
||||
@ -56,16 +54,6 @@ export class LoginComponent {
|
||||
try {
|
||||
await this.authService.login(username!, password!);
|
||||
|
||||
// Check if the user has the expected role
|
||||
const role = await this.authService.getUserRole();
|
||||
if (role !== UserRole.USER) {
|
||||
await this.authService.logout();
|
||||
this.invalidRole = true;
|
||||
this.loginErrorMessage =
|
||||
'You have been authenticated as an admin, but admin users cannot join meetings. Please log in with a user account or';
|
||||
return;
|
||||
}
|
||||
|
||||
let urlTree = this.router.parseUrl(this.redirectTo);
|
||||
this.router.navigateByUrl(urlTree);
|
||||
} catch (error) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user