mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-30 11:35:59 +00:00
- redirect after sign in/up to payment page
- extended /api/oasis/subscribe function - setup:dev extended data
This commit is contained in:
Peter Papp
@@ -0,0 +1,232 @@
|
||||
<template>
|
||||
<div id="single-page">
|
||||
<div id="page-content" class="small-width">
|
||||
<MobileHeader :title="$router.currentRoute.meta.title"/>
|
||||
<PageHeader :can-back="true" :title="$router.currentRoute.meta.title"/>
|
||||
|
||||
<div class="content-page">
|
||||
<ValidationObserver @submit.prevent="createUser" ref="createUser" v-slot="{ invalid }" tag="form" class="form block-form">
|
||||
|
||||
<div class="form-group">
|
||||
<FormLabel>{{ $t('admin_page_user.create_user.group_details') }}</FormLabel>
|
||||
|
||||
<!--Avatar-->
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('admin_page_user.create_user.avatar') }}</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="avatar" v-slot="{ errors }">
|
||||
<ImageInput v-model="user.avatar" :error="errors[0]" />
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<!--Email-->
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('page_registration.label_email') }}</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="email" rules="required" v-slot="{ errors }">
|
||||
<input v-model="user.email" :placeholder="$t('admin_page_user.create_user.label_email')" type="email" class="focus-border-theme" :class="{'is-error': errors[0]}"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<!--Name-->
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('page_registration.label_name') }}</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="user name" rules="required" v-slot="{ errors }">
|
||||
<input v-model="user.name" :placeholder="$t('admin_page_user.create_user.label_name')" type="text" class="focus-border-theme" :class="{'is-error': errors[0]}"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<!--Password-->
|
||||
<div class="wrapper-inline">
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('page_registration.label_pass') }}</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="password" rules="required" v-slot="{ errors }">
|
||||
<input v-model="user.password" :placeholder="$t('page_registration.placeholder_pass')" type="password" class="focus-border-theme" :class="{'is-error': errors[0]}"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('page_registration.label_confirm_pass') }}</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="password confirm" rules="required" v-slot="{ errors }">
|
||||
<input v-model="user.password_confirmation" :placeholder="$t('admin_page_user.create_user.label_conf_pass')" type="password" class="focus-border-theme" :class="{'is-error': errors[0]}"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<FormLabel>{{ $t('admin_page_user.create_user.group_settings') }}</FormLabel>
|
||||
|
||||
<!--User Role-->
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('admin_page_user.select_role') }}:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="permission" rules="required" v-slot="{ errors }">
|
||||
<SelectInput v-model="user.role" :options="roles" :placeholder="$t('admin_page_user.select_role')" :isError="errors[0]"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<!--Storage Capacity-->
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('admin_page_user.label_change_capacity') }}</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="storage capacity" rules="required" v-slot="{ errors }">
|
||||
<input v-model="user.storage_capacity" min="1" max="999999999" :placeholder="$t('admin_page_user.label_change_capacity')" type="number" class="focus-border-theme" :class="{'is-error': errors[0]}"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<ButtonBase :disabled="isLoading" :loading="isLoading" button-style="theme" type="submit">
|
||||
{{ $t('admin_page_user.create_user.submit') }}
|
||||
</ButtonBase>
|
||||
</div>
|
||||
</ValidationObserver>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import SelectInput from '@/components/Others/Forms/SelectInput'
|
||||
import ImageInput from '@/components/Others/Forms/ImageInput'
|
||||
import FormLabel from '@/components/Others/Forms/FormLabel'
|
||||
import MobileHeader from '@/components/Mobile/MobileHeader'
|
||||
import SectionTitle from '@/components/Others/SectionTitle'
|
||||
import ButtonBase from '@/components/FilesView/ButtonBase'
|
||||
import PageHeader from '@/components/Others/PageHeader'
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import { mapGetters } from 'vuex'
|
||||
import {events} from "@/bus"
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'Profile',
|
||||
components: {
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
SectionTitle,
|
||||
MobileHeader,
|
||||
SelectInput,
|
||||
ButtonBase,
|
||||
ImageInput,
|
||||
PageHeader,
|
||||
FormLabel,
|
||||
required,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['roles']),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
user: {
|
||||
role: '',
|
||||
avatar: undefined,
|
||||
name: '',
|
||||
email: '',
|
||||
password: '',
|
||||
password_confirmation: '',
|
||||
storage_capacity: 5,
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async createUser() {
|
||||
|
||||
// Validate fields
|
||||
const isValid = await this.$refs.createUser.validate();
|
||||
|
||||
if (!isValid) return;
|
||||
|
||||
// Start loading
|
||||
this.isLoading = true
|
||||
|
||||
// Create form
|
||||
let formData = new FormData()
|
||||
|
||||
// Add image to form
|
||||
formData.append('name', this.user.name)
|
||||
formData.append('role', this.user.role)
|
||||
formData.append('email', this.user.email)
|
||||
formData.append('password', this.user.password)
|
||||
formData.append('storage_capacity', this.user.storage_capacity)
|
||||
formData.append('password_confirmation', this.user.password_confirmation)
|
||||
|
||||
// Append avatar if exist
|
||||
if (this.user.avatar)
|
||||
formData.append('avatar', this.user.avatar)
|
||||
|
||||
// Send request to get user token
|
||||
axios
|
||||
.post('/api/oasis/admin/users/create-user', formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
|
||||
// End loading
|
||||
this.isLoading = false
|
||||
|
||||
// Show toaster
|
||||
events.$emit('toaster', {
|
||||
type: 'success',
|
||||
message: this.$t('toaster.created_user'),
|
||||
})
|
||||
|
||||
// Go to User page
|
||||
this.$router.push({name: 'UserDetail', params: {id: response.data.data.id}})
|
||||
})
|
||||
.catch(error => {
|
||||
|
||||
// Validation errors
|
||||
if (error.response.status == 422) {
|
||||
|
||||
// Email validation error
|
||||
if (error.response.data.errors['email']) {
|
||||
|
||||
this.$refs.createUser.setErrors({
|
||||
'email': error.response.data.errors['email']
|
||||
});
|
||||
}
|
||||
|
||||
// Password validation error
|
||||
if (error.response.data.errors['password']) {
|
||||
|
||||
this.$refs.createUser.setErrors({
|
||||
'password': error.response.data.errors['password']
|
||||
});
|
||||
}
|
||||
|
||||
// Password validation error
|
||||
if (error.response.data.errors['storage_capacity']) {
|
||||
|
||||
this.$refs.createUser.setErrors({
|
||||
'storage capacity': this.$t('errors.capacity_digit')
|
||||
});
|
||||
}
|
||||
} else {
|
||||
|
||||
events.$emit('alert:open', {
|
||||
title: this.$t('popup_error.title'),
|
||||
message: this.$t('popup_error.message'),
|
||||
})
|
||||
}
|
||||
|
||||
// End loading
|
||||
this.isLoading = false
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@assets/vuefilemanager/_variables';
|
||||
@import '@assets/vuefilemanager/_mixins';
|
||||
@import '@assets/vuefilemanager/_forms';
|
||||
</style>
|
||||
+1
-1
@@ -212,7 +212,7 @@
|
||||
this.isLoading = true
|
||||
|
||||
axios
|
||||
.post('/api/oasis/admin/users/create', this.user)
|
||||
.post('/api/oasis/admin/users/create-order', this.user)
|
||||
.then(response => {
|
||||
|
||||
// Show toaster
|
||||
@@ -0,0 +1,198 @@
|
||||
<template>
|
||||
<AuthContentWrapper ref="auth">
|
||||
|
||||
<!--Registration-->
|
||||
<AuthContent name="sign-up" :visible="true">
|
||||
<img v-if="config.app_logo" class="logo" :src="$getImage(config.app_logo)" :alt="config.app_name">
|
||||
<b v-if="! config.app_logo" class="auth-logo-text">{{ config.app_name }}</b>
|
||||
|
||||
<h1>{{ $t('page_registration.title') }}</h1>
|
||||
<h2>{{ $t('page_registration.subtitle') }}</h2>
|
||||
|
||||
<ValidationObserver @submit.prevent="signUp" ref="sign_up" v-slot="{ invalid }" tag="form"
|
||||
class="form block-form">
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('page_registration.label_email') }}</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="E-Mail" rules="required"
|
||||
v-slot="{ errors }">
|
||||
<input v-model="register.email" :placeholder="$t('page_registration.placeholder_email')" type="email"
|
||||
class="focus-border-theme"
|
||||
:class="{'is-error': errors[0]}"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('page_registration.label_name') }}</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Full Name" rules="required"
|
||||
v-slot="{ errors }">
|
||||
<input v-model="register.name" :placeholder="$t('page_registration.placeholder_name')" type="text"
|
||||
class="focus-border-theme"
|
||||
:class="{'is-error': errors[0]}"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('page_registration.label_pass') }}</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Your New Password"
|
||||
rules="required" v-slot="{ errors }">
|
||||
<input v-model="register.password" :placeholder="$t('page_registration.placeholder_pass')" type="password"
|
||||
class="focus-border-theme"
|
||||
:class="{'is-error': errors[0]}"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('page_registration.label_confirm_pass') }}</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Confirm Your Password"
|
||||
rules="required" v-slot="{ errors }">
|
||||
<input v-model="register.password_confirmation" :placeholder="$t('page_registration.placeholder_confirm_pass')"
|
||||
class="focus-border-theme"
|
||||
type="password" :class="{'is-error': errors[0]}"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<i18n path="page_registration.agreement" tag="p" class="legal-agreement">
|
||||
<router-link :to="{name: 'DynamicPage', params: {slug: 'terms-of-service'}}" target="_blank" class="text-theme">{{ termsOfService.title }}</router-link>
|
||||
<router-link :to="{name: 'DynamicPage', params: {slug: 'privacy-policy'}}" target="_blank" class="text-theme">{{ privacyPolicy.title }}</router-link>
|
||||
</i18n>
|
||||
<AuthButton icon="chevron-right" :text="$t('page_registration.button_create_account')" :loading="isLoading" :disabled="isLoading"/>
|
||||
</div>
|
||||
</ValidationObserver>
|
||||
|
||||
<span class="additional-link">{{ $t('page_registration.have_an_account') }}
|
||||
<router-link :to="{name: 'SignIn'}" class="text-theme">
|
||||
{{ $t('page_forgotten_password.password_remember_button') }}
|
||||
</router-link>
|
||||
</span>
|
||||
</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 {required} from 'vee-validate/dist/rules'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from "@/bus"
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'SignUp',
|
||||
components: {
|
||||
AuthContentWrapper,
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
AuthContent,
|
||||
AuthButton,
|
||||
required,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['config']),
|
||||
privacyPolicy() {
|
||||
return this.config.legal.find(legal => {
|
||||
return legal.slug === 'privacy-policy'
|
||||
})
|
||||
},
|
||||
termsOfService() {
|
||||
return this.config.legal.find(legal => {
|
||||
return legal.slug === 'terms-of-service'
|
||||
})
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
register: {
|
||||
name: 'Peter',
|
||||
email: 'john@doe.com',
|
||||
password: 'vuefilemanager',
|
||||
password_confirmation: 'vuefilemanager',
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async signUp() {
|
||||
|
||||
// Validate fields
|
||||
const isValid = await this.$refs.sign_up.validate();
|
||||
|
||||
if (!isValid) return;
|
||||
|
||||
// Start loading
|
||||
this.isLoading = true
|
||||
|
||||
// Send request to get user token
|
||||
axios
|
||||
.post('/register', this.register)
|
||||
.then(() => {
|
||||
|
||||
// End loading
|
||||
this.isLoading = false
|
||||
|
||||
// Set login state
|
||||
this.$store.commit('SET_AUTHORIZED', true)
|
||||
|
||||
// Go to files page
|
||||
this.$router.push({name: 'SetUpPlan'})
|
||||
})
|
||||
.catch(error => {
|
||||
|
||||
if (error.response.status == 500) {
|
||||
|
||||
events.$emit('alert:open', {
|
||||
emoji: '🤔',
|
||||
title: this.$t('popup_signup_error.title'),
|
||||
message: this.$t('popup_signup_error.message')
|
||||
})
|
||||
}
|
||||
|
||||
if (error.response.status == 422) {
|
||||
|
||||
if (error.response.data.errors['email']) {
|
||||
|
||||
this.$refs.sign_up.setErrors({
|
||||
'E-Mail': error.response.data.errors['email']
|
||||
});
|
||||
}
|
||||
|
||||
if (error.response.data.errors['password']) {
|
||||
|
||||
this.$refs.sign_up.setErrors({
|
||||
'Your New Password': error.response.data.errors['password']
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// End loading
|
||||
this.isLoading = false
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$scrollTop()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@assets/vuefilemanager/_auth-form';
|
||||
@import '@assets/vuefilemanager/_auth';
|
||||
|
||||
.legal-agreement {
|
||||
@include font-size(16);
|
||||
padding: 55px 0 0;
|
||||
max-width: 400px;
|
||||
font-weight: 700;
|
||||
line-height: 1.6;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,707 @@
|
||||
<template>
|
||||
<div id="single-page">
|
||||
<div id="page-content" class="large-width center-page" v-show="! isLoading">
|
||||
<MobileHeader :title="$router.currentRoute.meta.title" />
|
||||
<div class="content-page">
|
||||
<div class="plan-title">
|
||||
<credit-card-icon size="42" class="title-icon"></credit-card-icon>
|
||||
<h1>{{ $t('page_upgrade_account.title') }}</h1>
|
||||
<h2>{{ $t('page_upgrade_account.desription') }}</h2>
|
||||
</div>
|
||||
<div class="order">
|
||||
<div class="steps">
|
||||
|
||||
<div class="payment-card">
|
||||
<FormLabel>{{ $t('page_upgrade_account.section_card') }}</FormLabel>
|
||||
|
||||
<!-- Pay by new credit card -->
|
||||
<div class="register-card">
|
||||
<InfoBox v-if="config.isDemo">
|
||||
<p>For test your payment please use <b>4242 4242 4242 4242</b> or <b>5555 5555 5555 4444</b> as a card number, <b>11/22</b>
|
||||
as the expiration date and <b>123</b> as CVC number and ZIP <b>12345</b>.</p>
|
||||
</InfoBox>
|
||||
|
||||
<div ref="stripeCard" class="stripe-card" :class="{'is-error': isError }"></div>
|
||||
|
||||
<div class="card-error-message" v-if="isError">
|
||||
<span>{{ errorMessage }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="billing" v-if="billing">
|
||||
<FormLabel>{{ $t('page_upgrade_account.section_billing') }}</FormLabel>
|
||||
|
||||
<ValidationObserver ref="order" v-slot="{ invalid }" tag="form" class="form block-form">
|
||||
<div class="form block-form">
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('user_settings.name') }}:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper"
|
||||
rules="required"
|
||||
name="billing_name" v-slot="{ errors }">
|
||||
<input v-model="billing.name"
|
||||
:placeholder="$t('user_settings.name_plac')"
|
||||
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>{{ $t('user_settings.address') }}:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper"
|
||||
rules="required"
|
||||
name="billing_address" v-slot="{ errors }">
|
||||
<input v-model="billing.address"
|
||||
:placeholder="$t('user_settings.address_plac')"
|
||||
type="text"
|
||||
:class="{'is-error': errors[0]}"
|
||||
/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="wrapper-inline">
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('user_settings.city') }}:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper"
|
||||
rules="required" name="billing_city"
|
||||
v-slot="{ errors }">
|
||||
<input v-model="billing.city"
|
||||
:placeholder="$t('user_settings.city_plac')"
|
||||
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>{{ $t('user_settings.postal_code') }}:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper"
|
||||
rules="required" name="billing_postal_code"
|
||||
v-slot="{ errors }">
|
||||
<input v-model="billing.postal_code"
|
||||
:placeholder="$t('user_settings.postal_code_plac')"
|
||||
type="text"
|
||||
:class="{'is-error': errors[0]}"
|
||||
/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('user_settings.country') }}:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper"
|
||||
rules="required"
|
||||
name="billing_country" v-slot="{ errors }">
|
||||
<SelectInput v-model="billing.country"
|
||||
:default="billing.country"
|
||||
:options="countries"
|
||||
:placeholder="$t('user_settings.country_plac')"
|
||||
:isError="errors[0]" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('user_settings.state') }}:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper"
|
||||
rules="required"
|
||||
name="billing_state" v-slot="{ errors }">
|
||||
<input v-model="billing.state"
|
||||
:placeholder="$t('user_settings.state_plac')"
|
||||
type="text"
|
||||
:class="{'is-error': errors[0]}"
|
||||
/>
|
||||
<small class="input-help">
|
||||
State, county, province, or region.
|
||||
</small>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('user_settings.phone_number') }}:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper"
|
||||
rules="required"
|
||||
name="billing_phone_number" v-slot="{ errors }">
|
||||
<input v-model="billing.phone_number"
|
||||
:placeholder="$t('user_settings.phone_number_plac')"
|
||||
type="text"
|
||||
:class="{'is-error': errors[0]}"
|
||||
/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
</div>
|
||||
</ValidationObserver>
|
||||
</div>
|
||||
</div>
|
||||
<div class="summary">
|
||||
<FormLabel>{{ $t('page_upgrade_account.section_summary') }}</FormLabel>
|
||||
<div class="summary-list" :class="{'is-error': isError}" v-if="requestedPlan">
|
||||
<div class="row">
|
||||
<div class="cell">
|
||||
<b>{{ requestedPlan.data.attributes.name }}</b>
|
||||
<small>{{ $t('page_upgrade_account.summary.period') }}</small>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<b>{{ requestedPlan.data.attributes.price }}</b>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" v-if="taxRates">
|
||||
<div class="cell">
|
||||
<b>{{ $t('page_upgrade_account.summary.vat') }} - ({{ taxRates.country }} {{ taxRates.percentage }}%)</b>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<b>{{ taxRates.plan_price_formatted }}</b>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Show total when tax rates is not specified-->
|
||||
<div class="row" v-if="! taxRates">
|
||||
<div class="cell">
|
||||
<b>{{ $t('global.total') }}</b>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<b>{{ requestedPlan.data.attributes.price }}</b>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Show total when is tax rates-->
|
||||
<div class="row" v-if="taxRates">
|
||||
<div class="cell">
|
||||
<b>{{ $t('page_upgrade_account.summary.total_with_vat') }}</b>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<b>{{ taxRates.plan_price_formatted }}</b>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ButtonBase :disabled="isSubmitted" :loading="isSubmitted" @click.native="submitOrder"
|
||||
type="submit" button-style="theme-solid" class="next-submit">
|
||||
{{ $t('page_upgrade_account.summary.submit_button') }}
|
||||
</ButtonBase>
|
||||
<p class="error-message" v-if="isError">{{ errorMessage }}</p>
|
||||
<small class="disclaimer">
|
||||
{{ $t('page_upgrade_account.summary.submit_disclaimer', {app: config.app_name}) }}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="loader" v-if="isLoading">
|
||||
<Spinner></Spinner>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import PlanPricingTables from '@/components/Others/PlanPricingTables'
|
||||
import SelectInput from '@/components/Others/Forms/SelectInput'
|
||||
import FormLabel from '@/components/Others/Forms/FormLabel'
|
||||
import MobileHeader from '@/components/Mobile/MobileHeader'
|
||||
import ButtonBase from '@/components/FilesView/ButtonBase'
|
||||
import InfoBox from '@/components/Others/Forms/InfoBox'
|
||||
import ColorLabel from '@/components/Others/ColorLabel'
|
||||
import PageHeader from '@/components/Others/PageHeader'
|
||||
import Spinner from '@/components/FilesView/Spinner'
|
||||
import {CreditCardIcon} from 'vue-feather-icons'
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from "@/bus"
|
||||
import axios from 'axios'
|
||||
|
||||
let [stripe, card] = [undefined, undefined];
|
||||
|
||||
export default {
|
||||
name: 'SelectPlan',
|
||||
components: {
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
PlanPricingTables,
|
||||
CreditCardIcon,
|
||||
MobileHeader,
|
||||
SelectInput,
|
||||
ButtonBase,
|
||||
PageHeader,
|
||||
ColorLabel,
|
||||
FormLabel,
|
||||
required,
|
||||
Spinner,
|
||||
InfoBox,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['requestedPlan', 'config', 'countries']),
|
||||
billing() {
|
||||
return this.$store.getters.user.data.relationships.settings.data.attributes
|
||||
},
|
||||
taxRates() {
|
||||
return this.requestedPlan.data.attributes.tax_rates.find(taxRate => {
|
||||
return taxRate.country === this.billing.country
|
||||
})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
complete: false,
|
||||
stripeOptions: {
|
||||
hidePostalCode: false
|
||||
},
|
||||
isLoading: true,
|
||||
isSubmitted: false,
|
||||
|
||||
errorMessage: undefined,
|
||||
isError: false,
|
||||
|
||||
clientSecret: undefined
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initStripe() {
|
||||
stripe = Stripe(this.config.stripe_public_key)
|
||||
|
||||
let elements = stripe.elements();
|
||||
|
||||
card = elements.create('card');
|
||||
|
||||
card.mount(this.$refs.stripeCard);
|
||||
},
|
||||
successOrder() {
|
||||
// Update user data
|
||||
this.$store.dispatch('getAppData')
|
||||
|
||||
// Show toaster
|
||||
events.$emit('toaster', {
|
||||
type: 'success',
|
||||
message: this.$t('toaster.account_upgraded'),
|
||||
})
|
||||
|
||||
// Go to User page
|
||||
this.$router.push({name: 'Files'})
|
||||
},
|
||||
errorOrder(error) {
|
||||
|
||||
// Redirect user to confirmation payment page
|
||||
if (error.response.status === 402) {
|
||||
window.location.href = error.response.data.message;
|
||||
}
|
||||
|
||||
// Show user error message
|
||||
if (error.response.status === 400) {
|
||||
this.isError = true
|
||||
this.errorMessage = error.response.data.message
|
||||
}
|
||||
|
||||
// Show server error
|
||||
if (error.response.status === 500) {
|
||||
this.isError = true
|
||||
this.errorMessage = error.response.data.message
|
||||
|
||||
events.$emit('alert:open', {
|
||||
title: this.$t('popup_error.title'),
|
||||
message: this.$t('popup_error.message'),
|
||||
})
|
||||
}
|
||||
},
|
||||
async submitOrder() {
|
||||
|
||||
// Validate fields
|
||||
const isValid = await this.$refs.order.validate();
|
||||
|
||||
if (!isValid) return;
|
||||
|
||||
// Remove error
|
||||
this.isError = false
|
||||
|
||||
// Start loading
|
||||
this.isSubmitted = true
|
||||
|
||||
const {setupIntent, error} = await stripe.confirmCardSetup(this.clientSecret, {
|
||||
payment_method: {
|
||||
card: card,
|
||||
}
|
||||
})
|
||||
|
||||
if (error) {
|
||||
|
||||
// Set error on
|
||||
this.isError = true
|
||||
|
||||
// End button spinner
|
||||
this.isSubmitted = false
|
||||
|
||||
// Show error message
|
||||
this.errorMessage = error.message
|
||||
|
||||
} else {
|
||||
|
||||
axios
|
||||
.post('/api/oasis/subscribe', {
|
||||
billing: {
|
||||
billing_address: this.billing.address,
|
||||
billing_city: this.billing.city,
|
||||
billing_country: this.billing.country,
|
||||
billing_name: this.billing.name,
|
||||
billing_phone_number: this.billing.phone_number,
|
||||
billing_postal_code: this.billing.postal_code,
|
||||
billing_state: this.billing.state,
|
||||
},
|
||||
plan: this.requestedPlan,
|
||||
payment: {
|
||||
type: 'stripe',
|
||||
meta: {
|
||||
pm: setupIntent.payment_method,
|
||||
}
|
||||
}
|
||||
})
|
||||
.then(() => {
|
||||
this.successOrder()
|
||||
})
|
||||
.catch((error) => {
|
||||
this.errorOrder(error)
|
||||
})
|
||||
.finally(() => {
|
||||
this.isSubmitted = false
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted: function () {
|
||||
if (!this.requestedPlan) {
|
||||
this.$router.push({name: 'SetUpPlan'})
|
||||
} else {
|
||||
this.initStripe()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
// Get setup intent for stripe
|
||||
axios.get('/api/user/subscription/setup-intent')
|
||||
.then(response => {
|
||||
this.clientSecret = response.data.client_secret
|
||||
})
|
||||
.catch(() => {
|
||||
this.$isSomethingWrong()
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@assets/vuefilemanager/_variables';
|
||||
@import '@assets/vuefilemanager/_mixins';
|
||||
@import '@assets/vuefilemanager/_forms';
|
||||
|
||||
.change-payment {
|
||||
padding-top: 10px;
|
||||
|
||||
span {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
span, a {
|
||||
color: $text-muted;
|
||||
@include font-size(14);
|
||||
}
|
||||
}
|
||||
|
||||
.card-error-message {
|
||||
padding-top: 10px;
|
||||
|
||||
span, a {
|
||||
@include font-size(14);
|
||||
font-weight: 600;
|
||||
color: $danger;
|
||||
}
|
||||
|
||||
.link, a {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.registered-cards {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.register-card {
|
||||
margin-bottom: 55px;
|
||||
}
|
||||
|
||||
.credit-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 15px;
|
||||
background: $light_background;
|
||||
border-radius: 8px;
|
||||
margin-top: 20px;
|
||||
|
||||
&.is-error {
|
||||
box-shadow: 0 0 7px rgba($danger, 0.3);
|
||||
border: 2px solid $danger;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.card-number {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.credit-card-numbers {
|
||||
vertical-align: middle;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.credit-card-icon {
|
||||
vertical-align: middle;
|
||||
max-height: 20px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.stripe-card {
|
||||
box-sizing: border-box;
|
||||
padding: 13px 20px;
|
||||
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
background-color: white;
|
||||
|
||||
box-shadow: 0 1px 3px 0 #e6ebf1;
|
||||
-webkit-transition: box-shadow 150ms ease;
|
||||
transition: box-shadow 150ms ease;
|
||||
|
||||
&.is-error {
|
||||
box-shadow: 0 0 7px rgba($danger, 0.3);
|
||||
border: 2px solid $danger;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&.StripeElement--focus {
|
||||
box-shadow: 0 1px 3px 0 #cfd7df;
|
||||
}
|
||||
|
||||
&.StripeElement--invalid {
|
||||
border-color: #fa755a;
|
||||
}
|
||||
|
||||
&.StripeElement--webkit-autofill {
|
||||
background-color: #fefde5 !important;
|
||||
}
|
||||
|
||||
iframe .InputContainer .InputElement {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.summary-list {
|
||||
box-shadow: 0 7px 20px 5px hsla(220, 36%, 16%, 0.06);
|
||||
border-radius: 8px;
|
||||
position: sticky;
|
||||
padding: 25px;
|
||||
top: 30px;
|
||||
|
||||
&.is-error {
|
||||
border: 2px solid $danger;
|
||||
box-shadow: 0 7px 20px 5px rgba($danger, 0.06);
|
||||
}
|
||||
|
||||
.error-message {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.next-submit {
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.disclaimer {
|
||||
@include font-size(12);
|
||||
line-height: 1.6;
|
||||
display: block;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 15px 0;
|
||||
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
border-top: 1px solid $light_mode_border;
|
||||
padding-bottom: 0;
|
||||
|
||||
b {
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cell {
|
||||
b {
|
||||
display: block;
|
||||
@include font-size(18);
|
||||
}
|
||||
|
||||
small {
|
||||
color: $text-muted;
|
||||
@include font-size(12);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order {
|
||||
display: flex;
|
||||
margin-bottom: 30px;
|
||||
|
||||
.steps {
|
||||
flex: 0 0 65%;
|
||||
padding-right: 30px;
|
||||
|
||||
.form {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.summary {
|
||||
flex: 0 0 34%;
|
||||
}
|
||||
}
|
||||
|
||||
.plan-title {
|
||||
text-align: center;
|
||||
max-width: 600px;
|
||||
margin: 0 auto 80px;
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
color: $theme;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@include font-size(38);
|
||||
font-weight: 800;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include font-size(20);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.plan-title {
|
||||
|
||||
h1 {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: $dark_mode_text_secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.credit-card {
|
||||
background: $dark_mode_foreground;
|
||||
|
||||
span, .credit-card-numbers {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
}
|
||||
|
||||
.change-payment {
|
||||
|
||||
span {
|
||||
color: $dark_mode_text_secondary;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $theme;
|
||||
}
|
||||
}
|
||||
|
||||
.summary-list {
|
||||
background: $dark_mode_foreground;
|
||||
|
||||
.disclaimer {
|
||||
color: $dark_mode_text_secondary;
|
||||
}
|
||||
|
||||
.row {
|
||||
|
||||
&:last-of-type {
|
||||
border-top: 1px solid $dark_mode_border_color;
|
||||
|
||||
b {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cell {
|
||||
b {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
small {
|
||||
color: $dark_mode_text_secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stripe-card {
|
||||
border: 1px solid transparent;
|
||||
//background-color: $dark_mode_foreground;
|
||||
box-shadow: none;
|
||||
|
||||
&.StripeElement--webkit-autofill {
|
||||
background-color: $dark_mode_foreground !important;
|
||||
}
|
||||
|
||||
&.StripeElement--focus {
|
||||
box-shadow: none;
|
||||
border-color: $theme;
|
||||
box-shadow: 0 1px 5px rgba($theme, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
.order {
|
||||
display: block;
|
||||
|
||||
.steps {
|
||||
margin-bottom: 70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<div id="single-page">
|
||||
<div id="page-content" class="large-width center-page" v-show="! isLoading">
|
||||
<MobileHeader :title="$router.currentRoute.meta.title"/>
|
||||
<div class="content-page">
|
||||
|
||||
<!--Page Title-->
|
||||
<div class="plan-title">
|
||||
<cloud-icon size="42" class="title-icon"></cloud-icon>
|
||||
<h1>{{ $t('page_pricing_tables.title') }}</h1>
|
||||
<h2>{{ $t('page_pricing_tables.description') }}</h2>
|
||||
</div>
|
||||
|
||||
<!--Pricing Tables-->
|
||||
<PlanPricingTables v-if="user" custom-route="FinishPayment" @load="onLoadPricingTables" @selected-plan="onSelectTable"/>
|
||||
</div>
|
||||
</div>
|
||||
<div id="loader" v-if="isLoading">
|
||||
<Spinner></Spinner>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PlanPricingTables from '@/components/Others/PlanPricingTables'
|
||||
import MobileHeader from '@/components/Mobile/MobileHeader'
|
||||
import PageHeader from '@/components/Others/PageHeader'
|
||||
import Spinner from '@/components/FilesView/Spinner'
|
||||
import { CloudIcon } from 'vue-feather-icons'
|
||||
import axios from 'axios'
|
||||
import {mapGetters} from "vuex";
|
||||
|
||||
export default {
|
||||
name: 'UpgradePlan',
|
||||
components: {
|
||||
PlanPricingTables,
|
||||
MobileHeader,
|
||||
PageHeader,
|
||||
CloudIcon,
|
||||
Spinner,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'user'
|
||||
]),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onLoadPricingTables(state) {
|
||||
this.isLoading = state
|
||||
},
|
||||
onSelectTable(plan) {
|
||||
this.$store.commit('STORE_REQUESTED_PLAN', plan)
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
let StripeElementsScript = document.createElement('script')
|
||||
|
||||
StripeElementsScript.setAttribute('src', 'https://js.stripe.com/v3/')
|
||||
document.head.appendChild(StripeElementsScript)
|
||||
},
|
||||
mounted() {
|
||||
// Reload user data
|
||||
this.$store.dispatch('getAppData')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@assets/vuefilemanager/_variables';
|
||||
@import '@assets/vuefilemanager/_mixins';
|
||||
@import '@assets/vuefilemanager/_forms';
|
||||
|
||||
.plan-title {
|
||||
text-align: center;
|
||||
max-width: 600px;
|
||||
margin: 0 auto 80px;
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
color: $theme;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@include font-size(38);
|
||||
font-weight: 800;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include font-size(20);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.plan-title {
|
||||
|
||||
h1 {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: $dark_mode_text_secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user