Just one you could try on your own if you are using elFinder Web FTP Filemanager, that you may have installed using the ISPConfig tool (https://forum.howtoforge.com/thread...install-auto-update-tool-for-ispconfig.91151/) Like always, backup your elfinder.html and index.html, and then delete both files. Create and fill in the new index.php as follows: Code: <?php session_start(); // ========================== // LOGOUT HANDLER // ========================== if (isset($_GET['logout']) && $_GET['logout'] == 1) { $_SESSION = []; session_destroy(); setcookie('ftp_remember', '', time() - 3600, '/'); header('Location: '.$_SERVER['PHP_SELF']); exit; } // ========================== // LOGIN HANDLER // ========================== if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['ftp_user'], $_POST['ftp_pass'])) { $_SESSION['ftp_user'] = $_POST['ftp_user']; $_SESSION['ftp_pass'] = $_POST['ftp_pass']; if (!empty($_POST['remember'])) { $data = ['user'=>$_SESSION['ftp_user'], 'pass'=>$_SESSION['ftp_pass']]; setcookie('ftp_remember', base64_encode(json_encode($data)), time()+7*24*3600, '/', '', true, true); } header('Location: '.$_SERVER['PHP_SELF']); exit; } // Restore from cookie if session missing if (!isset($_SESSION['ftp_user']) && isset($_COOKIE['ftp_remember'])) { $data = json_decode(base64_decode($_COOKIE['ftp_remember']), true); if (isset($data['user'], $data['pass'])) { $_SESSION['ftp_user'] = $data['user']; $_SESSION['ftp_pass'] = $data['pass']; } } // Show login form if not logged in if (!isset($_SESSION['ftp_user'], $_SESSION['ftp_pass'])): ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2"><title>FTP Login</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" /> <link rel="stylesheet" href="css/ispconfig_custom.css"> <link rel="icon" type="image/png" href="/filemanager/mobile.png"/> </head> <body> <div class="login-container"> <div class="login-box"> <h2> <i class="fas fa-server" style="margin-right:8px; color:#fff;"></i> FTP Filemanager Login </h2> <form method="POST"> <input type="text" name="ftp_user" placeholder="FTP Username" value="<?php echo htmlspecialchars($_SESSION['ftp_user'] ?? ''); ?>" required> <input type="password" name="ftp_pass" placeholder="FTP Password" value="<?php echo htmlspecialchars($_SESSION['ftp_pass'] ?? ''); ?>" required> <div class="remember-me"> <input type="checkbox" name="remember" id="remember"> <label for="remember">Remember Me</label> </div> <input type="submit" value="Login"> </form> </div> </div> </body> </html> <?php exit; endif; ?> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2"> <title>FTP Filemanager</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" /> <link rel="stylesheet" href="css/ispconfig_custom.css"> <script data-main="./main.default.js" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script> <script> define('elFinderConfig', { defaultOpts : { width: '100%', height: '100%', resizable: false, url : 'php/connector_ftp.php', customData: { ftp_user: <?php echo json_encode($_SESSION['ftp_user']); ?>, ftp_pass: <?php echo json_encode($_SESSION['ftp_pass']); ?> }, bootCallback : function(fm, extraObj) { fm.bind('init', function() {}); var title = document.title; fm.bind('open', function() { var path = fm.cwd() ? fm.path(fm.cwd().hash) : null; document.title = path ? path + ':' + title : title; }).bind('destroy', function() { document.title = title; }); } }, managers : { 'elfinder': {} } }); </script> <link rel="icon" type="image/png" href="/filemanager/mobile.png"/> </head> <body> <!-- Logout button --> <a href="?logout=1" class="logout-button"> <i class="fas fa-sign-out-alt"></i> Logout </a> <div id="elfinder"></div> </body> </html> Then create a ispconfig_custom.css in /usr/share/filemanager/css/ as follows: Code: /* ---------------------- */ /* Body and HTML */ body, html { height: 100%; margin: 0; font-family: Arial, sans-serif; background: #f0f2f5; } /* ---------------------- */ /* Center login container */ .login-container { display: flex; justify-content: center; align-items: center; height: 100vh; /* full viewport height for proper mobile centering */ padding: 10px; box-sizing: border-box; } /* ---------------------- */ /* Blue login box */ .login-box { background: #007BFF; color: #fff; text-align: center; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); width: 100%; max-width: 360px; /* desktop max width */ min-width: 280px; /* small phone minimum */ margin: 0 auto; padding: 30px 20px; box-sizing: border-box; } /* ---------------------- */ /* Header with optional icon */ .login-box h2 { margin-bottom: 20px; font-size: 1.4em; } .login-box h2 i { vertical-align: middle; /* align icon with text */ font-size: 1.2em; margin-right: 8px; color: #fff; } /* ---------------------- */ /* Input fields */ .login-box input[type="text"], .login-box input[type="password"] { width: 100%; padding: 10px; margin: 8px 0; border: none; border-radius: 4px; font-size: 14px; box-sizing: border-box; } /* ---------------------- */ /* Submit button */ .login-box input[type="submit"], .login-box button { width: 100%; padding: 12px; margin-top: 15px; background: #0056b3; border: none; color: #fff; font-size: 16px; border-radius: 4px; cursor: pointer; transition: background 0.3s; } .login-box input[type="submit"]:hover, .login-box button:hover { background: #003f7f; } /* ---------------------- */ /* Remember me checkbox */ .remember-me { text-align: left; margin-top: 10px; font-size: 13px; } .remember-me input { margin-right: 5px; } /* ---------------------- */ /* Logout button bottom-right */ .logout-button { position: fixed; bottom: 35px; right: 10px; z-index: 999; background: #007BFF; color: #fff; padding: 6px 12px; text-decoration: none; border-radius: 4px; font-family: Arial, sans-serif; font-size: 14px; transition: background 0.3s; } .logout-button:hover { background: #0056b3; } /* ---------------------- */ /* Responsive tweaks for small devices */ @media screen and (max-width: 400px) { .login-box { width: 90%; /* nearly full width */ max-width: 100%; /* override desktop max-width */ min-width: 280px; /* prevent inputs/buttons from being too small */ padding: 20px 10px; box-sizing: border-box; } .login-box h2 { font-size: 1.2em; } .login-box input[type="text"], .login-box input[type="password"], .login-box input[type="submit"], .login-box button { font-size: 14px; padding: 10px; } .remember-me { font-size: 12px; } } Lastly, create connector_ftp.php with the followings: Code: <?php session_start(); // Get credentials from POST (customData from JS) or session $ftp_user = $_POST['ftp_user'] ?? $_SESSION['ftp_user'] ?? ''; $ftp_pass = $_POST['ftp_pass'] ?? $_SESSION['ftp_pass'] ?? ''; if (!$ftp_user || !$ftp_pass) die('FTP/SFTP credentials missing.'); // Include elFinder classes require_once(__DIR__.'/elFinderConnector.class.php'); require_once(__DIR__.'/elFinder.class.php'); require_once(__DIR__.'/elFinderVolumeDriver.class.php'); require_once(__DIR__.'/elFinderVolumeFTP.class.php'); // or elFinderVolumeSFTP.class.php for SFTP $opts = [ 'roots' => [[ 'driver' => 'FTP', // 'SFTP' for SFTP 'host' => '127.0.0.1', 'user' => $ftp_user, 'pass' => $ftp_pass, 'path' => '/web', // user's web folder 'port' => 21, // 22 for SFTP 'ssl' => false, // true for FTPS 'timeout' => 30 ]] ]; $connector = new elFinderConnector(new elFinder($opts)); $connector->run(); You will get login page like below: I haven't thought of integrating this into the current tool, though it works so far so good. There will be logout button on the bottom right, of which you can also customized, just like the above login box, in css and the index.php file. I didn't share the tip for using own favicon, but I guess you can figure it out yourself. Good luck in trying and enjoy!
