Update setup to show step by step before letting user submit everything

This commit is contained in:
Benjamin Beganović 2020-12-15 16:10:50 +01:00
parent 0c1f17cd4e
commit 75b28e8799
10 changed files with 39 additions and 19 deletions

1
.gitignore vendored
View File

@ -27,3 +27,4 @@ storage/migrations
nbproject
.php_cs.cache
public/test.pdf

File diff suppressed because one or more lines are too long

View File

@ -15,6 +15,6 @@
"/js/clients/quotes/approve.js": "/js/clients/quotes/approve.js?id=85bcae0a646882e56b12",
"/js/clients/shared/multiple-downloads.js": "/js/clients/shared/multiple-downloads.js?id=5c35d28cf0a3286e7c45",
"/js/clients/shared/pdf.js": "/js/clients/shared/pdf.js?id=fa54bb4229aba6b0817c",
"/js/setup/setup.js": "/js/setup/setup.js?id=725362f2ed393909fc8b",
"/js/setup/setup.js": "/js/setup/setup.js?id=7ab6418738b4f4672cf1",
"/css/card-js.min.css": "/css/card-js.min.css?id=62afeb675235451543ad"
}

View File

@ -31,7 +31,7 @@ class Setup {
};
Axios.post('/setup/check_db', data)
.then((response) => this.handleSuccess(this.checkDbAlert))
.then((response) => this.handleSuccess(this.checkDbAlert, 'mail-wrapper'))
.catch((e) =>
this.handleFailure(this.checkDbAlert, e.response.data.message)
);
@ -55,6 +55,13 @@ class Setup {
this.checkSmtpButton.disabled = true;
if (data.mail_driver === 'log') {
this.handleSuccess(this.checkSmtpAlert, 'account-wrapper');
this.handleSuccess(this.checkSmtpAlert, 'submit-wrapper');
return this.checkSmtpButton.disabled = false;
}
Axios.post('/setup/check_mail', data)
.then((response) => this.handleSuccess(this.checkSmtpAlert))
.catch((e) =>
@ -70,9 +77,9 @@ class Setup {
let win = window.open(response.data.url, '_blank');
win.focus();
return this.handleSuccess(this.checkPdfAlert);
return this.handleSuccess(this.checkPdfAlert, 'database-wrapper');
} catch (error) {
this.handleSuccess(this.checkPdfAlert);
this.handleSuccess(this.checkPdfAlert, 'database-wrapper');
this.checkPdfAlert.textContent = `Success! You can preview test PDF here: ${response.data.url}`;
}
})
@ -82,10 +89,15 @@ class Setup {
});
}
handleSuccess(element) {
handleSuccess(element, nextStep = null) {
element.classList.remove('alert-failure');
element.innerText = 'Success!';
element.classList.add('alert-success');
if (nextStep) {
document.getElementById(nextStep).classList.remove('hidden');
document.getElementById(nextStep).scrollIntoView({behavior: 'smooth', block: 'center'});
}
}
handleFailure(element, message = null) {

View File

@ -100,7 +100,7 @@ return [
'powered_by' => 'Powered by',
'no_items' => 'No items',
'recurring_invoices' => 'Recurring Invoices',
'recurring_help' => 'Automatically send clients the same invoices weekly, bi-monthly, monthly, quarterly or annually.
'recurring_help' => 'Automatically send clients the same invoices weekly, bi-monthly, monthly, quarterly or annually.
Use :MONTH, :QUARTER or :YEAR for dynamic dates. Basic math works as well, for example :MONTH-1.
Examples of dynamic invoice variables:
<ul>
@ -3277,7 +3277,7 @@ return [
'under_payments_disabled' => 'Company doesn\'t support under payments.',
'over_payments_disabled' => 'Company doesn\'t support over payments.',
'paused' => 'Paused',
'saved_at' => 'Saved at :time',
@ -3292,7 +3292,7 @@ return [
'pay_with_credit' => 'Pay with credit',
'payment_method_saving_failed' => 'Payment method can\'t be saved for future use.',
'pay_with' => 'Pay with',
'n/a' => 'N/A',
@ -3316,7 +3316,7 @@ return [
'pay' => 'Pay',
'instructions' => 'Instructions',
'notification_invoice_reminder1_sent_subject' => 'Reminder 1 for Invoice :invoice was sent to :client',
'notification_invoice_reminder2_sent_subject' => 'Reminder 2 for Invoice :invoice was sent to :client',
'notification_invoice_reminder3_sent_subject' => 'Reminder 3 for Invoice :invoice was sent to :client',
@ -3326,4 +3326,6 @@ return [
'custom_value4' => 'Custom Value',
'inclusive_taxes' => 'Include taxes',
'sort_order' => 'Sort Order',
'setup_steps_notice' => 'To proceed to next step, make sure you test each section.',
];

View File

@ -1,4 +1,4 @@
<div class="bg-white shadow overflow-hidden rounded-lg mt-6">
<div class="bg-white shadow overflow-hidden rounded-lg mt-6 hidden" id="account-wrapper">
<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') }}
@ -43,4 +43,4 @@
</div>
</dl>
</div>
</div>
</div>

View File

@ -22,7 +22,8 @@
{{ 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="https" {{ old('https') ? 'checked': '' }} checked>
<input type="checkbox" class="form-checkbox mr-1" name="https"
{{ old('https') ? 'checked': '' }} checked>
<span>{{ ctrans('texts.require') }}</span>
<span class="text-gray-600 text-xs ml-2">({{ ctrans('texts.recommended_in_production') }})</span>
</dd>
@ -42,9 +43,11 @@
{{ 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="send_logs" {{ old('send_logs' ? 'checked': '') }}>
<input type="checkbox" class="form-checkbox mr-1"
name="send_logs" {{ old('send_logs' ? 'checked': '') }}>
<span>{{ ctrans('texts.send_fail_logs_to_our_server') }}</span>
<a class="button-link mt-1 block" href="https://www.invoiceninja.com/privacy-policy/">Read more about how we use this.</a>
<a class="button-link mt-1 block" href="https://www.invoiceninja.com/privacy-policy/">Read more
about how we use this.</a>
</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">

View File

@ -1,4 +1,4 @@
<div class="bg-white shadow overflow-hidden rounded-lg mt-6">
<div class="bg-white shadow overflow-hidden rounded-lg mt-6 hidden" id="database-wrapper">
<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') }}

View File

@ -1,4 +1,4 @@
<div class="bg-white shadow overflow-hidden rounded-lg mt-6" x-data="{ option: 'log' }">
<div class="bg-white shadow overflow-hidden rounded-lg mt-6 hidden" id="mail-wrapper" x-data="{ option: 'log' }">
<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') }}
@ -81,7 +81,7 @@
<input type="password" class="input w-full" name="mail_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" x-show="option != 'log'">
<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 type="button" class="button button-primary bg-blue-600 py-2 px-3 text-xs" id="test-smtp-connection">
{{ ctrans('texts.send_test_email') }}

View File

@ -51,7 +51,9 @@
@include('setup._mail')
@include('setup._account')
<div class="flex justify-center mt-4">
<p class="mt-4 text-sm">{{ ctrans('texts.setup_steps_notice') }}</p>
<div class="flex justify-center mt-4 hidden" id="submit-wrapper">
<div class="flex flex-col">
<div class="mt-4 text-sm">
<input type="checkbox" class="form-checkbox mr-2" name="terms_of_service" required>