[frontend] Add initial mastodon frontend

frontend/src/app/dashboard/board/platforms/platforms.component.html

@@ -39,4 +39,5 @@
   <app-email-settings [hoodId]="hoodId"></app-email-settings>
   <app-twitter-settings [hoodId]="hoodId"></app-twitter-settings>
   <app-telegram-settings [hoodId]="hoodId"></app-telegram-settings>
+  <app-mastodon-settings [hoodId]="hoodId"></app-mastodon-settings>
 </div>

frontend/src/app/platforms/mastodon/mastodon-bot-card/mastodon-bot-card.component.html

@@ -0,0 +1,47 @@
+<div *ngIf="mastodons$ | loading | async as mastodons">
+    <ng-template [ngIf]="mastodons.value">
+      <mat-card appearance="outlined">
+        <mat-card-header>
+          <div mat-card-avatar class="mastodon"></div>
+          <mat-card-title class="platform-title">
+            mastodon
+            <button mat-icon-button aria-label="How to use">
+              <mat-icon
+                matTooltip="How to send and receive hood broadcast messages with mastodon"
+                class="info-button"
+                (click)="onInfoClick()"
+                >info</mat-icon
+              >
+            </button>
+          </mat-card-title>
+        </mat-card-header>
+        <mat-card-content *ngIf="mastodons.value.length !== 0; else nomastodon">
+          <mat-selection-list [multiple]="false" class="list">
+            <a
+              *ngFor="let mastodon of mastodons.value"
+              href="https://{{mastodon.instance}}/@{{ mastodon.username }}"
+              routerLinkActive="router-link-active"
+            >
+              <mat-list-option>
+                @{{ mastodon.username }}
+                <mat-divider></mat-divider>
+              </mat-list-option>
+            </a>
+          </mat-selection-list>
+        </mat-card-content>
+      </mat-card>
+      <ng-template #nomastodon>
+        <mat-card-content>
+          Unfortunately your hood admin has not configured mastodon as platform
+          yet.
+        </mat-card-content>
+      </ng-template>
+    </ng-template>
+    <ng-template [ngIf]="mastodons.error"
+      ><mat-icon class="warning">warning</mat-icon></ng-template
+    >
+    <ng-template [ngIf]="mastodons.loading">
+      <mat-spinner [diameter]="45" class="spinner"></mat-spinner>
+    </ng-template>
+  </div>
+  

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

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

frontend/src/app/platforms/mastodon/mastodon-bot-card/mastodon-bot-card.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { MastodonService } from 'src/app/core/api';
+import { MastodonBotInfoDialogComponent } from './mastodon-bot-info-dialog/mastodon-bot-info-dialog.component';
+import { MatDialog } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-mastodon-bot-card',
+  templateUrl: './mastodon-bot-card.component.html',
+  styleUrls: ['./mastodon-bot-card.component.scss'],
+})
+export class MastodonBotCardComponent implements OnInit {
+  @Input() hoodId;
+  mastodons$;
+
+  constructor(
+    private mastodonService: MastodonService,
+    private dialog: MatDialog
+  ) {}
+
+  ngOnInit(): void {
+    this.mastodons$ = this.mastodonService.getMastodonsPublic(this.hoodId);
+  }
+
+  onInfoClick() {
+    this.dialog.open(MastodonBotInfoDialogComponent);
+  }
+}

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

@@ -0,0 +1,54 @@
+<mat-dialog-content>
+    <div class="container">
+      <h2>How to communicate with the hood via Telegram?</h2>
+      <mat-accordion>
+        <mat-expansion-panel>
+          <mat-expansion-panel-header>
+            <mat-panel-title
+              >How to subscribe to the hood via Telegram?</mat-panel-title
+            >
+          </mat-expansion-panel-header>
+          <ol>
+            <li>
+              Click on the telegram bot name that is shown in the telegram card.
+            </li>
+            <li>
+              Start messaging the telegram bot that the link leads to by writing a
+              message containing only the word <strong>/start</strong>. Done!
+            </li>
+          </ol>
+        </mat-expansion-panel>
+        <mat-expansion-panel>
+          <mat-expansion-panel-header>
+            <mat-panel-title
+              >How to send a broadcast message to the hood?</mat-panel-title
+            >
+          </mat-expansion-panel-header>
+          <p>
+            Write a direct message to the bot. This message will be broadcasted to
+            the other platforms.
+          </p>
+        </mat-expansion-panel>
+        <mat-expansion-panel>
+          <mat-expansion-panel-header>
+            <mat-panel-title>How to receive messages?</mat-panel-title>
+          </mat-expansion-panel-header>
+          <p>
+            If you subscribed to the bot, you will automatically receive the
+            messages of your hood from the bot.
+          </p>
+        </mat-expansion-panel>
+        <mat-expansion-panel>
+          <mat-expansion-panel-header>
+            <mat-panel-title>How to stop receiving messages?</mat-panel-title>
+          </mat-expansion-panel-header>
+          <p>
+            Write a message with content <strong>/stop</strong> to the bot. You
+            should receive a message from the bot which confirms that the
+            unsubscription was successful.
+          </p>
+        </mat-expansion-panel>
+      </mat-accordion>
+    </div>
+  </mat-dialog-content>
+  

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

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

