AIRA/src/frontend/login.html

183 lines
6.5 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AIRA - Login</title>
<link rel="icon" type="image/svg" href="/static/imgs/icons/logo">
<link rel="stylesheet" href="/static/commons/style.css">
<style>
body {
margin: 0;
height: 100%;
background-image: url("/static/imgs/wallpaper");
background-repeat: no-repeat;
background-position: center;
background-color: black;
}
main {
padding-bottom: 20px;
}
h1, main>h3, #error_msg {
text-align: center;
}
h1 {
font-size: 3em;
margin-bottom: 0;
}
main>h3 {
font-style: italic;
color: #7E8183;
}
#error_msg {
font-size: 1.2em;
font-weight: bold;
margin-bottom: 0;
}
.action_page>h2 {
margin-top: 0;
}
input[type="text"], input[type="password"] {
margin-bottom: 20px;
}
#create_page input[type="password"] {
display: none;
}
button {
background-color: #52585C;
color: white;
cursor: pointer;
padding: 15px 20%;
border: none;
border-radius: 8px;
display: block;
margin: auto;
}
button:hover {
background-color: var(--accent);
}
.action_page {
padding: 10px 50px;
}
.avatar {
font-size: 3em;
}
#identity h2 {
text-align: center;
}
#error_msg {
color: red;
}
label.checkbox {
display: flex;
align-items: center;
cursor: pointer;
font-size: 1.1em;
margin-bottom: 1em;
}
input[type="checkbox"] {
display: none;
}
.checkmark {
position: relative;
height: 1.5em;
width: 1.5em;
border: 2px solid var(--accent);
margin-right: .5em;
border-radius: 5px;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
left: .5em;
top: .3em;
width: .3em;
height: .6em;
border: solid white;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}
label.checkbox input:checked ~ .checkmark {
background-color: var(--accent);
}
label.checkbox input:checked ~ .checkmark:after {
display: block;
}
#avatarContainer .avatar.unset {
border: 2px solid var(--accent);
}
#identity .avatar {
display: block;
margin: auto;
}
</style>
</head>
<body>
<main class="card">
<h1>AIRA</h1>
<h3>Local network secure P2P communications</h3>
<p id="error_msg">ERROR_MSG</p>
<div id="login_page" class="action_page">
<h2>Login:</h2>
<form id="login_form" method="POST" action="/login">
<div id="identity">
<img class="avatar" src="/avatar/self"/>
<h2 id="identityName"></h2>
</div>
<input name="password" type="password" placeholder="Password">
<button type="submit">Login</button>
</form>
</div>
<div id="create_page" class="action_page">
<h2>Create a new identity:</h2>
<form method="POST">
<div id="avatarContainer">
<label>
<input type="file" accept="image/*">
<img class="avatar unset" src="/static/imgs/icons/profile/ACCENT_COLOR"/>
<p>Upload</p>
</label>
</div>
<input type="text" name="name" placeholder="Name" required>
<label class="checkbox">
<input id="enable_password" type="checkbox">
<span class="checkmark"></span>
Encrypt with a password
</label>
<input type="password" name="password" placeholder="Password">
<input type="password" name="password_confirm" placeholder="Password (Confirmation)">
<button type="submit">Create</button>
</form>
</div>
</main>
<script src="/static/commons/script.js"></script>
<script>
let identityName = IDENTITY_NAME;
if (identityName == null) {
document.getElementById("login_page").style.display = "none";
document.querySelector("#avatarContainer input").onchange = function(event) {
uploadAvatar(event, function() {
let img = document.querySelector("#avatarContainer .avatar");
img.src = "/avatar/self?"+Date.now();
img.classList.remove("unset");
});
};
let passwordInputs = document.querySelectorAll("#create_page input[type=\"password\"]");
let enable_password = document.getElementById("enable_password");
enable_password.onchange = function() {
passwordInputs.forEach(function(i) {
if (enable_password.checked) {
i.style.display = "block";
} else {
i.style.display = "none";
}
});
}
} else {
let h2Name = document.getElementById("identityName");
h2Name.textContent = identityName;
document.getElementById("create_page").style.display = "none";
}
</script>
</body>
</html>