Setup wizard update

This commit is contained in:
carodej
2020-07-01 11:01:54 +02:00
parent aedc98cc8b
commit a98625876d
46 changed files with 2487 additions and 263 deletions

View File

@@ -7,12 +7,12 @@
<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>
<h2>Please verify your purchase code before continue to set up your application.</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]}"/>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Purchase Code" rules="required" v-slot="{ errors }">
<input v-model="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"/>
@@ -22,7 +22,9 @@
<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>
Dont have purchase code?
<a class="black-link" href="https://codecanyon.net/item/vue-file-manager-with-laravel-backend/25815986" target="_blank">
Dont have purchase code?
</a>
</p>
</AuthContent>
</AuthContentWrapper>
@@ -31,6 +33,7 @@
<script>
import AuthContentWrapper from '@/components/Auth/AuthContentWrapper'
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
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'
@@ -48,22 +51,17 @@
AuthContent,
AuthButton,
required,
InfoBox,
},
data() {
return {
isLoading: false,
licence: {
purchaseCode: ''
},
purchaseCode: 'e3420e63-ce6f-4d04-9b3e-f7f5cc6af7c6'
}
},
methods: {
async verifyPurchaseCode() {
this.$router.push({name: 'Database'})
return
// Validate fields
const isValid = await this.$refs.verifyPurchaseCode.validate();
@@ -74,22 +72,31 @@
// Send request to get verify account
axios
.post('/api/setup-wizard', {
step: this.step,
data: this.stepLicence,
.post('/api/setup/purchase-code', {
purchaseCode: this.purchaseCode,
})
.then(response => {
// End loading
this.isLoading = false
// Go to new page
this.step++
// Redirect to next step
this.$router.push({name: 'Database'})
})
.catch(error => {
// End loading
this.isLoading = false
if (error.response.status == 400) {
this.$refs.verifyPurchaseCode.setErrors({
'Purchase Code': ['Purchase code is invalid.']
});
} else {
this.$refs.verifyPurchaseCode.setErrors({
'Purchase Code': ['Something is wrong. Please try again.']
});
}
})
},
},
@@ -101,6 +108,13 @@
@import '@assets/vue-file-manager/_auth';
@import '@assets/vue-file-manager/_setup_wizard';
.additional-link {
.black-link {
color: $text;
}
}
.auth-form input {
min-width: 380px;
}