add blahs for whole ui
This commit is contained in:
parent
9ad5bc99cc
commit
7ca3832286
14 changed files with 646 additions and 438 deletions
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
||||
<title>Larpix - Authentication</title>
|
||||
<title>Miarven - Login</title>
|
||||
<link rel="stylesheet" href="../style.css">
|
||||
<link rel="icon" type="image/svg+xml" href="../favicon.svg">
|
||||
<style>
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
font-size: max(17px, calc(100vw / 100));
|
||||
}
|
||||
|
||||
body {
|
||||
body, main {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: var(--main-bg-color);
|
||||
|
|
@ -153,117 +153,118 @@
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="auth-card">
|
||||
<div class="auth-container" id="auth-container">
|
||||
|
||||
<div class="auth-box" id="login-box">
|
||||
<div class="auth-header">
|
||||
<h1>Larpix</h1>
|
||||
<p>Sign in to your larpix instance.</p>
|
||||
</div>
|
||||
|
||||
<form id="form-login">
|
||||
<div class="input-group">
|
||||
<label for="login-host">Server Host</label>
|
||||
<input type="text" id="login-host" placeholder="example.com" autocomplete="url" onchange="loginHostChanged()">
|
||||
<p class="mininote serverstatus">Connecting...</p>
|
||||
<loading>
|
||||
<div style="display: flex;justify-content: center;align-items: center;height:100%;flex-direction: column;text-align: center;">
|
||||
<img src="../favicon.svg" style="width: 6rem">
|
||||
<p id="loadingstatus"></p>
|
||||
</div>
|
||||
</loading>
|
||||
<main style="display: none;">
|
||||
<div class="auth-card">
|
||||
<div class="auth-container" id="auth-container">
|
||||
|
||||
<div class="auth-box" id="login-box">
|
||||
<div class="auth-header">
|
||||
<h1>Larpix</h1>
|
||||
<p><blah>title.sign.in.to</blah></p>
|
||||
</div>
|
||||
|
||||
<form id="form-login">
|
||||
<div class="input-group">
|
||||
<label for="login-host"><blah>title.server.host</blah></label>
|
||||
<input type="text" id="login-host" placeholder="example.com" autocomplete="url" onchange="loginHostChanged()">
|
||||
<p class="mininote serverstatus"><blah>loading.connecting</blah></p>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="login-username"><blah>title.username</blah></label>
|
||||
<input type="text" id="login-username" placeholder="{blah(placeholder.username)}" autocomplete="username">
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="login-password"><blah>title.password</blah></label>
|
||||
<input type="password" id="login-password" placeholder="••••••••" autocomplete="current-password">
|
||||
</div>
|
||||
|
||||
<button type="submit" class="submit-button blah">title.sign.in</button>
|
||||
</form>
|
||||
|
||||
<div class="footer-links">
|
||||
<span class="footer-link-toggle" id="to-register">
|
||||
<blah>title.new.here.?</blah> <strong class="blah">title.create.an.account</strong>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="login-username">Username</label>
|
||||
<input type="text" id="login-username" placeholder="username" autocomplete="username">
|
||||
|
||||
<div class="auth-box" id="register-box">
|
||||
<div class="auth-header">
|
||||
<h1><blah>join.larpix</blah></h1>
|
||||
<p><blah>title.create.new.account</blah></p>
|
||||
</div>
|
||||
|
||||
<form id="form-register">
|
||||
<div class="input-group">
|
||||
<label for="reg-host"><blah>title.server.host</blah></label>
|
||||
<input type="text" id="reg-host" placeholder="example.com" autocomplete="url" onchange="regHostChanged()">
|
||||
<p class="mininote serverstatus"><blah>loading.connecting</blah></p>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="reg-username"><blah>title.username</blah></label>
|
||||
<input type="text" id="reg-username" placeholder="{blah(placeholder.username)}" autocomplete="username">
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="reg-password"><blah>title.password</blah></label>
|
||||
<input type="password" id="reg-password" placeholder="••••••••" autocomplete="new-password">
|
||||
<p class="red mininote"><blah>notice.use.strong.pass</blah></p>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="reg-confirm"><blah>title.confirm.password</blah></label>
|
||||
<input type="password" id="reg-confirm" placeholder="••••••••" autocomplete="new-password">
|
||||
</div>
|
||||
|
||||
<button type="submit" class="submit-button blah" id="register-button">title.sign.up</button>
|
||||
</form>
|
||||
|
||||
<div class="footer-links">
|
||||
<span class="footer-link-toggle" id="to-login">
|
||||
<blah>title.already.registered.?</blah> <strong class="blah">title.back.to.login</strong>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="login-password">Password</label>
|
||||
<input type="password" id="login-password" placeholder="••••••••" autocomplete="current-password">
|
||||
</div>
|
||||
|
||||
<button type="submit" class="submit-button">
|
||||
Sign In
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="footer-links">
|
||||
<span class="footer-link-toggle" id="to-register">
|
||||
New here? <strong>Create an account</strong>
|
||||
|
||||
<div class="auth-box" id="captcha-box">
|
||||
<div class="auth-header">
|
||||
<h1><blah>title.verify</blah></h1>
|
||||
<p><blah>title.captcha.desc</blah></p>
|
||||
</div>
|
||||
<div class="captcha-img">
|
||||
<img src="" alt="Captcha" id="captcha-image">
|
||||
</div>
|
||||
<form id="form-captcha">
|
||||
<div class="input-group">
|
||||
<label for="captcha-input"><blah>title.captcha.code</blah></label>
|
||||
<input type="text" id="captcha-input" placeholder="{blah(placeholder.captcha.code)}" autocomplete="off">
|
||||
|
||||
</div>
|
||||
<div class="input-group" id="regkey-group">
|
||||
<label for="regkey-input"><blah>title.invitation.code</blah></label>
|
||||
<input type="text" id="regkey-input" placeholder="{blah(placeholder.invitation.code)}" autocomplete="off">
|
||||
</div>
|
||||
<button type="submit" class="submit-button blah">title.verify</button>
|
||||
</form>
|
||||
<div class="footer-links">
|
||||
<span class="footer-link-toggle" id="back-to-reg">
|
||||
<strong class="blah">title.back.to.register</strong>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="auth-box" id="register-box">
|
||||
<div class="auth-header">
|
||||
<h1>Join Larpix</h1>
|
||||
<p>Create new larpix account.</p>
|
||||
</div>
|
||||
|
||||
<form id="form-register">
|
||||
<div class="input-group">
|
||||
<label for="reg-host">Server Host</label>
|
||||
<input type="text" id="reg-host" placeholder="example.com" autocomplete="url" onchange="regHostChanged()">
|
||||
<p class="mininote serverstatus">Connecting...</p>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="reg-username">Username</label>
|
||||
<input type="text" id="reg-username" placeholder="Choose username" autocomplete="username">
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="reg-password">Password</label>
|
||||
<input type="password" id="reg-password" placeholder="Create password" autocomplete="new-password">
|
||||
<p class="red mininote">Remember to use a strong password! It will be used to encrypt your keys</p>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="reg-confirm">Confirm Password</label>
|
||||
<input type="password" id="reg-confirm" placeholder="Repeat password" autocomplete="new-password">
|
||||
</div>
|
||||
|
||||
<button type="submit" class="submit-button" id="register-button">
|
||||
Sign Up
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="footer-links">
|
||||
<span class="footer-link-toggle" id="to-login">
|
||||
Already a member? <strong>Back to Login</strong>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="auth-box" id="captcha-box">
|
||||
<div class="auth-header">
|
||||
<h1>Verify</h1>
|
||||
<p>Prove you are a human.</p>
|
||||
</div>
|
||||
<div class="captcha-img">
|
||||
<img src="" alt="Captcha" id="captcha-image">
|
||||
</div>
|
||||
<form id="form-captcha">
|
||||
<div class="input-group">
|
||||
<label for="captcha-input">Captcha code</label>
|
||||
<input type="text" id="captcha-input" placeholder="Captcha code" autocomplete="off">
|
||||
|
||||
</div>
|
||||
<div class="input-group" id="regkey-group">
|
||||
<label for="regkey-input">Invitation code</label>
|
||||
<input type="text" id="regkey-input" placeholder="Invitation code" autocomplete="off">
|
||||
</div>
|
||||
<button type="submit" class="submit-button">
|
||||
Verify
|
||||
</button>
|
||||
</form>
|
||||
<div class="footer-links">
|
||||
<span class="footer-link-toggle" id="back-to-reg">
|
||||
<strong>Back to registration</strong>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
<script src="../main.js"></script>
|
||||
|
|
@ -293,6 +294,16 @@
|
|||
|
||||
const registerButton = document.getElementById("register-button");
|
||||
const regKeyGroup = document.getElementById("regkey-group");
|
||||
|
||||
|
||||
async function start() {
|
||||
updateLoadingStatus("loading.loading");
|
||||
//
|
||||
updateLoadingStatus("loading.done");
|
||||
await loadingFadeOut();
|
||||
}
|
||||
|
||||
|
||||
|
||||
toRegister.addEventListener('click', () => {
|
||||
container.className = 'auth-container show-register';
|
||||
|
|
@ -316,11 +327,13 @@
|
|||
if (res.startsWith("success:"))
|
||||
{
|
||||
showBlahNotification(res);
|
||||
await delay(1000);
|
||||
await delay(800);
|
||||
localStorage.setItem("username", loginUsername.value);
|
||||
localStorage.setItem("password", loginPassword.value);
|
||||
localStorage.setItem("host", loginHost.value);
|
||||
|
||||
await loadingFadeIn();
|
||||
|
||||
window.location.href = "../";
|
||||
}
|
||||
else
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue