feat: re-design home page in admin panel

Author: alexandrdrvn

plugin.php

@@ -97,6 +97,7 @@ function VFA_vuefront_admin_action_vf_information()
 {
     $plugin_data = get_plugin_data(__FILE__);
     $woocommerce_data = get_plugin_data(WP_PLUGIN_DIR . '/woocommerce/woocommerce.php');
+    $brand_data = get_plugin_data(WP_PLUGIN_DIR . '/perfect-woocommerce-brands/perfect-woocommerce-brands.php');
     $plugin_version = $plugin_data['Version'];
     $extensions = array();
     $extensions[] = array(
@@ -105,6 +106,12 @@ function VFA_vuefront_admin_action_vf_information()
         'status' => is_plugin_active('woocommerce/woocommerce.php')
     );
 
+    $extensions[] = array(
+        'name' => "Perfect Brands for WooCommerce",
+        'version' => $brand_data['Version'],
+        'status' => is_plugin_active('perfect-woocommerce-brands/perfect-woocommerce-brands.php')
+    );
+
     $status = file_exists(__DIR__ . '/.htaccess.txt');
 
     echo json_encode(

view/javascript/d_pax/components/access.vue

@@ -34,7 +34,6 @@
 <script>
 import {mapGetters} from 'vuex'
 export default {
-  layout: 'auth',
   middleware: ['alien'],
   data() {
     return {
@@ -49,13 +48,13 @@ export default {
   methods: {
     handleLogout() {
       this.$store.dispatch('auth/logout')
-      this.$router.push('/check')
+      this.$store.commit('auth/toggleShowLogin')
     },
     async handleRefresh() {
       this.refreshLoading = true
       await this.$store.dispatch('account/load')
       if(this.account.banneded) {
-        this.$router.push('/')
+        this.$store.commit('auth/toggleShowLogin')
       }
       this.refreshLoading = false
     },
@@ -75,7 +74,11 @@ export default {
 </i18n>
 <style lang="scss">
 .alient-page {
-  margin-top: 60px;
+  border-radius: 3px;
+  border: 1px solid #d9d9d9;
+  background-color: #ffffff;
+  padding: 50px 55px;
+  margin-bottom: 60px;
   &__button_logout {
     display: block;
     cursor: pointer;
@@ -90,8 +93,6 @@ export default {
     text-align: center;
   }
   &__banner {
-    background-color: #f9f9f9;
-    padding: 50px;
     margin-bottom: 40px;
     &_image {
       padding: 0 40px;

view/javascript/d_pax/pages/alien.vue renamed to view/javascript/d_pax/components/alien.vue

@@ -210,6 +210,7 @@ export default {
       padding: 10px;
       background: #efeff1 !important;
       border: none;
+      margin: 0;
       height: 54px !important;
       background-color: #efeff1 !important;
       padding: 12px 24px !important;

view/javascript/d_pax/components/apps.vue

@@ -34,7 +34,6 @@
 <script>
 import {mapGetters} from 'vuex'
 export default {
-  layout: 'auth',
   middleware: ['banned'],
   data() {
     return {
@@ -49,13 +48,13 @@ export default {
   methods: {
     handleLogout() {
       this.$store.dispatch('auth/logout')
-      this.$router.push('/check')
+      this.$store.commit('auth/toggleShowLogin')
     },
     async handleRefresh() {
       this.refreshLoading = true
       await this.$store.dispatch('account/load')
       if(this.account.banneded) {
-        this.$router.push('/')
+        this.$store.commit('auth/toggleShowLogin')
       }
       this.refreshLoading = false
     },
@@ -75,7 +74,11 @@ export default {
 </i18n>
 <style lang="scss">
   .banned-page {
-    margin-top: 60px;
+    border-radius: 3px;
+    border: 1px solid #d9d9d9;
+    background-color: #ffffff;
+    padding: 50px 55px;
+    margin-bottom: 60px;
     &__button_logout {
       display: block;
       cursor: pointer;
@@ -90,8 +93,6 @@ export default {
       text-align: center;
     }
     &__banner {
-      background-color: #f9f9f9;
-      padding: 50px;
       margin-bottom: 40px;
       &_image {
         padding: 0 40px;

view/javascript/d_pax/pages/banned.vue renamed to view/javascript/d_pax/components/banned.vue

@@ -50,8 +50,6 @@
 <script>
 import { mapGetters } from "vuex";
 export default {
-  layout: 'auth',
-  middleware: ['notAuthenticated'],
   data() {
     return {
       form: {
@@ -67,6 +65,9 @@ export default {
       existingEmail: "auth/existingEmail"
     })
   },
+  mounted() {
+    this.$store.commit('account/setBanned', false)
+  },
   methods: {
     async onSubmit (valid) {
       if (!valid) {
@@ -77,9 +78,9 @@ export default {
       await this.$store.dispatch('auth/checkEmail', {email: this.form.email})
 
       if(!this.existingEmail) {
-        this.$router.push('/register')
+        this.$emit('register')
       } else {
-        this.$router.push('/login')
+        this.$emit('login')
       }
 
       this.loading = false

view/javascript/d_pax/pages/check.vue renamed to view/javascript/d_pax/components/check.vue

@@ -56,7 +56,6 @@
 <script>
 import {mapGetters} from 'vuex'
 export default {
-  layout: 'auth',
   middleware: ['authenticated', 'notConfirmed'],
   data() {
     return {
@@ -71,14 +70,12 @@ export default {
   methods: {
     handleLogout() {
       this.$store.dispatch('auth/logout')
-      this.$router.push('/check')
+      this.$store.commit('auth/toggleShowLogin')
     },
     async handleRefresh() {
       this.refreshLoading = true
       await this.$store.dispatch('account/load')
-      if(this.account.confirmed) {
-        this.$router.push('/')
-      }
+
       this.refreshLoading = false
     },
     async handleResend() {
@@ -98,7 +95,11 @@ export default {
 </i18n>
 <style lang="scss">
   .confirm-page {
-    margin-top: 60px;
+    border-radius: 3px;
+    border: 1px solid #d9d9d9;
+    background-color: #ffffff;
+    padding: 50px 55px;
+    margin-bottom: 60px;
     &__button_logout {
       display: block;
       cursor: pointer;
@@ -125,12 +126,11 @@ export default {
       text-align: center;
     }
     &__banner {
-      background-color: #f9f9f9;
-      padding: 50px;
       margin-bottom: 40px;
       &_image {
         padding: 0 40px;
         margin-bottom: 20px;
+        text-align: center;
         img {
           width: 100;
           max-width: 100%;

view/javascript/d_pax/pages/confirm.vue renamed to view/javascript/d_pax/components/confirm.vue

@@ -53,7 +53,6 @@ export default {
       this.$store.commit('apps/setEdit', false)
     },
     async onSubmit(valid) {
-      console.log(valid)
       if (valid) {
         await this.$store.dispatch('apps/edit', {key: this.id, app: {
           eventUrl: this.form.eventUrl,

view/javascript/d_pax/components/editApp.vue

@@ -11,9 +11,9 @@
           </b-col>
           <b-col>
             <b-navbar-nav class="align-items-center vf-header__right_nav">
-              <header-activation v-if="cms.builds.length > 0 && information.apache" />
+              <header-activation v-if="isLogged && cms.builds.length > 0 && information.apache" />
               <b-button
-                v-if="cms.builds.length > 0 && !information.apache"
+                v-if="isLogged && cms.builds.length > 0 && !information.apache"
                 class="vf-header__button_activate"
                 variant="success"
                 @click="$scrollTo('#vf-nginx-configure')"
@@ -42,6 +42,7 @@ export default {
 
   computed: {
     ...mapGetters({
+      isLogged: "auth/isLogged",
       cms: 'cms/get',
       information: 'information/get'
     })

view/javascript/d_pax/components/header.vue

@@ -1,9 +1,11 @@
 <template>
   <div
+    v-if="isLogged"
     id="vf-header-account"
     class="header-account"
   >
     <b-nav-item-dropdown
+
       toggle-class="text-decoration-none text-1 m-0 font-weight-semibold"
       no-caret
       text
@@ -69,7 +71,8 @@ export default {
   },
   computed: {
     ...mapGetters({
-      account: 'account/get'
+      account: 'account/get',
+      isLogged: "auth/isLogged"
     }),
     faAngleDown () {
       return faAngleDown
@@ -85,7 +88,6 @@ export default {
   methods: {
     async logout () {
       await this.$store.dispatch('auth/logout')
-      this.$router.push('/check')
     }
   }
 }
@@ -99,7 +101,13 @@ export default {
     border: solid 1px $white-five;
     background-color: $white;
     padding: 13px 17px;
-
+    .header-account__sign-in {
+      list-style: none;
+      a {
+        font-weight: 600;
+        color: black;
+      }
+    }
     .header-account__separator {
       border-top: 1px solid $white-eight;
       margin-top: 0;

view/javascript/d_pax/components/header/Account.vue

@@ -1,14 +1,20 @@
 <template>
   <div class="vf-information">
-    <div class="vf-information__item">
+    <div
+      v-if="isLogged"
+      class="vf-information__item"
+    >
       <div class="vf-information__item_title">
         {{ $t('textAccount') }}
       </div>
       <div class="vf-information__item_value">
-        {{ $t('textFree') }}
+        {{ !account.subscribe ? $t('textFree') : $t('textSubscribe') }}
       </div>
     </div>
-    <div class="vf-information__item">
+    <div
+      v-if="isLogged"
+      class="vf-information__item"
+    >
       <div class="vf-information__item_title">
         {{ $t('textBuildMin') }}
       </div>
@@ -58,7 +64,7 @@
 import {mapGetters} from 'vuex'
 export default {
   computed: {
-    ...mapGetters({information: 'information/get', cms: 'cms/get', account: 'account/get'}),
+    ...mapGetters({isLogged: "auth/isLogged", information: 'information/get', cms: 'cms/get', account: 'account/get'}),
     totalUsaged () {
       return Math.floor(this.$moment.duration(this.account.times, 'milliseconds').asMinutes())
     },
@@ -72,6 +78,7 @@ export default {
 {
   "textAccount": "Account",
   "textFree": "Free",
+  "textSubscribe": "Subscription",
   "textPluginVersion": "Plugin version",
   "textPHPVersion": "PHP",
   "textServer": "Server",

view/javascript/d_pax/components/information.vue

@@ -67,7 +67,6 @@
 <script>
 import {mapGetters} from 'vuex'
 export default {
-  layout: 'auth',
   middleware: ['notAuthenticated', 'withEmail'],
   data() {
     return {
@@ -87,7 +86,8 @@ export default {
   methods: {
     handleLogout() {
       this.$store.dispatch('auth/logout')
-      this.$router.push('/check')
+      this.$emit('check')
+      // this.$router.push('/check')
     },
     async onSubmit (valid) {
       if (!valid) {
@@ -101,15 +101,19 @@ export default {
 
         await this.$store.dispatch('cms/list')
         const id = await this.$store.dispatch('cms/search')
-        if(id) {
-          await this.$store.dispatch('cms/load', {id})
+        if (this.$store.getters['cms/alien']) {
+          this.$store.commit('auth/toggleShowLogin')
+        } else {
+          if(id) {
+            await this.$store.dispatch('cms/load', {id})
+          }
+          this.$store.commit('auth/toggleShowLogin')
         }
-
-        this.$router.push('/')
       } else {
         if (this.error == 'email_banned') {
           this.$store.commit('account/setBanned', true)
-          this.$router.push('/banned')
+          this.$store.commit('setResponseError', false)
+          this.$store.commit('auth/toggleShowLogin')
         }
       }
 

view/javascript/d_pax/pages/login.vue renamed to view/javascript/d_pax/components/login.vue

@@ -111,8 +111,6 @@
 <script>
 import { mapGetters } from "vuex";
 export default {
-  layout: 'auth',
-  middleware: ['notAuthenticated', 'withEmail'],
   data() {
     return {
       form: {
@@ -132,7 +130,7 @@ export default {
   methods: {
     handleLogout() {
       this.$store.dispatch('auth/logout')
-      this.$router.push('/check')
+      this.$emit('check')
     },
     async onSubmit (valid) {
       if (!valid) {
@@ -143,10 +141,9 @@ export default {
       await this.$store.dispatch("auth/register", {email: this.form.email, password: this.form.password, firstName: this.form.firstName, lastName: this.form.lastName})
 
       if(!this.error) {
-        this.$router.push('/')
+        this.$store.commit('auth/toggleShowLogin')
       }
 
-
       this.loading = false
     }
   }