From 6d3664968dbc92e8bb1b04120ea061aa1f3bf5aa Mon Sep 17 00:00:00 2001
From: Cathy Hu <cathy.hu@fau.de>
Date: Sun, 6 Sep 2020 23:08:26 +0200
Subject: [PATCH] [frontend] Add Email confirmation and unsubscribe

---
 .../src/app/app-routing.module.ts             |  4 ++
 .../app/dashboard/hoods/hoods.component.html  |  2 +-
 .../email-confirmation.component.html         |  3 ++
 .../email-confirmation.component.scss         |  4 ++
 .../email-confirmation.component.spec.ts      | 24 +++++++++
 .../email-confirmation.component.ts           | 50 +++++++++++++++++++
 .../email-unsubscribe.component.html          |  3 ++
 .../email-unsubscribe.component.scss          |  5 ++
 .../email-unsubscribe.component.spec.ts       | 24 +++++++++
 .../email-unsubscribe.component.ts            | 39 +++++++++++++++
 .../src/app/platforms/platforms.module.ts     |  4 ++
 11 files changed, 161 insertions(+), 1 deletion(-)
 create mode 100644 kibicara-frontend/src/app/platforms/email/email-confirmation/email-confirmation.component.html
 create mode 100644 kibicara-frontend/src/app/platforms/email/email-confirmation/email-confirmation.component.scss
 create mode 100644 kibicara-frontend/src/app/platforms/email/email-confirmation/email-confirmation.component.spec.ts
 create mode 100644 kibicara-frontend/src/app/platforms/email/email-confirmation/email-confirmation.component.ts
 create mode 100644 kibicara-frontend/src/app/platforms/email/email-unsubscribe/email-unsubscribe.component.html
 create mode 100644 kibicara-frontend/src/app/platforms/email/email-unsubscribe/email-unsubscribe.component.scss
 create mode 100644 kibicara-frontend/src/app/platforms/email/email-unsubscribe/email-unsubscribe.component.spec.ts
 create mode 100644 kibicara-frontend/src/app/platforms/email/email-unsubscribe/email-unsubscribe.component.ts

diff --git a/kibicara-frontend/src/app/app-routing.module.ts b/kibicara-frontend/src/app/app-routing.module.ts
index afaf699..650e109 100644
--- a/kibicara-frontend/src/app/app-routing.module.ts
+++ b/kibicara-frontend/src/app/app-routing.module.ts
@@ -9,6 +9,8 @@ import { HoodspageComponent } from './hoodspage/hoodspage.component';
 import { HoodpageComponent } from './hoodpage/hoodpage.component';
 import { SharedModule } from './shared/shared.module';
 import { ConfirmComponent } from './auth/confirm/confirm.component';
