[frontend] Add Email confirmation and unsubscribe

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: () =>

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>

kibicara-frontend/src/app/platforms/email/email-confirmation/email-confirmation.component.html

@@ -0,0 +1,3 @@
+<div>
+  <mat-spinner class="spinner"></mat-spinner>
+</div>

kibicara-frontend/src/app/platforms/email/email-confirmation/email-confirmation.component.scss

@@ -0,0 +1,4 @@
+.spinner {
+  display: block;
+  margin: auto;
+}

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();
+  });
+});

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']);
+    }
+  }
+}

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>

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%;
+}

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();
+  });
+});

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']);
+    }
+  }
+}

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: [