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 + ')' }">
|
<div class="login-container">
|
||||||
<mat-toolbar id="header"> </mat-toolbar>
|
<div class="card-container">
|
||||||
<div class="openvidu-slogan-container">
|
<mat-card class="login-card">
|
||||||
<a href="https://openvidu.io/" target="_blank">
|
<h1>Log in</h1>
|
||||||
<img id="form-img" [src]="openviduLogoUrl" />
|
<p>Continue to OpenVidu Meet</p>
|
||||||
</a>
|
<form [formGroup]="loginForm" (ngSubmit)="login()">
|
||||||
<h4 id="slogan-text">Videoconference rooms in one click</h4>
|
<mat-form-field class="form-input" appearance="fill">
|
||||||
</div>
|
<mat-label>Username</mat-label>
|
||||||
|
<input matInput formControlName="username" required />
|
||||||
|
<mat-icon matPrefix>person</mat-icon>
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
<div class="form-container">
|
<mat-form-field class="form-input" appearance="fill">
|
||||||
<div class="grid">
|
<mat-label>Password</mat-label>
|
||||||
<form [formGroup]="loginForm" novalidate (ngSubmit)="login()" id="form-login" class="form login">
|
<input matInput type="password" formControlName="password" required />
|
||||||
<div class="form-field" id="login-username">
|
<mat-icon matPrefix>lock</mat-icon>
|
||||||
<label for="login-username" [ngClass]="{ error: loginErrorMessage }">
|
</mat-form-field>
|
||||||
<mat-icon matTooltip="Username">person</mat-icon>
|
|
||||||
<span class="hidden">Username</span>
|
<div class="login-button">
|
||||||
</label>
|
<button mat-raised-button color="primary" type="submit" [disabled]="loginForm.invalid">
|
||||||
<input
|
Login
|
||||||
formControlName="username"
|
</button>
|
||||||
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>
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<mat-toolbar class="footer">
|
@if (loginErrorMessage) {
|
||||||
<span>
|
<mat-error class="login-error">{{ loginErrorMessage }}</mat-error>
|
||||||
Photo by
|
}
|
||||||
<a
|
</mat-card>
|
||||||
rel="noopener noreferrer"
|
<div class="signup-section">
|
||||||
target="_blank"
|
<div>
|
||||||
href="https://unsplash.com/@danielleone?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText"
|
<img src="https://openvidu.io/assets/images/openvidu_white_bg_transp.png" alt="Sign Up" />
|
||||||
>
|
</div>
|
||||||
Daniel Leone
|
</div>
|
||||||
</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>
|
</div>
|
||||||
</mat-toolbar>
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,260 +1,146 @@
|
|||||||
$loginBorderRadius: 0.35rem;
|
* {
|
||||||
$loginColor: #e6e6e6;
|
box-sizing: border-box;
|
||||||
$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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#header,
|
body {
|
||||||
.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;
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
outline: 0;
|
font-family: Arial, sans-serif;
|
||||||
padding: 0;
|
background-color: #f8fafa;
|
||||||
transition: background-color 0.3s;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type='submit'] {
|
.login-container {
|
||||||
cursor: pointer;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form {
|
.card-container {
|
||||||
display: grid;
|
|
||||||
gap: $formGap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form input[type='password'],
|
|
||||||
.form input[type='text'],
|
|
||||||
.form button[type='submit'] {
|
|
||||||
inline-size: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-field {
|
|
||||||
display: flex;
|
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 {
|
.form-input {
|
||||||
flex: 1;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login {
|
.login-button {
|
||||||
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 {
|
|
||||||
text-align: center;
|
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 { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
import { LoginComponent } from './login.component';
|
import { LoginComponent } from './login.component';
|
||||||
|
|
||||||
describe('LoginComponent', () => {
|
describe('LoginComponent', () => {
|
||||||
|
|||||||
@ -1,47 +1,45 @@
|
|||||||
import { NgClass } from '@angular/common';
|
|
||||||
import { HttpErrorResponse } from '@angular/common/http';
|
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 { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
|
||||||
import { MatButton } from '@angular/material/button';
|
import { MatButtonModule } from '@angular/material/button';
|
||||||
import { MatIcon } from '@angular/material/icon';
|
import { MatCardModule } from '@angular/material/card';
|
||||||
import { MatToolbar } from '@angular/material/toolbar';
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||||
import { MatTooltip } from '@angular/material/tooltip';
|
import { MatIconModule } from '@angular/material/icon';
|
||||||
|
import { MatInputModule } from '@angular/material/input';
|
||||||
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
|
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
|
||||||
import { UserRole } from 'shared-meet-components';
|
import { AuthService } from '../../services/index';
|
||||||
import { AuthService, ContextService } from '../../services/index';
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-login',
|
selector: 'ov-login',
|
||||||
standalone: true,
|
standalone: true,
|
||||||
imports: [MatToolbar, MatTooltip, MatIcon, FormsModule, ReactiveFormsModule, NgClass, MatButton, RouterModule],
|
imports: [
|
||||||
|
MatFormFieldModule,
|
||||||
|
ReactiveFormsModule,
|
||||||
|
MatInputModule,
|
||||||
|
MatButtonModule,
|
||||||
|
FormsModule,
|
||||||
|
MatCardModule,
|
||||||
|
MatIconModule,
|
||||||
|
RouterModule
|
||||||
|
],
|
||||||
templateUrl: './login.component.html',
|
templateUrl: './login.component.html',
|
||||||
styleUrl: './login.component.scss'
|
styleUrl: './login.component.scss'
|
||||||
})
|
})
|
||||||
export class LoginComponent {
|
export class LoginComponent implements OnInit {
|
||||||
version = '';
|
|
||||||
openviduLogoUrl = '';
|
|
||||||
backgroundImageUrl = '';
|
|
||||||
|
|
||||||
loginForm = new FormGroup({
|
loginForm = new FormGroup({
|
||||||
username: new FormControl('', [Validators.required, Validators.minLength(4)]),
|
username: new FormControl('', [Validators.required, Validators.minLength(4)]),
|
||||||
password: new FormControl('', [Validators.required, Validators.minLength(4)])
|
password: new FormControl('', [Validators.required, Validators.minLength(4)])
|
||||||
});
|
});
|
||||||
loginErrorMessage: string | undefined;
|
loginErrorMessage: string | undefined;
|
||||||
invalidRole = false;
|
redirectTo = 'console'; // By default, redirect to the console page
|
||||||
redirectTo = ''; // By default, redirect to RoomCreatorComponent
|
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private router: Router,
|
private router: Router,
|
||||||
private route: ActivatedRoute,
|
private route: ActivatedRoute,
|
||||||
private authService: AuthService,
|
private authService: AuthService
|
||||||
private contextService: ContextService
|
|
||||||
) {}
|
) {}
|
||||||
|
|
||||||
async ngOnInit() {
|
ngOnInit() {
|
||||||
this.version = this.contextService.getVersion();
|
|
||||||
this.openviduLogoUrl = this.contextService.getOpenViduLogoUrl();
|
|
||||||
this.backgroundImageUrl = this.contextService.getBackgroundImageUrl();
|
|
||||||
|
|
||||||
this.route.queryParams.subscribe((params) => {
|
this.route.queryParams.subscribe((params) => {
|
||||||
if (params['redirectTo']) {
|
if (params['redirectTo']) {
|
||||||
this.redirectTo = params['redirectTo'];
|
this.redirectTo = params['redirectTo'];
|
||||||
@ -56,16 +54,6 @@ export class LoginComponent {
|
|||||||
try {
|
try {
|
||||||
await this.authService.login(username!, password!);
|
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);
|
let urlTree = this.router.parseUrl(this.redirectTo);
|
||||||
this.router.navigateByUrl(urlTree);
|
this.router.navigateByUrl(urlTree);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user