[frontend] Add email and telegram add description
This commit is contained in:
Cathy Hu
parent
e9020957b5
commit
c732bd4227
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,42 +1,27 @@
|
|||
<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>
|
||||
<mat-dialog-content>
|
||||
<h2>How to add an inbox address to your hood</h2>
|
||||
<h3>What is a hood inbox?</h3>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Example: </strong> 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.
|
||||
</p>
|
||||
<h3>How to add a hood inbox?</h3>
|
||||
<p>
|
||||
Just click on "Add a new platform connection!" and choose a name for the
|
||||
email inbox, as below:
|
||||
</p>
|
||||
<img class="example-image" src="assets/email2.png" />
|
||||
<h3>Can I stop relaying emails?</h3>
|
||||
<p>
|
||||
Yes, if you want to stop relaying emails, just use the switch to stop email
|
||||
relaying.
|
||||
</p>
|
||||
</mat-dialog-content>
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
|
|
@ -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 {}
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -1,14 +0,0 @@
|
|||
.input {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 3fr;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
form {
|
||||
margin-top: 10px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: 120px;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
|
|
@ -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',
|
||||
|
|
@ -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>
|
||||
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
BIN
kibicara-frontend/src/assets/email2.png
Normal file
BIN
kibicara-frontend/src/assets/email2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
kibicara-frontend/src/assets/telegram2.png
Normal file
BIN
kibicara-frontend/src/assets/telegram2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Loading…
Reference in a new issue