kqjy/MyFSIO
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 13 Wiki Activity

MyFSIO v0.1.8 Release #9

Merged
kqjy merged 13 commits from next into main 2025-12-23 06:01:32 +00:00
Conversation 0 Commits 13 Files Changed 14 +206 -11
1 changed files with 206 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit be48f59452 - Show all commits

207
templates/bucket_detail.html
View File

@@ -333,12 +333,13 @@
<input type="hidden" name="mode" value="upsert" id="policyMode" />
<div class="mb-4">
<label class="form-label fw-semibold">
<label class="form-label fw-semibold d-flex align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
<path d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.5.5 0 0 0-.708 0l-.914.914a.5.5 0 0 0 .707.708l.915-.914a.5.5 0 0 0 0-.708z"/>
<path fill-rule="evenodd" d="M8 8a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm-1 3a1 1 0 1 1 2 0 1 1 0 0 1-2 0z"/>
</svg>
Quick Presets
<span class="badge bg-secondary-subtle text-secondary ms-2 fw-normal" style="font-size: 0.65rem;">Choose a template</span>
</label>
<div class="d-flex flex-wrap gap-2">
<button type="button" class="btn btn-outline-secondary preset-btn {% if preset_choice == 'private' %}active{% endif %}" data-preset="private">
@@ -364,15 +365,46 @@
</div>
<div class="mb-3">
<label class="form-label fw-semibold">
<label class="form-label fw-semibold d-flex align-items-center justify-content-between">
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
<path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
<path d="M4.5 12.5A.5.5 0 0 1 5 12h3a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm0-2A.5.5 0 0 1 5 10h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm1.639-3.708 1.33.886 1.854-1.855a.25.25 0 0 1 .289-.047l1.888.974V8.5a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V8s1.54-1.274 1.639-1.208z"/>
</svg>
Policy Document (JSON)
</span>
<button type="button" class="btn btn-link btn-sm p-0 text-decoration-none" id="formatPolicyBtn" title="Format JSON">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
<path d="M5.854 4.854a.5.5 0 1 0-.708-.708l-3.5 3.5a.5.5 0 0 0 0 .708l3.5 3.5a.5.5 0 0 0 .708-.708L2.707 8l3.147-3.146zm4.292 0a.5.5 0 0 1 .708-.708l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708L13.293 8l-3.147-3.146z"/>
</svg>
Format
</button>
</label>
<textarea class="form-control font-monospace" rows="12" name="policy_document" id="policyDocument" data-public-template='{{ default_policy | tojson }}' spellcheck="false">{{ bucket_policy_text or default_policy }}</textarea>
<div class="form-text">Use presets for common scenarios or switch to Custom JSON to paste AWS-style statements.</div>
<div class="position-relative">
<textarea class="form-control font-monospace" rows="14" name="policy_document" id="policyDocument" data-public-template='{{ default_policy | tojson }}' spellcheck="false" style="font-size: 0.85rem; line-height: 1.5; tab-size: 2;">{{ bucket_policy_text or default_policy }}</textarea>
<div id="policyValidationStatus" class="position-absolute top-0 end-0 m-2 d-none">
<span class="badge bg-success-subtle text-success" id="policyValidBadge">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="me-1" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
</svg>
Valid JSON
</span>
<span class="badge bg-danger-subtle text-danger d-none" id="policyInvalidBadge">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="me-1" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
</svg>
Invalid JSON
</span>
</div>
</div>
<div id="policyErrorDetail" class="text-danger small mt-1 d-none"></div>
<div class="form-text d-flex align-items-start gap-2 mt-2">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="flex-shrink-0 mt-1 text-muted" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z"/>
</svg>
<span>Use presets for common scenarios or select <strong>Custom JSON</strong> to write AWS IAM-style policy statements. The policy will be validated on save.</span>
</div>
</div>
<div class="d-flex gap-2 flex-wrap">
@@ -1201,8 +1233,18 @@
<div class="mb-3">
<label for="target_bucket" class="form-label fw-medium">Target Bucket Name</label>
<input type="text" class="form-control" id="target_bucket" name="target_bucket" required placeholder="e.g. my-backup-bucket">
<div class="form-text">If the target bucket does not exist, it will be created automatically.</div>
<input type="text" class="form-control" id="target_bucket" name="target_bucket" required placeholder="e.g. my-backup-bucket" pattern="^[a-z0-9][a-z0-9.-]{1,61}[a-z0-9]$" minlength="3" maxlength="63">
<div id="target_bucket_feedback" class="invalid-feedback"></div>
<div class="form-text">
<span id="target_bucket_hint">If the target bucket does not exist, it will be created automatically.</span>
<div class="mt-1 text-muted small">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="me-1" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
</svg>
Rules: 3-63 characters, lowercase letters, numbers, hyphens, and periods only. Must start/end with letter or number.
</div>
</div>
</div>
<div class="mb-4">
@@ -2043,12 +2085,64 @@
updateLoadMoreButton();
}
// Track the count of items in current folder before re-rendering
let prevFolderItemCount = 0;
if (currentPrefix && append) {
const prevState = getFoldersAtPrefix(currentPrefix);
prevFolderItemCount = prevState.folders.length + prevState.files.length;
}
if (typeof initFolderNavigation === 'function') {
initFolderNavigation();
}
attachRowHandlers();
// If we're in a nested folder and loaded more objects, scroll to show newly loaded content
if (currentPrefix && append) {
const newState = getFoldersAtPrefix(currentPrefix);
const newFolderItemCount = newState.folders.length + newState.files.length;
const addedCount = newFolderItemCount - prevFolderItemCount;
if (addedCount > 0) {
// Show a brief notification about newly loaded items in the current folder
const folderViewStatusEl = document.getElementById('folder-view-status');
if (folderViewStatusEl) {
folderViewStatusEl.innerHTML = `<span class="text-success fw-medium">+${addedCount} new item${addedCount !== 1 ? 's' : ''} loaded in this folder</span>`;
folderViewStatusEl.classList.remove('d-none');
// Reset to normal status after 3 seconds
setTimeout(() => {
if (typeof updateFolderViewStatus === 'function') {
updateFolderViewStatus();
}
}, 3000);
}
// Scroll to show the first newly added item
const allRows = objectsTableBody.querySelectorAll('tr:not([style*="display: none"])');
if (allRows.length > prevFolderItemCount) {
const firstNewRow = allRows[prevFolderItemCount];
if (firstNewRow) {
firstNewRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
// Briefly highlight the new rows
for (let i = prevFolderItemCount; i < allRows.length; i++) {
allRows[i].classList.add('table-info');
setTimeout(() => {
allRows[i].classList.remove('table-info');
}, 2000);
}
}
}
} else if (hasMoreObjects) {
// Objects were loaded but none were in the current folder - show a hint
const folderViewStatusEl = document.getElementById('folder-view-status');
if (folderViewStatusEl) {
folderViewStatusEl.innerHTML = `<span class="text-muted">Loaded more objects (not in this folder). <button type="button" class="btn btn-link btn-sm p-0" onclick="navigateToFolder('')">Go to root</button> to see all.</span>`;
folderViewStatusEl.classList.remove('d-none');
}
}
}
} catch (error) {
console.error('Failed to load objects:', error);
if (!append) {
@@ -3755,5 +3849,106 @@
}
}
});
// Bucket name validation for replication setup
const targetBucketInput = document.getElementById('target_bucket');
const targetBucketFeedback = document.getElementById('target_bucket_feedback');
const validateBucketName = (name) => {
if (!name) return { valid: false, error: 'Bucket name is required' };
if (name.length < 3) return { valid: false, error: 'Bucket name must be at least 3 characters' };
if (name.length > 63) return { valid: false, error: 'Bucket name must be 63 characters or less' };
if (!/^[a-z0-9]/.test(name)) return { valid: false, error: 'Bucket name must start with a lowercase letter or number' };
if (!/[a-z0-9]$/.test(name)) return { valid: false, error: 'Bucket name must end with a lowercase letter or number' };
if (/[A-Z]/.test(name)) return { valid: false, error: 'Bucket name must not contain uppercase letters' };
if (/_/.test(name)) return { valid: false, error: 'Bucket name must not contain underscores' };
if (/\.\.|--/.test(name)) return { valid: false, error: 'Bucket name must not contain consecutive periods or hyphens' };
if (/^\d+\.\d+\.\d+\.\d+$/.test(name)) return { valid: false, error: 'Bucket name must not be formatted as an IP address' };
if (!/^[a-z0-9][a-z0-9.-]*[a-z0-9]$/.test(name) && name.length > 2) return { valid: false, error: 'Bucket name contains invalid characters. Use only lowercase letters, numbers, hyphens, and periods.' };
return { valid: true, error: null };
};
const updateBucketNameValidation = () => {
if (!targetBucketInput || !targetBucketFeedback) return;
const name = targetBucketInput.value.trim();
if (!name) {
targetBucketInput.classList.remove('is-valid', 'is-invalid');
targetBucketFeedback.textContent = '';
return;
}
const result = validateBucketName(name);
targetBucketInput.classList.toggle('is-valid', result.valid);
targetBucketInput.classList.toggle('is-invalid', !result.valid);
targetBucketFeedback.textContent = result.error || '';
};
targetBucketInput?.addEventListener('input', updateBucketNameValidation);
targetBucketInput?.addEventListener('blur', updateBucketNameValidation);
// Prevent form submission if bucket name is invalid
const replicationForm = targetBucketInput?.closest('form');
replicationForm?.addEventListener('submit', (e) => {
const name = targetBucketInput.value.trim();
const result = validateBucketName(name);
if (!result.valid) {
e.preventDefault();
updateBucketNameValidation();
targetBucketInput.focus();
return false;
}
});
// Policy JSON validation and formatting
const formatPolicyBtn = document.getElementById('formatPolicyBtn');
const policyValidationStatus = document.getElementById('policyValidationStatus');
const policyValidBadge = document.getElementById('policyValidBadge');
const policyInvalidBadge = document.getElementById('policyInvalidBadge');
const policyErrorDetail = document.getElementById('policyErrorDetail');
const validatePolicyJson = () => {
if (!policyTextarea || !policyValidationStatus) return;
const value = policyTextarea.value.trim();
if (!value) {
policyValidationStatus.classList.add('d-none');
policyErrorDetail?.classList.add('d-none');
return;
}
policyValidationStatus.classList.remove('d-none');
try {
JSON.parse(value);
policyValidBadge?.classList.remove('d-none');
policyInvalidBadge?.classList.add('d-none');
policyErrorDetail?.classList.add('d-none');
} catch (err) {
policyValidBadge?.classList.add('d-none');
policyInvalidBadge?.classList.remove('d-none');
if (policyErrorDetail) {
policyErrorDetail.textContent = err.message;
policyErrorDetail.classList.remove('d-none');
}
}
};
policyTextarea?.addEventListener('input', validatePolicyJson);
policyTextarea?.addEventListener('blur', validatePolicyJson);
formatPolicyBtn?.addEventListener('click', () => {
if (!policyTextarea) return;
const value = policyTextarea.value.trim();
if (!value) return;
try {
const parsed = JSON.parse(value);
policyTextarea.value = JSON.stringify(parsed, null, 2);
validatePolicyJson();
} catch (err) {
// Show error in validation
validatePolicyJson();
}
});
// Initialize policy validation on page load
if (policyTextarea && policyPreset?.value === 'custom') {
validatePolicyJson();
}
</script>
{% endblock %}