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

frontend: Set default username if authenticated in ParticipantNameComponent and clean up form initialization

Browse Source
This commit is contained in:
juancarmore 2025-03-26 13:58:40 +01:00
parent 2b776ac181
commit ab0775a706
2 changed files with 15 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/projects/shared-meet-components/src/lib/pages/participant-name-form/participant-name-form.component.html
View File

@ -11,7 +11,6 @@
@if (name?.hasError('required')) { @if (name?.hasError('required')) {
<mat-error> The name is <strong>required</strong> </mat-error> <mat-error> The name is <strong>required</strong> </mat-error>
} }
@if (name?.hasError('participantExists')) { @if (name?.hasError('participantExists')) {
<mat-error> The name is already taken. <strong> Please choose another name </strong> </mat-error> <mat-error> The name is already taken. <strong> Please choose another name </strong> </mat-error>
} }

26
frontend/projects/shared-meet-components/src/lib/pages/participant-name-form/participant-name-form.component.ts
View File

@ -1,10 +1,11 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms'; import { FormGroup, Validators, FormsModule, ReactiveFormsModule, FormControl } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card'; import { MatCardModule } from '@angular/material/card';
import { MatFormFieldModule } from '@angular/material/form-field'; import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input'; import { MatInputModule } from '@angular/material/input';
import { ActivatedRoute, Router } from '@angular/router'; import { ActivatedRoute, Router } from '@angular/router';
import { AuthService } from 'shared-meet-components';
@Component({ @Component({
selector: 'ov-participant-name-form', selector: 'ov-participant-name-form',
@ -22,21 +23,19 @@ import { ActivatedRoute, Router } from '@angular/router';
styleUrl: './participant-name-form.component.scss' styleUrl: './participant-name-form.component.scss'
}) })
export class ParticipantNameFormComponent implements OnInit { export class ParticipantNameFormComponent implements OnInit {
participantForm: FormGroup; participantForm = new FormGroup({
name: new FormControl('', [Validators.required, Validators.minLength(4)])
});
protected originUrl: string = ''; protected originUrl: string = '';
protected error = ''; protected error = '';
constructor( constructor(
protected fb: FormBuilder,
protected router: Router, protected router: Router,
protected route: ActivatedRoute protected route: ActivatedRoute,
) { protected authService: AuthService
this.participantForm = this.fb.group({ ) {}
name: ['', [Validators.required, Validators.minLength(4)]]
});
}
ngOnInit(): void { ngOnInit() {
this.route.queryParams.subscribe((params) => { this.route.queryParams.subscribe((params) => {
if (params['originUrl']) { if (params['originUrl']) {
this.originUrl = params['originUrl']; this.originUrl = params['originUrl'];
@ -44,6 +43,12 @@ export class ParticipantNameFormComponent implements OnInit {
this.applyErrorToForm(); this.applyErrorToForm();
} }
}); });
// Set the username if authenticated as default value
const username = this.authService.getUsername();
if (username) {
this.participantForm.get('name')?.setValue(username);
}
} }
get name() { get name() {
@ -55,7 +60,6 @@ export class ParticipantNameFormComponent implements OnInit {
const participantName = this.participantForm.value.name; const participantName = this.participantForm.value.name;
let urlTree = this.router.parseUrl(this.originUrl); let urlTree = this.router.parseUrl(this.originUrl);
urlTree.queryParams = { ...urlTree.queryParams, 'participant-name': participantName }; urlTree.queryParams = { ...urlTree.queryParams, 'participant-name': participantName };
await this.router.navigateByUrl(urlTree); await this.router.navigateByUrl(urlTree);