Locutus/locutus
2
1
Fork 0
Code Issues Pull Requests Projects Releases Activity

Add usimp.js

Browse Source
This commit is contained in:
Lorenz Stechauner
2021-05-09 15:57:15 +02:00
parent f77882baf7
commit 7bb9c67f52
4 changed files with 88 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
www/index.html
View File

@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="/res/styles/styles.css" type="text/css"/> <link rel="stylesheet" href="/res/styles/styles.css" type="text/css"/>
<script src="/res/js/locutus.js" type="text/javascript"></script> <script src="/res/js/locutus.js" type="text/javascript"></script>
<script src="/res/js/usimp.js" type="text/javascript"></script>
<meta http-equiv="Content-Security-Policy" content=" <meta http-equiv="Content-Security-Policy" content="
default-src 'none'; default-src 'none';
style-src 'self'; style-src 'self';
@ -15,17 +16,18 @@
media-src * blob: data:;"> media-src * blob: data:;">
</head> </head>
<body> <body>
<main> <div id="wrapper">
</main> <main></main>
</div>
<footer>
<div>Locutus USIMP web client</div>
<div>Copyright &copy; 2021 Thomas Hilscher, Lorenz Stechauner</div>
</footer>
<div id="windows"> <div id="windows">
<noscript> <noscript>
Your browser either does not support JavaScript or has disabled script execution.<br/> Your browser either does not support JavaScript or has disabled script execution.<br/>
Locutus needs JavaScript to be enabled to function correctly. Locutus needs JavaScript to be enabled to function correctly.
</noscript> </noscript>
</div> </div>
<footer>
<div>Locutus USIMP web client</div>
<div>Copyright &copy; 2021 Thomas Hilscher, Lorenz Stechauner</div>
</footer>
</body> </body>
</html> </html>

21
www/res/js/locutus.js
View File

@ -9,7 +9,7 @@ function createWelcomeWindow() {
win.innerHTML = ` win.innerHTML = `
<h1>Welcome to Locutus!</h1> <h1>Welcome to Locutus!</h1>
<a href="#/login">Login</a>`; <a href="#/login" class="button">Login</a>`;
while (windows.lastChild) windows.removeChild(windows.lastChild); while (windows.lastChild) windows.removeChild(windows.lastChild);
windows.appendChild(win); windows.appendChild(win);
@ -22,11 +22,22 @@ function createLoginWindow() {
win.innerHTML = ` win.innerHTML = `
<h1>Login to USIMP Account</h1> <h1>Login to USIMP Account</h1>
<form> <form>
<input name="account" placeholder="Account name" type="text"/> <input name="account" placeholder="Account name" type="text" required/>
<input name="domain" placeholder="Domain" type="text"/> <input name="domain" placeholder="Domain" type="text" pattern="([a-zA-Z0-9_-]+\\.)+[a-zA-Z]{2,}" required/>
<input name="password" placeholder="Password" type="password"/> <input name="password" placeholder="Password" type="password" required/>
<button type="submit">Login</button>
</form>`; </form>`;
win.getElementsByTagName('form')[0].addEventListener("submit", function (evt) {
evt.preventDefault();
let form = evt.target;
usimp.lookup(form.domain.value)
.then(res => res.json()
.then(data => console.log(data))
.catch(reason => console.error(reason)))
.catch(reason => console.error(reason));
});
while (windows.lastChild) windows.removeChild(windows.lastChild); while (windows.lastChild) windows.removeChild(windows.lastChild);
windows.appendChild(win); windows.appendChild(win);
} }
@ -53,7 +64,7 @@ function handleUrl(url) {
handleHash(new URL(url).hash); handleHash(new URL(url).hash);
} }
window.addEventListener("load", function () { window.addEventListener("DOMContentLoaded", function () {
main = document.getElementsByTagName("main")[0]; main = document.getElementsByTagName("main")[0];
windows = document.getElementById("windows"); windows = document.getElementById("windows");

9
www/res/js/usimp.js Normal file
View File

@ -0,0 +1,9 @@
"use strict";
let usimp = {};
usimp.lookup = function (domain_name) {
return fetch(`https://${domain_name}/.well-known/usimp.json`, {
redirect: "manual",
});
}

82
www/res/styles/styles.css
View File

@ -4,6 +4,7 @@
--bg-win: rgba(192, 192, 192, 0.25); --bg-win: rgba(192, 192, 192, 0.25);
--bg: rgba(224, 224, 224, 0.5); --bg: rgba(224, 224, 224, 0.5);
--fg-soft: rgba(32, 32, 32, 0.5); --fg-soft: rgba(32, 32, 32, 0.5);
--footer-height: 2em;
} }
noscript { noscript {
@ -31,6 +32,18 @@ main {
margin: 0 auto; margin: 0 auto;
} }
div#wrapper {
box-sizing: border-box;
width: 100%;
height: calc(100vh - var(--footer-height));
}
@media screen and (max-width: 600px) {
div#wrapper {
height: 100vh;
}
}
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
color: #000000; color: #000000;
font-weight: normal; font-weight: normal;
@ -64,35 +77,15 @@ div#welcome-win {
div#login-win h1, div#login-win h1,
div#welcome-win h1 { div#welcome-win h1 {
text-align: center; text-align: center;
} font-size: 1.5rem;
div#welcome-win a {
text-decoration: none;
background-color: var(--bg);
border: 1px solid var(--bg);
padding: 0.5em 1em;
margin: 1em auto;
border-radius: 4px;
display: block;
width: 50px;
text-align: center;
color: #000000;
}
div#welcome-win a:hover {
} }
footer { footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%; width: 100%;
border-top: 1px solid var(--bg-win); border-top: 1px solid var(--bg-win);
background: var(--bg-win); background: var(--bg-win);
height: 2em; height: var(--footer-height);
backdrop-filter: blur(32px); backdrop-filter: blur(32px);
margin-top: 1em;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -102,7 +95,9 @@ footer {
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
footer { footer {
flex-direction: column; flex-direction: column;
height: 4em; }
* {
--footer-height: 4em;
} }
} }
@ -116,24 +111,57 @@ footer div {
form { form {
max-width: 400px; max-width: 400px;
margin: 2em auto; margin: 1.5em auto;
} }
form input { form input,
form button,
a.button {
background-color: var(--bg); background-color: var(--bg);
border: 1px solid var(--bg); border: 1px solid var(--bg);
border-radius: 4px; border-radius: 4px;
outline: none; outline: none;
padding: 0.5em 1em; padding: 0.5em 1em;
display: block; display: block;
width: 100%;
box-sizing: border-box; box-sizing: border-box;
margin: 1em 0; margin: 1em auto;
font-size: 1em; font-size: 1em;
color: #000000; color: #000000;
transition: border-color 0.125s, background-color 0.125s;
}
a.button {
text-decoration: none;
text-align: center;
display: block;
width: 100px;
}
form input,
form button {
width: 100%;
}
form button,
a.button {
cursor: pointer;
} }
form input::placeholder { form input::placeholder {
color: var(--fg-soft); color: var(--fg-soft);
opacity: 1; opacity: 1;
} }
form input:focus,
form input:hover,
form button:focus,
form button:hover,
a.button:focus,
a.button:hover {
border-color: rgba(255, 255, 255, 0.75);
}
form button:active,
a.button:active {
background-color: rgba(224, 224, 224, 0.75);
}