From baf764bdcd2aa6951f57dcc08c4053e0d20acd43 Mon Sep 17 00:00:00 2001 From: Dominik Halfkann Date: Sun, 14 Jan 2024 16:04:08 +0100 Subject: [PATCH 1/2] refactor contact page --- src/app/home/feature/contact.component.ts | 175 ++++++++++++++++++ .../feature/contact/contact.component.html | 66 ------- .../feature/contact/contact.component.scss | 4 - .../home/feature/contact/contact.component.ts | 108 ----------- src/app/home/home.routes.ts | 2 +- 5 files changed, 176 insertions(+), 179 deletions(-) create mode 100644 src/app/home/feature/contact.component.ts delete mode 100644 src/app/home/feature/contact/contact.component.html delete mode 100644 src/app/home/feature/contact/contact.component.scss delete mode 100644 src/app/home/feature/contact/contact.component.ts diff --git a/src/app/home/feature/contact.component.ts b/src/app/home/feature/contact.component.ts new file mode 100644 index 00000000..aaf3e893 --- /dev/null +++ b/src/app/home/feature/contact.component.ts @@ -0,0 +1,175 @@ +import { Component, inject, OnInit } from '@angular/core'; +import { + FormGroup, + NonNullableFormBuilder, + ReactiveFormsModule, + Validators, +} from '@angular/forms'; +import { AuthService } from '@shared/data-access/auth/auth.service'; +import { AuthHttpService } from '@shared/data-access/auth/auth-http.service'; +import { EventLogService } from '@shared/data-access/log/event-log.service'; +import { ContactService } from '../data-access/contact.service'; +import { tap } from 'rxjs'; +import { OldAPIResponse } from '@shared/util/http/response.types'; +import { ErrorMessagePipe } from '@shared/util/http/error-message.pipe'; +import { MatButtonModule } from '@angular/material/button'; +import { RecaptchaModule } from 'ng-recaptcha'; +import { MatInputModule } from '@angular/material/input'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatCardModule } from '@angular/material/card'; +import { AsyncPipe, NgIf } from '@angular/common'; +import { DataTestDirective } from '@shared/util/data-test.directive'; + +@Component({ + selector: 'app-contact', + template: ` +
+ +

Kontaktiere uns

+

+ Du kannst das untenstehende Textfeld nutzen, um uns Wünsche, + Anregungen, Fragen und mehr zukommen zu lassen. +

+

Wir freuen uns auf deine Nachricht.

+ +
+ + + + E-Mail + + + + + Schreibe uns deine Nachricht + + + + +
+ +
+ + + Es ist ein Fehler aufgetreten, bitte versuche es später erneut. + + + + {{ contactResponse.error | errorMessage }} + + + + + + +
+ + + +

Vielen Dank!

+

+ Wir haben deine Nachricht erhalten und werden uns schnellstmöglich bei + dir melden. +

+ +
+ `, + standalone: true, + imports: [ + DataTestDirective, + NgIf, + ReactiveFormsModule, + MatCardModule, + MatFormFieldModule, + MatInputModule, + RecaptchaModule, + MatButtonModule, + AsyncPipe, + ErrorMessagePipe, + ], +}) +export class ContactComponent implements OnInit { + private fb = inject(NonNullableFormBuilder); + private contactService = inject(ContactService); + public authService = inject(AuthService); + private authHttpService = inject(AuthHttpService); + private eventLogService = inject(EventLogService); + + contactForm!: FormGroup; + contactResponse?: OldAPIResponse; + + // TODO: refactor, we should solve this in a reactive way (e.g. subscribe in the template) + isCaptchaSolved = false; + captchaError = false; + + ngOnInit(): void { + this.initReactiveForm(); + } + + submitForm(): void { + if (this.contactForm.valid) { + const { message, email } = this.contactForm.value; + + this.contactService + .sendMessage(message, email) + .pipe( + tap((response) => { + if (response.isSuccess) { + this.eventLogService.createAndPublishEvent( + 'contact_message_sent', + { + message: message, + sender: email, + } + ); + } + }) + ) + .subscribe((response) => { + this.contactResponse = response; + if (response.isSuccess) { + // TODO: don't navigate, just show success message in the same page + // this.router.navigate(['contact-success']); + } + }); + } + } + + captchaResolved(captchaToken: string): void { + this.authHttpService.loginAsHuman(captchaToken).subscribe((response) => { + if (response.isSuccess) { + this.isCaptchaSolved = true; + } else { + this.captchaError = true; + } + }); + } + + private initReactiveForm(): void { + this.contactForm = this.fb.group({ + message: ['', [Validators.required]], + email: ['', [Validators.email]], + }); + } +} diff --git a/src/app/home/feature/contact/contact.component.html b/src/app/home/feature/contact/contact.component.html deleted file mode 100644 index 3e634751..00000000 --- a/src/app/home/feature/contact/contact.component.html +++ /dev/null @@ -1,66 +0,0 @@ -
- -

Kontaktiere uns

-

- Du kannst das untenstehende Textfeld nutzen, um uns Wünsche, Anregungen, - Fragen und mehr zukommen zu lassen. -

-

Wir freuen uns auf deine Nachricht.

- -
- - - - E-Mail - - - - - Schreibe uns deine Nachricht - - - - -
- -
- - - Es ist ein Fehler aufgetreten, bitte versuche es später erneut. - - - - {{ contactResponse.error | errorMessage }} - - - - - - -
- - - -

Vielen Dank!

-

- Wir haben deine Nachricht erhalten und werden uns schnellstmöglich bei dir - melden. -

- -
diff --git a/src/app/home/feature/contact/contact.component.scss b/src/app/home/feature/contact/contact.component.scss deleted file mode 100644 index 459c1320..00000000 --- a/src/app/home/feature/contact/contact.component.scss +++ /dev/null @@ -1,4 +0,0 @@ -.captcha, -button { - margin-bottom: 16px; -} diff --git a/src/app/home/feature/contact/contact.component.ts b/src/app/home/feature/contact/contact.component.ts deleted file mode 100644 index 8a310546..00000000 --- a/src/app/home/feature/contact/contact.component.ts +++ /dev/null @@ -1,108 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { - FormGroup, - NonNullableFormBuilder, - ReactiveFormsModule, - Validators, -} from '@angular/forms'; -import { AuthService } from '@shared/data-access/auth/auth.service'; -import { AuthHttpService } from '@shared/data-access/auth/auth-http.service'; -import { EventLogService } from '@shared/data-access/log/event-log.service'; -import { ContactService } from '../../data-access/contact.service'; -import { tap } from 'rxjs'; -import { OldAPIResponse } from '@shared/util/http/response.types'; -import { ErrorMessagePipe } from '@shared/util/http/error-message.pipe'; -import { MatButtonModule } from '@angular/material/button'; -import { RecaptchaModule } from 'ng-recaptcha'; -import { MatInputModule } from '@angular/material/input'; -import { MatFormFieldModule } from '@angular/material/form-field'; -import { MatCardModule } from '@angular/material/card'; -import { AsyncPipe, NgIf } from '@angular/common'; -import { DataTestDirective } from '@shared/util/data-test.directive'; - -@Component({ - selector: 'app-contact', - templateUrl: './contact.component.html', - styleUrls: ['./contact.component.scss'], - standalone: true, - imports: [ - DataTestDirective, - NgIf, - ReactiveFormsModule, - MatCardModule, - MatFormFieldModule, - MatInputModule, - RecaptchaModule, - MatButtonModule, - AsyncPipe, - ErrorMessagePipe, - ], -}) -export class ContactComponent implements OnInit { - contactForm!: FormGroup; - contactResponse?: OldAPIResponse; - - // TODO: refactor, we should solve this in a reactive way (e.g. subscribe in the template) - isCaptchaSolved = false; - captchaError = false; - - constructor( - private fb: NonNullableFormBuilder, - private contactService: ContactService, - public authStorageService: AuthService, - private authenticationService: AuthHttpService, - private eventLogService: EventLogService - ) {} - - ngOnInit(): void { - this.initReactiveForm(); - } - - submitForm(): void { - if (this.contactForm.valid) { - const { message, email } = this.contactForm.value; - - this.contactService - .sendMessage(message, email) - .pipe( - tap((response) => { - if (response.isSuccess) { - this.eventLogService.createAndPublishEvent( - 'contact_message_sent', - { - message: message, - sender: email, - } - ); - } - }) - ) - .subscribe((response) => { - this.contactResponse = response; - if (response.isSuccess) { - // TODO: don't navigate, just show success message in the same page - // this.router.navigate(['contact-success']); - } - }); - } - } - - captchaResolved(captchaToken: string): void { - this.authenticationService - .loginAsHuman(captchaToken) - .subscribe((response) => { - if (response.isSuccess) { - this.isCaptchaSolved = true; - } else { - this.captchaError = true; - } - }); - } - - private initReactiveForm(): void { - this.contactForm = this.fb.group({ - message: ['', [Validators.required]], - email: ['', [Validators.email]], - }); - } -} diff --git a/src/app/home/home.routes.ts b/src/app/home/home.routes.ts index cd0c2cdc..dc7279cb 100644 --- a/src/app/home/home.routes.ts +++ b/src/app/home/home.routes.ts @@ -5,7 +5,7 @@ import { LoginPageComponent } from './feature/login-page.component'; import { TermsAndConditionsComponent } from './feature/terms-and-conditions.component'; import { AboutUsComponent } from './feature/about-us.component'; import { BetaRegistrationPageComponent } from './feature/beta-registration-page.component'; -import { ContactComponent } from './feature/contact/contact.component'; +import { ContactComponent } from './feature/contact.component'; import { NarrowPageComponent } from '@shared/ui/layout/narrow-page/narrow-page.component'; import { loggedOutGuard } from '@shared/util/auth/logged-in.guard'; import { ImprintComponent } from './feature/imprint.component'; From c0e3926fe35af93265263bad788a6f468d4d8611 Mon Sep 17 00:00:00 2001 From: Dominik Halfkann Date: Sun, 14 Jan 2024 17:35:39 +0100 Subject: [PATCH 2/2] fix contact page error --- src/app/shared/data-access/chat/unread-messages.service.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/app/shared/data-access/chat/unread-messages.service.ts b/src/app/shared/data-access/chat/unread-messages.service.ts index b05eaf29..143ce69f 100644 --- a/src/app/shared/data-access/chat/unread-messages.service.ts +++ b/src/app/shared/data-access/chat/unread-messages.service.ts @@ -24,7 +24,11 @@ export class UnreadMessagesService { .pipe( startWith(-1), filter(() => !this.location.path().includes('chat')), - filter(() => this.profileService.getProfile()?.id !== null), + filter( + () => + this.profileService.getProfile() !== null && + this.profileService.getProfile()!.id !== undefined + ), switchMap(() => { return toApiResponse(this.chatHttp.getChats$()); }),