[frontend] Add email public component

kibicara-frontend/src/app/platforms/email/email-bot-card/email-bot-card.component.html

@@ -0,0 +1,43 @@
+<div *ngIf="emails$ | async as emails">
+  <mat-card *ngIf="emails.length !== 0">
+    <mat-card-header>
+      <div mat-card-avatar class="email"></div>
+      <mat-card-title class="platform-title">
+        E-Mail
+        <button mat-icon-button aria-label="How to use">
+          <mat-icon
+            matTooltip="How to send and receive hood broadcast messages with email"
+            class="info-button"
+            (click)="onInfoClick()"
+            >info</mat-icon
+          >
+        </button>
+      </mat-card-title>
+    </mat-card-header>
+    <mat-card-content>
+      <h3>Subscribe to E-Mail list:</h3>
+      <form class="input" [formGroup]="form" (ngSubmit)="onSubmit()">
+        <mat-form-field>
+          <mat-label>Your E-Mail</mat-label>
+          <input formControlName="email" matInput />
+        </mat-form-field>
+        <button mat-icon-button color="primary" aria-label="Add" class="button">
+          <mat-icon>person_add</mat-icon>
+        </button>
+      </form>
+      <mat-divider></mat-divider>
+      <h3>Send e-mail to hood:</h3>
+      <mat-selection-list [multiple]="false" class="list">
+        <a
+          *ngFor="let email of emails"
+          href="mailto:{{ email.name }}@{{ emailDomain }}"
+        >
+          <mat-list-option>
+            {{ email.name }}@{{ emailDomain }}
+            <mat-divider></mat-divider>
+          </mat-list-option>
+        </a>
+      </mat-selection-list>
+    </mat-card-content>
+  </mat-card>
+</div>

kibicara-frontend/src/app/platforms/email/email-bot-card/email-bot-card.component.scss

@@ -0,0 +1,27 @@
+.email {
+  background-image: url("../../../../assets/email.png");
+  background-size: cover;
+}
+
+.platform-title {
+  display: grid;
+  grid-template-columns: 1fr 40px;
+  width: 100%;
+  align-items: center;
+}
+
+.input {
+  display: grid;
+  grid-template-columns: 4fr 50px;
+  width: 100%;
+  margin: 10px;
+}
+
+.button {
+  align-self: stretch;
+}
+
+h3 {
+  margin-top: 20px;
+  margin-bottom: 0px;
+}

kibicara-frontend/src/app/platforms/email/email-bot-card/email-bot-card.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EmailBotCardComponent } from './email-bot-card.component';
+
+describe('EmailBotCardComponent', () => {
+  let component: EmailBotCardComponent;
+  let fixture: ComponentFixture<EmailBotCardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [EmailBotCardComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EmailBotCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

kibicara-frontend/src/app/platforms/email/email-bot-card/email-bot-card.component.ts

@@ -0,0 +1,71 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { EmailService } from 'src/app/core/api';
+import { environment } from 'src/environments/environment';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { EmailBotInfoDialogComponent } from './email-bot-info-dialog/email-bot-info-dialog.component';
+import { MatDialog } from '@angular/material/dialog';
+import { first } from 'rxjs/operators';
+import { MatSnackBar } from '@angular/material/snack-bar';
+
+@Component({
+  selector: 'app-email-bot-card',
+  templateUrl: './email-bot-card.component.html',
+  styleUrls: ['./email-bot-card.component.scss'],
+})
+export class EmailBotCardComponent implements OnInit {
+  @Input() hoodId;
+  emails$;
+  emailDomain = environment.EMAIL_DOMAIN;
+  form: FormGroup;
+
+  constructor(
+    private emailService: EmailService,
+    private formBuilder: FormBuilder,
+    private dialog: MatDialog,
+    private snackBar: MatSnackBar
+  ) {}
+
+  ngOnInit(): void {
+    this.emails$ = this.emailService.getEmailsPublic(this.hoodId);
+    this.form = this.formBuilder.group({
+      email: ['', Validators.required],
+    });
+  }
+
+  onInfoClick() {
+    this.dialog.open(EmailBotInfoDialogComponent);
+  }
+
+  onSubmit() {
+    if (this.form.invalid) {
+      return;
+    }
+
+    this.emailService
+      .subscribe(this.hoodId, {
+        email: this.form.controls.email.value,
+      })
+      .pipe(first())
+      .subscribe(
+        (data) => {
+          this.form.reset();
+          this.snackBar.open(
+            'Successful! Check your e-mail inbox to confirm your subscription.',
+            'Close',
+            {
+              duration: 2000,
+            }
+          );
+        },
+        (error) => {
+          this.snackBar.open(
+            'Could not send e-mail to this address. Try again!',
+            'Close',
+            {
+              duration: 2000,
+            }
+          );
+        }
+      );
+  }
+}

kibicara-frontend/src/app/platforms/email/email-bot-card/email-bot-info-dialog/email-bot-info-dialog.component.html

@@ -0,0 +1 @@
+<p>email-bot-info-dialog works!</p>

kibicara-frontend/src/app/platforms/email/email-bot-card/email-bot-info-dialog/email-bot-info-dialog.component.ts

@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-email-bot-info-dialog',
+  templateUrl: './email-bot-info-dialog.component.html',
+  styleUrls: ['./email-bot-info-dialog.component.scss'],
+})
+export class EmailBotInfoDialogComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}