mirror of
https://github.com/cupcakearmy/coolify.git
synced 2024-10-22 16:14:22 +02:00
Andras Bacsai
GitHub
commit
d1627276a6
@ -15,14 +15,11 @@ class Index extends Component
|
||||
{
|
||||
protected $listeners = ['serverInstalled' => 'validateServer'];
|
||||
|
||||
#[Url()]
|
||||
public string $state = 'welcome';
|
||||
public string $currentState = 'welcome';
|
||||
|
||||
#[Url()]
|
||||
public ?string $selectedServerType = null;
|
||||
public ?Collection $privateKeys = null;
|
||||
|
||||
#[Url()]
|
||||
public ?int $selectedExistingPrivateKey = null;
|
||||
public ?string $privateKeyType = null;
|
||||
public ?string $privateKey = null;
|
||||
@ -33,7 +30,6 @@ class Index extends Component
|
||||
|
||||
public ?Collection $servers = null;
|
||||
|
||||
#[Url()]
|
||||
public ?int $selectedExistingServer = null;
|
||||
public ?string $remoteServerName = null;
|
||||
public ?string $remoteServerDescription = null;
|
||||
@ -46,7 +42,6 @@ class Index extends Component
|
||||
|
||||
public Collection $projects;
|
||||
|
||||
#[Url()]
|
||||
public ?int $selectedProject = null;
|
||||
public ?Project $createdProject = null;
|
||||
|
||||
@ -71,25 +66,25 @@ public function mount()
|
||||
$this->remoteServerDescription = 'Created by Coolify';
|
||||
$this->remoteServerHost = 'coolify-testing-host';
|
||||
}
|
||||
if ($this->state === 'create-project') {
|
||||
$this->getProjects();
|
||||
}
|
||||
if ($this->state === 'create-resource') {
|
||||
$this->selectExistingServer();
|
||||
$this->selectExistingProject();
|
||||
}
|
||||
if ($this->state === 'private-key') {
|
||||
$this->setServerType('remote');
|
||||
}
|
||||
if ($this->state === 'create-server') {
|
||||
$this->selectExistingPrivateKey();
|
||||
}
|
||||
if ($this->state === 'validate-server') {
|
||||
$this->selectExistingServer();
|
||||
}
|
||||
if ($this->state === 'select-existing-server') {
|
||||
$this->selectExistingServer();
|
||||
}
|
||||
// if ($this->currentState === 'create-project') {
|
||||
// $this->getProjects();
|
||||
// }
|
||||
// if ($this->currentState === 'create-resource') {
|
||||
// $this->selectExistingServer();
|
||||
// $this->selectExistingProject();
|
||||
// }
|
||||
// if ($this->currentState === 'private-key') {
|
||||
// $this->setServerType('remote');
|
||||
// }
|
||||
// if ($this->currentState === 'create-server') {
|
||||
// $this->selectExistingPrivateKey();
|
||||
// }
|
||||
// if ($this->currentState === 'validate-server') {
|
||||
// $this->selectExistingServer();
|
||||
// }
|
||||
// if ($this->currentState === 'select-existing-server') {
|
||||
// $this->selectExistingServer();
|
||||
// }
|
||||
|
||||
}
|
||||
public function explanation()
|
||||
@ -97,7 +92,7 @@ public function explanation()
|
||||
if (isCloud()) {
|
||||
return $this->setServerType('remote');
|
||||
}
|
||||
$this->state = 'select-server-type';
|
||||
$this->currentState = 'select-server-type';
|
||||
}
|
||||
|
||||
public function restartBoarding()
|
||||
@ -136,10 +131,10 @@ public function setServerType(string $type)
|
||||
$this->servers = Server::ownedByCurrentTeam(['name'])->where('id', '!=', 0)->get();
|
||||
if ($this->servers->count() > 0) {
|
||||
$this->selectedExistingServer = $this->servers->first()->id;
|
||||
$this->state = 'select-existing-server';
|
||||
$this->currentState = 'select-existing-server';
|
||||
return;
|
||||
}
|
||||
$this->state = 'private-key';
|
||||
$this->currentState = 'private-key';
|
||||
}
|
||||
}
|
||||
public function selectExistingServer()
|
||||
@ -147,12 +142,12 @@ public function selectExistingServer()
|
||||
$this->createdServer = Server::find($this->selectedExistingServer);
|
||||
if (!$this->createdServer) {
|
||||
$this->dispatch('error', 'Server is not found.');
|
||||
$this->state = 'private-key';
|
||||
$this->currentState = 'private-key';
|
||||
return;
|
||||
}
|
||||
$this->selectedExistingPrivateKey = $this->createdServer->privateKey->id;
|
||||
$this->serverPublicKey = $this->createdServer->privateKey->publicKey();
|
||||
$this->state = 'validate-server';
|
||||
$this->currentState = 'validate-server';
|
||||
}
|
||||
public function getProxyType()
|
||||
{
|
||||
@ -160,7 +155,7 @@ public function getProxyType()
|
||||
$this->selectProxy(ProxyTypes::TRAEFIK_V2->value);
|
||||
// $proxyTypeSet = $this->createdServer->proxy->type;
|
||||
// if (!$proxyTypeSet) {
|
||||
// $this->state = 'select-proxy';
|
||||
// $this->currentState = 'select-proxy';
|
||||
// return;
|
||||
// }
|
||||
$this->getProjects();
|
||||
@ -173,12 +168,12 @@ public function selectExistingPrivateKey()
|
||||
}
|
||||
$this->createdPrivateKey = PrivateKey::find($this->selectedExistingPrivateKey);
|
||||
$this->privateKey = $this->createdPrivateKey->private_key;
|
||||
$this->state = 'create-server';
|
||||
$this->currentState = 'create-server';
|
||||
}
|
||||
public function createNewServer()
|
||||
{
|
||||
$this->selectedExistingServer = null;
|
||||
$this->state = 'private-key';
|
||||
$this->currentState = 'private-key';
|
||||
}
|
||||
public function setPrivateKey(string $type)
|
||||
{
|
||||
@ -187,7 +182,7 @@ public function setPrivateKey(string $type)
|
||||
if ($type === 'create') {
|
||||
$this->createNewPrivateKey();
|
||||
}
|
||||
$this->state = 'create-private-key';
|
||||
$this->currentState = 'create-private-key';
|
||||
}
|
||||
public function savePrivateKey()
|
||||
{
|
||||
@ -202,7 +197,7 @@ public function savePrivateKey()
|
||||
'team_id' => currentTeam()->id
|
||||
]);
|
||||
$this->createdPrivateKey->save();
|
||||
$this->state = 'create-server';
|
||||
$this->currentState = 'create-server';
|
||||
}
|
||||
public function saveServer()
|
||||
{
|
||||
@ -231,7 +226,7 @@ public function saveServer()
|
||||
$this->createdServer->settings->save();
|
||||
$this->createdServer->addInitialNetwork();
|
||||
$this->selectedExistingServer = $this->createdServer->id;
|
||||
$this->state = 'validate-server';
|
||||
$this->currentState = 'validate-server';
|
||||
}
|
||||
public function installServer()
|
||||
{
|
||||
@ -258,7 +253,7 @@ public function validateServer()
|
||||
$dockerVersion = instant_remote_process(["docker version|head -2|grep -i version| awk '{print $2}'"], $this->createdServer, true);
|
||||
$dockerVersion = checkMinimumDockerEngineVersion($dockerVersion);
|
||||
if (is_null($dockerVersion)) {
|
||||
$this->state = 'validate-server';
|
||||
$this->currentState = 'validate-server';
|
||||
throw new \Exception('Docker not found or old version is installed.');
|
||||
}
|
||||
$this->createdServer->settings()->update([
|
||||
@ -286,12 +281,12 @@ public function getProjects()
|
||||
if ($this->projects->count() > 0) {
|
||||
$this->selectedProject = $this->projects->first()->id;
|
||||
}
|
||||
$this->state = 'create-project';
|
||||
$this->currentState = 'create-project';
|
||||
}
|
||||
public function selectExistingProject()
|
||||
{
|
||||
$this->createdProject = Project::find($this->selectedProject);
|
||||
$this->state = 'create-resource';
|
||||
$this->currentState = 'create-resource';
|
||||
}
|
||||
public function createNewProject()
|
||||
{
|
||||
@ -299,7 +294,7 @@ public function createNewProject()
|
||||
'name' => "My first project",
|
||||
'team_id' => currentTeam()->id
|
||||
]);
|
||||
$this->state = 'create-resource';
|
||||
$this->currentState = 'create-resource';
|
||||
}
|
||||
public function showNewResource()
|
||||
{
|
||||
|
||||
@ -41,7 +41,6 @@
|
||||
"stripe/stripe-php": "^12.0",
|
||||
"symfony/yaml": "^6.2",
|
||||
"visus/cuid2": "^2.0.0",
|
||||
"wire-elements/modal": "^2.0",
|
||||
"yosymfony/toml": "^1.0"
|
||||
},
|
||||
"require-dev": {
|
||||
|
||||
60
composer.lock
generated
60
composer.lock
generated
@ -4,7 +4,7 @@
|
||||
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
|
||||
"This file is @generated automatically"
|
||||
],
|
||||
"content-hash": "9bdaf702cdd870434444f8937a816fdb",
|
||||
"content-hash": "e095b8a9eb22df2943cbc3e9649ff9e8",
|
||||
"packages": [
|
||||
{
|
||||
"name": "amphp/amp",
|
||||
@ -11859,64 +11859,6 @@
|
||||
},
|
||||
"time": "2022-06-03T18:03:27+00:00"
|
||||
},
|
||||
{
|
||||
"name": "wire-elements/modal",
|
||||
"version": "2.0.9",
|
||||
"source": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/wire-elements/modal.git",
|
||||
"reference": "899b05e313403669aa8a359db71a066246184355"
|
||||
},
|
||||
"dist": {
|
||||
"type": "zip",
|
||||
"url": "https://api.github.com/repos/wire-elements/modal/zipball/899b05e313403669aa8a359db71a066246184355",
|
||||
"reference": "899b05e313403669aa8a359db71a066246184355",
|
||||
"shasum": ""
|
||||
},
|
||||
"require": {
|
||||
"livewire/livewire": "^3.2.3",
|
||||
"php": "^8.1",
|
||||
"spatie/laravel-package-tools": "^1.9"
|
||||
},
|
||||
"require-dev": {
|
||||
"orchestra/testbench": "^8.5",
|
||||
"phpunit/phpunit": "^9.5"
|
||||
},
|
||||
"type": "library",
|
||||
"extra": {
|
||||
"laravel": {
|
||||
"providers": [
|
||||
"LivewireUI\\Modal\\LivewireModalServiceProvider"
|
||||
]
|
||||
}
|
||||
},
|
||||
"autoload": {
|
||||
"psr-4": {
|
||||
"LivewireUI\\Modal\\": "src"
|
||||
}
|
||||
},
|
||||
"notification-url": "https://packagist.org/downloads/",
|
||||
"license": [
|
||||
"MIT"
|
||||
],
|
||||
"authors": [
|
||||
{
|
||||
"name": "Philo Hermans",
|
||||
"email": "me@philohermans.com"
|
||||
}
|
||||
],
|
||||
"description": "Laravel Livewire modal component",
|
||||
"keywords": [
|
||||
"laravel",
|
||||
"livewire",
|
||||
"modal"
|
||||
],
|
||||
"support": {
|
||||
"issues": "https://github.com/wire-elements/modal/issues",
|
||||
"source": "https://github.com/wire-elements/modal/tree/2.0.9"
|
||||
},
|
||||
"time": "2023-12-08T09:31:14+00:00"
|
||||
},
|
||||
{
|
||||
"name": "yosymfony/parser-utils",
|
||||
"version": "v2.0.0",
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
|
||||
// The release version of your application
|
||||
// Example with dynamic git hash: trim(exec('git --git-dir ' . base_path('.git') . ' log --pretty="%h" -n1 HEAD'))
|
||||
'release' => '4.0.0-beta.242',
|
||||
'release' => '4.0.0-beta.243',
|
||||
// When left empty or `null` the Laravel environment will be used
|
||||
'environment' => config('app.env'),
|
||||
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
<?php
|
||||
|
||||
return '4.0.0-beta.242';
|
||||
return '4.0.0-beta.243';
|
||||
|
||||
@ -1,52 +0,0 @@
|
||||
<?php
|
||||
|
||||
return [
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Include CSS
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| The modal uses TailwindCSS, if you don't use TailwindCSS you will need
|
||||
| to set this parameter to true. This includes the modern-normalize css.
|
||||
|
|
||||
*/
|
||||
'include_css' => false,
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Include JS
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Livewire UI will inject the required Javascript in your blade template.
|
||||
| If you want to bundle the required Javascript you can set this to false
|
||||
| and add `require('vendor/wire-elements/modal/resources/js/modal');`
|
||||
| to your script bundler like webpack.
|
||||
|
|
||||
*/
|
||||
'include_js' => false,
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Modal Component Defaults
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Configure the default properties for a modal component.
|
||||
|
|
||||
| Supported modal_max_width
|
||||
| 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl'
|
||||
*/
|
||||
'component_defaults' => [
|
||||
'modal_max_width' => '7xl',
|
||||
|
||||
'close_modal_on_click_away' => true,
|
||||
|
||||
'close_modal_on_escape' => true,
|
||||
|
||||
'close_modal_on_escape_is_forceful' => true,
|
||||
|
||||
'dispatch_close_event' => false,
|
||||
|
||||
'destroy_on_close' => false,
|
||||
],
|
||||
];
|
||||
@ -1,6 +1,5 @@
|
||||
import { createApp } from "vue";
|
||||
import MagicBar from "./components/MagicBar.vue";
|
||||
import "../../vendor/wire-elements/modal/resources/js/modal";
|
||||
|
||||
const app = createApp({});
|
||||
app.component("magic-bar", MagicBar);
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<div>
|
||||
<div class="flex flex-col items-center pb-8">
|
||||
<div class="text-5xl font-bold tracking-tight text-center dark:text-white">Coolify</div>
|
||||
<x-version />
|
||||
{{-- <x-version /> --}}
|
||||
</div>
|
||||
<div class="w-96">
|
||||
<form action="/user/confirm-password" method="POST" class="flex flex-col gap-2">
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<a href="{{ route('dashboard') }}">
|
||||
<div class="text-5xl font-bold tracking-tight text-center dark:text-white">Coolify</div>
|
||||
</a>
|
||||
<x-version />
|
||||
{{-- <x-version /> --}}
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
|
||||
@ -3,31 +3,25 @@
|
||||
<div>
|
||||
<div class="flex flex-col items-center pb-8">
|
||||
<div class="text-5xl font-bold tracking-tight text-center dark:text-white">Coolify</div>
|
||||
<x-version />
|
||||
{{-- <x-version /> --}}
|
||||
</div>
|
||||
<div class="w-96" x-data="{ showRecovery: false }">
|
||||
<div class="w-96">
|
||||
<form action="/two-factor-challenge" method="POST" class="flex flex-col gap-2">
|
||||
@csrf
|
||||
<template x-if="!showRecovery">
|
||||
<div>
|
||||
<x-forms.input required type="number" name="code" label="{{ __('input.code') }}"
|
||||
autofocus />
|
||||
<div class="pt-2 text-xs cursor-pointer hover:underline hover:dark:text-white"
|
||||
x-on:click="showRecovery = !showRecovery">Use
|
||||
Recovery Code
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template x-if="showRecovery">
|
||||
<div>
|
||||
<x-forms.input required type="text" name="recovery_code"
|
||||
label="{{ __('input.recovery_code') }}" />
|
||||
<div class="pt-2 text-xs cursor-pointer hover:underline hover:dark:text-white"
|
||||
x-on:click="showRecovery = !showRecovery">Use
|
||||
One-Time Code
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
<x-forms.input autofocus type="number" name="code" label="{{ __('input.code') }}" autofocus />
|
||||
{{-- <div class="pt-2 text-xs cursor-pointer hover:underline hover:dark:text-white"
|
||||
x-on:click="showRecovery = !showRecovery">Use
|
||||
Recovery Code
|
||||
</div> --}}
|
||||
</div>
|
||||
<div>
|
||||
<x-forms.input name="recovery_code" label="{{ __('input.recovery_code') }}" />
|
||||
{{-- <div class="pt-2 text-xs cursor-pointer hover:underline hover:dark:text-white"
|
||||
x-on:click="showRecovery = !showRecovery">Use
|
||||
One-Time Code
|
||||
</div> --}}
|
||||
</div>
|
||||
<x-forms.button type="submit">{{ __('auth.login') }}</x-forms.button>
|
||||
</form>
|
||||
@if ($errors->any())
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<x-layout-subscription>
|
||||
<div class="min-h-screen hero">
|
||||
<div class="min-w-fit">
|
||||
<x-layout>
|
||||
<section class="flex flex-col h-full lg:items-center lg:justify-center">
|
||||
<div class="flex flex-col items-center justify-center px-6 py-8 mx-auto max-w-7xl lg:py-0">
|
||||
<h1> Verification Email Sent </h1>
|
||||
<div class="flex justify-center gap-2 text-center">
|
||||
<br>To activate your account, please open the email and follow the
|
||||
@ -8,5 +8,5 @@
|
||||
</div>
|
||||
<livewire:verify-email />
|
||||
</div>
|
||||
</div>
|
||||
</x-layout-subscription>
|
||||
</section>
|
||||
</x-layout>
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
<ul role="list" class="flex flex-col flex-1 gap-y-7">
|
||||
<li class="flex-1 ">
|
||||
<ul role="list" class="flex flex-col h-full space-y-1.5">
|
||||
@if (isSubscribed())
|
||||
@if (isSubscribed() || !isCloud())
|
||||
<li>
|
||||
<a title="Dashboard" href="/"
|
||||
class="{{ request()->is('/') ? 'menu-item-active menu-item' : 'menu-item' }}">
|
||||
@ -263,7 +263,7 @@ class="{{ request()->is('onboarding*') ? 'menu-item-active menu-item' : 'menu-it
|
||||
<livewire:help />
|
||||
</x-modal-input>
|
||||
</li>
|
||||
<li >
|
||||
<li>
|
||||
<form action="/logout" method="POST">
|
||||
@csrf
|
||||
<button title="Logout" type="submit" class="gap-2 mb-6 menu-item">
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@extends('layouts.base')
|
||||
@section('body')
|
||||
@parent
|
||||
@if (isSubscribed())
|
||||
@if (isSubscribed() || !isCloud())
|
||||
<livewire:layout-popups />
|
||||
@endif
|
||||
@auth
|
||||
|
||||
@ -38,7 +38,6 @@
|
||||
@section('body')
|
||||
|
||||
<body>
|
||||
{{-- @livewire('wire-elements-modal') --}}
|
||||
<x-toast />
|
||||
<script data-navigate-once>
|
||||
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia(
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@extends('layouts.base')
|
||||
@section('body')
|
||||
<main class="h-full bg-gray-50 dark:bg-base">
|
||||
{{ $slot }}
|
||||
{{ $slot }}
|
||||
</main>
|
||||
@parent
|
||||
@endsection
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@extends('layouts.base')
|
||||
@section('body')
|
||||
@parent
|
||||
<main>
|
||||
<main class="h-full bg-gray-50 dark:bg-base">
|
||||
{{ $slot }}
|
||||
</main>
|
||||
@parent
|
||||
@endsection
|
||||
|
||||
@ -1,345 +1,322 @@
|
||||
@php use App\Enums\ProxyTypes; @endphp
|
||||
<section class="flex flex-col h-full lg:items-center lg:justify-center">
|
||||
<div class="flex flex-col items-center justify-center px-6 py-8 mx-auto max-w-7xl lg:py-0">
|
||||
@if ($state === 'welcome')
|
||||
@if ($currentState === 'welcome')
|
||||
<h1 class="text-3xl font-bold lg:text-5xl">Welcome to Coolify</h1>
|
||||
<p class="py-6 text-base text-center lg:text-xl">Let me help you set up the basics.</p>
|
||||
<div class="flex justify-center ">
|
||||
<x-forms.button class="justify-center w-64 box" wire:click="$set('state','explanation')">Get
|
||||
<x-forms.button class="justify-center w-64 box" wire:click="$set('currentState','explanation')">Get
|
||||
Started
|
||||
</x-forms.button>
|
||||
</div>
|
||||
@endif
|
||||
<div>
|
||||
@if ($state === 'explanation')
|
||||
<x-boarding-step title="What is Coolify?">
|
||||
<x-slot:question>
|
||||
Coolify is an all-in-one application to automate tasks on your servers, deploy application with
|
||||
Git
|
||||
integrations, deploy databases and services, monitor these resources with notifications and
|
||||
alerts
|
||||
without vendor lock-in
|
||||
and <a href="https://coolify.io" class="dark:text-white hover:underline">much much more</a>.
|
||||
<br><br>
|
||||
<span class="text-xl">
|
||||
<x-highlighted text="Self-hosting with superpowers!" /></span>
|
||||
</x-slot:question>
|
||||
<x-slot:explanation>
|
||||
<p><x-highlighted text="Task automation:" /> You don't need to manage your servers anymore.
|
||||
Coolify does
|
||||
it for you.</p>
|
||||
<p><x-highlighted text="No vendor lock-in:" /> All configurations are stored on your servers, so
|
||||
everything works without a connection to Coolify (except integrations and automations).</p>
|
||||
<p><x-highlighted text="Monitoring:" />You can get notified on your favourite platforms
|
||||
(Discord,
|
||||
Telegram, Email, etc.) when something goes wrong, or an action is needed from your side.</p>
|
||||
</x-slot:explanation>
|
||||
<x-slot:actions>
|
||||
<x-forms.button class="justify-center lg:w-64 box" wire:click="explanation">Next
|
||||
</x-forms.button>
|
||||
</x-slot:actions>
|
||||
</x-boarding-step>
|
||||
@endif
|
||||
@if ($state === 'select-server-type')
|
||||
<x-boarding-step title="Server">
|
||||
<x-slot:question>
|
||||
Do you want to deploy your resources to your <x-highlighted text="Localhost" />
|
||||
or to a <x-highlighted text="Remote Server" />?
|
||||
</x-slot:question>
|
||||
<x-slot:actions>
|
||||
<x-forms.button class="justify-center w-64 box" wire:target="setServerType('localhost')"
|
||||
wire:click="setServerType('localhost')">Localhost
|
||||
</x-forms.button>
|
||||
@elseif ($currentState === 'explanation')
|
||||
<x-boarding-step title="What is Coolify?">
|
||||
<x-slot:question>
|
||||
Coolify is an all-in-one application to automate tasks on your servers, deploy application with
|
||||
Git
|
||||
integrations, deploy databases and services, monitor these resources with notifications and
|
||||
alerts
|
||||
without vendor lock-in
|
||||
and <a href="https://coolify.io" class="dark:text-white hover:underline">much much more</a>.
|
||||
<br><br>
|
||||
<span class="text-xl">
|
||||
<x-highlighted text="Self-hosting with superpowers!" /></span>
|
||||
</x-slot:question>
|
||||
<x-slot:explanation>
|
||||
<p><x-highlighted text="Task automation:" /> You don't need to manage your servers anymore.
|
||||
Coolify does
|
||||
it for you.</p>
|
||||
<p><x-highlighted text="No vendor lock-in:" /> All configurations are stored on your servers, so
|
||||
everything works without a connection to Coolify (except integrations and automations).</p>
|
||||
<p><x-highlighted text="Monitoring:" />You can get notified on your favourite platforms
|
||||
(Discord,
|
||||
Telegram, Email, etc.) when something goes wrong, or an action is needed from your side.</p>
|
||||
</x-slot:explanation>
|
||||
<x-slot:actions>
|
||||
<x-forms.button class="justify-center lg:w-64 box" wire:click="explanation">Next
|
||||
</x-forms.button>
|
||||
</x-slot:actions>
|
||||
</x-boarding-step>
|
||||
@elseif ($currentState === 'select-server-type')
|
||||
<x-boarding-step title="Server">
|
||||
<x-slot:question>
|
||||
Do you want to deploy your resources to your <x-highlighted text="Localhost" />
|
||||
or to a <x-highlighted text="Remote Server" />?
|
||||
</x-slot:question>
|
||||
<x-slot:actions>
|
||||
<x-forms.button class="justify-center w-64 box" wire:target="setServerType('localhost')"
|
||||
wire:click="setServerType('localhost')">Localhost
|
||||
</x-forms.button>
|
||||
|
||||
<x-forms.button class="justify-center w-64 box " wire:target="setServerType('remote')"
|
||||
wire:click="setServerType('remote')">Remote Server
|
||||
<x-forms.button class="justify-center w-64 box " wire:target="setServerType('remote')"
|
||||
wire:click="setServerType('remote')">Remote Server
|
||||
</x-forms.button>
|
||||
@if (!$serverReachable)
|
||||
Localhost is not reachable with the following public key.
|
||||
<br /> <br />
|
||||
Please make sure you have the correct public key in your ~/.ssh/authorized_keys file for
|
||||
user
|
||||
'root' or skip the boarding process and add a new private key manually to Coolify and to the
|
||||
server.
|
||||
<br />
|
||||
Check this <a target="_blank" class="underline"
|
||||
href="https://coolify.io/docs/server/openssh">documentation</a> for further help.
|
||||
<x-forms.input readonly id="serverPublicKey"></x-forms.input>
|
||||
<x-forms.button class="lg:w-64 box" wire:target="setServerType('localhost')"
|
||||
wire:click="setServerType('localhost')">Check again
|
||||
</x-forms.button>
|
||||
@if (!$serverReachable)
|
||||
Localhost is not reachable with the following public key.
|
||||
<br /> <br />
|
||||
Please make sure you have the correct public key in your ~/.ssh/authorized_keys file for
|
||||
user
|
||||
'root' or skip the boarding process and add a new private key manually to Coolify and to the
|
||||
server.
|
||||
<br />
|
||||
Check this <a target="_blank" class="underline"
|
||||
href="https://coolify.io/docs/server/openssh">documentation</a> for further help.
|
||||
<x-forms.input readonly id="serverPublicKey"></x-forms.input>
|
||||
<x-forms.button class="lg:w-64 box" wire:target="setServerType('localhost')"
|
||||
wire:click="setServerType('localhost')">Check again
|
||||
@endif
|
||||
</x-slot:actions>
|
||||
<x-slot:explanation>
|
||||
<p>Servers are the main building blocks, as they will host your applications, databases,
|
||||
services, called resources. Any CPU intensive process will use the server's CPU where you
|
||||
are deploying your resources.</p>
|
||||
<p><x-highlighted text="Localhost" /> is the server where Coolify is running on. It is not
|
||||
recommended to use one server
|
||||
for everything.</p>
|
||||
<p><x-highlighted text="A remote server" /> is a server reachable through SSH. It can be hosted
|
||||
at home, or from any cloud
|
||||
provider.</p>
|
||||
</x-slot:explanation>
|
||||
</x-boarding-step>
|
||||
@elseif ($currentState === 'private-key')
|
||||
<x-boarding-step title="SSH Key">
|
||||
<x-slot:question>
|
||||
Do you have your own SSH Private Key?
|
||||
</x-slot:question>
|
||||
<x-slot:actions>
|
||||
<x-forms.button class="justify-center lg:w-64 box" wire:target="setPrivateKey('own')"
|
||||
wire:click="setPrivateKey('own')">Yes
|
||||
</x-forms.button>
|
||||
<x-forms.button class="justify-center lg:w-64 box" wire:target="setPrivateKey('create')"
|
||||
wire:click="setPrivateKey('create')">No (create one for me)
|
||||
</x-forms.button>
|
||||
@if (count($privateKeys) > 0)
|
||||
<form wire:submit='selectExistingPrivateKey' class="flex flex-col w-full gap-4 lg:pr-10">
|
||||
<x-forms.select label="Existing SSH Keys" id='selectedExistingPrivateKey'>
|
||||
@foreach ($privateKeys as $privateKey)
|
||||
<option wire:key="{{ $loop->index }}" value="{{ $privateKey->id }}">
|
||||
{{ $privateKey->name }}</option>
|
||||
@endforeach
|
||||
</x-forms.select>
|
||||
<x-forms.button type="submit">Use this SSH Key</x-forms.button>
|
||||
</form>
|
||||
@endif
|
||||
</x-slot:actions>
|
||||
<x-slot:explanation>
|
||||
<p>SSH Keys are used to connect to a remote server through a secure shell, called SSH.</p>
|
||||
<p>You can use your own ssh private key, or you can let Coolify to create one for you.</p>
|
||||
<p>In both ways, you need to add the public version of your ssh private key to the remote
|
||||
server's
|
||||
<code class="dark:text-warning">~/.ssh/authorized_keys</code> file.
|
||||
</p>
|
||||
</x-slot:explanation>
|
||||
</x-boarding-step>
|
||||
@elseif ($currentState === 'select-existing-server')
|
||||
<x-boarding-step title="Select a server">
|
||||
<x-slot:question>
|
||||
There are already servers available for your Team. Do you want to use one of them?
|
||||
</x-slot:question>
|
||||
<x-slot:actions>
|
||||
<div class="flex flex-col gap-4">
|
||||
<div>
|
||||
<x-forms.button class="justify-center w-64 box" wire:click="createNewServer">No (create
|
||||
one
|
||||
for
|
||||
me)
|
||||
</x-forms.button>
|
||||
@endif
|
||||
</x-slot:actions>
|
||||
<x-slot:explanation>
|
||||
<p>Servers are the main building blocks, as they will host your applications, databases,
|
||||
services, called resources. Any CPU intensive process will use the server's CPU where you
|
||||
are deploying your resources.</p>
|
||||
<p><x-highlighted text="Localhost" /> is the server where Coolify is running on. It is not
|
||||
recommended to use one server
|
||||
for everything.</p>
|
||||
<p><x-highlighted text="A remote server" /> is a server reachable through SSH. It can be hosted
|
||||
at home, or from any cloud
|
||||
provider.</p>
|
||||
</x-slot:explanation>
|
||||
</x-boarding-step>
|
||||
@endif
|
||||
</div>
|
||||
<div>
|
||||
@if ($state === 'private-key')
|
||||
<x-boarding-step title="SSH Key">
|
||||
<x-slot:question>
|
||||
Do you have your own SSH Private Key?
|
||||
</x-slot:question>
|
||||
<x-slot:actions>
|
||||
<x-forms.button class="justify-center lg:w-64 box" wire:target="setPrivateKey('own')"
|
||||
wire:click="setPrivateKey('own')">Yes
|
||||
</x-forms.button>
|
||||
<x-forms.button class="justify-center lg:w-64 box" wire:target="setPrivateKey('create')"
|
||||
wire:click="setPrivateKey('create')">No (create one for me)
|
||||
</x-forms.button>
|
||||
@if (count($privateKeys) > 0)
|
||||
<form wire:submit='selectExistingPrivateKey' class="flex flex-col w-full gap-4 lg:pr-10">
|
||||
<x-forms.select label="Existing SSH Keys" id='selectedExistingPrivateKey'>
|
||||
@foreach ($privateKeys as $privateKey)
|
||||
<option wire:key="{{ $loop->index }}" value="{{ $privateKey->id }}">
|
||||
{{ $privateKey->name }}</option>
|
||||
</div>
|
||||
<div>
|
||||
<form wire:submit='selectExistingServer' class="flex flex-col w-full gap-4 lg:w-96">
|
||||
<x-forms.select label="Existing servers" class="w-96" id='selectedExistingServer'>
|
||||
@foreach ($servers as $server)
|
||||
<option wire:key="{{ $loop->index }}" value="{{ $server->id }}">
|
||||
{{ $server->name }}</option>
|
||||
@endforeach
|
||||
</x-forms.select>
|
||||
<x-forms.button type="submit">Use this SSH Key</x-forms.button>
|
||||
<x-forms.button type="submit">Use this Server</x-forms.button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@if (!$serverReachable)
|
||||
This server is not reachable with the following public key.
|
||||
<br /> <br />
|
||||
Please make sure you have the correct public key in your ~/.ssh/authorized_keys file for
|
||||
user
|
||||
'root' or skip the boarding process and add a new private key manually to Coolify and to the
|
||||
server.
|
||||
<x-forms.input readonly id="serverPublicKey"></x-forms.input>
|
||||
<x-forms.button class="w-64 box" wire:target="validateServer" wire:click="validateServer">Check
|
||||
again
|
||||
</x-forms.button>
|
||||
@endif
|
||||
</x-slot:actions>
|
||||
<x-slot:explanation>
|
||||
<p>Private Keys are used to connect to a remote server through a secure shell, called SSH.</p>
|
||||
<p>You can use your own private key, or you can let Coolify to create one for you.</p>
|
||||
<p>In both ways, you need to add the public version of your private key to the remote server's
|
||||
<code>~/.ssh/authorized_keys</code> file.
|
||||
</p>
|
||||
</x-slot:explanation>
|
||||
</x-boarding-step>
|
||||
@elseif ($currentState === 'create-private-key')
|
||||
<x-boarding-step title="Create Private Key">
|
||||
<x-slot:question>
|
||||
Please let me know your key details.
|
||||
</x-slot:question>
|
||||
<x-slot:actions>
|
||||
<form wire:submit='savePrivateKey' class="flex flex-col w-full gap-4 lg:pr-10">
|
||||
<x-forms.input required placeholder="Choose a name for your Private Key. Could be anything."
|
||||
label="Name" id="privateKeyName" />
|
||||
<x-forms.input placeholder="Description, so others will know more about this."
|
||||
label="Description" id="privateKeyDescription" />
|
||||
<x-forms.textarea required placeholder="-----BEGIN OPENSSH PRIVATE KEY-----" label="Private Key"
|
||||
id="privateKey" />
|
||||
@if ($privateKeyType === 'create')
|
||||
<x-forms.textarea rows="7" readonly label="Public Key" id="publicKey" />
|
||||
<span class="font-bold dark:text-warning">ACTION REQUIRED: Copy the 'Public Key' to your
|
||||
server's
|
||||
~/.ssh/authorized_keys
|
||||
file.</span>
|
||||
@endif
|
||||
<x-forms.button type="submit">Save</x-forms.button>
|
||||
</form>
|
||||
</x-slot:actions>
|
||||
<x-slot:explanation>
|
||||
<p>Private Keys are used to connect to a remote server through a secure shell, called SSH.</p>
|
||||
<p>You can use your own private key, or you can let Coolify to create one for you.</p>
|
||||
<p>In both ways, you need to add the public version of your private key to the remote server's
|
||||
<code>~/.ssh/authorized_keys</code> file.
|
||||
</p>
|
||||
</x-slot:explanation>
|
||||
</x-boarding-step>
|
||||
@elseif ($currentState === 'create-server')
|
||||
<x-boarding-step title="Create Server">
|
||||
<x-slot:question>
|
||||
Please let me know your server details.
|
||||
</x-slot:question>
|
||||
<x-slot:actions>
|
||||
<form wire:submit='saveServer' class="flex flex-col w-full gap-4 lg:pr-10">
|
||||
<div class="flex flex-col gap-2 lg:flex-row">
|
||||
<x-forms.input required placeholder="Choose a name for your Server. Could be anything."
|
||||
label="Name" id="remoteServerName" />
|
||||
<x-forms.input placeholder="Description, so others will know more about this."
|
||||
label="Description" id="remoteServerDescription" />
|
||||
</div>
|
||||
<div class="flex flex-col gap-2 lg:flex-row ">
|
||||
<x-forms.input required placeholder="127.0.0.1" label="IP Address" id="remoteServerHost" />
|
||||
<x-forms.input required placeholder="Port number of your server. Default is 22."
|
||||
label="Port" id="remoteServerPort" />
|
||||
<x-forms.input required readonly
|
||||
placeholder="Username to connect to your server. Default is root." label="Username"
|
||||
id="remoteServerUser" />
|
||||
</div>
|
||||
<div class="lg:w-64">
|
||||
<x-forms.checkbox
|
||||
helper="If you are using Cloudflare Tunnels, enable this. It will proxy all ssh requests to your server through Cloudflare.<br><span class='dark:text-warning'>Coolify does not install/setup Cloudflare (cloudflared) on your server.</span>"
|
||||
id="isCloudflareTunnel" label="Cloudflare Tunnel" />
|
||||
</div>
|
||||
<x-forms.button type="submit">Continue</x-forms.button>
|
||||
</form>
|
||||
</x-slot:actions>
|
||||
<x-slot:explanation>
|
||||
<p>Username should be <x-highlighted text="root" /> for now. We are working on to use
|
||||
non-root users.</p>
|
||||
</x-slot:explanation>
|
||||
</x-boarding-step>
|
||||
@elseif ($currentState === 'validate-server')
|
||||
<x-boarding-step title="Validate & Configure Server">
|
||||
<x-slot:question>
|
||||
I need to validate your server (connection, Docker Engine, etc) and configure if something is
|
||||
missing for me. Are you okay with this?
|
||||
</x-slot:question>
|
||||
<x-slot:actions>
|
||||
<x-slide-over closeWithX fullScreen>
|
||||
<x-slot:title>Validate & configure</x-slot:title>
|
||||
<x-slot:content>
|
||||
<livewire:server.validate-and-install :server="$this->createdServer" />
|
||||
</x-slot:content>
|
||||
<x-forms.button @click="slideOverOpen=true" class="w-full font-bold box lg:w-96"
|
||||
wire:click.prevent='installServer' isHighlighted>
|
||||
Let's do it!
|
||||
</x-forms.button>
|
||||
</x-slide-over>
|
||||
</x-slot:actions>
|
||||
<x-slot:explanation>
|
||||
<p>This will install the latest Docker Engine on your server, configure a few things to be able
|
||||
to run optimal.<br><br>Minimum Docker Engine version is: 22<br><br>To manually install
|
||||
Docker
|
||||
Engine, check <a target="_blank" class="underline dark:text-warning"
|
||||
href="https://docs.docker.com/engine/install/#server">this
|
||||
documentation</a>.</p>
|
||||
</x-slot:explanation>
|
||||
</x-boarding-step>
|
||||
@elseif ($currentState === 'create-project')
|
||||
<x-boarding-step title="Project">
|
||||
<x-slot:question>
|
||||
@if (count($projects) > 0)
|
||||
You already have some projects. Do you want to use one of them or should I create a new one
|
||||
for
|
||||
you?
|
||||
@else
|
||||
Let's create an initial project for you. You can change all the details later on.
|
||||
@endif
|
||||
</x-slot:question>
|
||||
<x-slot:actions>
|
||||
<x-forms.button class="justify-center w-64 box" wire:click="createNewProject">Create new
|
||||
project!</x-forms.button>
|
||||
<div>
|
||||
@if (count($projects) > 0)
|
||||
<form wire:submit='selectExistingProject' class="flex flex-col w-full gap-4 lg:w-96">
|
||||
<x-forms.select label="Existing projects" class="w-96" id='selectedProject'>
|
||||
@foreach ($projects as $project)
|
||||
<option wire:key="{{ $loop->index }}" value="{{ $project->id }}">
|
||||
{{ $project->name }}</option>
|
||||
@endforeach
|
||||
</x-forms.select>
|
||||
<x-forms.button type="submit">Use this Project</x-forms.button>
|
||||
</form>
|
||||
@endif
|
||||
</x-slot:actions>
|
||||
<x-slot:explanation>
|
||||
<p>SSH Keys are used to connect to a remote server through a secure shell, called SSH.</p>
|
||||
<p>You can use your own ssh private key, or you can let Coolify to create one for you.</p>
|
||||
<p>In both ways, you need to add the public version of your ssh private key to the remote
|
||||
server's
|
||||
<code class="dark:text-warning">~/.ssh/authorized_keys</code> file.
|
||||
</p>
|
||||
</x-slot:explanation>
|
||||
</x-boarding-step>
|
||||
@endif
|
||||
</div>
|
||||
<div>
|
||||
@if ($state === 'select-existing-server')
|
||||
<x-boarding-step title="Select a server">
|
||||
<x-slot:question>
|
||||
There are already servers available for your Team. Do you want to use one of them?
|
||||
</x-slot:question>
|
||||
<x-slot:actions>
|
||||
<div class="flex flex-col gap-4">
|
||||
<div>
|
||||
<x-forms.button class="justify-center w-64 box" wire:click="createNewServer">No (create
|
||||
one
|
||||
for
|
||||
me)
|
||||
</x-forms.button>
|
||||
</div>
|
||||
<div>
|
||||
<form wire:submit='selectExistingServer' class="flex flex-col w-full gap-4 lg:w-96">
|
||||
<x-forms.select label="Existing servers" class="w-96" id='selectedExistingServer'>
|
||||
@foreach ($servers as $server)
|
||||
<option wire:key="{{ $loop->index }}" value="{{ $server->id }}">
|
||||
{{ $server->name }}</option>
|
||||
@endforeach
|
||||
</x-forms.select>
|
||||
<x-forms.button type="submit">Use this Server</x-forms.button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@if (!$serverReachable)
|
||||
This server is not reachable with the following public key.
|
||||
<br /> <br />
|
||||
Please make sure you have the correct public key in your ~/.ssh/authorized_keys file for
|
||||
user
|
||||
'root' or skip the boarding process and add a new private key manually to Coolify and to the
|
||||
server.
|
||||
<x-forms.input readonly id="serverPublicKey"></x-forms.input>
|
||||
<x-forms.button class="w-64 box" wire:target="validateServer"
|
||||
wire:click="validateServer">Check
|
||||
again
|
||||
</x-forms.button>
|
||||
@endif
|
||||
</x-slot:actions>
|
||||
<x-slot:explanation>
|
||||
<p>Private Keys are used to connect to a remote server through a secure shell, called SSH.</p>
|
||||
<p>You can use your own private key, or you can let Coolify to create one for you.</p>
|
||||
<p>In both ways, you need to add the public version of your private key to the remote server's
|
||||
<code>~/.ssh/authorized_keys</code> file.
|
||||
</p>
|
||||
</x-slot:explanation>
|
||||
</x-boarding-step>
|
||||
@endif
|
||||
</div>
|
||||
<div>
|
||||
@if ($state === 'create-private-key')
|
||||
<x-boarding-step title="Create Private Key">
|
||||
<x-slot:question>
|
||||
Please let me know your key details.
|
||||
</x-slot:question>
|
||||
<x-slot:actions>
|
||||
<form wire:submit='savePrivateKey' class="flex flex-col w-full gap-4 lg:pr-10">
|
||||
<x-forms.input required placeholder="Choose a name for your Private Key. Could be anything."
|
||||
label="Name" id="privateKeyName" />
|
||||
<x-forms.input placeholder="Description, so others will know more about this."
|
||||
label="Description" id="privateKeyDescription" />
|
||||
<x-forms.textarea required placeholder="-----BEGIN OPENSSH PRIVATE KEY-----"
|
||||
label="Private Key" id="privateKey" />
|
||||
@if ($privateKeyType === 'create')
|
||||
<x-forms.textarea rows="7" readonly label="Public Key" id="publicKey" />
|
||||
<span class="font-bold dark:text-warning">ACTION REQUIRED: Copy the 'Public Key' to your
|
||||
server's
|
||||
~/.ssh/authorized_keys
|
||||
file.</span>
|
||||
@endif
|
||||
<x-forms.button type="submit">Save</x-forms.button>
|
||||
</form>
|
||||
</x-slot:actions>
|
||||
<x-slot:explanation>
|
||||
<p>Private Keys are used to connect to a remote server through a secure shell, called SSH.</p>
|
||||
<p>You can use your own private key, or you can let Coolify to create one for you.</p>
|
||||
<p>In both ways, you need to add the public version of your private key to the remote server's
|
||||
<code>~/.ssh/authorized_keys</code> file.
|
||||
</p>
|
||||
</x-slot:explanation>
|
||||
</x-boarding-step>
|
||||
@endif
|
||||
</div>
|
||||
<div>
|
||||
@if ($state === 'create-server')
|
||||
<x-boarding-step title="Create Server">
|
||||
<x-slot:question>
|
||||
Please let me know your server details.
|
||||
</x-slot:question>
|
||||
<x-slot:actions>
|
||||
<form wire:submit='saveServer' class="flex flex-col w-full gap-4 lg:pr-10">
|
||||
<div class="flex flex-col gap-2 lg:flex-row">
|
||||
<x-forms.input required placeholder="Choose a name for your Server. Could be anything."
|
||||
label="Name" id="remoteServerName" />
|
||||
<x-forms.input placeholder="Description, so others will know more about this."
|
||||
label="Description" id="remoteServerDescription" />
|
||||
</div>
|
||||
<div class="flex flex-col gap-2 lg:flex-row ">
|
||||
<x-forms.input required placeholder="127.0.0.1" label="IP Address"
|
||||
id="remoteServerHost" />
|
||||
<x-forms.input required placeholder="Port number of your server. Default is 22."
|
||||
label="Port" id="remoteServerPort" />
|
||||
<x-forms.input required readonly
|
||||
placeholder="Username to connect to your server. Default is root."
|
||||
label="Username" id="remoteServerUser" />
|
||||
</div>
|
||||
<div class="lg:w-64">
|
||||
<x-forms.checkbox
|
||||
helper="If you are using Cloudflare Tunnels, enable this. It will proxy all ssh requests to your server through Cloudflare.<br><span class='dark:text-warning'>Coolify does not install/setup Cloudflare (cloudflared) on your server.</span>"
|
||||
id="isCloudflareTunnel" label="Cloudflare Tunnel" />
|
||||
</div>
|
||||
<x-forms.button type="submit">Continue</x-forms.button>
|
||||
</form>
|
||||
</x-slot:actions>
|
||||
<x-slot:explanation>
|
||||
<p>Username should be <x-highlighted text="root" /> for now. We are working on to use
|
||||
non-root users.</p>
|
||||
</x-slot:explanation>
|
||||
</x-boarding-step>
|
||||
@endif
|
||||
</div>
|
||||
<div>
|
||||
@if ($state === 'validate-server')
|
||||
<x-boarding-step title="Validate & Configure Server">
|
||||
<x-slot:question>
|
||||
I need to validate your server (connection, Docker Engine, etc) and configure if something is
|
||||
missing for me. Are you okay with this?
|
||||
</x-slot:question>
|
||||
<x-slot:actions>
|
||||
<x-slide-over closeWithX fullScreen>
|
||||
<x-slot:title>Validate & configure</x-slot:title>
|
||||
<x-slot:content>
|
||||
<livewire:server.validate-and-install :server="$this->createdServer" />
|
||||
</x-slot:content>
|
||||
<x-forms.button @click="slideOverOpen=true" class="w-full font-bold box lg:w-96"
|
||||
wire:click.prevent='installServer' isHighlighted>
|
||||
Let's do it!
|
||||
</x-forms.button>
|
||||
</x-slide-over>
|
||||
</x-slot:actions>
|
||||
<x-slot:explanation>
|
||||
<p>This will install the latest Docker Engine on your server, configure a few things to be able
|
||||
to run optimal.<br><br>Minimum Docker Engine version is: 22<br><br>To manually install
|
||||
Docker
|
||||
Engine, check <a target="_blank" class="underline dark:text-warning"
|
||||
href="https://docs.docker.com/engine/install/#server">this
|
||||
documentation</a>.</p>
|
||||
</x-slot:explanation>
|
||||
</x-boarding-step>
|
||||
@endif
|
||||
</div>
|
||||
<div>
|
||||
@if ($state === 'create-project')
|
||||
<x-boarding-step title="Project">
|
||||
<x-slot:question>
|
||||
@if (count($projects) > 0)
|
||||
You already have some projects. Do you want to use one of them or should I create a new one
|
||||
for
|
||||
you?
|
||||
@else
|
||||
Let's create an initial project for you. You can change all the details later on.
|
||||
@endif
|
||||
</x-slot:question>
|
||||
<x-slot:actions>
|
||||
<x-forms.button class="justify-center w-64 box" wire:click="createNewProject">Create new
|
||||
project!</x-forms.button>
|
||||
<div>
|
||||
@if (count($projects) > 0)
|
||||
<form wire:submit='selectExistingProject' class="flex flex-col w-full gap-4 lg:w-96">
|
||||
<x-forms.select label="Existing projects" class="w-96" id='selectedProject'>
|
||||
@foreach ($projects as $project)
|
||||
<option wire:key="{{ $loop->index }}" value="{{ $project->id }}">
|
||||
{{ $project->name }}</option>
|
||||
@endforeach
|
||||
</x-forms.select>
|
||||
<x-forms.button type="submit">Use this Project</x-forms.button>
|
||||
</form>
|
||||
@endif
|
||||
</div>
|
||||
</x-slot:actions>
|
||||
<x-slot:explanation>
|
||||
<p>Projects contain several resources combined into one virtual group. There are no
|
||||
limitations on the number of projects you can add.</p>
|
||||
<p>Each project should have at least one environment, this allows you to create a production &
|
||||
staging version of the same application, but grouped separately.</p>
|
||||
</x-slot:explanation>
|
||||
</x-boarding-step>
|
||||
@endif
|
||||
</div>
|
||||
<div>
|
||||
@if ($state === 'create-resource')
|
||||
<x-boarding-step title="Resources">
|
||||
<x-slot:question>
|
||||
Let's go to the new resource page, where you can create your first resource.
|
||||
</x-slot:question>
|
||||
<x-slot:actions>
|
||||
<div class="items-center justify-center w-64 box" wire:click="showNewResource">Let's do
|
||||
it!</div>
|
||||
</x-slot:actions>
|
||||
<x-slot:explanation>
|
||||
<p>A resource could be an application, a database or a service (like WordPress).</p>
|
||||
</x-slot:explanation>
|
||||
</x-boarding-step>
|
||||
@endif
|
||||
</div>
|
||||
<div class="flex flex-col justify-center gap-4 pt-4 lg:gap-2 lg:flex">
|
||||
<div class="flex justify-center w-full gap-2">
|
||||
<x-forms.button wire:click='skipBoarding'>Skip onboarding</x-forms.button>
|
||||
<x-forms.button wire:click='restartBoarding'>Restart onboarding</x-forms.button>
|
||||
</div>
|
||||
<x-modal-input title="How can we help?">
|
||||
<x-slot:content>
|
||||
<x-forms.button class="w-full" title="Send us feedback or get help!">
|
||||
Feedback
|
||||
</x-forms.button>
|
||||
</x-slot:content>
|
||||
<livewire:help />
|
||||
</x-modal-input>
|
||||
</div>
|
||||
</x-slot:actions>
|
||||
<x-slot:explanation>
|
||||
<p>Projects contain several resources combined into one virtual group. There are no
|
||||
limitations on the number of projects you can add.</p>
|
||||
<p>Each project should have at least one environment, this allows you to create a production &
|
||||
staging version of the same application, but grouped separately.</p>
|
||||
</x-slot:explanation>
|
||||
</x-boarding-step>
|
||||
@elseif ($currentState === 'create-resource')
|
||||
<x-boarding-step title="Resources">
|
||||
<x-slot:question>
|
||||
Let's go to the new resource page, where you can create your first resource.
|
||||
</x-slot:question>
|
||||
<x-slot:actions>
|
||||
<div class="items-center justify-center w-64 box" wire:click="showNewResource">Let's do
|
||||
it!</div>
|
||||
</x-slot:actions>
|
||||
<x-slot:explanation>
|
||||
<p>A resource could be an application, a database or a service (like WordPress).</p>
|
||||
</x-slot:explanation>
|
||||
</x-boarding-step>
|
||||
@endif
|
||||
</div>
|
||||
<div class="flex flex-col justify-center gap-4 pt-4 lg:gap-2 lg:flex">
|
||||
<div class="flex justify-center w-full gap-2">
|
||||
<div class="cursor-pointer hover:underline dark:hover:text-white" wire:click='skipBoarding'>Skip
|
||||
onboarding</div>
|
||||
<div class="cursor-pointer hover:underline dark:hover:text-white" wire:click='restartBoarding'>Restart
|
||||
onboarding</div>
|
||||
</div>
|
||||
<x-modal-input title="How can we help?">
|
||||
<x-slot:content>
|
||||
<div class="w-full text-center cursor-pointer hover:underline dark:hover:text-white"
|
||||
title="Send us feedback or get help!">
|
||||
Feedback
|
||||
</div>
|
||||
</x-slot:content>
|
||||
<livewire:help />
|
||||
</x-modal-input>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -1,38 +1,40 @@
|
||||
@if ($settings->is_resale_license_active)
|
||||
@if (auth()->user()->isAdminFromSession())
|
||||
<div>
|
||||
<div class="flex gap-2">
|
||||
<h1>Choose a Plan</h1>
|
||||
@if (subscriptionProvider() === 'stripe' && $alreadySubscribed)
|
||||
<x-forms.button wire:click='stripeCustomerPortal'>Manage My Subscription</x-forms.button>
|
||||
<div>
|
||||
@if ($settings->is_resale_license_active)
|
||||
@if (auth()->user()->isAdminFromSession())
|
||||
<div>
|
||||
<div class="flex gap-2">
|
||||
<h1>Choose a Plan</h1>
|
||||
@if (subscriptionProvider() === 'stripe' && $alreadySubscribed)
|
||||
<x-forms.button wire:click='stripeCustomerPortal'>Manage My Subscription</x-forms.button>
|
||||
@endif
|
||||
</div>
|
||||
@if (request()->query->get('cancelled'))
|
||||
<div class="mb-6 rounded 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
|
||||
|
||||
@if (config('subscription.provider') !== null)
|
||||
<livewire:subscription.pricing-plans />
|
||||
@endif
|
||||
</div>
|
||||
@if (request()->query->get('cancelled'))
|
||||
<div class="mb-6 rounded 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>
|
||||
@else
|
||||
<div class="flex flex-col justify-center mx-10">
|
||||
<div class="flex gap-2">
|
||||
<h1>Subscription</h1>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if (config('subscription.provider') !== null)
|
||||
<livewire:subscription.pricing-plans />
|
||||
@endif
|
||||
</div>
|
||||
@else
|
||||
<div class="flex flex-col justify-center mx-10">
|
||||
<div class="flex gap-2">
|
||||
<h1>Subscription</h1>
|
||||
<div>You are not an admin or have been removed from this team. If this does not make sense, please <span
|
||||
class="underline cursor-pointer dark:text-white" wire:click="help">contact
|
||||
us</span>.</div>
|
||||
</div>
|
||||
<div>You are not an admin or have been removed from this team. If this does not make sense, please <span
|
||||
class="dark:text-white underline cursor-pointer" wire:click="help">contact
|
||||
us</span>.</div>
|
||||
</div>
|
||||
@endif
|
||||
@else
|
||||
<div class="px-10">Resale license is not active. Please contact your instance admin.</div>
|
||||
@endif
|
||||
@else
|
||||
<div class="px-10">Resale license is not active. Please contact your instance admin.</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@ -15,7 +15,6 @@ const colors = {
|
||||
module.exports = {
|
||||
darkMode: "selector",
|
||||
content: [
|
||||
'./vendor/wire-elements/modal/resources/views/*.blade.php',
|
||||
'./storage/framework/views/*.php',
|
||||
"./resources/**/*.blade.php",
|
||||
"./app/**/*.php",
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
"version": "3.12.36"
|
||||
},
|
||||
"v4": {
|
||||
"version": "4.0.0-beta.242"
|
||||
"version": "4.0.0-beta.243"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user