Show footer and header in all guest pages

kutaloweb · Aug 5, 2018 · 91b799f · 91b799f
1 parent 5764b02
commit 91b799f
Show file tree

Hide file tree

Showing 18 changed files with 117 additions and 122 deletions.
diff --git a/resources/assets/js/custom.js b/resources/assets/js/custom.js
@@ -51,7 +51,7 @@ $(function () {
             $('.navbar-brand span').hide();
         }
     });
-    $(".fix-header .topbar").stick_in_parent();
+
     $(document).on('click', ".nav-toggler", function () {
         $("body").toggleClass("show-sidebar");
     });

diff --git a/resources/assets/js/layouts/DefaultPage.vue b/resources/assets/js/layouts/DefaultPage.vue
@@ -26,7 +26,6 @@
         mounted() {
             helper.notification();
             $('body').addClass("card-no-border").trigger("resize");
-            $(".fix-header .topbar").stick_in_parent();
             $(".scroll-sidebar, .slimScrollDiv").css("overflow-x", "visible").parent().css("overflow", "visible");
             $('#sidebarnav').metisMenu();
             $('.scroll-sidebar').slimScroll({

diff --git a/resources/assets/js/layouts/GuestFooter.vue b/resources/assets/js/layouts/GuestFooter.vue
@@ -1,9 +1,7 @@
 <template>
-    <div>
-        <p class="text-center">
-            <small>{{ getConfig('footer_credit') }}</small>
-        </p>
-    </div>
+    <footer class="footer d-print-none text-center" style="left:0">
+        {{ getConfig('footer_credit') }}
+    </footer>
 </template>
 
 <script>
@@ -14,4 +12,4 @@
             }
         }
     }
-</script>
+</script>
diff --git a/resources/assets/js/layouts/GuestPage.vue b/resources/assets/js/layouts/GuestPage.vue
@@ -1,11 +1,25 @@
 <template>
-    <div>
-        <router-view></router-view>
+    <div id="main-wrapper">
+        <app-header :toggle="false"></app-header>
+        <div class="page-wrapper" style="margin-left:0">
+            <router-view></router-view>
+            <app-footer></app-footer>
+        </div>
     </div>
 </template>
 
 <script>
+    import AppHeader from './Header'
+    import AppFooter from './GuestFooter'
+
     export default {
+        data() {
+            return {}
+        },
+        components: {
+            AppHeader,
+            AppFooter
+        },
         mounted() {
             helper.notification();
         }

diff --git a/resources/assets/js/layouts/Header.vue b/resources/assets/js/layouts/Header.vue
@@ -1,33 +1,37 @@
 <template>
-    <header class="topbar">
+    <header class="topbar is_stuck" style="position:fixed;top:0;width:100%">
         <nav class="navbar top-navbar navbar-expand-md navbar-light">
             <div class="navbar-collapse">
-                <ul class="navbar-nav mt-md-0">
+                <ul class="nav navbar-nav navbar-logo mr-auto">
                     <li class="nav-item">
-                        <a class="nav-link nav-toggler hidden-md-up text-muted waves-effect waves-dark"
-                           href="javascript:void(0)">
-                            <i class="fas fa-bars"></i>
+                        <router-link class="nav-link nav-brand waves-effect waves-dark" to="/">
+                            <img :src="getLogo()" alt="Logo" class="logo mr-2">
+                            <b>{{ getConfig('company_name') }}</b>
+                        </router-link>
+                    </li>
+                    <li v-if="toggle" class="nav-item">
+                        <a class="nav-link nav-toggler hidden-md-up text-muted waves-effect waves-dark">
+                            <i class="fas fa-bars fa-fw"></i>
                         </a>
                     </li>
-                    <li class="nav-item">
-                        <a class="nav-link sidebartoggler hidden-sm-down text-muted" href="javascript:void(0)">
+                    <li v-if="toggle" class="nav-item">
+                        <a class="nav-link nav-toggler sidebartoggler hidden-sm-down text-muted waves-effect waves-dark">
                             <i class="fas fa-bars fa-fw"></i>
                         </a>
                     </li>
                 </ul>
-                <ul class="nav navbar-nav navbar-logo mr-auto">
+                <ul v-if="isAuth()" class="navbar-nav mr-0 my-lg-0">
                     <li class="nav-item">
-                        <router-link class="nav-link nav-brand" to="/">
-                            <img :src="getLogo()" alt="Logo" class="logo mr-2">
-                            <b>{{ getConfig('company_name') }}</b>
+                    </li>
+                    <li class="nav-item">
+                        <router-link class="nav-link text-muted waves-effect waves-dark" :to="'/home'">
+                            <i class="fas fa-home fa-fw"></i>
                         </router-link>
                     </li>
-                </ul>
-                <ul class="navbar-nav mr-0 my-lg-0">
                     <li class="nav-item dropdown">
                         <a class="nav-link dropdown-toggle text-muted waves-effect waves-dark" href=""
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                            {{ getAuthUser('full_name') }}
+                            <span class="username">{{ getAuthUser('full_name') }}</span>
                             <img :src="getAuthUser('avatar')" alt="Avatar" class="profile-pic ml-2">
                         </a>
                         <div class="dropdown-menu dropdown-menu-right">
@@ -77,6 +81,11 @@
     import {EventBus} from '../event-bus'
 
     export default {
+        props: {
+            toggle: {
+                default: true
+            }
+        },
         created() {
             EventBus.$on("config::set", () => {
                 this.$forceUpdate();
@@ -99,6 +108,9 @@
             getAuthUser(name) {
                 return helper.getAuthUser(name);
             },
+            isAuth() {
+                return helper.isAuth();
+            },
             getConfig(name) {
                 return helper.getConfig(name);
             }

diff --git a/resources/assets/js/routes.js b/resources/assets/js/routes.js
@@ -7,19 +7,25 @@ let appName = helper.getConfig('company_name');
 let routes = [
     {
         path: '/',
-        component: require('./views/auth/Login.vue'),
-        meta: {title: appName}
+        component: require('./layouts/GuestPage.vue'),
+        children: [
+            {
+                path: '/',
+                component: require('./views/auth/Login.vue'),
+                meta: {title: appName}
+            },
+            {
+                path: '/login',
+                component: require('./views/auth/Login.vue'),
+                meta: {title: appName}
+            }
+        ]
     },
     {
         path: '/',
         component: require('./layouts/GuestPage.vue'),
         meta: {validate: ['guest']},
         children: [
-            {
-                path: '/login',
-                component: require('./views/auth/Login.vue'),
-                meta: {title: appName + ' | ' + i18n.auth.login}
-            },
             {
                 path: '/password',
                 component: require('./views/auth/Password.vue'),
@@ -213,9 +219,15 @@ let routes = [
         ]
     },
     {
-        path: '/:category/:slug',
-        component: require('./views/post/View.vue'),
-        meta: {title: appName}
+        path: '/',
+        component: require('./layouts/GuestPage.vue'),
+        children: [
+            {
+                path: '/:category/:slug',
+                component: require('./views/post/View.vue'),
+                meta: {title: appName}
+            }
+        ]
     },
     {
         path: '*',

diff --git a/resources/assets/js/views/auth/Activate.vue b/resources/assets/js/views/auth/Activate.vue
@@ -17,15 +17,12 @@
                         </div>
                     </div>
                 </div>
-                <guest-footer></guest-footer>
             </div>
         </div>
     </section>
 </template>
 
 <script>
-    import guestFooter from '../../layouts/GuestFooter'
-
     export default {
         data() {
             return {
@@ -34,9 +31,6 @@
                 status: true
             }
         },
-        components: {
-            guestFooter
-        },
         computed: {
             getBackground() {
                 if (helper.getConfig('background')) {

diff --git a/resources/assets/js/views/auth/Lock.vue b/resources/assets/js/views/auth/Lock.vue
@@ -32,19 +32,13 @@
                         </div>
                     </form>
                 </div>
-                <guest-footer></guest-footer>
             </div>
         </div>
     </section>
 </template>
 
 <script>
-    import guestFooter from '../../layouts/GuestFooter'
-
     export default {
-        components: {
-            guestFooter
-        },
         data() {
             return {
                 lockScreenForm: new Form({

diff --git a/resources/assets/js/views/auth/Login.vue b/resources/assets/js/views/auth/Login.vue
@@ -40,32 +40,28 @@
                         </div>
                     </form>
                 </div>
-                <guest-footer></guest-footer>
             </div>
         </div>
-        <div class="page-wrapper" style="margin-left:0">
-            <div class="container-fluid">
-                <div class="row" v-for="items in splitted">
-                    <div class="col-12 m-t-20 m-b-20">
-                        <div class="card-deck">
-                            <post-card v-for="post in items" :post="post" :key="post.id"></post-card>
-                        </div>
+        <div class="container-fluid">
+            <div class="row" v-for="items in splitted">
+                <div class="col-12 m-t-20 m-b-20">
+                    <div class="card-deck">
+                        <post-card v-for="post in items" :post="post" :key="post.id"></post-card>
                     </div>
                 </div>
-                <pagination-record
-                        :page-length.sync="filterPostForm.page_length"
-                        :records="posts"
-                        :show-page-length="false"
-                        @updateRecords="getPosts"
-                        @change.native="getPosts">
-                </pagination-record>
             </div>
+            <pagination-record
+                    :page-length.sync="filterPostForm.page_length"
+                    :records="posts"
+                    :show-page-length="false"
+                    @updateRecords="getPosts"
+                    @change.native="getPosts">
+            </pagination-record>
         </div>
     </section>
 </template>
 
 <script>
-    import guestFooter from '../../layouts/GuestFooter'
     import postCard from '../post/PostCard'
 
     export default {
@@ -86,7 +82,6 @@
             }
         },
         components: {
-            guestFooter,
             postCard
         },
         computed: {
@@ -109,7 +104,6 @@
                         axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('auth_token');
                         this.$store.dispatch('setAuthStatus');
                         this.$store.dispatch('setLastActivity');
-                        toastr.success(response.message);
                         if (helper.getConfig('two_factor_security') && response.two_factor_code) {
                             this.$store.dispatch('setTwoFactorCode', response.two_factor_code);
                             this.$router.push('/auth/security');

diff --git a/resources/assets/js/views/auth/Password.vue b/resources/assets/js/views/auth/Password.vue
@@ -29,15 +29,12 @@
                         </div>
                     </form>
                 </div>
-                <guest-footer></guest-footer>
             </div>
         </div>
     </section>
 </template>
 
 <script>
-    import guestFooter from '../../layouts/GuestFooter'
-
     export default {
         data() {
             return {
@@ -46,9 +43,6 @@
                 })
             }
         },
-        components: {
-            guestFooter
-        },
         mounted() {
             if (!helper.featureAvailable('reset_password')) {
                 helper.featureNotAvailableMsg();

diff --git a/resources/assets/js/views/auth/Register.vue b/resources/assets/js/views/auth/Register.vue
@@ -63,15 +63,12 @@
                         </div>
                     </form>
                 </div>
-                <guest-footer></guest-footer>
             </div>
         </div>
     </section>
 </template>
 
 <script>
-    import guestFooter from '../../layouts/GuestFooter'
-
     export default {
         data() {
             return {
@@ -84,9 +81,6 @@
                 })
             }
         },
-        components: {
-            guestFooter
-        },
         mounted() {
             if (!helper.featureAvailable('registration')) {
                 helper.featureNotAvailableMsg();

diff --git a/resources/assets/js/views/auth/Reset.vue b/resources/assets/js/views/auth/Reset.vue
@@ -45,15 +45,12 @@
                         </div>
                     </div>
                 </div>
-                <guest-footer></guest-footer>
             </div>
         </div>
     </section>
 </template>
 
 <script>
-    import guestFooter from '../../layouts/GuestFooter'
-
     export default {
         data() {
             return {
@@ -68,9 +65,6 @@
                 showMessage: false
             }
         },
-        components: {
-            guestFooter
-        },
         mounted() {
             if (!helper.featureAvailable('reset_password')) {
                 helper.featureNotAvailableMsg();

diff --git a/resources/assets/js/views/auth/Security.vue b/resources/assets/js/views/auth/Security.vue
@@ -34,19 +34,13 @@
                         </div>
                     </form>
                 </div>
-                <guest-footer></guest-footer>
             </div>
         </div>
     </section>
 </template>
 
 <script>
-    import guestFooter from '../../layouts/GuestFooter'
-
     export default {
-        components: {
-            guestFooter
-        },
         data() {
             return {
                 twoFactorForm: new Form({