Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Krause, Benjamin
email_proxy
Commits
a1e9c3f3
Commit
a1e9c3f3
authored
Aug 19, 2020
by
Benjamin Krause
Browse files
Add styles to the ui
parent
75b691be
Changes
3
Hide whitespace changes
Inline
Side-by-side
web/src/index.html
View file @
a1e9c3f3
<!DOCTYPE html>
<!DOCTYPE html>
<html
lang=
"en"
>
<html
lang=
"en"
>
<head>
<head>
<meta
charset=
"UTF-8"
>
<meta
charset=
"UTF-8"
/
>
<title>
Email - Test
</title>
<title>
Email - Test
</title>
</head>
</head>
<body>
<body>
<div
class=
"login"
>
<div
class=
"login
-area
"
>
<label
for=
"mail"
>
Mail
</label>
<label
for=
"mail"
>
Mail
</label>
<input
type=
"text"
name=
"mail"
id=
"mail"
>
<input
type=
"text"
name=
"mail"
id=
"mail"
/
>
<label
for=
"password"
>
Password
</label>
<label
for=
"password"
>
Password
</label>
<input
type=
"password"
name=
"password"
id=
"password"
>
<input
type=
"password"
name=
"password"
id=
"password"
/
>
<button
id=
"login-btn"
>
Login
</button>
<button
id=
"login-btn"
>
Login
</button>
</div>
</div>
<div
id=
"chat"
class=
"chat-window"
>
<div
id=
"chat"
class=
"chat-window"
>
<div
id=
"chat-content"
></div>
<div
class=
"notifier"
>
<div></div>
</div>
</div>
</div>
<input
type=
"text"
name=
"to"
id=
"to"
placeholder=
"Type an receiver mail"
>
<footer
class=
"send-area"
>
<input
type=
"text"
name=
"text"
id=
"text"
placeholder=
"Type some Text"
>
<input
<button
id=
"send"
>
Send Message
</button>
type=
"text"
name=
"to"
id=
"to"
placeholder=
"Type an receiver mail"
/>
<input
type=
"text"
name=
"text"
id=
"text"
placeholder=
"Type some Text"
/>
<button
id=
"send"
>
Send Message
</button>
</footer>
<script
src=
"index.ts"
></script>
<script
src=
"index.ts"
></script>
</body>
</body>
</html>
</html>
\ No newline at end of file
web/src/index.ts
View file @
a1e9c3f3
...
@@ -4,9 +4,9 @@ import "./style.scss";
...
@@ -4,9 +4,9 @@ import "./style.scss";
import
axios
from
"
axios
"
;
import
axios
from
"
axios
"
;
let
userData
:
{
let
userData
:
{
mail
:
string
,
mail
:
string
;
password
:
string
password
:
string
;
}
=
{
mail
:
""
,
password
:
""
}
}
=
{
mail
:
""
,
password
:
""
};
export
namespace
EmailProxy
{
export
namespace
EmailProxy
{
const
protocol
=
"
http://
"
;
const
protocol
=
"
http://
"
;
...
@@ -16,10 +16,10 @@ export namespace EmailProxy {
...
@@ -16,10 +16,10 @@ export namespace EmailProxy {
export
async
function
getMail
(
obj
:
{
export
async
function
getMail
(
obj
:
{
user
:
{
user
:
{
mail
:
string
,
mail
:
string
;
password
:
string
password
:
string
;
}
,
}
;
mailbox
:
string
mailbox
:
string
;
})
{
})
{
const
url
=
`
${
baseUrl
}
mails/get`
;
const
url
=
`
${
baseUrl
}
mails/get`
;
let
response
=
await
axios
let
response
=
await
axios
...
@@ -31,36 +31,36 @@ export namespace EmailProxy {
...
@@ -31,36 +31,36 @@ export namespace EmailProxy {
return
reason
.
response
;
return
reason
.
response
;
});
});
return
response
;
return
response
;
}
}
export
async
function
sendMail
(
obj
:
{
export
async
function
sendMail
(
obj
:
{
from_user
:
{
from_user
:
{
mail
:
string
,
mail
:
string
;
password
:
string
password
:
string
;
}
,
}
;
to_user
:
{
to_user
:
{
mail
:
string
,
mail
:
string
;
password
:
string
password
:
string
;
}
,
}
;
subject
:
string
,
subject
:
string
;
message
:
string
message
:
string
;
})
{
})
{
const
url
=
`
${
baseUrl
}
mails/send`
;
const
url
=
`
${
baseUrl
}
mails/send`
;
let
response
=
await
axios
let
response
=
await
axios
.
post
(
url
,
obj
)
.
post
(
url
,
obj
)
.
then
((
response
)
=>
{
.
then
((
response
)
=>
{
return
response
;
return
response
;
})
})
.
catch
((
reason
)
=>
{
.
catch
((
reason
)
=>
{
return
reason
.
response
;
return
reason
.
response
;
});
});
return
response
;
return
response
;
}
}
}
}
function
removeChilds
(
parent
:
HTMLElement
)
{
function
removeChilds
(
parent
:
HTMLElement
)
{
while
(
parent
.
firstChild
)
{
while
(
parent
.
firstChild
)
{
parent
.
firstChild
.
remove
()
parent
.
firstChild
.
remove
()
;
}
}
}
}
...
@@ -68,53 +68,70 @@ async function fillChat() {
...
@@ -68,53 +68,70 @@ async function fillChat() {
const
resp
=
await
EmailProxy
.
getMail
({
const
resp
=
await
EmailProxy
.
getMail
({
user
:
{
user
:
{
mail
:
userData
.
mail
,
mail
:
userData
.
mail
,
password
:
userData
.
password
password
:
userData
.
password
,
},
},
mailbox
:
"
Spam
"
mailbox
:
"
Spam
"
,
})
})
;
const
data
=
resp
.
data
;
const
data
=
resp
.
data
;
const
parent
:
HTMLElement
=
document
.
querySelector
(
"
#chat
"
);
const
parent
:
HTMLElement
=
document
.
querySelector
(
"
#chat
-content
"
);
removeChilds
(
parent
)
removeChilds
(
parent
)
;
data
.
forEach
(
element
=>
{
data
.
forEach
(
(
element
)
=>
{
const
text
=
document
.
createElement
(
"
li
"
);
const
text
=
document
.
createElement
(
"
li
"
);
text
.
innerText
=
`
${
element
.
mail_from
}
-
${
element
.
date
}
-
${
element
.
body
}
`
const
date
=
new
Date
(
element
.
date
);
const
dateString
=
`
${
date
.
getDate
()}
.
${
date
.
getMonth
()}
.
${
date
.
getFullYear
()}
${
date
.
getHours
()}
:
${
date
.
getMinutes
()}
`
text
.
innerText
=
`
${
element
.
mail_from
}
-
${
dateString
}
-
${
element
.
body
}
`
;
parent
.
appendChild
(
text
);
parent
.
appendChild
(
text
);
});
});
}
}
async
function
work
(
obj
:
any
)
{
async
function
work
(
obj
:
any
)
{
const
resp
=
await
EmailProxy
.
sendMail
(
obj
)
const
resp
=
await
EmailProxy
.
sendMail
(
obj
)
;
const
data
=
resp
.
data
;
const
data
=
resp
.
data
;
console
.
log
(
data
);
console
.
log
(
data
);
}
}
function
setNotifierStatus
(
status
:
boolean
)
{
document
.
querySelectorAll
(
"
.notifier
"
).
forEach
((
element
)
=>
{
if
(
status
)
{
element
.
classList
.
add
(
"
green
"
);
}
else
{
element
.
classList
.
remove
(
"
green
"
);
}
});
}
function
init
()
{
function
init
()
{
document
.
querySelector
(
"
#login-btn
"
).
addEventListener
(
"
click
"
,
()
=>
{
document
.
querySelector
(
"
#login-btn
"
).
addEventListener
(
"
click
"
,
()
=>
{
userData
.
mail
=
(
document
.
querySelector
(
"
#mail
"
)
as
HTMLInputElement
).
value
;
userData
.
mail
=
(
document
.
querySelector
(
"
#mail
"
)
as
HTMLInputElement
).
value
;
userData
.
password
=
(
document
.
querySelector
(
"
#password
"
)
as
HTMLInputElement
).
value
;
userData
.
password
=
(
document
.
querySelector
(
(
document
.
querySelector
(
"
#login-btn
"
)
as
HTMLButtonElement
).
disabled
=
true
"
#password
"
fillChat
()
)
as
HTMLInputElement
).
value
;
(
document
.
querySelector
(
"
#login-btn
"
)
as
HTMLButtonElement
).
disabled
=
true
;
fillChat
();
setInterval
(()
=>
{
setInterval
(()
=>
{
fillChat
();
fillChat
();
console
.
log
(
"
update
"
);
setNotifierStatus
(
true
);
},
10
*
1000
);
setTimeout
(()
=>
{
})
setNotifierStatus
(
false
);
},
500
);
},
5
*
1000
);
});
document
.
querySelector
(
'
#send
'
).
addEventListener
(
"
click
"
,
()
=>
{
document
.
querySelector
(
"
#send
"
).
addEventListener
(
"
click
"
,
()
=>
{
const
obj
=
{
const
obj
=
{
from_user
:
{
from_user
:
{
mail
:
userData
.
mail
,
mail
:
userData
.
mail
,
password
:
userData
.
password
password
:
userData
.
password
,
},
},
to_user
:
{
to_user
:
{
mail
:
(
document
.
querySelector
(
'
#to
'
)
as
HTMLInputElement
).
value
,
mail
:
(
document
.
querySelector
(
"
#to
"
)
as
HTMLInputElement
).
value
,
password
:
""
password
:
""
,
},
},
subject
:
"
Test
"
,
subject
:
"
Test
"
,
message
:
(
document
.
querySelector
(
"
#text
"
)
as
HTMLInputElement
).
value
message
:
(
document
.
querySelector
(
"
#text
"
)
as
HTMLInputElement
).
value
,
}
}
;
work
(
obj
)
work
(
obj
)
;
});
});
}
}
init
()
init
();
\ No newline at end of file
web/src/style.scss
View file @
a1e9c3f3
html
,
body
{
body
{
display
:
block
;
height
:
100%
;
}
body
{
display
:
flex
;
flex-direction
:
column
;
position
:
relative
;
position
:
relative
;
width
:
100%
;
width
:
100%
;
padding
:
0
;
padding
:
0
;
...
@@ -8,13 +13,46 @@ body {
...
@@ -8,13 +13,46 @@ body {
.chat-window
{
.chat-window
{
position
:
relative
;
position
:
relative
;
border
:
2px
solid
black
;
background-color
:
darkgray
;
border-radius
:
5px
;
height
:
100%
;
height
:
300px
;
padding
:
10px
;
padding
:
10px
;
overflow
:
scroll
;
li
{
li
{
margin
:
10px
0
;
margin
:
10px
0
;
border
:
2px
solid
lightgray
;
padding
:
5px
;
background-color
:
lightgray
;
list-style
:
none
;
list-style
:
none
;
}
}
}
.notifier
{
\ No newline at end of file
right
:
0
;
bottom
:
5px
;
z-index
:
10
;
}
}
.notifier
{
position
:
absolute
;
display
:
inline-block
;
width
:
10px
;
height
:
10px
;
&
.green
{
div
{
background-color
:
green
;
}
}
div
{
position
:
relative
;
display
:
inline-block
;
width
:
100%
;
height
:
100%
;
background
:
gray
;
}
}
.send-area
{
margin-top
:
auto
;
background-color
:
gray
;
padding
:
10px
;
}
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment