[frontend] Add email and telegram add description

kibicara-frontend/src/app/dashboard/board/hoodsettings/hoodsettings.component.scss

@@ -27,6 +27,11 @@
   width: 80%;
   margin-left: 10%;
   margin-right: 10%;
+  @media screen and (max-width: 600px) {
+    width: 100%;
+    margin-left: 0%;
+    margin-right: 0%;
+  }
 }
 
 .example-container {
@@ -34,4 +39,7 @@
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 10px;
+  @media screen and (max-width: 600px) {
+    grid-template-columns: 1fr;
+  }
 }

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

@@ -1,42 +1,27 @@
-<p>
+<mat-dialog-content>
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras maximus arcu at
+  <h2>How to add an inbox address to your hood</h2>
-  magna euismod sollicitudin. Vestibulum ut auctor libero. Etiam volutpat, nisl
+  <h3>What is a hood inbox?</h3>
-  sed efficitur hendrerit, nunc risus hendrerit nulla, sollicitudin malesuada
+  <p>
-  neque sem sed tortor. Vestibulum laoreet elementum nibh ultrices ullamcorper.
+    A hood inbox is an email address where users can send an email to. This
-  Sed porta gravida lectus, suscipit dictum ligula pharetra posuere. Vivamus
+    email gets thrown into the hood system and distributed to other platforms.
-  pellentesque ex eget lacus consectetur, at pulvinar est pellentesque.
+  </p>
-  Phasellus a elit tempor, tristique tortor auctor, maximus eros. Duis magna
+  <p>
-  sapien, accumsan nec massa nec, porta auctor leo. Nam nibh nisl, hendrerit nec
+    <strong>Example: </strong> You as a hood admin added the inbox
-  convallis in, porttitor nec sapien. Morbi in lacus convallis, elementum turpis
+    "kibicara-my-hood-inbox" to your hood. John wants to send a message to all
-  in, venenatis mi. Vestibulum bibendum rhoncus pulvinar. Sed hendrerit ipsum
+    hood subscribers. He then uses his normal email program to send his message
-  eget varius venenatis. Maecenas consectetur felis libero, fringilla fringilla
+    to "kibicara-my-hood-inbox@{{ domain }}". His message will be distributed to
-  justo pellentesque non. Quisque congue dictum arcu ut fermentum. Aliquam
+    the other platforms and Sandra who is subscribed to your telegram hood bot
-  egestas, lectus at mollis pulvinar, diam libero sagittis eros, a lobortis
+    gets John's message.
-  neque ligula eget odio. Praesent a tortor consequat, viverra odio id, feugiat
+  </p>
-  sem. Mauris orci velit, molestie sit amet urna laoreet, aliquet consectetur
+  <h3>How to add a hood inbox?</h3>
-  risus. Cras tristique odio nec placerat viverra. Suspendisse id pretium risus,
+  <p>
-  sit amet consectetur turpis. Nunc mattis, felis a iaculis varius, est nulla
+    Just click on "Add a new platform connection!" and choose a name for the
-  aliquam massa, aliquet dictum ipsum est nec erat. Integer tristique tellus
+    email inbox, as below:
-  felis, ut porttitor nisi blandit nec. Pellentesque habitant morbi tristique
+  </p>
-  senectus et netus et malesuada fames ac turpis egestas. Integer sagittis justo
+  <img class="example-image" src="assets/email2.png" />
-  ut elit gravida, vitae dignissim urna vehicula. Ut in ante non neque dignissim
+  <h3>Can I stop relaying emails?</h3>
-  scelerisque non id nisi. Sed sit amet posuere felis. Integer eget eros auctor,
+  <p>
-  ultrices arcu vel, feugiat erat. Curabitur rhoncus porta erat ut ullamcorper.
+    Yes, if you want to stop relaying emails, just use the switch to stop email
-  Duis in dictum tortor. Nam rutrum volutpat libero id interdum. Vestibulum vel
+    relaying.
-  ante eget risus elementum iaculis eget ut mauris. Vestibulum ultrices nunc
+  </p>
-  quis leo venenatis, id tristique purus tempus. Fusce nec tellus dui. Nulla
+</mat-dialog-content>
-  bibendum nisi ut posuere pellentesque. Vivamus malesuada mollis dui a posuere.
-  Curabitur et lacus at augue posuere facilisis. Ut posuere orci mauris, at
-  hendrerit elit dignissim vel. Quisque vitae ipsum sed sem mattis hendrerit.
-  Pellentesque consectetur convallis consectetur. Praesent sit amet augue in dui
-  congue efficitur ac gravida metus. Sed nibh urna, facilisis at urna vitae,
-  tristique vestibulum velit. Maecenas et aliquet purus, non rutrum eros. Donec
-  maximus orci vel tortor maximus, finibus porttitor mauris convallis. Maecenas
-  eget quam vel nulla dapibus hendrerit. Vivamus malesuada neque ut elit
-  commodo, non viverra magna facilisis. Maecenas finibus ante non dui posuere,
-  sed varius leo elementum. Nullam eget vestibulum mauris. Maecenas in ipsum
-  lectus. Sed tempus at dolor sed posuere. Proin eget nulla dignissim, finibus
-  arcu eu, fringilla tellus. Nullam bibendum felis sed nulla lobortis sodales.
-  Nunc in elementum felis, quis aliquam velit. Morbi sodales sollicitudin
-  mollis.
-</p>

