ui: fixes
This commit is contained in:
Andras Bacsai
parent
4abe9c6fb2
commit
2d8888ae9b
@ -348,7 +348,6 @@ export function setDefaultBaseImage(buildPack: string | null, deploymentType: st
|
||||
if (buildPack === 'heroku') {
|
||||
payload.baseImage = 'heroku/buildpacks:20';
|
||||
payload.baseImages = herokuVersions;
|
||||
|
||||
}
|
||||
return payload;
|
||||
}
|
||||
|
||||
@ -195,6 +195,7 @@ export function findBuildPack(pack: string, packageManager = 'npm') {
|
||||
export const buildPacks = [
|
||||
{
|
||||
name: 'node',
|
||||
type: 'base',
|
||||
fancyName: 'Node.js',
|
||||
hoverColor: 'hover:bg-green-700',
|
||||
color: 'bg-green-700',
|
||||
@ -202,6 +203,7 @@ export const buildPacks = [
|
||||
},
|
||||
{
|
||||
name: 'static',
|
||||
type: 'base',
|
||||
fancyName: 'Static',
|
||||
hoverColor: 'hover:bg-orange-700',
|
||||
color: 'bg-orange-700',
|
||||
@ -210,6 +212,7 @@ export const buildPacks = [
|
||||
|
||||
{
|
||||
name: 'php',
|
||||
type: 'base',
|
||||
fancyName: 'PHP',
|
||||
hoverColor: 'hover:bg-indigo-700',
|
||||
color: 'bg-indigo-700',
|
||||
@ -217,6 +220,8 @@ export const buildPacks = [
|
||||
},
|
||||
{
|
||||
name: 'laravel',
|
||||
type: 'specific',
|
||||
base: 'php',
|
||||
fancyName: 'Laravel',
|
||||
hoverColor: 'hover:bg-indigo-700',
|
||||
color: 'bg-indigo-700',
|
||||
@ -224,6 +229,7 @@ export const buildPacks = [
|
||||
},
|
||||
{
|
||||
name: 'docker',
|
||||
type: 'base',
|
||||
fancyName: 'Docker',
|
||||
hoverColor: 'hover:bg-sky-700',
|
||||
color: 'bg-sky-700',
|
||||
@ -231,6 +237,8 @@ export const buildPacks = [
|
||||
},
|
||||
{
|
||||
name: 'svelte',
|
||||
type: 'specific',
|
||||
base: 'node',
|
||||
fancyName: 'Svelte',
|
||||
hoverColor: 'hover:bg-orange-700',
|
||||
color: 'bg-orange-700',
|
||||
@ -238,6 +246,8 @@ export const buildPacks = [
|
||||
},
|
||||
{
|
||||
name: 'vuejs',
|
||||
type: 'specific',
|
||||
base: 'node',
|
||||
fancyName: 'VueJS',
|
||||
hoverColor: 'hover:bg-green-700',
|
||||
color: 'bg-green-700',
|
||||
@ -245,6 +255,8 @@ export const buildPacks = [
|
||||
},
|
||||
{
|
||||
name: 'nuxtjs',
|
||||
type: 'specific',
|
||||
base: 'node',
|
||||
fancyName: 'NuxtJS',
|
||||
hoverColor: 'hover:bg-green-700',
|
||||
color: 'bg-green-700',
|
||||
@ -252,6 +264,8 @@ export const buildPacks = [
|
||||
},
|
||||
{
|
||||
name: 'gatsby',
|
||||
type: 'specific',
|
||||
base: 'node',
|
||||
fancyName: 'Gatsby',
|
||||
hoverColor: 'hover:bg-blue-700',
|
||||
color: 'bg-blue-700',
|
||||
@ -259,6 +273,8 @@ export const buildPacks = [
|
||||
},
|
||||
{
|
||||
name: 'astro',
|
||||
type: 'specific',
|
||||
base: 'node',
|
||||
fancyName: 'Astro',
|
||||
hoverColor: 'hover:bg-pink-700',
|
||||
color: 'bg-pink-700',
|
||||
@ -266,14 +282,17 @@ export const buildPacks = [
|
||||
},
|
||||
{
|
||||
name: 'eleventy',
|
||||
type: 'specific',
|
||||
base: 'node',
|
||||
fancyName: 'Eleventy',
|
||||
hoverColor: 'hover:bg-red-700',
|
||||
color: 'bg-red-700',
|
||||
isCoolifyBuildPack: true,
|
||||
},
|
||||
|
||||
{
|
||||
name: 'react',
|
||||
type: 'specific',
|
||||
base: 'node',
|
||||
fancyName: 'React',
|
||||
hoverColor: 'hover:bg-blue-700',
|
||||
color: 'bg-blue-700',
|
||||
@ -281,6 +300,8 @@ export const buildPacks = [
|
||||
},
|
||||
{
|
||||
name: 'preact',
|
||||
type: 'specific',
|
||||
base: 'node',
|
||||
fancyName: 'Preact',
|
||||
hoverColor: 'hover:bg-blue-700',
|
||||
color: 'bg-blue-700',
|
||||
@ -288,6 +309,8 @@ export const buildPacks = [
|
||||
},
|
||||
{
|
||||
name: 'nextjs',
|
||||
type: 'specific',
|
||||
base: 'node',
|
||||
fancyName: 'NextJS',
|
||||
hoverColor: 'hover:bg-blue-700',
|
||||
color: 'bg-blue-700',
|
||||
@ -295,6 +318,8 @@ export const buildPacks = [
|
||||
},
|
||||
{
|
||||
name: 'nestjs',
|
||||
type: 'specific',
|
||||
base: 'node',
|
||||
fancyName: 'NestJS',
|
||||
hoverColor: 'hover:bg-red-700',
|
||||
color: 'bg-red-700',
|
||||
@ -302,6 +327,7 @@ export const buildPacks = [
|
||||
},
|
||||
{
|
||||
name: 'rust',
|
||||
type: 'base',
|
||||
fancyName: 'Rust',
|
||||
hoverColor: 'hover:bg-pink-700',
|
||||
color: 'bg-pink-700',
|
||||
@ -309,6 +335,7 @@ export const buildPacks = [
|
||||
},
|
||||
{
|
||||
name: 'python',
|
||||
type: 'base',
|
||||
fancyName: 'Python',
|
||||
hoverColor: 'hover:bg-green-700',
|
||||
color: 'bg-green-700',
|
||||
@ -316,6 +343,7 @@ export const buildPacks = [
|
||||
},
|
||||
{
|
||||
name: 'deno',
|
||||
type: 'base',
|
||||
fancyName: 'Deno',
|
||||
hoverColor: 'hover:bg-green-700',
|
||||
color: 'bg-green-700',
|
||||
@ -323,6 +351,7 @@ export const buildPacks = [
|
||||
},
|
||||
{
|
||||
name: 'heroku',
|
||||
type: 'base',
|
||||
fancyName: 'Heroku',
|
||||
hoverColor: 'hover:bg-purple-700',
|
||||
color: 'bg-purple-700',
|
||||
|
||||
@ -218,9 +218,10 @@
|
||||
</li>
|
||||
<li
|
||||
class="rounded"
|
||||
class:text-stone-600={!$status.application.isRunning}
|
||||
class:bg-coollabs={$page.url.pathname === `/applications/${$page.params.id}/usage`}
|
||||
>
|
||||
<a href={`/applications/${$page.params.id}/usage`} class="no-underline w-full"
|
||||
<a href={$status.application.isRunning ? `/applications/${$page.params.id}/usage` : ''} class="no-underline w-full"
|
||||
><svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-6"
|
||||
|
||||
@ -175,9 +175,11 @@
|
||||
<nav class="header flex flex-row order-2 lg:order-1 px-0 lg:px-4">
|
||||
<div class="title lg:pb-10">
|
||||
{#if $page.url.pathname === `/applications/${id}/configuration/source`}
|
||||
Select a Git Source
|
||||
Select a Source
|
||||
{:else if $page.url.pathname === `/applications/${id}/configuration/destination`}
|
||||
Select a Destination
|
||||
{:else if $page.url.pathname === `/applications/${id}/configuration/repository`}
|
||||
Select a Repository
|
||||
{:else if $page.url.pathname === `/applications/${id}/configuration/buildpack`}
|
||||
Select a Build Pack
|
||||
{:else}
|
||||
@ -319,14 +321,15 @@
|
||||
</button>
|
||||
<Tooltip triggeredBy="#forceredeploy">Force Redeploy (without cache)</Tooltip>
|
||||
{:else}
|
||||
{#if $isDeploymentEnabled}
|
||||
<button
|
||||
class="icons bg-applications hover:bg-green-500 flex items-center font-bold"
|
||||
class="icons flex items-center font-bold"
|
||||
disabled={!$isDeploymentEnabled}
|
||||
on:click={() => handleDeploySubmit(false)}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-6 mr-2"
|
||||
class="w-6 h-6 mr-2 text-green-500"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
@ -337,8 +340,9 @@
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M7 4v16l13 -8z" />
|
||||
</svg>
|
||||
Build & Deploy
|
||||
Deploy
|
||||
</button>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
{#if $location && $status.application.isRunning}
|
||||
@ -363,10 +367,15 @@
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mx-auto max-w-screen-2xl px-0 lg:px-2 grid grid-cols-1 lg:grid-cols-4">
|
||||
<nav class="header flex flex-col lg:pt-0 ">
|
||||
<Menu {application} />
|
||||
</nav>
|
||||
<div
|
||||
class="mx-auto max-w-screen-2xl px-0 lg:px-2 grid grid-cols-1"
|
||||
class:lg:grid-cols-4={!$page.url.pathname.startsWith(`/applications/${id}/configuration/`)}
|
||||
>
|
||||
{#if !$page.url.pathname.startsWith(`/applications/${id}/configuration/`)}
|
||||
<nav class="header flex flex-col lg:pt-0 ">
|
||||
<Menu {application} />
|
||||
</nav>
|
||||
{/if}
|
||||
<div class="pt-0 col-span-0 lg:col-span-3 pb-24">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
@ -40,9 +40,13 @@
|
||||
<form on:submit|preventDefault={() => handleSubmit(buildPack.name)}>
|
||||
<button
|
||||
type="submit"
|
||||
class="box-selection relative flex text-xl font-bold {buildPack.hoverColor} {foundConfig?.name ===
|
||||
class="box-selection relative flex flex-col items-center text-xl font-bold {buildPack.hoverColor} {foundConfig?.name ===
|
||||
buildPack.name && buildPack.color}"
|
||||
><span>{buildPack.fancyName}</span>
|
||||
>
|
||||
<div>{buildPack.fancyName}</div>
|
||||
{#if buildPack.base}
|
||||
<div class="text-xs font-mono">{buildPack.base}</div>
|
||||
{/if}
|
||||
{#if !scanning && foundConfig?.name === buildPack.name}
|
||||
<span class="absolute bottom-0 pb-2 text-xs"
|
||||
>{$t('application.configuration.buildpack.choose_this_one')}</span
|
||||
|
||||
@ -143,7 +143,6 @@
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if repositories.length === 0 && loading.repositories === false}
|
||||
<div class="flex-col text-center">
|
||||
<div class="pb-4">{$t('application.configuration.no_repositories_configured')}</div>
|
||||
@ -152,10 +151,9 @@
|
||||
>
|
||||
</div>
|
||||
{:else}
|
||||
<form on:submit|preventDefault={handleSubmit} class="flex flex-col justify-center text-center">
|
||||
<div class="flex-col space-y-3 md:space-y-0 space-x-1">
|
||||
<div class="flex-row md:flex gap-4">
|
||||
<div class="custom-select-wrapper">
|
||||
<form on:submit|preventDefault={handleSubmit} class="px-10">
|
||||
<div class="flex lg:flex-row flex-col lg:space-y-0 space-y-2 space-x-0 lg:space-x-2 items-center">
|
||||
<div class="custom-select-wrapper w-1/2"><label for="repository" class="pb-1">Repository</label>
|
||||
<Select
|
||||
placeholder={loading.repositories
|
||||
? $t('application.configuration.loading_repositories')
|
||||
@ -170,7 +168,7 @@
|
||||
/>
|
||||
</div>
|
||||
<input class="hidden" bind:value={selected.projectId} name="projectId" />
|
||||
<div class="custom-select-wrapper">
|
||||
<div class="custom-select-wrapper w-1/2"><label for="repository" class="pb-1">Branch</label>
|
||||
<Select
|
||||
placeholder={loading.branches
|
||||
? $t('application.configuration.loading_branches')
|
||||
@ -185,9 +183,7 @@
|
||||
isDisabled={loading.branches || !selected.repository}
|
||||
isClearable={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></div>
|
||||
<div class="pt-5 flex-col flex justify-center items-center space-y-4">
|
||||
<button
|
||||
class="btn btn-wide"
|
||||
|
||||
@ -21,6 +21,7 @@
|
||||
};
|
||||
async function loadBranches() {
|
||||
try {
|
||||
if (!publicRepositoryLink) return
|
||||
loading.branches = true;
|
||||
publicRepositoryLink = publicRepositoryLink.trim();
|
||||
const protocol = publicRepositoryLink.split(':')[0];
|
||||
@ -156,40 +157,36 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="mx-auto max-w-6xl">
|
||||
<form
|
||||
class="flex flex-col lg:flex-row w-full lg:px-32 space-y-5 lg:space-y-0 lg:space-x-5 justify-start"
|
||||
on:submit|preventDefault={loadBranches}
|
||||
>
|
||||
<div class="space-y-2 w-full">
|
||||
<input
|
||||
<div class="mx-auto max-w-screen-2xl">
|
||||
<form class="flex flex-col" on:submit|preventDefault={loadBranches}>
|
||||
<div class="flex flex-col space-y-2 w-full">
|
||||
<div class="flex flex-row space-x-2"><input
|
||||
class="w-full"
|
||||
placeholder="eg: https://github.com/coollabsio/nodejs-example/tree/main"
|
||||
bind:value={publicRepositoryLink}
|
||||
/>
|
||||
{#if branchSelectOptions.length > 0}
|
||||
<div class="custom-select-wrapper">
|
||||
<Select
|
||||
<button class="btn bg-orange-600" class:loading={loading.branches} type="submit">
|
||||
Load Repository
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="custom-select-wrapper">
|
||||
<Select
|
||||
class="w-full"
|
||||
placeholder={loading.branches
|
||||
? $t('application.configuration.loading_branches')
|
||||
: !publicRepositoryLink
|
||||
? $t('application.configuration.select_a_repository_first')
|
||||
: $t('application.configuration.select_a_branch')}
|
||||
isWaiting={loading.branches}
|
||||
showIndicator={!!publicRepositoryLink && !loading.branches}
|
||||
id="branches"
|
||||
on:select={saveRepository}
|
||||
items={branchSelectOptions}
|
||||
isDisabled={loading.branches || !!!publicRepositoryLink}
|
||||
isClearable={false}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
placeholder={loading.branches
|
||||
? $t('application.configuration.loading_branches')
|
||||
: branchSelectOptions.length ===0
|
||||
? 'Please type a repository link first.'
|
||||
: $t('application.configuration.select_a_branch')}
|
||||
isWaiting={loading.branches}
|
||||
showIndicator={!!publicRepositoryLink && !loading.branches}
|
||||
id="branches"
|
||||
on:select={saveRepository}
|
||||
items={branchSelectOptions}
|
||||
isDisabled={loading.branches || !ownerName}
|
||||
isClearable={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn bg-orange-600" class:loading={loading.branches} type="submit">
|
||||
Load Repository
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@ -261,7 +261,7 @@
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="max-w-6xl mx-auto px-5">
|
||||
<div class="max-w-screen-2xl mx-auto px-10">
|
||||
<div class="title pb-2">Other</div>
|
||||
<div class="flex flex-wrap justify-center">
|
||||
{#each buildPacks.filter((bp) => bp.isHerokuBuildPack === true) as buildPack}
|
||||
@ -271,10 +271,20 @@
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<div class="max-w-6xl mx-auto px-5">
|
||||
<div class="title pb-2">Coolify Custom</div>
|
||||
<div class="max-w-screen-2xl mx-auto px-10">
|
||||
<div class="title pb-2">Coolify Base</div>
|
||||
<div class="flex flex-wrap justify-center">
|
||||
{#each buildPacks.filter((bp) => bp.isCoolifyBuildPack === true) as buildPack}
|
||||
{#each buildPacks.filter((bp) => bp.isCoolifyBuildPack === true && bp.type ==='base') as buildPack}
|
||||
<div class="p-2">
|
||||
<BuildPack {packageManager} {buildPack} {scanning} bind:foundConfig />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<div class="max-w-screen-2xl mx-auto px-10">
|
||||
<div class="title pb-2">Coolify Specific</div>
|
||||
<div class="flex flex-wrap justify-center">
|
||||
{#each buildPacks.filter((bp) => bp.isCoolifyBuildPack === true && bp.type ==='specific') as buildPack}
|
||||
<div class="p-2">
|
||||
<BuildPack {packageManager} {buildPack} {scanning} bind:foundConfig />
|
||||
</div>
|
||||
|
||||
@ -36,16 +36,8 @@
|
||||
import GitlabRepositories from './_GitlabRepositories.svelte';
|
||||
</script>
|
||||
|
||||
<div class="flex space-x-1 p-6 font-bold">
|
||||
<div class="mr-4 text-2xl tracking-tight">
|
||||
{$t('application.configuration.select_a_repository_project')}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap justify-center">
|
||||
{#if application.gitSource.type === 'github'}
|
||||
<GithubRepositories {application} />
|
||||
{:else if application.gitSource.type === 'gitlab'}
|
||||
<GitlabRepositories {application} {appId} {settings} />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if application.gitSource.type === 'github'}
|
||||
<GithubRepositories {application} />
|
||||
{:else if application.gitSource.type === 'gitlab'}
|
||||
<GitlabRepositories {application} {appId} {settings} />
|
||||
{/if}
|
||||
|
||||
@ -68,7 +68,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="max-w-6xl mx-auto px-5">
|
||||
<div class="max-w-screen-2xl mx-auto px-9">
|
||||
<div class="title pb-8">Git App</div>
|
||||
<div class="flex flex-wrap justify-center">
|
||||
{#if !filteredSources || ownSources.length === 0}
|
||||
@ -98,7 +98,7 @@
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row ">
|
||||
<div class="flex flex-col justify-center">
|
||||
{#each ownSources as source}
|
||||
<div class="p-2 relative">
|
||||
<div class="absolute -m-4">
|
||||
|
||||
@ -21,12 +21,11 @@
|
||||
<script lang="ts">
|
||||
export let application: any;
|
||||
import { page } from '$app/stores';
|
||||
import DeleteIcon from '$lib/components/DeleteIcon.svelte';
|
||||
import { del, get } from '$lib/api';
|
||||
import { t } from '$lib/translations';
|
||||
import { appSession, status } from '$lib/store';
|
||||
import { errorNotification, handlerNotFoundLoad } from '$lib/common';
|
||||
import Tooltip from '$lib/components/Tooltip.svelte';
|
||||
import { errorNotification } from '$lib/common';
|
||||
import { goto } from '$app/navigation';
|
||||
const { id } = $page.params;
|
||||
|
||||
let forceDelete = false;
|
||||
@ -36,7 +35,7 @@
|
||||
$status.application.initialLoading = true;
|
||||
try {
|
||||
await del(`/applications/${id}`, { id, force });
|
||||
return await window.location.assign(`/`);
|
||||
return await goto('/')
|
||||
} catch (error) {
|
||||
if (error.message.startsWith(`Command failed: SSH_AUTH_SOCK=/tmp/coolify-ssh-agent.pid`)) {
|
||||
forceDelete = true;
|
||||
|
||||
@ -56,7 +56,7 @@
|
||||
!$appSession.isAdmin || $status.application.isRunning || $status.application.initialLoading;
|
||||
|
||||
let loading = false;
|
||||
|
||||
let fqdnEl: any = null;
|
||||
let forceSave = false;
|
||||
let debug = application.settings.debug;
|
||||
let previews = application.settings.previews;
|
||||
@ -96,6 +96,7 @@
|
||||
await handleSubmit();
|
||||
}
|
||||
await getBaseBuildImages();
|
||||
if (!application.fqdn && fqdnEl) fqdnEl.focus()
|
||||
});
|
||||
async function getBaseBuildImages() {
|
||||
const data = await post(`/applications/images`, {
|
||||
@ -383,6 +384,90 @@
|
||||
disabled={$status.application.isRunning}
|
||||
/>
|
||||
</div>
|
||||
{#if !isBot}
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<label for="fqdn"
|
||||
>{$t('application.url_fqdn')}
|
||||
<Explainer
|
||||
explanation={"If you specify <span class='text-settings font-bold'>https</span>, the application will be accessible only over https.<br>SSL certificate will be generated automatically.<br><br>If you specify <span class='text-settings font-bold'>www</span>, the application will be redirected (302) from non-www and vice versa.<br><br>To modify the domain, you must first stop the application.<br><br><span class='text-settings font-bold'>You must set your DNS to point to the server IP in advance.</span>"}
|
||||
/>
|
||||
</label>
|
||||
<div>
|
||||
<input
|
||||
bind:this={fqdnEl}
|
||||
class="w-full"
|
||||
required={!application.settings.isBot}
|
||||
readonly={isDisabled}
|
||||
disabled={isDisabled}
|
||||
name="fqdn"
|
||||
id="fqdn"
|
||||
class:border={!application.settings.isBot&& !application.fqdn}
|
||||
class:border-red-500={!application.settings.isBot && !application.fqdn}
|
||||
bind:value={application.fqdn}
|
||||
pattern="^https?://([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{'{'}2,{'}'}$"
|
||||
placeholder="eg: https://coollabs.io"
|
||||
/>
|
||||
{#if forceSave}
|
||||
<div class="flex-col space-y-2 pt-4 text-center">
|
||||
{#if isNonWWWDomainOK}
|
||||
<button
|
||||
class="btn btn-sm bg-green-600 hover:bg-green-500"
|
||||
on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)}
|
||||
>DNS settings for {nonWWWDomain} is OK, click to recheck.</button
|
||||
>
|
||||
{:else}
|
||||
<button
|
||||
class="btn btn-sm bg-red-600 hover:bg-red-500"
|
||||
on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)}
|
||||
>DNS settings for {nonWWWDomain} is invalid, click to recheck.</button
|
||||
>
|
||||
{/if}
|
||||
{#if dualCerts}
|
||||
{#if isWWWDomainOK}
|
||||
<button
|
||||
class="btn btn-sm bg-green-600 hover:bg-green-500"
|
||||
on:click|preventDefault={() =>
|
||||
isDNSValid(getDomain(`www.${nonWWWDomain}`), true)}
|
||||
>DNS settings for www.{nonWWWDomain} is OK, click to recheck.</button
|
||||
>
|
||||
{:else}
|
||||
<button
|
||||
class="btn btn-sm bg-red-600 hover:bg-red-500"
|
||||
on:click|preventDefault={() =>
|
||||
isDNSValid(getDomain(`www.${nonWWWDomain}`), true)}
|
||||
>DNS settings for www.{nonWWWDomain} is invalid, click to recheck.</button
|
||||
>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center pb-4">
|
||||
<Setting
|
||||
id="dualCerts"
|
||||
dataTooltip={$t('forms.must_be_stopped_to_modify')}
|
||||
disabled={$status.application.isRunning}
|
||||
isCenter={false}
|
||||
bind:setting={dualCerts}
|
||||
title={$t('application.ssl_www_and_non_www')}
|
||||
description="Generate certificates for both www and non-www. <br>You need to have <span class='font-bold text-settings'>both DNS entries</span> set in advance.<br><br>Useful if you expect to have visitors on both."
|
||||
on:click={() => !$status.application.isRunning && changeSettings('dualCerts')}
|
||||
/>
|
||||
</div>
|
||||
{#if isHttps}
|
||||
<div class="grid grid-cols-2 items-center pb-4">
|
||||
<Setting
|
||||
id="isCustomSSL"
|
||||
isCenter={false}
|
||||
bind:setting={isCustomSSL}
|
||||
title="Use Custom SSL Certificate"
|
||||
description="Use Custom SSL Certificated added in the Settings/SSL Certificates section. <br><br>By default, the SSL certificate is generated automatically through Let's Encrypt"
|
||||
on:click={() => changeSettings('isCustomSSL')}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="title font-bold pb-3 pt-10 border-b border-coolgray-500 mb-6">Build & Deploy</div>
|
||||
@ -494,87 +579,7 @@
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
{#if !isBot}
|
||||
<div class="grid grid-cols-2 items-center pt-8">
|
||||
<label for="fqdn"
|
||||
>{$t('application.url_fqdn')}
|
||||
<Explainer
|
||||
explanation={"If you specify <span class='text-settings font-bold'>https</span>, the application will be accessible only over https.<br>SSL certificate will be generated automatically.<br><br>If you specify <span class='text-settings font-bold'>www</span>, the application will be redirected (302) from non-www and vice versa.<br><br>To modify the domain, you must first stop the application.<br><br><span class='text-settings font-bold'>You must set your DNS to point to the server IP in advance.</span>"}
|
||||
/>
|
||||
</label>
|
||||
<div>
|
||||
<input
|
||||
class="w-full"
|
||||
required={!application.settings.isBot}
|
||||
readonly={isDisabled}
|
||||
disabled={isDisabled}
|
||||
name="fqdn"
|
||||
id="fqdn"
|
||||
bind:value={application.fqdn}
|
||||
pattern="^https?://([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{'{'}2,{'}'}$"
|
||||
placeholder="eg: https://coollabs.io"
|
||||
/>
|
||||
{#if forceSave}
|
||||
<div class="flex-col space-y-2 pt-4 text-center">
|
||||
{#if isNonWWWDomainOK}
|
||||
<button
|
||||
class="btn btn-sm bg-green-600 hover:bg-green-500"
|
||||
on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)}
|
||||
>DNS settings for {nonWWWDomain} is OK, click to recheck.</button
|
||||
>
|
||||
{:else}
|
||||
<button
|
||||
class="btn btn-sm bg-red-600 hover:bg-red-500"
|
||||
on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)}
|
||||
>DNS settings for {nonWWWDomain} is invalid, click to recheck.</button
|
||||
>
|
||||
{/if}
|
||||
{#if dualCerts}
|
||||
{#if isWWWDomainOK}
|
||||
<button
|
||||
class="btn btn-sm bg-green-600 hover:bg-green-500"
|
||||
on:click|preventDefault={() =>
|
||||
isDNSValid(getDomain(`www.${nonWWWDomain}`), true)}
|
||||
>DNS settings for www.{nonWWWDomain} is OK, click to recheck.</button
|
||||
>
|
||||
{:else}
|
||||
<button
|
||||
class="btn btn-sm bg-red-600 hover:bg-red-500"
|
||||
on:click|preventDefault={() =>
|
||||
isDNSValid(getDomain(`www.${nonWWWDomain}`), true)}
|
||||
>DNS settings for www.{nonWWWDomain} is invalid, click to recheck.</button
|
||||
>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center pb-4">
|
||||
<Setting
|
||||
id="dualCerts"
|
||||
dataTooltip={$t('forms.must_be_stopped_to_modify')}
|
||||
disabled={$status.application.isRunning}
|
||||
isCenter={false}
|
||||
bind:setting={dualCerts}
|
||||
title={$t('application.ssl_www_and_non_www')}
|
||||
description="Generate certificates for both www and non-www. <br>You need to have <span class='font-bold text-settings'>both DNS entries</span> set in advance.<br><br>Useful if you expect to have visitors on both."
|
||||
on:click={() => !$status.application.isRunning && changeSettings('dualCerts')}
|
||||
/>
|
||||
</div>
|
||||
{#if isHttps}
|
||||
<div class="grid grid-cols-2 items-center pb-4">
|
||||
<Setting
|
||||
id="isCustomSSL"
|
||||
isCenter={false}
|
||||
bind:setting={isCustomSSL}
|
||||
title="Use Custom SSL Certificate"
|
||||
description="Use Custom SSL Certificated added in the Settings/SSL Certificates section. <br><br>By default, the SSL certificate is generated automatically through Let's Encrypt"
|
||||
on:click={() => changeSettings('isCustomSSL')}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
{#if application.buildPack === 'python'}
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<label for="pythonModule">WSGI / ASGI</label>
|
||||
|
||||
@ -121,22 +121,24 @@
|
||||
<svelte:component this={BuildLog} />
|
||||
{/key}
|
||||
{:else}
|
||||
{#if buildCount === 0}
|
||||
Not build logs found.
|
||||
{:else}
|
||||
Select a build to see the logs.
|
||||
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
<div class="mb-4 min-w-[16rem] space-y-2 md:mb-0 ">
|
||||
<div class="top-4 md:sticky">
|
||||
{#if !noMoreBuilds}
|
||||
{#if buildCount > 5}
|
||||
<div class="flex space-x-2 pb-2">
|
||||
<button
|
||||
disabled={noMoreBuilds}
|
||||
class=" btn btn-sm w-full btn-primary"
|
||||
class:btn-primary={!noMoreBuilds}
|
||||
class=" btn btn-sm w-full"
|
||||
on:click={loadMoreBuilds}>{$t('application.build.load_more')}</button
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
{#each builds as build, index (build.id)}
|
||||
<div
|
||||
id={`building-${build.id}`}
|
||||
@ -185,7 +187,4 @@
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{#if buildCount === 0}
|
||||
<div class="text-center text-xl font-bold">{$t('application.build.no_logs')}</div>
|
||||
{/if}
|
||||
</div>
|
||||
Loading…
x
Reference in New Issue
Block a user