mirror of
https://github.com/invoiceninja/invoiceninja.git
synced 2025-05-24 02:14:21 -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')
|
||||
@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')
|
||||
<div class="container mx-auto" x-data="{ greeting: true, start: false, database: false, mail: false, user: false, finish: false }">
|
||||
<form action="#" method="post">
|
||||
@csrf
|
||||
<div class="container mx-auto mb-10">
|
||||
<form action="#" method="post">
|
||||
@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">
|
||||
<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">
|
||||
<h1 class="text-2xl text-center">Invoice Ninja Setup</h1>
|
||||
<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>
|
||||
<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>
|
||||
@include('setup._application')
|
||||
@include('setup._database')
|
||||
@include('setup._mail')
|
||||
@include('setup._account')
|
||||
|
||||
<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">
|
||||
<h1 class="text-2xl text-center">Application</h1>
|
||||
<p class="text-center">Let's store basic information about your Invoice Ninja!</p>
|
||||
|
||||
<div class="flex w-full items-center mt-4">
|
||||
<label for="url" class="mr-4">URL:</label>
|
||||
<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>
|
||||
<div class="flex justify-center mt-4">
|
||||
<div class="flex flex-col">
|
||||
<div class="mt-4">
|
||||
<input type="checkbox" class="form-checkbox" name="terms" required>
|
||||
<span>I agree to
|
||||
<a class="button-link" href="https://www.invoiceninja.com/self-hosting-terms-service/">{{ ctrans('texts.terms_of_service') }}</a>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center mt-4">
|
||||
<label for="debug" class="mr-4 w-1/4">Privacy policy:</label>
|
||||
<input type="checkbox" name="privacy" class="form-checkbox mr-1">
|
||||
<span class="text-sm">I agree to
|
||||
<a class="button-link" href="https://www.invoiceninja.com/self-hosting-privacy-data-control/"> Privacy Policy</a>
|
||||
<div class="mt-2">
|
||||
<input type="checkbox" class="form-checkbox" name="privacy" required>
|
||||
<span>I agree to
|
||||
<a class="button-link" href="https://www.invoiceninja.com/self-hosting-privacy-data-control/">{{ ctrans('texts.privacy_policy') }}</a>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<button type="submit" class="button button-primary w-1/2 my-4">{{ ctrans('texts.submit') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@endsection
|
||||
Loading…
x
Reference in New Issue
Block a user