feat: integrate Toastr for user feedback in contact form submission #15
This commit is contained in:
@@ -4,6 +4,7 @@ import { MaterialModule } from '../../../material.module';
|
|||||||
import { FooterComponent } from '../footer/footer.component';
|
import { FooterComponent } from '../footer/footer.component';
|
||||||
import { FormsModule } from '@angular/forms';
|
import { FormsModule } from '@angular/forms';
|
||||||
import { HttpClient } from '@angular/common/http';
|
import { HttpClient } from '@angular/common/http';
|
||||||
|
import { ToastrService } from 'ngx-toastr';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-contact',
|
selector: 'app-contact',
|
||||||
@@ -24,7 +25,7 @@ export class ContactComponent implements AfterViewInit {
|
|||||||
@ViewChild('recaptcha', { static: false }) recaptchaElem!: ElementRef;
|
@ViewChild('recaptcha', { static: false }) recaptchaElem!: ElementRef;
|
||||||
widgetId: number | null = null;
|
widgetId: number | null = null;
|
||||||
|
|
||||||
constructor(private http: HttpClient) { }
|
constructor(private http: HttpClient, private toastr: ToastrService) { }
|
||||||
|
|
||||||
ngAfterViewInit(): void {
|
ngAfterViewInit(): void {
|
||||||
const win: any = window as any;
|
const win: any = window as any;
|
||||||
@@ -58,7 +59,7 @@ export class ContactComponent implements AfterViewInit {
|
|||||||
|
|
||||||
if (!token) {
|
if (!token) {
|
||||||
// optionally show UI feedback to complete captcha
|
// optionally show UI feedback to complete captcha
|
||||||
alert('Prosím, potvrďte reCAPTCHA.');
|
this.toastr.warning('Prosím, potvrďte reCAPTCHA.', 'Upozornenie');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -75,7 +76,7 @@ export class ContactComponent implements AfterViewInit {
|
|||||||
// POST to your backend endpoint which must verify the token with Google
|
// POST to your backend endpoint which must verify the token with Google
|
||||||
this.http.post('/api/webmessages', payload).subscribe({
|
this.http.post('/api/webmessages', payload).subscribe({
|
||||||
next: () => {
|
next: () => {
|
||||||
alert('Správa odoslaná');
|
this.toastr.success('Správa odoslaná', 'Úspech');
|
||||||
// reset widget
|
// reset widget
|
||||||
if (grecaptchaAny && grecaptchaAny.reset) {
|
if (grecaptchaAny && grecaptchaAny.reset) {
|
||||||
if (this.widgetId !== null) grecaptchaAny.reset(this.widgetId);
|
if (this.widgetId !== null) grecaptchaAny.reset(this.widgetId);
|
||||||
@@ -84,7 +85,7 @@ export class ContactComponent implements AfterViewInit {
|
|||||||
},
|
},
|
||||||
error: (err) => {
|
error: (err) => {
|
||||||
console.error(err);
|
console.error(err);
|
||||||
alert('Chyba pri odosielaní — skúste znova.');
|
this.toastr.error('Chyba pri odosielaní — skúste znova.', 'Chyba');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user