新增 401、cardAction頁面

resources/js/src/navigation/vertical/index.js

@@ -15,6 +15,12 @@ export default [
     icon: 'FileIcon',
     group: 'basic',
   },
+  {
+    title: 'Card Action',
+    route: 'card-action',
+    icon: 'CreditCardIcon',
+    group: 'basic',
+  },
   {
     header: '管理功能',
     group: 'management',

resources/js/src/router/index.js

@@ -43,6 +43,21 @@ const router = new VueRouter({
         ],
       },
     },
+    {
+      path: '/card-action',
+      name: 'card-action',
+      component: () => import('@/views/CardAction.vue'),
+      meta: {
+        pageTitle: 'Card Action',
+        group: 'basic',
+        breadcrumb: [
+          {
+            text: 'Card Action',
+            active: true,
+          },
+        ],
+      },
+    },
     {
       path: '/permission',
       name: 'permission',
@@ -74,6 +89,14 @@ const router = new VueRouter({
         layout: 'full',
       },
     },
+    {
+      path: '/error-401',
+      name: 'error-401',
+      component: () => import('@/views/error/NotAuthorized.vue'),
+      meta: {
+        layout: 'full',
+      },
+    },
     {
       path: '*',
       redirect: 'error-404',
@@ -88,7 +111,7 @@ router.beforeEach((to, from, next) => {
     if (haveAbility(to)) {
       next()
     } else {
-      next({ path: '/error-404' })
+      next({ path: '/error-401' })
     }
     next()
   } else {

resources/js/src/views/CardAction.vue

@@ -0,0 +1,132 @@
+<template>
+  <section id="card-actions">
+    <b-row>
+
+      <!-- card actions -->
+      <b-col cols="12">
+        <b-card-actions
+          ref="cardAction"
+          title="Card Actions"
+          @refresh="refreshStop('cardAction')"
+        >
+          <b-row>
+            <b-col cols="12">
+              <b-table
+                responsive
+                :items="items"
+                bordered
+              >
+                <template
+                  #cell(ICON)="data"
+                  class="text-center"
+                >
+                  <div class="text-center">
+                    <feather-icon :icon="data.value" />
+                  </div>
+                </template>
+              </b-table>
+            </b-col>
+          </b-row>
+        </b-card-actions>
+      </b-col>
+
+      <!-- card collapsible  -->
+      <b-col md="6">
+        <b-card-actions
+          title="Collapsible"
+          action-collapse
+        >
+          <b-card-text>
+            <span>You can create a collapsible content by adding </span>
+            <code>actionCollapse</code>
+            <span> prop in </span>
+            <code>&lt;b-card-actions&gt;</code>
+          </b-card-text>
+          <b-card-text>
+            <span>Click on </span>
+            <feather-icon icon="ChevronDownIcon" />
+            <span> to see card collapse in action.</span>
+          </b-card-text>
+        </b-card-actions>
+      </b-col>
+
+      <!-- card refresh -->
+      <b-col md="6">
+        <b-card-actions
+          ref="refreshCard"
+          title="Refresh Content"
+          action-refresh
+          @refresh="refreshStop('refreshCard')"
+        >
+          <b-card-text>
+            To create a card with refresh action use <code>actionRefresh</code> prop along with
+            <code>&lt;b-card-actions&gt;</code>
+          </b-card-text>
+          <b-card-text>
+            <span>Click on </span>
+            <feather-icon icon="RotateCwIcon" />
+            <span> icon to see refresh card content in action.</span>
+          </b-card-text>
+        </b-card-actions>
+      </b-col>
+
+      <!-- card remove -->
+      <b-col md="6">
+        <b-card-actions
+          title="Remove Card"
+          action-close
+        >
+          <b-card-text>
+            You can create a closeable card by using <code>actionClose</code> prop along with
+            <code>&lt;b-card-actions&gt;</code>
+          </b-card-text>
+          <b-card-text>
+            <span>Click on </span>
+            <feather-icon icon="XIcon" />
+            <span> icon to see closeable card in action.</span>
+          </b-card-text>
+        </b-card-actions>
+      </b-col>
+    </b-row>
+  </section>
+</template>
+
+<script>
+import BCardActions from '@core/components/b-card-actions/BCardActions.vue'
+import {
+  BRow, BCol, BTable, BCardText,
+} from 'bootstrap-vue'
+
+export default {
+  components: {
+    BCardActions,
+    BRow,
+    BCol,
+    BTable,
+    BCardText,
+  },
+  data() {
+    return {
+      fields: [
+        'ACTION',
+        { key: 'ICON', label: 'ICON' },
+        'DETAILS',
+      ],
+      items: [
+        { ACTION: 'Collapse', ICON: 'ChevronDownIcon', DETAILS: 'Collapse card content using collapse action.' },
+        { ACTION: 'Refresh Content', ICON: 'RotateCwIcon', DETAILS: 'Refresh your card content using refresh action.' },
+        { ACTION: 'Remove Card', ICON: 'XIcon', DETAILS: 'Remove card from page using remove card action' },
+      ],
+    }
+  },
+  methods: {
+
+    // stop refreshing card in 3 sec
+    refreshStop(cardName) {
+      setTimeout(() => {
+        this.$refs[cardName].showLoading = false
+      }, 3000)
+    },
+  },
+}
+</script>

resources/js/src/views/Login.vue

@@ -125,7 +125,7 @@ import { togglePasswordVisibility } from '@core/mixins/ui/forms'
 import store from '@/store/index'
 import ToastificationContent from '@core/components/toastification/ToastificationContent.vue'
 import useJwt from '@/auth/jwt/useJwt'
-import { getExistingAbility, getAbility } from '../libs/acl/ability'
+import { getExistingAbility } from '../libs/acl/ability'
 
 export default {
   components: {

resources/js/src/views/error/NotAuthorized.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="misc-wrapper">
+    <b-link class="brand-logo">
+      <vuexy-logo />
+      <h2 class="brand-text text-primary ml-1">
+        Vuexy
+      </h2>
+    </b-link>
+
+    <div class="misc-inner p-2 p-sm-3">
+      <div class="w-100 text-center">
+        <h2 class="mb-1">
+          You are not authorized! 🔐
+        </h2>
+        <p class="mb-2">
+          You don’t have permission to access this page. Go Home!!
+        </p>
+        <b-button
+          variant="primary"
+          class="mb-1 btn-sm-block"
+          :to="{path:'/'}"
+        >Back to Home</b-button>
+        <b-img
+          fluid
+          :src="imgUrl"
+          alt="Not authorized page"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+/* eslint-disable global-require */
+import { BLink, BImg, BButton } from 'bootstrap-vue'
+import VuexyLogo from '@core/layouts/components/Logo.vue'
+import store from '@/store/index'
+import { getHomeRouteForLoggedInUser } from '@/auth/utils'
+
+export default {
+  components: {
+    BLink,
+    BImg,
+    BButton,
+    VuexyLogo,
+  },
+  data() {
+    return {
+      downImg: require('@/assets/images/pages/not-authorized.svg'),
+    }
+  },
+  computed: {
+    imgUrl() {
+      if (store.state.appConfig.layout.skin === 'dark') {
+        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+        this.downImg = require('@/assets/images/pages/not-authorized-dark.svg')
+        return this.downImg
+      }
+      return this.downImg
+    },
+  },
+  methods: {
+    loginRoute() {
+      const user = JSON.parse(localStorage.getItem('userData'))
+      return getHomeRouteForLoggedInUser(user ? user.role : null)
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+@import '~@resources/scss/vue/pages/page-misc.scss';
+</style>