v1.7 beta.1

resources/js/views/Auth/SignUp.vue

@@ -52,7 +52,7 @@
                     </ValidationProvider>
                 </div>
 
-                <div>
+                <div v-if="! config.isSaaS">
                     <i18n path="page_registration.agreement" tag="p" class="legal-agreement">
                         <router-link :to="{name: 'DynamicPage', params: {slug: 'terms-of-service'}}" target="_blank">{{ termsOfService.title }}</router-link>
                         <router-link :to="{name: 'DynamicPage', params: {slug: 'privacy-policy'}}" target="_blank">{{ privacyPolicy.title }}</router-link>

resources/js/views/Index/SaaSLandingPage.vue

@@ -66,6 +66,8 @@
             }
         },
         mounted() {
+            if (! this.config.isSaaS) return
+
             // Get page content
             axios.get('/api/content', {
                 params: {

resources/js/views/Mobile/AdminMobileMenu.vue

@@ -103,4 +103,13 @@
             }
         }
     }
+
+    @media (prefers-color-scheme: dark) {
+        .mobile-navigation {
+
+            .mobile-menu-label {
+                color: $dark_mode_text_secondary;
+            }
+        }
+    }
 </style>

resources/js/views/Mobile/UserProfileMobileMenu.vue

@@ -102,4 +102,13 @@
             }
         }
     }
+
+    @media (prefers-color-scheme: dark) {
+        .mobile-navigation {
+
+            .mobile-menu-label {
+                color: $dark_mode_text_secondary;
+            }
+        }
+    }
 </style>

resources/js/views/Profile.vue

@@ -92,7 +92,7 @@
                             </div>
                         </div>
                         <div v-if="config.storageLimit && config.isSaaS && config.app_payments_active" class="headline-actions">
-                            <router-link :to="{name: 'UpgradePlan'}" v-if="! user.relationships.subscription || (user.relationships.subscription && ! user.relationships.subscription.data.attributes.is_highest)">
+                            <router-link :to="{name: 'UpgradePlan'}" v-if="canShowUpgradeButton">
                                 <ButtonBase class="upgrade-button" button-style="secondary" type="button">
                                     {{ $t('global.upgrade_plan') }}
                                 </ButtonBase>
@@ -100,6 +100,10 @@
                         </div>
                     </div>
 
+                    <InfoBox v-if="canShowUpgradeWarning" type="error" class="upgrade-box">
+                        <p>{{ $t('upgrade_banner.title') }}</p>
+                    </InfoBox>
+
                     <!--Router Content-->
                     <router-view :user="user" />
                 </div>
@@ -118,11 +122,11 @@
     import UserImageInput from '@/components/Others/UserImageInput'
     import MobileHeader from '@/components/Mobile/MobileHeader'
     import ButtonBase from '@/components/FilesView/ButtonBase'
+    import InfoBox from '@/components/Others/Forms/InfoBox'
     import PageHeader from '@/components/Others/PageHeader'
     import ColorLabel from '@/components/Others/ColorLabel'
     import Spinner from '@/components/FilesView/Spinner'
     import { mapGetters } from 'vuex'
-    import axios from 'axios'
     import {
         CreditCardIcon,
         HardDriveIcon,
@@ -136,19 +140,20 @@
         name: 'Settings',
         components: {
             ContentSidebar,
-            ContentGroup,
-            CloudIcon,
-            ButtonBase,
             CreditCardIcon,
             UserImageInput,
+            HardDriveIcon,
             FileTextIcon,
             MobileHeader,
+            ContentGroup,
+            ButtonBase,
             ColorLabel,
             PageHeader,
-            Spinner,
-            HardDriveIcon,
+            CloudIcon,
             UserIcon,
             LockIcon,
+            Spinner,
+            InfoBox,
         },
         computed: {
             ...mapGetters(['user', 'config']),
@@ -160,6 +165,12 @@
             },
             canShowSubscriptionSettings() {
                 return this.config.isSaaS
+            },
+            canShowUpgradeButton() {
+                return this.config.storageDefaultSpace === this.user.relationships.storage.data.attributes.capacity || this.config.storageLimit && this.user.relationships.storage.data.attributes.used > 95
+            },
+            canShowUpgradeWarning() {
+                return this.config.storageLimit && this.user.relationships.storage.data.attributes.used > 95
             }
         },
         data() {
@@ -215,6 +226,10 @@
         }
     }
 
