feat: Able to modify database passwords

src/app.d.ts

@@ -15,6 +15,9 @@ declare namespace App {
 		readOnly: boolean;
 		source: string;
 		settings: string;
+		database: Record<string, any>;
+		versions: string;
+		privatePort: string;
 	}
 }
 

src/lib/components/common.ts

@@ -56,7 +56,7 @@ export const supportedDatabaseTypesAndVersions = [
 		name: 'postgresql',
 		fancyName: 'PostgreSQL',
 		baseImage: 'bitnami/postgresql',
-		versions: ['14.2', '13.6', '12.10', '11.15', '10.20']
+		versions: ['14.2.0', '13.6.0', '12.10.0	', '11.15.0', '10.20.0']
 	},
 	{
 		name: 'redis',

src/lib/database/databases.ts

@@ -137,3 +137,37 @@ export async function stopDatabase(database) {
 	}
 	return everStarted;
 }
+
+export async function updatePasswordInDb(database, user, newPassword) {
+	const {
+		id,
+		type,
+		rootUser,
+		rootUserPassword,
+		dbUser,
+		dbUserPassword,
+		defaultDatabase,
+		destinationDockerId,
+		destinationDocker: { engine }
+	} = database;
+	if (destinationDockerId) {
+		const host = getEngine(engine);
+		if (type === 'mysql') {
+			await asyncExecShell(
+				`DOCKER_HOST=${host} docker exec ${id} mysql -u ${rootUser} -p${rootUserPassword} -e \"ALTER USER '${user}'@'%' IDENTIFIED WITH caching_sha2_password BY '${newPassword}';\"`
+			);
+		} else if (type === 'postgresql') {
+			await asyncExecShell(
+				`DOCKER_HOST=${host} docker exec ${id} psql postgresql://${dbUser}:${dbUserPassword}@${id}:5432/${defaultDatabase} -c "ALTER role ${user} WITH PASSWORD '${newPassword}'"`
+			);
+		} else if (type === 'mongodb') {
+			await asyncExecShell(
+				`DOCKER_HOST=${host} docker exec ${id} mongo 'mongodb://${rootUser}:${rootUserPassword}@${id}:27017/admin?readPreference=primary&ssl=false' --eval "db.changeUserPassword('${user}','${newPassword}')"`
+			);
+		} else if (type === 'redis') {
+			await asyncExecShell(
+				`DOCKER_HOST=${host} docker exec ${id} redis-cli -u redis://${dbUserPassword}@${id}:6379 --raw CONFIG SET requirepass ${newPassword}`
+			);
+		}
+	}
+}

src/lib/database/destinations.ts

@@ -44,9 +44,7 @@ export async function configureDestinationForDatabase({ id, destinationId }) {
 		const host = getEngine(engine);
 		if (type && version) {
 			const baseImage = getDatabaseImage(type);
-			asyncExecShell(
+			asyncExecShell(`DOCKER_HOST=${host} docker pull ${baseImage}:${version}`);
-				`DOCKER_HOST=${host} docker pull ${baseImage}:${version} && echo "FROM ${baseImage}:${version}" | docker build --label coolify.image="true" -t "${baseImage}:${version}" -`
-			);
 		}
 	}
 }

src/routes/databases/[id]/_Databases/_Databases.svelte

@@ -2,6 +2,8 @@
 	export let database;
 	export let privatePort;
 	export let settings;
+	export let isRunning;
+
 	import { page, session } from '$app/stores';
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
 	import Setting from '$lib/components/Setting.svelte';
@@ -15,15 +17,26 @@
 	import { browser } from '$app/env';
 	import { post } from '$lib/api';
 	import { getDomain } from '$lib/components/common';
+	import { toast } from '@zerodevx/svelte-toast';
 
 	const { id } = $page.params;
+
 	let loading = false;
+	let publicLoading = false;
+
 	let isPublic = database.settings.isPublic || false;
 	let appendOnly = database.settings.appendOnly;
 