frontend/src/app/platforms/mastodon/mastodon-settings/mastodon-dialog/mastodon-dialog.component.html

@@ -0,0 +1,46 @@
+<h2 mat-dialog-title>Create new inbox</h2>
+
+<mat-dialog-content>
+  <form class="input" [formGroup]="form">
+    <mat-form-field>
+      <mat-label>Mastodon Instance URL</mat-label>
+      <input matInput formControlName="instance_url" />
+      <mat-error
+        *ngIf="
+          form.controls.instance_url.errors &&
+          form.controls.instance_url.errors.required
+        "
+        >Mastodon Instance URL is required</mat-error
+      >
+    </mat-form-field>
+    <mat-form-field>
+      <mat-label>Mastodon E-Mail</mat-label>
+      <input matInput formControlName="email" />
+      <mat-error
+        *ngIf="
+          form.controls.email.errors &&
+          form.controls.email.errors.required
+        "
+        >Mastodon E-Mail is required</mat-error
+      >
+    </mat-form-field>
+    <mat-form-field>
+      <mat-label>Mastodon Password</mat-label>
+      <input matInput formControlName="password" />
+      <mat-error
+        *ngIf="
+          form.controls.password.errors &&
+          form.controls.password.errors.required
+        "
+        >Mastodon Password is required</mat-error
+      >
+    </mat-form-field>
+  </form>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+  <button mat-button (click)="onCancel()">Cancel</button>
+  <button mat-button (click)="onSubmit()" cdkFocusInitial>
+    Add Mastodon bot
+  </button>
+</mat-dialog-actions>

frontend/src/app/platforms/mastodon/mastodon-settings/mastodon-dialog/mastodon-dialog.component.scss

@@ -0,0 +1,26 @@
+.input {
+    display: grid;
+    grid-template-rows: 1fr 1fr 1fr;
+    width: 100%;
+  }
+  
+  form {
+    margin-top: 10px;
+    height: 100%;
+  }
+  
+  textarea {
+    height: 120px;
+  }
+  
+  .example-image {
+    margin-left: 10%;
+    margin-right: 10%;
+    width: 80%;
+    @media screen and (max-width: 600px) {
+      width: 100%;
+      margin-left: 0%;
+      margin-right: 0%;
+    }
+  }
+  

frontend/src/app/platforms/mastodon/mastodon-settings/mastodon-dialog/mastodon-dialog.component.spec.ts

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

frontend/src/app/platforms/mastodon/mastodon-settings/mastodon-dialog/mastodon-dialog.component.ts

@@ -0,0 +1,79 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { Validators, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MastodonService } from 'src/app/core/api';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { first } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-mastodon-dialog',
+  templateUrl: './mastodon-dialog.component.html',
+  styleUrls: ['./mastodon-dialog.component.scss'],
+})
+export class MastodonDialogComponent implements OnInit {
+  form: UntypedFormGroup;
+
+  constructor(
+    public dialogRef: MatDialogRef<MastodonDialogComponent>,
+    private formBuilder: UntypedFormBuilder,
+    private mastodonService: MastodonService,
+    private snackBar: MatSnackBar,
+    @Inject(MAT_DIALOG_DATA) public data
+  ) {}
+
+  ngOnInit(): void {
+    this.form = this.formBuilder.group({
+      email: ['', Validators.required],
+      password: ['', Validators.required],
+      instance_url: ['', Validators.required],
+    });
+
+    if (this.data.mastodonId) {
+      this.mastodonService
+        .getMastodon(this.data.mastodonId, this.data.hoodId)
+        .subscribe((data) => {
+          this.form.controls.email.setValue(data.email);
+          this.form.controls.password.setValue(data.password);
+          this.form.controls.instance_url.setValue(data.instance_url);
+        });
+    }
+  }
+
+  onCancel() {
+    this.dialogRef.close();
+  }
+
+  success() {
+    this.dialogRef.close();
+  }
+
+  error() {
+    this.snackBar.open('Invalid API Key. Try again!', 'Close', {
+      duration: 2000,
+    });
+  }
+
+  onSubmit() {
+    if (this.form.invalid) {
+      return;
+    }
+
+    const response = {
+      email: this.form.controls.email.value,
+      instance_url: this.form.controls.instance_url.value,
+      password: this.form.controls.password.value
+    }
+
+    this.mastodonService
+      .createMastodon(this.data.hoodId, response)
+      .pipe(first())
+      .subscribe(
+        () => {
+          this.success();
+        },
+        () => {
+          this.error();
+        }
+      );
+}
+}

