mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-28 02:50:39 +00:00
setup wizard init
This commit is contained in:
carodej
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<AuthContentWrapper ref="auth">
|
||||
|
||||
<!--Database Credentials-->
|
||||
<AuthContent name="database-credentials" :visible="true">
|
||||
<div class="content-headline">
|
||||
<settings-icon size="40" class="title-icon"></settings-icon>
|
||||
<h1>Setup Wizard</h1>
|
||||
<h2>Set up your application appearance, analytics, etc.</h2>
|
||||
</div>
|
||||
|
||||
<ValidationObserver @submit.prevent="appSetupSubmit" ref="appSetup" v-slot="{ invalid }" tag="form" class="form block-form">
|
||||
<FormLabel>General Settings</FormLabel>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Mail Driver:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Driver" rules="required" v-slot="{ errors }">
|
||||
<input v-model="mail.driver" placeholder="Type your mail driver" type="text" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
|
||||
<FormLabel class="mt-70">Others Information</FormLabel>
|
||||
|
||||
<div class="submit-wrapper">
|
||||
<AuthButton icon="chevron-right" text="Save and Create Admin" :loading="isLoading" :disabled="isLoading"/>
|
||||
</div>
|
||||
|
||||
</ValidationObserver>
|
||||
</AuthContent>
|
||||
</AuthContentWrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import AuthContentWrapper from '@/components/Auth/AuthContentWrapper'
|
||||
import SelectInput from '@/components/Others/Forms/SelectInput'
|
||||
import FormLabel from '@/components/Others/Forms/FormLabel'
|
||||
import InfoBox from '@/components/Others/Forms/InfoBox'
|
||||
import AuthContent from '@/components/Auth/AuthContent'
|
||||
import AuthButton from '@/components/Auth/AuthButton'
|
||||
import { SettingsIcon } from 'vue-feather-icons'
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import {mapGetters} from 'vuex'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'EnvironmentSetup',
|
||||
components: {
|
||||
AuthContentWrapper,
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
SettingsIcon,
|
||||
SelectInput,
|
||||
AuthContent,
|
||||
AuthButton,
|
||||
FormLabel,
|
||||
required,
|
||||
InfoBox,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
storageServiceList: [
|
||||
{
|
||||
label: 'Local Driver',
|
||||
value: 'local',
|
||||
},
|
||||
{
|
||||
label: 'Amazon Web Services S3',
|
||||
value: 's3',
|
||||
},
|
||||
{
|
||||
label: 'Digital Ocean Spaces',
|
||||
value: 'spaces',
|
||||
},
|
||||
],
|
||||
encryptionList: [
|
||||
{
|
||||
label: 'TLS',
|
||||
value: 'tls',
|
||||
},
|
||||
{
|
||||
label: 'SSL',
|
||||
value: 'ssl',
|
||||
},
|
||||
],
|
||||
storage: {
|
||||
driver: 'local',
|
||||
key: '',
|
||||
secret: '',
|
||||
endpoint: '',
|
||||
region: '',
|
||||
bucket: '',
|
||||
},
|
||||
mail: {
|
||||
driver: '',
|
||||
host: '',
|
||||
port: '',
|
||||
username: '',
|
||||
password: '',
|
||||
encryption: '',
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async appSetupSubmit() {
|
||||
this.$router.push({name: 'AppSetup'})
|
||||
},
|
||||
},
|
||||
created() {
|
||||
var container = document.getElementById('vue-file-manager')
|
||||
container.scrollTop = 0
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
//@import '@assets/vue-file-manager/_auth-form';
|
||||
@import '@assets/vue-file-manager/_forms';
|
||||
@import '@assets/vue-file-manager/_auth';
|
||||
@import '@assets/vue-file-manager/_setup_wizard';
|
||||
</style>
|
||||
@@ -0,0 +1,402 @@
|
||||
<template>
|
||||
<AuthContentWrapper ref="auth">
|
||||
|
||||
<!--Database Credentials-->
|
||||
<AuthContent name="database-credentials" :visible="true">
|
||||
<div class="content-headline">
|
||||
<settings-icon size="40" class="title-icon"></settings-icon>
|
||||
<h1>Setup Wizard</h1>
|
||||
<h2>Set up you billing information.</h2>
|
||||
</div>
|
||||
|
||||
<ValidationObserver @submit.prevent="billingInformationSubmit" ref="billingInformation" v-slot="{ invalid }"
|
||||
tag="form" class="form block-form">
|
||||
<FormLabel>Company Information</FormLabel>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Company Name:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Name"
|
||||
rules="required" v-slot="{ errors }">
|
||||
<input v-model="billingInformation.billing_name" placeholder="Type your company name"
|
||||
type="text"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>VAT Number:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Vat Number"
|
||||
rules="required" v-slot="{ errors }">
|
||||
<input v-model="billingInformation.billing_vat_number" placeholder="Type your VAT number"
|
||||
type="text"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<FormLabel class="mt-70">Billing Information</FormLabel>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Billing Country:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Country"
|
||||
rules="required" v-slot="{ errors }">
|
||||
<SelectInput v-model="billingInformation.billing_country" :options="countries" placeholder="Select your billing country" :isError="errors[0]"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Billing Address:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Address"
|
||||
rules="required" v-slot="{ errors }">
|
||||
<input v-model="billingInformation.billing_address" placeholder="Select your billing address"
|
||||
type="text"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="wrapper-inline">
|
||||
<div class="block-wrapper">
|
||||
<label>Billing City:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing City"
|
||||
rules="required" v-slot="{ errors }">
|
||||
<input v-model="billingInformation.billing_city" placeholder="Select your billing city"
|
||||
type="text"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
<div class="block-wrapper">
|
||||
<label>Billing Postal Code:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Postal Code"
|
||||
rules="required" v-slot="{ errors }">
|
||||
<input v-model="billingInformation.billing_postal_code"
|
||||
placeholder="Select your billing postal code" type="text"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Billing State:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing State"
|
||||
rules="required" v-slot="{ errors }">
|
||||
<input v-model="billingInformation.billing_state" placeholder="Select your billing state"
|
||||
type="text"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="submit-wrapper">
|
||||
<AuthButton icon="chevron-right" text="Save and Create Plans" :loading="isLoading"
|
||||
:disabled="isLoading"/>
|
||||
</div>
|
||||
|
||||
</ValidationObserver>
|
||||
</AuthContent>
|
||||
</AuthContentWrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import AuthContentWrapper from '@/components/Auth/AuthContentWrapper'
|
||||
import SelectInput from '@/components/Others/Forms/SelectInput'
|
||||
import FormLabel from '@/components/Others/Forms/FormLabel'
|
||||
import InfoBox from '@/components/Others/Forms/InfoBox'
|
||||
import AuthContent from '@/components/Auth/AuthContent'
|
||||
import AuthButton from '@/components/Auth/AuthButton'
|
||||
import {SettingsIcon} from 'vue-feather-icons'
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import {mapGetters} from 'vuex'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'BillingsDetail',
|
||||
components: {
|
||||
AuthContentWrapper,
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
SettingsIcon,
|
||||
SelectInput,
|
||||
AuthContent,
|
||||
AuthButton,
|
||||
FormLabel,
|
||||
required,
|
||||
InfoBox,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
countries: [
|
||||
{label: 'Afghanistan', value: 'AF'},
|
||||
{label: 'Åland Islands', value: 'AX'},
|
||||
{label: 'Albania', value: 'AL'},
|
||||
{label: 'Algeria', value: 'DZ'},
|
||||
{label: 'American Samoa', value: 'AS'},
|
||||
{label: 'AndorrA', value: 'AD'},
|
||||
{label: 'Angola', value: 'AO'},
|
||||
{label: 'Anguilla', value: 'AI'},
|
||||
{label: 'Antarctica', value: 'AQ'},
|
||||
{label: 'Antigua and Barbuda', value: 'AG'},
|
||||
{label: 'Argentina', value: 'AR'},
|
||||
{label: 'Armenia', value: 'AM'},
|
||||
{label: 'Aruba', value: 'AW'},
|
||||
{label: 'Australia', value: 'AU'},
|
||||
{label: 'Austria', value: 'AT'},
|
||||
{label: 'Azerbaijan', value: 'AZ'},
|
||||
{label: 'Bahamas', value: 'BS'},
|
||||
{label: 'Bahrain', value: 'BH'},
|
||||
{label: 'Bangladesh', value: 'BD'},
|
||||
{label: 'Barbados', value: 'BB'},
|
||||
{label: 'Belarus', value: 'BY'},
|
||||
{label: 'Belgium', value: 'BE'},
|
||||
{label: 'Belize', value: 'BZ'},
|
||||
{label: 'Benin', value: 'BJ'},
|
||||
{label: 'Bermuda', value: 'BM'},
|
||||
{label: 'Bhutan', value: 'BT'},
|
||||
{label: 'Bolivia', value: 'BO'},
|
||||
{label: 'Bosnia and Herzegovina', value: 'BA'},
|
||||
{label: 'Botswana', value: 'BW'},
|
||||
{label: 'Bouvet Island', value: 'BV'},
|
||||
{label: 'Brazil', value: 'BR'},
|
||||
{label: 'British Indian Ocean Territory', value: 'IO'},
|
||||
{label: 'Brunei Darussalam', value: 'BN'},
|
||||
{label: 'Bulgaria', value: 'BG'},
|
||||
{label: 'Burkina Faso', value: 'BF'},
|
||||
{label: 'Burundi', value: 'BI'},
|
||||
{label: 'Cambodia', value: 'KH'},
|
||||
{label: 'Cameroon', value: 'CM'},
|
||||
{label: 'Canada', value: 'CA'},
|
||||
{label: 'Cape Verde', value: 'CV'},
|
||||
{label: 'Cayman Islands', value: 'KY'},
|
||||
{label: 'Central African Republic', value: 'CF'},
|
||||
{label: 'Chad', value: 'TD'},
|
||||
{label: 'Chile', value: 'CL'},
|
||||
{label: 'China', value: 'CN'},
|
||||
{label: 'Christmas Island', value: 'CX'},
|
||||
{label: 'Cocos (Keeling) Islands', value: 'CC'},
|
||||
{label: 'Colombia', value: 'CO'},
|
||||
{label: 'Comoros', value: 'KM'},
|
||||
{label: 'Congo', value: 'CG'},
|
||||
{label: 'Congo, The Democratic Republic of the', value: 'CD'},
|
||||
{label: 'Cook Islands', value: 'CK'},
|
||||
{label: 'Costa Rica', value: 'CR'},
|
||||
{label: 'Cote D\'Ivoire', value: 'CI'},
|
||||
{label: 'Croatia', value: 'HR'},
|
||||
{label: 'Cuba', value: 'CU'},
|
||||
{label: 'Cyprus', value: 'CY'},
|
||||
{label: 'Czech Republic', value: 'CZ'},
|
||||
{label: 'Denmark', value: 'DK'},
|
||||
{label: 'Djibouti', value: 'DJ'},
|
||||
{label: 'Dominica', value: 'DM'},
|
||||
{label: 'Dominican Republic', value: 'DO'},
|
||||
{label: 'Ecuador', value: 'EC'},
|
||||
{label: 'Egypt', value: 'EG'},
|
||||
{label: 'El Salvador', value: 'SV'},
|
||||
{label: 'Equatorial Guinea', value: 'GQ'},
|
||||
{label: 'Eritrea', value: 'ER'},
|
||||
{label: 'Estonia', value: 'EE'},
|
||||
{label: 'Ethiopia', value: 'ET'},
|
||||
{label: 'Falkland Islands (Malvinas)', value: 'FK'},
|
||||
{label: 'Faroe Islands', value: 'FO'},
|
||||
{label: 'Fiji', value: 'FJ'},
|
||||
{label: 'Finland', value: 'FI'},
|
||||
{label: 'France', value: 'FR'},
|
||||
{label: 'French Guiana', value: 'GF'},
|
||||
{label: 'French Polynesia', value: 'PF'},
|
||||
{label: 'French Southern Territories', value: 'TF'},
|
||||
{label: 'Gabon', value: 'GA'},
|
||||
{label: 'Gambia', value: 'GM'},
|
||||
{label: 'Georgia', value: 'GE'},
|
||||
{label: 'Germany', value: 'DE'},
|
||||
{label: 'Ghana', value: 'GH'},
|
||||
{label: 'Gibraltar', value: 'GI'},
|
||||
{label: 'Greece', value: 'GR'},
|
||||
{label: 'Greenland', value: 'GL'},
|
||||
{label: 'Grenada', value: 'GD'},
|
||||
{label: 'Guadeloupe', value: 'GP'},
|
||||
{label: 'Guam', value: 'GU'},
|
||||
{label: 'Guatemala', value: 'GT'},
|
||||
{label: 'Guernsey', value: 'GG'},
|
||||
{label: 'Guinea', value: 'GN'},
|
||||
{label: 'Guinea-Bissau', value: 'GW'},
|
||||
{label: 'Guyana', value: 'GY'},
|
||||
{label: 'Haiti', value: 'HT'},
|
||||
{label: 'Heard Island and Mcdonald Islands', value: 'HM'},
|
||||
{label: 'Holy See (Vatican City State)', value: 'VA'},
|
||||
{label: 'Honduras', value: 'HN'},
|
||||
{label: 'Hong Kong', value: 'HK'},
|
||||
{label: 'Hungary', value: 'HU'},
|
||||
{label: 'Iceland', value: 'IS'},
|
||||
{label: 'India', value: 'IN'},
|
||||
{label: 'Indonesia', value: 'ID'},
|
||||
{label: 'Iran, Islamic Republic Of', value: 'IR'},
|
||||
{label: 'Iraq', value: 'IQ'},
|
||||
{label: 'Ireland', value: 'IE'},
|
||||
{label: 'Isle of Man', value: 'IM'},
|
||||
{label: 'Israel', value: 'IL'},
|
||||
{label: 'Italy', value: 'IT'},
|
||||
{label: 'Jamaica', value: 'JM'},
|
||||
{label: 'Japan', value: 'JP'},
|
||||
{label: 'Jersey', value: 'JE'},
|
||||
{label: 'Jordan', value: 'JO'},
|
||||
{label: 'Kazakhstan', value: 'KZ'},
|
||||
{label: 'Kenya', value: 'KE'},
|
||||
{label: 'Kiribati', value: 'KI'},
|
||||
{label: 'Korea, Democratic People\'S Republic of', value: 'KP'},
|
||||
{label: 'Korea, Republic of', value: 'KR'},
|
||||
{label: 'Kuwait', value: 'KW'},
|
||||
{label: 'Kyrgyzstan', value: 'KG'},
|
||||
{label: 'Lao People\'S Democratic Republic', value: 'LA'},
|
||||
{label: 'Latvia', value: 'LV'},
|
||||
{label: 'Lebanon', value: 'LB'},
|
||||
{label: 'Lesotho', value: 'LS'},
|
||||
{label: 'Liberia', value: 'LR'},
|
||||
{label: 'Libyan Arab Jamahiriya', value: 'LY'},
|
||||
{label: 'Liechtenstein', value: 'LI'},
|
||||
{label: 'Lithuania', value: 'LT'},
|
||||
{label: 'Luxembourg', value: 'LU'},
|
||||
{label: 'Macao', value: 'MO'},
|
||||
{label: 'Macedonia, The Former Yugoslav Republic of', value: 'MK'},
|
||||
{label: 'Madagascar', value: 'MG'},
|
||||
{label: 'Malawi', value: 'MW'},
|
||||
{label: 'Malaysia', value: 'MY'},
|
||||
{label: 'Maldives', value: 'MV'},
|
||||
{label: 'Mali', value: 'ML'},
|
||||
{label: 'Malta', value: 'MT'},
|
||||
{label: 'Marshall Islands', value: 'MH'},
|
||||
{label: 'Martinique', value: 'MQ'},
|
||||
{label: 'Mauritania', value: 'MR'},
|
||||
{label: 'Mauritius', value: 'MU'},
|
||||
{label: 'Mayotte', value: 'YT'},
|
||||
{label: 'Mexico', value: 'MX'},
|
||||
{label: 'Micronesia, Federated States of', value: 'FM'},
|
||||
{label: 'Moldova, Republic of', value: 'MD'},
|
||||
{label: 'Monaco', value: 'MC'},
|
||||
{label: 'Mongolia', value: 'MN'},
|
||||
{label: 'Montserrat', value: 'MS'},
|
||||
{label: 'Morocco', value: 'MA'},
|
||||
{label: 'Mozambique', value: 'MZ'},
|
||||
{label: 'Myanmar', value: 'MM'},
|
||||
{label: 'Namibia', value: 'NA'},
|
||||
{label: 'Nauru', value: 'NR'},
|
||||
{label: 'Nepal', value: 'NP'},
|
||||
{label: 'Netherlands', value: 'NL'},
|
||||
{label: 'Netherlands Antilles', value: 'AN'},
|
||||
{label: 'New Caledonia', value: 'NC'},
|
||||
{label: 'New Zealand', value: 'NZ'},
|
||||
{label: 'Nicaragua', value: 'NI'},
|
||||
{label: 'Niger', value: 'NE'},
|
||||
{label: 'Nigeria', value: 'NG'},
|
||||
{label: 'Niue', value: 'NU'},
|
||||
{label: 'Norfolk Island', value: 'NF'},
|
||||
{label: 'Northern Mariana Islands', value: 'MP'},
|
||||
{label: 'Norway', value: 'NO'},
|
||||
{label: 'Oman', value: 'OM'},
|
||||
{label: 'Pakistan', value: 'PK'},
|
||||
{label: 'Palau', value: 'PW'},
|
||||
{label: 'Palestinian Territory, Occupied', value: 'PS'},
|
||||
{label: 'Panama', value: 'PA'},
|
||||
{label: 'Papua New Guinea', value: 'PG'},
|
||||
{label: 'Paraguay', value: 'PY'},
|
||||
{label: 'Peru', value: 'PE'},
|
||||
{label: 'Philippines', value: 'PH'},
|
||||
{label: 'Pitcairn', value: 'PN'},
|
||||
{label: 'Poland', value: 'PL'},
|
||||
{label: 'Portugal', value: 'PT'},
|
||||
{label: 'Puerto Rico', value: 'PR'},
|
||||
{label: 'Qatar', value: 'QA'},
|
||||
{label: 'Reunion', value: 'RE'},
|
||||
{label: 'Romania', value: 'RO'},
|
||||
{label: 'Russian Federation', value: 'RU'},
|
||||
{label: 'RWANDA', value: 'RW'},
|
||||
{label: 'Saint Helena', value: 'SH'},
|
||||
{label: 'Saint Kitts and Nevis', value: 'KN'},
|
||||
{label: 'Saint Lucia', value: 'LC'},
|
||||
{label: 'Saint Pierre and Miquelon', value: 'PM'},
|
||||
{label: 'Saint Vincent and the Grenadines', value: 'VC'},
|
||||
{label: 'Samoa', value: 'WS'},
|
||||
{label: 'San Marino', value: 'SM'},
|
||||
{label: 'Sao Tome and Principe', value: 'ST'},
|
||||
{label: 'Saudi Arabia', value: 'SA'},
|
||||
{label: 'Senegal', value: 'SN'},
|
||||
{label: 'Serbia and Montenegro', value: 'CS'},
|
||||
{label: 'Seychelles', value: 'SC'},
|
||||
{label: 'Sierra Leone', value: 'SL'},
|
||||
{label: 'Singapore', value: 'SG'},
|
||||
{label: 'Slovakia', value: 'SK'},
|
||||
{label: 'Slovenia', value: 'SI'},
|
||||
{label: 'Solomon Islands', value: 'SB'},
|
||||
{label: 'Somalia', value: 'SO'},
|
||||
{label: 'South Africa', value: 'ZA'},
|
||||
{label: 'South Georgia and the South Sandwich Islands', value: 'GS'},
|
||||
{label: 'Spain', value: 'ES'},
|
||||
{label: 'Sri Lanka', value: 'LK'},
|
||||
{label: 'Sudan', value: 'SD'},
|
||||
{label: 'Suriname', value: 'SR'},
|
||||
{label: 'Svalbard and Jan Mayen', value: 'SJ'},
|
||||
{label: 'Swaziland', value: 'SZ'},
|
||||
{label: 'Sweden', value: 'SE'},
|
||||
{label: 'Switzerland', value: 'CH'},
|
||||
{label: 'Syrian Arab Republic', value: 'SY'},
|
||||
{label: 'Taiwan, Province of China', value: 'TW'},
|
||||
{label: 'Tajikistan', value: 'TJ'},
|
||||
{label: 'Tanzania, United Republic of', value: 'TZ'},
|
||||
{label: 'Thailand', value: 'TH'},
|
||||
{label: 'Timor-Leste', value: 'TL'},
|
||||
{label: 'Togo', value: 'TG'},
|
||||
{label: 'Tokelau', value: 'TK'},
|
||||
{label: 'Tonga', value: 'TO'},
|
||||
{label: 'Trinidad and Tobago', value: 'TT'},
|
||||
{label: 'Tunisia', value: 'TN'},
|
||||
{label: 'Turkey', value: 'TR'},
|
||||
{label: 'Turkmenistan', value: 'TM'},
|
||||
{label: 'Turks and Caicos Islands', value: 'TC'},
|
||||
{label: 'Tuvalu', value: 'TV'},
|
||||
{label: 'Uganda', value: 'UG'},
|
||||
{label: 'Ukraine', value: 'UA'},
|
||||
{label: 'United Arab Emirates', value: 'AE'},
|
||||
{label: 'United Kingdom', value: 'GB'},
|
||||
{label: 'United States', value: 'US'},
|
||||
{label: 'United States Minor Outlying Islands', value: 'UM'},
|
||||
{label: 'Uruguay', value: 'UY'},
|
||||
{label: 'Uzbekistan', value: 'UZ'},
|
||||
{label: 'Vanuatu', value: 'VU'},
|
||||
{label: 'Venezuela', value: 'VE'},
|
||||
{label: 'Viet Nam', value: 'VN'},
|
||||
{label: 'Virgin Islands, British', value: 'VG'},
|
||||
{label: 'Virgin Islands, U.S.', value: 'VI'},
|
||||
{label: 'Wallis and Futuna', value: 'WF'},
|
||||
{label: 'Western Sahara', value: 'EH'},
|
||||
{label: 'Yemen', value: 'YE'},
|
||||
{label: 'Zambia', value: 'ZM'},
|
||||
{label: 'Zimbabwe', value: 'ZW'}
|
||||
],
|
||||
billingInformation: {
|
||||
billing_phone_number: '',
|
||||
billing_postal_code: '',
|
||||
billing_vat_number: '',
|
||||
billing_address: '',
|
||||
billing_country: '',
|
||||
billing_state: '',
|
||||
billing_city: '',
|
||||
billing_name: '',
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async billingInformationSubmit() {
|
||||
this.$router.push({name: 'SubscriptionPlans'})
|
||||
},
|
||||
},
|
||||
created() {
|
||||
var container = document.getElementById('vue-file-manager')
|
||||
container.scrollTop = 0
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
//@import '@assets/vue-file-manager/_auth-form';
|
||||
@import '@assets/vue-file-manager/_forms';
|
||||
@import '@assets/vue-file-manager/_auth';
|
||||
@import '@assets/vue-file-manager/_setup_wizard';
|
||||
</style>
|
||||
@@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<AuthContentWrapper ref="auth">
|
||||
|
||||
<!--Database Credentials-->
|
||||
<AuthContent name="database-credentials" :visible="true">
|
||||
<div class="content-headline">
|
||||
<settings-icon size="40" class="title-icon"></settings-icon>
|
||||
<h1>Setup Wizard</h1>
|
||||
<h2>Set up your database credentials.</h2>
|
||||
</div>
|
||||
|
||||
<ValidationObserver @submit.prevent="databaseCredentialsSubmit" ref="verifyPurchaseCode" v-slot="{ invalid }" tag="form" class="form block-form">
|
||||
<FormLabel>Database Credentials</FormLabel>
|
||||
<InfoBox>
|
||||
<p>Firstly, create your database credentials in your database client. For how to, here is Usefull resources:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#" target="_blank">1. cPanel - MySQL Database Wizard</a>
|
||||
<a href="#" target="_blank">2. Plesk - Website databases</a>
|
||||
</li>
|
||||
</ul>
|
||||
</InfoBox>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Connection:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="connection" rules="required" v-slot="{ errors }">
|
||||
<SelectInput v-model="databaseCredentials.connection" :options="connectionList" default="mysql" placeholder="Select your database connection" :isError="errors[0]"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Host:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="connection" rules="required" v-slot="{ errors }">
|
||||
<input v-model="databaseCredentials.host" placeholder="Type your database host" type="text" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Port:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="connection" rules="required" v-slot="{ errors }">
|
||||
<input v-model="databaseCredentials.port" placeholder="Type your database port" type="text" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Database Name:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="connection" rules="required" v-slot="{ errors }">
|
||||
<input v-model="databaseCredentials.name" placeholder="Select your database name" type="text" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Database Password:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="connection" rules="required" v-slot="{ errors }">
|
||||
<input v-model="databaseCredentials.password" placeholder="Select your database password" type="text" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="submit-wrapper">
|
||||
<AuthButton icon="chevron-right" text="Test your Connection and Continue" :loading="isLoading" :disabled="isLoading"/>
|
||||
</div>
|
||||
|
||||
</ValidationObserver>
|
||||
</AuthContent>
|
||||
</AuthContentWrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import AuthContentWrapper from '@/components/Auth/AuthContentWrapper'
|
||||
import SelectInput from '@/components/Others/Forms/SelectInput'
|
||||
import FormLabel from '@/components/Others/Forms/FormLabel'
|
||||
import InfoBox from '@/components/Others/Forms/InfoBox'
|
||||
import AuthContent from '@/components/Auth/AuthContent'
|
||||
import AuthButton from '@/components/Auth/AuthButton'
|
||||
import { SettingsIcon } from 'vue-feather-icons'
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import {mapGetters} from 'vuex'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'Database',
|
||||
components: {
|
||||
AuthContentWrapper,
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
SettingsIcon,
|
||||
SelectInput,
|
||||
AuthContent,
|
||||
AuthButton,
|
||||
FormLabel,
|
||||
required,
|
||||
InfoBox,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
connectionList: [
|
||||
{
|
||||
label: 'MySQL',
|
||||
value: 'mysql',
|
||||
},
|
||||
{
|
||||
label: 'SQLite',
|
||||
value: 'sqlite',
|
||||
},
|
||||
{
|
||||
label: 'PqSQL',
|
||||
value: 'pgsql',
|
||||
},
|
||||
{
|
||||
label: 'SQLSry',
|
||||
value: 'sqlsrv',
|
||||
},
|
||||
],
|
||||
databaseCredentials: {
|
||||
connection: '',
|
||||
host: '',
|
||||
port: '',
|
||||
name: '',
|
||||
password: '',
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async databaseCredentialsSubmit() {
|
||||
this.$router.push({name: 'StripeCredentials'})
|
||||
},
|
||||
},
|
||||
created() {
|
||||
var container = document.getElementById('vue-file-manager')
|
||||
container.scrollTop = 0
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
//@import '@assets/vue-file-manager/_auth-form';
|
||||
@import '@assets/vue-file-manager/_forms';
|
||||
@import '@assets/vue-file-manager/_auth';
|
||||
@import '@assets/vue-file-manager/_setup_wizard';
|
||||
</style>
|
||||
@@ -0,0 +1,218 @@
|
||||
<template>
|
||||
<AuthContentWrapper ref="auth">
|
||||
|
||||
<!--Database Credentials-->
|
||||
<AuthContent name="database-credentials" :visible="true">
|
||||
<div class="content-headline">
|
||||
<settings-icon size="40" class="title-icon"></settings-icon>
|
||||
<h1>Setup Wizard</h1>
|
||||
<h2>Set up your storage driver and email client.</h2>
|
||||
</div>
|
||||
|
||||
<ValidationObserver @submit.prevent="EnvironmentSetupSubmit" ref="stripeCredentials" v-slot="{ invalid }" tag="form" class="form block-form">
|
||||
<InfoBox>
|
||||
<p>If you don’t know which storage set, select <b>'Local Driver'</b>. For more info, where
|
||||
you can host your files <a href="https://vuefilemanager.com/docs/guide/storage.html#introduction" target="_blank">visit our guide</a>.</p>
|
||||
</InfoBox>
|
||||
|
||||
<FormLabel>Storage Setup</FormLabel>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Storage Service:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Storage Service" rules="required" v-slot="{ errors }">
|
||||
<SelectInput v-model="storage.driver" :options="storageServiceList" default="local" placeholder="Select your storage service" :isError="errors[0]"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="storage-additionals" v-if="storage.driver !== 'local'">
|
||||
<div class="block-wrapper">
|
||||
<label>Key:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Key" rules="required" v-slot="{ errors }">
|
||||
<input v-model="storage.key" placeholder="Paste your key" type="text" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
<div class="block-wrapper">
|
||||
<label>Secret:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Secret" rules="required" v-slot="{ errors }">
|
||||
<input v-model="storage.secret" placeholder="Paste your secret" type="text" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
<div class="block-wrapper">
|
||||
<label>Endpoint:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Endpoint" rules="required" v-slot="{ errors }">
|
||||
<input v-model="storage.endpoint" placeholder="Type your endpoint" type="text" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
<div class="block-wrapper">
|
||||
<label>Region:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Region" rules="required" v-slot="{ errors }">
|
||||
<input v-model="storage.region" placeholder="Type your region" type="text" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
<div class="block-wrapper">
|
||||
<label>Bucket:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Bucket" rules="required" v-slot="{ errors }">
|
||||
<input v-model="storage.bucket" placeholder="Type your bucket name" type="text" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<InfoBox>
|
||||
<p>Later, you can edit these data in your <b>.env</b> file which is located in app root folder.</p>
|
||||
</InfoBox>
|
||||
</div>
|
||||
|
||||
<FormLabel class="mt-70">Email Setup</FormLabel>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Mail Driver:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Driver" rules="required" v-slot="{ errors }">
|
||||
<input v-model="mail.driver" placeholder="Type your mail driver" type="text" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Mail Host:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Host" rules="required" v-slot="{ errors }">
|
||||
<input v-model="mail.host" placeholder="Type your mail host" type="text" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Mail Port:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Port" rules="required" v-slot="{ errors }">
|
||||
<input v-model="mail.port" placeholder="Type your mail port" type="text" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Mail Username:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Username" rules="required" v-slot="{ errors }">
|
||||
<input v-model="mail.username" placeholder="Type your mail username" type="text" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Mail Password:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Password" rules="required" v-slot="{ errors }">
|
||||
<input v-model="mail.password" placeholder="Type your mail password" type="text" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Mail Encryption:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Encryption" rules="required" v-slot="{ errors }">
|
||||
<SelectInput v-model="mail.encryption" :options="encryptionList" placeholder="Select your mail encryption" :isError="errors[0]"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="submit-wrapper">
|
||||
<AuthButton icon="chevron-right" text="Save and Set Billings" :loading="isLoading" :disabled="isLoading"/>
|
||||
</div>
|
||||
|
||||
</ValidationObserver>
|
||||
</AuthContent>
|
||||
</AuthContentWrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import AuthContentWrapper from '@/components/Auth/AuthContentWrapper'
|
||||
import SelectInput from '@/components/Others/Forms/SelectInput'
|
||||
import FormLabel from '@/components/Others/Forms/FormLabel'
|
||||
import InfoBox from '@/components/Others/Forms/InfoBox'
|
||||
import AuthContent from '@/components/Auth/AuthContent'
|
||||
import AuthButton from '@/components/Auth/AuthButton'
|
||||
import { SettingsIcon } from 'vue-feather-icons'
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import {mapGetters} from 'vuex'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'EnvironmentSetup',
|
||||
components: {
|
||||
AuthContentWrapper,
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
SettingsIcon,
|
||||
SelectInput,
|
||||
AuthContent,
|
||||
AuthButton,
|
||||
FormLabel,
|
||||
required,
|
||||
InfoBox,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
storageServiceList: [
|
||||
{
|
||||
label: 'Local Driver',
|
||||
value: 'local',
|
||||
},
|
||||
{
|
||||
label: 'Amazon Web Services S3',
|
||||
value: 's3',
|
||||
},
|
||||
{
|
||||
label: 'Digital Ocean Spaces',
|
||||
value: 'spaces',
|
||||
},
|
||||
],
|
||||
encryptionList: [
|
||||
{
|
||||
label: 'TLS',
|
||||
value: 'tls',
|
||||
},
|
||||
{
|
||||
label: 'SSL',
|
||||
value: 'ssl',
|
||||
},
|
||||
],
|
||||
storage: {
|
||||
driver: 'local',
|
||||
key: '',
|
||||
secret: '',
|
||||
endpoint: '',
|
||||
region: '',
|
||||
bucket: '',
|
||||
},
|
||||
mail: {
|
||||
driver: '',
|
||||
host: '',
|
||||
port: '',
|
||||
username: '',
|
||||
password: '',
|
||||
encryption: '',
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async EnvironmentSetupSubmit() {
|
||||
this.$router.push({name: 'AppSetup'})
|
||||
},
|
||||
},
|
||||
created() {
|
||||
var container = document.getElementById('vue-file-manager')
|
||||
container.scrollTop = 0
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
//@import '@assets/vue-file-manager/_auth-form';
|
||||
@import '@assets/vue-file-manager/_forms';
|
||||
@import '@assets/vue-file-manager/_auth';
|
||||
@import '@assets/vue-file-manager/_setup_wizard';
|
||||
</style>
|
||||
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<AuthContentWrapper ref="auth">
|
||||
|
||||
<!--Licence Verify-->
|
||||
<AuthContent name="licence-verify" :visible="true">
|
||||
|
||||
<div class="content-headline">
|
||||
<settings-icon size="40" class="title-icon"></settings-icon>
|
||||
<h1>Setup Wizard</h1>
|
||||
<h2>Please set up your application before continue.</h2>
|
||||
</div>
|
||||
|
||||
<ValidationObserver @submit.prevent="verifyPurchaseCode" ref="verifyPurchaseCode" v-slot="{ invalid }" tag="form" class="form inline-form">
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="PurchaseCode" rules="required" v-slot="{ errors }">
|
||||
<input v-model="licence.purchaseCode" placeholder="Paste your purchase code" type="text" :class="{'is-error': errors[0]}"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
<AuthButton icon="chevron-right" text="Verify" :loading="isLoading" :disabled="isLoading"/>
|
||||
</ValidationObserver>
|
||||
|
||||
<p class="additional-link">
|
||||
<a href="https://help.market.envato.com/hc/en-us/articles/202822600-Where-Is-My-Purchase-Code-" target="_blank">
|
||||
Where I can find purchase code?
|
||||
</a>
|
||||
Don’t have purchase code?
|
||||
</p>
|
||||
</AuthContent>
|
||||
</AuthContentWrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AuthContentWrapper from '@/components/Auth/AuthContentWrapper'
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import AuthContent from '@/components/Auth/AuthContent'
|
||||
import AuthButton from '@/components/Auth/AuthButton'
|
||||
import { SettingsIcon } from 'vue-feather-icons'
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import {mapGetters} from 'vuex'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'PurchaseCode',
|
||||
components: {
|
||||
AuthContentWrapper,
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
SettingsIcon,
|
||||
AuthContent,
|
||||
AuthButton,
|
||||
required,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
|
||||
licence: {
|
||||
purchaseCode: ''
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async verifyPurchaseCode() {
|
||||
|
||||
this.$router.push({name: 'Database'})
|
||||
return
|
||||
|
||||
// Validate fields
|
||||
const isValid = await this.$refs.verifyPurchaseCode.validate();
|
||||
|
||||
if (!isValid) return;
|
||||
|
||||
// Start loading
|
||||
this.isLoading = true
|
||||
|
||||
// Send request to get verify account
|
||||
axios
|
||||
.post('/api/setup-wizard', {
|
||||
step: this.step,
|
||||
data: this.stepLicence,
|
||||
})
|
||||
.then(response => {
|
||||
|
||||
// End loading
|
||||
this.isLoading = false
|
||||
|
||||
// Go to new page
|
||||
this.step++
|
||||
})
|
||||
.catch(error => {
|
||||
|
||||
// End loading
|
||||
this.isLoading = false
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@assets/vue-file-manager/_auth-form';
|
||||
@import '@assets/vue-file-manager/_auth';
|
||||
@import '@assets/vue-file-manager/_setup_wizard';
|
||||
|
||||
.auth-form input {
|
||||
min-width: 380px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,670 @@
|
||||
<template>
|
||||
<AuthContentWrapper ref="auth">
|
||||
|
||||
<!--Database Credentials-->
|
||||
<AuthContent name="database-credentials" :visible="true">
|
||||
<div class="content-headline">
|
||||
<settings-icon size="40" class="title-icon"></settings-icon>
|
||||
<h1>Setup Wizard</h1>
|
||||
<h2>Set up your database credentials.</h2>
|
||||
</div>
|
||||
|
||||
<ValidationObserver @submit.prevent="stripeCredentialsSubmit" ref="stripeCredentials" v-slot="{ invalid }" tag="form" class="form block-form">
|
||||
<InfoBox>
|
||||
<p>If you don’t have stripe account, please <a href="#" target="_blank">register here</a> and get your Stripe Key, Stripe Secret and Stripe Webhook Secret.</p>
|
||||
</InfoBox>
|
||||
|
||||
<FormLabel>Stripe Setup</FormLabel>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Stripe Currency:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Currency" rules="required" v-slot="{ errors }">
|
||||
<SelectInput v-model="stripeCredentials.currency" :options="currencyList" default="mysql" placeholder="Select your stripe currency" :isError="errors[0]"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<FormLabel class="mt-70">Stripe Credentials</FormLabel>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Stripe Key:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Key" rules="required" v-slot="{ errors }">
|
||||
<input v-model="stripeCredentials.key" placeholder="Type your stripe key" type="text" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Stripe Secret:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Secret" rules="required" v-slot="{ errors }">
|
||||
<input v-model="stripeCredentials.secret" placeholder="Type your stripe secret" type="text" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Stripe Webhook Secret:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Webhook Secret" rules="required" v-slot="{ errors }">
|
||||
<input v-model="stripeCredentials.webhookSecret" placeholder="Type your stripe webhook secret" type="text" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Stripe Webhook URL:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Webhook URL" rules="required" v-slot="{ errors }">
|
||||
<input :value="config.host + '/stripe/webhook'" placeholder="" type="text" disabled />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="submit-wrapper">
|
||||
<AuthButton icon="chevron-right" text="Save and Set Billings" :loading="isLoading" :disabled="isLoading"/>
|
||||
</div>
|
||||
|
||||
</ValidationObserver>
|
||||
</AuthContent>
|
||||
</AuthContentWrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import AuthContentWrapper from '@/components/Auth/AuthContentWrapper'
|
||||
import SelectInput from '@/components/Others/Forms/SelectInput'
|
||||
import FormLabel from '@/components/Others/Forms/FormLabel'
|
||||
import InfoBox from '@/components/Others/Forms/InfoBox'
|
||||
import AuthContent from '@/components/Auth/AuthContent'
|
||||
import AuthButton from '@/components/Auth/AuthButton'
|
||||
import { SettingsIcon } from 'vue-feather-icons'
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import {mapGetters} from 'vuex'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'StripeCredentials',
|
||||
components: {
|
||||
AuthContentWrapper,
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
SettingsIcon,
|
||||
SelectInput,
|
||||
AuthContent,
|
||||
AuthButton,
|
||||
FormLabel,
|
||||
required,
|
||||
InfoBox,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['config']),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
currencyList: [
|
||||
{
|
||||
label: 'USD - United States Dollar',
|
||||
value: 'USD',
|
||||
},
|
||||
{
|
||||
label: 'EUR - Euro',
|
||||
value: 'EUR',
|
||||
},
|
||||
{
|
||||
label: 'GBP - British Pound',
|
||||
value: 'GBP',
|
||||
},
|
||||
{
|
||||
label: 'AFN - Afghan Afghani',
|
||||
value: 'AFN',
|
||||
},
|
||||
{
|
||||
label: 'ALL - Albanian Lek',
|
||||
value: 'ALL',
|
||||
},
|
||||
{
|
||||
label: 'DZD - Algerian Dinar',
|
||||
value: 'DZD',
|
||||
},
|
||||
{
|
||||
label: 'AOA - Angolan Kwanza',
|
||||
value: 'AOA',
|
||||
},
|
||||
{
|
||||
label: 'ARS - Argentine Peso',
|
||||
value: 'ARS',
|
||||
},
|
||||
{
|
||||
label: 'AMD - Armenian Dram',
|
||||
value: 'AMD',
|
||||
},
|
||||
{
|
||||
label: 'AWG - Aruban Florin',
|
||||
value: 'AWG',
|
||||
},
|
||||
{
|
||||
label: 'AUD - Australian Dollar',
|
||||
value: 'AUD',
|
||||
},
|
||||
{
|
||||
label: 'AZN - Azerbaijani Manat',
|
||||
value: 'AZN',
|
||||
},
|
||||
{
|
||||
label: 'BDT - Bangladeshi Taka',
|
||||
value: 'BDT',
|
||||
},
|
||||
{
|
||||
label: 'BBD - Barbadian Dollar',
|
||||
value: 'BBD',
|
||||
},
|
||||
{
|
||||
label: 'BZD - Belize Dollar',
|
||||
value: 'BZD',
|
||||
},
|
||||
{
|
||||
label: 'BMD - Bermudian Dollar',
|
||||
value: 'BMD',
|
||||
},
|
||||
{
|
||||
label: 'BOB - Bolivian Boliviano',
|
||||
value: 'BOB',
|
||||
},
|
||||
{
|
||||
label: 'BAM - Bosnia & Herzegovina Convertible Mark',
|
||||
value: 'BAM',
|
||||
},
|
||||
{
|
||||
label: 'BWP - Botswana Pula',
|
||||
value: 'BWP',
|
||||
},
|
||||
{
|
||||
label: 'BRL - Brazilian Real',
|
||||
value: 'BRL',
|
||||
},
|
||||
{
|
||||
label: 'BND - Brunei Dollar',
|
||||
value: 'BND',
|
||||
},
|
||||
{
|
||||
label: 'BGN - Bulgarian Lev',
|
||||
value: 'BGN',
|
||||
},
|
||||
{
|
||||
label: 'BIF - Burundian Franc',
|
||||
value: 'BIF',
|
||||
},
|
||||
{
|
||||
label: 'KHR - Cambodian Riel',
|
||||
value: 'KHR',
|
||||
},
|
||||
{
|
||||
label: 'CAD - Canadian Dollar',
|
||||
value: 'CAD',
|
||||
},
|
||||
{
|
||||
label: 'CVE - Cape Verdean Escudo',
|
||||
value: 'CVE',
|
||||
},
|
||||
{
|
||||
label: 'KYD - Cayman Islands Dollar',
|
||||
value: 'KYD',
|
||||
},
|
||||
{
|
||||
label: 'XAF - Central African Cfa Franc',
|
||||
value: 'XAF',
|
||||
},
|
||||
{
|
||||
label: 'XPF - Cfp Franc',
|
||||
value: 'XPF',
|
||||
},
|
||||
{
|
||||
label: 'CLP - Chilean Peso',
|
||||
value: 'CLP',
|
||||
},
|
||||
{
|
||||
label: 'CNY - Chinese Renminbi Yuan',
|
||||
value: 'CNY',
|
||||
},
|
||||
{
|
||||
label: 'COP - Colombian Peso',
|
||||
value: 'COP',
|
||||
},
|
||||
{
|
||||
label: 'KMF - Comorian Franc',
|
||||
value: 'KMF',
|
||||
},
|
||||
{
|
||||
label: 'CDF - Congolese Franc',
|
||||
value: 'CDF',
|
||||
},
|
||||
{
|
||||
label: 'CRC - Costa Rican Colón',
|
||||
value: 'CRC',
|
||||
},
|
||||
{
|
||||
label: 'HRK - Croatian Kuna',
|
||||
value: 'HRK',
|
||||
},
|
||||
{
|
||||
label: 'CZK - Czech Koruna',
|
||||
value: 'CZK',
|
||||
},
|
||||
{
|
||||
label: 'DKK - Danish Krone',
|
||||
value: 'DKK',
|
||||
},
|
||||
{
|
||||
label: 'DJF - Djiboutian Franc',
|
||||
value: 'DJF',
|
||||
},
|
||||
{
|
||||
label: 'DOP - Dominican Peso',
|
||||
value: 'DOP',
|
||||
},
|
||||
{
|
||||
label: 'XCD - East Caribbean Dollar',
|
||||
value: 'XCD',
|
||||
},
|
||||
{
|
||||
label: 'EGP - Egyptian Pound',
|
||||
value: 'EGP',
|
||||
},
|
||||
{
|
||||
label: 'ETB - Ethiopian Birr',
|
||||
value: 'ETB',
|
||||
},
|
||||
{
|
||||
label: 'FKP - Falkland Islands Pound',
|
||||
value: 'FKP',
|
||||
},
|
||||
{
|
||||
label: 'FJD - Fijian Dollar',
|
||||
value: 'FJD',
|
||||
},
|
||||
{
|
||||
label: 'GMD - Gambian Dalasi',
|
||||
value: 'GMD',
|
||||
},
|
||||
{
|
||||
label: 'GEL - Georgian Lari',
|
||||
value: 'GEL',
|
||||
},
|
||||
{
|
||||
label: 'GIP - Gibraltar Pound',
|
||||
value: 'GIP',
|
||||
},
|
||||
{
|
||||
label: 'GTQ - Guatemalan Quetzal',
|
||||
value: 'GTQ',
|
||||
},
|
||||
{
|
||||
label: 'GNF - Guinean Franc',
|
||||
value: 'GNF',
|
||||
},
|
||||
{
|
||||
label: 'GYD - Guyanese Dollar',
|
||||
value: 'GYD',
|
||||
},
|
||||
{
|
||||
label: 'HTG - Haitian Gourde',
|
||||
value: 'HTG',
|
||||
},
|
||||
{
|
||||
label: 'HNL - Honduran Lempira',
|
||||
value: 'HNL',
|
||||
},
|
||||
{
|
||||
label: 'HKD - Hong Kong Dollar',
|
||||
value: 'HKD',
|
||||
},
|
||||
{
|
||||
label: 'HUF - Hungarian Forint',
|
||||
value: 'HUF',
|
||||
},
|
||||
{
|
||||
label: 'ISK - Icelandic Króna',
|
||||
value: 'ISK',
|
||||
},
|
||||
{
|
||||
label: 'INR - Indian Rupee',
|
||||
value: 'INR',
|
||||
},
|
||||
{
|
||||
label: 'IDR - Indonesian Rupiah',
|
||||
value: 'IDR',
|
||||
},
|
||||
{
|
||||
label: 'ILS - Israeli New Sheqel',
|
||||
value: 'ILS',
|
||||
},
|
||||
{
|
||||
label: 'JMD - Jamaican Dollar',
|
||||
value: 'JMD',
|
||||
},
|
||||
{
|
||||
label: 'JPY - Japanese Yen',
|
||||
value: 'JPY',
|
||||
},
|
||||
{
|
||||
label: 'KZT - Kazakhstani Tenge',
|
||||
value: 'KZT',
|
||||
},
|
||||
{
|
||||
label: 'KES - Kenyan Shilling',
|
||||
value: 'KES',
|
||||
},
|
||||
{
|
||||
label: 'KGS - Kyrgyzstani Som',
|
||||
value: 'KGS',
|
||||
},
|
||||
{
|
||||
label: 'LAK - Lao Kip',
|
||||
value: 'LAK',
|
||||
},
|
||||
{
|
||||
label: 'LBP - Lebanese Pound',
|
||||
value: 'LBP',
|
||||
},
|
||||
{
|
||||
label: 'LSL - Lesotho Loti',
|
||||
value: 'LSL',
|
||||
},
|
||||
{
|
||||
label: 'LRD - Liberian Dollar',
|
||||
value: 'LRD',
|
||||
},
|
||||
{
|
||||
label: 'MOP - Macanese Pataca',
|
||||
value: 'MOP',
|
||||
},
|
||||
{
|
||||
label: 'MKD - Macedonian Denar',
|
||||
value: 'MKD',
|
||||
},
|
||||
{
|
||||
label: 'MGA - Malagasy Ariary',
|
||||
value: 'MGA',
|
||||
},
|
||||
{
|
||||
label: 'MWK - Malawian Kwacha',
|
||||
value: 'MWK',
|
||||
},
|
||||
{
|
||||
label: 'MYR - Malaysian Ringgit',
|
||||
value: 'MYR',
|
||||
},
|
||||
{
|
||||
label: 'MVR - Maldivian Rufiyaa',
|
||||
value: 'MVR',
|
||||
},
|
||||
{
|
||||
label: 'MRO - Mauritanian Ouguiya',
|
||||
value: 'MRO',
|
||||
},
|
||||
{
|
||||
label: 'MUR - Mauritian Rupee',
|
||||
value: 'MUR',
|
||||
},
|
||||
{
|
||||
label: 'MXN - Mexican Peso',
|
||||
value: 'MXN',
|
||||
},
|
||||
{
|
||||
label: 'MDL - Moldovan Leu',
|
||||
value: 'MDL',
|
||||
},
|
||||
{
|
||||
label: 'MNT - Mongolian Tögrög',
|
||||
value: 'MNT',
|
||||
},
|
||||
{
|
||||
label: 'MAD - Moroccan Dirham',
|
||||
value: 'MAD',
|
||||
},
|
||||
{
|
||||
label: 'MZN - Mozambican Metical',
|
||||
value: 'MZN',
|
||||
},
|
||||
{
|
||||
label: 'MMK - Myanmar Kyat',
|
||||
value: 'MMK',
|
||||
},
|
||||
{
|
||||
label: 'NAD - Namibian Dollar',
|
||||
value: 'NAD',
|
||||
},
|
||||
{
|
||||
label: 'NPR - Nepalese Rupee',
|
||||
value: 'NPR',
|
||||
},
|
||||
{
|
||||
label: 'ANG - Netherlands Antillean Gulden',
|
||||
value: 'ANG',
|
||||
},
|
||||
{
|
||||
label: 'TWD - New Taiwan Dollar',
|
||||
value: 'TWD',
|
||||
},
|
||||
{
|
||||
label: 'NZD - New Zealand Dollar',
|
||||
value: 'NZD',
|
||||
},
|
||||
{
|
||||
label: 'NIO - Nicaraguan Córdoba',
|
||||
value: 'NIO',
|
||||
},
|
||||
{
|
||||
label: 'NGN - Nigerian Naira',
|
||||
value: 'NGN',
|
||||
},
|
||||
{
|
||||
label: 'NOK - Norwegian Krone',
|
||||
value: 'NOK',
|
||||
},
|
||||
{
|
||||
label: 'PKR - Pakistani Rupee',
|
||||
value: 'PKR',
|
||||
},
|
||||
{
|
||||
label: 'PAB - Panamanian Balboa',
|
||||
value: 'PAB',
|
||||
},
|
||||
{
|
||||
label: 'PGK - Papua New Guinean Kina',
|
||||
value: 'PGK',
|
||||
},
|
||||
{
|
||||
label: 'PYG - Paraguayan Guaraní',
|
||||
value: 'PYG',
|
||||
},
|
||||
{
|
||||
label: 'PEN - Peruvian Nuevo Sol',
|
||||
value: 'PEN',
|
||||
},
|
||||
{
|
||||
label: 'PHP - Philippine Peso',
|
||||
value: 'PHP',
|
||||
},
|
||||
{
|
||||
label: 'PLN - Polish Złoty',
|
||||
value: 'PLN',
|
||||
},
|
||||
{
|
||||
label: 'QAR - Qatari Riyal',
|
||||
value: 'QAR',
|
||||
},
|
||||
{
|
||||
label: 'RON - Romanian Leu',
|
||||
value: 'RON',
|
||||
},
|
||||
{
|
||||
label: 'RUB - Russian Ruble',
|
||||
value: 'RUB',
|
||||
},
|
||||
{
|
||||
label: 'RWF - Rwandan Franc',
|
||||
value: 'RWF',
|
||||
},
|
||||
{
|
||||
label: 'STD - São Tomé and Príncipe Dobra',
|
||||
value: 'STD',
|
||||
},
|
||||
{
|
||||
label: 'SHP - Saint Helenian Pound',
|
||||
value: 'SHP',
|
||||
},
|
||||
{
|
||||
label: 'SVC - Salvadoran Colón',
|
||||
value: 'SVC',
|
||||
},
|
||||
{
|
||||
label: 'WST - Samoan Tala',
|
||||
value: 'WST',
|
||||
},
|
||||
{
|
||||
label: 'SAR - Saudi Riyal',
|
||||
value: 'SAR',
|
||||
},
|
||||
{
|
||||
label: 'RSD - Serbian Dinar',
|
||||
value: 'RSD',
|
||||
},
|
||||
{
|
||||
label: 'SCR - Seychellois Rupee',
|
||||
value: 'SCR',
|
||||
},
|
||||
{
|
||||
label: 'SLL - Sierra Leonean Leone',
|
||||
value: 'SLL',
|
||||
},
|
||||
{
|
||||
label: 'SGD - Singapore Dollar',
|
||||
value: 'SGD',
|
||||
},
|
||||
{
|
||||
label: 'SBD - Solomon Islands Dollar',
|
||||
value: 'SBD',
|
||||
},
|
||||
{
|
||||
label: 'SOS - Somali Shilling',
|
||||
value: 'SOS',
|
||||
},
|
||||
{
|
||||
label: 'ZAR - South African Rand',
|
||||
value: 'ZAR',
|
||||
},
|
||||
{
|
||||
label: 'KRW - South Korean Won',
|
||||
value: 'KRW',
|
||||
},
|
||||
{
|
||||
label: 'LKR - Sri Lankan Rupee',
|
||||
value: 'LKR',
|
||||
},
|
||||
{
|
||||
label: 'SRD - Surinamese Dollar',
|
||||
value: 'SRD',
|
||||
},
|
||||
{
|
||||
label: 'SZL - Swazi Lilangeni',
|
||||
value: 'SZL',
|
||||
},
|
||||
{
|
||||
label: 'SEK - Swedish Krona',
|
||||
value: 'SEK',
|
||||
},
|
||||
{
|
||||
label: 'CHF - Swiss Franc',
|
||||
value: 'CHF',
|
||||
},
|
||||
{
|
||||
label: 'TJS - Tajikistani Somoni',
|
||||
value: 'TJS',
|
||||
},
|
||||
{
|
||||
label: 'TZS - Tanzanian Shilling',
|
||||
value: 'TZS',
|
||||
},
|
||||
{
|
||||
label: 'THB - Thai Baht',
|
||||
value: 'THB',
|
||||
},
|
||||
{
|
||||
label: 'TOP - Tongan Paʻanga',
|
||||
value: 'TOP',
|
||||
},
|
||||
{
|
||||
label: 'TTD - Trinidad and Tobago Dollar',
|
||||
value: 'TTD',
|
||||
},
|
||||
{
|
||||
label: 'TRY - Turkish Lira',
|
||||
value: 'TRY',
|
||||
},
|
||||
{
|
||||
label: 'UGX - Ugandan Shilling',
|
||||
value: 'UGX',
|
||||
},
|
||||
{
|
||||
label: 'UAH - Ukrainian Hryvnia',
|
||||
value: 'UAH',
|
||||
},
|
||||
{
|
||||
label: 'AED - United Arab Emirates Dirham',
|
||||
value: 'AED',
|
||||
},
|
||||
{
|
||||
label: 'UYU - Uruguayan Peso',
|
||||
value: 'UYU',
|
||||
},
|
||||
{
|
||||
label: 'UZS - Uzbekistani Som',
|
||||
value: 'UZS',
|
||||
},
|
||||
{
|
||||
label: 'VUV - Vanuatu Vatu',
|
||||
value: 'VUV',
|
||||
},
|
||||
{
|
||||
label: 'VND - Vietnamese Đồng',
|
||||
value: 'VND',
|
||||
},
|
||||
{
|
||||
label: 'XOF - West African Cfa Franc',
|
||||
value: 'XOF',
|
||||
},
|
||||
{
|
||||
label: 'YER - Yemeni Rial',
|
||||
value: 'YER',
|
||||
},
|
||||
{
|
||||
label: 'ZMW - Zambian Kwacha',
|
||||
value: 'ZMW',
|
||||
},
|
||||
],
|
||||
stripeCredentials: {
|
||||
key: '',
|
||||
secret: '',
|
||||
webhookSecret: '',
|
||||
currency: '',
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async stripeCredentialsSubmit() {
|
||||
this.$router.push({name: 'BillingsDetail'})
|
||||
},
|
||||
},
|
||||
created() {
|
||||
var container = document.getElementById('vue-file-manager')
|
||||
container.scrollTop = 0
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
//@import '@assets/vue-file-manager/_auth-form';
|
||||
@import '@assets/vue-file-manager/_forms';
|
||||
@import '@assets/vue-file-manager/_auth';
|
||||
@import '@assets/vue-file-manager/_setup_wizard';
|
||||
</style>
|
||||
@@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<AuthContentWrapper ref="auth">
|
||||
|
||||
<!--Database Credentials-->
|
||||
<AuthContent name="database-credentials" :visible="true">
|
||||
<div class="content-headline">
|
||||
<settings-icon size="40" class="title-icon"></settings-icon>
|
||||
<h1>Setup Wizard</h1>
|
||||
<h2>Set up plans for your customers.</h2>
|
||||
</div>
|
||||
|
||||
<ValidationObserver @submit.prevent="subscriptionPlansSubmit" ref="subscriptionPlans" v-slot="{ invalid }" tag="form" class="form block-form">
|
||||
<FormLabel>Create your plans</FormLabel>
|
||||
<InfoBox>
|
||||
<p>Your plans will be <b>sorted automatically</b> in ascent order by plan price.</p>
|
||||
</InfoBox>
|
||||
|
||||
<div class="duplicator">
|
||||
<div class="plan-item duplicator-item" v-for="(plan, index) in subscriptionPlans" :key="index++">
|
||||
<x-icon @click="removeRow(plan)" v-if="index !== 1" size="22" class="delete-item"></x-icon>
|
||||
<b class="duplicator-title">{{ index }}. Plan</b>
|
||||
<div class="block-wrapper">
|
||||
<label>Name:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Name"
|
||||
rules="required" v-slot="{ errors }">
|
||||
<input v-model="plan.name" placeholder="Type your plan name"
|
||||
type="text"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Description (optional):</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Description"
|
||||
rules="required" v-slot="{ errors }">
|
||||
<textarea v-model="plan.description" placeholder="Type your plan description"></textarea>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Price:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Price"
|
||||
rules="required" v-slot="{ errors }">
|
||||
<input v-model="plan.price" placeholder="Type your plan price" type="text"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Storage Capacity:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Storage Capacity"
|
||||
rules="required" v-slot="{ errors }">
|
||||
<input v-model="plan.storage_capacity" placeholder="Type your storage capacity" type="text"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ButtonBase
|
||||
@click.native="addRow"
|
||||
class="duplicator-add-button"
|
||||
button-style="theme-solid"
|
||||
>Add New Plan</ButtonBase>
|
||||
</div>
|
||||
|
||||
<div class="submit-wrapper">
|
||||
<AuthButton icon="chevron-right" text="Save and Go Next" :loading="isLoading" :disabled="isLoading"/>
|
||||
</div>
|
||||
|
||||
</ValidationObserver>
|
||||
</AuthContent>
|
||||
</AuthContentWrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import AuthContentWrapper from '@/components/Auth/AuthContentWrapper'
|
||||
import SelectInput from '@/components/Others/Forms/SelectInput'
|
||||
import FormLabel from '@/components/Others/Forms/FormLabel'
|
||||
import ButtonBase from '@/components/FilesView/ButtonBase'
|
||||
import InfoBox from '@/components/Others/Forms/InfoBox'
|
||||
import AuthContent from '@/components/Auth/AuthContent'
|
||||
import AuthButton from '@/components/Auth/AuthButton'
|
||||
import {SettingsIcon} from 'vue-feather-icons'
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import { XIcon } from 'vue-feather-icons'
|
||||
import {mapGetters} from 'vuex'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'subscriptionPlans',
|
||||
components: {
|
||||
AuthContentWrapper,
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
SettingsIcon,
|
||||
SelectInput,
|
||||
AuthContent,
|
||||
ButtonBase,
|
||||
AuthButton,
|
||||
FormLabel,
|
||||
required,
|
||||
InfoBox,
|
||||
XIcon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
subscriptionPlans: [
|
||||
{
|
||||
id: 1,
|
||||
name: '',
|
||||
description: '',
|
||||
price: '',
|
||||
storage_capacity: '',
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async subscriptionPlansSubmit() {
|
||||
this.$router.push({name: 'EnvironmentSetup'})
|
||||
},
|
||||
addRow() {
|
||||
this.subscriptionPlans.push({
|
||||
id: Math.floor(Math.random() * 10000000),
|
||||
name: '',
|
||||
description: '',
|
||||
price: '',
|
||||
storage_capacity: '',
|
||||
})
|
||||
},
|
||||
removeRow(plan) {
|
||||
this.subscriptionPlans = this.subscriptionPlans.filter(item => item.id !== plan.id)
|
||||
},
|
||||
},
|
||||
created() {
|
||||
var container = document.getElementById('vue-file-manager')
|
||||
container.scrollTop = 0
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@assets/vue-file-manager/_forms';
|
||||
@import '@assets/vue-file-manager/_auth';
|
||||
@import '@assets/vue-file-manager/_setup_wizard';
|
||||
</style>
|
||||
Reference in New Issue
Block a user