Github-Mirror/GoMFT
1
0
Fork 0
mirror of https://github.com/StarFleetCPTN/GoMFT.git synced 2026-09-08 23:50:48 +02:00
Code Issues Packages Projects Releases Wiki Activity
Files
6e8fe9ad721db30de00e7739dc3de08e20b9fb8d
GoMFT/components/storage_provider_form.templ
T

954 lines
42 KiB
Templ
Raw Blame History

package components
import (
"context"
"fmt"
"github.com/starfleetcptn/gomft/internal/db"
)
type StorageProviderFormData struct {
Provider *db.StorageProvider
IsEdit bool
Error string
}
// getTitle returns the appropriate title based on whether we're editing or creating
func getTitle(isEdit bool) string {
if isEdit {
return "Edit Storage Provider"
}
return "New Storage Provider"
}
// Main template for Storage Provider form
templ StorageProviderForm(ctx context.Context, data StorageProviderFormData) {
@LayoutWithContext(getTitle(data.IsEdit), ctx) {
<div class="min-h-screen bg-gray-50 dark:bg-gray-900 py-8">
<div class="max-w-3xl mx-auto">
<div class="flex items-center justify-between mb-6">
<h1 class="text-2xl font-bold text-gray-900 dark:text-white flex items-center">
<i class="fas fa-server w-6 h-6 mr-2 text-blue-500 dark:text-blue-400"></i>
if data.IsEdit {
Edit Storage Provider
} else {
New Storage Provider
}
</h1>
<a href="/storage-providers" class="text-blue-600 dark:text-blue-400 hover:underline flex items-center">
<i class="fas fa-arrow-left mr-1.5"></i>
Back to Providers
</a>
</div>
if data.Error != "" {
<div class="mb-4 p-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400">
<div class="flex items-center">
<i class="fas fa-exclamation-circle mr-2"></i>
<span>{ data.Error }</span>
</div>
</div>
}
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 mb-6">
if data.IsEdit {
<form action={ templ.SafeURL(fmt.Sprintf("/storage-providers/%d", data.Provider.ID)) } method="POST">
<input type="hidden" name="_method" value="PUT" />
@formFields(data)
</form>
} else {
<form action="/storage-providers" method="POST">
@formFields(data)
</form>
}
</div>
</div>
</div>
<!-- Include the provider form scripts -->
@providerFormScript()
}
}
// Form fields template
templ formFields(data StorageProviderFormData) {
<!-- Basic Information -->
<div class="mb-6">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Basic Information</h2>
<!-- Provider Name -->
<div class="mb-4">
<label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Provider Name <span class="text-red-500">*</span></label>
<input type="text" id="name" name="name" value={ data.Provider.Name } class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Storage Provider Name" required />
</div>
<!-- Provider Type -->
<div>
<label for="type" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Provider Type <span class="text-red-500">*</span></label>
<select id="type" name="type" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required onchange="toggleProviderFields()">
<option value="" disabled
if data.Provider.Type == "" {
selected="selected"
}
>
Select provider type
</option>
<!-- Server-based providers -->
<optgroup label="Server-based">
<option value="sftp"
if data.Provider.Type == db.ProviderTypeSFTP {
selected="selected"
}
>SFTP</option>
<option value="hetzner"
if data.Provider.Type == db.ProviderTypeHetzner {
selected="selected"
}
>Hetzner Storage Box</option>
<option value="ftp"
if data.Provider.Type == db.ProviderTypeFTP {
selected="selected"
}
>FTP</option>
<option value="smb"
if data.Provider.Type == db.ProviderTypeSMB {
selected="selected"
}
>SMB/CIFS</option>
</optgroup>
<!-- Object Storage -->
<optgroup label="Object Storage">
<option value="s3"
if data.Provider.Type == db.ProviderTypeS3 {
selected="selected"
}
>Amazon S3</option>
<option value="wasabi"
if data.Provider.Type == "wasabi" {
selected="selected"
}
>Wasabi</option>
<option value="minio"
if data.Provider.Type == "minio" {
selected="selected"
}
>MinIO</option>
<option value="b2"
if data.Provider.Type == "b2" {
selected="selected"
}
>Backblaze B2</option>
</optgroup>
<!-- Web-based storage -->
<optgroup label="Web Storage">
<option value="webdav"
if data.Provider.Type == "webdav" {
selected="selected"
}
>WebDAV</option>
<option value="nextcloud"
if data.Provider.Type == "nextcloud" {
selected="selected"
}
>Nextcloud</option>
</optgroup>
<!-- Cloud providers -->
<optgroup label="Cloud Storage">
<option value="onedrive"
if data.Provider.Type == db.ProviderTypeOneDrive {
selected="selected"
}
>OneDrive</option>
<option value="gdrive"
if data.Provider.Type == db.ProviderTypeGoogleDrive {
selected="selected"
}
>Google Drive</option>
<option value="gphotos"
if data.Provider.Type == db.ProviderTypeGooglePhoto {
selected="selected"
}
>Google Photos</option>
</optgroup>
<!-- Local -->
<optgroup label="Local">
<option value="local"
if data.Provider.Type == db.ProviderTypeLocal {
selected="selected"
}
>Local Filesystem</option>
</optgroup>
</select>
</div>
</div>
<!-- Connection Details - SFTP/FTP/SMB -->
<div id="sftp-ftp-fields" class="mb-6 provider-fields hidden">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Connection Details</h2>
<!-- Host -->
<div class="mb-4">
<label for="host" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Host <span class="text-red-500">*</span></label>
<input type="text" id="host" name="host" value={ data.Provider.Host } class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="e.g., sftp.example.com or 192.168.1.10" />
</div>
<!-- Port -->
<div id="port-field" class="mb-4">
<label for="port" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Port</label>
<input type="number" id="port" name="port" value={ fmt.Sprint(data.Provider.Port) } class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="22" />
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Leave empty for default (SFTP: 22, FTP: 21, SMB: 445, WebDAV: 80/443)</p>
</div>
<!-- Username -->
<div class="mb-4">
<label for="username" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Username <span class="text-red-500">*</span></label>
<input type="text" id="username" name="username" value={ data.Provider.Username } class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Your login username" />
</div>
<!-- Password -->
<div class="mb-4">
<label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Password</label>
<input type="password" id="password" name="password" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Your login password" />
if data.IsEdit {
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Leave empty to keep the current password</p>
}
</div>
<!-- Key File (SFTP only) -->
<div id="key-file-field" class="mb-4 hidden">
<label for="keyFile" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Key File Path</label>
<input type="text" id="keyFile" name="keyFile" value={ data.Provider.KeyFile } class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="e.g., /home/user/.ssh/id_rsa" />
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Absolute path to private key file (if using key-based authentication)</p>
</div>
<!-- Domain (SMB only) -->
<div id="domain-field" class="mb-4 hidden">
<label for="domain" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Domain</label>
<input type="text" id="domain" name="domain" value={ data.Provider.Domain } class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="e.g., WORKGROUP or domain.local" />
</div>
<!-- Passive Mode (FTP only) -->
<div id="passive-mode-field" class="mb-4 hidden">
<div class="flex items-center">
<input id="passiveMode" name="passiveMode" type="checkbox" value="true" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
if data.Provider.PassiveMode != nil && *data.Provider.PassiveMode {
checked="checked"
}
/>
<label for="passiveMode" class="ml-2 text-sm font-medium text-gray-900 dark:text-white">Use Passive Mode</label>
</div>
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Recommended for most FTP connections through firewalls</p>
</div>
</div>
<!-- S3 Fields -->
<div id="s3-fields" class="mb-6 provider-fields hidden">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">S3 Connection Details</h2>
<!-- Endpoint -->
<div class="mb-4">
<label for="endpoint" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
Endpoint
<span id="endpoint-required" class="text-red-500">*</span>
</label>
<input type="text" id="endpoint" name="endpoint" value={ data.Provider.Endpoint }
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="e.g., s3.amazonaws.com, s3.us-west-1.wasabisys.com" />
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
Custom endpoint URL (only needed for non-standard regions or non-AWS S3-compatible services). Optional for B2.
</p>
</div>
<!-- Region -->
<div class="mb-4">
<label for="region" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
Region
<span id="region-required" class="text-red-500">*</span>
</label>
<input type="text" id="region" name="region" value={ data.Provider.Region }
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="e.g., us-east-1, eu-central-1" />
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
AWS Region where your S3 bucket is located (e.g., us-east-1, eu-west-1). Optional for B2 and Wasabi.
</p>
</div>
<!-- Bucket -->
<div class="mb-4">
<label for="bucket" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Bucket <span class="text-red-500">*</span></label>
<input type="text" id="bucket" name="bucket" value={ data.Provider.Bucket }
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="Your bucket name" />
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
Name of your S3 bucket (case-sensitive)
</p>
</div>
<!-- Access Key -->
<div class="mb-4">
<label for="accessKey" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Access Key <span class="text-red-500">*</span></label>
<input type="text" id="accessKey" name="accessKey" value={ data.Provider.AccessKey }
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="Your access key/key ID" />
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
Your AWS Access Key ID
</p>
</div>
<!-- Secret Key -->
<div class="mb-4">
<label for="secretKey" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Secret Key <span class="text-red-500">*</span></label>
<input type="password" id="secretKey" name="secretKey"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="Your secret access key" />
if data.IsEdit {
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Leave empty to keep the current secret key</p>
}
</div>
</div>
<!-- Cloud Storage Fields (OneDrive, Google Drive, Google Photos) -->
<div id="cloud-fields" class="mb-6 provider-fields hidden">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Cloud Storage Details</h2>
<!-- Client ID -->
<div class="mb-4">
<label for="clientID" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Client ID <span class="text-red-500">*</span></label>
<input type="text" id="clientID" name="clientID" value={ data.Provider.ClientID } class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="OAuth client ID from developer console" />
</div>
<!-- Client Secret -->
<div class="mb-4">
<label for="clientSecret" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Client Secret <span class="text-red-500">*</span></label>
<input type="password" id="clientSecret" name="clientSecret" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="OAuth client secret from developer console" />
if data.IsEdit {
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Leave empty to keep the current client secret</p>
}
</div>
<!-- Google Drive - Drive ID -->
<div id="drive-id-field" class="mb-4 hidden">
<label for="driveID" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Drive ID</label>
<input type="text" id="driveID" name="driveID" value={ data.Provider.DriveID } class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="ID of shared/team drive (from Drive URL)" />
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Only required for shared drives</p>
</div>
<!-- Google Drive - Team Drive -->
<div id="team-drive-field" class="mb-4 hidden">
<label for="teamDrive" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Team Drive</label>
<input type="text" id="teamDrive" name="teamDrive" value={ data.Provider.TeamDrive } class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Team drive identifier" />
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Only required for team drives</p>
</div>
<!-- Google Photos - Read Only -->
<div id="readonly-field" class="mb-4 hidden">
<div class="flex items-center">
<input id="readOnly" name="readOnly" type="checkbox" value="true" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
if data.Provider.ReadOnly != nil && *data.Provider.ReadOnly {
checked="checked"
}
/>
<label for="readOnly" class="ml-2 text-sm font-medium text-gray-900 dark:text-white">Read Only Mode</label>
</div>
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Google Photos has limited write capabilities</p>
</div>
</div>
<!-- Local File System Fields -->
<div id="local-fields" class="mb-6 provider-fields hidden">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Local File System</h2>
<div class="mb-4">
<label for="localPath" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Base Path <span class="text-red-500">*</span></label>
<input type="text" id="localPath" name="localPath" value={ data.Provider.Host } class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="e.g., /data/files or C:\transfer\data" />
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Absolute path on the server's file system</p>
</div>
</div>
<!-- Submit Buttons -->
<div class="flex items-center justify-between mt-8">
<a href="/storage-providers" class="text-gray-500 bg-gray-50 hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">
Cancel
</a>
<div class="flex space-x-2">
<button type="submit" name="test" value="true" class="text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-700">
Save & Test
</button>
<button type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
Save Provider
</button>
</div>
</div>
<!-- Hidden fields for S3 form data to ensure it gets submitted correctly -->
<input type="hidden" id="hidden_endpoint" name="endpoint" value={ data.Provider.Endpoint } />
<input type="hidden" id="hidden_region" name="region" value={ data.Provider.Region } />
<input type="hidden" id="hidden_bucket" name="bucket" value={ data.Provider.Bucket } />
<input type="hidden" id="hidden_accessKey" name="accessKey" value={ data.Provider.AccessKey } />
<input type="hidden" id="hidden_secretKey" name="secretKey" />
<!-- Hidden fields for Google Drive and Google Photos -->
<input type="hidden" id="hidden_clientID" name="clientID" value={ data.Provider.ClientID } />
<input type="hidden" id="hidden_clientSecret" name="clientSecret" />
}
// JavaScript helper for toggling provider fields
templ providerFormScript() {
<script>
// Set current active fields on page load
document.addEventListener('DOMContentLoaded', function() {
toggleProviderFields();
// Add event listener to track if user manually changes the port
const portField = document.getElementById('port');
portField.addEventListener('input', function() {
// Mark the field as user-modified
this.dataset.userModified = 'true';
});
// Add event listeners for S3 fields
document.getElementById('endpoint').addEventListener('input', function() {
document.getElementById('hidden_endpoint').value = this.value;
});
document.getElementById('region').addEventListener('input', function() {
document.getElementById('hidden_region').value = this.value;
});
document.getElementById('bucket').addEventListener('input', function() {
document.getElementById('hidden_bucket').value = this.value;
});
document.getElementById('accessKey').addEventListener('input', function() {
document.getElementById('hidden_accessKey').value = this.value;
});
document.getElementById('secretKey').addEventListener('input', function() {
document.getElementById('hidden_secretKey').value = this.value;
});
// Add event listeners for Google Drive/Photos fields
document.getElementById('clientID').addEventListener('input', function() {
document.getElementById('hidden_clientID').value = this.value;
});
document.getElementById('clientSecret').addEventListener('input', function() {
document.getElementById('hidden_clientSecret').value = this.value;
});
// Add form submit listener to ensure all hidden fields are populated
const forms = document.querySelectorAll('form');
forms.forEach(form => {
form.addEventListener('submit', function(e) {
// Find active provider type
const providerType = document.getElementById('type').value;
// If S3-compatible, update hidden fields
if (['s3', 'wasabi', 'minio', 'b2'].includes(providerType)) {
document.getElementById('hidden_endpoint').value = document.getElementById('endpoint').value;
document.getElementById('hidden_region').value = document.getElementById('region').value;
document.getElementById('hidden_bucket').value = document.getElementById('bucket').value;
document.getElementById('hidden_accessKey').value = document.getElementById('accessKey').value;
// Make sure secretKey is always copied to the hidden field
// This is especially important for B2 which uses this as Application Key
const secretKeyValue = document.getElementById('secretKey').value;
document.getElementById('hidden_secretKey').value = secretKeyValue;
// For validation - ensure we have appropriate fields for each provider type
if (providerType === 'b2') {
// B2 does not require region or endpoint
if (!document.getElementById('hidden_bucket').value) {
alert('Bucket name is required');
e.preventDefault();
return false;
}
if (!document.getElementById('hidden_accessKey').value) {
alert('Account ID is required');
e.preventDefault();
return false;
}
if (!secretKeyValue && !document.getElementById('hidden_secretKey').value) {
alert('Application Key is required');
e.preventDefault();
return false;
}
} else if (providerType === 'wasabi') {
// Wasabi does not require region
if (!document.getElementById('hidden_endpoint').value) {
alert('Endpoint is required for Wasabi');
e.preventDefault();
return false;
}
if (!document.getElementById('hidden_bucket').value) {
alert('Bucket name is required');
e.preventDefault();
return false;
}
if (!document.getElementById('hidden_accessKey').value) {
alert('Access key is required');
e.preventDefault();
return false;
}
if (!secretKeyValue && !document.getElementById('hidden_secretKey').value) {
alert('Secret key is required');
e.preventDefault();
return false;
}
}
console.log('Submitting S3-compatible form with:', {
provider: providerType,
endpoint: document.getElementById('hidden_endpoint').value,
region: document.getElementById('hidden_region').value,
bucket: document.getElementById('hidden_bucket').value,
accessKey: document.getElementById('hidden_accessKey').value,
secretKey: document.getElementById('hidden_secretKey').value ? '[PRESENT]' : '[EMPTY]',
secretKeyLength: document.getElementById('hidden_secretKey').value.length
});
}
// If Google Drive or Google Photos, update hidden fields
if (['drive', 'gphotos', 'onedrive'].includes(providerType)) {
document.getElementById('hidden_clientID').value = document.getElementById('clientID').value;
// Make sure clientSecret is always copied to the hidden field
const clientSecretValue = document.getElementById('clientSecret').value;
document.getElementById('hidden_clientSecret').value = clientSecretValue;
// Validate required fields
if (!document.getElementById('hidden_clientID').value) {
alert('Client ID is required');
e.preventDefault();
return false;
}
console.log('Submitting cloud storage form with:', {
provider: providerType,
clientID: document.getElementById('hidden_clientID').value,
clientSecret: document.getElementById('hidden_clientSecret').value ? '[PRESENT]' : '[EMPTY]',
clientSecretLength: document.getElementById('hidden_clientSecret').value.length
});
}
// Debug WebDAV form submission
if (['webdav', 'nextcloud'].includes(providerType)) {
console.log('Submitting WebDAV form with:', {
provider: providerType,
host: document.getElementById('host').value,
username: document.getElementById('username').value,
password: document.getElementById('password').value ? '[PRESENT]' : '[EMPTY]',
passwordLength: document.getElementById('password').value.length
});
}
});
});
});
function toggleProviderFields() {
const provider = document.getElementById('type').value;
// Hide all provider fields first
const providerFieldsets = document.querySelectorAll('.provider-fields');
providerFieldsets.forEach(fieldset => {
fieldset.classList.add('hidden');
});
// Auto-populate port based on provider type
const portField = document.getElementById('port');
const isPortEmpty = portField.value === '';
const userModified = portField.dataset.userModified === 'true';
// Only set default port if field is empty or hasn't been modified by user
if (isPortEmpty || !userModified) {
if (provider === 'sftp') {
portField.value = '22';
} else if (provider === 'hetzner') {
portField.value = '23';
} else if (provider === 'ftp') {
portField.value = '21';
} else if (provider === 'smb') {
portField.value = '445';
} else if (provider === 'webdav' || provider === 'nextcloud') {
portField.value = '443';
} else {
portField.value = '';
}
// Reset user modified flag if we're setting it programmatically
portField.dataset.userModified = 'false';
}
// Show the appropriate fields based on the selected provider type
console.log("Provider type selected:", provider);
// Server-based connection fields (SFTP, FTP, Hetzner)
if (['sftp', 'ftp', 'hetzner'].includes(provider)) {
document.getElementById('sftp-ftp-fields').classList.remove('hidden');
// SFTP/Hetzner-specific fields
if (provider === 'sftp' || provider === 'hetzner') {
document.getElementById('key-file-field').classList.remove('hidden');
// Update placeholders for Hetzner
if (provider === 'hetzner') {
// Update host field
const hostField = document.getElementById('host');
if (hostField) {
hostField.placeholder = "uXXXXXX.your-storagebox.de";
// Update host label and description
const hostLabel = document.querySelector('label[for="host"]');
if (hostLabel) {
hostLabel.textContent = "Storage Box Host";
}
const hostDescription = hostField.nextElementSibling;
if (hostDescription?.tagName === 'P') {
hostDescription.textContent = "Your Hetzner Storage Box hostname (e.g., uXXXXXX.your-storagebox.de)";
}
}
// Update username field
const usernameField = document.getElementById('username');
if (usernameField) {
usernameField.placeholder = "uXXXXXX";
// Update username description
const usernameDescription = usernameField.nextElementSibling;
if (usernameDescription?.tagName === 'P') {
usernameDescription.textContent = "Your Hetzner Storage Box username (typically matches your Storage Box number)";
}
}
// Update key file field
const keyFileField = document.getElementById('keyFile');
if (keyFileField) {
keyFileField.placeholder = "/path/to/id_rsa";
// Update key file description
const keyFileDescription = keyFileField.nextElementSibling;
if (keyFileDescription?.tagName === 'P') {
keyFileDescription.textContent = "Path to your SSH private key file for Hetzner Storage Box authentication";
}
}
// Update port field description
const portField = document.getElementById('port');
if (portField) {
const portDescription = portField.nextElementSibling;
if (portDescription?.tagName === 'P') {
portDescription.textContent = "Connection port for Hetzner Storage Box (default: 23)";
}
}
}
}
// FTP-specific fields
if (provider === 'ftp') {
document.getElementById('passive-mode-field').classList.remove('hidden');
}
}
// WebDAV-based fields
if (['webdav', 'nextcloud'].includes(provider)) {
document.getElementById('sftp-ftp-fields').classList.remove('hidden');
// Hide fields that WebDAV doesn't use
document.getElementById('port-field').classList.add('hidden');
// Update placeholders for WebDAV
const hostField = document.getElementById('host');
if (hostField) {
hostField.placeholder = "https://webdav.example.com";
}
// Update label for host field
const hostLabel = document.querySelector('label[for="host"]');
if (hostLabel) {
hostLabel.textContent = "WebDAV URL";
}
// Update description for host field
const hostDescription = hostField?.nextElementSibling;
if (hostDescription?.tagName === 'P') {
hostDescription.textContent = provider === 'webdav' ?
"Full URL to your WebDAV server including protocol (https://)" :
"Full URL to your Nextcloud WebDAV endpoint (e.g., https://nextcloud.example.com/remote.php/dav/files/username/)";
}
// Update username field
const usernameField = document.getElementById('username');
if (usernameField) {
usernameField.placeholder = provider === 'nextcloud' ? "nextcloud_username" : "webdav_username";
// Update username description
const usernameDescription = usernameField.nextElementSibling;
if (usernameDescription?.tagName === 'P') {
usernameDescription.textContent = provider === 'nextcloud' ?
"Your Nextcloud username for authentication" :
"Your WebDAV username for authentication";
}
}
// Update password field
const passwordField = document.getElementById('password');
if (passwordField) {
passwordField.name = "password"; // Ensure name is set correctly
// Update password description
const passwordDescription = passwordField.nextElementSibling;
if (passwordDescription?.tagName === 'P') {
// Check if we're in edit mode
const editMode = passwordDescription.textContent.includes("Leave empty to keep");
if (editMode) {
// Edit mode - tell user they can leave password empty to keep current one
passwordDescription.textContent = provider === 'nextcloud' ?
"Leave empty to keep the current Nextcloud password" :
"Leave empty to keep the current WebDAV password";
} else {
// New provider - show regular password help text
passwordDescription.textContent = provider === 'nextcloud' ?
"Your Nextcloud password or app-specific password" :
"Your WebDAV password for authentication";
}
}
}
if (document.getElementById('key-file-field')) {
document.getElementById('key-file-field').classList.add('hidden');
}
if (document.getElementById('domain-field')) {
document.getElementById('domain-field').classList.add('hidden');
}
} else {
// Reset placeholders for other providers
const hostField = document.getElementById('host');
if (hostField && ['sftp', 'ftp', 'smb'].includes(provider)) {
hostField.placeholder = provider === 'sftp' ? "sftp.example.com" :
provider === 'ftp' ? "ftp.example.com" :
"192.168.1.10";
}
// Reset label for host field
const hostLabel = document.querySelector('label[for="host"]');
if (hostLabel) {
hostLabel.textContent = "Host";
}
// Reset username field
const usernameField = document.getElementById('username');
if (usernameField) {
usernameField.placeholder = provider === 'sftp' ? "sftp_username" :
provider === 'ftp' ? "ftp_username" :
provider === 'smb' ? "smb_username" : "username";
// Reset username description
const usernameDescription = usernameField.nextElementSibling;
if (usernameDescription?.tagName === 'P') {
usernameDescription.textContent = "Your login username";
}
}
// Reset password field
const passwordField = document.getElementById('password');
if (passwordField) {
// Reset password description
const passwordDescription = passwordField.nextElementSibling;
if (passwordDescription?.tagName === 'P') {
// Check if we're in edit mode
const editMode = passwordDescription.textContent.includes("Leave empty to keep");
if (editMode) {
// Edit mode - tell user they can leave password empty to keep current one
if (provider === 'sftp') {
passwordDescription.textContent = "Leave empty to keep the current SFTP password";
} else if (provider === 'ftp') {
passwordDescription.textContent = "Leave empty to keep the current FTP password";
} else if (provider === 'smb') {
passwordDescription.textContent = "Leave empty to keep the current SMB password";
} else if (provider === 'hetzner') {
passwordDescription.textContent = "Leave empty to keep the current Hetzner Storage Box password";
} else {
passwordDescription.textContent = "Leave empty to keep the current password";
}
} else {
// New provider - show regular password help text
if (provider === 'sftp') {
passwordDescription.textContent = "Your SFTP server password";
} else if (provider === 'ftp') {
passwordDescription.textContent = "Your FTP server password";
} else if (provider === 'smb') {
passwordDescription.textContent = "Your SMB/CIFS share password";
} else if (provider === 'hetzner') {
passwordDescription.textContent = "Your Hetzner Storage Box password";
} else {
passwordDescription.textContent = "Your login password";
}
}
}
}
}
// SMB-specific fields
if (provider === 'smb') {
document.getElementById('sftp-ftp-fields').classList.remove('hidden');
document.getElementById('domain-field').classList.remove('hidden');
}
// S3-compatible storage
if (['s3', 'wasabi', 'minio', 'b2'].includes(provider)) {
document.getElementById('s3-fields').classList.remove('hidden');
// Set region and endpoint requirements based on provider type
const regionRequired = document.getElementById('region-required');
const endpointRequired = document.getElementById('endpoint-required');
const regionInput = document.getElementById('region');
const endpointInput = document.getElementById('endpoint');
// Update Secret Key field description based on provider type
const secretKeyField = document.getElementById('secretKey');
if (secretKeyField) {
const secretKeyDescription = secretKeyField.nextElementSibling;
if (secretKeyDescription?.tagName === 'P') {
// Check if in edit mode
const editMode = secretKeyDescription.textContent.includes("Leave empty to keep");
if (editMode) {
// Edit mode - provider specific text
if (provider === 'b2') {
secretKeyDescription.textContent = "Leave empty to keep the current B2 Application Key";
} else if (provider === 'wasabi') {
secretKeyDescription.textContent = "Leave empty to keep the current Wasabi Secret Key";
} else if (provider === 'minio') {
secretKeyDescription.textContent = "Leave empty to keep the current MinIO Secret Key";
} else {
secretKeyDescription.textContent = "Leave empty to keep the current AWS Secret Access Key";
}
} else {
// New provider - provider specific text
if (provider === 'b2') {
secretKeyDescription.textContent = "Your Backblaze B2 Application Key";
} else if (provider === 'wasabi') {
secretKeyDescription.textContent = "Your Wasabi Secret Key";
} else if (provider === 'minio') {
secretKeyDescription.textContent = "Your MinIO Secret Key";
} else {
secretKeyDescription.textContent = "Your AWS Secret Access Key";
}
}
}
}
// For B2: endpoint and region are optional
if (provider === 'b2') {
regionRequired.style.display = 'none';
endpointRequired.style.display = 'none';
regionInput.removeAttribute('required');
endpointInput.removeAttribute('required');
}
// For Wasabi: region is optional
else if (provider === 'wasabi') {
regionRequired.style.display = 'none';
endpointRequired.style.display = 'inline';
regionInput.removeAttribute('required');
endpointInput.setAttribute('required', 'required');
}
// For S3 and MinIO: both are required
else {
regionRequired.style.display = 'inline';
endpointRequired.style.display = 'inline';
regionInput.setAttribute('required', 'required');
endpointInput.setAttribute('required', 'required');
}
}
// Google services
if (['drive', 'gphotos'].includes(provider)) {
document.getElementById('cloud-fields').classList.remove('hidden');
document.getElementById('built-in-auth-field').classList.remove('hidden');
// Update client secret field description
const clientSecretField = document.getElementById('clientSecret');
if (clientSecretField) {
const clientSecretDescription = clientSecretField.nextElementSibling;
if (clientSecretDescription?.tagName === 'P') {
// Check if in edit mode
const editMode = clientSecretDescription.textContent.includes("Leave empty to keep");
if (editMode) {
// Edit mode - provider specific text
if (provider === 'drive') {
clientSecretDescription.textContent = "Leave empty to keep the current Google Drive client secret";
} else if (provider === 'gphotos') {
clientSecretDescription.textContent = "Leave empty to keep the current Google Photos client secret";
}
}
}
}
// Google Drive specific fields
if (provider === 'drive') {
document.getElementById('drive-id-field').classList.remove('hidden');
document.getElementById('team-drive-field').classList.remove('hidden');
}
// Google Photos specific fields
if (provider === 'gphotos') {
document.getElementById('gphotos-options-field').classList.remove('hidden');
}
}
// OneDrive
if (provider === 'onedrive') {
document.getElementById('cloud-fields').classList.remove('hidden');
// Update client secret field description
const clientSecretField = document.getElementById('clientSecret');
if (clientSecretField) {
const clientSecretDescription = clientSecretField.nextElementSibling;
if (clientSecretDescription?.tagName === 'P') {
// Check if in edit mode
const editMode = clientSecretDescription.textContent.includes("Leave empty to keep");
if (editMode) {
clientSecretDescription.textContent = "Leave empty to keep the current OneDrive client secret";
} else {
clientSecretDescription.textContent = "Your Microsoft Azure OAuth client secret";
}
}
}
}
// Local filesystem fields
if (provider === 'local') {
document.getElementById('local-fields').classList.remove('hidden');
}
}
</script>
}
// Test result dialog
templ ConnectionTestResult(success bool, message string, errorCode string) {
<div class="text-center">
if success {
<i class="fas fa-check-circle text-green-500 text-5xl mb-4"></i>
<h3 class="mb-2 text-lg font-semibold text-green-500 dark:text-green-400">Connection Successful</h3>
} else {
<i class="fas fa-times-circle text-red-500 text-5xl mb-4"></i>
<h3 class="mb-2 text-lg font-semibold text-red-500 dark:text-red-400">Connection Failed</h3>
}
<p class="text-gray-500 dark:text-gray-400 mb-4">
{ message }
</p>
if errorCode != "" {
<div class="text-sm bg-gray-100 dark:bg-gray-800 p-2 rounded">
<p class="text-gray-700 dark:text-gray-300">Error code: { errorCode }</p>
</div>
}
</div>
}
Reference in New Issue View Git Blame Copy Permalink