-	let databaseDefault = database.defaultDatabase;
+	let databaseDefault;
-	let databaseDbUser = database.dbUser;
+	let databaseDbUser;
-	let databaseDbUserPassword = database.dbUserPassword;
+	let databaseDbUserPassword;
+
+	generateDbDetails();
+
+	function generateDbDetails() {
+		databaseDefault = database.defaultDatabase;
+		databaseDbUser = database.dbUser;
+		databaseDbUserPassword = database.dbUserPassword;
 		if (database.type === 'mongodb') {
 			databaseDefault = '?readPreference=primary&ssl=false';
 			databaseDbUser = database.rootUser;
@@ -32,7 +45,8 @@
 			databaseDefault = '';
 			databaseDbUser = '';
 		}
-	let databaseUrl = generateUrl();
+	}
+	$: databaseUrl = generateUrl();
 
 	function generateUrl() {
 		return browser
@@ -49,28 +63,46 @@
 	}
 
 	async function changeSettings(name) {
+		if (publicLoading || !isRunning) return;
+		publicLoading = true;
+		let data = {
+			isPublic,
+			appendOnly
+		};
 		if (name === 'isPublic') {
-			isPublic = !isPublic;
+			data.isPublic = !isPublic;
 		}
 		if (name === 'appendOnly') {
-			appendOnly = !appendOnly;
+			data.appendOnly = !appendOnly;
 		}
 		try {
-			const { publicPort } = await post(`/databases/${id}/settings.json`, { isPublic, appendOnly });
+			const { publicPort } = await post(`/databases/${id}/settings.json`, {
+				isPublic: data.isPublic,
+				appendOnly: data.appendOnly
+			});
+			isPublic = data.isPublic;
+			appendOnly = data.appendOnly;
+			databaseUrl = generateUrl();
 			if (isPublic) {
 				database.publicPort = publicPort;
 			}
-			databaseUrl = generateUrl();
 		} catch ({ error }) {
 			return errorNotification(error);
+		} finally {
+			publicLoading = false;
 		}
 	}
 	async function handleSubmit() {
 		try {
-			await post(`/databases/${id}.json`, { ...database });
+			loading = true;
-			return window.location.reload();
+			await post(`/databases/${id}.json`, { ...database, isRunning });
+			generateDbDetails();
+			databaseUrl = generateUrl();
+			toast.push('Settings saved.');
 		} catch ({ error }) {
 			return errorNotification(error);
+		} finally {
+			loading = false;
 		}
 	}
 </script>
@@ -142,21 +174,21 @@
 					readonly
 					disabled
 					name="publicPort"
