reduce resource size of home page

app/Http/View/Composers/FootComposer.php

@@ -62,7 +62,7 @@ class FootComposer
                 'async' => true,
                 'defer' => true,
             ];
-        } else {
+        } elseif (!$this->request->is('/')) {
             $scripts[] = [
                 'src' => 'https://cdn.jsdelivr.net/npm/react@16.13.1/umd/react.production.min.js',
                 'integrity' => 'sha256-yUhvEmYVhZ/GGshIQKArLvySDSh6cdmdcIx0spR3UP4=',
@@ -79,9 +79,15 @@ class FootComposer
             'integrity' => 'sha256-lEpMZPtZ0RgHYZFOcJeX94WMegvHJ+beF5V7XtCcWxY=',
             'crossorigin' => 'anonymous',
         ];
-        $scripts[] = [
-            'src' => $this->webpack->url('app.js'),
-        ];
+        if ($this->request->is('/')) {
+            $scripts[] = [
+                'src' => $this->webpack->url('home.js'),
+            ];
+        } else {
+            $scripts[] = [
+                'src' => $this->webpack->url('app.js'),
+            ];
+        }
 
         $view->with([
             'scripts' => $scripts,

resources/assets/src/scripts/home-page.ts

@@ -1,4 +1,6 @@
-function handler() {
+import '@/styles/home.css'
+
+export function scrollHander() {
   const header = document.querySelector('.navbar')
   /* istanbul ignore else */
   if (header) {
@@ -12,9 +14,24 @@ function handler() {
   }
 }
 
-/* istanbul ignore next */
-if (blessing.extra.transparent_navbar) {
-  window.addEventListener('load', handler)
+export async function logout() {
+  await fetch(`${blessing.base_url}/auth/logout`, {
+    method: 'POST',
+    credentials: 'same-origin',
+    headers: {
+      'X-CSRF-TOKEN': document.querySelector<HTMLMetaElement>(
+        'meta[name="csrf-token"]',
+      )!.content,
+    },
+  })
+  window.location.href = blessing.base_url
 }
 
-export default handler
+/* istanbul ignore next */
+if (blessing.extra.transparent_navbar) {
+  window.addEventListener('load', scrollHander)
+}
+/* istanbul ignore next */
+document
+  .querySelector<HTMLButtonElement>('#btn-logout')
+  ?.addEventListener('click', logout)

resources/assets/src/scripts/route.tsx

@@ -1,10 +1,6 @@
 import React from 'react'
 
 export default [
-  {
-    path: '/',
-    module: [() => import('./home-page')],
-  },
   {
     path: 'user',
     react: () => import('../views/user/Dashboard'),

resources/assets/tests/scripts/home-page.test.ts

@@ -1,25 +1,47 @@
-import handler from '@/scripts/home-page'
+import { scrollHander, logout } from '@/scripts/home-page'
 
-window.blessing.extra = {
-  transparent_navbar: false,
-}
+test('logout', async () => {
+  const meta = document.createElement('meta')
+  meta.name = 'csrf-token'
+  meta.content = 'token'
+  document.head.appendChild(meta)
 
-test('should be transparent at top', () => {
-  Object.assign(window, { innerHeight: 900 })
-  document.body.innerHTML = '<nav class="navbar"></nav>'
-  handler()
-  window.dispatchEvent(new Event('scroll'))
-  expect(
-    document.querySelector('nav')!.classList.contains('transparent'),
-  ).toBeTrue()
+  window.fetch = jest.fn()
+
+  await logout()
+  expect(window.fetch).toBeCalledWith('/auth/logout', {
+    method: 'POST',
+    credentials: 'same-origin',
+    headers: {
+      'X-CSRF-TOKEN': 'token',
+    },
+  })
 })
 
-test('should not be transparent at bottom', () => {
-  Object.assign(window, { innerHeight: 900, scrollY: 800 })
-  document.body.innerHTML = '<nav class="navbar transparent"></nav>'
-  handler()
-  window.dispatchEvent(new Event('scroll'))
-  expect(
-    document.querySelector('nav')!.classList.contains('transparent'),
-  ).toBeFalse()
+describe('scroll handler', () => {
+  beforeAll(() => {
+    window.blessing.extra = {
+      transparent_navbar: false,
+    }
+  })
+
+  it('should be transparent at top', () => {
+    Object.assign(window, { innerHeight: 900 })
+    document.body.innerHTML = '<nav class="navbar"></nav>'
+    scrollHander()
+    window.dispatchEvent(new Event('scroll'))
+    expect(
+      document.querySelector('nav')!.classList.contains('transparent'),
+    ).toBeTrue()
+  })
+
+  it('should not be transparent at bottom', () => {
+    Object.assign(window, { innerHeight: 900, scrollY: 800 })
+    document.body.innerHTML = '<nav class="navbar transparent"></nav>'
+    scrollHander()
+    window.dispatchEvent(new Event('scroll'))
+    expect(
+      document.querySelector('nav')!.classList.contains('transparent'),
+    ).toBeFalse()
+  })
 })

resources/views/home.twig

@@ -132,6 +132,26 @@
       </div>
     {% endif %}
 
+    <div id="modal-logout" class="modal fade" tabindex="-1" role="dialog">
+      <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">{{ trans('general.notice') }}</h5>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body">
+            <p>{{ trans('front-end.general.confirmLogout') }}</p>
+          </div>
+          <div class="modal-footer">
+            <button class="btn btn-secondary" data-dismiss="modal">{{ trans('general.cancel') }}</button>
+            <button class="btn btn-primary" id="btn-logout">{{ trans('front-end.general.confirm') }}</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
     {% if home_page_css_loader %}
       <script src="{{ home_page_css_loader }}"></script>
     {% endif %}

resources/views/shared/user-menu.twig

@@ -31,7 +31,7 @@
       {% endif %}
       <div class="dropdown-divider"></div>
     {% endif %}
-    <a class="dropdown-item" href="#" id="logout-button">
+    <a class="dropdown-item" href="#" id="logout-button" data-toggle="modal" data-target="#modal-logout">
       {{ trans('general.logout') }}
     </a>
   </div>

webpack.config.js

@@ -13,7 +13,7 @@ const config = {
     app: ['react-hot-loader/patch', '@/index.tsx'],
     sw: '@/scripts/sw.ts',
     style: ['@/styles/common.css'],
-    home: '@/styles/home.css',
+    home: '@/scripts/home-page.ts',
     spectre: [
       'spectre.css/dist/spectre.min.css',
       '@/fonts/minecraft.css',