olcxjas-softworks/LarpixClient
2
0
Fork 1
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions 3

Add groups section, actions-notifier and auth

Browse source
This commit is contained in:
olcxja 2026-05-08 13:26:01 +02:00
commit 8fe2b5cf28
3 changed files with 124 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

52
webroot/index.html
View file

@ -39,23 +39,71 @@
<hr>
</sidebar>
<sidebar class="second">
<sidebar class="second" id="roomsbar">
<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="New 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="New 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>
</roomcontent>
<sidebar class="second">
<sidebar class="second" id="roomdetailsbar">
</sidebar>
</body>
</html>
<script src="main.js"></script>
<script>
async function start()
{
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/";
}
}
async function refreshDms()
{
showAction("Refreshing dms...", "dmrefresh");
let res = await fetchEncrypted("user/dm/list", "");
console.log(res);
clearAction("dmrefresh");
}
start();
</script>

39
webroot/main.js
View file

@ -4,6 +4,7 @@ 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 sidebarHome = document.getElementById("sidebar-home");
const sidebarHomeButton = sidebarHome.children.item(1);
@ -290,7 +291,7 @@ async function fetchEncrypted(request, body)
}
});
let data = await response.text();
return data;
return decryptString(data, passwordHash);
}
function power(base, exponent, mod) {
@ -348,6 +349,38 @@ function showNotification(message, type = 'info', duration = 3500) {
}
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);
@ -369,12 +402,16 @@ async function mainJS()
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");
});
sidebarHomeButton.addEventListener("mouseenter", () => {
sidebarHomeIndicator.classList.add("hover");

31
webroot/style.css
View file

@ -140,15 +140,23 @@ sidebar {
border-right: var(--border-width) solid var(--light-border-color);
}
sidebar.second {
width: 22rem;
width: 20rem;
}
.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 {
@ -159,6 +167,27 @@ sidebar.second {
.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;