463 lines
20 KiB
PHP
463 lines
20 KiB
PHP
<div class="has-scrollable-content configuration d-flex flex-column" v-else-if="step === 3 && !appInstalled" v-cloak>
|
|
<div class="header overflow-hidden">
|
|
<h3>Configuration</h3>
|
|
<p class="excerpt">Please configure your application with necessary information and credentials.</p>
|
|
</div>
|
|
|
|
<div class="content position-relative flex-grow-1 overflow-hidden">
|
|
<simplebar class="scrollable-content position-absolute" data-simplebar-auto-hide="false" ref="configurationContent">
|
|
<div
|
|
class="alert alert-danger alert-dismissible show fade"
|
|
:class="{
|
|
'animate__animated animate__headShake': animateAlert
|
|
}"
|
|
role="alert"
|
|
v-if="hasErrorMessage"
|
|
>
|
|
<span v-html="errorMessage"></span>
|
|
|
|
<button
|
|
type="button"
|
|
class="btn-close"
|
|
data-bs-dismiss="alert"
|
|
aria-label="Close"
|
|
@click="resetErrorMessage"
|
|
>
|
|
</button>
|
|
</div>
|
|
|
|
<form
|
|
class="configuration-form form-horizontal"
|
|
@input="errors.clear($event.target.name)"
|
|
ref="configurationForm"
|
|
>
|
|
<div class="box overflow-hidden">
|
|
<div class="title">
|
|
<h5>Database</h5>
|
|
</div>
|
|
|
|
<div class="row form-group">
|
|
<label for="db_host" class="col-md-3 col-form-label">
|
|
Host <span class="required">*</span>
|
|
</label>
|
|
|
|
<div class="col-md-9">
|
|
<input
|
|
type="text"
|
|
autocomplete="off"
|
|
name="db_host"
|
|
id="db_host"
|
|
class="form-control"
|
|
v-model="form.db_host"
|
|
>
|
|
|
|
<span class="invalid-feedback" v-if="errors.has('db_host')">
|
|
@{{ errors.get('db_host') }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row form-group">
|
|
<label for="db_port" class="col-md-3 col-form-label">
|
|
Port <span class="required">*</span>
|
|
</label>
|
|
|
|
<div class="col-md-9">
|
|
<input
|
|
type="text"
|
|
autocomplete="off"
|
|
name="db_port"
|
|
id="db_port"
|
|
class="form-control"
|
|
v-model="form.db_port"
|
|
>
|
|
|
|
<span class="invalid-feedback" v-if="errors.has('db_port')">
|
|
@{{ errors.get('db_port') }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row form-group">
|
|
<label for="db_username" class="col-md-3 col-form-label">
|
|
Username <span class="required">*</span>
|
|
</label>
|
|
|
|
<div class="col-md-9">
|
|
<input
|
|
type="text"
|
|
autocomplete="off"
|
|
name="db_username"
|
|
id="db_username"
|
|
class="form-control"
|
|
v-model="form.db_username"
|
|
>
|
|
|
|
<span class="invalid-feedback" v-if="errors.has('db_username')">
|
|
@{{ errors.get('db_username') }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row form-group">
|
|
<label for="db_password" class="col-md-3 col-form-label">
|
|
Password
|
|
</label>
|
|
|
|
<div class="col-md-9">
|
|
<input
|
|
type="password"
|
|
autocomplete="off"
|
|
name="db_password"
|
|
id="db_password"
|
|
class="form-control"
|
|
v-model="form.db_password"
|
|
>
|
|
|
|
<span class="invalid-feedback" v-if="errors.has('db_password')">
|
|
@{{ errors.get('db_password') }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row form-group">
|
|
<label for="db_database" class="col-md-3 col-form-label">
|
|
Database <span class="required">*</span>
|
|
</label>
|
|
|
|
<div class="col-md-9">
|
|
<input
|
|
type="text"
|
|
autocomplete="off"
|
|
name="db_database"
|
|
id="db_database"
|
|
class="form-control"
|
|
v-model="form.db_database"
|
|
>
|
|
|
|
<span class="invalid-feedback" v-if="errors.has('db_database')">
|
|
@{{ errors.get('db_database') }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="box overflow-hidden">
|
|
<div class="title">
|
|
<h5>Admin</h5>
|
|
</div>
|
|
|
|
<div class="row form-group">
|
|
<label for="admin_first_name" class="col-md-3 col-form-label">
|
|
First Name <span class="required">*</span>
|
|
</label>
|
|
|
|
<div class="col-md-9">
|
|
<input
|
|
type="text"
|
|
autocomplete="off"
|
|
name="admin_first_name"
|
|
id="admin_first_name"
|
|
class="form-control"
|
|
v-model="form.admin_first_name"
|
|
>
|
|
|
|
<span class="invalid-feedback" v-if="errors.has('admin_first_name')">
|
|
@{{ errors.get('admin_first_name') }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row form-group">
|
|
<label for="admin_last_name" class="col-md-3 col-form-label">
|
|
Last Name <span class="required">*</span>
|
|
</label>
|
|
|
|
<div class="col-md-9">
|
|
<input
|
|
type="text"
|
|
autocomplete="off"
|
|
name="admin_last_name"
|
|
id="admin_last_name"
|
|
class="form-control"
|
|
v-model="form.admin_last_name"
|
|
>
|
|
|
|
<span class="invalid-feedback" v-if="errors.has('admin_last_name')">
|
|
@{{ errors.get('admin_last_name') }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row form-group">
|
|
<label for="admin_email" class="col-md-3 col-form-label">
|
|
Email <span class="required">*</span>
|
|
</label>
|
|
|
|
<div class="col-md-9">
|
|
<input
|
|
type="email"
|
|
autocomplete="off"
|
|
name="admin_email"
|
|
id="admin_email"
|
|
class="form-control"
|
|
v-model="form.admin_email"
|
|
>
|
|
|
|
<span class="invalid-feedback" v-if="errors.has('admin_email')">
|
|
@{{ errors.get('admin_email') }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row form-group">
|
|
<label for="admin_phone" class="col-md-3 col-form-label">
|
|
Phone <span class="required">*</span>
|
|
</label>
|
|
|
|
<div class="col-md-9">
|
|
<input
|
|
type="text"
|
|
autocomplete="off"
|
|
name="admin_phone"
|
|
id="admin_phone"
|
|
class="form-control"
|
|
v-model="form.admin_phone"
|
|
>
|
|
|
|
<span class="invalid-feedback" v-if="errors.has('admin_phone')">
|
|
@{{ errors.get('admin_phone') }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row form-group">
|
|
<label for="admin_password" class="col-md-3 col-form-label">
|
|
Password <span class="required">*</span>
|
|
</label>
|
|
|
|
<div class="col-md-9">
|
|
<input
|
|
type="password"
|
|
autocomplete="off"
|
|
name="admin_password"
|
|
id="admin_password"
|
|
class="form-control"
|
|
v-model="form.admin_password"
|
|
>
|
|
|
|
<span class="invalid-feedback" v-if="errors.has('admin_password')">
|
|
@{{ errors.get('admin_password') }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row form-group">
|
|
<label for="admin_password_confirmation" class="col-md-3 col-form-label">
|
|
Confirm Password <span class="required">*</span>
|
|
</label>
|
|
|
|
<div class="col-md-9">
|
|
<input
|
|
type="password"
|
|
autocomplete="off"
|
|
name="admin_password_confirmation"
|
|
id="admin_password_confirmation"
|
|
class="form-control"
|
|
v-model="form.admin_password_confirmation"
|
|
>
|
|
|
|
<span class="invalid-feedback" v-if="errors.has('admin_password_confirmation')">
|
|
@{{ errors.get('admin_password_confirmation') }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="box overflow-hidden">
|
|
<div class="title">
|
|
<h5>Store</h5>
|
|
</div>
|
|
|
|
<div class="row form-group">
|
|
<label for="store_name" class="col-md-3 col-form-label">
|
|
Name <span class="required">*</span>
|
|
</label>
|
|
|
|
<div class="col-md-9">
|
|
<input
|
|
type="text"
|
|
autocomplete="off"
|
|
name="store_name"
|
|
id="store_name"
|
|
class="form-control"
|
|
v-model="form.store_name"
|
|
>
|
|
|
|
<span class="invalid-feedback" v-if="errors.has('store_name')">
|
|
@{{ errors.get('store_name') }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row form-group">
|
|
<label for="store_email" class="col-md-3 col-form-label">
|
|
Email <span class="required">*</span>
|
|
</label>
|
|
|
|
<div class="col-md-9">
|
|
<input
|
|
type="email"
|
|
autocomplete="off"
|
|
name="store_email"
|
|
id="store_email"
|
|
class="form-control"
|
|
v-model="form.store_email"
|
|
>
|
|
|
|
<span class="invalid-feedback" v-if="errors.has('store_email')">
|
|
@{{ errors.get('store_email') }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row form-group">
|
|
<label for="store_phone" class="col-md-3 col-form-label">
|
|
Phone <span class="required">*</span>
|
|
</label>
|
|
|
|
<div class="col-md-9">
|
|
<input
|
|
type="text"
|
|
autocomplete="off"
|
|
name="store_phone"
|
|
id="store_phone"
|
|
class="form-control"
|
|
v-model="form.store_phone"
|
|
>
|
|
|
|
<span class="invalid-feedback" v-if="errors.has('store_phone')">
|
|
@{{ errors.get('store_phone') }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row form-group">
|
|
<label for="store_search_engine" class="col-md-3 col-form-label">
|
|
Search Engine <span class="required">*</span>
|
|
</label>
|
|
|
|
<div class="col-md-9">
|
|
<select
|
|
name="store_search_engine"
|
|
id="store_search_engine"
|
|
class="form-select"
|
|
@change="scrollToBottom($event.target.value)"
|
|
v-model="form.store_search_engine"
|
|
>
|
|
<option value="mysql">MySQL</option>
|
|
<option value="algolia">Algolia</option>
|
|
<option value="meilisearch">Meilisearch</option>
|
|
</select>
|
|
|
|
<span class="invalid-feedback" v-if="errors.has('store_search_engine')">
|
|
@{{ errors.get('store_search_engine') }}
|
|
</span>
|
|
|
|
<span class="text-muted" v-else>You cannot change the search engine later.</span>
|
|
</div>
|
|
</div>
|
|
|
|
<template v-if="form.store_search_engine === 'algolia'">
|
|
<div class="row form-group">
|
|
<label for="algolia_app_id" class="col-md-3 col-form-label">
|
|
Algolia Application ID <span class="required">*</span>
|
|
</label>
|
|
|
|
<div class="col-md-9">
|
|
<input
|
|
type="text"
|
|
autocomplete="off"
|
|
name="algolia_app_id"
|
|
id="algolia_app_id"
|
|
class="form-control"
|
|
v-model="form.algolia_app_id"
|
|
>
|
|
|
|
<span class="invalid-feedback" v-if="errors.has('algolia_app_id')">
|
|
@{{ errors.get('algolia_app_id') }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row form-group">
|
|
<label for="algolia_secret" class="col-md-3 col-form-label">
|
|
Algolia Admin API Key <span class="required">*</span>
|
|
</label>
|
|
|
|
<div class="col-md-9">
|
|
<input
|
|
type="password"
|
|
autocomplete="off"
|
|
name="algolia_secret"
|
|
id="algolia_secret"
|
|
class="form-control"
|
|
v-model="form.algolia_secret"
|
|
>
|
|
|
|
<span class="invalid-feedback" v-if="errors.has('algolia_secret')">
|
|
@{{ errors.get('algolia_secret') }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template v-if="form.store_search_engine === 'meilisearch'">
|
|
<div class="row form-group">
|
|
<label for="meilisearch_host" class="col-md-3 col-form-label">
|
|
Meilisearch Host <span class="required">*</span>
|
|
</label>
|
|
|
|
<div class="col-md-9">
|
|
<input
|
|
type="text"
|
|
autocomplete="off"
|
|
name="meilisearch_host"
|
|
id="meilisearch_host"
|
|
class="form-control"
|
|
v-model="form.meilisearch_host"
|
|
>
|
|
|
|
<span class="invalid-feedback" v-if="errors.has('meilisearch_host')">
|
|
@{{ errors.get('meilisearch_host') }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row form-group">
|
|
<label for="meilisearch_key" class="col-md-3 col-form-label">
|
|
Meilisearch Key <span class="required">*</span>
|
|
</label>
|
|
|
|
<div class="col-md-9">
|
|
<input
|
|
type="password"
|
|
autocomplete="off"
|
|
name="meilisearch_key"
|
|
id="meilisearch_key"
|
|
class="form-control"
|
|
v-model="form.meilisearch_key"
|
|
>
|
|
|
|
<span class="invalid-feedback" v-if="errors.has('meilisearch_key')">
|
|
@{{ errors.get('meilisearch_key') }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</form>
|
|
</simplebar>
|
|
</div>
|
|
</div>
|