+    .upgrade-box {
+        margin-top: -30px;
+    }
+
     @media (prefers-color-scheme: dark) {
         .user-thumbnail {
 
@@ -235,6 +250,8 @@
 
         .page-detail-headline {
             display: block;
+            margin-bottom: 30px;
+            margin-top: 10px;
 
             .headline-actions {
                 margin-top: 20px;

resources/js/views/SetupWIzard/SubscriptionPlans.vue

@@ -13,7 +13,7 @@
                                 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>
+                    <p>Your plans will be <b>sorted automatically</b> in ascent order by plan price. All plans is automatically created as monthly plans.</p>
                 </InfoBox>
 
                 <div class="duplicator">

resources/js/views/SetupWizard.vue

@@ -3,10 +3,16 @@
 </template>
 
 <script>
+    import { mapGetters } from 'vuex'
+
     export default {
         name: 'SetupWizard',
+        computed: {
+            ...mapGetters(['config']),
+        },
         mounted() {
-            //this.$router.push({name: 'PurchaseCode'})
+            if (this.config.installation === 'setup-done' || this.config.installation === 'quiet-update')
+                this.$router.push({name: 'SignIn'})
         }
     }
 </script>

resources/js/views/Upgrade/UpgradeBilling.vue

@@ -16,7 +16,7 @@
 
                             <!-- Pay by new credit card -->
                             <div class="register-card" v-show="! defaultPaymentMethod || payByNewCard">
-                                <InfoBox>
+                                <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>

resources/js/views/User/CreatePaymentMethod.vue

@@ -0,0 +1,223 @@
+<template>
+    <PageTab>
+        <PageTabGroup>
+            <div class="form block-form">
+                <FormLabel>{{ $t('user_payments.add_card') }}</FormLabel>
+
+                <!-- Register new credit card -->
+                <div class="register-card">
+                    <InfoBox v-show="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 class="block-wrapper">
+                    <div class="input-wrapper">
+                        <div class="inline-wrapper">
+                            <div class="switch-label">
+                                <label class="input-label">{{ $t('user_add_card.default_title') }}:</label>
+                                <small class="input-help">{{ $t('user_add_card.default_description') }}</small>
+                            </div>
+                            <SwitchInput v-model="defaultPaymentMethod" class="switch" :state="defaultPaymentMethod"/>
+                        </div>
+                    </div>
+                </div>
+
+                <ButtonBase @click.native="registerCard" :disabled="isSubmitted" :loading="isSubmitted" button-style="theme" type="submit">
+                    {{ $t('user_payments.add_card') }}
+                </ButtonBase>
+            </div>
+        </PageTabGroup>
+    </PageTab>
+</template>
+
+<script>
+    import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
+    import SwitchInput from '@/components/Others/Forms/SwitchInput'
+    import FormLabel from '@/components/Others/Forms/FormLabel'
+    import ButtonBase from '@/components/FilesView/ButtonBase'
+    import PageTab from '@/components/Others/Layout/PageTab'
+    import InfoBox from '@/components/Others/Forms/InfoBox'
+    import {mapGetters} from 'vuex'
+    import {events} from "@/bus"
+    import axios from 'axios'
+
+    let [stripe, card] = [undefined, undefined];
+
+    export default {
+        name: 'CreatePaymentMethod',
+        components: {
+            PageTabGroup,
+            SwitchInput,
+            ButtonBase,
+            FormLabel,
+            PageTab,
+            InfoBox,
+        },
+        computed: {
+            ...mapGetters(['config']),
+        },
+        data() {
+            return {
+                errorMessage: undefined,
+                isError: false,
+
+                stripeOptions: {
+                    hidePostalCode: false
+                },
+
+                isSubmitted: false,
+                defaultPaymentMethod: true,
+                clientSecret: undefined
+            }
+        },
+        methods: {
+            async registerCard() {
+
+                // Start loading
+                this.isSubmitted = true
+
+                const {setupIntent, error} = await stripe.confirmCardSetup(this.clientSecret, {
+                    payment_method: {
+                        card: card,
+                    }
+                })
+
+                if (setupIntent) {
+                    axios
+                        .post('/api/user/payment-cards', {
+                            token: setupIntent.payment_method,
+                            default: this.defaultPaymentMethod,
+                        })
+                        .then(() => {
+
+                            // Show toaster
+                            events.$emit('toaster', {
+                                type: 'success',
+                                message: this.$t('toaster.card_new_add'),
+                            })
+
+                            // Go to payment methods page
+                            this.$router.push({name: 'PaymentMethods'})
+                        })
+                        .catch(() => {
+                            events.$emit('alert:open', {
+                                title: this.$t('popup_error.title'),
+                                message: this.$t('popup_error.message'),
+                            })
+                        })
+                        .finally(() => {
+                            this.isSubmitted = false
+                        })
+                }
+
+                if (error) {
+
+                    // Set error on
+                    this.isError = true
+
+                    // End button spinner
+                    this.isSubmitted = false
+
+                    // Show error message
+                    this.errorMessage = error.message
+
+                }
+            },
+            initStripe() {
+                stripe = Stripe(this.config.stripe_public_key)
+
+                let elements = stripe.elements();
+
+                card = elements.create('card');
+
+                card.mount(this.$refs.stripeCard);
+            },
+        },
+        mounted() {
+            let StripeElementsScript = document.createElement('script')
+
+            StripeElementsScript.setAttribute('src', 'https://js.stripe.com/v3/')
+            document.head.appendChild(StripeElementsScript)
+
+            // Get setup intent for stripe
+            axios.get('/api/stripe/setup-intent')
+                .then(response => {
+                    this.clientSecret = response.data.client_secret
+
+                    this.initStripe()
+                })
+        },
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+    @import '@assets/vue-file-manager/_forms';
+
+    .register-card {
+        margin-bottom: 25px;
+    }
+
+    .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;
+        }
+    }
+
+    .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;
+            }
+        }
+    }
+</style>