-					value={isPublic ? database.publicPort : privatePort}
+					value={publicLoading ? 'Loading...' : isPublic ? database.publicPort : privatePort}
 				/>
 			</div>
 		</div>
 		<div class="grid grid-flow-row gap-2">
 			{#if database.type === 'mysql'}
-				<MySql bind:database />
+				<MySql bind:database {isRunning} />
 			{:else if database.type === 'postgresql'}
-				<PostgreSql bind:database />
+				<PostgreSql bind:database {isRunning} />
 			{:else if database.type === 'mongodb'}
-				<MongoDb {database} />
+				<MongoDb bind:database {isRunning} />
 			{:else if database.type === 'redis'}
-				<Redis {database} />
+				<Redis bind:database {isRunning} />
 			{:else if database.type === 'couchdb'}
-				<CouchDb bind:database />
+				<CouchDb {database} />
 			{/if}
 			<div class="grid grid-cols-2 items-center px-10 pb-8">
 				<label for="url" class="text-base font-bold text-stone-100">Connection String</label>
@@ -168,7 +200,7 @@
 					name="url"
 					readonly
 					disabled
-					value={databaseUrl}
+					value={publicLoading || loading ? 'Loading...' : databaseUrl}
 				/>
 			</div>
 		</div>
@@ -179,10 +211,12 @@
 	<div class="px-10 pb-10">
 		<div class="grid grid-cols-2 items-center">
 			<Setting
+				loading={publicLoading}
 				bind:setting={isPublic}
 				on:click={() => changeSettings('isPublic')}
 				title="Set it public"
 				description="Your database will be reachable over the internet. <br>Take security seriously in this case!"
+				disabled={!isRunning}
 			/>
 		</div>
 		{#if database.type === 'redis'}

src/routes/databases/[id]/_Databases/_MongoDB.svelte

@@ -1,6 +1,8 @@
 <script>
 	export let database;
+	export let isRunning;
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
+	import Explainer from '$lib/components/Explainer.svelte';
 </script>
 
 <div class="flex space-x-1 py-5 font-bold">
@@ -21,13 +23,14 @@
 	<div class="grid grid-cols-2 items-center">
 		<label for="rootUserPassword" class="text-base font-bold text-stone-100">Root's Password</label>
 		<CopyPasswordField
+			disabled={!isRunning}
+			readonly={!isRunning}
 			placeholder="Generated automatically after start"
 			isPasswordField={true}
-			readonly
-			disabled
 			id="rootUserPassword"
 			name="rootUserPassword"
-			value={database.rootUserPassword}
+			bind:value={database.rootUserPassword}
 		/>
+		<Explainer text="Could be changed while the database is running." />
 	</div>
 </div>

src/routes/databases/[id]/_Databases/_MySQL.svelte

@@ -1,6 +1,8 @@
 <script>
 	export let database;
+	export let isRunning;
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
+	import Explainer from '$lib/components/Explainer.svelte';
 </script>
 
 <div class="flex space-x-1 py-5 font-bold">
@@ -33,14 +35,15 @@
 	<div class="grid grid-cols-2 items-center">
 		<label for="dbUserPassword" class="text-base font-bold text-stone-100">Password</label>
 		<CopyPasswordField
-			readonly
+			disabled={!isRunning}
-			disabled
+			readonly={!isRunning}
 			placeholder="Generated automatically after start"
 			isPasswordField
 			id="dbUserPassword"
 			name="dbUserPassword"
-			value={database.dbUserPassword}
+			bind:value={database.dbUserPassword}
 		/>
+		<Explainer text="Could be changed while the database is running." />
 	</div>
 	<div class="grid grid-cols-2 items-center">
 		<label for="rootUser" class="text-base font-bold text-stone-100">Root User</label>
@@ -56,13 +59,14 @@
 	<div class="grid grid-cols-2 items-center">
 		<label for="rootUserPassword" class="text-base font-bold text-stone-100">Root's Password</label>
 		<CopyPasswordField
-			readonly
+			disabled={!isRunning}
-			disabled
+			readonly={!isRunning}
 			placeholder="Generated automatically after start"
 			isPasswordField
 			id="rootUserPassword"
 			name="rootUserPassword"
-			value={database.rootUserPassword}
+			bind:value={database.rootUserPassword}
 		/>
+		<Explainer text="Could be changed while the database is running." />
 	</div>
 </div>

src/routes/databases/[id]/_Databases/_PostgreSQL.svelte

@@ -1,6 +1,8 @@
 <script>
 	export let database;
+	export let isRunning;
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
+	import Explainer from '$lib/components/Explainer.svelte';
 </script>
 
 <div class="flex space-x-1 py-5 font-bold">
@@ -33,13 +35,14 @@
 	<div class="grid grid-cols-2 items-center">
 		<label for="dbUserPassword" class="text-base font-bold text-stone-100">Password</label>
 		<CopyPasswordField
-			readonly
+			disabled={!isRunning}
-			disabled
+			readonly={!isRunning}
 			placeholder="Generated automatically after start"
 			isPasswordField
 			id="dbUserPassword"
 			name="dbUserPassword"
-			value={database.dbUserPassword}
+			bind:value={database.dbUserPassword}
 		/>
+		<Explainer text="Could be changed while the database is running." />
 	</div>
 </div>

src/routes/databases/[id]/_Databases/_Redis.svelte

@@ -1,6 +1,8 @@
 <script>
 	export let database;
+	export let isRunning;
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
+	import Explainer from '$lib/components/Explainer.svelte';
 </script>
 
 <div class="flex space-x-1 py-5 font-bold">
@@ -10,40 +12,14 @@
 	<div class="grid grid-cols-2 items-center">
 		<label for="dbUserPassword" class="text-base font-bold text-stone-100">Password</label>
 		<CopyPasswordField
-			disabled
+			disabled={!isRunning}
-			readonly
+			readonly={!isRunning}
 			placeholder="Generated automatically after start"
 			isPasswordField
 			id="dbUserPassword"
 			name="dbUserPassword"
-			value={database.dbUserPassword}
+			bind:value={database.dbUserPassword}
-		/>
-	</div>
-	<!-- <div class="grid grid-cols-3 items-center">
-		<label for="rootUser">Root User</label>
-		<div class="col-span-2 ">
-			<CopyPasswordField
-				disabled
-				readonly
-				placeholder="Generated automatically after start"
-				id="rootUser"
-				name="rootUser"
-				value={database.rootUser}
 		/>
+		<Explainer text="Could be changed while the database is running." />
 	</div>
 </div>
-	<div class="grid grid-cols-3 items-center">
-		<label for="rootUserPassword">Root's Password</label>
-		<div class="col-span-2 ">
-			<CopyPasswordField
-				disabled
-				readonly
-				placeholder="Generated automatically after start"
-				isPasswordField
-				id="rootUserPassword"
-				name="rootUserPassword"
-				value={database.rootUserPassword}
-			/>
-		</div>
-	</div> -->
-</div>

src/routes/databases/[id]/__layout.svelte

@@ -15,7 +15,7 @@
 		const endpoint = `/databases/${params.id}.json`;
 		const res = await fetch(endpoint);
 		if (res.ok) {
-			const { database, state, versions, privatePort, settings } = await res.json();
+			const { database, isRunning, versions, privatePort, settings } = await res.json();
 			if (!database || Object.entries(database).length === 0) {
 				return {
 					status: 302,
@@ -35,13 +35,13 @@
 			return {
 				props: {
 					database,
-					state,
+					isRunning,
 					versions,
 					privatePort
 				},
 				stuff: {
 					database,
-					state,
+					isRunning,
 					versions,
 					privatePort,
 					settings
@@ -65,7 +65,7 @@
 	import { goto } from '$app/navigation';
 
 	export let database;
-	export let state;
+	export let isRunning;
 	let loading = false;
 
 	async function deleteDatabase() {
@@ -91,8 +91,6 @@
 				return window.location.reload();
 			} catch ({ error }) {
 				return errorNotification(error);
-			} finally {
-				loading = false;
 			}
 		}
 	}
@@ -103,8 +101,6 @@
 			return window.location.reload();
 		} catch ({ error }) {
 			return errorNotification(error);
-		} finally {
-			loading = false;
 		}
 	}
 </script>
@@ -114,7 +110,7 @@
 		<Loading fullscreen cover />
 	{:else}
 		{#if database.type && database.destinationDockerId && database.version && database.defaultDatabase}
-			{#if state === 'running'}
+			{#if isRunning}
 				<button
 					on:click={stopDatabase}
 					title="Stop database"
@@ -140,7 +136,7 @@
 						<rect x="14" y="5" width="4" height="14" rx="1" />
 					</svg>
 				</button>
-			{:else if state === 'not started'}
+			{:else}
 				<button
 					on:click={startDatabase}
 					title="Start database"

src/routes/databases/[id]/index.json.ts

@@ -1,6 +1,11 @@
 import { asyncExecShell, getEngine, getUserDetails } from '$lib/common';
 import * as db from '$lib/database';
-import { generateDatabaseConfiguration, getVersions, ErrorHandler } from '$lib/database';
+import {
+	generateDatabaseConfiguration,
+	getVersions,
+	ErrorHandler,
+	updatePasswordInDb
+} from '$lib/database';
 import type { RequestHandler } from '@sveltejs/kit';
 
 export const get: RequestHandler = async (event) => {
@@ -12,7 +17,7 @@ export const get: RequestHandler = async (event) => {
 		const database = await db.getDatabase({ id, teamId });
 		const { destinationDockerId, destinationDocker } = database;
 
-		let state = 'not started';
+		let isRunning = false;
 		if (destinationDockerId) {
 			const host = getEngine(destinationDocker.engine);
 
@@ -22,7 +27,7 @@ export const get: RequestHandler = async (event) => {
 				);
 
 				if (JSON.parse(stdout).Running) {
-					state = 'running';
+					isRunning = true;
 				}
 			} catch (error) {
 				//
@@ -34,7 +39,7 @@ export const get: RequestHandler = async (event) => {
 			body: {
 				privatePort: configuration?.privatePort,
 				database,
-				state,
+				isRunning,
 				versions: getVersions(database.type),
 				settings
 			}
@@ -48,10 +53,26 @@ export const post: RequestHandler = async (event) => {
 	const { teamId, status, body } = await getUserDetails(event);
 	if (status === 401) return { status, body };
 	const { id } = event.params;
-	const { name, defaultDatabase, dbUser, dbUserPassword, rootUser, rootUserPassword, version } =
+	const {
-		await event.request.json();
+		name,
+		defaultDatabase,
+		dbUser,
+		dbUserPassword,
+		rootUser,
+		rootUserPassword,
+		version,
+		isRunning
+	} = await event.request.json();
 
 	try {
+		const database = await db.getDatabase({ id, teamId });
+		if (isRunning) {
+			if (database.dbUserPassword !== dbUserPassword) {
+				await updatePasswordInDb(database, dbUser, dbUserPassword);
+			} else if (database.rootUserPassword !== rootUserPassword) {
+				await updatePasswordInDb(database, rootUser, rootUserPassword);
+			}
+		}
 		await db.updateDatabase({
 			id,
 			name,

src/routes/databases/[id]/index.svelte

@@ -8,7 +8,8 @@
 					database: stuff.database,
 					versions: stuff.versions,
 					privatePort: stuff.privatePort,
-					settings: stuff.settings
+					settings: stuff.settings,
+					isRunning: stuff.isRunning
 				}
 			};
 		}
@@ -35,6 +36,7 @@
 	export let database;
 	export let settings;
 	export let privatePort;
+	export let isRunning;
 </script>
 
 <div class="flex items-center space-x-2 p-6 text-2xl font-bold">
@@ -47,4 +49,4 @@
 	<DatabaseLinks {database} />
 </div>
 
-<Databases bind:database {privatePort} {settings} />
+<Databases bind:database {privatePort} {settings} {isRunning} />

src/routes/destinations/[id]/_LocalDocker.svelte

@@ -12,8 +12,8 @@
 	import { onMount } from 'svelte';
 	const { id } = $page.params;
 	let cannotDisable = settings.fqdn && destination.engine === '/var/run/docker.sock';
-	// let scannedApps = [];
 	let loading = false;
+	let loadingProxy = false;
 	let restarting = false;
 	async function handleSubmit() {
 		loading = true;
@@ -25,12 +25,6 @@
 			loading = false;
 		}
 	}
-	// async function scanApps() {
-	// 	scannedApps = [];
-	// 	const data = await fetch(`/destinations/${id}/scan.json`);
-	// 	const { containers } = await data.json();
-	// 	scannedApps = containers;
-	// }
 	onMount(async () => {
 		if (state === false && destination.isCoolifyProxyUsed === true) {
 			destination.isCoolifyProxyUsed = !destination.isCoolifyProxyUsed;
@@ -71,6 +65,7 @@
 			}
 			destination.isCoolifyProxyUsed = !destination.isCoolifyProxyUsed;
 			try {
+				loadingProxy = true;
 				await post(`/destinations/${id}/settings.json`, {
 					isCoolifyProxyUsed: destination.isCoolifyProxyUsed,
 					engine: destination.engine
@@ -82,6 +77,8 @@
 				}
 			} catch ({ error }) {
 				return errorNotification(error);
+			} finally {
+				loadingProxy = false;
 			}
 		}
 	}
@@ -187,6 +184,7 @@
 	{#if $session.teamId === '0'}
 		<div class="grid grid-cols-2 items-center">
 			<Setting
+				loading={loadingProxy}
 				disabled={cannotDisable}
 				bind:setting={destination.isCoolifyProxyUsed}
 				on:click={changeProxySetting}