diff --git a/kibicara-frontend/src/app/dashboard/board/hoodsettings/hoodsettings.component.scss b/kibicara-frontend/src/app/dashboard/board/hoodsettings/hoodsettings.component.scss index abc1b05..db92b60 100644 --- a/kibicara-frontend/src/app/dashboard/board/hoodsettings/hoodsettings.component.scss +++ b/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; + } } diff --git a/kibicara-frontend/src/app/platforms/email/email-settings/email-info-dialog/email-info-dialog.component.html b/kibicara-frontend/src/app/platforms/email/email-settings/email-info-dialog/email-info-dialog.component.html index b6557e7..19e0572 100644 --- a/kibicara-frontend/src/app/platforms/email/email-settings/email-info-dialog/email-info-dialog.component.html +++ b/kibicara-frontend/src/app/platforms/email/email-settings/email-info-dialog/email-info-dialog.component.html @@ -1,42 +1,27 @@ -

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

+ +

How to add an inbox address to your hood

+

What is a hood inbox?

+

+ A hood inbox is an email address where users can send an email to. This + email gets thrown into the hood system and distributed to other platforms. +

+

+ Example: You as a hood admin added the inbox + "kibicara-my-hood-inbox" to your hood. John wants to send a message to all + hood subscribers. He then uses his normal email program to send his message + to "kibicara-my-hood-inbox@{{ domain }}". His message will be distributed to + the other platforms and Sandra who is subscribed to your telegram hood bot + gets John's message. +

+

How to add a hood inbox?

+

+ Just click on "Add a new platform connection!" and choose a name for the + email inbox, as below: +

+ +

Can I stop relaying emails?

+

+ Yes, if you want to stop relaying emails, just use the switch to stop email + relaying. +

+
diff --git a/kibicara-frontend/src/app/platforms/email/email-settings/email-info-dialog/email-info-dialog.component.scss b/kibicara-frontend/src/app/platforms/email/email-settings/email-info-dialog/email-info-dialog.component.scss index e69de29..4c20e75 100644 --- a/kibicara-frontend/src/app/platforms/email/email-settings/email-info-dialog/email-info-dialog.component.scss +++ b/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%; + } +} diff --git a/kibicara-frontend/src/app/platforms/email/email-settings/email-info-dialog/email-info-dialog.component.ts b/kibicara-frontend/src/app/platforms/email/email-settings/email-info-dialog/email-info-dialog.component.ts index 5944b08..69e0f98 100644 --- a/kibicara-frontend/src/app/platforms/email/email-settings/email-info-dialog/email-info-dialog.component.ts +++ b/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 {} diff --git a/kibicara-frontend/src/app/platforms/platforms.module.ts b/kibicara-frontend/src/app/platforms/platforms.module.ts index 6eedaed..8d19ff4 100644 --- a/kibicara-frontend/src/app/platforms/platforms.module.ts +++ b/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 { TelegramDialogComponent } from './telegram/telegram-dialog/telegram-dialog.component'; +import { TelegramInfoDialogComponent } from './telegram/telegram-settings/telegram-info-dialog/telegram-info-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'; diff --git a/kibicara-frontend/src/app/platforms/telegram/telegram-dialog/telegram-dialog.component.scss b/kibicara-frontend/src/app/platforms/telegram/telegram-dialog/telegram-dialog.component.scss deleted file mode 100644 index b7411b5..0000000 --- a/kibicara-frontend/src/app/platforms/telegram/telegram-dialog/telegram-dialog.component.scss +++ /dev/null @@ -1,14 +0,0 @@ -.input { - display: grid; - grid-template-rows: 1fr 3fr; - width: 100%; -} - -form { - margin-top: 10px; - height: 100%; -} - -textarea { - height: 120px; -} diff --git a/kibicara-frontend/src/app/platforms/telegram/telegram-info-dialog/telegram-info-dialog.component.html b/kibicara-frontend/src/app/platforms/telegram/telegram-info-dialog/telegram-info-dialog.component.html deleted file mode 100644 index b6557e7..0000000 --- a/kibicara-frontend/src/app/platforms/telegram/telegram-info-dialog/telegram-info-dialog.component.html +++ /dev/null @@ -1,42 +0,0 @@ -

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