resources/js/views/User/PaymentMethods.vue

@@ -2,7 +2,14 @@
     <PageTab :is-loading="isLoading">
         <PageTabGroup v-if="PaymentMethods && PaymentMethods.length > 0">
             <FormLabel>{{ $t('user_payments.title') }}</FormLabel>
-            <DatatableWrapper :paginator="true" :columns="columns" :data="PaymentMethods" class="table">
+            <div class="page-actions">
+                <router-link :to="{name: 'CreatePaymentMethod'}">
+                    <MobileActionButton icon="credit-card">
+                        {{ $t('user_payments.add_card') }}
+                    </MobileActionButton>
+                </router-link>
+            </div>
+            <DatatableWrapper :paginator="false" :columns="columns" :data="PaymentMethods" class="table">
                 <template scope="{ row }">
                     <tr :class="{'is-deleting': row.data.attributes.card_id === deletingID}">
                         <td style="width: 300px">
@@ -29,8 +36,12 @@
                         </td>
                         <td>
                             <div class="action-icons">
-                                <credit-card-icon size="15" class="icon icon-card" :title="$t('user_payments.set_as_default')" @click="setDefaultCard(row.data.attributes)"  v-if="row.data.id !== defaultPaymentCard.data.id"></credit-card-icon>
-                                <trash2-icon size="15" class="icon icon-trash" :title="$t('user_payments.delete_card')" @click="deleteCard(row.data.attributes)"></trash2-icon>
+                                <label class="icon-wrapper" :title="$t('user_payments.set_as_default')">
+                                    <credit-card-icon size="15" class="icon icon-card" @click="setDefaultCard(row.data.attributes)"  v-if="row.data.id !== defaultPaymentCard.data.id"></credit-card-icon>
+                                </label>
+                                <label class="icon-wrapper" :title="$t('user_payments.delete_card')">
+                                    <trash2-icon size="15" class="icon icon-trash" @click="deleteCard(row.data.attributes)"></trash2-icon>
+                                </label>
                             </div>
                         </td>
                     </tr>
@@ -38,12 +49,13 @@
             </DatatableWrapper>
         </PageTabGroup>
         <InfoBox v-else>
-            <p>{{ $t('user_payments.empty') }}</p>
+            <p>{{ $t('user_payments.empty') }} <router-link v-if="user.data.attributes.stripe_customer" :to="{name: 'CreatePaymentMethod'}">Add new payment method.</router-link> </p>
         </InfoBox>
     </PageTab>
 </template>
 
 <script>
+    import MobileActionButton from '@/components/FilesView/MobileActionButton'
     import DatatableWrapper from '@/components/Others/Tables/DatatableWrapper'
     import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
     import {CreditCardIcon, Trash2Icon} from "vue-feather-icons"
@@ -51,12 +63,14 @@
     import PageTab from '@/components/Others/Layout/PageTab'
     import ColorLabel from '@/components/Others/ColorLabel'
     import InfoBox from '@/components/Others/Forms/InfoBox'
+    import { mapGetters } from 'vuex'
     import {events} from "@/bus"
     import axios from 'axios'
 
     export default {
         name: 'UserPaymentMethods',
         components: {
+            MobileActionButton,
             DatatableWrapper,
             CreditCardIcon,
             PageTabGroup,
@@ -66,6 +80,9 @@
             InfoBox,
             PageTab,
         },
+        computed: {
+            ...mapGetters(['user']),
+        },
         data() {
             return {
                 defaultPaymentCard: undefined,
@@ -250,6 +267,11 @@
         }
     }
 
+    .page-actions {
+        margin-top: 45px;
+        margin-bottom: 10px;
+    }
+
 
     @media only screen and (max-width: 960px) {