From 1ab99daaba2dabdda6e8d94d1962c6fb6f9b4a48 Mon Sep 17 00:00:00 2001
From: Jonathan Miller <jmiller@mokoconsulting.tech>
Date: Sun, 5 Jul 2026 19:04:05 -0500
Subject: [PATCH] feat(ui): SFTP key file upload; msbackup modal padding frame
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add/Edit Destination modal: SFTP key can now be UPLOADED as a file (read into
  the key textarea client-side via FileReader) instead of copy/paste; pasting
  still works.
- Give .modal-content a "msbackup" class with a 1rem padding frame — Bootstrap's
  .modal-content has no padding of its own, which made the modal feel cramped.
  Styling lives in the WAM stylesheet (media/.../admin.css), scoped to .msbackup.

Claude-Session: https://claude.ai/code/session_01WbGBN9VyRK61zczYWcCQ2i
---
 CHANGELOG.md                                  |  6 ++++
 .../com_mokosuitebackup/media/css/admin.css   | 30 +++++++++++--------
 .../com_mokosuitebackup/tmpl/profile/edit.php | 29 ++++++++++++++++--
 3 files changed, 51 insertions(+), 14 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 54a38afe..2fb9a06f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 ## [Unreleased]
 
+### Added
+- SFTP destinations: **upload an SSH private key file** in the Add/Edit Destination modal instead of pasting it (reads the file into the key field client-side; pasting still works).
+
+### Changed
+- Add/Edit Destination modal: give `.modal-content` a `msbackup` class with a 1rem padding frame (Bootstrap's `.modal-content` has no padding of its own), styled in the WAM stylesheet.
+
 ### Fixed
 - Pre-update backup now shows an admin notification on **every** outcome (success / warning / failure) — previously a *successful* pre-update backup fired nothing, so it looked like the notification wasn't working. (#192)
 
diff --git a/source/packages/com_mokosuitebackup/media/css/admin.css b/source/packages/com_mokosuitebackup/media/css/admin.css
index 8fcaf02d..2223c485 100644
--- a/source/packages/com_mokosuitebackup/media/css/admin.css
+++ b/source/packages/com_mokosuitebackup/media/css/admin.css
@@ -2,30 +2,36 @@
  * MokoSuiteBackup — admin styles (loaded via the Joomla Web Asset Manager).
  */
 
-/* Add/Edit Destination modal — comfortable, consistent spacing */
-#remoteModal .modal-header,
-#remoteModal .modal-footer {
-	padding: 1rem 1.75rem;
+/* Add/Edit Destination modal.
+ * Bootstrap's .modal-content has no padding of its own (its header/body/footer
+ * children provide it), which made the modal feel cramped against its border.
+ * Give the container a comfortable 1rem frame via the .msbackup namespace and let
+ * the inner sections align to it (no double horizontal padding). */
+.modal-content.msbackup {
+	padding: 1rem;
 }
 
-#remoteModal .modal-body {
-	padding: 1.5rem 1.75rem;
+.modal-content.msbackup .modal-header,
+.modal-content.msbackup .modal-body,
+.modal-content.msbackup .modal-footer {
+	padding-left: 0;
+	padding-right: 0;
 }
 
-#remoteModal .modal-body .row + .row,
-#remoteModal .remote-type-fields {
+.modal-content.msbackup .modal-body .row + .row,
+.modal-content.msbackup .remote-type-fields {
 	margin-top: 0.25rem;
 }
 
-#remoteModal hr {
-	margin: 1.5rem 0;
+.modal-content.msbackup hr {
+	margin: 1rem 0;
 	opacity: 0.12;
 }
 
-#remoteModal .form-label {
+.modal-content.msbackup .form-label {
 	margin-bottom: 0.35rem;
 }
 
-#remoteModal .form-check.form-switch {
+.modal-content.msbackup .form-check.form-switch {
 	padding-top: 0.15rem;
 }
diff --git a/source/packages/com_mokosuitebackup/tmpl/profile/edit.php b/source/packages/com_mokosuitebackup/tmpl/profile/edit.php
index 7dc1e5ce..cd36107e 100644
--- a/source/packages/com_mokosuitebackup/tmpl/profile/edit.php
+++ b/source/packages/com_mokosuitebackup/tmpl/profile/edit.php
@@ -123,7 +123,7 @@ $token     = Session::getFormToken();
 <?php if ($profileId): ?>
 <div class="modal fade" id="remoteModal" tabindex="-1" aria-labelledby="remoteModalLabel" aria-hidden="true">
 	<div class="modal-dialog modal-lg">
-		<div class="modal-content">
+		<div class="modal-content msbackup">
 			<div class="modal-header">
 				<h5 class="modal-title" id="remoteModalLabel"><?php echo Text::_('COM_MOKOJOOMBACKUP_REMOTE_ADD'); ?></h5>
 				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="<?php echo Text::_('JCLOSE'); ?>"></button>
@@ -193,7 +193,9 @@ $token     = Session::getFormToken();
 					</div>
 					<div class="mb-3" id="remoteSftpKeyWrap">
 						<label for="remoteCfg_sftp_key_data" class="form-label"><?php echo Text::_('COM_MOKOJOOMBACKUP_FIELD_SFTP_KEY'); ?></label>
-						<textarea class="form-control" id="remoteCfg_sftp_key_data" rows="4" placeholder="Paste SSH private key or leave as-is to keep existing"></textarea>
+						<input type="file" class="form-control mb-2" id="remoteSftpKeyFile" accept=".pem,.key,.ppk,.openssh,.rsa,.ed25519,text/plain">
+						<textarea class="form-control" id="remoteCfg_sftp_key_data" rows="4" placeholder="Upload a key file above, or paste the SSH private key here (leave as-is to keep existing)"></textarea>
+						<div class="form-text" id="remoteSftpKeyFileMsg"></div>
 					</div>
 					<div class="mb-3" id="remoteSftpPassphraseWrap">
 						<label for="remoteCfg_sftp_passphrase" class="form-label"><?php echo Text::_('COM_MOKOJOOMBACKUP_FIELD_SFTP_PASSPHRASE'); ?></label>
@@ -455,6 +457,29 @@ document.addEventListener('DOMContentLoaded', function() {
 		}
 	});
 
+	// ---- Upload SSH key file (fills the key textarea; no paste required) ----
+	const keyFileInput = document.getElementById('remoteSftpKeyFile');
+	if (keyFileInput) {
+		keyFileInput.addEventListener('change', function() {
+			const msg  = document.getElementById('remoteSftpKeyFileMsg');
+			const file = this.files && this.files[0];
+
+			if (!file) {
+				return;
+			}
+
+			const reader = new FileReader();
+			reader.onload = function(ev) {
+				document.getElementById('remoteCfg_sftp_key_data').value = ev.target.result;
+				if (msg) { msg.textContent = 'Loaded "' + file.name + '".'; msg.className = 'form-text text-success'; }
+			};
+			reader.onerror = function() {
+				if (msg) { msg.textContent = 'Could not read that file.'; msg.className = 'form-text text-danger'; }
+			};
+			reader.readAsText(file);
+		});
+	}
+
 	// ---- Add button ----
 	document.getElementById('btnAddRemote').addEventListener('click', function() {
 		openEdit(0);
-- 
2.52.0