[frontend] Add Email confirmation and unsubscribe

This commit is contained in:
Cathy Hu 2020-09-06 23:08:26 +02:00
parent ad4f9fb4fb
commit 6d3664968d
11 changed files with 161 additions and 1 deletions

View file

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

View file

@ -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>

View file

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

View file

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

View file

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

View file

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

View file

@ -0,0 +1,3 @@
<mat-card class="card">
<p>{{ status }}</p>
</mat-card>

View file

@ -0,0 +1,5 @@
.card {
margin-left: 20%;
margin-right: 20%;
margin-top: 10%;
}

View file

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

View file

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

View file

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