Commit 48c8efd1 authored by Benjamin Krause's avatar Benjamin Krause
Browse files

Adjust UI

parent c37b9383
......@@ -6,6 +6,16 @@
</head>
<body>
<div class="login-area">
<label for="providers">Provider</label>
<select name="providers" id="providers">
</select>
<label for="mailbox">Mailbox</label>
<input type="text" name="mailbox" id="mailbox" value="INBOX"/>
<label for="login-name">Login Name</label>
<input type="text" name="login-name" id="login-name" />
<label for="mail">Mail</label>
<input type="text" name="mail" id="mail" />
......@@ -29,7 +39,7 @@
id="to"
placeholder="Type an receiver mail"
/>
<input type="text" name="text" id="text" placeholder="Type some Text" />
<textarea type="text" name="text" id="text" placeholder="Type some Text" />
<button id="send">Send Message</button>
</footer>
......
......@@ -3,10 +3,17 @@
import "./style.scss";
import axios from "axios";
import { mailProviders } from './mail_providers';
const subjectIdentifier: string = "#ba_subject";
let userData: {
login_name: string;
mail: string;
password: string;
} = { mail: "", password: "" };
} = { mail: "", password: "", login_name: ""};
let chosenProvider = mailProviders[0];
export namespace EmailProxy {
const protocol = "http://";
......@@ -16,12 +23,15 @@ export namespace EmailProxy {
export async function getMail(obj: {
user: {
login_name: string;
mail: string;
password: string;
};
mailbox: string;
provider: any;
search_subject: string;
}) {
const url = `${baseUrl}mails/get`;
const url = `${baseUrl}provider/user/mailbox/search_mails`;
let response = await axios
.post(url, obj)
.then((response) => {
......@@ -44,8 +54,12 @@ export namespace EmailProxy {
};
subject: string;
message: string;
provider: any;
}) {
const url = `${baseUrl}mails/send`;
const url = `${baseUrl}provider/user/send_mail`;
if (!obj.subject.search(subjectIdentifier)) {
obj.subject + ` - ${subjectIdentifier}`;
}
let response = await axios
.post(url, obj)
.then((response) => {
......@@ -67,19 +81,27 @@ function removeChilds(parent: HTMLElement) {
async function fillChat() {
const resp = await EmailProxy.getMail({
user: {
login_name: userData.login_name,
mail: userData.mail,
password: userData.password,
},
mailbox: "Spam",
mailbox: (document.querySelector('#mailbox') as HTMLInputElement).value,
provider: chosenProvider,
search_subject: `SUBJECT ${subjectIdentifier}`
});
const data = resp.data;
if (!data) {
return;
}
const parent: HTMLElement = document.querySelector("#chat-content");
removeChilds(parent);
data.forEach((element) => {
const text = document.createElement("li");
const date = new Date(element.date);
const dateString = `${date.getDate()}.${date.getMonth()}.${date.getFullYear()} ${date.getHours()}:${date.getMinutes()}`
text.innerText = `${element.mail_from} - ${dateString} - ${JSON.parse(element.body).message}`;
const dateString = `${date.getDate()}.${date.getMonth()}.${date.getFullYear()} ${date.getHours()}:${date.getMinutes()}`;
text.innerText = `${element.mail_from} - ${dateString} - ${
JSON.parse(element.body).message
}`;
parent.appendChild(text);
});
}
......@@ -102,6 +124,7 @@ function setNotifierStatus(status: boolean) {
function init() {
document.querySelector("#login-btn").addEventListener("click", () => {
userData.login_name = (document.querySelector("#login-name") as HTMLInputElement).value;
userData.mail = (document.querySelector("#mail") as HTMLInputElement).value;
userData.password = (document.querySelector(
"#password"
......@@ -120,20 +143,40 @@ function init() {
document.querySelector("#send").addEventListener("click", () => {
const obj = {
from_user: {
login_name: userData.login_name,
mail: userData.mail,
password: userData.password,
},
to_user: {
login_name: "",
mail: (document.querySelector("#to") as HTMLInputElement).value,
password: "",
},
subject: "Test",
message: JSON.stringify({
message: (document.querySelector("#text") as HTMLInputElement).value
}, null, "\t"),
subject: `${subjectIdentifier}`,
message: JSON.stringify(
{
message: (document.querySelector("#text") as HTMLInputElement).value,
},
null,
"\t"
),
provider: chosenProvider
};
work(obj);
});
const providerSelection = document.querySelector('#providers');
mailProviders.forEach(provider => {
const option = document.createElement("option");
option.value = provider.id;
option.innerText = provider.name;
providerSelection.appendChild(option);
});
providerSelection.addEventListener("change", (evt) => {
chosenProvider = mailProviders[(event.target as HTMLSelectElement).selectedIndex];
})
}
init();
export enum Encryption {
SSL_TLS = "SSL_TLS",
STARTTLS = "STARTTLS",
}
export const mailProviders = [
{
name: "web.de",
id: "webde",
base_url: "web.de",
imap_url: "imap.web.de",
imap_port: 993,
imap_encryption: Encryption.SSL_TLS,
smtp_url: "smtp.web.de",
smtp_port: 587,
smtp_encryption: Encryption.STARTTLS,
},
{
id: "thluebeck",
name: "TH Lübeck",
base_url: "th-luebeck.de",
imap_url: "mail.th-luebeck.de",
imap_port: 993,
imap_encryption: Encryption.SSL_TLS,
smtp_url: "mail.th-luebeck.de",
smtp_port: 587,
smtp_encryption: Encryption.STARTTLS,
},
];
......@@ -55,4 +55,7 @@ body {
margin-top: auto;
background-color: gray;
padding: 10px;
input, textarea, button {
display: inline-block;
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment