fix: traefik config + ui + api

apps/api/src/routes/api/v1/applications/handlers.ts

@@ -398,7 +398,9 @@ export async function saveApplication(
 			dockerComposeFileLocation,
 			dockerComposeConfiguration,
 			simpleDockerfile,
-			dockerRegistryImageName
+			dockerRegistryImageName,
+			basicAuthPw,
+			basicAuthUser,
 		} = request.body;
 		if (port) port = Number(port);
 		if (exposePort) {
@@ -453,6 +455,8 @@ export async function saveApplication(
 					dockerComposeConfiguration,
 					simpleDockerfile,
 					dockerRegistryImageName,
+					basicAuthPw,
+					basicAuthUser,
 					...defaultConfiguration,
 					connectedDatabase: { update: { hostedDatabaseDBName: baseDatabaseBranch } }
 				}
@@ -476,6 +480,8 @@ export async function saveApplication(
 					dockerComposeFileLocation,
 					dockerComposeConfiguration,
 					simpleDockerfile,
+					basicAuthPw,
+					basicAuthUser,
 					dockerRegistryImageName,
 					...defaultConfiguration
 				}
@@ -499,22 +505,16 @@ export async function saveApplicationSettings(
 			previews,
 			dualCerts,
 			autodeploy,
-			branch,
-			projectId,
 			isBot,
 			isDBBranching,
 			isCustomSSL,
 			isHttp2,
 			basicAuth,
-			basicAuthUser,
-			basicAuthPw
 		} = request.body;
 		await prisma.application.update({
 			where: { id },
 			data: {
 				fqdn: isBot ? null : undefined,
-				basicAuthUser,
-				basicAuthPw,
 				settings: {
 					update: {
 						debug,

apps/api/src/routes/api/v1/applications/types.ts

@@ -28,6 +28,8 @@ export interface SaveApplication extends OnlyId {
 		dockerComposeConfiguration: string;
 		simpleDockerfile: string;
 		dockerRegistryImageName: string;
+		basicAuthPw: string;
+		basicAuthUser: string;
 	};
 }
 export interface SaveApplicationSettings extends OnlyId {
@@ -44,8 +46,6 @@ export interface SaveApplicationSettings extends OnlyId {
 		isCustomSSL: boolean;
 		isHttp2: boolean;
 		basicAuth: boolean;
-		basicAuthUser: string;
-		basicAuthPw: string;
 	};
 }
 export interface DeleteApplication extends OnlyId {

apps/api/src/routes/api/v1/handlers.ts

@@ -19,8 +19,7 @@ import type { FastifyReply, FastifyRequest } from 'fastify';
 import type { Login, Update } from '.';
 import type { GetCurrentUser } from './types';
 
-export async function hashPassword(password: string): Promise<string> {
+export async function hashPassword(password: string, saltRounds = 15): Promise<string> {
-	const saltRounds = 15;
 	return bcrypt.hash(password, saltRounds);
 }
 
@@ -77,7 +76,7 @@ export async function refreshTags() {
 							tags = JSON.parse(tags).concat(JSON.parse(testTags));
 						}
 					}
-				} catch (error) {}
+				} catch (error) { }
 				await fs.writeFile('./tags.json', tags);
 			} else {
 				const tags = await got.get('https://get.coollabs.io/coolify/service-tags.json').text();
@@ -102,7 +101,7 @@ export async function refreshTemplates() {
 					if (await fs.stat('./testTemplate.yaml')) {
 						templates = templates + (await fs.readFile('./testTemplate.yaml', 'utf8'));
 					}
-				} catch (error) {}
+				} catch (error) { }
 				const response = await fs.readFile('./devTemplates.yaml', 'utf8');
 				await fs.writeFile('./templates.json', JSON.stringify(yaml.load(response)));
 			} else {

apps/api/src/routes/webhooks/traefik/handlers.ts

@@ -3,6 +3,7 @@ import { errorHandler, executeCommand, getDomain, isDev, prisma } from '../../..
 import { getTemplates } from '../../../lib/services';
 import { OnlyId } from '../../../types';
 import { parseAndFindServiceTemplates } from '../../api/v1/services/handlers';
+import { hashPassword } from '../../api/v1/handlers';
 
 function generateServices(serviceId, containerId, port, isHttp2 = false, isHttps = false) {
 	if (isHttp2) {
@@ -39,7 +40,7 @@ function generateServices(serviceId, containerId, port, isHttp2 = false, isHttps
 		}
 	};
 }
-function generateRouters(
+async function generateRouters(
 	serviceId,
 	domain,
 	nakedDomain,
@@ -50,19 +51,12 @@ function generateRouters(
 	isCustomSSL,
 	isHttp2 = false,
 	basicAuth = false,
-	basicAuthUser = '',
+	httpBasicAuth = null
-	basicAuthPw = ''
 ) {
 	const rule = `Host(\`${nakedDomain}\`)${pathPrefix ? ` && PathPrefix(\`${pathPrefix}\`)` : ''}`;
-	const ruleWWW = `Host(\`www.${nakedDomain}\`)${
+	const ruleWWW = `Host(\`www.${nakedDomain}\`)${pathPrefix ? ` && PathPrefix(\`${pathPrefix}\`)` : ''
-		pathPrefix ? ` && PathPrefix(\`${pathPrefix}\`)` : ''
+		}`;
-	}`;
 
-	const httpBasicAuth: any = {
-		basicauth: {
-			users: [Buffer.from(basicAuthUser + ':' + basicAuthPw).toString('base64')]
-		}
-	};
 
 	const http: any = {
 		entrypoints: ['web'],
@@ -233,10 +227,6 @@ function generateRouters(
 		[`${serviceId}-${pathPrefix}-secure-www`]: { ...httpsWWW }
 	};
 
-	if (basicAuth) {
-		result[`${serviceId}-${pathPrefix}-basic-auth`] = { ...httpBasicAuth };
-	}
-
 	return result;
 }
 export async function proxyConfiguration(request: FastifyRequest<OnlyId>, remote = false) {
@@ -418,6 +408,12 @@ export async function proxyConfiguration(request: FastifyRequest<OnlyId>, remote
 					) {
 						continue;
 					}
+					const httpBasicAuth: any = {
+						basicAuth: {
+							users: [basicAuthUser + ':' + await hashPassword(basicAuthPw, 1)]
+						}
+					};
+
 					if (buildPack === 'compose') {
 						const services = Object.entries(JSON.parse(dockerComposeConfiguration));
 						if (services.length > 0) {
@@ -440,7 +436,7 @@ export async function proxyConfiguration(request: FastifyRequest<OnlyId>, remote
 
 									traefik.http.routers = {
 										...traefik.http.routers,
-										...generateRouters(
+										...await generateRouters(
 											serviceId,
 											domain,
 											nakedDomain,
@@ -448,13 +444,19 @@ export async function proxyConfiguration(request: FastifyRequest<OnlyId>, remote
 											isHttps,
 											isWWW,
 											dualCerts,
-											isCustomSSL
+											isCustomSSL,
+											httpBasicAuth
 										)
 									};
 									traefik.http.services = {
 										...traefik.http.services,
 										...generateServices(serviceId, containerId, port)
 									};
+									if (application.settings.basicAuth) {
+										traefik.http.middlewares[`${serviceId}-${pathPrefix}-basic-auth`] = {
+											...httpBasicAuth
+										};
+									}
 								}
 							}
 						}
@@ -473,7 +475,7 @@ export async function proxyConfiguration(request: FastifyRequest<OnlyId>, remote
 					const serviceId = `${id}-${port || 'default'}`;
 					traefik.http.routers = {
 						...traefik.http.routers,
-						...generateRouters(
+						...await generateRouters(
 							serviceId,
 							domain,
 							nakedDomain,
@@ -484,14 +486,18 @@ export async function proxyConfiguration(request: FastifyRequest<OnlyId>, remote
 							isCustomSSL,
 							isHttp2,
 							basicAuth,
-							basicAuthUser,
+							httpBasicAuth
-							basicAuthPw
 						)
 					};
 					traefik.http.services = {
 						...traefik.http.services,
 						...generateServices(serviceId, id, port, isHttp2, isHttps)
 					};
+					if (application.settings.basicAuth) {
+						traefik.http.middlewares[`${serviceId}-${pathPrefix}-basic-auth`] = {
+							...httpBasicAuth
+						};
+					}
 					if (previews) {
 						const { stdout } = await executeCommand({
 							dockerId,
@@ -505,15 +511,14 @@ export async function proxyConfiguration(request: FastifyRequest<OnlyId>, remote
 								.map((c) => c.replace(/"/g, ''));
 							if (containers.length > 0) {
 								for (const container of containers) {
-									const previewDomain = `${container.split('-')[1]}${
+									const previewDomain = `${container.split('-')[1]}${coolifySettings.previewSeparator
-										coolifySettings.previewSeparator
+										}${domain}`;
-									}${domain}`;
 									const nakedDomain = previewDomain.replace(/^www\./, '');
 									const pathPrefix = '/';
 									const serviceId = `${container}-${port || 'default'}`;
 									traefik.http.routers = {
 										...traefik.http.routers,
-										...generateRouters(
+										...await generateRouters(
 											serviceId,
 											previewDomain,
 											nakedDomain,
@@ -524,14 +529,18 @@ export async function proxyConfiguration(request: FastifyRequest<OnlyId>, remote
 											isCustomSSL,
 											false,
 											basicAuth,
-											basicAuthUser,
+											httpBasicAuth
-											basicAuthPw
 										)
 									};
 									traefik.http.services = {
 										...traefik.http.services,
 										...generateServices(serviceId, container, port, isHttp2)
 									};
+									if (application.settings.basicAuth) {
+										traefik.http.middlewares[`${serviceId}-${pathPrefix}-basic-auth`] = {
+											...httpBasicAuth
+										};
+									}
 								}
 							}
 						}
@@ -625,7 +634,7 @@ export async function proxyConfiguration(request: FastifyRequest<OnlyId>, remote
 								const serviceId = `${oneService}-${port || 'default'}`;
 								traefik.http.routers = {
 									...traefik.http.routers,
-									...generateRouters(
+									...await generateRouters(
 										serviceId,
 										domain,
 										nakedDomain,
@@ -633,7 +642,7 @@ export async function proxyConfiguration(request: FastifyRequest<OnlyId>, remote
 										isHttps,
 										isWWW,
 										dualCerts,
-										isCustomSSL
+										isCustomSSL,
 									)
 								};
 								traefik.http.services = {
@@ -662,7 +671,7 @@ export async function proxyConfiguration(request: FastifyRequest<OnlyId>, remote
 									const serviceId = `${oneService}-${port || 'default'}`;
 									traefik.http.routers = {
 										...traefik.http.routers,
-										...generateRouters(
+										...await generateRouters(
 											serviceId,
 											domain,
 											nakedDomain,
@@ -703,7 +712,7 @@ export async function proxyConfiguration(request: FastifyRequest<OnlyId>, remote
 			const serviceId = `${id}-${port || 'default'}`;
 			traefik.http.routers = {
 				...traefik.http.routers,
-				...generateRouters(
+				...await generateRouters(
 					serviceId,
 					domain,
 					nakedDomain,

apps/ui/src/routes/applications/[id]/index.svelte

@@ -36,6 +36,7 @@
 	import Beta from '$lib/components/Beta.svelte';
 	import Explainer from '$lib/components/Explainer.svelte';
 	import Setting from '$lib/components/Setting.svelte';
+	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
 	import {
 		addToast,
 		appSession,
@@ -215,9 +216,7 @@
 				isHttp2,
 				branch: application.branch,
 				projectId: application.projectId,
-				basicAuth,
+				basicAuth
-				basicAuthUser: application.basicAuthUser,
-				basicAuthPw: application.basicAuthPw
 			});
 			return addToast({
 				message: $t('application.settings_saved'),
@@ -282,6 +281,7 @@
 					}
 				}
 			}
+			console.log(application);
 			await saveForm(id, application, baseDatabaseBranch, dockerComposeConfiguration);
 			setLocation(application, settings);
 			$isDeploymentEnabled = checkIfDeploymentEnabledApplications(application);
@@ -762,55 +762,6 @@
 						/>
 					</div>
 
-					<div class="grid grid-cols-2 items-center">
-						<Setting
-							id="basicAuth"
-							dataTooltip={$t('forms.must_be_stopped_to_modify')}
-							disabled={isDisabled}
-							isCenter={false}
-							bind:setting={basicAuth}
-							title={$t('application.basic_auth')}
-							description="Activate basic authentication for your application. <br>Useful if you want to protect your application with a password. <br><br>Use the <span class='font-bold text-settings'>username</span> and <span class='font-bold text-settings'>password</span> fields to set the credentials."
-							on:click={() => !isDisabled && changeSettings('basicAuth')}
-						/>
-					</div>
-
-					{#if basicAuth}
-						<div class="grid grid-cols-2 items-center">
-							<label for="basicAuthUser">{$t('application.basic_auth_user')}</label>
-							<input
-								bind:this={fqdnEl}
-								class="w-full"
-								required={!application.settings?.basicAuth}
-								readonly={isDisabled}
-								disabled={isDisabled}
-								name="basicAuthUser"
-								id="basicAuthUser"
-								class:border={!application.settings?.basicAuth && !application.basicAuthUser}
-								class:border-red-500={!application.settings?.basicAuth &&
-									!application.basicAuthUser}
-								bind:value={application.basicAuthUser}
-								placeholder="eg: admin"
-							/>
-						</div>
-						<div class="grid grid-cols-2 items-center">
-							<label for="basicAuthPw">{$t('application.basic_auth_pw')}</label>
-							<input
-								bind:this={fqdnEl}
-								class="w-full"
-								required={!application.settings?.basicAuth}
-								readonly={isDisabled}
-								disabled={isDisabled}
-								name="basicAuthPw"
-								id="basicAuthPw"
-								class:border={!application.settings?.basicAuth && !application.basicAuthPw}
-								class:border-red-500={!application.settings?.basicAuth && !application.basicAuthPw}
-								bind:value={application.basicAuthPw}
-								placeholder="**********"
-							/>
-						</div>
-					{/if}
-
 					{#if isHttps && application.buildPack !== 'compose'}
 						<div class="grid grid-cols-2 items-center pb-4">
 							<Setting
@@ -833,6 +784,46 @@
 							on:click={() => changeSettings('isHttp2')}
 						/>
 					</div>
+					<div class="grid grid-cols-2 items-center">
+						<Setting
+							id="basicAuth"
+							isCenter={false}
+							bind:setting={basicAuth}
+							title={$t('application.basic_auth')}
+							description="Activate basic authentication for your application. <br>Useful if you want to protect your application with a password. <br><br>Use the <span class='font-bold text-settings'>username</span> and <span class='font-bold text-settings'>password</span> fields to set the credentials."
+							on:click={() => changeSettings('basicAuth')}
+						/>
+					</div>
+
+					{#if basicAuth}
+						<div class="grid grid-cols-2 items-center">
+							<label for="basicAuthUser">{$t('application.basic_auth_user')}</label>
+							<input
+								bind:this={fqdnEl}
+								class="w-full"
+								required={!application.settings?.basicAuth}
+								name="basicAuthUser"
+								id="basicAuthUser"
+								class:border={!application.settings?.basicAuth && !application.basicAuthUser}
+								class:border-red-500={!application.settings?.basicAuth &&
+									!application.basicAuthUser}
+								bind:value={application.basicAuthUser}
+								placeholder="eg: admin"
+							/>
+						</div>
+						<div class="grid grid-cols-2 items-center">
+							<label for="basicAuthPw">{$t('application.basic_auth_pw')}</label>
+							<CopyPasswordField
+								bind:this={fqdnEl}
+								isPasswordField={true}
+								required={!application.settings?.basicAuth}
+								name="basicAuthPw"
+								id="basicAuthPw"
+								bind:value={application.basicAuthPw}
+								placeholder="**********"
+							/>
+						</div>
+					{/if}
 				{/if}
 			</div>
 			{#if isSimpleDockerfile}