mirror of
https://github.com/StarFleetCPTN/GoMFT.git
synced 2026-09-08 15:41:20 +02:00
StarFleetCPTN
fde60b7d68
- Added a new build script using esbuild to bundle JavaScript and CSS assets, including Tailwind CSS and Font Awesome. - Updated the Dockerfile to include a multi-stage build process for frontend assets, ensuring efficient image creation. - Enhanced GitHub workflows to automate the installation of Node.js dependencies and build frontend assets during CI/CD. - Introduced a .gitignore entry for the dist directory to prevent unnecessary files from being tracked. - Improved caching and content type handling for static files served by the application.
188 lines
11 KiB
Templ
188 lines
11 KiB
Templ
package destination
|
|
|
|
templ GooglePhotosDestinationForm() {
|
|
<div class="space-y-6 mt-4" x-init="$watch('useBuiltinAuthDest', value => {
|
|
if(value) {
|
|
destClientId = '';
|
|
destClientSecret = '';
|
|
}
|
|
})">
|
|
<div class="p-4 mb-4 text-sm text-blue-800 rounded-lg bg-blue-50 dark:bg-blue-900/30 dark:text-blue-300" role="alert">
|
|
<div class="flex items-center">
|
|
<i class="fas fa-info-circle mr-2"></i>
|
|
<span>Google Photos requires authentication after creating this configuration. You'll be prompted to authenticate once the configuration is saved.</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="flex items-center mb-6">
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input type="checkbox" id="use_builtin_auth_dest" name="use_builtin_auth_dest" x-model="useBuiltinAuthDest"
|
|
class="sr-only peer" :value="useBuiltinAuthDest ? 'true' : 'false'">
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
|
|
<span class="ms-3 text-sm font-medium text-gray-900 dark:text-white">Use rclone's built-in Google authentication (recommended)</span>
|
|
</label>
|
|
</div>
|
|
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
|
|
Simple one-click authentication using rclone's shared credentials
|
|
</p>
|
|
</div>
|
|
|
|
<div x-bind:class="{ 'opacity-50': useBuiltinAuthDest }">
|
|
<div class="mb-6">
|
|
<label for="dest_client_id" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
|
|
Google Client ID
|
|
<span x-show="useBuiltinAuthDest" class="text-gray-500 dark:text-gray-400 text-xs font-normal">(Using rclone default)</span>
|
|
</label>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
|
|
<i class="fas fa-id-card text-gray-400 dark:text-gray-500"></i>
|
|
</div>
|
|
<input type="text" id="dest_client_id" name="dest_client_id" x-model="destClientId"
|
|
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 ps-10 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"
|
|
x-bind:disabled="useBuiltinAuthDest"
|
|
placeholder="Google Photos OAuth Client ID" />
|
|
</div>
|
|
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
|
|
Client ID from Google Cloud Console
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mb-6">
|
|
<label for="dest_client_secret" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
|
|
Google Client Secret
|
|
<span x-show="useBuiltinAuthDest" class="text-gray-500 dark:text-gray-400 text-xs font-normal">(Using rclone default)</span>
|
|
</label>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
|
|
<i class="fas fa-key text-gray-400 dark:text-gray-500"></i>
|
|
</div>
|
|
<input type="password" id="dest_client_secret" name="dest_client_secret" x-model="destClientSecret"
|
|
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 ps-10 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"
|
|
x-bind:disabled="useBuiltinAuthDest"
|
|
placeholder="Google Photos OAuth Client Secret" />
|
|
</div>
|
|
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
|
|
Client Secret from Google Cloud Console
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center mb-6">
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input type="checkbox" id="dest_read_only" name="dest_read_only" x-model="destReadOnly"
|
|
class="sr-only peer" :value="destReadOnly ? 'true' : 'false'">
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
|
|
<span class="ms-3 text-sm font-medium text-gray-900 dark:text-white">Read-only mode</span>
|
|
</label>
|
|
</div>
|
|
<p class="ms-14 text-sm text-gray-500 dark:text-gray-400">
|
|
Only request read-only access to your photos
|
|
</p>
|
|
|
|
<div class="mb-6">
|
|
<label for="dest_start_year" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Start Year (Optional)</label>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
|
|
<i class="fas fa-calendar text-gray-400 dark:text-gray-500"></i>
|
|
</div>
|
|
<input type="number" id="dest_start_year" name="dest_start_year" x-model="destStartYear"
|
|
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 ps-10 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="Only include photos after this year (default: 2000)" min="1900" max="2100" />
|
|
</div>
|
|
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
|
|
Only include photos uploaded after this year
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex items-center mb-6">
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input type="checkbox" id="dest_include_archived" name="dest_include_archived" x-model="destIncludeArchived"
|
|
class="sr-only peer" :value="destIncludeArchived ? 'true' : 'false'">
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
|
|
<span class="ms-3 text-sm font-medium text-gray-900 dark:text-white">Include archived media</span>
|
|
</label>
|
|
</div>
|
|
<p class="ms-14 text-sm text-gray-500 dark:text-gray-400">
|
|
Include archived photos and videos in media listings
|
|
</p>
|
|
|
|
<div class="mb-6">
|
|
<label for="destination_path" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Album Path</label>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
|
|
<i class="fas fa-images text-gray-400 dark:text-gray-500"></i>
|
|
</div>
|
|
<input type="text" id="destination_path" name="destination_path" x-model="destinationPath"
|
|
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 ps-10 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="Album path (e.g., album/my-photos)" />
|
|
</div>
|
|
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
|
|
Path within Google Photos to download files from
|
|
</p>
|
|
</div>
|
|
|
|
<div class="p-4 mb-4 text-sm text-yellow-800 rounded-lg bg-yellow-50 dark:bg-yellow-900/30 dark:text-yellow-300" role="alert">
|
|
<div class="flex">
|
|
<i class="fas fa-exclamation-triangle mr-2 flex-shrink-0"></i>
|
|
<div>
|
|
<h3 class="font-medium">Authentication Required</h3>
|
|
<p class="mt-1">After saving this configuration, you'll need to authenticate with Google Photos:</p>
|
|
<ol class="list-decimal list-inside mt-2 space-y-1">
|
|
<li>Go to the configurations page</li>
|
|
<li>Click the "Authenticate" button for this configuration</li>
|
|
<li>You'll be redirected to Google to grant access permissions</li>
|
|
<li>After granting permission, you'll be automatically redirected back to GoMFT</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-4 mb-4 text-sm text-blue-800 rounded-lg bg-blue-50 dark:bg-blue-900/30 dark:text-blue-300" role="alert">
|
|
<div class="flex">
|
|
<i class="fas fa-info-circle mr-2 flex-shrink-0"></i>
|
|
<div>
|
|
<h3 class="font-medium">Authentication Information</h3>
|
|
<div class="mt-1">
|
|
<template x-if="useBuiltinAuthDest">
|
|
<div>
|
|
<p>You're using rclone's built-in authentication, which simplifies the setup process:</p>
|
|
<ul class="list-disc list-inside mt-1 space-y-1">
|
|
<li>No need to create your own Google API credentials</li>
|
|
<li>Authentication happens through Google's secure OAuth flow</li>
|
|
<li>Automatic redirection back to GoMFT after authentication</li>
|
|
</ul>
|
|
<p class="mt-2 text-yellow-700 dark:text-yellow-300">
|
|
<i class="fas fa-exclamation-triangle mr-1"></i>
|
|
Note: The built-in authentication uses shared credentials which have rate limits across all rclone users.
|
|
If you plan to transfer large amounts of data or run many concurrent transfers, consider creating your own credentials.
|
|
</p>
|
|
</div>
|
|
</template>
|
|
<template x-if="!useBuiltinAuthDest">
|
|
<div>
|
|
<p>To use Google Photos with your own credentials:</p>
|
|
<ol class="list-decimal list-inside mt-1 space-y-1">
|
|
<li>Go to the <a href="https://console.cloud.google.com/" target="_blank" class="font-medium underline hover:text-blue-700 dark:hover:text-blue-300">Google Cloud Console</a></li>
|
|
<li>Create a project and enable the Google Photos API</li>
|
|
<li>Create OAuth 2.0 credentials (Client ID & Secret)</li>
|
|
<li>Set authorized redirect URI to <code class="bg-blue-100 dark:bg-blue-800 px-1.5 py-0.5 rounded text-xs">http://localhost:53682/</code></li>
|
|
</ol>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-4 mb-4 text-sm text-yellow-800 rounded-lg bg-yellow-50 dark:bg-yellow-900/30 dark:text-yellow-300" role="alert">
|
|
<div class="flex">
|
|
<i class="fas fa-exclamation-circle mr-2 flex-shrink-0"></i>
|
|
<div>
|
|
<h3 class="font-medium">Important Note About Google Photos</h3>
|
|
<p class="mt-1">When downloading from Google Photos, be aware that some original metadata may not be preserved. Google Photos processes and may compress some images upon upload.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
} |