mirror of
https://github.com/invoiceninja/invoiceninja.git
synced 2025-05-30 23:54:33 -04:00
Setup redesign (#3546)
This commit is contained in:
Benjamin Beganović
GitHub
parent
f1287e9868
commit
4729a3841b
2
public/css/app.css
vendored
2
public/css/app.css
vendored
File diff suppressed because one or more lines are too long
46
resources/views/setup/_account.blade.php
Normal file
46
resources/views/setup/_account.blade.php
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
<div class="bg-white shadow overflow-hidden rounded-lg mt-6">
|
||||||
|
<div class="px-4 py-5 border-b border-gray-200 sm:px-6">
|
||||||
|
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
||||||
|
{{ ctrans('texts.user_details') }}
|
||||||
|
</h3>
|
||||||
|
<p class="mt-1 max-w-2xl text-sm leading-5 text-gray-500">
|
||||||
|
.. and let's create first account!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<dl>
|
||||||
|
<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:flex sm:items-center">
|
||||||
|
<dt class="text-sm leading-5 font-medium text-gray-500">
|
||||||
|
{{ ctrans('texts.first_name') }}
|
||||||
|
</dt>
|
||||||
|
<dd class="text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
|
||||||
|
<input type="text" class="input" name="user_first_name">
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:flex sm:items-center">
|
||||||
|
<dt class="text-sm leading-5 font-medium text-gray-500">
|
||||||
|
{{ ctrans('texts.last_name') }}
|
||||||
|
</dt>
|
||||||
|
<dd class="text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
|
||||||
|
<input type="text" class="input" name="user_last_name">
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:flex sm:items-center">
|
||||||
|
<dt class="text-sm leading-5 font-medium text-gray-500">
|
||||||
|
{{ ctrans('texts.email') }}
|
||||||
|
</dt>
|
||||||
|
<dd class="text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
|
||||||
|
<input type="email" class="input" name="user_email">
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:flex sm:items-center">
|
||||||
|
<dt class="text-sm leading-5 font-medium text-gray-500">
|
||||||
|
{{ ctrans('texts.password') }}
|
||||||
|
</dt>
|
||||||
|
<dd class="text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
|
||||||
|
<input type="password" class="input" name="user_password">
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
49
resources/views/setup/_application.blade.php
Normal file
49
resources/views/setup/_application.blade.php
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
<div class="bg-white shadow overflow-hidden rounded-lg mt-8">
|
||||||
|
<div class="px-4 py-5 border-b border-gray-200 sm:px-6">
|
||||||
|
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
||||||
|
Application settings
|
||||||
|
</h3>
|
||||||
|
<p class="mt-1 max-w-2xl text-sm leading-5 text-gray-500">
|
||||||
|
Let's store basic information about your Invoice Ninja!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<dl>
|
||||||
|
<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:flex sm:items-center">
|
||||||
|
<dt class="text-sm leading-5 font-medium text-gray-500">
|
||||||
|
{{ ctrans('texts.url') }}*
|
||||||
|
</dt>
|
||||||
|
<dd class="text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
|
||||||
|
<input type="text" class="input" name="application_url" required>
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:flex sm:items-center">
|
||||||
|
<dt class="text-sm leading-5 font-medium text-gray-500">
|
||||||
|
{{ ctrans('texts.https') }}
|
||||||
|
</dt>
|
||||||
|
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
|
||||||
|
<input type="checkbox" class="form-checkbox mr-1" name="require_https">
|
||||||
|
<span>{{ ctrans('texts.require') }}</span>
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:flex sm:items-center">
|
||||||
|
<dt class="text-sm leading-5 font-medium text-gray-500">
|
||||||
|
{{ ctrans('texts.debug') }}
|
||||||
|
</dt>
|
||||||
|
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
|
||||||
|
<input type="checkbox" class="form-checkbox mr-1" name="enable_debug">
|
||||||
|
<span>{{ ctrans('texts.enable') }}</span>
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:flex sm:items-center">
|
||||||
|
<dt class="text-sm leading-5 font-medium text-gray-500">
|
||||||
|
{{ ctrans('texts.reports') }}
|
||||||
|
</dt>
|
||||||
|
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
|
||||||
|
<input type="checkbox" class="form-checkbox mr-1" name="enable_debug">
|
||||||
|
<span>{{ ctrans('texts.send_fail_logs_to_our_server') }}</span>
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
81
resources/views/setup/_database.blade.php
Normal file
81
resources/views/setup/_database.blade.php
Normal file
@ -0,0 +1,81 @@
|
|||||||
|
<div class="bg-white shadow overflow-hidden rounded-lg mt-6">
|
||||||
|
<div class="px-4 py-5 border-b border-gray-200 sm:px-6">
|
||||||
|
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
||||||
|
{{ ctrans('texts.database_connection') }}
|
||||||
|
</h3>
|
||||||
|
<p class="mt-1 max-w-2xl text-sm leading-5 text-gray-500">
|
||||||
|
To store data, we need database. Here's how you can create one.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<dl>
|
||||||
|
<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:flex sm:items-center">
|
||||||
|
<dt class="text-sm leading-5 font-medium text-gray-500">
|
||||||
|
You can use following commands to create user & database.
|
||||||
|
</dt>
|
||||||
|
<dd class="text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
|
||||||
|
<details>
|
||||||
|
<summary class="cursor-pointer focus:outline-none">Show code</summary>
|
||||||
|
<pre class="text-sm overflow-y-scroll bg-gray-100 p-4">
|
||||||
|
-- Commands to create a MySQL database and user
|
||||||
|
CREATE SCHEMA `ninja` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;
|
||||||
|
CREATE USER 'ninja'@'localhost' IDENTIFIED BY 'ninja';
|
||||||
|
GRANT ALL PRIVILEGES ON `ninja`.* TO 'ninja'@'localhost';
|
||||||
|
FLUSH PRIVILEGES;
|
||||||
|
</pre>
|
||||||
|
</details>
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:flex sm:items-center">
|
||||||
|
<dt class="text-sm leading-5 font-medium text-gray-500">
|
||||||
|
{{ ctrans('texts.driver') }}
|
||||||
|
</dt>
|
||||||
|
<dd class="text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
|
||||||
|
<input type="text" class="input border-none" name="database_driver" value="MySQL" readonly>
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:flex sm:items-center">
|
||||||
|
<dt class="text-sm leading-5 font-medium text-gray-500">
|
||||||
|
{{ ctrans('texts.host') }}*
|
||||||
|
</dt>
|
||||||
|
<dd class="text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
|
||||||
|
<input type="text" class="input" name="database_host" required>
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:flex sm:items-center">
|
||||||
|
<dt class="text-sm leading-5 font-medium text-gray-500">
|
||||||
|
{{ ctrans('texts.database') }}*
|
||||||
|
</dt>
|
||||||
|
<dd class="text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
|
||||||
|
<input type="text" class="input" name="database_db" required>
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:flex sm:items-center">
|
||||||
|
<dt class="text-sm leading-5 font-medium text-gray-500">
|
||||||
|
{{ ctrans('texts.username') }}*
|
||||||
|
</dt>
|
||||||
|
<dd class="text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
|
||||||
|
<input type="text" class="input" name="database_username" required>
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:flex sm:items-center">
|
||||||
|
<dt class="text-sm leading-5 font-medium text-gray-500">
|
||||||
|
{{ ctrans('texts.password') }}
|
||||||
|
</dt>
|
||||||
|
<dd class="text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
|
||||||
|
<input type="password" class="input" name="database_password">
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:flex sm:items-center">
|
||||||
|
<dt class="text-sm leading-5 font-medium text-gray-500">
|
||||||
|
<button class="button button-primary py-2 px-3 text-xs">{{ ctrans('texts.test_connection') }}</button>
|
||||||
|
</dt>
|
||||||
|
<dd class="text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
|
||||||
|
<div class="alert alert-success py-2 bg-gray-50">
|
||||||
|
Success!
|
||||||
|
</div>
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
93
resources/views/setup/_mail.blade.php
Normal file
93
resources/views/setup/_mail.blade.php
Normal file
@ -0,0 +1,93 @@
|
|||||||
|
<div class="bg-white shadow overflow-hidden rounded-lg mt-6">
|
||||||
|
<div class="px-4 py-5 border-b border-gray-200 sm:px-6">
|
||||||
|
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
||||||
|
{{ ctrans('texts.email_settings') }}
|
||||||
|
</h3>
|
||||||
|
<p class="mt-1 max-w-2xl text-sm leading-5 text-gray-500">
|
||||||
|
Let's configure e-mail settings.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<dl>
|
||||||
|
<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:flex sm:items-center">
|
||||||
|
<dt class="text-sm leading-5 font-medium text-gray-500">
|
||||||
|
{{ ctrans('texts.driver') }}
|
||||||
|
</dt>
|
||||||
|
<dd class="text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
|
||||||
|
<select name="smtp_driver" class="input form-select">
|
||||||
|
<option value="1">SMTP</option>
|
||||||
|
</select>
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:flex sm:items-center">
|
||||||
|
<dt class="text-sm leading-5 font-medium text-gray-500">
|
||||||
|
{{ ctrans('texts.from_name') }}
|
||||||
|
</dt>
|
||||||
|
<dd class="text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
|
||||||
|
<input type="text" class="input" name="email_from_name">
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:flex sm:items-center">
|
||||||
|
<dt class="text-sm leading-5 font-medium text-gray-500">
|
||||||
|
{{ ctrans('texts.from_address') }}
|
||||||
|
</dt>
|
||||||
|
<dd class="text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
|
||||||
|
<input type="email" class="input" name="email_from_address">
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:flex sm:items-center">
|
||||||
|
<dt class="text-sm leading-5 font-medium text-gray-500">
|
||||||
|
{{ ctrans('texts.username') }}
|
||||||
|
</dt>
|
||||||
|
<dd class="text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
|
||||||
|
<input type="text" class="input" name="smtp_username">
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:flex sm:items-center">
|
||||||
|
<dt class="text-sm leading-5 font-medium text-gray-500">
|
||||||
|
{{ ctrans('texts.host') }}
|
||||||
|
</dt>
|
||||||
|
<dd class="text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
|
||||||
|
<input type="text" class="input" name="smtp_host">
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:flex sm:items-center">
|
||||||
|
<dt class="text-sm leading-5 font-medium text-gray-500">
|
||||||
|
{{ ctrans('texts.port') }}
|
||||||
|
</dt>
|
||||||
|
<dd class="text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
|
||||||
|
<input type="text" class="input" name="smtp_port">
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:flex sm:items-center">
|
||||||
|
<dt class="text-sm leading-5 font-medium text-gray-500">
|
||||||
|
{{ ctrans('texts.encryption') }}
|
||||||
|
</dt>
|
||||||
|
<dd class="text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
|
||||||
|
<select name="smpt_encryption" class="input form-select">
|
||||||
|
<option value="1">TLS</option>
|
||||||
|
<option value="2">SSL</option>
|
||||||
|
</select>
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:flex sm:items-center">
|
||||||
|
<dt class="text-sm leading-5 font-medium text-gray-500">
|
||||||
|
{{ ctrans('texts.encryption') }}
|
||||||
|
</dt>
|
||||||
|
<dd class="text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
|
||||||
|
<input type="password" class="input" name="smtp_password">
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:flex sm:items-center">
|
||||||
|
<dt class="text-sm leading-5 font-medium text-gray-500">
|
||||||
|
<button class="button button-primary py-2 px-3 text-xs">{{ ctrans('texts.test_connection') }}</button>
|
||||||
|
</dt>
|
||||||
|
<dd class="text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
|
||||||
|
<div class="alert alert-failure py-2 bg-gray-50">
|
||||||
|
Oops!
|
||||||
|
</div>
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@ -1,228 +1,44 @@
|
|||||||
@extends('portal.ninja2020.layout.clean')
|
@extends('portal.ninja2020.layout.clean')
|
||||||
@section('meta_title', ctrans('texts.setup'))
|
@section('meta_title', ctrans('texts.setup'))
|
||||||
|
|
||||||
@push('head')
|
|
||||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.js" defer></script>
|
|
||||||
@endpush
|
|
||||||
|
|
||||||
@section('body')
|
@section('body')
|
||||||
<div class="container mx-auto" x-data="{ greeting: true, start: false, database: false, mail: false, user: false, finish: false }">
|
<div class="container mx-auto mb-10">
|
||||||
<form action="#" method="post">
|
<form action="#" method="post">
|
||||||
@csrf
|
@csrf
|
||||||
|
|
||||||
<div class="grid grid-cols-12 px-6">
|
<div class="grid grid-cols-12 px-6">
|
||||||
|
<div class="col-span-12 md:col-start-4 md:col-span-6 mt-4 md:mt-10">
|
||||||
|
<h1 class="text-center text-2xl font-semibold">Invoice Ninja Setup</h1>
|
||||||
|
<p class="text-sm text-center">If you need help you can either post to our
|
||||||
|
<a href="https://www.invoiceninja.com/forums/forum/support/" class="button-link">support forum</a>
|
||||||
|
or email us at <a href="mailto:contact@invoiceninja.com" class="button-link">contact@invoiceninja.com</a>.
|
||||||
|
</p>
|
||||||
|
|
||||||
<div class="col-span-12 md:col-start-4 md:col-span-6 mt-4 md:mt-10">
|
@include('setup._application')
|
||||||
<div id="greeting" x-transition:enter-start="opacity-0 transform scale-90" x-transition:enter-end="opacity-100 transform scale-100" x-transition:enter="transition ease-out duration-200" x-show="greeting" class="flex flex-col items-center justify-center">
|
@include('setup._database')
|
||||||
<h1 class="text-2xl text-center">Invoice Ninja Setup</h1>
|
@include('setup._mail')
|
||||||
<p class="text-center">Welcome to next version of Invoice Ninja. We are so happy you decided to give it a try! Let's start!</p>
|
@include('setup._account')
|
||||||
<div class="border-t w-full border-gray-100 mt-6 flex flex-col justify-center">
|
|
||||||
<button type="button" class="text-blue-500 hover:text-blue-600 mt-6" @click="{ greeting = false, start = true }">
|
|
||||||
Next step
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="start" x-transition:enter-start="opacity-0 transform scale-90" x-transition:enter-end="opacity-100 transform scale-100" x-transition:enter="transition ease-out duration-200" x-show="start" class="flex flex-col">
|
<div class="flex justify-center mt-4">
|
||||||
<h1 class="text-2xl text-center">Application</h1>
|
<div class="flex flex-col">
|
||||||
<p class="text-center">Let's store basic information about your Invoice Ninja!</p>
|
<div class="mt-4">
|
||||||
|
<input type="checkbox" class="form-checkbox" name="terms" required>
|
||||||
<div class="flex w-full items-center mt-4">
|
<span>I agree to
|
||||||
<label for="url" class="mr-4">URL:</label>
|
<a class="button-link" href="https://www.invoiceninja.com/self-hosting-terms-service/">{{ ctrans('texts.terms_of_service') }}</a>
|
||||||
<input name="url" type="text" class="block w-full bg-gray-100 px-4 py-2 rounded">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex items-center mt-4">
|
|
||||||
<label for="https" class="mr-4">HTTPS:</label>
|
|
||||||
<input type="checkbox" name="https" class="form-checkbox mr-1">
|
|
||||||
<span class="text-sm">Require</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex items-center mt-4">
|
|
||||||
<label for="debug" class="mr-4">Debug:</label>
|
|
||||||
<input type="checkbox" name="debug" class="form-checkbox mr-1">
|
|
||||||
<span class="text-sm">Enable</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex flex-col border-t w-full border-gray-100 mt-6">
|
|
||||||
<button type="button" class="text-blue-500 hover:text-blue-600 mt-6" @click="{ start = false, database = true }">
|
|
||||||
Next step
|
|
||||||
</button>
|
|
||||||
<button type="button" class="text-sm hover:text-blue-600 mt-2" @click="{ greeting = true, start = false }">
|
|
||||||
Go back
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="database-setup" x-transition:enter-start="opacity-0 transform scale-90" x-transition:enter-end="opacity-100 transform scale-100" x-transition:enter="transition ease-out duration-200" x-show="database">
|
|
||||||
<h1 class="text-2xl text-center">Database</h1>
|
|
||||||
<p class="text-center">To store data, we need database. Here's how you can create one.</p>
|
|
||||||
|
|
||||||
<pre id="create-database" class="mt-4 text-sm bg-gray-100 overflow-y-scroll px-4 py-2">
|
|
||||||
-- Commands to create a MySQL database and user
|
|
||||||
CREATE SCHEMA `ninja` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;
|
|
||||||
CREATE USER 'ninja'@'localhost' IDENTIFIED BY 'ninja';
|
|
||||||
GRANT ALL PRIVILEGES ON `ninja`.* TO 'ninja'@'localhost';
|
|
||||||
FLUSH PRIVILEGES;</pre>
|
|
||||||
|
|
||||||
<div class="flex w-full items-center mt-4">
|
|
||||||
<label for="url" class="mr-4 w-1/5 font-bold">Driver:</label>
|
|
||||||
<input readonly name="driver" type="text" class="block w-full bg-gray-100 px-4 py-2 rounded" value="MySQL">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex w-full items-center mt-4">
|
|
||||||
<label for="host" class="mr-4 w-1/5 font-bold">Host:</label>
|
|
||||||
<input name="host" type="text" class="block w-full bg-gray-100 px-4 py-2 rounded">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex w-full items-center mt-4">
|
|
||||||
<label for="username" class="mr-4 w-1/5 font-bold">Username:</label>
|
|
||||||
<input name="username" type="text" class="block w-full bg-gray-100 px-4 py-2 rounded">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex w-full items-center mt-4">
|
|
||||||
<label for="password" class="mr-4 w-1/5">Password:</label>
|
|
||||||
<input name="password" type="password" class="block w-full bg-gray-100 px-4 py-2 rounded">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button class="text-blue-600 hover:text-blue-700 mt-6 mb-2">Test connection</button>
|
|
||||||
<div class="alert alert-success">Success!</div>
|
|
||||||
|
|
||||||
<div class="flex flex-col border-t w-full border-gray-100 mt-6">
|
|
||||||
<button type="button" class="text-blue-500 hover:text-blue-600 mt-6" @click="{ database = false, mail = true }">
|
|
||||||
Next step
|
|
||||||
</button>
|
|
||||||
<button type="button" class="text-sm hover:text-blue-600 mt-2" @click="{ database = false, start = true }">
|
|
||||||
Go back
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div x-transition:enter-start="opacity-0 transform scale-90" x-transition:enter-end="opacity-100 transform scale-100" x-transition:enter="transition ease-out duration-300" id="email-settings" x-show="mail">
|
|
||||||
<h1 class="text-2xl text-center">E-mail</h1>
|
|
||||||
<p class="text-center">Awesome! Let's configure e-mail settings.</p>
|
|
||||||
|
|
||||||
<div class="flex w-full items-center mt-4">
|
|
||||||
<label for="host" class="mr-4 w-1/5 font-bold">Driver:</label>
|
|
||||||
<select name="smtp_driver" class="w-full form-select border-0 rounded bg-gray-100">
|
|
||||||
<option value="1">SMTP</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex w-full items-center mt-4">
|
|
||||||
<label for="from_name" class="mr-4 w-1/5 font-bold">From name:</label>
|
|
||||||
<input name="from_name" type="text" class="block w-full bg-gray-100 px-4 py-2 rounded">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex w-full items-center mt-4">
|
|
||||||
<label for="from_address" class="mr-4 w-1/5 font-bold">From address:</label>
|
|
||||||
<input name="from_address" type="email" class="block w-full bg-gray-100 px-4 py-2 rounded">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex w-full items-center mt-4">
|
|
||||||
<label for="username" class="mr-4 w-1/5 font-bold">Username:</label>
|
|
||||||
<input name="smtp_username" type="text" class="block w-full bg-gray-100 px-4 py-2 rounded">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex w-full items-center mt-4">
|
|
||||||
<label for="host" class="mr-4 w-1/5 font-bold">Host:</label>
|
|
||||||
<input name="smtp_host" type="text" class="block w-full bg-gray-100 px-4 py-2 rounded">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex w-full items-center mt-4">
|
|
||||||
<label for="port" class="mr-4 w-1/5 font-bold">Port:</label>
|
|
||||||
<input name="port" type="text" class="block w-full bg-gray-100 px-4 py-2 rounded">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex w-full items-center mt-4">
|
|
||||||
<label for="encryption" class="mr-4 w-1/5 font-bold">Encryption:</label>
|
|
||||||
<select name="encryption" class="w-full form-select border-0 rounded bg-gray-100">
|
|
||||||
<option value="1">TLS</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex w-full items-center mt-4">
|
|
||||||
<label for="password" class="mr-4 w-1/5 font-bold">Password:</label>
|
|
||||||
<input name="smtp_password" type="password" class="block w-full bg-gray-100 px-4 py-2 rounded">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button class="text-blue-600 hover:text-blue-700 mt-6 mb-2">Test connection</button>
|
|
||||||
<div class="alert alert-success">Success!</div>
|
|
||||||
|
|
||||||
<div class="flex flex-col border-t w-full border-gray-100 mt-6">
|
|
||||||
<button type="button" class="text-blue-500 hover:text-blue-600 mt-6" @click="{ mail = false, user = true }">
|
|
||||||
Next step
|
|
||||||
</button>
|
|
||||||
<button type="button" class="text-sm hover:text-blue-600 mt-2" @click="{ mail = false, database = true }">
|
|
||||||
Go back
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div x-transition:enter-start="opacity-0 transform scale-90" x-transition:enter-end="opacity-100 transform scale-100" x-transition:enter="transition ease-out duration-300" id="user" x-show="user">
|
|
||||||
<h1 class="text-2xl text-center">User</h1>
|
|
||||||
<p class="text-center">Almost done! Let's create first user!</p>
|
|
||||||
|
|
||||||
<div class="flex w-full items-center mt-4">
|
|
||||||
<label for="first_name" class="mr-4 w-1/5 font-bold">First name:</label>
|
|
||||||
<input name="first_name" type="string" class="block w-full bg-gray-100 px-4 py-2 rounded">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex w-full items-center mt-4">
|
|
||||||
<label for="password" class="mr-4 w-1/5 font-bold">Last name:</label>
|
|
||||||
<input name="last_name" type="string" class="block w-full bg-gray-100 px-4 py-2 rounded">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex w-full items-center mt-4">
|
|
||||||
<label for="password" class="mr-4 w-1/5 font-bold">E-mail:</label>
|
|
||||||
<input name="user_email" type="email" class="block w-full bg-gray-100 px-4 py-2 rounded">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex w-full items-center mt-4">
|
|
||||||
<label for="password" class="mr-4 w-1/5 font-bold">Password:</label>
|
|
||||||
<input name="user_password" type="password" class="block w-full bg-gray-100 px-4 py-2 rounded">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex flex-col border-t w-full border-gray-100 mt-6">
|
|
||||||
<button type="button" class="text-blue-500 hover:text-blue-600 mt-6" @click="{ user = false, finish = true }">
|
|
||||||
Next step
|
|
||||||
</button>
|
|
||||||
<button type="button" class="text-sm hover:text-blue-600 mt-2" @click="{ user = false, mail = true }">
|
|
||||||
Go back
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div x-transition:enter-start="opacity-0 transform scale-90" x-transition:enter-end="opacity-100 transform scale-100" x-transition:enter="transition ease-out duration-300" id="user" x-show="finish">
|
|
||||||
<h1 class="text-2xl text-center">Finish</h1>
|
|
||||||
<p class="text-center">.. one more thing.</p>
|
|
||||||
|
|
||||||
<div class="flex items-center mt-8">
|
|
||||||
<label for="debug" class="mr-4 w-1/4">Terms:</label>
|
|
||||||
<input type="checkbox" name="tos" class="form-checkbox mr-1">
|
|
||||||
<span class="text-sm">I agree to
|
|
||||||
<a class="button-link" href="https://www.invoiceninja.com/self-hosting-terms-service/"> Terms of Service</a>
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="mt-2">
|
||||||
<div class="flex items-center mt-4">
|
<input type="checkbox" class="form-checkbox" name="privacy" required>
|
||||||
<label for="debug" class="mr-4 w-1/4">Privacy policy:</label>
|
<span>I agree to
|
||||||
<input type="checkbox" name="privacy" class="form-checkbox mr-1">
|
<a class="button-link" href="https://www.invoiceninja.com/self-hosting-privacy-data-control/">{{ ctrans('texts.privacy_policy') }}</a>
|
||||||
<span class="text-sm">I agree to
|
|
||||||
<a class="button-link" href="https://www.invoiceninja.com/self-hosting-privacy-data-control/"> Privacy Policy</a>
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
<button type="submit" class="button button-primary w-1/2 my-4">{{ ctrans('texts.submit') }}</button>
|
||||||
<div class="flex flex-col border-t w-full border-gray-100 mt-6">
|
|
||||||
<button type="submit" class="text-blue-500 hover:text-blue-600 mt-6">
|
|
||||||
Complete
|
|
||||||
</button>
|
|
||||||
<button type="button" class="text-sm hover:text-blue-600 mt-2" @click="{ finish = false, user = true }">
|
|
||||||
Go back
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</div>
|
||||||
</div>
|
</form>
|
||||||
|
</div>
|
||||||
@endsection
|
@endsection
|
||||||
Loading…
x
Reference in New Issue
Block a user