229 lines
7.0 KiB
Svelte
229 lines
7.0 KiB
Svelte
<script lang="ts">
|
|
import { post } from '$lib/api';
|
|
import { page } from '$app/stores';
|
|
import { status } from '$lib/store';
|
|
import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
|
|
import Setting from '$lib/components/Setting.svelte';
|
|
import { browser } from '$app/env';
|
|
import { t } from '$lib/translations';
|
|
import { errorNotification, getDomain } from '$lib/common';
|
|
|
|
export let service: any;
|
|
export let readOnly: any;
|
|
export let settings: any;
|
|
const { id } = $page.params;
|
|
const { ipv4, ipv6 } = settings;
|
|
let ftpUrl = generateUrl(service.wordpress.ftpPublicPort);
|
|
let ftpUser = service.wordpress.ftpUser;
|
|
let ftpPassword = service.wordpress.ftpPassword;
|
|
let ftpLoading = false;
|
|
let ownMysql = service.wordpress.ownMysql;
|
|
|
|
function generateUrl(publicPort: any) {
|
|
return browser
|
|
? `sftp://${settings?.fqdn ? getDomain(settings.fqdn) : ipv4 || ipv6}:${publicPort}`
|
|
: 'Loading...';
|
|
}
|
|
async function changeSettings(name: any) {
|
|
if (ftpLoading) return;
|
|
if ($status.service.isRunning) {
|
|
ftpLoading = true;
|
|
let ftpEnabled = service.wordpress.ftpEnabled;
|
|
|
|
if (name === 'ftpEnabled') {
|
|
ftpEnabled = !ftpEnabled;
|
|
}
|
|
try {
|
|
const {
|
|
publicPort,
|
|
ftpUser: user,
|
|
ftpPassword: password
|
|
} = await post(`/services/${id}/wordpress/ftp`, {
|
|
ftpEnabled
|
|
});
|
|
ftpUrl = generateUrl(publicPort);
|
|
ftpUser = user;
|
|
ftpPassword = password;
|
|
service.wordpress.ftpEnabled = ftpEnabled;
|
|
} catch (error) {
|
|
return errorNotification(error);
|
|
} finally {
|
|
ftpLoading = false;
|
|
}
|
|
} else {
|
|
try {
|
|
if (name === 'ownMysql') {
|
|
ownMysql = !ownMysql;
|
|
}
|
|
await post(`/services/${id}/wordpress/settings`, {
|
|
ownMysql
|
|
});
|
|
service.wordpress.ownMysql = ownMysql;
|
|
} catch (error) {
|
|
return errorNotification(error);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="flex flex-row border-b border-coolgray-500 my-6 space-x-2">
|
|
<div class="title font-bold pb-3">WordPress</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 items-center px-4">
|
|
<label for="extraConfig">{$t('forms.extra_config')}</label>
|
|
<textarea
|
|
class="w-full"
|
|
bind:value={service.wordpress.extraConfig}
|
|
disabled={$status.service.isRunning || $status.service.initialLoading}
|
|
readonly={$status.service.isRunning}
|
|
class:resize-none={$status.service.isRunning}
|
|
rows="5"
|
|
name="extraConfig"
|
|
id="extraConfig"
|
|
placeholder={!$status.service.isRunning && !$status.service.initialLoading
|
|
? `${$t('forms.eg')}:
|
|
|
|
define('WP_ALLOW_MULTISITE', true);
|
|
define('MULTISITE', true);
|
|
define('SUBDOMAIN_INSTALL', false);`
|
|
: 'N/A'}
|
|
/>
|
|
</div>
|
|
<div class="grid grid-cols-2 items-center px-4">
|
|
<Setting
|
|
id="ftpEnabled"
|
|
bind:setting={service.wordpress.ftpEnabled}
|
|
loading={ftpLoading}
|
|
disabled={!$status.service.isRunning}
|
|
on:click={() => changeSettings('ftpEnabled')}
|
|
title="Enable sFTP connection to WordPress data"
|
|
description="Enables an on-demand sFTP connection to the WordPress data directory. This is useful if you want to use sFTP to upload files."
|
|
/>
|
|
</div>
|
|
{#if service.wordpress.ftpEnabled}
|
|
<div class="grid grid-cols-2 items-center px-4">
|
|
<label for="ftpUrl">sFTP Connection URI</label>
|
|
<CopyPasswordField id="ftpUrl" readonly disabled name="ftpUrl" value={ftpUrl} />
|
|
</div>
|
|
<div class="grid grid-cols-2 items-center px-4">
|
|
<label for="ftpUser">User</label>
|
|
<CopyPasswordField id="ftpUser" readonly disabled name="ftpUser" value={ftpUser} />
|
|
</div>
|
|
<div class="grid grid-cols-2 items-center px-4">
|
|
<label for="ftpPassword">Password</label>
|
|
<CopyPasswordField
|
|
id="ftpPassword"
|
|
isPasswordField
|
|
readonly
|
|
disabled
|
|
name="ftpPassword"
|
|
value={ftpPassword}
|
|
/>
|
|
</div>
|
|
{/if}
|
|
<div class="flex flex-row border-b border-coolgray-500 my-6 space-x-2">
|
|
<div class="title font-bold pb-3">MySQL</div>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<div class="grid grid-cols-2 items-center px-4">
|
|
<Setting
|
|
id="ownMysql"
|
|
dataTooltip={$t('forms.must_be_stopped_to_modify')}
|
|
bind:setting={service.wordpress.ownMysql}
|
|
disabled={$status.service.isRunning}
|
|
on:click={() => !$status.service.isRunning && changeSettings('ownMysql')}
|
|
title="Use your own MySQL server"
|
|
description="Enables the use of your own MySQL server. If you don't have one, you can use the one provided by Coolify."
|
|
/>
|
|
</div>
|
|
{#if service.wordpress.ownMysql}
|
|
<div class="grid grid-cols-2 items-center px-4">
|
|
<label for="mysqlHost">Host</label>
|
|
<input
|
|
class="w-full"
|
|
name="mysqlHost"
|
|
id="mysqlHost"
|
|
required
|
|
readonly={$status.service.isRunning}
|
|
disabled={$status.service.isRunning}
|
|
bind:value={service.wordpress.mysqlHost}
|
|
placeholder="{$t('forms.eg')}: db.coolify.io"
|
|
/>
|
|
</div>
|
|
<div class="grid grid-cols-2 items-center px-4">
|
|
<label for="mysqlPort">Port</label>
|
|
<input
|
|
class="w-full"
|
|
name="mysqlPort"
|
|
id="mysqlPort"
|
|
required
|
|
readonly={$status.service.isRunning}
|
|
disabled={$status.service.isRunning}
|
|
bind:value={service.wordpress.mysqlPort}
|
|
placeholder="{$t('forms.eg')}: 3306"
|
|
/>
|
|
</div>
|
|
{/if}
|
|
<div class="grid grid-cols-2 items-center px-4">
|
|
<label for="mysqlDatabase">{$t('index.database')}</label>
|
|
<input
|
|
class="w-full"
|
|
name="mysqlDatabase"
|
|
id="mysqlDatabase"
|
|
required
|
|
readonly={readOnly && !service.wordpress.ownMysql}
|
|
disabled={readOnly && !service.wordpress.ownMysql}
|
|
bind:value={service.wordpress.mysqlDatabase}
|
|
placeholder="{$t('forms.eg')}: wordpress_db"
|
|
/>
|
|
</div>
|
|
{#if !service.wordpress.ownMysql}
|
|
<div class="grid grid-cols-2 items-center px-4">
|
|
<label for="mysqlRootUser">{$t('forms.root_user')}</label>
|
|
<input
|
|
class="w-full"
|
|
name="mysqlRootUser"
|
|
id="mysqlRootUser"
|
|
placeholder="MySQL {$t('forms.root_user')}"
|
|
value={service.wordpress.mysqlRootUser}
|
|
readonly={$status.service.isRunning || !service.wordpress.ownMysql}
|
|
disabled={$status.service.isRunning || !service.wordpress.ownMysql}
|
|
/>
|
|
</div>
|
|
<div class="grid grid-cols-2 items-center px-4">
|
|
<label for="mysqlRootUserPassword">{$t('forms.roots_password')}</label>
|
|
<CopyPasswordField
|
|
id="mysqlRootUserPassword"
|
|
isPasswordField
|
|
readonly={$status.service.isRunning || !service.wordpress.ownMysql}
|
|
disabled={$status.service.isRunning || !service.wordpress.ownMysql}
|
|
name="mysqlRootUserPassword"
|
|
value={service.wordpress.mysqlRootUserPassword}
|
|
/>
|
|
</div>
|
|
{/if}
|
|
<div class="grid grid-cols-2 items-center px-4">
|
|
<label for="mysqlUser">{$t('forms.user')}</label>
|
|
<input
|
|
class="w-full"
|
|
name="mysqlUser"
|
|
id="mysqlUser"
|
|
bind:value={service.wordpress.mysqlUser}
|
|
readonly={$status.service.isRunning || !service.wordpress.ownMysql}
|
|
disabled={$status.service.isRunning || !service.wordpress.ownMysql}
|
|
/>
|
|
</div>
|
|
<div class="grid grid-cols-2 items-center px-4">
|
|
<label for="mysqlPassword">{$t('forms.password')}</label>
|
|
<CopyPasswordField
|
|
id="mysqlPassword"
|
|
isPasswordField
|
|
readonly={$status.service.isRunning || !service.wordpress.ownMysql}
|
|
disabled={$status.service.isRunning || !service.wordpress.ownMysql}
|
|
name="mysqlPassword"
|
|
bind:value={service.wordpress.mysqlPassword}
|
|
/>
|
|
</div>
|
|
</div>
|