frontend/src/app/platforms/mastodon/mastodon-settings/mastodon-settings.component.html

@@ -0,0 +1,69 @@
+<mat-card appearance="outlined">
+    <mat-card-header>
+      <div mat-card-avatar class="mastodon"></div>
+      <mat-card-title class="platform-title">
+        Mastodon
+        <button mat-icon-button aria-label="How to use">
+          <mat-icon
+            matTooltip="How to add an mastodon bot to your hood"
+            class="info-button"
+            (click)="onInfoClick()"
+            >info</mat-icon
+          >
+        </button>
+      </mat-card-title>
+    </mat-card-header>
+    <mat-card-content>
+      <mat-list *ngIf="mastodons$ | loading | async as mastodons">
+        <ng-template [ngIf]="mastodons.value">
+          <mat-list-item *ngIf="mastodons.value.length === 0">
+            <button class="add-button" mat-button (click)="onCreate()">
+              <div class="in-add-button">
+                <mat-icon>add</mat-icon>
+                <span> Add a platform connection!</span>
+              </div>
+            </button>
+            <mat-divider></mat-divider>
+          </mat-list-item>
+          <mat-list-item *ngFor="let mastodon of mastodons.value">
+            <div class="entry">
+              @{{ mastodon.username }}
+              <mat-slide-toggle
+                [checked]="mastodon.enabled === 1"
+                (change)="onChange(mastodon)"
+              ></mat-slide-toggle>
+              <button
+                mat-icon-button
+                [matMenuTriggerFor]="menu"
+                aria-label="Example icon-button with a menu"
+              >
+                <mat-icon>more_vert</mat-icon>
+              </button>
+            </div>
+            <mat-divider></mat-divider>
+            <mat-menu #menu="matMenu">
+              <button mat-menu-item (click)="onEdit(mastodon.id)">
+                <mat-icon>edit</mat-icon>
+                <span>Edit</span>
+              </button>
+              <button mat-menu-item (click)="onDelete(mastodon.id)">
+                <mat-icon>delete</mat-icon>
+                <span>Delete</span>
+              </button>
+              <button mat-menu-item (click)="onCreate()">
+                <mat-icon>add</mat-icon>
+                <span>Add another</span>
+              </button>
+            </mat-menu>
+          </mat-list-item>
+        </ng-template>
+        <ng-template [ngIf]="mastodons.error"
+          ><mat-icon class="warning">warning</mat-icon></ng-template
+        >
+        <ng-template [ngIf]="mastodons.loading">
+          <mat-spinner [diameter]="45" class="spinner"></mat-spinner>
+        </ng-template>
+      </mat-list>
+    </mat-card-content>
+  </mat-card>
+  

frontend/src/app/platforms/mastodon/mastodon-settings/mastodon-settings.component.scss

@@ -0,0 +1,23 @@
+.entry {
+    display: grid;
+    grid-template-columns: 4fr 40px 20px;
+    width: 100%;
+    align-items: center;
+  }
+  
+  .platform-title {
+    display: grid;
+    grid-template-columns: 1fr 40px;
+    width: 100%;
+    align-items: center;
+  }
+  
+  .platform-heading {
+    align-self: flex-end;
+  }
+  
+  .mastodon {
+    background-image: url("../../../../assets/mastodon.png");
+    background-size: cover;
+  }
+  

frontend/src/app/platforms/mastodon/mastodon-settings/mastodon-settings.component.spec.ts

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

frontend/src/app/platforms/mastodon/mastodon-settings/mastodon-settings.component.ts

