Add usimp.js
This commit is contained in:
@ -6,6 +6,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<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/usimp.js" type="text/javascript"></script>
|
||||
<meta http-equiv="Content-Security-Policy" content="
|
||||
default-src 'none';
|
||||
style-src 'self';
|
||||
@ -15,17 +16,18 @@
|
||||
media-src * blob: data:;">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
</main>
|
||||
<div id="wrapper">
|
||||
<main></main>
|
||||
</div>
|
||||
<footer>
|
||||
<div>Locutus USIMP web client</div>
|
||||
<div>Copyright © 2021 Thomas Hilscher, Lorenz Stechauner</div>
|
||||
</footer>
|
||||
<div id="windows">
|
||||
<noscript>
|
||||
Your browser either does not support JavaScript or has disabled script execution.<br/>
|
||||
Locutus needs JavaScript to be enabled to function correctly.
|
||||
</noscript>
|
||||
</div>
|
||||
<footer>
|
||||
<div>Locutus USIMP web client</div>
|
||||
<div>Copyright © 2021 Thomas Hilscher, Lorenz Stechauner</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -9,7 +9,7 @@ function createWelcomeWindow() {
|
||||
|
||||
win.innerHTML = `
|
||||
<h1>Welcome to Locutus!</h1>
|
||||
<a href="#/login">Login</a>`;
|
||||
<a href="#/login" class="button">Login</a>`;
|
||||
|
||||
while (windows.lastChild) windows.removeChild(windows.lastChild);
|
||||
windows.appendChild(win);
|
||||
@ -22,11 +22,22 @@ function createLoginWindow() {
|
||||
win.innerHTML = `
|
||||
<h1>Login to USIMP Account</h1>
|
||||
<form>
|
||||
<input name="account" placeholder="Account name" type="text"/>
|
||||
<input name="domain" placeholder="Domain" type="text"/>
|
||||
<input name="password" placeholder="Password" type="password"/>
|
||||
<input name="account" placeholder="Account name" type="text" required/>
|
||||
<input name="domain" placeholder="Domain" type="text" pattern="([a-zA-Z0-9_-]+\\.)+[a-zA-Z]{2,}" required/>
|
||||
<input name="password" placeholder="Password" type="password" required/>
|
||||
<button type="submit">Login</button>
|
||||
</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);
|
||||
windows.appendChild(win);
|
||||
}
|
||||
@ -53,7 +64,7 @@ function handleUrl(url) {
|
||||
handleHash(new URL(url).hash);
|
||||
}
|
||||
|
||||
window.addEventListener("load", function () {
|
||||
window.addEventListener("DOMContentLoaded", function () {
|
||||
main = document.getElementsByTagName("main")[0];
|
||||
windows = document.getElementById("windows");
|
||||
|
||||
|
||||
9
www/res/js/usimp.js
Normal file
9
www/res/js/usimp.js
Normal 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",
|
||||
});
|
||||
}
|
||||
@ -4,6 +4,7 @@
|
||||
--bg-win: rgba(192, 192, 192, 0.25);
|
||||
--bg: rgba(224, 224, 224, 0.5);
|
||||
--fg-soft: rgba(32, 32, 32, 0.5);
|
||||
--footer-height: 2em;
|
||||
}
|
||||
|
||||
noscript {
|
||||
@ -31,6 +32,18 @@ main {
|
||||
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 {
|
||||
color: #000000;
|
||||
font-weight: normal;
|
||||
@ -64,35 +77,15 @@ div#welcome-win {
|
||||
div#login-win h1,
|
||||
div#welcome-win h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
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 {
|
||||
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
border-top: 1px solid var(--bg-win);
|
||||
background: var(--bg-win);
|
||||
height: 2em;
|
||||
height: var(--footer-height);
|
||||
backdrop-filter: blur(32px);
|
||||
margin-top: 1em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@ -102,7 +95,9 @@ footer {
|
||||
@media screen and (max-width: 600px) {
|
||||
footer {
|
||||
flex-direction: column;
|
||||
height: 4em;
|
||||
}
|
||||
* {
|
||||
--footer-height: 4em;
|
||||
}
|
||||
}
|
||||
|
||||
@ -116,24 +111,57 @@ footer div {
|
||||
|
||||
form {
|
||||
max-width: 400px;
|
||||
margin: 2em auto;
|
||||
margin: 1.5em auto;
|
||||
}
|
||||
|
||||
form input {
|
||||
form input,
|
||||
form button,
|
||||
a.button {
|
||||
background-color: var(--bg);
|
||||
border: 1px solid var(--bg);
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
padding: 0.5em 1em;
|
||||
display: block;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin: 1em 0;
|
||||
margin: 1em auto;
|
||||
font-size: 1em;
|
||||
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 {
|
||||
color: var(--fg-soft);
|
||||
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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user