+import { EmailConfirmationComponent } from './platforms/email/email-confirmation/email-confirmation.component';
+import { EmailUnsubscribeComponent } from './platforms/email/email-unsubscribe/email-unsubscribe.component';
 
 const routes: Routes = [
   { path: '', component: HomepageComponent },
@@ -18,6 +20,8 @@ const routes: Routes = [
   { path: 'organizers', component: OrganizerspageComponent },
   { path: 'hoods', component: HoodspageComponent },
   { path: 'hoods/:id', component: HoodpageComponent },
+  { path: 'hoods/:id/email-confirm', component: EmailConfirmationComponent },
+  { path: 'hoods/:id/email-unsubscribe', component: EmailUnsubscribeComponent },
   {
     path: 'dashboard',
     loadChildren: () =>
diff --git a/kibicara-frontend/src/app/dashboard/hoods/hoods.component.html b/kibicara-frontend/src/app/dashboard/hoods/hoods.component.html
index 1ca0acf..54e7b46 100644
--- a/kibicara-frontend/src/app/dashboard/hoods/hoods.component.html
+++ b/kibicara-frontend/src/app/dashboard/hoods/hoods.component.html
@@ -13,7 +13,6 @@
         <a
           *ngFor="let hood of hoods$ | async"
           [routerLink]="['/dashboard/hoods', hood.id]"
-          target="_blank"
           matTooltip="Edit settings of {{ hood.name }}"
         >
           <mat-list-option>
@@ -32,6 +31,7 @@
         <mat-list-item *ngFor="let hood of hoods$ | async">
           <a
             [routerLink]="['/hoods', hood.id]"
+            target="_blank"
             matTooltip="View public page of hood {{ hood.name }}"
           >
             <mat-icon class="open-icon">open_in_new</mat-icon>
diff --git a/kibicara-frontend/src/app/platforms/email/email-confirmation/email-confirmation.component.html b/kibicara-frontend/src/app/platforms/email/email-confirmation/email-confirmation.component.html
new file mode 100644
index 0000000..113e652
--- /dev/null
+++ b/kibicara-frontend/src/app/platforms/email/email-confirmation/email-confirmation.component.html
@@ -0,0 +1,3 @@
+<div>
+  <mat-spinner class="spinner"></mat-spinner>
+</div>
diff --git a/kibicara-frontend/src/app/platforms/email/email-confirmation/email-confirmation.component.scss b/kibicara-frontend/src/app/platforms/email/email-confirmation/email-confirmation.component.scss
new file mode 100644
index 0000000..86c0c51
--- /dev/null
+++ b/kibicara-frontend/src/app/platforms/email/email-confirmation/email-confirmation.component.scss
@@ -0,0 +1,4 @@
+.spinner {
+  display: block;
+  margin: auto;
+}
diff --git a/kibicara-frontend/src/app/platforms/email/email-confirmation/email-confirmation.component.spec.ts b/kibicara-frontend/src/app/platforms/email/email-confirmation/email-confirmation.component.spec.ts
new file mode 100644
index 0000000..5ca8bc9
--- /dev/null
+++ b/kibicara-frontend/src/app/platforms/email/email-confirmation/email-confirmation.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EmailConfirmationComponent } from './email-confirmation.component';
+
+describe('EmailConfirmationComponent', () => {
+  let component: EmailConfirmationComponent;
+  let fixture: ComponentFixture<EmailConfirmationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [EmailConfirmationComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EmailConfirmationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/kibicara-frontend/src/app/platforms/email/email-confirmation/email-confirmation.component.ts b/kibicara-frontend/src/app/platforms/email/email-confirmation/email-confirmation.component.ts
new file mode 100644
index 0000000..f288cfc
--- /dev/null
+++ b/kibicara-frontend/src/app/platforms/email/email-confirmation/email-confirmation.component.ts
@@ -0,0 +1,50 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { EmailService } from 'src/app/core/api';
+import { Route } from '@angular/compiler/src/core';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
+
+@Component({
+  selector: 'app-email-confirmation',
+  templateUrl: './email-confirmation.component.html',
+  styleUrls: ['./email-confirmation.component.scss'],
+})
+export class EmailConfirmationComponent implements OnInit {
+  constructor(
+    private route: ActivatedRoute,
+    private emailService: EmailService,
+    private router: Router,
+    private snackBar: MatSnackBar
+  ) {}
+
+  ngOnInit(): void {
+    if (
+      this.route.snapshot.params.id &&
+      this.route.snapshot.queryParams.token
+    ) {
+      console.log(this.route.snapshot.params.id);
+      this.emailService
+        .confirmSubscriber(
+          this.route.snapshot.queryParams.token,
+          this.route.snapshot.params.id
+        )
+        .subscribe(
+          () => {
+            this.router.navigate(['/hoods', this.route.snapshot.params.id]);
+            this.snackBar.open('Subscription successful!', 'Close', {
+              duration: 2000,
+            });
+          },
+          (err) => {
+            this.router.navigate(['/hoods', this.route.snapshot.params.id]);
+            this.snackBar.open('Error: Email already in list.', 'Close', {
+              duration: 2000,
+            });
+          }
+        );
+    } else {
+      this.router.navigate(['/404']);
+    }
+  }
+}
diff --git a/kibicara-frontend/src/app/platforms/email/email-unsubscribe/email-unsubscribe.component.html b/kibicara-frontend/src/app/platforms/email/email-unsubscribe/email-unsubscribe.component.html
new file mode 100644
index 0000000..5365e6c
--- /dev/null
+++ b/kibicara-frontend/src/app/platforms/email/email-unsubscribe/email-unsubscribe.component.html
@@ -0,0 +1,3 @@
+<mat-card class="card">
+  <p>{{ status }}</p>
+</mat-card>
diff --git a/kibicara-frontend/src/app/platforms/email/email-unsubscribe/email-unsubscribe.component.scss b/kibicara-frontend/src/app/platforms/email/email-unsubscribe/email-unsubscribe.component.scss
new file mode 100644
index 0000000..4163397
--- /dev/null
+++ b/kibicara-frontend/src/app/platforms/email/email-unsubscribe/email-unsubscribe.component.scss
@@ -0,0 +1,5 @@
+.card {
+  margin-left: 20%;
+  margin-right: 20%;
+  margin-top: 10%;
+}
diff --git a/kibicara-frontend/src/app/platforms/email/email-unsubscribe/email-unsubscribe.component.spec.ts b/kibicara-frontend/src/app/platforms/email/email-unsubscribe/email-unsubscribe.component.spec.ts
new file mode 100644
index 0000000..0145a44
--- /dev/null
+++ b/kibicara-frontend/src/app/platforms/email/email-unsubscribe/email-unsubscribe.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EmailUnsubscribeComponent } from './email-unsubscribe.component';
+
+describe('EmailUnsubscribeComponent', () => {
+  let component: EmailUnsubscribeComponent;
+  let fixture: ComponentFixture<EmailUnsubscribeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [EmailUnsubscribeComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EmailUnsubscribeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/kibicara-frontend/src/app/platforms/email/email-unsubscribe/email-unsubscribe.component.ts b/kibicara-frontend/src/app/platforms/email/email-unsubscribe/email-unsubscribe.component.ts
new file mode 100644
index 0000000..ea02a8a
--- /dev/null
+++ b/kibicara-frontend/src/app/platforms/email/email-unsubscribe/email-unsubscribe.component.ts
@@ -0,0 +1,39 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { EmailService } from 'src/app/core/api';
+import { MatSnackBar } from '@angular/material/snack-bar';
+
+@Component({
+  selector: 'app-email-unsubscribe',
+  templateUrl: './email-unsubscribe.component.html',
+  styleUrls: ['./email-unsubscribe.component.scss'],
+})
+export class EmailUnsubscribeComponent implements OnInit {
+  status = '';
+
+  constructor(
+    private route: ActivatedRoute,
+    private emailService: EmailService,
+    private router: Router,
+    private snackBar: MatSnackBar
+  ) {}
+
+  ngOnInit(): void {
+    if (
+      this.route.snapshot.params.id &&
+      this.route.snapshot.queryParams.token
+    ) {
+      console.log(this.route.snapshot.params.id);
+      this.emailService
+        .unsubscribe(
+          this.route.snapshot.queryParams.token,
+          this.route.snapshot.params.id
+        )
+        .subscribe(() => {
+          this.status = 'You were successfully unsubscribed.';
+        });
+    } else {
+      this.router.navigate(['/404']);
+    }
+  }
+}
diff --git a/kibicara-frontend/src/app/platforms/platforms.module.ts b/kibicara-frontend/src/app/platforms/platforms.module.ts
index 9835be6..6eedaed 100644
--- a/kibicara-frontend/src/app/platforms/platforms.module.ts
+++ b/kibicara-frontend/src/app/platforms/platforms.module.ts
@@ -19,6 +19,8 @@ import { PlatformsInfoDialogComponent } from './platforms-info-page/platforms-in
 import { EmailBotInfoDialogComponent } from './email/email-bot-card/email-bot-info-dialog/email-bot-info-dialog.component';
 import { TelegramBotInfoDialogComponent } from './telegram/telegram-bot-card/telegram-bot-info-dialog/telegram-bot-info-dialog.component';
 import { TwitterBotInfoDialogComponent } from './twitter/twitter-bot-card/twitter-bot-info-dialog/twitter-bot-info-dialog.component';
+import { EmailConfirmationComponent } from './email/email-confirmation/email-confirmation.component';
+import { EmailUnsubscribeComponent } from './email/email-unsubscribe/email-unsubscribe.component';
 
 @NgModule({
   declarations: [
@@ -40,6 +42,8 @@ import { TwitterBotInfoDialogComponent } from './twitter/twitter-bot-card/twitte
     EmailBotInfoDialogComponent,
     TelegramBotInfoDialogComponent,
     TwitterBotInfoDialogComponent,
+    EmailConfirmationComponent,
+    EmailUnsubscribeComponent,
   ],
   imports: [CommonModule, SharedModule],
   exports: [