kibicara-frontend/src/app/platforms/email/email-settings/email-info-dialog/email-info-dialog.component.scss

@@ -0,0 +1,10 @@
+.example-image {
+  margin-left: 10%;
+  margin-right: 10%;
+  width: 80%;
+  @media screen and (max-width: 600px) {
+    width: 100%;
+    margin-left: 0%;
+    margin-right: 0%;
+  }
+}

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

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { environment } from 'src/environments/environment';
 
 @Component({
   selector: 'app-email-info-dialog',
@@ -6,6 +7,7 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./email-info-dialog.component.scss'],
 })
 export class EmailInfoDialogComponent implements OnInit {
+  domain = environment.EMAIL_DOMAIN;
   constructor() {}
 
   ngOnInit(): void {}

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

@@ -6,8 +6,8 @@ import { TwitterSettingsComponent } from './twitter/twitter-settings/twitter-set
 import { EmailSettingsComponent } from './email/email-settings/email-settings.component';
 import { EmailDialogComponent } from './email/email-settings/email-dialog/email-dialog.component';
 import { EmailInfoDialogComponent } from './email/email-settings/email-info-dialog/email-info-dialog.component';
-import { TelegramInfoDialogComponent } from './telegram/telegram-info-dialog/telegram-info-dialog.component';
+import { TelegramInfoDialogComponent } from './telegram/telegram-settings/telegram-info-dialog/telegram-info-dialog.component';
-import { TelegramDialogComponent } from './telegram/telegram-dialog/telegram-dialog.component';
+import { TelegramDialogComponent } from './telegram/telegram-settings/telegram-dialog/telegram-dialog.component';
 import { TwitterInfoDialogComponent } from './twitter/twitter-info-dialog/twitter-info-dialog.component';
 import { TwitterCallbackComponent } from './twitter/twitter-callback/twitter-callback.component';
 import { TwitterCorpsesPipe } from './twitter/twitter-corpses-pipe/twitter-corpses.pipe';

kibicara-frontend/src/app/platforms/telegram/telegram-dialog/telegram-dialog.component.scss

@@ -1,14 +0,0 @@
-.input {
-  display: grid;
-  grid-template-rows: 1fr 3fr;
-  width: 100%;
-}
-
-form {
-  margin-top: 10px;
-  height: 100%;
-}
-
-textarea {
-  height: 120px;
-}

kibicara-frontend/src/app/platforms/telegram/telegram-info-dialog/telegram-info-dialog.component.html

@@ -1,42 +0,0 @@
-<p>
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras maximus arcu at
-  magna euismod sollicitudin. Vestibulum ut auctor libero. Etiam volutpat, nisl
-  sed efficitur hendrerit, nunc risus hendrerit nulla, sollicitudin malesuada
-  neque sem sed tortor. Vestibulum laoreet elementum nibh ultrices ullamcorper.
-  Sed porta gravida lectus, suscipit dictum ligula pharetra posuere. Vivamus
-  pellentesque ex eget lacus consectetur, at pulvinar est pellentesque.
-  Phasellus a elit tempor, tristique tortor auctor, maximus eros. Duis magna
-  sapien, accumsan nec massa nec, porta auctor leo. Nam nibh nisl, hendrerit nec
-  convallis in, porttitor nec sapien. Morbi in lacus convallis, elementum turpis
-  in, venenatis mi. Vestibulum bibendum rhoncus pulvinar. Sed hendrerit ipsum
-  eget varius venenatis. Maecenas consectetur felis libero, fringilla fringilla
-  justo pellentesque non. Quisque congue dictum arcu ut fermentum. Aliquam
-  egestas, lectus at mollis pulvinar, diam libero sagittis eros, a lobortis
-  neque ligula eget odio. Praesent a tortor consequat, viverra odio id, feugiat
-  sem. Mauris orci velit, molestie sit amet urna laoreet, aliquet consectetur
-  risus. Cras tristique odio nec placerat viverra. Suspendisse id pretium risus,
-  sit amet consectetur turpis. Nunc mattis, felis a iaculis varius, est nulla
-  aliquam massa, aliquet dictum ipsum est nec erat. Integer tristique tellus
-  felis, ut porttitor nisi blandit nec. Pellentesque habitant morbi tristique
-  senectus et netus et malesuada fames ac turpis egestas. Integer sagittis justo
-  ut elit gravida, vitae dignissim urna vehicula. Ut in ante non neque dignissim
-  scelerisque non id nisi. Sed sit amet posuere felis. Integer eget eros auctor,
-  ultrices arcu vel, feugiat erat. Curabitur rhoncus porta erat ut ullamcorper.
-  Duis in dictum tortor. Nam rutrum volutpat libero id interdum. Vestibulum vel
-  ante eget risus elementum iaculis eget ut mauris. Vestibulum ultrices nunc
-  quis leo venenatis, id tristique purus tempus. Fusce nec tellus dui. Nulla
-  bibendum nisi ut posuere pellentesque. Vivamus malesuada mollis dui a posuere.
-  Curabitur et lacus at augue posuere facilisis. Ut posuere orci mauris, at
-  hendrerit elit dignissim vel. Quisque vitae ipsum sed sem mattis hendrerit.
-  Pellentesque consectetur convallis consectetur. Praesent sit amet augue in dui
-  congue efficitur ac gravida metus. Sed nibh urna, facilisis at urna vitae,
-  tristique vestibulum velit. Maecenas et aliquet purus, non rutrum eros. Donec
-  maximus orci vel tortor maximus, finibus porttitor mauris convallis. Maecenas
-  eget quam vel nulla dapibus hendrerit. Vivamus malesuada neque ut elit
-  commodo, non viverra magna facilisis. Maecenas finibus ante non dui posuere,
-  sed varius leo elementum. Nullam eget vestibulum mauris. Maecenas in ipsum
-  lectus. Sed tempus at dolor sed posuere. Proin eget nulla dignissim, finibus
-  arcu eu, fringilla tellus. Nullam bibendum felis sed nulla lobortis sodales.
-  Nunc in elementum felis, quis aliquam velit. Morbi sodales sollicitudin
-  mollis.
-</p>

kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-dialog/telegram-dialog.component.scss

@@ -0,0 +1,25 @@
+.input {
+  display: grid;
+  grid-template-rows: 1fr 3fr;
+  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%;
+  }
+}

kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-dialog/telegram-dialog.component.ts

@@ -4,7 +4,6 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { TelegramService, BodyTelegram } from 'src/app/core/api';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { first } from 'rxjs/operators';
-import { map } from 'rxjs/operators';
 
 @Component({
   selector: 'app-telegram-dialog',

kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-info-dialog/telegram-info-dialog.component.html

@@ -0,0 +1,58 @@
+<mat-dialog-content>
+  <h2>How to add an telegram bot to your hood</h2>
+  <h3>What is a telegram bot?</h3>
+  <p>
+    Telegram bots are Telegram accounts operated by software. In our case we
+    will show you how to add a bot for users to subscribe to, so they can send
+    messages into your hood system, which get distributed to the other
+    platforms. Also they can receive messages from other platforms
+  </p>
+  <p>
+    <strong>Example: </strong> You as a hood admin added the bot
+    @kibicara-my-hood to your hood. John wants to send a message to all hood
+    subscribers. He then uses his telegram account to subscribe to the bot
+    @kibicara-my-hood and sends his message to the bot. His message will be
+    distributed to the other platforms and Sandra who is subscribed to your
+    email hood bot gets John's message via email.
+  </p>
+  <h3>How to add a telegram bot to your hood?</h3>
+  <ol>
+    <li>
+      <a href="https://telegram.org/" target="_blank"
+        >Download the telegram app</a
+      >
+      and create a telegram account for your hood if you don't have one.
+    </li>
+    <li>
+      Start a conversation with the
+      <a href="https://t.me/botfather">@botfather</a> bot by sending a message
+      with the content <strong>/start</strong>.
+    </li>
+    <li>
+      Create a new bot by sending another message with the content
+      <strong>/newbot</strong>. Follow the instruction of the botfather, pick a
+      cool name for your bot when asked.
+    </li>
+    <li>
+      The @botfather will give you a token (the line below
+      <strong>Use this token to access the HTTP API:</strong>). Copy it.
+    </li>
+    <li>
+      Add the telegram bot here by clicking on
+      <strong>Add new platform connection!</strong>. Paste the token from the
+      botfather in the input that says <strong>Telegram API Token</strong>.
+    </li>
+    <li>
+      Add a welcome message that users will see if they subscribe to your bot.
+    </li>
+    <li>
+      Click <strong>Add telegram bot</strong> to add your telegram bot. Done!
+    </li>
+  </ol>
+  <img class="example-image" src="assets/telegram2.png" />
+  <h3>Can I stop relaying telegram messages?</h3>
+  <p>
+    Yes, if you want to stop relaying telegram messages from a specific telegram
+    bot, just use the switch to the bot to stop relaying.
+  </p>
+</mat-dialog-content>

kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-info-dialog/telegram-info-dialog.component.scss

@@ -0,0 +1,10 @@
+.example-image {
+  margin-left: 10%;
+  margin-right: 10%;
+  width: 80%;
+  @media screen and (max-width: 600px) {
+    width: 100%;
+    margin-left: 0%;
+    margin-right: 0%;
+  }
+}

kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-settings.component.html

@@ -5,7 +5,7 @@
       Telegram
       <button mat-icon-button aria-label="How to use">
         <mat-icon
-          matTooltip="How to send and receive hood broadcast messages with telegram"
+          matTooltip="How to add an telegram bot to your hood"
           class="info-button"
           (click)="onInfoClick()"
           >info</mat-icon

kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-settings.component.ts

@@ -1,9 +1,9 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { TelegramService } from 'src/app/core/api';
 import { Observable } from 'rxjs';
-import { TelegramInfoDialogComponent } from '../telegram-info-dialog/telegram-info-dialog.component';
+import { TelegramInfoDialogComponent } from './telegram-info-dialog/telegram-info-dialog.component';
 import { MatDialog } from '@angular/material/dialog';
-import { TelegramDialogComponent } from '../telegram-dialog/telegram-dialog.component';
+import { TelegramDialogComponent } from './telegram-dialog/telegram-dialog.component';
 import { YesNoDialogComponent } from 'src/app/shared/yes-no-dialog/yes-no-dialog.component';
 import { MatSnackBar } from '@angular/material/snack-bar';
 

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

@@ -6,7 +6,7 @@
         Twitter
         <button mat-icon-button aria-label="How to use">
           <mat-icon
-            matTooltip="How to send and receive hood broadcast messages with twitter"
+            matTooltip="How to add an twitter bot to your hood"
             class="info-button"
             (click)="onInfoClick()"
             >info</mat-icon