diff --git a/kibicara-frontend/src/app/platforms/telegram/telegram-info-dialog/telegram-info-dialog.component.scss b/kibicara-frontend/src/app/platforms/telegram/telegram-info-dialog/telegram-info-dialog.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/kibicara-frontend/src/app/platforms/telegram/telegram-dialog/telegram-dialog.component.html b/kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-dialog/telegram-dialog.component.html similarity index 100% rename from kibicara-frontend/src/app/platforms/telegram/telegram-dialog/telegram-dialog.component.html rename to kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-dialog/telegram-dialog.component.html diff --git a/kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-dialog/telegram-dialog.component.scss b/kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-dialog/telegram-dialog.component.scss new file mode 100644 index 0000000..fa40356 --- /dev/null +++ b/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%; + } +} diff --git a/kibicara-frontend/src/app/platforms/telegram/telegram-dialog/telegram-dialog.component.spec.ts b/kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-dialog/telegram-dialog.component.spec.ts similarity index 100% rename from kibicara-frontend/src/app/platforms/telegram/telegram-dialog/telegram-dialog.component.spec.ts rename to kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-dialog/telegram-dialog.component.spec.ts diff --git a/kibicara-frontend/src/app/platforms/telegram/telegram-dialog/telegram-dialog.component.ts b/kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-dialog/telegram-dialog.component.ts similarity index 98% rename from kibicara-frontend/src/app/platforms/telegram/telegram-dialog/telegram-dialog.component.ts rename to kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-dialog/telegram-dialog.component.ts index b8cc0cd..be03fba 100644 --- a/kibicara-frontend/src/app/platforms/telegram/telegram-dialog/telegram-dialog.component.ts +++ b/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', diff --git a/kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-info-dialog/telegram-info-dialog.component.html b/kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-info-dialog/telegram-info-dialog.component.html new file mode 100644 index 0000000..2a308a4 --- /dev/null +++ b/kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-info-dialog/telegram-info-dialog.component.html @@ -0,0 +1,58 @@ + +

How to add an telegram bot to your hood

+

What is a telegram bot?

+

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

+

+ Example: 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. +

+

How to add a telegram bot to your hood?

+
    +
  1. + Download the telegram app + and create a telegram account for your hood if you don't have one. +
  2. +
  3. + Start a conversation with the + @botfather bot by sending a message + with the content /start. +
  4. +
  5. + Create a new bot by sending another message with the content + /newbot. Follow the instruction of the botfather, pick a + cool name for your bot when asked. +
  6. +
  7. + The @botfather will give you a token (the line below + Use this token to access the HTTP API:). Copy it. +
  8. +
  9. + Add the telegram bot here by clicking on + Add new platform connection!. Paste the token from the + botfather in the input that says Telegram API Token. +
  10. +
  11. + Add a welcome message that users will see if they subscribe to your bot. +
  12. +
  13. + Click Add telegram bot to add your telegram bot. Done! +
  14. +
+ +

Can I stop relaying telegram messages?

+

+ Yes, if you want to stop relaying telegram messages from a specific telegram + bot, just use the switch to the bot to stop relaying. +

+
diff --git a/kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-info-dialog/telegram-info-dialog.component.scss b/kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-info-dialog/telegram-info-dialog.component.scss new file mode 100644 index 0000000..4c20e75 --- /dev/null +++ b/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%; + } +} diff --git a/kibicara-frontend/src/app/platforms/telegram/telegram-info-dialog/telegram-info-dialog.component.ts b/kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-info-dialog/telegram-info-dialog.component.ts similarity index 100% rename from kibicara-frontend/src/app/platforms/telegram/telegram-info-dialog/telegram-info-dialog.component.ts rename to kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-info-dialog/telegram-info-dialog.component.ts diff --git a/kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-settings.component.html b/kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-settings.component.html index 78d900a..e6bffba 100644 --- a/kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-settings.component.html +++ b/kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-settings.component.html @@ -5,7 +5,7 @@ Telegram