ui: polish header and user panel with dropdown + profile pic support & file list adjustments
This commit is contained in:
Ryan
15
public/api/profile/getCurrentUser.php
Normal file
15
public/api/profile/getCurrentUser.php
Normal file
@@ -0,0 +1,15 @@
|
||||
<?php
|
||||
require_once __DIR__ . '/../../../config/config.php';
|
||||
require_once PROJECT_ROOT . '/src/controllers/UserController.php';
|
||||
|
||||
header('Content-Type: application/json');
|
||||
|
||||
if (empty($_SESSION['authenticated'])) {
|
||||
http_response_code(401);
|
||||
echo json_encode(['error'=>'Unauthorized']);
|
||||
exit;
|
||||
}
|
||||
|
||||
$user = $_SESSION['username'];
|
||||
$data = UserModel::getUser($user);
|
||||
echo json_encode($data);
|
||||
17
public/api/profile/uploadPicture.php
Normal file
17
public/api/profile/uploadPicture.php
Normal file
@@ -0,0 +1,17 @@
|
||||
<?php
|
||||
require_once __DIR__ . '/../../../config/config.php';
|
||||
require_once PROJECT_ROOT . '/src/controllers/UserController.php';
|
||||
|
||||
// Always JSON, even on PHP notices
|
||||
header('Content-Type: application/json');
|
||||
|
||||
try {
|
||||
$userController = new UserController();
|
||||
$userController->uploadPicture();
|
||||
} catch (\Throwable $e) {
|
||||
http_response_code(500);
|
||||
echo json_encode([
|
||||
'success' => false,
|
||||
'error' => 'Exception: ' . $e->getMessage()
|
||||
]);
|
||||
}
|
||||
BIN
public/assets/default-avatar.png
Normal file
BIN
public/assets/default-avatar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
@@ -134,17 +134,27 @@ body.dark-mode header {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 9px;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
transition: background-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.header-buttons button:not(#userDropdownToggle) {
|
||||
border-radius: 50%;
|
||||
padding: 9px;
|
||||
}
|
||||
|
||||
#userDropdownToggle {
|
||||
border-radius: 4px !important;
|
||||
padding: 6px 10px !important;
|
||||
}
|
||||
|
||||
.header-buttons button:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 600px) {
|
||||
header {
|
||||
flex-direction: column;
|
||||
@@ -955,6 +965,23 @@ body.dark-mode #fileList table tr {
|
||||
padding: 8px 10px !important;
|
||||
}
|
||||
|
||||
:root {
|
||||
--file-row-height: 48px; /* default, will be overwritten by your slider */
|
||||
}
|
||||
|
||||
/* Force each <tr> to be exactly the var() height */
|
||||
#fileList table.table tbody tr {
|
||||
height: var(--file-row-height) !important;
|
||||
}
|
||||
|
||||
/* And force each <td> to match, with no extra padding or line-height */
|
||||
#fileList table.table tbody td {
|
||||
height: var(--file-row-height) !important;
|
||||
line-height: var(--file-row-height) !important;
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* ===========================================================
|
||||
HEADINGS & FORM LABELS
|
||||
@@ -1328,26 +1355,6 @@ body.dark-mode .image-preview-modal-content {
|
||||
border-color: #444;
|
||||
}
|
||||
|
||||
.preview-btn,
|
||||
.download-btn,
|
||||
.rename-btn,
|
||||
.share-btn,
|
||||
.edit-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.share-btn {
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
margin-left: 0px;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.image-modal-img {
|
||||
max-width: 100%;
|
||||
max-height: 80vh;
|
||||
@@ -2102,13 +2109,23 @@ body.dark-mode .header-drop-zone.drag-active {
|
||||
color: black;
|
||||
}
|
||||
@media only screen and (max-width: 600px) {
|
||||
#fileSummary {
|
||||
float: none !important;
|
||||
margin: 0 auto !important;
|
||||
text-align: center !important;
|
||||
#fileSummary,
|
||||
#rowHeightSliderContainer,
|
||||
#viewSliderContainer {
|
||||
float: none !important;
|
||||
margin: 0 auto !important;
|
||||
text-align: center !important;
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
#viewSliderContainer label,
|
||||
#viewSliderContainer span {
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body.dark-mode #fileSummary {
|
||||
color: white;
|
||||
}
|
||||
@@ -2165,4 +2182,64 @@ body.dark-mode #searchIcon .material-icons {
|
||||
body.dark-mode .btn-icon:hover,
|
||||
body.dark-mode .btn-icon:focus {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.user-dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.user-dropdown .user-menu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin-top: 0.25rem;
|
||||
background: var(--bs-body-bg, #fff);
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
min-width: 150px;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.user-dropdown .user-menu.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.user-dropdown .user-menu .item {
|
||||
padding: 0.5rem 0.75rem;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.user-dropdown .user-menu .item:hover {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.user-dropdown .dropdown-caret {
|
||||
border-top: 5px solid currentColor;
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
body.dark-mode .user-dropdown .user-menu {
|
||||
background: #2c2c2c;
|
||||
border-color: #444;
|
||||
}
|
||||
|
||||
body.dark-mode .user-dropdown .user-menu .item {
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
body.dark-mode .user-dropdown .user-menu .item:hover {
|
||||
background: rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.user-dropdown .dropdown-username {
|
||||
margin: 0 8px;
|
||||
font-weight: 500;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -135,9 +135,6 @@
|
||||
<!-- Your header drop zone -->
|
||||
<div id="headerDropArea" class="header-drop-zone"></div>
|
||||
<div class="header-buttons">
|
||||
<button id="logoutBtn" data-i18n-title="logout">
|
||||
<i class="material-icons">exit_to_app</i>
|
||||
</button>
|
||||
<button id="changePasswordBtn" data-i18n-title="change_password" style="display: none;">
|
||||
<i class="material-icons">vpn_key</i>
|
||||
</button>
|
||||
|
||||
@@ -3,7 +3,7 @@ import { loadAdminConfigFunc } from './auth.js';
|
||||
import { showToast, toggleVisibility, attachEnterKeyListener } from './domUtils.js';
|
||||
import { sendRequest } from './networkUtils.js';
|
||||
|
||||
const version = "v1.3.3";
|
||||
const version = "v1.3.4";
|
||||
const adminTitle = `${t("admin_panel")} <small style="font-size:12px;color:gray;">${version}</small>`;
|
||||
|
||||
// ————— Inject updated styles —————
|
||||
|
||||
@@ -15,10 +15,11 @@ import {
|
||||
openUserPanel,
|
||||
openTOTPModal,
|
||||
closeTOTPModal,
|
||||
setLastLoginData
|
||||
setLastLoginData,
|
||||
openApiModal
|
||||
} from './authModals.js';
|
||||
import { openAdminPanel } from './adminPanel.js';
|
||||
import { initializeApp } from './main.js';
|
||||
import { initializeApp, triggerLogout } from './main.js';
|
||||
|
||||
// Production OIDC configuration (override via API as needed)
|
||||
const currentOIDCConfig = {
|
||||
@@ -154,7 +155,7 @@ function updateLoginOptionsUIFromStorage() {
|
||||
disableFormLogin: localStorage.getItem("disableFormLogin") === "true",
|
||||
disableBasicAuth: localStorage.getItem("disableBasicAuth") === "true",
|
||||
disableOIDCLogin: localStorage.getItem("disableOIDCLogin") === "true",
|
||||
authBypass: localStorage.getItem("authBypass") === "true"
|
||||
authBypass: localStorage.getItem("authBypass") === "true"
|
||||
});
|
||||
}
|
||||
|
||||
@@ -199,21 +200,45 @@ function insertAfter(newNode, referenceNode) {
|
||||
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
|
||||
}
|
||||
|
||||
function updateAuthenticatedUI(data) {
|
||||
document.getElementById('loadingOverlay').remove();
|
||||
async function fetchProfilePicture() {
|
||||
try {
|
||||
const res = await fetch('/api/profile/getCurrentUser.php', {
|
||||
credentials: 'include'
|
||||
});
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||
const info = await res.json();
|
||||
let pic = info.profile_picture || '';
|
||||
// --- take only what's after the *last* colon ---
|
||||
const parts = pic.split(':');
|
||||
pic = parts[parts.length - 1] || '';
|
||||
// strip any stray leading colons
|
||||
pic = pic.replace(/^:+/, '');
|
||||
// ensure exactly one leading slash
|
||||
if (pic && !pic.startsWith('/')) pic = '/' + pic;
|
||||
return pic;
|
||||
} catch (e) {
|
||||
console.warn('fetchProfilePicture failed:', e);
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
// show the wrapper (so the login form can be visible)
|
||||
document.querySelector('.main-wrapper').style.display = '';
|
||||
document.getElementById('loginForm').style.display = 'none';
|
||||
export async function updateAuthenticatedUI(data) {
|
||||
// 1) Remove loading overlay safely
|
||||
const loading = document.getElementById('loadingOverlay');
|
||||
if (loading) loading.remove();
|
||||
|
||||
// 2) Show main UI
|
||||
document.querySelector('.main-wrapper').style.display = '';
|
||||
document.getElementById('loginForm').style.display = 'none';
|
||||
toggleVisibility("loginForm", false);
|
||||
toggleVisibility("mainOperations", true);
|
||||
toggleVisibility("uploadFileForm", true);
|
||||
toggleVisibility("fileListContainer", true);
|
||||
//attachEnterKeyListener("addUserModal", "saveUserBtn");
|
||||
attachEnterKeyListener("removeUserModal", "deleteUserBtn");
|
||||
attachEnterKeyListener("changePasswordModal", "saveNewPasswordBtn");
|
||||
attachEnterKeyListener("removeUserModal", "deleteUserBtn");
|
||||
attachEnterKeyListener("changePasswordModal","saveNewPasswordBtn");
|
||||
document.querySelector(".header-buttons").style.visibility = "visible";
|
||||
|
||||
// 3) Persist auth flags (unchanged)
|
||||
if (typeof data.totp_enabled !== "undefined") {
|
||||
localStorage.setItem("userTOTPEnabled", data.totp_enabled ? "true" : "false");
|
||||
}
|
||||
@@ -221,64 +246,143 @@ function updateAuthenticatedUI(data) {
|
||||
localStorage.setItem("username", data.username);
|
||||
}
|
||||
if (typeof data.folderOnly !== "undefined") {
|
||||
localStorage.setItem("folderOnly", data.folderOnly ? "true" : "false");
|
||||
localStorage.setItem("readOnly", data.readOnly ? "true" : "false");
|
||||
localStorage.setItem("disableUpload", data.disableUpload ? "true" : "false");
|
||||
localStorage.setItem("folderOnly", data.folderOnly ? "true" : "false");
|
||||
localStorage.setItem("readOnly", data.readOnly ? "true" : "false");
|
||||
localStorage.setItem("disableUpload",data.disableUpload? "true" : "false");
|
||||
}
|
||||
|
||||
// 4) Fetch up-to-date profile picture — ALWAYS overwrite localStorage
|
||||
const profilePicUrl = await fetchProfilePicture();
|
||||
localStorage.setItem("profilePicUrl", profilePicUrl);
|
||||
|
||||
// 5) Build / update header buttons
|
||||
const headerButtons = document.querySelector(".header-buttons");
|
||||
const firstButton = headerButtons.firstElementChild;
|
||||
const firstButton = headerButtons.firstElementChild;
|
||||
|
||||
// a) restore-from-trash for admins
|
||||
if (data.isAdmin) {
|
||||
let restoreBtn = document.getElementById("restoreFilesBtn");
|
||||
if (!restoreBtn) {
|
||||
restoreBtn = document.createElement("button");
|
||||
restoreBtn.id = "restoreFilesBtn";
|
||||
restoreBtn.classList.add("btn", "btn-warning");
|
||||
restoreBtn.setAttribute("data-i18n-title", "trash_restore_delete");
|
||||
restoreBtn.innerHTML = '<i class="material-icons">restore_from_trash</i>';
|
||||
if (firstButton) insertAfter(restoreBtn, firstButton);
|
||||
else headerButtons.appendChild(restoreBtn);
|
||||
}
|
||||
restoreBtn.style.display = "block";
|
||||
|
||||
let adminPanelBtn = document.getElementById("adminPanelBtn");
|
||||
if (!adminPanelBtn) {
|
||||
adminPanelBtn = document.createElement("button");
|
||||
adminPanelBtn.id = "adminPanelBtn";
|
||||
adminPanelBtn.classList.add("btn", "btn-info");
|
||||
adminPanelBtn.setAttribute("data-i18n-title", "admin_panel");
|
||||
adminPanelBtn.innerHTML = '<i class="material-icons">admin_panel_settings</i>';
|
||||
insertAfter(adminPanelBtn, restoreBtn);
|
||||
adminPanelBtn.addEventListener("click", openAdminPanel);
|
||||
} else {
|
||||
adminPanelBtn.style.display = "block";
|
||||
let r = document.getElementById("restoreFilesBtn");
|
||||
if (!r) {
|
||||
r = document.createElement("button");
|
||||
r.id = "restoreFilesBtn";
|
||||
r.classList.add("btn","btn-warning");
|
||||
r.setAttribute("data-i18n-title","trash_restore_delete");
|
||||
r.innerHTML = '<i class="material-icons">restore_from_trash</i>';
|
||||
if (firstButton) insertAfter(r, firstButton);
|
||||
else headerButtons.appendChild(r);
|
||||
}
|
||||
r.style.display = "block";
|
||||
} else {
|
||||
const restoreBtn = document.getElementById("restoreFilesBtn");
|
||||
if (restoreBtn) restoreBtn.style.display = "none";
|
||||
const adminPanelBtn = document.getElementById("adminPanelBtn");
|
||||
if (adminPanelBtn) adminPanelBtn.style.display = "none";
|
||||
const r = document.getElementById("restoreFilesBtn");
|
||||
if (r) r.style.display = "none";
|
||||
}
|
||||
|
||||
if (window.location.hostname !== "demo.filerise.net") {
|
||||
let userPanelBtn = document.getElementById("userPanelBtn");
|
||||
if (!userPanelBtn) {
|
||||
userPanelBtn = document.createElement("button");
|
||||
userPanelBtn.id = "userPanelBtn";
|
||||
userPanelBtn.classList.add("btn", "btn-user");
|
||||
userPanelBtn.setAttribute("data-i18n-title", "user_panel");
|
||||
userPanelBtn.innerHTML = '<i class="material-icons">account_circle</i>';
|
||||
// b) admin panel button only on demo.filerise.net
|
||||
if (data.isAdmin && window.location.hostname === "demo.filerise.net") {
|
||||
let a = document.getElementById("adminPanelBtn");
|
||||
if (!a) {
|
||||
a = document.createElement("button");
|
||||
a.id = "adminPanelBtn";
|
||||
a.classList.add("btn","btn-info");
|
||||
a.setAttribute("data-i18n-title","admin_panel");
|
||||
a.innerHTML = '<i class="material-icons">admin_panel_settings</i>';
|
||||
insertAfter(a, document.getElementById("restoreFilesBtn"));
|
||||
a.addEventListener("click", openAdminPanel);
|
||||
}
|
||||
a.style.display = "block";
|
||||
} else {
|
||||
const a = document.getElementById("adminPanelBtn");
|
||||
if (a) a.style.display = "none";
|
||||
}
|
||||
|
||||
// c) user dropdown on non-demo
|
||||
if (window.location.hostname !== "demo.filerise.net") {
|
||||
let dd = document.getElementById("userDropdown");
|
||||
|
||||
// choose icon *or* img
|
||||
const avatarHTML = profilePicUrl
|
||||
? `<img src="${profilePicUrl}" style="width:24px;height:24px;border-radius:50%;vertical-align:middle;">`
|
||||
: `<i class="material-icons">account_circle</i>`;
|
||||
|
||||
if (!dd) {
|
||||
dd = document.createElement("div");
|
||||
dd.id = "userDropdown";
|
||||
dd.classList.add("user-dropdown");
|
||||
|
||||
// toggle button
|
||||
const toggle = document.createElement("button");
|
||||
toggle.id = "userDropdownToggle";
|
||||
toggle.classList.add("btn","btn-user");
|
||||
toggle.setAttribute("title", t("user_settings"));
|
||||
toggle.innerHTML = `${avatarHTML}<span class="dropdown-username">${data.username}</span><span class="dropdown-caret"></span>`;
|
||||
dd.append(toggle);
|
||||
|
||||
// menu
|
||||
const menu = document.createElement("div");
|
||||
menu.classList.add("user-menu");
|
||||
menu.innerHTML = `
|
||||
<div class="item" id="menuUserPanel">
|
||||
<i class="material-icons folder-icon">person</i> ${t("user_panel")}
|
||||
</div>
|
||||
${data.isAdmin ? `
|
||||
<div class="item" id="menuAdminPanel">
|
||||
<i class="material-icons folder-icon">admin_panel_settings</i> ${t("admin_panel")}
|
||||
</div>` : ''}
|
||||
<div class="item" id="menuApiDocs">
|
||||
<i class="material-icons folder-icon">description</i> ${t("api_docs")}
|
||||
</div>
|
||||
<div class="item" id="menuLogout">
|
||||
<i class="material-icons folder-icon">logout</i> ${t("logout")}
|
||||
</div>
|
||||
`;
|
||||
dd.append(menu);
|
||||
|
||||
// insert
|
||||
const dm = document.getElementById("darkModeToggle");
|
||||
if (dm) insertAfter(dd, dm);
|
||||
else if (firstButton) insertAfter(dd, firstButton);
|
||||
else headerButtons.appendChild(dd);
|
||||
|
||||
// open/close
|
||||
toggle.addEventListener("click", e => {
|
||||
e.stopPropagation();
|
||||
menu.classList.toggle("show");
|
||||
});
|
||||
document.addEventListener("click", () => menu.classList.remove("show"));
|
||||
|
||||
// actions
|
||||
document.getElementById("menuUserPanel")
|
||||
.addEventListener("click", () => {
|
||||
menu.classList.remove("show");
|
||||
openUserPanel();
|
||||
});
|
||||
if (data.isAdmin) {
|
||||
document.getElementById("menuAdminPanel")
|
||||
.addEventListener("click", () => {
|
||||
menu.classList.remove("show");
|
||||
openAdminPanel();
|
||||
});
|
||||
}
|
||||
document.getElementById("menuApiDocs")
|
||||
.addEventListener("click", () => {
|
||||
menu.classList.remove("show");
|
||||
openApiModal();
|
||||
});
|
||||
document.getElementById("menuLogout")
|
||||
.addEventListener("click", () => {
|
||||
menu.classList.remove("show");
|
||||
triggerLogout();
|
||||
});
|
||||
|
||||
const adminBtn = document.getElementById("adminPanelBtn");
|
||||
if (adminBtn) insertAfter(userPanelBtn, adminBtn);
|
||||
else if (firstButton) insertAfter(userPanelBtn, firstButton);
|
||||
else headerButtons.appendChild(userPanelBtn);
|
||||
userPanelBtn.addEventListener("click", openUserPanel);
|
||||
} else {
|
||||
userPanelBtn.style.display = "block";
|
||||
// update avatar only
|
||||
const tog = dd.querySelector("#userDropdownToggle");
|
||||
tog.innerHTML = `${avatarHTML}<span class="dropdown-username">${data.username}</span><span class="dropdown-caret"></span>`;
|
||||
dd.style.display = "inline-block";
|
||||
}
|
||||
}
|
||||
|
||||
// 6) Finalize
|
||||
initializeApp();
|
||||
applyTranslations();
|
||||
updateItemsPerPageSelect();
|
||||
@@ -289,7 +393,8 @@ function checkAuthentication(showLoginToast = true) {
|
||||
return sendRequest("/api/auth/checkAuth.php")
|
||||
.then(data => {
|
||||
if (data.setup) {
|
||||
document.getElementById('loadingOverlay').remove();
|
||||
const overlay = document.getElementById('loadingOverlay');
|
||||
if (overlay) overlay.remove();
|
||||
|
||||
// show the wrapper (so the login form can be visible)
|
||||
document.querySelector('.main-wrapper').style.display = '';
|
||||
@@ -322,13 +427,14 @@ function checkAuthentication(showLoginToast = true) {
|
||||
updateAuthenticatedUI(data);
|
||||
return data;
|
||||
} else {
|
||||
document.getElementById('loadingOverlay').remove();
|
||||
const overlay = document.getElementById('loadingOverlay');
|
||||
if (overlay) overlay.remove();
|
||||
|
||||
// show the wrapper (so the login form can be visible)
|
||||
document.querySelector('.main-wrapper').style.display = '';
|
||||
document.getElementById('loginForm').style.display = '';
|
||||
if (showLoginToast) showToast("Please log in to continue.");
|
||||
toggleVisibility("loginForm", ! (localStorage.getItem("authBypass")==="true"));
|
||||
toggleVisibility("loginForm", !(localStorage.getItem("authBypass") === "true"));
|
||||
toggleVisibility("mainOperations", false);
|
||||
toggleVisibility("uploadFileForm", false);
|
||||
toggleVisibility("fileListContainer", false);
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import { showToast, toggleVisibility, attachEnterKeyListener } from './domUtils.js';
|
||||
import { sendRequest } from './networkUtils.js';
|
||||
import { t, applyTranslations, setLocale } from './i18n.js';
|
||||
import { loadAdminConfigFunc } from './auth.js';
|
||||
|
||||
import { loadAdminConfigFunc, updateAuthenticatedUI } from './auth.js';
|
||||
|
||||
let lastLoginData = null;
|
||||
export function setLastLoginData(data) {
|
||||
@@ -60,14 +59,11 @@ export function openTOTPLoginModal() {
|
||||
const totpSection = document.getElementById("totpSection");
|
||||
const recoverySection = document.getElementById("recoverySection");
|
||||
const toggleLink = this;
|
||||
|
||||
if (recoverySection.style.display === "none") {
|
||||
// Switch to recovery
|
||||
totpSection.style.display = "none";
|
||||
recoverySection.style.display = "block";
|
||||
toggleLink.textContent = t("use_totp_code_instead");
|
||||
} else {
|
||||
// Switch back to TOTP
|
||||
recoverySection.style.display = "none";
|
||||
totpSection.style.display = "block";
|
||||
toggleLink.textContent = t("use_recovery_code_instead");
|
||||
@@ -93,7 +89,6 @@ export function openTOTPLoginModal() {
|
||||
.then(res => res.json())
|
||||
.then(json => {
|
||||
if (json.status === "ok") {
|
||||
// recovery succeeded → finalize login
|
||||
window.location.href = "/index.html";
|
||||
} else {
|
||||
showToast(json.message || t("recovery_code_verification_failed"));
|
||||
@@ -107,17 +102,11 @@ export function openTOTPLoginModal() {
|
||||
// TOTP submission
|
||||
const totpInput = document.getElementById("totpLoginInput");
|
||||
totpInput.focus();
|
||||
|
||||
totpInput.addEventListener("input", async function () {
|
||||
const code = this.value.trim();
|
||||
if (code.length !== 6) {
|
||||
if (code.length !== 6) return;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const tokenRes = await fetch("/api/auth/token.php", {
|
||||
credentials: "include"
|
||||
});
|
||||
const tokenRes = await fetch("/api/auth/token.php", { credentials: "include" });
|
||||
if (!tokenRes.ok) {
|
||||
showToast(t("totp_verification_failed"));
|
||||
return;
|
||||
@@ -144,7 +133,6 @@ export function openTOTPLoginModal() {
|
||||
} else {
|
||||
showToast(t("totp_verification_failed"));
|
||||
}
|
||||
|
||||
this.value = "";
|
||||
totpLoginModal.style.display = "flex";
|
||||
this.focus();
|
||||
@@ -160,153 +148,209 @@ export function openTOTPLoginModal() {
|
||||
}
|
||||
}
|
||||
|
||||
export function openUserPanel() {
|
||||
const username = localStorage.getItem("username") || "User";
|
||||
let userPanelModal = document.getElementById("userPanelModal");
|
||||
const isDarkMode = document.body.classList.contains("dark-mode");
|
||||
const overlayBackground = isDarkMode ? "rgba(0,0,0,0.7)" : "rgba(0,0,0,0.3)";
|
||||
const modalContentStyles = `
|
||||
background: ${isDarkMode ? "#2c2c2c" : "#fff"};
|
||||
color: ${isDarkMode ? "#e0e0e0" : "#000"};
|
||||
padding: 20px;
|
||||
max-width: 600px;
|
||||
width: 90%;
|
||||
border-radius: 8px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
max-height: 383px !important;
|
||||
flex-shrink: 0 !important;
|
||||
scrollbar-gutter: stable both-edges;
|
||||
border: ${isDarkMode ? "1px solid #444" : "1px solid #ccc"};
|
||||
box-sizing: border-box;
|
||||
transition: none;
|
||||
`;
|
||||
const savedLanguage = localStorage.getItem("language") || "en";
|
||||
/**
|
||||
* Fetch current user info (username, profile_picture, totp_enabled)
|
||||
*/
|
||||
async function fetchCurrentUser() {
|
||||
try {
|
||||
const res = await fetch('/api/profile/getCurrentUser.php', {
|
||||
credentials: 'include'
|
||||
});
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||
return await res.json();
|
||||
} catch (e) {
|
||||
console.warn('fetchCurrentUser failed:', e);
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
if (!userPanelModal) {
|
||||
userPanelModal = document.createElement("div");
|
||||
userPanelModal.id = "userPanelModal";
|
||||
userPanelModal.style.cssText = `
|
||||
position: fixed;
|
||||
top: 0; right: 0; bottom: 0; left: 0;
|
||||
background-color: ${overlayBackground};
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
overflow: hidden;
|
||||
/**
|
||||
* Normalize any profile‐picture URL:
|
||||
* - strip leading colons
|
||||
* - ensure exactly one leading slash
|
||||
*/
|
||||
function normalizePicUrl(raw) {
|
||||
if (!raw) return '';
|
||||
// take only what's after the last colon
|
||||
const parts = raw.split(':');
|
||||
let pic = parts[parts.length - 1];
|
||||
// strip any stray colons
|
||||
pic = pic.replace(/^:+/, '');
|
||||
// ensure leading slash
|
||||
if (pic && !pic.startsWith('/')) pic = '/' + pic;
|
||||
return pic;
|
||||
}
|
||||
|
||||
export async function openUserPanel() {
|
||||
// 1) load data
|
||||
const { username = 'User', profile_picture = '', totp_enabled = false } = await fetchCurrentUser();
|
||||
const raw = profile_picture;
|
||||
const picUrl = normalizePicUrl(raw);
|
||||
|
||||
// 2) dark‐mode helpers
|
||||
const isDark = document.body.classList.contains('dark-mode');
|
||||
const overlayBg = isDark ? 'rgba(0,0,0,0.7)' : 'rgba(0,0,0,0.3)';
|
||||
const contentCss = `
|
||||
background: ${isDark ? '#2c2c2c' : '#fff'};
|
||||
color: ${isDark ? '#e0e0e0' : '#000'};
|
||||
padding: 20px;
|
||||
max-width: 600px;
|
||||
width: 90%;
|
||||
border-radius: 8px;
|
||||
overflow-y: auto;
|
||||
max-height: 415px;
|
||||
border: ${isDark ? '1px solid #444' : '1px solid #ccc'};
|
||||
box-sizing: border-box;
|
||||
|
||||
/* hide scrollbar in Firefox */
|
||||
scrollbar-width: none;
|
||||
/* hide scrollbar in IE 10+ */
|
||||
-ms-overflow-style: none;
|
||||
`;
|
||||
|
||||
// 3) build or re-use modal
|
||||
let modal = document.getElementById('userPanelModal');
|
||||
if (!modal) {
|
||||
modal = document.createElement('div');
|
||||
modal.id = 'userPanelModal';
|
||||
modal.style.cssText = `
|
||||
position:fixed; top:0; left:0; right:0; bottom:0;
|
||||
background:${overlayBg};
|
||||
display:flex; align-items:center; justify-content:center;
|
||||
z-index:1000;
|
||||
`;
|
||||
userPanelModal.innerHTML = `
|
||||
<div class="modal-content user-panel-content" style="${modalContentStyles}">
|
||||
|
||||
modal.innerHTML = `
|
||||
<div class="modal-content" style="${contentCss}">
|
||||
<span id="closeUserPanel" class="editor-close-btn">×</span>
|
||||
<h3>${t("user_panel")} (${username})</h3>
|
||||
|
||||
<button type="button" id="openChangePasswordModalBtn" class="btn btn-primary" style="margin-bottom: 15px;">
|
||||
${t("change_password")}
|
||||
</button>
|
||||
|
||||
<fieldset style="margin-bottom: 15px;">
|
||||
<legend>${t("totp_settings")}</legend>
|
||||
<div class="form-group">
|
||||
<label for="userTOTPEnabled">${t("enable_totp")}:</label>
|
||||
<input type="checkbox" id="userTOTPEnabled" style="vertical-align: middle;" />
|
||||
<div style="text-align:center; margin-bottom:20px;">
|
||||
<div style="position:relative; width:80px; height:80px; margin:0 auto;">
|
||||
<img id="profilePicPreview"
|
||||
src="${picUrl || '/assets/default-avatar.png'}"
|
||||
style="width:100%; height:100%; border-radius:50%; object-fit:cover;">
|
||||
<label for="profilePicInput"
|
||||
style="
|
||||
position:absolute; bottom:0; right:0;
|
||||
width:24px; height:24px; background:rgba(0,0,0,0.6);
|
||||
border-radius:50%; display:flex; align-items:center;
|
||||
justify-content:center; cursor:pointer;">
|
||||
<i class="material-icons" style="color:#fff; font-size:16px;">edit</i>
|
||||
</label>
|
||||
<input type="file" id="profilePicInput" accept="image/*" style="display:none">
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset style="margin-bottom: 15px;">
|
||||
<legend>${t("language")}</legend>
|
||||
<div class="form-group">
|
||||
<label for="languageSelector">${t("select_language")}:</label>
|
||||
<select id="languageSelector">
|
||||
<option value="en">${t("english")}</option>
|
||||
<option value="es">${t("spanish")}</option>
|
||||
<option value="fr">${t("french")}</option>
|
||||
<option value="de">${t("german")}</option>
|
||||
</select>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<!-- New API Docs link -->
|
||||
<div style="margin-bottom: 15px;">
|
||||
<button type="button" id="openApiModalBtn" class="btn btn-secondary">
|
||||
${t("api_docs") || "API Docs"}
|
||||
</button>
|
||||
</div>
|
||||
<h3 style="text-align:center; margin-bottom:20px;">
|
||||
${t('user_panel')} (${username})
|
||||
</h3>
|
||||
<button id="openChangePasswordModalBtn" class="btn btn-primary" style="margin-bottom:15px;">
|
||||
${t('change_password')}
|
||||
</button>
|
||||
<fieldset style="margin-bottom:15px;">
|
||||
<legend>${t('totp_settings')}</legend>
|
||||
<label style="cursor:pointer;">
|
||||
<input type="checkbox" id="userTOTPEnabled" style="vertical-align:middle;">
|
||||
${t('enable_totp')}
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset style="margin-bottom:15px;">
|
||||
<legend>${t('language')}</legend>
|
||||
<select id="languageSelector" class="form-select">
|
||||
<option value="en">${t('english')}</option>
|
||||
<option value="es">${t('spanish')}</option>
|
||||
<option value="fr">${t('french')}</option>
|
||||
<option value="de">${t('german')}</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
</div>
|
||||
`;
|
||||
document.body.appendChild(userPanelModal);
|
||||
document.body.appendChild(modal);
|
||||
|
||||
const apiModal = document.createElement("div");
|
||||
apiModal.id = "apiModal";
|
||||
apiModal.style.cssText = `
|
||||
position: fixed; top:0; left:0; width:100vw; height:100vh;
|
||||
background: rgba(0,0,0,0.8); z-index: 4000; display:none;
|
||||
align-items: center; justify-content: center;
|
||||
`;
|
||||
// --- wire up handlers ---
|
||||
|
||||
// api.php
|
||||
apiModal.innerHTML = `
|
||||
<div style="position:relative; width:90vw; height:90vh; background:#fff; border-radius:8px; overflow:hidden;">
|
||||
<div class="editor-close-btn" id="closeApiModal">×</div>
|
||||
<iframe src="api.php" style="width:100%;height:100%;border:none;"></iframe>
|
||||
</div>
|
||||
`;
|
||||
modal.querySelector('#closeUserPanel')
|
||||
.addEventListener('click', () => modal.style.display = 'none');
|
||||
|
||||
document.body.appendChild(apiModal);
|
||||
modal.querySelector('#openChangePasswordModalBtn')
|
||||
.addEventListener('click', () => {
|
||||
document.getElementById('changePasswordModal').style.display = 'block';
|
||||
});
|
||||
|
||||
document.getElementById("openApiModalBtn").addEventListener("click", () => {
|
||||
apiModal.style.display = "flex";
|
||||
});
|
||||
document.getElementById("closeApiModal").addEventListener("click", () => {
|
||||
apiModal.style.display = "none";
|
||||
});
|
||||
|
||||
// Handlers…
|
||||
document.getElementById("closeUserPanel").addEventListener("click", () => {
|
||||
userPanelModal.style.display = "none";
|
||||
});
|
||||
document.getElementById("openChangePasswordModalBtn").addEventListener("click", () => {
|
||||
document.getElementById("changePasswordModal").style.display = "block";
|
||||
});
|
||||
|
||||
|
||||
// TOTP checkbox
|
||||
const totpCheckbox = document.getElementById("userTOTPEnabled");
|
||||
totpCheckbox.checked = localStorage.getItem("userTOTPEnabled") === "true";
|
||||
totpCheckbox.addEventListener("change", function () {
|
||||
localStorage.setItem("userTOTPEnabled", this.checked ? "true" : "false");
|
||||
fetch("/api/updateUserPanel.php", {
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
headers: { "Content-Type": "application/json", "X-CSRF-Token": window.csrfToken },
|
||||
// TOTP
|
||||
const totpCb = modal.querySelector('#userTOTPEnabled');
|
||||
totpCb.addEventListener('change', async function () {
|
||||
const resp = await fetch('/api/updateUserPanel.php', {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-Token': window.csrfToken
|
||||
},
|
||||
body: JSON.stringify({ totp_enabled: this.checked })
|
||||
})
|
||||
.then(r => r.json())
|
||||
.then(result => {
|
||||
if (!result.success) showToast(t("error_updating_totp_setting") + ": " + result.error);
|
||||
else if (this.checked) openTOTPModal();
|
||||
})
|
||||
.catch(() => showToast(t("error_updating_totp_setting")));
|
||||
});
|
||||
const js = await resp.json();
|
||||
if (!js.success) showToast(js.error || t('error_updating_totp_setting'));
|
||||
else if (this.checked) openTOTPModal();
|
||||
});
|
||||
|
||||
// Language selector
|
||||
const languageSelector = document.getElementById("languageSelector");
|
||||
languageSelector.value = savedLanguage;
|
||||
languageSelector.addEventListener("change", function () {
|
||||
localStorage.setItem("language", this.value);
|
||||
// Language
|
||||
const langSel = modal.querySelector('#languageSelector');
|
||||
langSel.addEventListener('change', function () {
|
||||
localStorage.setItem('language', this.value);
|
||||
setLocale(this.value);
|
||||
applyTranslations();
|
||||
});
|
||||
|
||||
// Auto‐upload on file select
|
||||
const fileInput = modal.querySelector('#profilePicInput');
|
||||
fileInput.addEventListener('change', async function () {
|
||||
const file = this.files[0];
|
||||
if (!file) return;
|
||||
|
||||
// preview immediately
|
||||
const img = modal.querySelector('#profilePicPreview');
|
||||
img.src = URL.createObjectURL(file);
|
||||
|
||||
// upload
|
||||
const fd = new FormData();
|
||||
fd.append('profile_picture', file);
|
||||
try {
|
||||
const res = await fetch('/api/profile/uploadPicture.php', {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
headers: { 'X-CSRF-Token': window.csrfToken },
|
||||
body: fd
|
||||
});
|
||||
const text = await res.text();
|
||||
const js = JSON.parse(text || '{}');
|
||||
if (!res.ok) {
|
||||
showToast(js.error || t('error_updating_picture'));
|
||||
return;
|
||||
}
|
||||
const newUrl = normalizePicUrl(js.url);
|
||||
img.src = newUrl;
|
||||
localStorage.setItem('profilePicUrl', newUrl);
|
||||
// refresh the header immediately
|
||||
updateAuthenticatedUI(window.__lastAuthData || {});
|
||||
showToast(t('profile_picture_updated'));
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
showToast(t('error_updating_picture'));
|
||||
}
|
||||
});
|
||||
|
||||
} else {
|
||||
// Update colors if already exists
|
||||
userPanelModal.style.backgroundColor = overlayBackground;
|
||||
const modalContent = userPanelModal.querySelector(".modal-content");
|
||||
modalContent.style.background = isDarkMode ? "#2c2c2c" : "#fff";
|
||||
modalContent.style.color = isDarkMode ? "#e0e0e0" : "#000";
|
||||
modalContent.style.border = isDarkMode ? "1px solid #444" : "1px solid #ccc";
|
||||
|
||||
modal.style.background = overlayBg;
|
||||
const contentEl = modal.querySelector('.modal-content');
|
||||
contentEl.style.cssText = contentCss;
|
||||
// re-open: sync current values
|
||||
modal.querySelector('#profilePicPreview').src = picUrl || '/images/default-avatar.png';
|
||||
modal.querySelector('#userTOTPEnabled').checked = totp_enabled;
|
||||
modal.querySelector('#languageSelector').value = localStorage.getItem('language') || 'en';
|
||||
}
|
||||
|
||||
userPanelModal.style.display = "flex";
|
||||
// show
|
||||
modal.style.display = 'flex';
|
||||
}
|
||||
|
||||
function showRecoveryCodeModal(recoveryCode) {
|
||||
@@ -314,26 +358,21 @@ function showRecoveryCodeModal(recoveryCode) {
|
||||
recoveryModal.id = "recoveryModal";
|
||||
recoveryModal.style.cssText = `
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
top: 0; left: 0;
|
||||
width: 100vw; height: 100vh;
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex; justify-content: center; align-items: center;
|
||||
z-index: 3200;
|
||||
`;
|
||||
recoveryModal.innerHTML = `
|
||||
<div style="background: #fff; color: #000; padding: 20px; max-width: 400px; width: 90%; border-radius: 8px; text-align: center;">
|
||||
<div style="background:#fff; color:#000; padding:20px; max-width:400px; width:90%; border-radius:8px; text-align:center;">
|
||||
<h3>${t("your_recovery_code")}</h3>
|
||||
<p>${t("please_save_recovery_code")}</p>
|
||||
<code style="display: block; margin: 10px 0; font-size: 20px;">${recoveryCode}</code>
|
||||
<code style="display:block; margin:10px 0; font-size:20px;">${recoveryCode}</code>
|
||||
<button type="button" id="closeRecoveryModal" class="btn btn-primary">${t("ok")}</button>
|
||||
</div>
|
||||
`;
|
||||
document.body.appendChild(recoveryModal);
|
||||
|
||||
document.getElementById("closeRecoveryModal").addEventListener("click", () => {
|
||||
recoveryModal.remove();
|
||||
});
|
||||
@@ -346,109 +385,57 @@ export function openTOTPModal() {
|
||||
const modalContentStyles = `
|
||||
background: ${isDarkMode ? "#2c2c2c" : "#fff"};
|
||||
color: ${isDarkMode ? "#e0e0e0" : "#000"};
|
||||
padding: 20px;
|
||||
max-width: 400px;
|
||||
width: 90%;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
padding: 20px; max-width:400px; width:90%; border-radius:8px; position:relative;
|
||||
`;
|
||||
if (!totpModal) {
|
||||
totpModal = document.createElement("div");
|
||||
totpModal.id = "totpModal";
|
||||
totpModal.style.cssText = `
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: ${overlayBackground};
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 3100;
|
||||
position: fixed; top:0; left:0; width:100vw; height:100vh;
|
||||
background-color:${overlayBackground}; display:flex; justify-content:center; align-items:center;
|
||||
z-index:3100;
|
||||
`;
|
||||
totpModal.innerHTML = `
|
||||
<div class="modal-content" style="${modalContentStyles}">
|
||||
<span id="closeTOTPModal" class="editor-close-btn">×</span>
|
||||
<h3>${t("totp_setup")}</h3>
|
||||
<p>${t("scan_qr_code")}</p>
|
||||
<!-- Create an image placeholder without the CSRF token in the src -->
|
||||
<img id="totpQRCodeImage" src="" alt="TOTP QR Code" style="max-width: 100%; height: auto; display: block; margin: 0 auto;">
|
||||
<br/>
|
||||
<p>${t("enter_totp_confirmation")}</p>
|
||||
<input type="text" id="totpConfirmInput" maxlength="6" style="font-size:24px; text-align:center; width:100%; padding:10px;" placeholder="6-digit code" />
|
||||
<br/><br/>
|
||||
<button type="button" id="confirmTOTPBtn" class="btn btn-primary">${t("confirm")}</button>
|
||||
</div>
|
||||
`;
|
||||
<div class="modal-content" style="${modalContentStyles}">
|
||||
<span id="closeTOTPModal" class="editor-close-btn">×</span>
|
||||
<h3>${t("totp_setup")}</h3>
|
||||
<p>${t("scan_qr_code")}</p>
|
||||
<img id="totpQRCodeImage" src="" alt="TOTP QR Code" style="max-width:100%; height:auto; display:block; margin:0 auto;" />
|
||||
<br/>
|
||||
<p>${t("enter_totp_confirmation")}</p>
|
||||
<input type="text" id="totpConfirmInput" maxlength="6" style="font-size:24px; text-align:center; width:100%; padding:10px;" placeholder="6-digit code" />
|
||||
<br/><br/>
|
||||
<button type="button" id="confirmTOTPBtn" class="btn btn-primary">${t("confirm")}</button>
|
||||
</div>
|
||||
`;
|
||||
document.body.appendChild(totpModal);
|
||||
loadTOTPQRCode();
|
||||
|
||||
document.getElementById("closeTOTPModal").addEventListener("click", () => {
|
||||
closeTOTPModal(true);
|
||||
});
|
||||
|
||||
document.getElementById("closeTOTPModal").addEventListener("click", () => closeTOTPModal(true));
|
||||
document.getElementById("confirmTOTPBtn").addEventListener("click", async function () {
|
||||
const code = document.getElementById("totpConfirmInput").value.trim();
|
||||
if (code.length !== 6) {
|
||||
showToast(t("please_enter_valid_code"));
|
||||
return;
|
||||
}
|
||||
|
||||
const tokenRes = await fetch("/api/auth/token.php", {
|
||||
credentials: "include"
|
||||
});
|
||||
if (!tokenRes.ok) {
|
||||
showToast(t("error_verifying_totp_code"));
|
||||
return;
|
||||
}
|
||||
const { csrf_token } = await tokenRes.json();
|
||||
window.csrfToken = csrf_token;
|
||||
|
||||
if (code.length !== 6) { showToast(t("please_enter_valid_code")); return; }
|
||||
const tokenRes = await fetch("/api/auth/token.php", { credentials: "include" });
|
||||
if (!tokenRes.ok) { showToast(t("error_verifying_totp_code")); return; }
|
||||
window.csrfToken = (await tokenRes.json()).csrf_token;
|
||||
const verifyRes = await fetch("/api/totp_verify.php", {
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-CSRF-Token": window.csrfToken
|
||||
},
|
||||
method: "POST", credentials: "include",
|
||||
headers: { "Content-Type": "application/json", "X-CSRF-Token": window.csrfToken },
|
||||
body: JSON.stringify({ totp_code: code })
|
||||
});
|
||||
|
||||
if (!verifyRes.ok) {
|
||||
showToast(t("totp_verification_failed"));
|
||||
return;
|
||||
}
|
||||
if (!verifyRes.ok) { showToast(t("totp_verification_failed")); return; }
|
||||
const result = await verifyRes.json();
|
||||
if (result.status !== "ok") {
|
||||
showToast(result.message || t("totp_verification_failed"));
|
||||
return;
|
||||
}
|
||||
|
||||
if (result.status !== "ok") { showToast(result.message || t("totp_verification_failed")); return; }
|
||||
showToast(t("totp_enabled_successfully"));
|
||||
|
||||
const saveRes = await fetch("/api/totp_saveCode.php", {
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
headers: {
|
||||
"X-CSRF-Token": window.csrfToken
|
||||
}
|
||||
method: "POST", credentials: "include", headers: { "X-CSRF-Token": window.csrfToken }
|
||||
});
|
||||
if (!saveRes.ok) {
|
||||
showToast(t("error_generating_recovery_code"));
|
||||
closeTOTPModal(false);
|
||||
return;
|
||||
}
|
||||
if (!saveRes.ok) { showToast(t("error_generating_recovery_code")); closeTOTPModal(false); return; }
|
||||
const data = await saveRes.json();
|
||||
if (data.status === "ok" && data.recoveryCode) {
|
||||
showRecoveryCodeModal(data.recoveryCode);
|
||||
} else {
|
||||
showToast(t("error_generating_recovery_code") + ": " + (data.message || t("unknown_error")));
|
||||
}
|
||||
|
||||
if (data.status === "ok" && data.recoveryCode) showRecoveryCodeModal(data.recoveryCode);
|
||||
else showToast(t("error_generating_recovery_code") + ": " + (data.message || t("unknown_error")));
|
||||
closeTOTPModal(false);
|
||||
});
|
||||
|
||||
|
||||
// Focus the input and attach enter key listener
|
||||
const totpConfirmInput = document.getElementById("totpConfirmInput");
|
||||
if (totpConfirmInput) {
|
||||
@@ -458,29 +445,18 @@ export function openTOTPModal() {
|
||||
}, 100);
|
||||
}
|
||||
attachEnterKeyListener("totpModal", "confirmTOTPBtn");
|
||||
|
||||
} else {
|
||||
totpModal.style.display = "flex";
|
||||
totpModal.style.backgroundColor = overlayBackground;
|
||||
const modalContent = totpModal.querySelector(".modal-content");
|
||||
modalContent.style.background = isDarkMode ? "#2c2c2c" : "#fff";
|
||||
modalContent.style.color = isDarkMode ? "#e0e0e0" : "#000";
|
||||
|
||||
// Clear any previous QR code src if needed and then load it:
|
||||
const qrImg = document.getElementById("totpQRCodeImage");
|
||||
if (qrImg) {
|
||||
qrImg.src = "";
|
||||
}
|
||||
modalContent.style.border = isDarkMode ? "1px solid #444" : "1px solid #ccc";
|
||||
loadTOTPQRCode();
|
||||
|
||||
// Focus the input and attach enter key listener
|
||||
const totpConfirmInput = document.getElementById("totpConfirmInput");
|
||||
if (totpConfirmInput) {
|
||||
totpConfirmInput.value = "";
|
||||
setTimeout(() => {
|
||||
const totpConfirmInput = document.getElementById("totpConfirmInput");
|
||||
if (totpConfirmInput) totpConfirmInput.focus();
|
||||
}, 100);
|
||||
const totpInput = document.getElementById("totpConfirmInput");
|
||||
if (totpInput) {
|
||||
totpInput.value = "";
|
||||
setTimeout(() => totpInput.focus(), 100);
|
||||
}
|
||||
attachEnterKeyListener("totpModal", "confirmTOTPBtn");
|
||||
}
|
||||
@@ -490,42 +466,31 @@ function loadTOTPQRCode() {
|
||||
fetch("/api/totp_setup.php", {
|
||||
method: "GET",
|
||||
credentials: "include",
|
||||
headers: {
|
||||
"X-CSRF-Token": window.csrfToken // Send your CSRF token here
|
||||
}
|
||||
headers: { "X-CSRF-Token": window.csrfToken }
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to fetch QR code. Status: " + response.status);
|
||||
}
|
||||
return response.blob();
|
||||
.then(res => {
|
||||
if (!res.ok) throw new Error("Failed to fetch QR code: " + res.status);
|
||||
return res.blob();
|
||||
})
|
||||
.then(blob => {
|
||||
const imageURL = URL.createObjectURL(blob);
|
||||
const qrImg = document.getElementById("totpQRCodeImage");
|
||||
if (qrImg) {
|
||||
qrImg.src = imageURL;
|
||||
}
|
||||
const url = URL.createObjectURL(blob);
|
||||
document.getElementById("totpQRCodeImage").src = url;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("Error loading TOTP QR code:", error);
|
||||
.catch(err => {
|
||||
console.error(err);
|
||||
showToast(t("error_loading_qr_code"));
|
||||
});
|
||||
}
|
||||
|
||||
// Updated closeTOTPModal function with a disable parameter
|
||||
export function closeTOTPModal(disable = true) {
|
||||
const totpModal = document.getElementById("totpModal");
|
||||
if (totpModal) totpModal.style.display = "none";
|
||||
|
||||
if (disable) {
|
||||
// Uncheck the Enable TOTP checkbox
|
||||
const totpCheckbox = document.getElementById("userTOTPEnabled");
|
||||
if (totpCheckbox) {
|
||||
totpCheckbox.checked = false;
|
||||
localStorage.setItem("userTOTPEnabled", "false");
|
||||
}
|
||||
// Call endpoint to remove the TOTP secret from the user's record
|
||||
fetch("/api/totp_disable.php", {
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
@@ -536,10 +501,36 @@ export function closeTOTPModal(disable = true) {
|
||||
})
|
||||
.then(r => r.json())
|
||||
.then(result => {
|
||||
if (!result.success) {
|
||||
showToast(t("error_disabling_totp_setting") + ": " + result.error);
|
||||
}
|
||||
if (!result.success) showToast(t("error_disabling_totp_setting") + ": " + result.error);
|
||||
})
|
||||
.catch(() => { showToast(t("error_disabling_totp_setting")); });
|
||||
.catch(() => showToast(t("error_disabling_totp_setting")));
|
||||
}
|
||||
}
|
||||
|
||||
export function openApiModal() {
|
||||
let apiModal = document.getElementById("apiModal");
|
||||
if (!apiModal) {
|
||||
// create the container exactly as you do now inside openUserPanel
|
||||
apiModal = document.createElement("div");
|
||||
apiModal.id = "apiModal";
|
||||
apiModal.style.cssText = `
|
||||
position: fixed; top:0; left:0; width:100vw; height:100vh;
|
||||
background: rgba(0,0,0,0.8); z-index: 4000; display:none;
|
||||
align-items: center; justify-content: center;
|
||||
`;
|
||||
apiModal.innerHTML = `
|
||||
<div style="position:relative; width:90vw; height:90vh; background:#fff; border-radius:8px; overflow:hidden;">
|
||||
<div class="editor-close-btn" id="closeApiModal">×</div>
|
||||
<iframe src="api.php" style="width:100%;height:100%;border:none;"></iframe>
|
||||
</div>
|
||||
`;
|
||||
document.body.appendChild(apiModal);
|
||||
|
||||
// wire up its close button
|
||||
document.getElementById("closeApiModal").addEventListener("click", () => {
|
||||
apiModal.style.display = "none";
|
||||
});
|
||||
}
|
||||
// finally, show it
|
||||
apiModal.style.display = "flex";
|
||||
}
|
||||
@@ -178,9 +178,14 @@ export function buildFileTableRow(file, folderPath) {
|
||||
} else if (/\.(mp3|wav|m4a|ogg|flac|aac|wma|opus)$/i.test(file.name)) {
|
||||
previewIcon = `<i class="material-icons">audiotrack</i>`;
|
||||
}
|
||||
previewButton = `<button class="btn btn-sm btn-info preview-btn" data-preview-url="${folderPath + encodeURIComponent(file.name)}?t=${Date.now()}" data-preview-name="${safeFileName}">
|
||||
${previewIcon}
|
||||
</button>`;
|
||||
previewButton = `<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-info preview-btn"
|
||||
data-preview-url="${folderPath + encodeURIComponent(file.name)}?t=${Date.now()}"
|
||||
data-preview-name="${safeFileName}"
|
||||
title="${t('preview')}">
|
||||
${previewIcon}
|
||||
</button>`;
|
||||
}
|
||||
|
||||
return `
|
||||
@@ -194,19 +199,44 @@ export function buildFileTableRow(file, folderPath) {
|
||||
<td class="hide-small nowrap">${safeSize}</td>
|
||||
<td class="hide-small hide-medium nowrap">${safeUploader}</td>
|
||||
<td>
|
||||
<div class="button-wrap" style="display: flex; justify-content: left; gap: 5px;">
|
||||
<button type="button" class="btn btn-sm btn-success download-btn" data-download-name="${file.name}" data-download-folder="${file.folder || 'root'}" title="${t('download')}">
|
||||
<div class="btn-group btn-group-sm" role="group" aria-label="File actions">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-success download-btn"
|
||||
data-download-name="${file.name}"
|
||||
data-download-folder="${file.folder || 'root'}"
|
||||
title="${t('download')}">
|
||||
<i class="material-icons">file_download</i>
|
||||
</button>
|
||||
|
||||
${file.editable ? `
|
||||
<button class="btn btn-sm edit-btn" data-edit-name="${file.name}" data-edit-folder="${file.folder || 'root'}" title="${t('edit')}">
|
||||
<i class="material-icons">edit</i>
|
||||
</button>
|
||||
` : ""}
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-secondary edit-btn"
|
||||
data-edit-name="${file.name}"
|
||||
data-edit-folder="${file.folder || 'root'}"
|
||||
title="${t('edit')}">
|
||||
<i class="material-icons">edit</i>
|
||||
</button>` : ""}
|
||||
|
||||
${previewButton}
|
||||
<button class="btn btn-sm btn-warning rename-btn" data-rename-name="${file.name}" data-rename-folder="${file.folder || 'root'}" title="${t('rename')}">
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-warning rename-btn"
|
||||
data-rename-name="${file.name}"
|
||||
data-rename-folder="${file.folder || 'root'}"
|
||||
title="${t('rename')}">
|
||||
<i class="material-icons">drive_file_rename_outline</i>
|
||||
</button>
|
||||
<!-- share -->
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary btn-sm share-btn ms-1"
|
||||
data-file="${safeFileName}"
|
||||
title="${t('share')}">
|
||||
<i class="material-icons">share</i>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -186,9 +186,6 @@ export function formatFolderName(folder) {
|
||||
window.toggleRowSelection = toggleRowSelection;
|
||||
window.updateRowHighlight = updateRowHighlight;
|
||||
|
||||
/**
|
||||
* --- FILE LIST & VIEW RENDERING ---
|
||||
*/
|
||||
export function loadFileList(folderParam) {
|
||||
const folder = folderParam || "root";
|
||||
const fileListContainer = document.getElementById("fileList");
|
||||
@@ -196,77 +193,151 @@ export function loadFileList(folderParam) {
|
||||
fileListContainer.style.visibility = "hidden";
|
||||
fileListContainer.innerHTML = "<div class='loader'>Loading files...</div>";
|
||||
|
||||
return fetch("/api/file/getFileList.php?folder=" + encodeURIComponent(folder) + "&recursive=1&t=" + new Date().getTime())
|
||||
.then(response => {
|
||||
if (response.status === 401) {
|
||||
showToast("Session expired. Please log in again.");
|
||||
window.location.href = "/api/auth/logout.php";
|
||||
throw new Error("Unauthorized");
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
fileListContainer.innerHTML = ""; // Clear loading message.
|
||||
if (data.files && Object.keys(data.files).length > 0) {
|
||||
// If the returned "files" is an object instead of an array, transform it.
|
||||
if (!Array.isArray(data.files)) {
|
||||
data.files = Object.entries(data.files).map(([name, meta]) => {
|
||||
meta.name = name;
|
||||
return meta;
|
||||
});
|
||||
}
|
||||
// Process each file – add computed properties.
|
||||
data.files = data.files.map(file => {
|
||||
file.fullName = (file.path || file.name).trim().toLowerCase();
|
||||
file.editable = canEditFile(file.name);
|
||||
file.folder = folder;
|
||||
if (!file.type && /\.(jpg|jpeg|png|gif|bmp|webp|svg|ico)$/i.test(file.name)) {
|
||||
file.type = "image";
|
||||
}
|
||||
// OPTIONAL: For text documents, preload content (if available from backend)
|
||||
// Example: if (/\.txt|html|md|js|css|json|xml$/i.test(file.name)) { file.content = file.content || ""; }
|
||||
return file;
|
||||
});
|
||||
fileData = data.files;
|
||||
return fetch(
|
||||
"/api/file/getFileList.php?folder=" +
|
||||
encodeURIComponent(folder) +
|
||||
"&recursive=1&t=" +
|
||||
Date.now()
|
||||
)
|
||||
.then((res) =>
|
||||
res.status === 401
|
||||
? (window.location.href = "/api/auth/logout.php" && Promise.reject("Unauthorized"))
|
||||
: res.json()
|
||||
)
|
||||
.then((data) => {
|
||||
fileListContainer.innerHTML = "";
|
||||
|
||||
// Update file summary.
|
||||
const actionsContainer = document.getElementById("fileListActions");
|
||||
if (actionsContainer) {
|
||||
let summaryElem = document.getElementById("fileSummary");
|
||||
if (!summaryElem) {
|
||||
summaryElem = document.createElement("div");
|
||||
summaryElem.id = "fileSummary";
|
||||
summaryElem.style.float = "right";
|
||||
summaryElem.style.marginLeft = "auto";
|
||||
summaryElem.style.marginRight = "60px";
|
||||
summaryElem.style.fontSize = "0.9em";
|
||||
actionsContainer.appendChild(summaryElem);
|
||||
} else {
|
||||
summaryElem.style.display = "block";
|
||||
}
|
||||
summaryElem.innerHTML = buildFolderSummary(fileData);
|
||||
}
|
||||
|
||||
// Render view based on the view mode.
|
||||
if (window.viewMode === "gallery") {
|
||||
renderGalleryView(folder);
|
||||
updateFileActionButtons();
|
||||
} else {
|
||||
renderFileTable(folder);
|
||||
}
|
||||
} else {
|
||||
// No files case
|
||||
if (!data.files || Object.keys(data.files).length === 0) {
|
||||
fileListContainer.textContent = t("no_files_found");
|
||||
|
||||
// hide summary
|
||||
const summaryElem = document.getElementById("fileSummary");
|
||||
if (summaryElem) {
|
||||
summaryElem.style.display = "none";
|
||||
}
|
||||
if (summaryElem) summaryElem.style.display = "none";
|
||||
|
||||
// hide slider
|
||||
const sliderContainer = document.getElementById("viewSliderContainer");
|
||||
if (sliderContainer) sliderContainer.style.display = "none";
|
||||
|
||||
updateFileActionButtons();
|
||||
return [];
|
||||
}
|
||||
return data.files || [];
|
||||
|
||||
// Normalize to array
|
||||
if (!Array.isArray(data.files)) {
|
||||
data.files = Object.entries(data.files).map(([name, meta]) => {
|
||||
meta.name = name;
|
||||
return meta;
|
||||
});
|
||||
}
|
||||
// Enrich each file
|
||||
data.files = data.files.map((f) => {
|
||||
f.fullName = (f.path || f.name).trim().toLowerCase();
|
||||
f.editable = canEditFile(f.name);
|
||||
f.folder = folder;
|
||||
return f;
|
||||
});
|
||||
fileData = data.files;
|
||||
|
||||
// --- folder summary + slider injection ---
|
||||
const actionsContainer = document.getElementById("fileListActions");
|
||||
if (actionsContainer) {
|
||||
// 1) summary
|
||||
let summaryElem = document.getElementById("fileSummary");
|
||||
if (!summaryElem) {
|
||||
summaryElem = document.createElement("div");
|
||||
summaryElem.id = "fileSummary";
|
||||
summaryElem.style.cssText = "float:right; margin:0 60px 0 auto; font-size:0.9em;";
|
||||
actionsContainer.appendChild(summaryElem);
|
||||
}
|
||||
summaryElem.style.display = "block";
|
||||
summaryElem.innerHTML = buildFolderSummary(fileData);
|
||||
|
||||
// 2) view‐mode slider
|
||||
const viewMode = window.viewMode || "table";
|
||||
let sliderContainer = document.getElementById("viewSliderContainer");
|
||||
if (!sliderContainer) {
|
||||
sliderContainer = document.createElement("div");
|
||||
sliderContainer.id = "viewSliderContainer";
|
||||
sliderContainer.style.cssText = "display: inline-flex; align-items: center; vertical-align: middle; margin-right: auto; font-size: 0.9em;";
|
||||
actionsContainer.insertBefore(sliderContainer, summaryElem);
|
||||
} else {
|
||||
sliderContainer.style.display = "inline-flex";
|
||||
}
|
||||
|
||||
if (viewMode === "gallery") {
|
||||
// determine responsive caps:
|
||||
const w = window.innerWidth;
|
||||
let maxCols;
|
||||
if (w < 600) maxCols = 1;
|
||||
else if (w < 900) maxCols = 2;
|
||||
else if (w < 1200) maxCols = 4;
|
||||
else maxCols = 6;
|
||||
|
||||
const currentCols = Math.min(
|
||||
parseInt(localStorage.getItem("galleryColumns") || "3", 10),
|
||||
maxCols
|
||||
);
|
||||
|
||||
sliderContainer.innerHTML = `
|
||||
<label for="galleryColumnsSlider" style="margin-right:8px; white-space:nowrap; line-height:1;">
|
||||
${t("columns")}:
|
||||
</label>
|
||||
<input
|
||||
type="range"
|
||||
id="galleryColumnsSlider"
|
||||
min="1"
|
||||
max="${maxCols}"
|
||||
value="${currentCols}"
|
||||
style="vertical-align:middle;"
|
||||
>
|
||||
<span id="galleryColumnsValue" style="margin-left:6px; line-height:1;">${currentCols}</span>
|
||||
`;
|
||||
// hookup gallery slider
|
||||
const gallerySlider = document.getElementById("galleryColumnsSlider");
|
||||
const galleryValue = document.getElementById("galleryColumnsValue");
|
||||
gallerySlider.oninput = (e) => {
|
||||
const v = +e.target.value;
|
||||
localStorage.setItem("galleryColumns", v);
|
||||
galleryValue.textContent = v;
|
||||
// update grid if already rendered
|
||||
const grid = document.querySelector(".gallery-container");
|
||||
if (grid) grid.style.gridTemplateColumns = `repeat(${v},1fr)`;
|
||||
};
|
||||
} else {
|
||||
const currentHeight = parseInt(localStorage.getItem("rowHeight") ?? "48", 10);
|
||||
sliderContainer.innerHTML = `
|
||||
<label for="rowHeightSlider" style="margin-right:8px; white-space:nowrap; line-height:1;">
|
||||
${t("row_height")}:
|
||||
</label>
|
||||
<input type="range" id="rowHeightSlider" min="31" max="60" value="${currentHeight}" style="vertical-align:middle;">
|
||||
<span id="rowHeightValue" style="margin-left:6px; line-height:1;">${currentHeight}px</span>
|
||||
`;
|
||||
// hookup row‐height slider
|
||||
const rowSlider = document.getElementById("rowHeightSlider");
|
||||
const rowValue = document.getElementById("rowHeightValue");
|
||||
rowSlider.oninput = (e) => {
|
||||
const v = e.target.value;
|
||||
document.documentElement.style.setProperty("--file-row-height", v + "px");
|
||||
localStorage.setItem("rowHeight", v);
|
||||
rowValue.textContent = v + "px";
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// 3) Render based on viewMode
|
||||
if (window.viewMode === "gallery") {
|
||||
renderGalleryView(folder);
|
||||
} else {
|
||||
renderFileTable(folder);
|
||||
}
|
||||
|
||||
updateFileActionButtons();
|
||||
return data.files;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("Error loading file list:", error);
|
||||
if (error.message !== "Unauthorized") {
|
||||
.catch((err) => {
|
||||
console.error("Error loading file list:", err);
|
||||
if (err !== "Unauthorized") {
|
||||
fileListContainer.textContent = "Error loading files.";
|
||||
}
|
||||
return [];
|
||||
@@ -327,9 +398,6 @@ export function renderFileTable(folder, container) {
|
||||
rowHTML = rowHTML.replace(/(<td class="file-name-cell">)(.*?)(<\/td>)/, (match, p1, p2, p3) => {
|
||||
return p1 + p2 + tagBadgesHTML + p3;
|
||||
});
|
||||
rowHTML = rowHTML.replace(/(<\/div>\s*<\/td>\s*<\/tr>)/, `<button class="share-btn btn btn-sm btn-secondary" data-file="${escapeHTML(file.name)}" title="${t('share')}">
|
||||
<i class="material-icons">share</i>
|
||||
</button>$1`);
|
||||
rowsHTML += rowHTML;
|
||||
});
|
||||
} else {
|
||||
@@ -414,7 +482,7 @@ export function renderFileTable(folder, container) {
|
||||
});
|
||||
});
|
||||
|
||||
// 5) Preview buttons (if you still have a .preview-btn)
|
||||
// 5) Preview buttons
|
||||
fileListContent.querySelectorAll(".preview-btn").forEach(btn => {
|
||||
btn.addEventListener("click", e => {
|
||||
e.stopPropagation();
|
||||
@@ -441,6 +509,17 @@ export function renderFileTable(folder, container) {
|
||||
}, 0);
|
||||
}, 300));
|
||||
}
|
||||
const slider = document.getElementById('rowHeightSlider');
|
||||
const valueDisplay = document.getElementById('rowHeightValue');
|
||||
if (slider) {
|
||||
slider.addEventListener('input', e => {
|
||||
const v = +e.target.value; // slider value in px
|
||||
document.documentElement.style.setProperty('--file-row-height', v + 'px');
|
||||
localStorage.setItem('rowHeight', v);
|
||||
valueDisplay.textContent = v + 'px';
|
||||
});
|
||||
}
|
||||
|
||||
document.querySelectorAll("table.table thead th[data-column]").forEach(cell => {
|
||||
cell.addEventListener("click", function () {
|
||||
const column = this.getAttribute("data-column");
|
||||
@@ -530,18 +609,17 @@ export function renderGalleryView(folder, container) {
|
||||
}
|
||||
}, 0);
|
||||
|
||||
// --- Column slider ---
|
||||
// --- Column slider with responsive max ---
|
||||
const numColumns = window.galleryColumns || 3;
|
||||
galleryHTML += `
|
||||
<div class="gallery-slider" style="margin:10px; text-align:center;">
|
||||
<label for="galleryColumnsSlider" style="margin-right:5px;">
|
||||
${t('columns')}:
|
||||
</label>
|
||||
<input type="range" id="galleryColumnsSlider" min="1" max="6"
|
||||
value="${numColumns}" style="vertical-align:middle;">
|
||||
<span id="galleryColumnsValue">${numColumns}</span>
|
||||
</div>
|
||||
`;
|
||||
// clamp slider max to 1 on small (<600px), 2 on medium (<900px), else up to 6
|
||||
const w = window.innerWidth;
|
||||
let maxCols = 6;
|
||||
if (w < 600) maxCols = 1;
|
||||
else if (w < 900) maxCols = 2;
|
||||
|
||||
// ensure current value doesn’t exceed the new max
|
||||
const startCols = Math.min(numColumns, maxCols);
|
||||
window.galleryColumns = startCols;
|
||||
|
||||
// --- Start gallery grid ---
|
||||
galleryHTML += `
|
||||
@@ -627,32 +705,52 @@ export function renderGalleryView(folder, container) {
|
||||
</span>
|
||||
${tagBadgesHTML}
|
||||
|
||||
<div class="button-wrap" style="display:flex; justify-content:center; gap:5px; margin-top:5px;">
|
||||
<button type="button" class="btn btn-sm btn-success download-btn"
|
||||
data-download-name="${escapeHTML(file.name)}"
|
||||
data-download-folder="${file.folder || "root"}"
|
||||
title="${t('download')}">
|
||||
<i class="material-icons">file_download</i>
|
||||
</button>
|
||||
${file.editable ? `
|
||||
<button type="button" class="btn btn-sm edit-btn"
|
||||
data-edit-name="${escapeHTML(file.name)}"
|
||||
data-edit-folder="${file.folder || "root"}"
|
||||
title="${t('edit')}">
|
||||
<i class="material-icons">edit</i>
|
||||
</button>` : ""}
|
||||
<button type="button" class="btn btn-sm btn-warning rename-btn"
|
||||
data-rename-name="${escapeHTML(file.name)}"
|
||||
data-rename-folder="${file.folder || "root"}"
|
||||
title="${t('rename')}">
|
||||
<i class="material-icons">drive_file_rename_outline</i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-sm btn-secondary share-btn"
|
||||
data-file="${escapeHTML(file.name)}"
|
||||
title="${t('share')}">
|
||||
<i class="material-icons">share</i>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="btn-group btn-group-sm btn-group-hover"
|
||||
role="group"
|
||||
aria-label="File actions"
|
||||
style="margin-top:5px;"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-success py-1 download-btn"
|
||||
data-download-name="${escapeHTML(file.name)}"
|
||||
data-download-folder="${file.folder || "root"}"
|
||||
title="${t('download')}"
|
||||
>
|
||||
<i class="material-icons">file_download</i>
|
||||
</button>
|
||||
|
||||
${file.editable ? `
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary py-1 edit-btn"
|
||||
data-edit-name="${escapeHTML(file.name)}"
|
||||
data-edit-folder="${file.folder || "root"}"
|
||||
title="${t('edit')}"
|
||||
>
|
||||
<i class="material-icons">edit</i>
|
||||
</button>` : ""}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-warning py-1 rename-btn"
|
||||
data-rename-name="${escapeHTML(file.name)}"
|
||||
data-rename-folder="${file.folder || "root"}"
|
||||
title="${t('rename')}"
|
||||
>
|
||||
<i class="material-icons">drive_file_rename_outline</i>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary py-1 share-btn"
|
||||
data-file="${escapeHTML(file.name)}"
|
||||
title="${t('share')}"
|
||||
>
|
||||
<i class="material-icons">share</i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -236,7 +236,8 @@ function renderFolderTree(tree, parentPath = "", defaultDisplay = "block") {
|
||||
const state = loadFolderTreeState();
|
||||
let html = `<ul class="folder-tree ${defaultDisplay === 'none' ? 'collapsed' : 'expanded'}">`;
|
||||
for (const folder in tree) {
|
||||
if (folder.toLowerCase() === "trash") continue;
|
||||
const name = folder.toLowerCase();
|
||||
if (name === "trash" || name === "profile_pics") continue;
|
||||
const fullPath = parentPath ? parentPath + "/" + folder : folder;
|
||||
const hasChildren = Object.keys(tree[folder]).length > 0;
|
||||
const displayState = state[fullPath] !== undefined ? state[fullPath] : defaultDisplay;
|
||||
|
||||
@@ -202,6 +202,11 @@ const translations = {
|
||||
// NEW KEYS ADDED FOR ADMIN, USER PANELS, AND TOTP MODALS:
|
||||
"admin_panel": "Admin Panel",
|
||||
"user_panel": "User Panel",
|
||||
"user_settings": "User Settings",
|
||||
"save_profile_picture": "Save Profile Picture",
|
||||
"please_select_picture": "Please select a picture",
|
||||
"profile_picture_updated": "Profile picture updated",
|
||||
"error_updating_picture": "Error updating profile picture",
|
||||
"trash_restore_delete": "Trash Restore/Delete",
|
||||
"totp_settings": "TOTP Settings",
|
||||
"enable_totp": "Enable TOTP",
|
||||
@@ -260,6 +265,7 @@ const translations = {
|
||||
"show": "Show",
|
||||
"items_per_page": "items per page",
|
||||
"columns": "Columns",
|
||||
"row_height": "Row Height",
|
||||
"api_docs": "API Docs"
|
||||
},
|
||||
es: {
|
||||
|
||||
@@ -15,6 +15,8 @@ import { editFile, saveFile } from './fileEditor.js';
|
||||
import { t, applyTranslations, setLocale } from './i18n.js';
|
||||
|
||||
export function initializeApp() {
|
||||
const saved = parseInt(localStorage.getItem('rowHeight') || '48', 10);
|
||||
document.documentElement.style.setProperty('--file-row-height', saved + 'px');
|
||||
window.currentFolder = "root";
|
||||
initTagSearch();
|
||||
loadFileList(window.currentFolder);
|
||||
@@ -77,18 +79,14 @@ if (params.get('logout') === '1') {
|
||||
localStorage.removeItem("userTOTPEnabled");
|
||||
}
|
||||
|
||||
// 2) Wire up logoutBtn right away
|
||||
const logoutBtn = document.getElementById("logoutBtn");
|
||||
if (logoutBtn) {
|
||||
logoutBtn.addEventListener("click", () => {
|
||||
fetch("/api/auth/logout.php", {
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
headers: { "X-CSRF-Token": window.csrfToken }
|
||||
})
|
||||
.then(() => window.location.reload(true))
|
||||
.catch(() => {});
|
||||
});
|
||||
export function triggerLogout() {
|
||||
fetch("/api/auth/logout.php", {
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
headers: { "X-CSRF-Token": window.csrfToken }
|
||||
})
|
||||
.then(() => window.location.reload(true))
|
||||
.catch(()=>{});
|
||||
}
|
||||
|
||||
|
||||
@@ -122,7 +120,8 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
// Continue with initializations that rely on a valid CSRF token:
|
||||
checkAuthentication().then(authenticated => {
|
||||
if (authenticated) {
|
||||
document.getElementById('loadingOverlay').remove();
|
||||
const overlay = document.getElementById('loadingOverlay');
|
||||
if (overlay) overlay.remove();
|
||||
initializeApp();
|
||||
}
|
||||
});
|
||||
@@ -201,7 +200,6 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
});
|
||||
|
||||
// --- Auto-scroll During Drag ---
|
||||
// Adjust these values as needed:
|
||||
const SCROLL_THRESHOLD = 50; // pixels from edge to start scrolling
|
||||
const SCROLL_SPEED = 20; // pixels to scroll per event
|
||||
|
||||
|
||||
Reference in New Issue
Block a user