mirror of
https://github.com/tiennm99/coolify.git
synced 2026-10-15 14:16:28 +00:00
Merge remote-tracking branch 'origin/next' into fix/configurable-proxy-timeout
This commit is contained in:
commit
4615cfd007
127 files changed
+8409
-1400
No files matched your search
@@ -35,7 +35,7 @@
|
||||
$skipPasswordConfirmation = shouldSkipPasswordConfirmation();
|
||||
if ($temporaryDisableTwoStepConfirmation) {
|
||||
$disableTwoStepConfirmation = false;
|
||||
$skipPasswordConfirmation = false;
|
||||
// Password confirmation requirement is not affected by temporary two-step disable
|
||||
}
|
||||
// When password step is skipped, Step 2 becomes final - change button text from "Continue" to "Confirm"
|
||||
$effectiveStep2ButtonText = ($skipPasswordConfirmation && $step2ButtonText === 'Continue') ? 'Confirm' : $step2ButtonText;
|
||||
@@ -59,6 +59,7 @@
|
||||
confirmWithPassword: @js($confirmWithPassword && !$skipPasswordConfirmation),
|
||||
submitAction: @js($submitAction),
|
||||
dispatchAction: @js($dispatchAction),
|
||||
submitting: false,
|
||||
passwordError: '',
|
||||
selectedActions: @js(collect($checkboxes)->pluck('id')->filter(fn($id) => $this->$id)->values()->all()),
|
||||
dispatchEvent: @js($dispatchEvent),
|
||||
@@ -70,6 +71,7 @@
|
||||
this.step = this.initialStep;
|
||||
this.deleteText = '';
|
||||
this.password = '';
|
||||
this.submitting = false;
|
||||
this.userConfirmationText = '';
|
||||
this.selectedActions = @js(collect($checkboxes)->pluck('id')->filter(fn($id) => $this->$id)->values()->all());
|
||||
$wire.$refresh();
|
||||
@@ -320,8 +322,8 @@
|
||||
</x-forms.button>
|
||||
@endif
|
||||
<x-forms.button
|
||||
x-bind:disabled="!disableTwoStepConfirmation && confirmWithText && userConfirmationText !==
|
||||
confirmationText"
|
||||
x-bind:disabled="submitting || (!disableTwoStepConfirmation && confirmWithText && userConfirmationText !==
|
||||
confirmationText)"
|
||||
class="w-auto" isError
|
||||
@click="
|
||||
if (dispatchEvent) {
|
||||
@@ -330,12 +332,18 @@
|
||||
if (confirmWithPassword && !skipPasswordConfirmation) {
|
||||
step++;
|
||||
} else {
|
||||
modalOpen = false;
|
||||
resetModal();
|
||||
submitForm();
|
||||
submitting = true;
|
||||
submitForm().then((result) => {
|
||||
submitting = false;
|
||||
modalOpen = false;
|
||||
resetModal();
|
||||
}).catch(() => {
|
||||
submitting = false;
|
||||
});
|
||||
}
|
||||
">
|
||||
<span x-text="step2ButtonText"></span>
|
||||
<span x-show="!submitting" x-text="step2ButtonText"></span>
|
||||
<x-loading x-show="submitting" text="Processing..." />
|
||||
</x-forms.button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -373,22 +381,27 @@
|
||||
class="w-24 dark:bg-coolgray-200 dark:hover:bg-coolgray-300">
|
||||
Back
|
||||
</x-forms.button>
|
||||
<x-forms.button x-bind:disabled="!password" class="w-auto" isError
|
||||
<x-forms.button x-bind:disabled="!password || submitting" class="w-auto" isError
|
||||
@click="
|
||||
if (dispatchEvent) {
|
||||
$wire.dispatch(dispatchEventType, dispatchEventMessage);
|
||||
}
|
||||
submitting = true;
|
||||
submitForm().then((result) => {
|
||||
submitting = false;
|
||||
if (result === true) {
|
||||
modalOpen = false;
|
||||
resetModal();
|
||||
} else {
|
||||
passwordError = result;
|
||||
password = ''; // Clear the password field
|
||||
password = '';
|
||||
}
|
||||
}).catch(() => {
|
||||
submitting = false;
|
||||
});
|
||||
">
|
||||
<span x-text="step3ButtonText"></span>
|
||||
<span x-show="!submitting" x-text="step3ButtonText"></span>
|
||||
<x-loading x-show="submitting" text="Processing..." />
|
||||
</x-forms.button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -5,7 +5,15 @@
|
||||
<h1 class="mt-4 font-bold tracking-tight dark:text-white">This page is definitely old, not like you!</h1>
|
||||
<p class="text-base leading-7 dark:text-neutral-300 text-black">Your session has expired. Please log in again to continue.
|
||||
</p>
|
||||
<div class="flex items-center mt-10 gap-x-2">
|
||||
<details class="mt-6 text-sm dark:text-neutral-400 text-neutral-600">
|
||||
<summary class="cursor-pointer hover:dark:text-neutral-200 hover:text-neutral-800">Using a reverse proxy or Cloudflare Tunnel?</summary>
|
||||
<ul class="mt-2 ml-4 list-disc space-y-1">
|
||||
<li>Set your domain in <strong>Settings → FQDN</strong> to match the URL you use to access Coolify.</li>
|
||||
<li>Cloudflare users: disable <strong>Browser Integrity Check</strong> and <strong>Under Attack Mode</strong> for your Coolify domain, as these can interrupt login sessions.</li>
|
||||
<li>If you can still access Coolify via <code>localhost</code>, log in there first to configure your FQDN.</li>
|
||||
</ul>
|
||||
</details>
|
||||
<div class="flex items-center mt-6 gap-x-2">
|
||||
<a href="/login">
|
||||
<x-forms.button>Back to Login</x-forms.button>
|
||||
</a>
|
||||
|
||||
@@ -7,12 +7,6 @@
|
||||
@endif
|
||||
<h1>Dashboard</h1>
|
||||
<div class="subtitle">Your self-hosted infrastructure.</div>
|
||||
@if (request()->query->get('success'))
|
||||
<div class=" mb-10 font-bold alert alert-success">
|
||||
Your subscription has been activated! Welcome onboard! It could take a few seconds before your
|
||||
subscription is activated.<br> Please be patient.
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<section class="-mt-2">
|
||||
<div class="flex items-center gap-2 pb-2">
|
||||
|
||||
@@ -132,6 +132,33 @@
|
||||
</x-popup>
|
||||
</span>
|
||||
@endif
|
||||
@if (request()->query->get('cancelled'))
|
||||
<x-banner>
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-5 h-5 text-red-500 shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span><span class="font-bold text-red-500">Subscription Error.</span> Something went wrong. Please try
|
||||
again or <a class="underline dark:text-white"
|
||||
href="{{ config('constants.urls.contact') }}" target="_blank">contact support</a>.</span>
|
||||
</div>
|
||||
</x-banner>
|
||||
@endif
|
||||
@if (request()->query->get('success'))
|
||||
<x-banner>
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-5 h-5 text-green-500 shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span><span class="font-bold text-green-500">Welcome onboard!</span> Your subscription has been
|
||||
activated. It could take a few seconds before it's fully active.</span>
|
||||
</div>
|
||||
</x-banner>
|
||||
@endif
|
||||
@if (currentTeam()->subscriptionPastOverDue())
|
||||
<x-banner :closable=false>
|
||||
<div><span class="font-bold text-red-500">WARNING:</span> Your subscription is in over-due. If your
|
||||
|
||||
@@ -527,6 +527,7 @@
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<h3 class="pt-8">Labels</h3>
|
||||
@if ($application->settings->is_container_label_readonly_enabled)
|
||||
<x-forms.textarea readonly disabled label="Container Labels" rows="15" id="customLabels"
|
||||
monacoEditorLanguage="ini" useMonacoEditor x-bind:disabled="!canUpdate"></x-forms.textarea>
|
||||
|
||||
@@ -16,6 +16,9 @@
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<x-forms.input id="comment" label="Comment"
|
||||
helper="Add a note to document what this environment variable is used for." maxlength="256" />
|
||||
|
||||
@if (!$shared)
|
||||
<x-forms.checkbox id="is_buildtime"
|
||||
helper="Make this variable available during Docker build process. Useful for build secrets and dependencies."
|
||||
|
||||
@@ -41,19 +41,6 @@
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
@if ($resource->type() === 'service' || $resource?->build_pack === 'dockercompose')
|
||||
<div class="flex items-center gap-1 pt-4 dark:text-warning text-coollabs">
|
||||
<svg class="hidden w-4 h-4 dark:text-warning lg:block" viewBox="0 0 256 256"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="currentColor"
|
||||
d="M240.26 186.1L152.81 34.23a28.74 28.74 0 0 0-49.62 0L15.74 186.1a27.45 27.45 0 0 0 0 27.71A28.31 28.31 0 0 0 40.55 228h174.9a28.31 28.31 0 0 0 24.79-14.19a27.45 27.45 0 0 0 .02-27.71m-20.8 15.7a4.46 4.46 0 0 1-4 2.2H40.55a4.46 4.46 0 0 1-4-2.2a3.56 3.56 0 0 1 0-3.73L124 46.2a4.77 4.77 0 0 1 8 0l87.44 151.87a3.56 3.56 0 0 1 .02 3.73M116 136v-32a12 12 0 0 1 24 0v32a12 12 0 0 1-24 0m28 40a16 16 0 1 1-16-16a16 16 0 0 1 16 16">
|
||||
</path>
|
||||
</svg>
|
||||
Hardcoded variables are not shown here.
|
||||
</div>
|
||||
{{-- <div class="pb-4 dark:text-warning text-coollabs">If you would like to add a variable, you must add it to
|
||||
your compose file.</div> --}}
|
||||
@endif
|
||||
</div>
|
||||
@if ($view === 'normal')
|
||||
<div>
|
||||
@@ -61,31 +48,48 @@
|
||||
<div>Environment (secrets) variables for Production.</div>
|
||||
</div>
|
||||
@forelse ($this->environmentVariables as $env)
|
||||
<livewire:project.shared.environment-variable.show wire:key="environment-{{ $env->id }}"
|
||||
:env="$env" :type="$resource->type()" />
|
||||
<livewire:project.shared.environment-variable.show wire:key="environment-{{ $env->id }}" :env="$env"
|
||||
:type="$resource->type()" />
|
||||
@empty
|
||||
<div>No environment variables found.</div>
|
||||
@endforelse
|
||||
@if (($resource->type() === 'service' || $resource?->build_pack === 'dockercompose') && $this->hardcodedEnvironmentVariables->isNotEmpty())
|
||||
@foreach ($this->hardcodedEnvironmentVariables as $index => $env)
|
||||
<livewire:project.shared.environment-variable.show-hardcoded
|
||||
wire:key="hardcoded-prod-{{ $env['key'] }}-{{ $env['service_name'] ?? 'default' }}-{{ $index }}"
|
||||
:env="$env" />
|
||||
@endforeach
|
||||
@endif
|
||||
@if ($resource->type() === 'application' && $resource->environment_variables_preview->count() > 0 && $showPreview)
|
||||
<div>
|
||||
<h3>Preview Deployments Environment Variables</h3>
|
||||
<div>Environment (secrets) variables for Preview Deployments.</div>
|
||||
</div>
|
||||
@foreach ($this->environmentVariablesPreview as $env)
|
||||
<livewire:project.shared.environment-variable.show wire:key="environment-{{ $env->id }}"
|
||||
:env="$env" :type="$resource->type()" />
|
||||
<livewire:project.shared.environment-variable.show wire:key="environment-{{ $env->id }}" :env="$env"
|
||||
:type="$resource->type()" />
|
||||
@endforeach
|
||||
@if (($resource->type() === 'service' || $resource?->build_pack === 'dockercompose') && $this->hardcodedEnvironmentVariablesPreview->isNotEmpty())
|
||||
@foreach ($this->hardcodedEnvironmentVariablesPreview as $index => $env)
|
||||
<livewire:project.shared.environment-variable.show-hardcoded
|
||||
wire:key="hardcoded-preview-{{ $env['key'] }}-{{ $env['service_name'] ?? 'default' }}-{{ $index }}"
|
||||
:env="$env" />
|
||||
@endforeach
|
||||
@endif
|
||||
@endif
|
||||
@else
|
||||
<form wire:submit.prevent='submit' class="flex flex-col gap-2">
|
||||
@can('manageEnvironment', $resource)
|
||||
<x-callout type="info" title="Note" class="mb-2">
|
||||
Inline comments with space before # (e.g., <code class="font-mono">KEY=value #comment</code>) are stripped.
|
||||
</x-callout>
|
||||
|
||||
<x-forms.textarea rows="10" class="whitespace-pre-wrap" id="variables" wire:model="variables"
|
||||
label="Production Environment Variables"></x-forms.textarea>
|
||||
|
||||
@if ($showPreview)
|
||||
<x-forms.textarea rows="10" class="whitespace-pre-wrap"
|
||||
label="Preview Deployments Environment Variables" id="variablesPreview"
|
||||
wire:model="variablesPreview"></x-forms.textarea>
|
||||
<x-forms.textarea rows="10" class="whitespace-pre-wrap" label="Preview Deployments Environment Variables"
|
||||
id="variablesPreview" wire:model="variablesPreview"></x-forms.textarea>
|
||||
@endif
|
||||
|
||||
<x-forms.button type="submit" class="btn btn-primary">Save All Environment Variables</x-forms.button>
|
||||
@@ -94,11 +98,10 @@
|
||||
label="Production Environment Variables" disabled></x-forms.textarea>
|
||||
|
||||
@if ($showPreview)
|
||||
<x-forms.textarea rows="10" class="whitespace-pre-wrap"
|
||||
label="Preview Deployments Environment Variables" id="variablesPreview"
|
||||
wire:model="variablesPreview" disabled></x-forms.textarea>
|
||||
<x-forms.textarea rows="10" class="whitespace-pre-wrap" label="Preview Deployments Environment Variables"
|
||||
id="variablesPreview" wire:model="variablesPreview" disabled></x-forms.textarea>
|
||||
@endif
|
||||
@endcan
|
||||
</form>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,31 @@
|
||||
<div>
|
||||
<div
|
||||
class="flex flex-col items-center gap-4 p-4 bg-white border lg:items-start dark:bg-base dark:border-coolgray-300 border-neutral-200">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<span
|
||||
class="px-2 py-0.5 text-xs font-normal rounded dark:bg-coolgray-400/50 bg-neutral-200 dark:text-neutral-400 text-neutral-600">
|
||||
Hardcoded env
|
||||
</span>
|
||||
@if($serviceName)
|
||||
<span
|
||||
class="px-2 py-0.5 text-xs font-normal rounded dark:bg-coolgray-400/50 bg-neutral-200 dark:text-neutral-400 text-neutral-600">
|
||||
Service: {{ $serviceName }}
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
<div class="flex flex-col w-full gap-2">
|
||||
<div class="flex flex-col w-full gap-2 lg:flex-row">
|
||||
<x-forms.input disabled id="key" />
|
||||
@if($value !== null && $value !== '')
|
||||
<x-forms.input disabled type="password" value="{{ $value }}" />
|
||||
@else
|
||||
<x-forms.input disabled value="(inherited from host)" />
|
||||
@endif
|
||||
</div>
|
||||
@if($comment)
|
||||
<x-forms.input disabled value="{{ $comment }}" label="Comment"
|
||||
helper="Documentation for this environment variable." />
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -15,13 +15,21 @@
|
||||
</svg>
|
||||
@can('delete', $this->env)
|
||||
<x-modal-confirmation title="Confirm Environment Variable Deletion?" isErrorButton buttonTitle="Delete"
|
||||
submitAction="delete" :actions="['The selected environment variable will be permanently deleted.']" confirmationText="{{ $env->key }}"
|
||||
submitAction="delete" :actions="['The selected environment variable will be permanently deleted.']"
|
||||
confirmationText="{{ $env->key }}"
|
||||
confirmationLabel="Please confirm the execution of the actions by entering the Environment Variable Name below"
|
||||
shortConfirmationLabel="Environment Variable Name" :confirmWithPassword="false"
|
||||
step2ButtonText="Permanently Delete" />
|
||||
@endcan
|
||||
</div>
|
||||
@can('update', $this->env)
|
||||
<div class="flex flex-col w-full gap-2 lg:flex-row lg:items-end">
|
||||
<div class="flex-1">
|
||||
<x-forms.input id="comment" label="Comment"
|
||||
helper="Add a note to document what this environment variable is used for." maxlength="256" />
|
||||
</div>
|
||||
<x-forms.button type="submit">Update</x-forms.button>
|
||||
</div>
|
||||
<div class="flex flex-col w-full gap-3">
|
||||
<div class="flex flex-wrap w-full items-center gap-4">
|
||||
@if (!$is_redis_credential)
|
||||
@@ -32,28 +40,40 @@
|
||||
<x-forms.checkbox instantSave id="is_runtime"
|
||||
helper="Make this variable available in the running container at runtime."
|
||||
label="Available at Runtime" />
|
||||
<x-forms.checkbox instantSave id="is_multiline" label="Is Multiline?" />
|
||||
<x-forms.checkbox instantSave id="is_literal"
|
||||
helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
|
||||
label="Is Literal?" />
|
||||
@else
|
||||
@if ($isSharedVariable)
|
||||
@if (!$isMagicVariable)
|
||||
<x-forms.checkbox instantSave id="is_multiline" label="Is Multiline?" />
|
||||
<x-forms.checkbox instantSave id="is_literal"
|
||||
helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
|
||||
label="Is Literal?" />
|
||||
@endif
|
||||
@else
|
||||
@if ($is_shared)
|
||||
<x-forms.checkbox instantSave id="is_literal"
|
||||
helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
|
||||
label="Is Literal?" />
|
||||
@else
|
||||
@if (!$env->is_nixpacks)
|
||||
<x-forms.checkbox instantSave id="is_buildtime"
|
||||
helper="Make this variable available during Docker build process. Useful for build secrets and dependencies."
|
||||
label="Available at Buildtime" />
|
||||
@endif
|
||||
<x-forms.checkbox instantSave id="is_runtime"
|
||||
helper="Make this variable available in the running container at runtime."
|
||||
label="Available at Runtime" />
|
||||
@if (!$env->is_nixpacks)
|
||||
<x-forms.checkbox instantSave id="is_multiline" label="Is Multiline?" />
|
||||
@if ($is_multiline === false)
|
||||
<x-forms.checkbox instantSave id="is_literal"
|
||||
helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
|
||||
label="Is Literal?" />
|
||||
@if ($isSharedVariable)
|
||||
@if (!$isMagicVariable)
|
||||
<x-forms.checkbox instantSave id="is_multiline" label="Is Multiline?" />
|
||||
@endif
|
||||
@else
|
||||
@if (!$env->is_nixpacks)
|
||||
<x-forms.checkbox instantSave id="is_buildtime"
|
||||
helper="Make this variable available during Docker build process. Useful for build secrets and dependencies."
|
||||
label="Available at Buildtime" />
|
||||
@endif
|
||||
<x-forms.checkbox instantSave id="is_runtime"
|
||||
helper="Make this variable available in the running container at runtime."
|
||||
label="Available at Runtime" />
|
||||
@if (!$isMagicVariable)
|
||||
@if (!$env->is_nixpacks)
|
||||
<x-forms.checkbox instantSave id="is_multiline" label="Is Multiline?" />
|
||||
@if ($is_multiline === false)
|
||||
<x-forms.checkbox instantSave id="is_literal"
|
||||
helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
|
||||
label="Is Literal?" />
|
||||
@endif
|
||||
@endif
|
||||
@endif
|
||||
@endif
|
||||
@endif
|
||||
@@ -72,82 +92,95 @@
|
||||
<x-forms.checkbox disabled id="is_runtime"
|
||||
helper="Make this variable available in the running container at runtime."
|
||||
label="Available at Runtime" />
|
||||
<x-forms.checkbox disabled id="is_multiline" label="Is Multiline?" />
|
||||
<x-forms.checkbox disabled id="is_literal"
|
||||
helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
|
||||
label="Is Literal?" />
|
||||
@else
|
||||
@if ($isSharedVariable)
|
||||
@if (!$isMagicVariable)
|
||||
<x-forms.checkbox disabled id="is_multiline" label="Is Multiline?" />
|
||||
<x-forms.checkbox disabled id="is_literal"
|
||||
helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
|
||||
label="Is Literal?" />
|
||||
@endif
|
||||
@else
|
||||
@if ($is_shared)
|
||||
<x-forms.checkbox disabled id="is_literal"
|
||||
helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
|
||||
label="Is Literal?" />
|
||||
@else
|
||||
@if (!$env->is_nixpacks)
|
||||
@if ($isSharedVariable)
|
||||
@if (!$isMagicVariable)
|
||||
<x-forms.checkbox disabled id="is_multiline" label="Is Multiline?" />
|
||||
@endif
|
||||
@else
|
||||
<x-forms.checkbox disabled id="is_buildtime"
|
||||
helper="Make this variable available during Docker build process. Useful for build secrets and dependencies."
|
||||
label="Available at Buildtime" />
|
||||
@endif
|
||||
<x-forms.checkbox disabled id="is_runtime"
|
||||
helper="Make this variable available in the running container at runtime."
|
||||
label="Available at Runtime" />
|
||||
<x-forms.checkbox disabled id="is_multiline" label="Is Multiline?" />
|
||||
@if ($is_multiline === false)
|
||||
<x-forms.checkbox disabled id="is_literal"
|
||||
helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
|
||||
label="Is Literal?" />
|
||||
<x-forms.checkbox disabled id="is_runtime"
|
||||
helper="Make this variable available in the running container at runtime."
|
||||
label="Available at Runtime" />
|
||||
@if (!$isMagicVariable)
|
||||
<x-forms.checkbox disabled id="is_multiline" label="Is Multiline?" />
|
||||
@if ($is_multiline === false)
|
||||
<x-forms.checkbox disabled id="is_literal"
|
||||
helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
|
||||
label="Is Literal?" />
|
||||
@endif
|
||||
@endif
|
||||
@endif
|
||||
@endif
|
||||
@endif
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<x-forms.input disabled id="comment" label="Comment" helper="Documentation for this environment variable."
|
||||
maxlength="256" />
|
||||
</div>
|
||||
@endcan
|
||||
@else
|
||||
@can('update', $this->env)
|
||||
@if ($isDisabled)
|
||||
<div class="flex flex-col w-full gap-2">
|
||||
<div class="flex flex-col w-full gap-2 lg:flex-row">
|
||||
<x-forms.input disabled id="key" />
|
||||
<x-forms.input disabled type="password" id="value" />
|
||||
@if ($is_shared)
|
||||
<x-forms.input disabled type="password" id="real_value" />
|
||||
@endif
|
||||
</div>
|
||||
@if (!$isMagicVariable)
|
||||
<x-forms.input disabled id="comment" label="Comment"
|
||||
helper="Add a note to document what this environment variable is used for." maxlength="256" />
|
||||
@endif
|
||||
</div>
|
||||
@else
|
||||
<div class="flex flex-col w-full gap-2">
|
||||
<div class="flex flex-col w-full gap-2 lg:flex-row">
|
||||
@if ($is_multiline)
|
||||
<x-forms.input :required="$is_redis_credential" isMultiline="{{ $is_multiline }}" id="key" />
|
||||
<x-forms.textarea :required="$is_redis_credential" type="password" id="value" />
|
||||
@else
|
||||
<x-forms.input :disabled="$is_redis_credential" :required="$is_redis_credential" id="key" />
|
||||
<x-forms.input :required="$is_redis_credential" type="password" id="value" />
|
||||
@endif
|
||||
@if ($is_shared)
|
||||
<x-forms.input :disabled="$is_redis_credential" :required="$is_redis_credential" disabled
|
||||
type="password" id="real_value" />
|
||||
@endif
|
||||
</div>
|
||||
<x-forms.input instantSave id="comment" label="Comment"
|
||||
helper="Add a note to document what this environment variable is used for." maxlength="256" />
|
||||
</div>
|
||||
@endif
|
||||
@else
|
||||
<div class="flex flex-col w-full gap-2">
|
||||
<div class="flex flex-col w-full gap-2 lg:flex-row">
|
||||
<x-forms.input disabled id="key" />
|
||||
<x-forms.env-var-input
|
||||
disabled
|
||||
type="password"
|
||||
id="value"
|
||||
:availableVars="$this->availableSharedVariables"
|
||||
:projectUuid="data_get($parameters, 'project_uuid')"
|
||||
:environmentUuid="data_get($parameters, 'environment_uuid')" />
|
||||
<x-forms.input disabled type="password" id="value" />
|
||||
@if ($is_shared)
|
||||
<x-forms.input disabled type="password" id="real_value" />
|
||||
@endif
|
||||
</div>
|
||||
@else
|
||||
<div class="flex flex-col w-full gap-2 lg:flex-row">
|
||||
@if ($is_multiline)
|
||||
<x-forms.input :required="$is_redis_credential" isMultiline="{{ $is_multiline }}" id="key" />
|
||||
<x-forms.textarea :required="$is_redis_credential" type="password" id="value" />
|
||||
@else
|
||||
<x-forms.input :disabled="$is_redis_credential" :required="$is_redis_credential" id="key" />
|
||||
<x-forms.env-var-input
|
||||
:required="$is_redis_credential"
|
||||
type="password"
|
||||
id="value"
|
||||
:availableVars="$this->availableSharedVariables"
|
||||
:projectUuid="data_get($parameters, 'project_uuid')"
|
||||
:environmentUuid="data_get($parameters, 'environment_uuid')" />
|
||||
@endif
|
||||
@if ($is_shared)
|
||||
<x-forms.input :disabled="$is_redis_credential" :required="$is_redis_credential" disabled type="password" id="real_value" />
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
@else
|
||||
<div class="flex flex-col w-full gap-2 lg:flex-row">
|
||||
<x-forms.input disabled id="key" />
|
||||
<x-forms.env-var-input
|
||||
disabled
|
||||
type="password"
|
||||
id="value"
|
||||
:availableVars="$this->availableSharedVariables"
|
||||
:projectUuid="data_get($parameters, 'project_uuid')"
|
||||
:environmentUuid="data_get($parameters, 'environment_uuid')" />
|
||||
@if ($is_shared)
|
||||
<x-forms.input disabled type="password" id="real_value" />
|
||||
@if (!$isMagicVariable)
|
||||
<x-forms.input disabled id="comment" label="Comment"
|
||||
helper="Add a note to document what this environment variable is used for." maxlength="256" />
|
||||
@endif
|
||||
</div>
|
||||
@endcan
|
||||
@@ -162,28 +195,40 @@
|
||||
<x-forms.checkbox instantSave id="is_runtime"
|
||||
helper="Make this variable available in the running container at runtime."
|
||||
label="Available at Runtime" />
|
||||
<x-forms.checkbox instantSave id="is_multiline" label="Is Multiline?" />
|
||||
<x-forms.checkbox instantSave id="is_literal"
|
||||
helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
|
||||
label="Is Literal?" />
|
||||
@else
|
||||
@if ($isSharedVariable)
|
||||
@if (!$isMagicVariable)
|
||||
<x-forms.checkbox instantSave id="is_multiline" label="Is Multiline?" />
|
||||
<x-forms.checkbox instantSave id="is_literal"
|
||||
helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
|
||||
label="Is Literal?" />
|
||||
@endif
|
||||
@else
|
||||
@if ($is_shared)
|
||||
<x-forms.checkbox instantSave id="is_literal"
|
||||
helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
|
||||
label="Is Literal?" />
|
||||
@else
|
||||
@if (!$env->is_nixpacks)
|
||||
<x-forms.checkbox instantSave id="is_buildtime"
|
||||
helper="Make this variable available during Docker build process. Useful for build secrets and dependencies."
|
||||
label="Available at Buildtime" />
|
||||
@endif
|
||||
<x-forms.checkbox instantSave id="is_runtime"
|
||||
helper="Make this variable available in the running container at runtime."
|
||||
label="Available at Runtime" />
|
||||
@if (!$env->is_nixpacks)
|
||||
<x-forms.checkbox instantSave id="is_multiline" label="Is Multiline?" />
|
||||
@if ($is_multiline === false)
|
||||
<x-forms.checkbox instantSave id="is_literal"
|
||||
helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
|
||||
label="Is Literal?" />
|
||||
@if ($isSharedVariable)
|
||||
@if (!$isMagicVariable)
|
||||
<x-forms.checkbox instantSave id="is_multiline" label="Is Multiline?" />
|
||||
@endif
|
||||
@else
|
||||
@if (!$env->is_nixpacks)
|
||||
<x-forms.checkbox instantSave id="is_buildtime"
|
||||
helper="Make this variable available during Docker build process. Useful for build secrets and dependencies."
|
||||
label="Available at Buildtime" />
|
||||
@endif
|
||||
<x-forms.checkbox instantSave id="is_runtime"
|
||||
helper="Make this variable available in the running container at runtime."
|
||||
label="Available at Runtime" />
|
||||
@if (!$isMagicVariable)
|
||||
@if (!$env->is_nixpacks)
|
||||
<x-forms.checkbox instantSave id="is_multiline" label="Is Multiline?" />
|
||||
@if ($is_multiline === false)
|
||||
<x-forms.checkbox instantSave id="is_literal"
|
||||
helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
|
||||
label="Is Literal?" />
|
||||
@endif
|
||||
@endif
|
||||
@endif
|
||||
@endif
|
||||
@endif
|
||||
@@ -191,12 +236,13 @@
|
||||
@endif
|
||||
</div>
|
||||
<x-environment-variable-warning :problematic-variables="$problematicVariables" />
|
||||
<div class="flex w-full justify-end gap-2">
|
||||
@if ($isDisabled)
|
||||
@if (!$isMagicVariable)
|
||||
<div class="flex w-full justify-end gap-2">
|
||||
@if ($isDisabled)
|
||||
<x-forms.button disabled type="submit">Update</x-forms.button>
|
||||
<x-forms.button wire:click='lock'>Lock</x-forms.button>
|
||||
<x-modal-confirmation title="Confirm Environment Variable Deletion?" isErrorButton
|
||||
buttonTitle="Delete" submitAction="delete" :actions="['The selected environment variable will be permanently deleted.']"
|
||||
<x-modal-confirmation title="Confirm Environment Variable Deletion?" isErrorButton buttonTitle="Delete"
|
||||
submitAction="delete" :actions="['The selected environment variable will be permanently deleted.']"
|
||||
confirmationText="{{ $key }}" buttonFullWidth="true"
|
||||
confirmationLabel="Please confirm the execution of the actions by entering the Environment Variable Name below"
|
||||
shortConfirmationLabel="Environment Variable Name" :confirmWithPassword="false"
|
||||
@@ -204,14 +250,15 @@
|
||||
@else
|
||||
<x-forms.button type="submit">Update</x-forms.button>
|
||||
<x-forms.button wire:click='lock'>Lock</x-forms.button>
|
||||
<x-modal-confirmation title="Confirm Environment Variable Deletion?" isErrorButton
|
||||
buttonTitle="Delete" submitAction="delete" :actions="['The selected environment variable will be permanently deleted.']"
|
||||
<x-modal-confirmation title="Confirm Environment Variable Deletion?" isErrorButton buttonTitle="Delete"
|
||||
submitAction="delete" :actions="['The selected environment variable will be permanently deleted.']"
|
||||
confirmationText="{{ $key }}" buttonFullWidth="true"
|
||||
confirmationLabel="Please confirm the execution of the actions by entering the Environment Variable Name below"
|
||||
shortConfirmationLabel="Environment Variable Name" :confirmWithPassword="false"
|
||||
step2ButtonText="Permanently Delete" />
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@else
|
||||
<div class="flex flex-col w-full gap-3">
|
||||
@@ -224,27 +271,37 @@
|
||||
<x-forms.checkbox disabled id="is_runtime"
|
||||
helper="Make this variable available in the running container at runtime."
|
||||
label="Available at Runtime" />
|
||||
<x-forms.checkbox disabled id="is_multiline" label="Is Multiline?" />
|
||||
<x-forms.checkbox disabled id="is_literal"
|
||||
helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
|
||||
label="Is Literal?" />
|
||||
@else
|
||||
@if ($isSharedVariable)
|
||||
@if (!$isMagicVariable)
|
||||
<x-forms.checkbox disabled id="is_multiline" label="Is Multiline?" />
|
||||
<x-forms.checkbox disabled id="is_literal"
|
||||
helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
|
||||
label="Is Literal?" />
|
||||
@endif
|
||||
@else
|
||||
@if ($is_shared)
|
||||
<x-forms.checkbox disabled id="is_literal"
|
||||
helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
|
||||
label="Is Literal?" />
|
||||
@else
|
||||
@if (!$env->is_nixpacks)
|
||||
@if ($isSharedVariable)
|
||||
@if (!$isMagicVariable)
|
||||
<x-forms.checkbox disabled id="is_multiline" label="Is Multiline?" />
|
||||
@endif
|
||||
@else
|
||||
<x-forms.checkbox disabled id="is_buildtime"
|
||||
helper="Make this variable available during Docker build process. Useful for build secrets and dependencies."
|
||||
label="Available at Buildtime" />
|
||||
@endif
|
||||
<x-forms.checkbox disabled id="is_runtime"
|
||||
helper="Make this variable available in the running container at runtime."
|
||||
label="Available at Runtime" />
|
||||
<x-forms.checkbox disabled id="is_multiline" label="Is Multiline?" />
|
||||
@if ($is_multiline === false)
|
||||
<x-forms.checkbox disabled id="is_literal"
|
||||
helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
|
||||
label="Is Literal?" />
|
||||
<x-forms.checkbox disabled id="is_runtime"
|
||||
helper="Make this variable available in the running container at runtime."
|
||||
label="Available at Runtime" />
|
||||
@if (!$isMagicVariable)
|
||||
<x-forms.checkbox disabled id="is_multiline" label="Is Multiline?" />
|
||||
@if ($is_multiline === false)
|
||||
<x-forms.checkbox disabled id="is_literal"
|
||||
helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
|
||||
label="Is Literal?" />
|
||||
@endif
|
||||
@endif
|
||||
@endif
|
||||
@endif
|
||||
@endif
|
||||
@@ -255,4 +312,4 @@
|
||||
@endif
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -34,7 +34,7 @@
|
||||
])
|
||||
:class="activeTab === 'skipped-jobs' && 'dark:bg-coollabs bg-coollabs text-white'"
|
||||
@click="activeTab = 'skipped-jobs'; window.location.hash = 'skipped-jobs'">
|
||||
Skipped Jobs ({{ $skipLogs->count() }})
|
||||
Skipped Jobs ({{ $skipTotalCount }})
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -186,14 +186,35 @@
|
||||
{{-- Skipped Jobs Tab --}}
|
||||
<div x-show="activeTab === 'skipped-jobs'" x-cloak>
|
||||
<div class="pb-4 text-sm text-gray-500">Jobs that were not dispatched because conditions were not met.</div>
|
||||
@if($skipTotalCount > $skipDefaultTake)
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<x-forms.button disabled="{{ !$showSkipPrev }}" wire:click="skipPreviousPage">
|
||||
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
</x-forms.button>
|
||||
<span class="text-sm">
|
||||
Page {{ $skipCurrentPage }} of {{ ceil($skipTotalCount / $skipDefaultTake) }}
|
||||
</span>
|
||||
<x-forms.button disabled="{{ !$showSkipNext }}" wire:click="skipNextPage">
|
||||
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</x-forms.button>
|
||||
</div>
|
||||
@endif
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-sm text-left">
|
||||
<thead class="text-xs uppercase bg-gray-50 dark:bg-coolgray-200">
|
||||
<tr>
|
||||
<th class="px-4 py-3">Time</th>
|
||||
<th class="px-4 py-3">Type</th>
|
||||
<th class="px-4 py-3">Resource</th>
|
||||
<th class="px-4 py-3">Reason</th>
|
||||
<th class="px-4 py-3">Details</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -214,6 +235,17 @@
|
||||
{{ ucfirst(str_replace('_', ' ', $skip['type'])) }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
@if($skip['link'] ?? null)
|
||||
<a href="{{ $skip['link'] }}" class="text-white underline hover:no-underline">
|
||||
{{ $skip['resource_name'] }}
|
||||
</a>
|
||||
@elseif($skip['resource_name'] ?? null)
|
||||
{{ $skip['resource_name'] }}
|
||||
@else
|
||||
<span class="text-gray-500">{{ $skip['context']['task_name'] ?? $skip['context']['server_name'] ?? 'Deleted' }}</span>
|
||||
@endif
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
@php
|
||||
$reasonLabel = match($skip['reason']) {
|
||||
@@ -235,15 +267,6 @@
|
||||
@endphp
|
||||
<span class="{{ $reasonBg }}">{{ $reasonLabel }}</span>
|
||||
</td>
|
||||
<td class="px-4 py-2 text-xs text-gray-500">
|
||||
@php
|
||||
$details = collect($skip['context'])
|
||||
->except(['type', 'skip_reason', 'execution_time'])
|
||||
->map(fn($v, $k) => str_replace('_', ' ', $k) . ': ' . $v)
|
||||
->implode(', ');
|
||||
@endphp
|
||||
{{ $details }}
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
|
||||
@@ -1,53 +1,267 @@
|
||||
<div>
|
||||
<div wire:init="loadRefundEligibility">
|
||||
@if (subscriptionProvider() === 'stripe')
|
||||
<div class="pt-4">
|
||||
<h2>Your current plan</h2>
|
||||
<div class="pb-4">Tier: <strong class="dark:text-warning">
|
||||
@if (data_get(currentTeam(), 'subscription')->type() == 'dynamic')
|
||||
Pay-as-you-go
|
||||
@else
|
||||
{{ data_get(currentTeam(), 'subscription')->type() }}
|
||||
@endif
|
||||
{{-- Plan Overview --}}
|
||||
<section x-data="{
|
||||
qty: {{ $quantity }},
|
||||
get current() { return $wire.server_limits; },
|
||||
activeServers: {{ currentTeam()->servers->count() }},
|
||||
preview: @js($pricePreview),
|
||||
loading: false,
|
||||
showModal: false,
|
||||
async fetchPreview() {
|
||||
if (this.qty < 2 || this.qty > 100 || this.qty === this.current) { return; }
|
||||
this.loading = true;
|
||||
this.preview = null;
|
||||
await $wire.loadPricePreview(this.qty);
|
||||
this.preview = $wire.pricePreview;
|
||||
this.loading = false;
|
||||
},
|
||||
fmt(cents) {
|
||||
if (!this.preview) return '';
|
||||
const c = this.preview.currency;
|
||||
return c === 'USD' ? '$' + (cents / 100).toFixed(2) : (cents / 100).toFixed(2) + ' ' + c;
|
||||
},
|
||||
get isReduction() { return this.qty < this.activeServers; },
|
||||
get hasChanged() { return this.qty !== this.current; },
|
||||
get hasPreview() { return this.preview !== null; },
|
||||
openAdjust() {
|
||||
this.showModal = true;
|
||||
},
|
||||
closeAdjust() {
|
||||
this.showModal = false;
|
||||
this.qty = this.current;
|
||||
this.preview = null;
|
||||
}
|
||||
}" @success.window="preview = null; showModal = false; qty = $wire.server_limits"
|
||||
@keydown.escape.window="if (showModal) { closeAdjust(); }" class="-mt-2">
|
||||
<h3 class="pb-2">Plan Overview</h3>
|
||||
<div class="grid grid-cols-1 gap-4 xl:grid-cols-3">
|
||||
{{-- Current Plan Card --}}
|
||||
<div class="p-5 rounded border dark:bg-coolgray-100 bg-white border-neutral-200 dark:border-coolgray-400">
|
||||
<div class="text-xs font-bold text-neutral-500 uppercase tracking-wide pb-1">Current Plan</div>
|
||||
<div class="text-xl font-bold dark:text-warning">
|
||||
@if (data_get(currentTeam(), 'subscription')->type() == 'dynamic')
|
||||
Pay-as-you-go
|
||||
@else
|
||||
{{ data_get(currentTeam(), 'subscription')->type() }}
|
||||
@endif
|
||||
</div>
|
||||
<div class="pt-2 text-sm">
|
||||
@if (currentTeam()->subscription->stripe_cancel_at_period_end)
|
||||
<span class="text-red-500 font-medium">Cancelling at end of period</span>
|
||||
@else
|
||||
<span class="text-green-500 font-medium">Active</span>
|
||||
<span class="text-neutral-500"> · Invoice
|
||||
{{ currentTeam()->subscription->stripe_invoice_paid ? 'paid' : 'not paid' }}</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</strong></div>
|
||||
{{-- Paid Servers Card --}}
|
||||
<div class="p-5 rounded border dark:bg-coolgray-100 bg-white border-neutral-200 dark:border-coolgray-400 cursor-pointer hover:border-warning/50 transition-colors"
|
||||
@click="openAdjust()">
|
||||
<div class="text-xs font-bold text-neutral-500 uppercase tracking-wide pb-1">Paid Servers</div>
|
||||
<div class="text-xl font-bold dark:text-white" x-text="current"></div>
|
||||
<div class="pt-2 text-sm text-neutral-500">Click to adjust</div>
|
||||
</div>
|
||||
|
||||
@if (currentTeam()->subscription->stripe_cancel_at_period_end)
|
||||
<div class="pb-2">Subscription is active but on cancel period.</div>
|
||||
@else
|
||||
<div class="pb-2">Subscription is active. Last invoice is
|
||||
{{ currentTeam()->subscription->stripe_invoice_paid ? 'paid' : 'not paid' }}.</div>
|
||||
@endif
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-48">Number of paid servers:</div>
|
||||
<div class="text-xl font-bold dark:text-white">{{ $server_limits }}</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-48">Currently active servers:</div>
|
||||
<div class="text-xl font-bold dark:text-white">{{ currentTeam()->servers->count() }}</div>
|
||||
{{-- Active Servers Card --}}
|
||||
<div
|
||||
class="p-5 rounded border dark:bg-coolgray-100 bg-white border-neutral-200 dark:border-coolgray-400 {{ currentTeam()->serverOverflow() ? 'border-red-500 dark:border-red-500' : '' }}">
|
||||
<div class="text-xs font-bold text-neutral-500 uppercase tracking-wide pb-1">Active Servers</div>
|
||||
<div class="text-xl font-bold {{ currentTeam()->serverOverflow() ? 'text-red-500' : 'dark:text-white' }}">
|
||||
{{ currentTeam()->servers->count() }}
|
||||
</div>
|
||||
<div class="pt-2 text-sm text-neutral-500">Currently running</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (currentTeam()->serverOverflow())
|
||||
<x-callout type="danger" title="WARNING" class="my-4">
|
||||
You must delete {{ currentTeam()->servers->count() - $server_limits }} servers,
|
||||
or upgrade your subscription. {{ currentTeam()->servers->count() - $server_limits }} servers will be
|
||||
deactivated.
|
||||
<x-callout type="danger" title="Server limit exceeded" class="mt-4">
|
||||
You must delete {{ currentTeam()->servers->count() - $server_limits }} servers or upgrade your
|
||||
subscription. Excess servers will be deactivated.
|
||||
</x-callout>
|
||||
@endif
|
||||
<x-forms.button class="gap-2" wire:click='stripeCustomerPortal'>Change Server Quantity
|
||||
</x-forms.button>
|
||||
<h2 class="pt-4">Manage your subscription</h2>
|
||||
<div class="pb-4">Cancel, upgrade or downgrade your subscription.</div>
|
||||
<div class="flex gap-2">
|
||||
<x-forms.button class="gap-2" wire:click='stripeCustomerPortal'>Go to <svg
|
||||
xmlns="http://www.w3.org/2000/svg" class="w-12 " viewBox="0 0 512 214">
|
||||
<path fill="#635BFF"
|
||||
d="M512 110.08c0-36.409-17.636-65.138-51.342-65.138c-33.85 0-54.33 28.73-54.33 64.854c0 42.808 24.179 64.426 58.88 64.426c16.925 0 29.725-3.84 39.396-9.244v-28.445c-9.67 4.836-20.764 7.823-34.844 7.823c-13.796 0-26.027-4.836-27.591-21.618h69.547c0-1.85.284-9.245.284-12.658Zm-70.258-13.511c0-16.071 9.814-22.756 18.774-22.756c8.675 0 17.92 6.685 17.92 22.756h-36.694Zm-90.31-51.627c-13.939 0-22.899 6.542-27.876 11.094l-1.85-8.818h-31.288v165.83l35.555-7.537l.143-40.249c5.12 3.698 12.657 8.96 25.173 8.96c25.458 0 48.64-20.48 48.64-65.564c-.142-41.245-23.609-63.716-48.498-63.716Zm-8.534 97.991c-8.391 0-13.37-2.986-16.782-6.684l-.143-52.765c3.698-4.124 8.818-6.968 16.925-6.968c12.942 0 21.902 14.506 21.902 33.137c0 19.058-8.818 33.28-21.902 33.28ZM241.493 36.551l35.698-7.68V0l-35.698 7.538V36.55Zm0 10.809h35.698v124.444h-35.698V47.36Zm-38.257 10.524L200.96 47.36h-30.72v124.444h35.556V87.467c8.39-10.951 22.613-8.96 27.022-7.396V47.36c-4.551-1.707-21.191-4.836-29.582 10.524Zm-71.112-41.386l-34.702 7.395l-.142 113.92c0 21.05 15.787 36.551 36.836 36.551c11.662 0 20.195-2.133 24.888-4.693V140.8c-4.55 1.849-27.022 8.391-27.022-12.658V77.653h27.022V47.36h-27.022l.142-30.862ZM35.982 83.484c0-5.546 4.551-7.68 12.09-7.68c10.808 0 24.461 3.272 35.27 9.103V51.484c-11.804-4.693-23.466-6.542-35.27-6.542C19.2 44.942 0 60.018 0 85.192c0 39.252 54.044 32.995 54.044 49.92c0 6.541-5.688 8.675-13.653 8.675c-11.804 0-26.88-4.836-38.827-11.378v33.849c13.227 5.689 26.596 8.106 38.827 8.106c29.582 0 49.92-14.648 49.92-40.106c-.142-42.382-54.329-34.845-54.329-50.774Z" />
|
||||
|
||||
{{-- Adjust Server Limit Modal --}}
|
||||
<template x-teleport="body">
|
||||
<div x-show="showModal"
|
||||
class="fixed top-0 left-0 z-99 flex items-center justify-center w-screen h-screen p-4" x-cloak>
|
||||
<div x-show="showModal" class="absolute inset-0 w-full h-full bg-black/20 backdrop-blur-xs"
|
||||
@click="closeAdjust()">
|
||||
</div>
|
||||
<div x-show="showModal" x-trap.inert.noscroll="showModal"
|
||||
x-transition:enter="ease-out duration-100"
|
||||
x-transition:enter-start="opacity-0 -translate-y-2 sm:scale-95"
|
||||
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
|
||||
x-transition:leave="ease-in duration-100"
|
||||
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
|
||||
x-transition:leave-end="opacity-0 -translate-y-2 sm:scale-95"
|
||||
class="relative w-full border rounded-sm min-w-full lg:min-w-[36rem] max-w-[48rem] max-h-[calc(100vh-2rem)] bg-neutral-100 border-neutral-400 dark:bg-base dark:border-coolgray-300 flex flex-col">
|
||||
<div class="flex justify-between items-center py-6 px-7 shrink-0">
|
||||
<h3 class="pr-8 text-2xl font-bold">Adjust Server Limit</h3>
|
||||
<button @click="closeAdjust()"
|
||||
class="flex absolute top-2 right-2 justify-center items-center w-8 h-8 rounded-full dark:text-white hover:bg-coolgray-300">
|
||||
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none"
|
||||
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="relative w-auto overflow-y-auto px-7 pb-6 space-y-4"
|
||||
style="-webkit-overflow-scrolling: touch;">
|
||||
{{-- Server count input --}}
|
||||
<div>
|
||||
<label class="text-xs font-bold text-neutral-500 uppercase tracking-wide">Paid Servers</label>
|
||||
<div class="flex items-center gap-3 pt-1">
|
||||
<input type="number" min="{{ $minServerLimit }}" max="{{ $maxServerLimit }}" step="1"
|
||||
x-model.number="qty"
|
||||
@input="preview = null"
|
||||
@change="qty = Math.min({{ $maxServerLimit }}, Math.max({{ $minServerLimit }}, qty || {{ $minServerLimit }}))"
|
||||
class="w-20 px-2 py-1 text-xl font-bold text-center rounded border dark:bg-coolgray-200 dark:border-coolgray-400 border-neutral-200 dark:text-white">
|
||||
<x-forms.button
|
||||
isHighlighted
|
||||
x-bind:disabled="!hasChanged || loading"
|
||||
@click="fetchPreview()">
|
||||
Calculate Price
|
||||
</x-forms.button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Loading --}}
|
||||
<div x-show="loading" x-cloak>
|
||||
<x-loading text="Loading price preview..." />
|
||||
</div>
|
||||
|
||||
{{-- Price Preview --}}
|
||||
<div class="space-y-4" x-show="!loading && hasPreview" x-cloak>
|
||||
<div>
|
||||
<div class="text-xs font-bold text-neutral-500 uppercase tracking-wide pb-1.5">Due now</div>
|
||||
<div class="flex justify-between gap-6 text-sm font-bold">
|
||||
<span class="dark:text-white">Prorated charge</span>
|
||||
<span class="dark:text-warning" x-text="fmt(preview.due_now)"></span>
|
||||
</div>
|
||||
<p class="text-xs text-neutral-500 pt-1">Charged immediately to your payment method.</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-xs font-bold text-neutral-500 uppercase tracking-wide pb-1.5">Next billing cycle</div>
|
||||
<div class="space-y-1.5">
|
||||
<div class="flex justify-between gap-6 text-sm">
|
||||
<span class="text-neutral-500" x-text="preview.quantity + ' servers × ' + fmt(preview.unit_price)"></span>
|
||||
<span class="dark:text-white" x-text="fmt(preview.recurring_subtotal)"></span>
|
||||
</div>
|
||||
<div class="flex justify-between gap-6 text-sm" x-show="preview?.tax_description" x-cloak>
|
||||
<span class="text-neutral-500" x-text="preview?.tax_description"></span>
|
||||
<span class="dark:text-white" x-text="fmt(preview?.recurring_tax)"></span>
|
||||
</div>
|
||||
<div class="flex justify-between gap-6 text-sm font-bold pt-1.5 border-t dark:border-coolgray-400 border-neutral-200">
|
||||
<span class="dark:text-white">Total / month</span>
|
||||
<span class="dark:text-white" x-text="fmt(preview.recurring_total)"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Update Button with Confirmation --}}
|
||||
<x-modal-confirmation
|
||||
title="Confirm Server Limit Update"
|
||||
buttonTitle="Update Server Limit"
|
||||
submitAction="updateQuantity"
|
||||
:confirmWithText="false"
|
||||
:confirmWithPassword="false"
|
||||
:actions="[
|
||||
'Your server limit will be updated immediately.',
|
||||
'The prorated amount will be invoiced and charged now.',
|
||||
]"
|
||||
warningMessage="This will update your subscription and charge the prorated amount to your payment method."
|
||||
step2ButtonText="Confirm & Pay">
|
||||
<x-slot:content>
|
||||
<x-forms.button @click="$wire.set('quantity', qty)">
|
||||
Update Server Limit
|
||||
</x-forms.button>
|
||||
</x-slot:content>
|
||||
</x-modal-confirmation>
|
||||
</div>
|
||||
|
||||
{{-- Reduction Warning --}}
|
||||
<div x-show="isReduction" x-cloak>
|
||||
<x-callout type="danger" title="Warning">
|
||||
Reducing below your active server count will deactivate excess servers.
|
||||
</x-callout>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</section>
|
||||
|
||||
{{-- Billing, Refund & Cancellation --}}
|
||||
<section>
|
||||
<h3 class="pb-2">Manage Subscription</h3>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
{{-- Billing --}}
|
||||
<x-forms.button class="gap-2" wire:click='stripeCustomerPortal'>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Z" />
|
||||
</svg>
|
||||
Manage Billing on Stripe
|
||||
</x-forms.button>
|
||||
|
||||
{{-- Resume or Cancel --}}
|
||||
@if (currentTeam()->subscription->stripe_cancel_at_period_end)
|
||||
<x-forms.button wire:click="resumeSubscription">Resume Subscription</x-forms.button>
|
||||
@else
|
||||
<x-modal-confirmation title="Cancel at End of Billing Period?"
|
||||
buttonTitle="Cancel at Period End" submitAction="cancelAtPeriodEnd"
|
||||
:actions="[
|
||||
'Your subscription will remain active until the end of the current billing period.',
|
||||
'No further charges will be made after the current period.',
|
||||
'You can resubscribe at any time.',
|
||||
]" confirmationText="{{ currentTeam()->name }}"
|
||||
confirmationLabel="Enter your team name to confirm"
|
||||
shortConfirmationLabel="Team Name" step2ButtonText="Confirm Cancellation" />
|
||||
<x-modal-confirmation title="Cancel Immediately?" buttonTitle="Cancel Immediately"
|
||||
isErrorButton submitAction="cancelImmediately"
|
||||
:actions="[
|
||||
'Your subscription will be cancelled immediately.',
|
||||
'All servers will be deactivated.',
|
||||
'No refund will be issued for the remaining period.',
|
||||
]" confirmationText="{{ currentTeam()->name }}"
|
||||
confirmationLabel="Enter your team name to confirm"
|
||||
shortConfirmationLabel="Team Name" step2ButtonText="Permanently Cancel" />
|
||||
@endif
|
||||
|
||||
{{-- Refund --}}
|
||||
@if ($refundCheckLoading)
|
||||
<x-loading text="Checking refund..." />
|
||||
@elseif ($isRefundEligible && !currentTeam()->subscription->stripe_cancel_at_period_end)
|
||||
<x-modal-confirmation title="Request Full Refund?" buttonTitle="Request Full Refund"
|
||||
isErrorButton submitAction="refundSubscription"
|
||||
:actions="[
|
||||
'Your latest payment will be fully refunded.',
|
||||
'Your subscription will be cancelled immediately.',
|
||||
'All servers will be deactivated.',
|
||||
]" confirmationText="{{ currentTeam()->name }}"
|
||||
confirmationLabel="Enter your team name to confirm" shortConfirmationLabel="Team Name"
|
||||
step2ButtonText="Confirm Refund & Cancel" />
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-4">
|
||||
If you have any problems, please <a class="underline dark:text-white" href="{{ config('constants.urls.contact') }}"
|
||||
target="_blank">contact us.</a>
|
||||
|
||||
{{-- Contextual notes --}}
|
||||
@if ($isRefundEligible && !currentTeam()->subscription->stripe_cancel_at_period_end)
|
||||
<p class="mt-2 text-sm text-neutral-500">Eligible for a full refund — <strong class="dark:text-warning">{{ $refundDaysRemaining }}</strong> days remaining.</p>
|
||||
@elseif ($refundAlreadyUsed)
|
||||
<p class="mt-2 text-sm text-neutral-500">Refund already processed. Each team is eligible for one refund only.</p>
|
||||
@endif
|
||||
@if (currentTeam()->subscription->stripe_cancel_at_period_end)
|
||||
<p class="mt-2 text-sm text-neutral-500">Your subscription is set to cancel at the end of the billing period.</p>
|
||||
@endif
|
||||
</section>
|
||||
|
||||
<div class="text-sm text-neutral-500">
|
||||
Need help? <a class="underline dark:text-white" href="{{ config('constants.urls.contact') }}"
|
||||
target="_blank">Contact us.</a>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@@ -3,29 +3,26 @@
|
||||
Subscribe | Coolify
|
||||
</x-slot>
|
||||
@if (auth()->user()->isAdminFromSession())
|
||||
@if (request()->query->get('cancelled'))
|
||||
<div class="mb-6 rounded-sm alert-error">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 stroke-current shrink-0" fill="none"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span>Something went wrong with your subscription. Please try again or contact
|
||||
support.</span>
|
||||
</div>
|
||||
@endif
|
||||
<div class="flex gap-2">
|
||||
<h1>Subscriptions</h1>
|
||||
</div>
|
||||
@if ($loading)
|
||||
<div class="flex gap-2" wire:init="getStripeStatus">
|
||||
Loading your subscription status...
|
||||
<div class="flex items-center justify-center min-h-[60vh]" wire:init="getStripeStatus">
|
||||
<x-loading text="Loading your subscription status..." />
|
||||
</div>
|
||||
@else
|
||||
@if ($isUnpaid)
|
||||
<div class="mb-6 rounded-sm alert-error">
|
||||
<span>Your last payment was failed for Coolify Cloud.</span>
|
||||
</div>
|
||||
<x-banner :closable="false">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-5 h-5 text-red-500 shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span><span class="font-bold text-red-500">Payment Failed.</span> Your last payment for Coolify
|
||||
Cloud has failed.</span>
|
||||
</div>
|
||||
</x-banner>
|
||||
<div>
|
||||
<p class="mb-2">Open the following link, navigate to the button and pay your unpaid/past due
|
||||
subscription.
|
||||
@@ -34,18 +31,20 @@
|
||||
</div>
|
||||
@else
|
||||
@if (config('subscription.provider') === 'stripe')
|
||||
<div @class([
|
||||
'pb-4' => $isCancelled,
|
||||
'pb-10' => !$isCancelled,
|
||||
])>
|
||||
@if ($isCancelled)
|
||||
<div class="alert-error">
|
||||
<span>It looks like your previous subscription has been cancelled, because you forgot to
|
||||
pay
|
||||
the bills.<br />Please subscribe again to continue using Coolify.</span>
|
||||
@if ($isCancelled)
|
||||
<x-banner :closable="false">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-5 h-5 text-red-500 shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span><span class="font-bold text-red-500">No Active Subscription.</span> Subscribe to
|
||||
a plan to start using Coolify Cloud.</span>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</x-banner>
|
||||
@endif
|
||||
<div @class(['pt-4 pb-4' => $isCancelled, 'pb-10' => !$isCancelled])></div>
|
||||
<livewire:subscription.pricing-plans />
|
||||
@endif
|
||||
@endif
|
||||
|
||||
@@ -1,162 +1,123 @@
|
||||
<div x-data="{ selected: 'monthly' }" class="w-full pb-20">
|
||||
<div class="px-6 mx-auto lg:px-8">
|
||||
<div class="flex justify-center">
|
||||
<fieldset
|
||||
class="grid grid-cols-2 p-1 text-xs font-semibold leading-5 text-center rounded-sm dark:text-white gap-x-1 dark:bg-white/5 bg-black/5">
|
||||
<legend class="sr-only">Payment frequency</legend>
|
||||
<label
|
||||
:class="selected === 'monthly' ?
|
||||
'dark:bg-coollabs-100 bg-warning dark:text-white cursor-pointer rounded-sm px-2.5 py-1' :
|
||||
'cursor-pointer rounded-sm px-2.5 py-1'">
|
||||
<input type="radio" x-on:click="selected = 'monthly'" name="frequency" value="monthly"
|
||||
class="sr-only">
|
||||
<span :class="selected === 'monthly' ? 'dark:text-white' : ''">Monthly</span>
|
||||
</label>
|
||||
<label
|
||||
:class="selected === 'yearly' ?
|
||||
'dark:bg-coollabs-100 bg-warning dark:text-white cursor-pointer rounded-sm px-2.5 py-1' :
|
||||
'cursor-pointer rounded-sm px-2.5 py-1'">
|
||||
<input type="radio" x-on:click="selected = 'yearly'" name="frequency" value="annually"
|
||||
class="sr-only">
|
||||
<span :class="selected === 'yearly' ? 'dark:text-white' : ''">Annually <span
|
||||
class="text-xs dark:text-warning text-coollabs">(save ~20%)</span></span>
|
||||
</label>
|
||||
</fieldset>
|
||||
<div x-data="{ selected: 'monthly' }" class="w-full">
|
||||
{{-- Frequency Toggle --}}
|
||||
<div class="flex justify-center mb-8">
|
||||
<fieldset
|
||||
class="grid grid-cols-2 p-1 text-xs font-semibold leading-5 text-center rounded-sm dark:text-white gap-x-1 dark:bg-white/5 bg-black/5">
|
||||
<legend class="sr-only">Payment frequency</legend>
|
||||
<label
|
||||
:class="selected === 'monthly' ?
|
||||
'dark:bg-coollabs-100 bg-warning dark:text-white cursor-pointer rounded-sm px-2.5 py-1' :
|
||||
'cursor-pointer rounded-sm px-2.5 py-1'">
|
||||
<input type="radio" x-on:click="selected = 'monthly'" name="frequency" value="monthly"
|
||||
class="sr-only">
|
||||
<span :class="selected === 'monthly' ? 'dark:text-white' : ''">Monthly</span>
|
||||
</label>
|
||||
<label
|
||||
:class="selected === 'yearly' ?
|
||||
'dark:bg-coollabs-100 bg-warning dark:text-white cursor-pointer rounded-sm px-2.5 py-1' :
|
||||
'cursor-pointer rounded-sm px-2.5 py-1'">
|
||||
<input type="radio" x-on:click="selected = 'yearly'" name="frequency" value="annually"
|
||||
class="sr-only">
|
||||
<span :class="selected === 'yearly' ? 'dark:text-white' : ''">Annually <span
|
||||
class="text-xs dark:text-warning text-coollabs">(save ~20%)</span></span>
|
||||
</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div class="max-w-xl mx-auto">
|
||||
{{-- Plan Header + Pricing --}}
|
||||
<h3 id="tier-dynamic" class="text-2xl font-bold dark:text-white">Pay-as-you-go</h3>
|
||||
<p class="mt-1 text-sm dark:text-neutral-400">Dynamic pricing based on the number of servers you connect.</p>
|
||||
|
||||
<div class="mt-4 flex items-baseline gap-x-1">
|
||||
<span x-show="selected === 'monthly'" x-cloak>
|
||||
<span class="text-4xl font-bold tracking-tight dark:text-white">$5</span>
|
||||
<span class="text-sm dark:text-neutral-400">/ mo base</span>
|
||||
</span>
|
||||
<span x-show="selected === 'yearly'" x-cloak>
|
||||
<span class="text-4xl font-bold tracking-tight dark:text-white">$4</span>
|
||||
<span class="text-sm dark:text-neutral-400">/ mo base</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flow-root mt-12">
|
||||
<div
|
||||
class="grid grid-cols-1 -mt-16 divide-y divide-neutral-200 dark:divide-coolgray-500 isolate gap-y-16 sm:mx-auto lg:-mx-8 lg:mt-0 lg:max-w-none lg:grid-cols-1 lg:divide-x lg:divide-y-0 xl:-mx-4">
|
||||
<div class="pt-16 lg:px-8 lg:pt-0 xl:px-14">
|
||||
<h3 id="tier-dynamic" class="text-4xl font-semibold leading-7 dark:text-white">Pay-as-you-go</h3>
|
||||
<p class="mt-4 text-sm leading-6 dark:text-neutral-400">
|
||||
Dynamic pricing based on the number of servers you connect.
|
||||
</p>
|
||||
<p class="flex items-baseline mt-6 gap-x-1">
|
||||
<span x-show="selected === 'monthly'" x-cloak>
|
||||
<span class="text-4xl font-bold tracking-tight dark:text-white">$5</span>
|
||||
<span class="text-sm font-semibold leading-6 "> base price</span>
|
||||
</span>
|
||||
<p class="mt-1 text-sm dark:text-neutral-400">
|
||||
<span x-show="selected === 'monthly'" x-cloak>
|
||||
+ <span class="font-semibold dark:text-white">$3</span> per additional server, billed monthly (+VAT)
|
||||
</span>
|
||||
<span x-show="selected === 'yearly'" x-cloak>
|
||||
+ <span class="font-semibold dark:text-white">$2.7</span> per additional server, billed annually (+VAT)
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<span x-show="selected === 'yearly'" x-cloak>
|
||||
<span class="text-4xl font-bold tracking-tight dark:text-white">$4</span>
|
||||
<span class="text-sm font-semibold leading-6 "> base price</span>
|
||||
</span>
|
||||
</p>
|
||||
<p class="flex items-baseline mb-4 gap-x-1">
|
||||
<span x-show="selected === 'monthly'" x-cloak>
|
||||
<span class="text-base font-semibold tracking-tight dark:text-white">$3</span>
|
||||
<span class="text-sm font-semibold leading-6 "> per additional servers <span
|
||||
class="font-normal dark:text-white">billed monthly (+VAT)</span></span>
|
||||
</span>
|
||||
{{-- Subscribe Button --}}
|
||||
<div class="flex mt-6">
|
||||
<x-forms.button x-show="selected === 'monthly'" x-cloak aria-describedby="tier-dynamic"
|
||||
class="w-full" wire:click="subscribeStripe('dynamic-monthly')">
|
||||
Subscribe
|
||||
</x-forms.button>
|
||||
<x-forms.button x-show="selected === 'yearly'" x-cloak aria-describedby="tier-dynamic"
|
||||
class="w-full" wire:click="subscribeStripe('dynamic-yearly')">
|
||||
Subscribe
|
||||
</x-forms.button>
|
||||
</div>
|
||||
|
||||
<span x-show="selected === 'yearly'" x-cloak>
|
||||
<span class="text-base font-semibold tracking-tight dark:text-white">$2.7</span>
|
||||
<span class="text-sm font-semibold leading-6 "> per additional servers <span
|
||||
class="font-normal dark:text-white">billed annually (+VAT)</span></span>
|
||||
</span>
|
||||
</p>
|
||||
<div class="flex items-center pt-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="flex-none w-8 h-8 mr-3 dark:text-warning"
|
||||
fill="currentColor" viewBox="0 0 256 256">
|
||||
<path
|
||||
d="M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z">
|
||||
</path>
|
||||
</svg>
|
||||
{{-- Features --}}
|
||||
<div class="mt-8 pt-6 border-t dark:border-coolgray-400 border-neutral-200">
|
||||
<ul role="list" class="space-y-2.5 text-sm">
|
||||
<li class="flex items-center gap-2.5">
|
||||
<svg class="w-4 h-4 shrink-0 dark:text-warning" viewBox="0 0 20 20" fill="currentColor"
|
||||
aria-hidden="true">
|
||||
<path fill-rule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="dark:text-neutral-300">Connect <span
|
||||
class="font-bold dark:text-white">unlimited</span> servers</span>
|
||||
</li>
|
||||
<li class="flex items-center gap-2.5">
|
||||
<svg class="w-4 h-4 shrink-0 dark:text-warning" viewBox="0 0 20 20" fill="currentColor"
|
||||
aria-hidden="true">
|
||||
<path fill-rule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="dark:text-neutral-300">Deploy <span
|
||||
class="font-bold dark:text-white">unlimited</span> applications per server</span>
|
||||
</li>
|
||||
<li class="flex items-center gap-2.5">
|
||||
<svg class="w-4 h-4 shrink-0 dark:text-warning" viewBox="0 0 20 20" fill="currentColor"
|
||||
aria-hidden="true">
|
||||
<path fill-rule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="dark:text-neutral-300">Free email notifications</span>
|
||||
</li>
|
||||
<li class="flex items-center gap-2.5">
|
||||
<svg class="w-4 h-4 shrink-0 dark:text-warning" viewBox="0 0 20 20" fill="currentColor"
|
||||
aria-hidden="true">
|
||||
<path fill-rule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="dark:text-neutral-300">Support by email</span>
|
||||
</li>
|
||||
<li class="flex items-center gap-2.5 font-bold dark:text-white">
|
||||
<svg class="w-4 h-4 shrink-0 text-green-500" viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor"
|
||||
stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
|
||||
<path
|
||||
d="M4 13a8 8 0 0 1 7 7a6 6 0 0 0 3-5a9 9 0 0 0 6-8a3 3 0 0 0-3-3a9 9 0 0 0-8 6a6 6 0 0 0-5 3" />
|
||||
<path d="M7 14a6 6 0 0 0-3 6a6 6 0 0 0 6-3m4-8a1 1 0 1 0 2 0a1 1 0 1 0-2 0" />
|
||||
</svg>
|
||||
+ All Upcoming Features
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col text-sm dark:text-white">
|
||||
<div>
|
||||
You need to bring your own servers from any cloud provider (such as <a class="underline"
|
||||
href="https://coolify.io/hetzner" target="_blank">Hetzner</a>, DigitalOcean, AWS,
|
||||
etc.)
|
||||
</div>
|
||||
<div>
|
||||
(You can connect your RPi, old laptop, or any other device that runs
|
||||
the <a class="underline"
|
||||
href="https://coolify.io/docs/installation#supported-operating-systems"
|
||||
target="_blank">supported operating systems</a>.)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex pt-4 h-14">
|
||||
<x-forms.button x-show="selected === 'monthly'" x-cloak aria-describedby="tier-basic"
|
||||
class="w-full" wire:click="subscribeStripe('dynamic-monthly')">
|
||||
Subscribe
|
||||
</x-forms.button>
|
||||
<x-forms.button x-show="selected === 'yearly'" x-cloak aria-describedby="tier-basic"
|
||||
class="w-full" wire:click="subscribeStripe('dynamic-yearly')">
|
||||
Subscribe
|
||||
</x-forms.button>
|
||||
</div>
|
||||
<ul role="list" class="mt-8 space-y-3 text-sm leading-6 dark:text-neutral-400">
|
||||
<li class="flex">
|
||||
<svg class="flex-none w-5 h-6 mr-3 dark:text-warning" viewBox="0 0 20 20"
|
||||
fill="currentColor" aria-hidden="true">
|
||||
<path fill-rule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
Connect
|
||||
<span class="px-1 font-bold dark:text-white">unlimited</span> servers
|
||||
</li>
|
||||
<li class="flex">
|
||||
<svg class="flex-none w-5 h-6 mr-3 dark:text-warning" viewBox="0 0 20 20"
|
||||
fill="currentColor" aria-hidden="true">
|
||||
<path fill-rule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
Deploy
|
||||
<span class="px-1 font-bold dark:text-white">unlimited</span> applications per server
|
||||
</li>
|
||||
<li class="flex gap-x-3">
|
||||
<svg class="flex-none w-5 h-6 dark:text-warning" viewBox="0 0 20 20" fill="currentColor"
|
||||
aria-hidden="true">
|
||||
<path fill-rule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
Free email notifications
|
||||
</li>
|
||||
<li class="flex gap-x-3">
|
||||
<svg class="flex-none w-5 h-6 dark:text-warning" viewBox="0 0 20 20" fill="currentColor"
|
||||
aria-hidden="true">
|
||||
<path fill-rule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
Support by email
|
||||
</li>
|
||||
<li class="flex font-bold dark:text-white gap-x-3">
|
||||
<svg width="512" height="512" class="flex-none w-5 h-6 text-green-500"
|
||||
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" stroke="currentColor" stroke-linecap="round"
|
||||
stroke-linejoin="round" stroke-width="2">
|
||||
<path
|
||||
d="M4 13a8 8 0 0 1 7 7a6 6 0 0 0 3-5a9 9 0 0 0 6-8a3 3 0 0 0-3-3a9 9 0 0 0-8 6a6 6 0 0 0-5 3" />
|
||||
<path d="M7 14a6 6 0 0 0-3 6a6 6 0 0 0 6-3m4-8a1 1 0 1 0 2 0a1 1 0 1 0-2 0" />
|
||||
</g>
|
||||
</svg>
|
||||
+ All Upcoming Features
|
||||
</li>
|
||||
<li class="flex dark:text-white gap-x-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="flex-none w-5 h-6 text-green-500"
|
||||
viewBox="0 0 256 256">
|
||||
<rect width="256" height="256" fill="none" />
|
||||
<polyline points="32 136 72 136 88 112 120 160 136 136 160 136" fill="none"
|
||||
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="16" />
|
||||
<path
|
||||
d="M24,104c0-.67,0-1.33,0-2A54,54,0,0,1,78,48c22.59,0,41.94,12.31,50,32,8.06-19.69,27.41-32,50-32a54,54,0,0,1,54,54c0,66-104,122-104,122s-42-22.6-72.58-56"
|
||||
fill="none" stroke="currentColor" stroke-linecap="round"
|
||||
stroke-linejoin="round" stroke-width="16" />
|
||||
</svg>
|
||||
|
||||
Do you require official support for your self-hosted instance?<a class="underline"
|
||||
href="https://coolify.io/docs/contact" target="_blank">Contact Us</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{{-- BYOS Notice + Support --}}
|
||||
<div class="mt-6 pt-6 border-t dark:border-coolgray-400 border-neutral-200 text-sm dark:text-neutral-400">
|
||||
<p>You need to bring your own servers from any cloud provider (<a class="underline" href="https://coolify.io/hetzner" target="_blank">Hetzner</a>, DigitalOcean, AWS, etc.) or connect any device running a <a class="underline" href="https://coolify.io/docs/installation#supported-operating-systems" target="_blank">supported OS</a>.</p>
|
||||
<p class="mt-3">Need official support for your self-hosted instance? <a class="underline dark:text-white" href="https://coolify.io/docs/contact" target="_blank">Contact Us</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -3,6 +3,6 @@
|
||||
Subscription | Coolify
|
||||
</x-slot>
|
||||
<h1>Subscription</h1>
|
||||
<div class="subtitle">Here you can see and manage your subscription.</div>
|
||||
<div class="subtitle">Manage your plan, billing, and server limits.</div>
|
||||
<livewire:subscription.actions />
|
||||
</div>
|
||||
Reference in new issue
Block a user