diff --git a/src/app/create-link/create-link.component.ts b/src/app/create-link/create-link.component.ts index 9ca3530..8d3eb08 100644 --- a/src/app/create-link/create-link.component.ts +++ b/src/app/create-link/create-link.component.ts @@ -13,6 +13,8 @@ import { MatInputModule, MatLabel } from '@angular/material/input'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatButtonModule } from '@angular/material/button'; import { debounceTime } from 'rxjs'; +import { AsyncPipe } from '@angular/common'; +import { MatSnackBar } from '@angular/material/snack-bar'; @Component({ selector: 'app-create-link', @@ -32,7 +34,11 @@ export class CreateLinkComponent { public requestFailed: boolean = false; public errorMessages: Record = {}; - constructor(private linkService: LinkService, private router: Router) {} + constructor( + private linkService: LinkService, + private router: Router, + private snackBar: MatSnackBar, + ) {} private validationErrorMessages: Record = { required: 'This field is required', @@ -50,7 +56,7 @@ export class CreateLinkComponent { .map( (errorKey) => this.validationErrorMessages[errorKey] || - `Unknown error: ${errorKey}` + `Unknown error: ${errorKey}`, ) .join(' '); } @@ -67,7 +73,7 @@ export class CreateLinkComponent { link: new FormControl('', [ Validators.required, Validators.pattern( - /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)/ + /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)/, ), ]), slug: new FormControl(''), @@ -89,7 +95,15 @@ export class CreateLinkComponent { link: this.createLinkForm.get('link')?.value, slug: this.createLinkForm.get('slug')?.value, }) - .catch(() => (this.requestFailed = true)) + .catch(() => { + this.requestFailed = true; + const notification = this.snackBar.open( + 'The slug is already used please use another slug.', + ); + setTimeout(() => { + notification.dismiss(); + }, 5000); + }) .finally(() => { if (!this.requestFailed) { this.router.navigate(['dashboard']);