@@ -0,0 +1,102 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { MastodonService } from 'src/app/core/api';
+import { Observable } from 'rxjs';
+import { MastodonBotInfoDialogComponent } from '../mastodon-bot-card/mastodon-bot-info-dialog/mastodon-bot-info-dialog.component';
+import { MatDialog } from '@angular/material/dialog';
+import { MastodonDialogComponent } from './mastodon-dialog/mastodon-dialog.component';
+import { YesNoDialogComponent } from 'src/app/shared/yes-no-dialog/yes-no-dialog.component';
+import { MatSnackBar } from '@angular/material/snack-bar';
+
+@Component({
+  selector: 'app-mastodon-settings',
+  templateUrl: './mastodon-settings.component.html',
+  styleUrls: ['./mastodon-settings.component.scss'],
+})
+export class MastodonSettingsComponent implements OnInit {
+  @Input() hoodId;
+  mastodons$: Observable<Array<any>>;
+
+  constructor(
+    private mastodonService: MastodonService,
+    public dialog: MatDialog,
+    private snackBar: MatSnackBar
+  ) {}
+
+  ngOnInit(): void {
+    this.reload();
+  }
+
+  private reload() {
+    this.mastodons$ = this.mastodonService.getMastodons(this.hoodId);
+  }
+
+  onInfoClick() {
+    this.dialog.open(MastodonBotInfoDialogComponent);
+  }
+
+  onDelete(mastodonId) {
+    const dialogRef = this.dialog.open(YesNoDialogComponent, {
+      data: {
+        title: 'Warning',
+        content:
+          'This will also delete the list of subscribers of the mastodon bot.',
+      },
+    });
+
+    dialogRef.afterClosed().subscribe((response) => {
+      if (response) {
+        this.mastodonService
+          .deleteMastodon(mastodonId, this.hoodId)
+          .subscribe(() => {
+            this.reload();
+          });
+      }
+    });
+  }
+
+  onCreate() {
+    const dialogRef = this.dialog.open(MastodonDialogComponent, {
+      data: { hoodId: this.hoodId },
+    });
+
+    dialogRef.afterClosed().subscribe(() => {
+      this.reload();
+    });
+  }
+
+  onEdit(mastodonId) {
+    const dialogRef = this.dialog.open(MastodonDialogComponent, {
+      data: { hoodId: this.hoodId, mastodonId },
+    });
+
+    dialogRef.afterClosed().subscribe(() => {
+      this.reload();
+    });
+  }
+
+  onChange(mastodon) {
+    if (mastodon.enabled === 0) {
+      this.mastodonService.startMastodon(mastodon.id, this.hoodId).subscribe(
+        () => {},
+        (error) => {
+          this.snackBar.open('Could not start. Check your settings.', 'Close', {
+            duration: 2000,
+          });
+        }
+      );
+    } else if (mastodon.enabled === 1) {
+      this.mastodonService.stopMastodon(mastodon.id, this.hoodId).subscribe(
+        () => {},
+        (error) => {
+          this.snackBar.open('Could not stop. Check your settings.', 'Close', {
+            duration: 2000,
+          });
+        }
+      );
+    }
+    // TODO yeah i know this is bad, implement disabling/enabling
+    setTimeout(() => {
+      this.reload();
+    }, 100);
+  }
+}

frontend/src/app/platforms/platforms-info-page/platforms-info-page.component.html

@@ -3,4 +3,5 @@
   <app-twitter-bot-card [hoodId]="hoodId"></app-twitter-bot-card>
   <app-telegram-bot-card [hoodId]="hoodId"></app-telegram-bot-card>
   <app-email-bot-card [hoodId]="hoodId"></app-email-bot-card>
+  <app-mastodon-bot-card [hoodId]="hoodId"></app-mastodon-bot-card>
 </div>

frontend/src/app/platforms/platforms.module.ts

@@ -20,6 +20,10 @@ import { TelegramBotInfoDialogComponent } from './telegram/telegram-bot-card/tel
 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';
+import { MastodonBotCardComponent } from './mastodon/mastodon-bot-card/mastodon-bot-card.component';
+import { MastodonSettingsComponent } from './mastodon/mastodon-settings/mastodon-settings.component';
+import { MastodonDialogComponent } from './mastodon/mastodon-settings/mastodon-dialog/mastodon-dialog.component';
+import { MastodonBotInfoDialogComponent } from './mastodon/mastodon-bot-card/mastodon-bot-info-dialog/mastodon-bot-info-dialog.component';
 
 @NgModule({
   declarations: [
@@ -42,10 +46,15 @@ import { EmailUnsubscribeComponent } from './email/email-unsubscribe/email-unsub
     TwitterBotInfoDialogComponent,
     EmailConfirmationComponent,
     EmailUnsubscribeComponent,
+    MastodonBotCardComponent,
+    MastodonSettingsComponent,
+    MastodonDialogComponent,
+    MastodonBotInfoDialogComponent
   ],
   imports: [CommonModule, SharedModule],
   exports: [
     TelegramSettingsComponent,
+    MastodonSettingsComponent,
     TwitterSettingsComponent,
     EmailSettingsComponent,
     PlatformsInfoPageComponent,