forked from olcxjas-softworks/LarpixClient
Android run fix
This commit is contained in:
parent
9ae1ddac0d
commit
dd49c18cbd
12 changed files with 1456 additions and 4 deletions
9
android/.gitignore
vendored
9
android/.gitignore
vendored
|
|
@ -94,9 +94,10 @@ lint/tmp/
|
||||||
#need this for actions
|
#need this for actions
|
||||||
|
|
||||||
# Copied web assets
|
# Copied web assets
|
||||||
app/src/main/assets/public
|
#app/src/main/assets/public
|
||||||
|
#need this for actions
|
||||||
|
|
||||||
# Generated Config files
|
# Generated Config files
|
||||||
app/src/main/assets/capacitor.config.json
|
#app/src/main/assets/capacitor.config.json
|
||||||
app/src/main/assets/capacitor.plugins.json
|
#app/src/main/assets/capacitor.plugins.json
|
||||||
app/src/main/res/xml/config.xml
|
#app/src/main/res/xml/config.xml
|
||||||
|
|
|
||||||
13
android/app/src/main/assets/capacitor.config.json
Normal file
13
android/app/src/main/assets/capacitor.config.json
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
{
|
||||||
|
"appId": "olcxja.miarven",
|
||||||
|
"appName": "Miarven",
|
||||||
|
"webDir": "webroot",
|
||||||
|
"plugins": {
|
||||||
|
"SystemBars": {
|
||||||
|
"insetsHandling": "css",
|
||||||
|
"style": "DARK",
|
||||||
|
"hidden": false,
|
||||||
|
"animation": "FADE"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
6
android/app/src/main/assets/capacitor.plugins.json
Normal file
6
android/app/src/main/assets/capacitor.plugins.json
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"pkg": "@capacitor/status-bar",
|
||||||
|
"classpath": "com.capacitorjs.plugins.statusbar.StatusBarPlugin"
|
||||||
|
}
|
||||||
|
]
|
||||||
BIN
android/app/src/main/assets/public/Nunito-Regular.ttf
Normal file
BIN
android/app/src/main/assets/public/Nunito-Regular.ttf
Normal file
Binary file not shown.
0
android/app/src/main/assets/public/cordova.js
vendored
Normal file
0
android/app/src/main/assets/public/cordova.js
vendored
Normal file
0
android/app/src/main/assets/public/cordova_plugins.js
vendored
Normal file
0
android/app/src/main/assets/public/cordova_plugins.js
vendored
Normal file
29
android/app/src/main/assets/public/favicon.svg
Normal file
29
android/app/src/main/assets/public/favicon.svg
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
<svg width="1024" height="1024" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#b870ff;stop-opacity:1" />
|
||||||
|
<stop offset="100%" style="stop-color:#a64aff;stop-opacity:1" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="bg_grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" stop-color="#b870ff" />
|
||||||
|
<stop offset="100%" stop-color="#a64aff" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<rect width="1024" height="1024" fill="url(#bg_grad)" rx="190" />
|
||||||
|
<g transform="translate(112, 112) scale(1.55)">
|
||||||
|
|
||||||
|
<text x="256" y="305"
|
||||||
|
fill="#F0F0F5"
|
||||||
|
font-family="Nunito"
|
||||||
|
font-size="280"
|
||||||
|
font-weight="900"
|
||||||
|
text-anchor="middle"
|
||||||
|
letter-spacing="-5">MN</text>
|
||||||
|
|
||||||
|
<g opacity="0.6">
|
||||||
|
<circle cx="190" cy="400" r="15" fill="#F0F0F5" />
|
||||||
|
<circle cx="256" cy="400" r="15" fill="white" />
|
||||||
|
<circle cx="322" cy="400" r="15" fill="#F0F0F5" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
139
android/app/src/main/assets/public/index.html
Normal file
139
android/app/src/main/assets/public/index.html
Normal file
|
|
@ -0,0 +1,139 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
||||||
|
<title>Larpix Client</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<sidebar>
|
||||||
|
<sidebarelement id="sidebar-home">
|
||||||
|
<indicator class="active">
|
||||||
|
</indicator>
|
||||||
|
<button class="icon-button" aria-label="Homepage">
|
||||||
|
<svg viewBox="-1 -1 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path
|
||||||
|
d="M1 6V15H6V11C6 9.89543 6.89543 9 8 9C9.10457 9 10 9.89543 10 11V15H15V6L8 0L1 6Z"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="1.28"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-linecap="round"
|
||||||
|
transform="translate(0 0.5)"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</sidebarelement>
|
||||||
|
<hr>
|
||||||
|
<sidebarelement id="sidebar-add">
|
||||||
|
<indicator>
|
||||||
|
</indicator>
|
||||||
|
<button class="icon-button" aria-label="Add space">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||||
|
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<line x1="12" y1="5" x2="12" y2="19"></line>
|
||||||
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</sidebarelement>
|
||||||
|
<hr>
|
||||||
|
</sidebar>
|
||||||
|
|
||||||
|
<sidebar class="second" id="roomsbar">
|
||||||
|
<roomtopbar>
|
||||||
|
Home
|
||||||
|
</roomtopbar>
|
||||||
|
<div class="sidebar-section-header">
|
||||||
|
<button class="collapse-text-button" id="collapse-dms">
|
||||||
|
<span>Direct messages</span>
|
||||||
|
<svg class="chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
|
||||||
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<polyline points="6 9 12 15 18 9"></polyline>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button class="add-action-button" aria-label="Add Direct Message" id="add-dm-btn">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||||
|
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<line x1="12" y1="5" x2="12" y2="19"></line>
|
||||||
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sidebar-section-header">
|
||||||
|
<button class="collapse-text-button" id="collapse-groups">
|
||||||
|
<span>Groups</span>
|
||||||
|
<svg class="chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
|
||||||
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<polyline points="6 9 12 15 18 9"></polyline>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button class="add-action-button" aria-label="Add Group" id="add-group-btn">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||||
|
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<line x1="12" y1="5" x2="12" y2="19"></line>
|
||||||
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</sidebar>
|
||||||
|
|
||||||
|
<roomcontent>
|
||||||
|
<roomtopbar>
|
||||||
|
Splash
|
||||||
|
</roomtopbar>
|
||||||
|
<roomcontent2>
|
||||||
|
<div style="display: flex;justify-content: center;align-items: center;height:100%;flex-direction: column;">
|
||||||
|
<img src="favicon.svg" style="width: 6rem">
|
||||||
|
<herotitle>Welcome to Miarven</herotitle>
|
||||||
|
<p>First Larpix client. <span class="aqua">v<span class="clientver aqua">1.0</span></span></p>
|
||||||
|
</div>
|
||||||
|
</roomcontent2>
|
||||||
|
</roomcontent>
|
||||||
|
<sidebar class="second hidden" id="roomdetailsbar" style="display: none;">
|
||||||
|
</sidebar>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
<script src="main.js"></script>
|
||||||
|
<script>
|
||||||
|
async function start() {
|
||||||
|
try {
|
||||||
|
|
||||||
|
|
||||||
|
showAction("Authenticating...", "startauth");
|
||||||
|
let res = await Auth(username, password);
|
||||||
|
clearAction("startauth");
|
||||||
|
if (res == "Login successful") {
|
||||||
|
await refreshDms();
|
||||||
|
} else {
|
||||||
|
showNotification("Failed to auth. Redirecting to login...", "error", 3500);
|
||||||
|
await delay(2000);
|
||||||
|
window.location.href = "login/index.html";
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
clearAction("startauth");
|
||||||
|
showNotification("Failed to auth. Redirecting to login...", "error", 3500);
|
||||||
|
await delay(2000);
|
||||||
|
window.location.href = "login/index.html";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function refreshDms() {
|
||||||
|
try {
|
||||||
|
|
||||||
|
|
||||||
|
showAction("Refreshing dms...", "dmrefresh");
|
||||||
|
let res = await fetchEncrypted("user/dm/list", "");
|
||||||
|
console.log(res);
|
||||||
|
clearAction("dmrefresh");
|
||||||
|
}
|
||||||
|
catch (e) {
|
||||||
|
clearAction("dmrefresh");
|
||||||
|
showNotification("Failed to refresh dms", "error", 3500);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
start();
|
||||||
|
</script>
|
||||||
498
android/app/src/main/assets/public/login/index.html
Normal file
498
android/app/src/main/assets/public/login/index.html
Normal file
|
|
@ -0,0 +1,498 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
||||||
|
<title>Larpix - Authentication</title>
|
||||||
|
<link rel="stylesheet" href="../style.css">
|
||||||
|
<link rel="icon" type="image/svg+xml" href="../favicon.svg">
|
||||||
|
<style>
|
||||||
|
html {
|
||||||
|
font-size: max(17px, calc(100vw / 100));
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background-color: var(--main-bg-color);
|
||||||
|
display: flex;
|
||||||
|
height: 100dvh;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-card {
|
||||||
|
background-color: rgba(255, 255, 255, 0.015);
|
||||||
|
border: var(--border-width) solid var(--light-border-color);
|
||||||
|
border-radius: 1.2rem;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 24rem;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-container {
|
||||||
|
display: flex;
|
||||||
|
width: 300%;
|
||||||
|
transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-box {
|
||||||
|
width: 33.333%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 2.5rem 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.show-register {
|
||||||
|
transform: translateX(-33.333%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.show-captcha {
|
||||||
|
transform: translateX(-66.666%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.captcha-img {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #222;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border: var(--border-width) solid var(--light-border-color);
|
||||||
|
border-radius: 1.2rem;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.captcha-img img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-header h1 {
|
||||||
|
font-size: 2.4rem;
|
||||||
|
font-weight: 800;
|
||||||
|
margin-bottom: 0.3rem;
|
||||||
|
letter-spacing: -0.05rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-header p {
|
||||||
|
opacity: 0.5;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group label {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 800;
|
||||||
|
margin-left: 0.6rem;
|
||||||
|
margin-bottom: -0.2rem;
|
||||||
|
opacity: 0.4;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05rem;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.submit-button {
|
||||||
|
margin: 1.5rem 0 0 0 !important;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: var(--text-color);
|
||||||
|
color: var(--main-bg-color);
|
||||||
|
font-weight: 800;
|
||||||
|
border: none;
|
||||||
|
font-size: 1.05rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
background-color: rgba(255, 255, 255, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-links {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 2rem;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-link-toggle {
|
||||||
|
cursor: pointer;
|
||||||
|
opacity: 0.6;
|
||||||
|
transition: opacity 0.2s ease;
|
||||||
|
color: var(--text-color);
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-link-toggle:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-link-toggle strong {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-link-toggle:hover strong {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="login-username">Username</label>
|
||||||
|
<input type="text" id="login-username" placeholder="username" autocomplete="username">
|
||||||
|
</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>
|
||||||
|
</span>
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<script src="../main.js"></script>
|
||||||
|
<script>
|
||||||
|
document.getElementById("reg-host").value = window.location.hostname;
|
||||||
|
document.getElementById("login-host").value = window.location.hostname;
|
||||||
|
|
||||||
|
const container = document.getElementById('auth-container');
|
||||||
|
|
||||||
|
|
||||||
|
const toRegister = document.getElementById('to-register');
|
||||||
|
const toLogin = document.getElementById('to-login');
|
||||||
|
const backToReg = document.getElementById('back-to-reg');
|
||||||
|
|
||||||
|
|
||||||
|
const formLogin = document.getElementById('form-login');
|
||||||
|
const formRegister = document.getElementById('form-register');
|
||||||
|
const formCaptcha = document.getElementById('form-captcha');
|
||||||
|
|
||||||
|
const registerHost = document.getElementById("reg-host");
|
||||||
|
const registerUsername = document.getElementById("reg-username");
|
||||||
|
const registerPassword = document.getElementById("reg-password");
|
||||||
|
const registerPasswordConfirm = document.getElementById("reg-password");
|
||||||
|
const loginHost = document.getElementById("login-host");
|
||||||
|
const loginUsername = document.getElementById("login-username");
|
||||||
|
const loginPassword = document.getElementById("login-password");
|
||||||
|
const captchaCode = document.getElementById("captcha-input");
|
||||||
|
const regKeyInput = document.getElementById("regkey-input");
|
||||||
|
|
||||||
|
const registerButton = document.getElementById("register-button");
|
||||||
|
const regKeyGroup = document.getElementById("regkey-group");
|
||||||
|
|
||||||
|
toRegister.addEventListener('click', () => {
|
||||||
|
container.className = 'auth-container show-register';
|
||||||
|
});
|
||||||
|
|
||||||
|
toLogin.addEventListener('click', () => {
|
||||||
|
container.className = 'auth-container';
|
||||||
|
});
|
||||||
|
|
||||||
|
backToReg.addEventListener('click', () => {
|
||||||
|
container.className = 'auth-container show-register';
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
formLogin.addEventListener('submit', async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
try {
|
||||||
|
url = `${window.location.protocol}//${loginHost.value}/_larpix`;
|
||||||
|
|
||||||
|
let res = await Auth(loginUsername.value, loginPassword.value);
|
||||||
|
|
||||||
|
if (res == "Login successful")
|
||||||
|
{
|
||||||
|
showNotification(res, "success", 3500);
|
||||||
|
await delay(1000);
|
||||||
|
localStorage.setItem("username", loginUsername.value);
|
||||||
|
localStorage.setItem("password", loginPassword.value);
|
||||||
|
localStorage.setItem("host", loginHost.value);
|
||||||
|
|
||||||
|
window.location.href = "../";
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
showNotification(res, "error", 3500);
|
||||||
|
}
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
showNotification("Something went wrong... (probably wrong password)", "error", 3500);
|
||||||
|
container.className = 'auth-container';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
formRegister.addEventListener('submit', async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
try {
|
||||||
|
captchaCode.value = "";
|
||||||
|
regKeyInput.value = "";
|
||||||
|
|
||||||
|
url = `${window.location.protocol}//${registerHost.value}/_larpix`;
|
||||||
|
|
||||||
|
if (!registerUsername.value || registerUsername.value.trim() === '') {
|
||||||
|
showNotification("Username cannot be empty", "error");
|
||||||
|
container.className = 'auth-container show-register';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!registerPassword.value || registerPassword.value.trim() === '') {
|
||||||
|
showNotification("Password cannot be empty", "error");
|
||||||
|
container.className = 'auth-container show-register';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (registerPassword.value != registerPasswordConfirm.value) {
|
||||||
|
showNotification("Passwords do not match", "error");
|
||||||
|
container.className = 'auth-container show-register';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let dataarray = keyDataFromServerJson(await fetchAsync(`${url}/createaccount?step=init`));
|
||||||
|
var sharedkey = await calcCommunicationKeyClient(dataarray[0], dataarray[1], dataarray[2]);
|
||||||
|
sharedpvkey = sharedkey[1];
|
||||||
|
createId = dataarray[3];
|
||||||
|
const captchaimage = await fetch(`${url}/createaccount?step=register`, {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify({
|
||||||
|
pubClient: sharedkey[0],
|
||||||
|
idKey: createId,
|
||||||
|
username: await encrypt(registerUsername.value, sharedpvkey),
|
||||||
|
password: await encrypt(await hashSHA3_512(registerPassword.value), sharedpvkey)
|
||||||
|
})
|
||||||
|
});
|
||||||
|
const clone = captchaimage.clone();
|
||||||
|
const res = await captchaimage.text();
|
||||||
|
try {
|
||||||
|
const imageBlob = await clone.blob();
|
||||||
|
if (!imageBlob.type.startsWith("image/")) {
|
||||||
|
throw new Error();
|
||||||
|
}
|
||||||
|
const imageObjectURL = URL.createObjectURL(imageBlob);
|
||||||
|
document.getElementById('captcha-image').src = imageObjectURL;
|
||||||
|
container.className = 'auth-container show-captcha';
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
if (res.length > 64 || res.length <= 1) {
|
||||||
|
throw new Error();
|
||||||
|
}
|
||||||
|
showNotification(res, "error", 3500);
|
||||||
|
container.className = 'auth-container show-register';
|
||||||
|
}
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
showNotification("Something went wrong...", "error", 3500);
|
||||||
|
container.className = 'auth-container show-register';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
formCaptcha.addEventListener('submit', async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
try {
|
||||||
|
|
||||||
|
|
||||||
|
const captchaValue = captchaCode.value;
|
||||||
|
if (captchaValue) {
|
||||||
|
let res = await fetchPost(`${url}/createaccount?step=finish`, JSON.stringify({
|
||||||
|
idKey: createId,
|
||||||
|
captcha: captchaValue,
|
||||||
|
regKey: regKeyInput.value
|
||||||
|
}));
|
||||||
|
if (res.length > 64 || res.length <= 1) {
|
||||||
|
throw new Error();
|
||||||
|
}
|
||||||
|
if (res.toLowerCase().includes("incorrect")) {
|
||||||
|
showNotification(res, "error", 3500);
|
||||||
|
container.className = 'auth-container show-register';
|
||||||
|
} else if (res.toLowerCase().includes("created")) {
|
||||||
|
showNotification(res, "success", 3500);
|
||||||
|
await delay(1000);
|
||||||
|
localStorage.setItem("username", registerUsername.value);
|
||||||
|
localStorage.setItem("password", registerPassword.value);
|
||||||
|
localStorage.setItem("host", registerHost.value);
|
||||||
|
|
||||||
|
window.location.href = "../";
|
||||||
|
|
||||||
|
} else {
|
||||||
|
showNotification(res, "info", 3500);
|
||||||
|
container.className = 'auth-container show-register';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
showNotification("Something went wrong...", "error", 3500);
|
||||||
|
container.className = 'auth-container show-register';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
async function regHostChanged()
|
||||||
|
{
|
||||||
|
loginHost.value = registerHost.value;
|
||||||
|
await updateLoginForm(registerHost.value);
|
||||||
|
}
|
||||||
|
async function loginHostChanged()
|
||||||
|
{
|
||||||
|
registerHost.value = loginHost.value;
|
||||||
|
await updateLoginForm(loginHost.value);
|
||||||
|
}
|
||||||
|
async function updateLoginForm(host)
|
||||||
|
{
|
||||||
|
try {
|
||||||
|
let serverInfo = await getServerInfo(host);
|
||||||
|
if (serverInfo["registration"] == "disabled")
|
||||||
|
{
|
||||||
|
registerButton.innerHTML = "Registration disabled";
|
||||||
|
}
|
||||||
|
else if (serverInfo["registration"] == "enabled")
|
||||||
|
{
|
||||||
|
registerButton.innerHTML = "Sign up";
|
||||||
|
regKeyGroup.style.display = "";
|
||||||
|
}
|
||||||
|
else if (serverInfo["registration"] == "code")
|
||||||
|
{
|
||||||
|
regKeyGroup.style.display = "none";
|
||||||
|
}
|
||||||
|
setServerStatus("Server pinged", "green");
|
||||||
|
}
|
||||||
|
catch(error)
|
||||||
|
{
|
||||||
|
console.log(error);
|
||||||
|
setServerStatus("Can't ping this server", "red");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function setServerStatus(status, color)
|
||||||
|
{
|
||||||
|
let elements = document.getElementsByClassName("serverstatus");
|
||||||
|
for (let i = 0;i < elements.length;i++) {
|
||||||
|
elements[i].className = `mininote serverstatus ${status} ${color}`;
|
||||||
|
elements[i].innerHTML = status;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
loginHostChanged();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
460
android/app/src/main/assets/public/main.js
Normal file
460
android/app/src/main/assets/public/main.js
Normal file
|
|
@ -0,0 +1,460 @@
|
||||||
|
console.log(window.location.protocol);
|
||||||
|
|
||||||
|
var url = `${window.location.protocol}//${window.location.hostname}/_larpix`;
|
||||||
|
var params = new URLSearchParams(window.location.search);
|
||||||
|
|
||||||
|
const collapseDmsBtn = document.getElementById("collapse-dms");
|
||||||
|
const collapseGroupsBtn = document.getElementById("collapse-groups");
|
||||||
|
|
||||||
|
const addDmBtn = document.getElementById("add-dm-btn");
|
||||||
|
const addGroupBtn = document.getElementById("add-group-btn");
|
||||||
|
|
||||||
|
const sidebarHome = document.getElementById("sidebar-home");
|
||||||
|
const sidebarHomeButton = sidebarHome.children.item(1);
|
||||||
|
const sidebarHomeIndicator = sidebarHome.children.item(0);
|
||||||
|
|
||||||
|
const sidebarAdd = document.getElementById("sidebar-add");
|
||||||
|
const sidebarAddButton = sidebarAdd.children.item(1);
|
||||||
|
const sidebarAddIndicator = sidebarAdd.children.item(0);
|
||||||
|
|
||||||
|
const roomDetailsBar = document.getElementById("roomdetailsbar");
|
||||||
|
const roomContent = document.getElementsByTagName("roomcontent")[0];
|
||||||
|
const roomsBar = document.getElementById("roomsbar");
|
||||||
|
const sideBar = document.getElementsByTagName("sidebar")[0];
|
||||||
|
|
||||||
|
const roomContentMain = document.getElementsByTagName("roomcontent2")[0];
|
||||||
|
|
||||||
|
const roomContentBar = roomContent.children[0];
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function delay(time) {
|
||||||
|
return new Promise(resolve => setTimeout(resolve, time));
|
||||||
|
}
|
||||||
|
async function packetEncPass(pass, key, username) {
|
||||||
|
return await encryptWithNonce(pass, key, getNonce(username, key));
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getNonce(username, key) {
|
||||||
|
|
||||||
|
let nonce;
|
||||||
|
let fetchRes = await (await fetch(`${url}/nextnonce?u=${username}`)).text();
|
||||||
|
|
||||||
|
try {
|
||||||
|
nonce = await decryptString(fetchRes, key);
|
||||||
|
}
|
||||||
|
catch(err) {
|
||||||
|
nonce = await decryptString(fetchRes, "");
|
||||||
|
}
|
||||||
|
return nonce;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function encryptWithNonce(value, key, nonce) {
|
||||||
|
return await encryptString(value, nonce + key);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function calcCommunicationKeyClient(p, g, pubServer) {
|
||||||
|
const secretClientBytes = window.crypto.getRandomValues(new Uint8Array(512));
|
||||||
|
const secretClient = BigInt('0x' + Array.from(secretClientBytes).map(b => b.toString(16).padStart(2, '0')).join(''));
|
||||||
|
const pubClient = power(BigInt(g), secretClient, BigInt(p));
|
||||||
|
const sharedSecret = power(BigInt(pubServer), secretClient, BigInt(p));
|
||||||
|
|
||||||
|
let sharedSecretStr = sharedSecret.toString(16);
|
||||||
|
|
||||||
|
if (sharedSecretStr.length % 2 !== 0) {
|
||||||
|
sharedSecretStr = '0' + sharedSecretStr;
|
||||||
|
}
|
||||||
|
|
||||||
|
const sharedSecretBytes = new Uint8Array(sharedSecretStr.match(/.{1,2}/g).map(byte => parseInt(byte, 16)));
|
||||||
|
|
||||||
|
const hashBuffer = await window.crypto.subtle.digest('SHA-256', sharedSecretBytes);
|
||||||
|
const aesKey = new Uint8Array(hashBuffer);
|
||||||
|
|
||||||
|
return [pubClient.toString(), aesKey];
|
||||||
|
}
|
||||||
|
|
||||||
|
function keyDataFromServerJson(jsonFromServer) {
|
||||||
|
const data = JSON.parse(jsonFromServer);
|
||||||
|
|
||||||
|
const p = BigInt(data.p);
|
||||||
|
const g = BigInt(data.g);
|
||||||
|
const pubServer = BigInt(data.pubServer);
|
||||||
|
|
||||||
|
return [p, g, pubServer, data.idKey]
|
||||||
|
}
|
||||||
|
|
||||||
|
function base64ToUint8(base64) {
|
||||||
|
return Uint8Array.from(atob(base64), c => c.charCodeAt(0));
|
||||||
|
}
|
||||||
|
function uint8ToBase64(uint8) {
|
||||||
|
return fixBase64Padding(btoa(String.fromCharCode(...uint8)));
|
||||||
|
}
|
||||||
|
|
||||||
|
async function encrypt(plainText, keyBytes) {
|
||||||
|
const iv = window.crypto.getRandomValues(new Uint8Array(16));
|
||||||
|
const encoder = new TextEncoder();
|
||||||
|
const data = encoder.encode(plainText);
|
||||||
|
|
||||||
|
const cryptoKey = await window.crypto.subtle.importKey(
|
||||||
|
"raw", keyBytes, "AES-CBC", false, ["encrypt"]
|
||||||
|
);
|
||||||
|
|
||||||
|
const encryptedContent = await window.crypto.subtle.encrypt(
|
||||||
|
{name: "AES-CBC", iv: iv},
|
||||||
|
cryptoKey,
|
||||||
|
data
|
||||||
|
);
|
||||||
|
const result = new Uint8Array(iv.length + encryptedContent.byteLength);
|
||||||
|
result.set(iv);
|
||||||
|
result.set(new Uint8Array(encryptedContent), iv.length);
|
||||||
|
|
||||||
|
return uint8ToBase64(result);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function decrypt(cipherTextBase64, keyBytes) {
|
||||||
|
const fullData = base64ToUint8(cipherTextBase64);
|
||||||
|
const iv = fullData.slice(0, 16);
|
||||||
|
const cipherData = fullData.slice(16);
|
||||||
|
|
||||||
|
const cryptoKey = await window.crypto.subtle.importKey(
|
||||||
|
"raw", keyBytes, "AES-CBC", false, ["decrypt"]
|
||||||
|
);
|
||||||
|
|
||||||
|
const decrypted = await window.crypto.subtle.decrypt(
|
||||||
|
{name: "AES-CBC", iv: iv},
|
||||||
|
cryptoKey,
|
||||||
|
cipherData
|
||||||
|
);
|
||||||
|
|
||||||
|
return new TextDecoder().decode(decrypted);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
async function getCryptoKey(passphrase) {
|
||||||
|
const encoder = new TextEncoder();
|
||||||
|
const data = encoder.encode(passphrase);
|
||||||
|
const hash = await crypto.subtle.digest('SHA-256', data);
|
||||||
|
return await crypto.subtle.importKey('raw', hash, {name: 'AES-CBC'}, false, ['encrypt', 'decrypt']);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function encryptBytes(plainBytes, passphrase) {
|
||||||
|
const key = await getCryptoKey(passphrase);
|
||||||
|
const iv = crypto.getRandomValues(new Uint8Array(16));
|
||||||
|
|
||||||
|
const encryptedContent = await crypto.subtle.encrypt(
|
||||||
|
{name: 'AES-CBC', iv: iv},
|
||||||
|
key,
|
||||||
|
plainBytes
|
||||||
|
);
|
||||||
|
|
||||||
|
const result = new Uint8Array(iv.length + encryptedContent.byteLength);
|
||||||
|
result.set(iv);
|
||||||
|
result.set(new Uint8Array(encryptedContent), iv.length);
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function decryptBytes(combinedBytes, passphrase) {
|
||||||
|
const key = await getCryptoKey(passphrase);
|
||||||
|
const iv = combinedBytes.slice(0, 16);
|
||||||
|
const data = combinedBytes.slice(16);
|
||||||
|
|
||||||
|
const decryptedContent = await crypto.subtle.decrypt(
|
||||||
|
{name: 'AES-CBC', iv: iv},
|
||||||
|
key,
|
||||||
|
data
|
||||||
|
);
|
||||||
|
|
||||||
|
return new Uint8Array(decryptedContent);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function encryptString(plainText, passphrase) {
|
||||||
|
const encoder = new TextEncoder();
|
||||||
|
const data = encoder.encode(plainText);
|
||||||
|
const pwHash = await crypto.subtle.digest('SHA-256', encoder.encode(passphrase));
|
||||||
|
|
||||||
|
const key = await crypto.subtle.importKey(
|
||||||
|
'raw', pwHash, {name: 'AES-CBC'}, false, ['encrypt']
|
||||||
|
);
|
||||||
|
|
||||||
|
const iv = crypto.getRandomValues(new Uint8Array(16));
|
||||||
|
const encrypted = await crypto.subtle.encrypt(
|
||||||
|
{name: 'AES-CBC', iv: iv},
|
||||||
|
key,
|
||||||
|
data
|
||||||
|
);
|
||||||
|
|
||||||
|
const combined = new Uint8Array(iv.length + encrypted.byteLength);
|
||||||
|
combined.set(iv);
|
||||||
|
combined.set(new Uint8Array(encrypted), iv.length);
|
||||||
|
|
||||||
|
return fixBase64Padding(btoa(String.fromCharCode(...combined)));
|
||||||
|
}
|
||||||
|
|
||||||
|
async function decryptString(base64Text, passphrase) {
|
||||||
|
const encoder = new TextEncoder();
|
||||||
|
const combined = new Uint8Array(atob(base64Text).split("").map(c => c.charCodeAt(0)));
|
||||||
|
|
||||||
|
const pwHash = await crypto.subtle.digest('SHA-256', encoder.encode(passphrase));
|
||||||
|
const key = await crypto.subtle.importKey(
|
||||||
|
'raw', pwHash, {name: 'AES-CBC'}, false, ['decrypt']
|
||||||
|
);
|
||||||
|
|
||||||
|
const iv = combined.slice(0, 16);
|
||||||
|
const data = combined.slice(16);
|
||||||
|
|
||||||
|
const decrypted = await crypto.subtle.decrypt(
|
||||||
|
{name: 'AES-CBC', iv: iv},
|
||||||
|
key,
|
||||||
|
data
|
||||||
|
);
|
||||||
|
|
||||||
|
return new TextDecoder().decode(decrypted);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
async function fetchPost(url, value) {
|
||||||
|
let response = await fetch(url, {
|
||||||
|
method: "POST",
|
||||||
|
credentials: "omit",
|
||||||
|
body: value,
|
||||||
|
headers: {
|
||||||
|
"secret": await encryptWithNonce(passwordHash, passwordHash, await getNonce(username, passwordHash))
|
||||||
|
}
|
||||||
|
});
|
||||||
|
let data = await response.text();
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function fetchPostEnc(url, value) {
|
||||||
|
let nonce = await getNonce(username, passwordHash);
|
||||||
|
let response = await fetch(url, {
|
||||||
|
method: "POST",
|
||||||
|
credentials: "omit",
|
||||||
|
body: await encryptWithNonce(value, passwordHash, nonce),
|
||||||
|
headers: {
|
||||||
|
"secret": await encryptWithNonce(passwordHash, passwordHash, nonce)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
let data = await response.text();
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function fetchAsync(url) {
|
||||||
|
let response = await fetch(url, {
|
||||||
|
method: "GET",
|
||||||
|
credentials: "omit"
|
||||||
|
});
|
||||||
|
|
||||||
|
let data = await response.text();
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function fetchAsyncWAuth(url) {
|
||||||
|
let response = await fetch(url, {
|
||||||
|
method: "GET",
|
||||||
|
credentials: "omit",
|
||||||
|
headers: {
|
||||||
|
"secret": await encryptWithNonce(passwordHash, passwordHash, await getNonce(username, passwordHash))
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
let data = await response.text();
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getServerInfo(host){
|
||||||
|
console.log(`${window.location.protocol}//${host}/_larpix/serverinfo`)
|
||||||
|
return JSON.parse(await fetchAsync(`${window.location.protocol}//${host}/_larpix/serverinfo`));
|
||||||
|
}
|
||||||
|
|
||||||
|
async function Auth(username, password) {
|
||||||
|
|
||||||
|
|
||||||
|
let passwordHash = await hashSHA3_512(password);
|
||||||
|
let response = await fetch(`${url}/auth?u=${username}`, {
|
||||||
|
method: "GET",
|
||||||
|
credentials: "omit",
|
||||||
|
headers: {
|
||||||
|
"secret": await encryptWithNonce(passwordHash, passwordHash, await getNonce(username, passwordHash))
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
let data = await response.text();
|
||||||
|
return data;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
async function fetchEncrypted(request, body)
|
||||||
|
{
|
||||||
|
|
||||||
|
let nonce = await getNonce(username, passwordHash);
|
||||||
|
|
||||||
|
let response = await fetch(`${url}/encryptedrequest?u=${username}`, {
|
||||||
|
method: "POST",
|
||||||
|
credentials: "omit",
|
||||||
|
body: await encryptWithNonce(
|
||||||
|
|
||||||
|
JSON.stringify({
|
||||||
|
string1: request,
|
||||||
|
string2: body
|
||||||
|
})
|
||||||
|
|
||||||
|
, passwordHash, nonce),
|
||||||
|
headers: {
|
||||||
|
"secret": await encryptWithNonce(passwordHash, passwordHash, nonce)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
let data = await response.text();
|
||||||
|
return decryptString(data, passwordHash);
|
||||||
|
}
|
||||||
|
|
||||||
|
function power(base, exponent, mod) {
|
||||||
|
let res = 1n;
|
||||||
|
base = base % mod;
|
||||||
|
while (exponent > 0n) {
|
||||||
|
if (exponent % 2n === 1n) res = (res * base) % mod;
|
||||||
|
base = (base * base) % mod;
|
||||||
|
exponent = exponent / 2n;
|
||||||
|
}
|
||||||
|
return res;
|
||||||
|
}
|
||||||
|
|
||||||
|
function fixBase64Padding(base64String) {
|
||||||
|
let str = base64String.replace(/-/g, '+').replace(/_/g, '/');
|
||||||
|
const pad = str.length % 4;
|
||||||
|
|
||||||
|
if (pad) {
|
||||||
|
if (pad === 1) {
|
||||||
|
throw new Error("");
|
||||||
|
}
|
||||||
|
str += '='.repeat(4 - pad);
|
||||||
|
}
|
||||||
|
|
||||||
|
return str;
|
||||||
|
}
|
||||||
|
|
||||||
|
function showNotification(message, type = 'info', duration = 3500) {
|
||||||
|
let container = document.getElementById('notification-container');
|
||||||
|
if (!container) {
|
||||||
|
container = document.createElement('div');
|
||||||
|
container.id = 'notification-container';
|
||||||
|
document.body.appendChild(container);
|
||||||
|
}
|
||||||
|
|
||||||
|
const notif = document.createElement('div');
|
||||||
|
notif.className = `notification ${type}`;
|
||||||
|
notif.textContent = message;
|
||||||
|
|
||||||
|
container.appendChild(notif);
|
||||||
|
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
notif.classList.add('show');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
notif.classList.remove('show');
|
||||||
|
|
||||||
|
notif.addEventListener('transitionend', () => {
|
||||||
|
notif.remove();
|
||||||
|
});
|
||||||
|
}, duration);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function showAction(message, actionid) {
|
||||||
|
let container = document.getElementById('notification-container');
|
||||||
|
if (!container) {
|
||||||
|
container = document.createElement('div');
|
||||||
|
container.id = 'notification-container';
|
||||||
|
document.body.appendChild(container);
|
||||||
|
}
|
||||||
|
|
||||||
|
const notif = document.createElement('div');
|
||||||
|
notif.className = `notification action`;
|
||||||
|
notif.textContent = message;
|
||||||
|
notif.id = `notification-${actionid}`;
|
||||||
|
|
||||||
|
container.appendChild(notif);
|
||||||
|
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
notif.classList.add('show');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function clearAction(actionid) {
|
||||||
|
|
||||||
|
let notif = document.getElementById(`notification-${actionid}`);
|
||||||
|
notif.classList.remove('show');
|
||||||
|
|
||||||
|
notif.addEventListener('transitionend', () => {
|
||||||
|
notif.remove();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
async function hashSHA3_512(input) {
|
||||||
|
const encoder = new TextEncoder();
|
||||||
|
const data = encoder.encode(input);
|
||||||
|
const hashBuffer = await crypto.subtle.digest('SHA-512', data); //-3 kiedys xddddddddddddddddd
|
||||||
|
const hashArray = Array.from(new Uint8Array(hashBuffer));
|
||||||
|
const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
|
||||||
|
return hashHex;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
var password = "";
|
||||||
|
var username = "";
|
||||||
|
var passwordHash = "";
|
||||||
|
var host = "";
|
||||||
|
async function mainJS()
|
||||||
|
{
|
||||||
|
username = localStorage.getItem('username');
|
||||||
|
password = localStorage.getItem('password');
|
||||||
|
host = localStorage.getItem('host');
|
||||||
|
passwordHash = await hashSHA3_512(password);
|
||||||
|
url = `${window.location.protocol}//${host}/_larpix`;
|
||||||
|
}
|
||||||
|
mainJS();
|
||||||
|
|
||||||
|
collapseDmsBtn.addEventListener("click", () => {
|
||||||
|
collapseDmsBtn.classList.toggle("collapsed");
|
||||||
|
});
|
||||||
|
collapseGroupsBtn.addEventListener("click", () => {
|
||||||
|
collapseGroupsBtn.classList.toggle("collapsed");
|
||||||
|
});
|
||||||
|
|
||||||
|
addDmBtn.addEventListener("click", () => {
|
||||||
|
roomContentMain.innerHTML =
|
||||||
|
`
|
||||||
|
<div style="display: flex;justify-content: center;align-items: center;height:100%;flex-direction: column;">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="3rem" viewBox="0 -960 960 960" fill="var(--text-color)"><path d="M120-160v-600q0-33 23.5-56.5T200-840h480q33 0 56.5 23.5T760-760v203q-10-2-20-2.5t-20-.5q-10 0-20 .5t-20 2.5v-203H200v400h283q-2 10-2.5 20t-.5 20q0 10 .5 20t2.5 20H240L120-160Zm160-440h320v-80H280v80Zm0 160h200v-80H280v80Zm400 280v-120H560v-80h120v-120h80v120h120v80H760v120h-80ZM200-360v-400 400Z"/></svg>
|
||||||
|
<herotitle>Add Chat</herotitle>
|
||||||
|
<p>Add a private, encrypted chat by entering a username</p>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
});
|
||||||
|
addGroupBtn.addEventListener("click", () => {
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
sidebarHomeButton.addEventListener("mouseenter", () => {
|
||||||
|
sidebarHomeIndicator.classList.add("hover");
|
||||||
|
});
|
||||||
|
sidebarHomeButton.addEventListener("mouseleave", () => {
|
||||||
|
sidebarHomeIndicator.classList.remove("hover");
|
||||||
|
});
|
||||||
|
|
||||||
|
sidebarAddButton.addEventListener("mouseenter", () => {
|
||||||
|
sidebarAddIndicator.classList.add("hover");
|
||||||
|
});
|
||||||
|
sidebarAddButton.addEventListener("mouseleave", () => {
|
||||||
|
sidebarAddIndicator.classList.remove("hover");
|
||||||
|
});
|
||||||
|
|
||||||
300
android/app/src/main/assets/public/style.css
Normal file
300
android/app/src/main/assets/public/style.css
Normal file
|
|
@ -0,0 +1,300 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Nunito';
|
||||||
|
src: URL('Nunito-Regular.ttf') format('truetype');
|
||||||
|
}
|
||||||
|
:root {
|
||||||
|
--main-bg-color: rgb(20, 20, 20);
|
||||||
|
--text-color: rgb(240, 240, 245);
|
||||||
|
--icon-button-size: 2rem;
|
||||||
|
--press-scale: scale(0.92);
|
||||||
|
--light-border-color: rgba(255, 255, 255, 0.08);
|
||||||
|
--button-margin: 0.4rem;
|
||||||
|
--icon-button-height: 3.4rem;
|
||||||
|
--button-height: 2.4rem;
|
||||||
|
--border-width: 0.09rem;
|
||||||
|
|
||||||
|
--big-default: rgb(207 207 207);
|
||||||
|
--big-red: rgb(202 0 0);
|
||||||
|
--big-green: rgb(25 189 0);
|
||||||
|
}
|
||||||
|
.red {
|
||||||
|
color: var(--big-red);
|
||||||
|
}
|
||||||
|
.green {
|
||||||
|
color: var(--big-green);
|
||||||
|
}
|
||||||
|
.mininote {
|
||||||
|
font-size: 80%;
|
||||||
|
padding: 0 0.5rem;
|
||||||
|
}
|
||||||
|
.aqua {
|
||||||
|
color: rgb(0 139 200);
|
||||||
|
}
|
||||||
|
html {
|
||||||
|
font-size: max(16px, calc(100vw / 120));
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
padding-top: env(safe-area-inset-top);
|
||||||
|
background-color: var(--main-bg-color);
|
||||||
|
display: flex;
|
||||||
|
height: 100dvh;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
* {
|
||||||
|
font-size: 1rem;
|
||||||
|
scrollbar-width: none;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
color: var(--text-color);
|
||||||
|
font-family: "Nunito", sans-serif;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
button, input {
|
||||||
|
border-radius: 0.8rem;
|
||||||
|
background-color: rgba(255, 255, 255, 0.05);
|
||||||
|
margin: var(--button-margin);
|
||||||
|
padding: var(--button-margin);
|
||||||
|
|
||||||
|
height: var(--button-height);
|
||||||
|
display: flex;
|
||||||
|
cursor: pointer;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
border: var(--border-width) solid var(--light-border-color);
|
||||||
|
}
|
||||||
|
input {
|
||||||
|
padding-left: calc(var(--button-margin) * 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
indicator {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
left: -0.08rem;
|
||||||
|
border: 0.15rem solid transparent;
|
||||||
|
border-radius: 0.8rem;
|
||||||
|
transform: translateY(calc( ( var(--icon-button-height) + (var(--button-margin) * 2) ) / 2 - 0.25rem));
|
||||||
|
}
|
||||||
|
indicator.notification {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0.5rem;
|
||||||
|
left: -0.08rem;
|
||||||
|
border: 0.15rem solid var(--text-color);
|
||||||
|
border-radius: 0.8rem;
|
||||||
|
transform: translateY(calc( ( var(--icon-button-height) + (var(--button-margin) * 2) ) / 2 - 0.25rem));
|
||||||
|
}
|
||||||
|
indicator.hover {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 1.2rem;
|
||||||
|
left: -0.08rem;
|
||||||
|
border: 0.15rem solid var(--text-color);
|
||||||
|
border-radius: 0.8rem;
|
||||||
|
transform: translateY(calc( ( var(--icon-button-height) + (var(--button-margin) * 2) ) / 2 - 0.6rem));
|
||||||
|
}
|
||||||
|
indicator.active {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 2rem;
|
||||||
|
left: -0.08rem;
|
||||||
|
border: 0.15rem solid var(--text-color);
|
||||||
|
border-radius: 0.8rem;
|
||||||
|
transform: translateY(calc( ( var(--icon-button-height) + (var(--button-margin) * 2) ) / 2 - 1rem));
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.icon-button {
|
||||||
|
height: var(--icon-button-height);
|
||||||
|
width: var(--icon-button-height);
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.icon-button svg {
|
||||||
|
width: var(--icon-button-size);
|
||||||
|
height: var(--icon-button-size);
|
||||||
|
}
|
||||||
|
button:hover, input:hover {
|
||||||
|
background-color: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
button:active, input:active {
|
||||||
|
transform: var(--press-scale);
|
||||||
|
}
|
||||||
|
roomcontent {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
height: 100dvh;
|
||||||
|
width: calc(100vw - (var(--icon-button-height) + (var(--button-margin) * 2) + var(--border-width)) - 17rem);
|
||||||
|
border-right: var(--border-width) solid var(--light-border-color);
|
||||||
|
}
|
||||||
|
roomcontent2 {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
height: calc(100dvh - (var(--button-height) * 1.5));
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
sidebar {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
height: 100dvh;
|
||||||
|
width: calc(var(--icon-button-height) + (var(--button-margin) * 2) + var(--border-width));
|
||||||
|
border-right: var(--border-width) solid var(--light-border-color);
|
||||||
|
}
|
||||||
|
sidebar.second {
|
||||||
|
width: 17rem;
|
||||||
|
min-width: 17rem;
|
||||||
|
max-width: 17rem;
|
||||||
|
}
|
||||||
|
.sidebar-section-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapse-text-button {
|
||||||
|
padding-left: calc(var(--button-margin) + 0.2rem);
|
||||||
|
flex-shrink: 0;
|
||||||
|
flex-grow: 1;
|
||||||
|
border: none;
|
||||||
|
background-color: transparent;
|
||||||
|
height: 2rem;
|
||||||
|
font-weight: 600;
|
||||||
|
gap: 0.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapse-text-button .chevron {
|
||||||
|
width: 1.25rem;
|
||||||
|
height: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapse-text-button.collapsed .chevron {
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-action-button {
|
||||||
|
border: none;
|
||||||
|
background-color: transparent;
|
||||||
|
height: 2rem;
|
||||||
|
width: 2rem;
|
||||||
|
padding: 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
justify-content: center;
|
||||||
|
color: rgba(255, 255, 255, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-action-button:hover {
|
||||||
|
background-color: rgba(255, 255, 255, 0.1);
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-action-button svg {
|
||||||
|
width: 1.25rem;
|
||||||
|
height: 1.25rem;
|
||||||
|
}
|
||||||
|
hr {
|
||||||
|
border: none;
|
||||||
|
height: 0;
|
||||||
|
background-color: transparent;
|
||||||
|
border-bottom: var(--border-width) solid var(--light-border-color);
|
||||||
|
width: 60%;
|
||||||
|
margin-left: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#notification-container {
|
||||||
|
padding-top: env(safe-area-inset-top);
|
||||||
|
position: fixed;
|
||||||
|
top: 1.5rem;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
z-index: 1500;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.8rem;
|
||||||
|
pointer-events: none;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification {
|
||||||
|
background: rgba(255, 255, 255, 0.015);
|
||||||
|
backdrop-filter: blur(1.2rem);
|
||||||
|
-webkit-backdrop-filter: blur(1.2rem);
|
||||||
|
|
||||||
|
border: var(--border-width) solid var(--light-border-color);
|
||||||
|
border-radius: 0.9rem;
|
||||||
|
|
||||||
|
padding: 0.8rem 1.3rem;
|
||||||
|
color: var(--text-color);
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 500;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.4);
|
||||||
|
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-1rem);
|
||||||
|
transition:
|
||||||
|
opacity 0.3s ease,
|
||||||
|
transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
|
||||||
|
background-color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification.show {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification.info {
|
||||||
|
border-color: var(--big-default);
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification.error {
|
||||||
|
border-color: var(--big-red);
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification.success {
|
||||||
|
border-color: var(--big-green);
|
||||||
|
}
|
||||||
|
|
||||||
|
roomtopbar {
|
||||||
|
height: calc(var(--button-height) * 1.5);
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
border-bottom: var(--border-width) solid var(--light-border-color);
|
||||||
|
|
||||||
|
line-height: calc(var(--button-height) * 1.5);
|
||||||
|
font-weight: bold;
|
||||||
|
padding-left: calc(var(--button-margin) * 3);
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
sidebar.second#roomdetailsbar {
|
||||||
|
height: calc(var(--button-height) * 1.5);
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
|
||||||
|
border-bottom: var(--border-width) solid var(--light-border-color);
|
||||||
|
}
|
||||||
|
fullcontainer {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
herotitle {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
}
|
||||||
6
android/app/src/main/res/xml/config.xml
Normal file
6
android/app/src/main/res/xml/config.xml
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
<?xml version='1.0' encoding='utf-8'?>
|
||||||
|
<widget version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
|
||||||
|
<access origin="*" />
|
||||||
|
|
||||||
|
|
||||||
|
</widget>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue