mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-28 02:50:39 +00:00
Setup wizard update
This commit is contained in:
carodej
@@ -11,7 +11,7 @@
|
||||
|
||||
<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>
|
||||
<p>If you don’t have stripe account, please <a href="#" target="_blank">register here</a> and get your Publishable Key, Secret Key and create your webhook.</p>
|
||||
</InfoBox>
|
||||
|
||||
<FormLabel>Stripe Setup</FormLabel>
|
||||
@@ -19,7 +19,7 @@
|
||||
<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]"/>
|
||||
<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>
|
||||
@@ -27,39 +27,50 @@
|
||||
<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" />
|
||||
<label>Publishable Key:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Publishable Key" rules="required" v-slot="{ errors }">
|
||||
<input v-model="stripeCredentials.key" placeholder="Paste your publishable key" type="text" :class="{'is-error': errors[0]}"/>
|
||||
<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" />
|
||||
<label>Secret Key:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Secret Key" rules="required" v-slot="{ errors }">
|
||||
<input v-model="stripeCredentials.secret" placeholder="Paste your secret key" type="text" :class="{'is-error': errors[0]}"/>
|
||||
<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>
|
||||
<FormLabel class="mt-70">Stripe Webhook</FormLabel>
|
||||
<InfoBox>
|
||||
<p>You have to create webhook endpoint in your Stripe Dashboard. You can find it in <b>Dashboard -> Developers -> Webhooks -> Add Endpoint</b>. In Endpoint URL
|
||||
please copy and paste url bellow. Make sure, this url is your public domain, not localhost. In events section, please click on <b>receive all events</b>.
|
||||
That's all.</p>
|
||||
</InfoBox>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Stripe Webhook URL:</label>
|
||||
<label>Endpoint 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 />
|
||||
<input :value="stripeWebhookEndpoint" type="text" disabled/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>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" :class="{'is-error': errors[0]}"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<InfoBox v-if="isError" type="error" style="margin-bottom: -20px">
|
||||
<p>{{ errorMessage }}</p>
|
||||
</InfoBox>
|
||||
|
||||
<div class="submit-wrapper">
|
||||
<AuthButton icon="chevron-right" text="Save and Set Billings" :loading="isLoading" :disabled="isLoading"/>
|
||||
<AuthButton icon="chevron-right" :text="submitButtonText" :loading="isLoading" :disabled="isLoading"/>
|
||||
</div>
|
||||
|
||||
</ValidationObserver>
|
||||
@@ -75,7 +86,7 @@
|
||||
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 {SettingsIcon} from 'vue-feather-icons'
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import {mapGetters} from 'vuex'
|
||||
import axios from 'axios'
|
||||
@@ -96,10 +107,18 @@
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['config']),
|
||||
stripeWebhookEndpoint() {
|
||||
return this.config.host + '/stripe/webhook'
|
||||
},
|
||||
submitButtonText() {
|
||||
return this.isLoading ? 'Testing Stripe Connection' : 'Save and Set Billings'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
errorMessage: '',
|
||||
currencyList: [
|
||||
{
|
||||
label: 'USD - United States Dollar',
|
||||
@@ -652,7 +671,36 @@
|
||||
},
|
||||
methods: {
|
||||
async stripeCredentialsSubmit() {
|
||||
this.$router.push({name: 'BillingsDetail'})
|
||||
|
||||
// Validate fields
|
||||
const isValid = await this.$refs.stripeCredentials.validate();
|
||||
|
||||
if (!isValid) return;
|
||||
|
||||
// Start loading
|
||||
this.isLoading = true
|
||||
|
||||
// Send request to get verify account
|
||||
axios
|
||||
.post('/api/setup/stripe-credentials', this.stripeCredentials)
|
||||
.then(response => {
|
||||
|
||||
// End loading
|
||||
this.isLoading = false
|
||||
|
||||
// Redirect to next step
|
||||
this.$router.push({name: 'BillingsDetail'})
|
||||
})
|
||||
.catch(error => {
|
||||
|
||||
if (error.response.status = 401) {
|
||||
this.isError = true
|
||||
this.errorMessage = error.response.data.message
|
||||
}
|
||||
|
||||
// End loading
|
||||
this.isLoading = false
|
||||
})
|
||||
},
|
||||
},
|
||||
created() {
|
||||
|
||||
Reference in New Issue
Block a user