├── .gitignore
├── LICENSE
├── README.md
├── babel.config.js
├── netlify.toml
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   └── css
    │   │   └── tailwind.css
    ├── components
    │   ├── AuthUser.vue
    │   ├── AuthUserForm.vue
    │   ├── BaseBtn.vue
    │   ├── BaseInput.vue
    │   ├── BasePagination.vue
    │   ├── FileUpload.vue
    │   ├── FlashMessage.vue
    │   ├── Header.vue
    │   ├── LoginForm.vue
    │   ├── Logout.vue
    │   ├── MessageForm.vue
    │   ├── Messages.vue
    │   ├── RegisterForm.vue
    │   ├── UpdatePassword.vue
    │   ├── VerifyEmail.vue
    │   └── icons
    │   │   ├── AvatarIcon.vue
    │   │   ├── HomeIcon.vue
    │   │   ├── LoginIcon.vue
    │   │   ├── LogoutIcon.vue
    │   │   └── MailIcon.vue
    ├── main.js
    ├── middleware
    │   ├── admin.js
    │   ├── auth.js
    │   └── guest.js
    ├── router
    │   ├── index.js
    │   └── middlewarePipeline.js
    ├── services
    │   ├── API.js
    │   ├── AuthService.js
    │   ├── FileService.js
    │   ├── MessageService.js
    │   └── UserService.js
    ├── store
    │   ├── index.js
    │   └── modules
    │   │   ├── Auth.js
    │   │   ├── Message.js
    │   │   └── User.js
    ├── utils
    │   └── helpers.js
    └── views
    │   ├── Dashboard.vue
    │   ├── ForgotPassword.vue
    │   ├── Home.vue
    │   ├── Login.vue
    │   ├── NotFound.vue
    │   ├── Register.vue
    │   ├── ResetPassword.vue
    │   ├── User.vue
    │   └── Users.vue
└── tailwind.config.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Gareth Redfern
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Laravel Vue SPA Using Sanctum & Fortify Authentication
 2 | 
 3 | ## Documentation
 4 | 
 5 | The full documentation for this demo app can be found at [Build a Laravel Vue Spa](https://laravelvuespa.com/).
 6 | 
 7 | ## Project setup
 8 | ```
 9 | npm install
10 | ```
11 | 
12 | **IMPORTANT** make sure you have a .env.local file with your API URL added
13 | ```
14 | VUE_APP_API_URL=http://localhost
15 | ```
16 | 
17 | ### Compiles and hot-reloads for development
18 | ```
19 | npm run serve
20 | ```
21 | 
22 | ### Compiles and minifies for production
23 | ```
24 | npm run build
25 | ```
26 | 
27 | ### Lints and fixes files
28 | ```
29 | npm run lint
30 | ```
31 | 
32 | ### Customize configuration
33 | See [Configuration Reference](https://cli.vuejs.org/config/).
34 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: ["@vue/cli-plugin-babel/preset"],
3 | };
4 | 


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [build]
2 |   publish = "dist"
3 |   command = "npm run build"
4 | [[redirects]]
5 |   from = "/*"
6 |   to = "/index.html"
7 |   status = 200
8 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "laravel-vue",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "axios": "^0.21.1",
12 |     "core-js": "^3.15.2",
13 |     "vue": "^2.6.14",
14 |     "vue-router": "^3.5.2",
15 |     "vuex": "^3.6.2"
16 |   },
17 |   "devDependencies": {
18 |     "@tailwindcss/forms": "^0.2.1",
19 |     "@tailwindcss/postcss7-compat": "^2.2.4",
20 |     "@vue/cli-plugin-babel": "^4.5.10",
21 |     "@vue/cli-plugin-eslint": "^4.5.10",
22 |     "@vue/cli-plugin-router": "^4.5.10",
23 |     "@vue/cli-plugin-vuex": "^4.5.10",
24 |     "@vue/cli-service": "^4.5.10",
25 |     "@vue/eslint-config-prettier": "^6.0.0",
26 |     "autoprefixer": "^9.8.6",
27 |     "babel-eslint": "^10.1.0",
28 |     "eslint": "^7.18.0",
29 |     "eslint-plugin-prettier": "^3.4.0",
30 |     "eslint-plugin-vue": "^7.13.0",
31 |     "postcss": "^7.0.36",
32 |     "prettier": "^2.3.2",
33 |     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
34 |     "vue-template-compiler": "^2.6.14"
35 |   },
36 |   "prettier": {
37 |     "trailingComma": "es5",
38 |     "tabWidth": 2,
39 |     "semi": true,
40 |     "singleQuote": false
41 |   },
42 |   "eslintConfig": {
43 |     "root": true,
44 |     "env": {
45 |       "node": true
46 |     },
47 |     "extends": [
48 |       "plugin:vue/essential",
49 |       "eslint:recommended",
50 |       "@vue/prettier"
51 |     ],
52 |     "parserOptions": {
53 |       "parser": "babel-eslint"
54 |     },
55 |     "rules": {}
56 |   },
57 |   "browserslist": [
58 |     "> 1%",
59 |     "last 2 versions",
60 |     "not dead"
61 |   ]
62 | }
63 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | };
7 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/garethredfern/laravel-vue/16d56b9c79a9d761d65251ef0d1927d24d45b75d/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <Header />
 4 |     <main class="container mx-auto">
 5 |       <router-view />
 6 |     </main>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | import Header from "@/components/Header";
12 | 
13 | export default {
14 |   name: "app",
15 |   components: {
16 |     Header,
17 |   },
18 | };
19 | </script>
20 | 
21 | <style>
22 | @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700");
23 | 
24 | .fade-enter,
25 | .fade-leave-active {
26 |   opacity: 0;
27 | }
28 | .fade-enter-active,
29 | .fade-leave-active {
30 |   transition: opacity 0.3s ease;
31 | }
32 | </style>
33 | 


--------------------------------------------------------------------------------
/src/assets/css/tailwind.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @layer base {
 6 |   body {
 7 |     @apply bg-gray-50;
 8 |   }
 9 |   .base-link {
10 |     @apply text-blue-400;
11 |     @apply hover:text-blue-500;
12 |     @apply hover:underline;
13 |     @apply transition;
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/src/components/AuthUser.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div v-if="authUser">
 3 |     <transition name="fade">
 4 |       <img
 5 |         v-if="authUser.avatar"
 6 |         :src="authUser.avatar"
 7 |         class="w-16 h-16 rounded-full lg:w-20 lg:h-20"
 8 |         alt=""
 9 |       />
10 |     </transition>
11 |     <ul>
12 |       <li class="mb-1 font-bold">{{ authUser.name }}</li>
13 |       <li>Email: {{ authUser.email }}</li>
14 |       <li v-if="authUser.emailVerified" class="text-gray-500">
15 |         Emailed Verified
16 |       </li>
17 |     </ul>
18 |     <VerifyEmail v-if="!authUser.emailVerified" class="mt-4" />
19 |   </div>
20 | </template>
21 | 
22 | <script>
23 | import { mapGetters } from "vuex";
24 | import VerifyEmail from "@/components/VerifyEmail";
25 | 
26 | export default {
27 |   name: "AuthUser",
28 |   components: {
29 |     VerifyEmail,
30 |   },
31 |   computed: {
32 |     ...mapGetters("auth", ["authUser"]),
33 |   },
34 | };
35 | </script>
36 | 


--------------------------------------------------------------------------------
/src/components/AuthUserForm.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <form @submit.prevent="updateUser">
 3 |     <BaseInput
 4 |       type="text"
 5 |       label="Name"
 6 |       name="name"
 7 |       v-model="name"
 8 |       class="mb-2"
 9 |     />
10 |     <BaseInput
11 |       type="email"
12 |       label="Email"
13 |       name="email"
14 |       v-model="email"
15 |       autocomplete="email"
16 |       placeholder="luke@jedi.com"
17 |       class="mb-4"
18 |     />
19 |     <BaseBtn type="submit" text="Update" />
20 |     <FlashMessage :message="message" :error="error" />
21 |   </form>
22 | </template>
23 | 
24 | <script>
25 | import { mapGetters } from "vuex";
26 | import { getError } from "@/utils/helpers";
27 | import BaseBtn from "@/components/BaseBtn";
28 | import BaseInput from "@/components/BaseInput";
29 | import AuthService from "@/services/AuthService";
30 | import FlashMessage from "@/components/FlashMessage";
31 | 
32 | export default {
33 |   name: "AuthUserForm",
34 |   components: {
35 |     BaseBtn,
36 |     BaseInput,
37 |     FlashMessage,
38 |   },
39 |   data() {
40 |     return {
41 |       name: null,
42 |       email: null,
43 |       error: null,
44 |       message: null,
45 |     };
46 |   },
47 |   computed: {
48 |     ...mapGetters("auth", ["authUser"]),
49 |   },
50 |   methods: {
51 |     updateUser() {
52 |       this.error = null;
53 |       this.message = null;
54 |       const payload = {
55 |         name: this.name,
56 |         email: this.email,
57 |       };
58 |       AuthService.updateUser(payload)
59 |         .then(() => this.$store.dispatch("auth/getAuthUser"))
60 |         .then(() => (this.message = "User updated."))
61 |         .catch((error) => (this.error = getError(error)));
62 |     },
63 |   },
64 |   mounted() {
65 |     this.name = this.authUser.name;
66 |     this.email = this.authUser.email;
67 |   },
68 | };
69 | </script>
70 | 


--------------------------------------------------------------------------------
/src/components/BaseBtn.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <button
 3 |     :type="type"
 4 |     v-on="$listeners"
 5 |     class="px-2.5 py-1.5 border border-transparent text-xs rounded shadow-sm text-white bg-blue-400 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 text-center transition"
 6 |   >
 7 |     {{ text }}
 8 |   </button>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   name: "BaseBtn",
14 |   props: {
15 |     type: {
16 |       type: String,
17 |       default: "submit",
18 |     },
19 |     text: {
20 |       type: String,
21 |       default: "Submit",
22 |     },
23 |   },
24 | };
25 | </script>
26 | 


--------------------------------------------------------------------------------
/src/components/BaseInput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <label
 4 |       :for="name"
 5 |       class="text-sm text-gray-500"
 6 |       :class="{ 'sr-only': !showLabel }"
 7 |       v-if="label"
 8 |     >
 9 |       {{ label }}
10 |     </label>
11 |     <input
12 |       :id="name"
13 |       :type="type"
14 |       :value="value"
15 |       :required="required"
16 |       @input="updateValue"
17 |       :placeholder="placeholder"
18 |       :autocomplete="autocomplete"
19 |       class="block w-full px-3 py-2 placeholder-gray-400 border border-gray-300 rounded-md shadow-sm appearance-none focus:outline-none focus:ring-blue-500 focus:border-blue-500"
20 |     />
21 |   </div>
22 | </template>
23 | 
24 | <script>
25 | export default {
26 |   name: "BaseInput",
27 |   inheritAttrs: false,
28 |   props: {
29 |     name: {
30 |       type: String,
31 |       required: true,
32 |     },
33 |     label: {
34 |       type: String,
35 |       default: "",
36 |     },
37 |     value: {
38 |       type: [String, Number],
39 |     },
40 |     type: {
41 |       type: String,
42 |       default: "text",
43 |     },
44 |     showLabel: {
45 |       type: Boolean,
46 |       default: true,
47 |     },
48 |     required: {
49 |       type: Boolean,
50 |       default: false,
51 |     },
52 |     placeholder: {
53 |       type: String,
54 |       default: null,
55 |     },
56 |     autocomplete: {
57 |       type: String,
58 |       default: null,
59 |     },
60 |   },
61 |   methods: {
62 |     updateValue(event) {
63 |       return this.$emit("input", event.target.value);
64 |     },
65 |   },
66 | };
67 | </script>
68 | 


--------------------------------------------------------------------------------
/src/components/BasePagination.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div aria-label="Pagination" class="flex items-center justify-between py-4">
  3 |     <p class="text-sm text-gray-500">
  4 |       Page {{ meta.current_page }} of {{ meta.last_page }}
  5 |     </p>
  6 |     <div class="flex">
  7 |       <button
  8 |         rel="first"
  9 |         type="button"
 10 |         @click="firstPage"
 11 |         v-if="links.prev"
 12 |         class="px-2.5 py-1.5 m-1 text-sm text-pink-400 border rounded hover:text-pink-500"
 13 |       >
 14 |         First
 15 |       </button>
 16 | 
 17 |       <button
 18 |         rel="prev"
 19 |         type="button"
 20 |         @click="prevPage"
 21 |         :class="{ 'rounded-r': !links.next }"
 22 |         v-if="links.prev"
 23 |         class="px-2.5 py-1.5 m-1 text-sm text-pink-400 border rounded hover:text-pink-500"
 24 |       >
 25 |         Previous
 26 |       </button>
 27 | 
 28 |       <button
 29 |         rel="next"
 30 |         type="button"
 31 |         @click="nextPage"
 32 |         :class="{ 'rounded-l': !links.prev }"
 33 |         v-if="links.next"
 34 |         class="px-2.5 py-1.5 m-1 text-sm text-pink-400 border rounded hover:text-pink-500"
 35 |       >
 36 |         Next
 37 |       </button>
 38 | 
 39 |       <button
 40 |         rel="last"
 41 |         type="button"
 42 |         @click="lastPage"
 43 |         v-if="links.next"
 44 |         class="px-2.5 py-1.5 m-1 text-sm text-pink-400 border rounded hover:text-pink-500"
 45 |       >
 46 |         Last
 47 |       </button>
 48 |     </div>
 49 |   </div>
 50 | </template>
 51 | 
 52 | <script>
 53 | export default {
 54 |   props: {
 55 |     action: {
 56 |       type: String,
 57 |       required: true,
 58 |     },
 59 |     path: {
 60 |       type: String,
 61 |       default: null,
 62 |     },
 63 |     meta: {
 64 |       type: Object,
 65 |       required: true,
 66 |     },
 67 |     links: {
 68 |       type: Object,
 69 |       required: true,
 70 |     },
 71 |   },
 72 |   methods: {
 73 |     firstPage() {
 74 |       this.$store.dispatch(this.action, this.links.first).then(() => {
 75 |         if (this.path) {
 76 |           this.$router.push({
 77 |             path: this.path,
 78 |             query: { page: 1 },
 79 |           });
 80 |         }
 81 |       });
 82 |     },
 83 |     prevPage() {
 84 |       this.$store.dispatch(this.action, this.links.prev).then(() => {
 85 |         if (this.path) {
 86 |           this.$router.push({
 87 |             path: this.path,
 88 |             query: { page: this.meta.current_page - 1 },
 89 |           });
 90 |         }
 91 |       });
 92 |     },
 93 |     nextPage() {
 94 |       this.$store.dispatch(this.action, this.links.next).then(() => {
 95 |         if (this.path) {
 96 |           this.$router.push({
 97 |             path: this.path,
 98 |             query: { page: this.meta.current_page + 1 },
 99 |           });
100 |         }
101 |       });
102 |     },
103 |     lastPage() {
104 |       this.$store.dispatch(this.action, this.links.last).then(() => {
105 |         if (this.path) {
106 |           this.$router.push({
107 |             path: this.path,
108 |             query: { page: this.meta.last_page },
109 |           });
110 |         }
111 |       });
112 |     },
113 |   },
114 | };
115 | </script>
116 | 


--------------------------------------------------------------------------------
/src/components/FileUpload.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <form @submit.prevent="uploadFile">
 3 |     <div class="mb-4">
 4 |       <label for="file" class="sr-only">
 5 |         {{ label }}
 6 |       </label>
 7 |       <input type="file" :accept="fileTypes" @change="fileChange" id="file" />
 8 |     </div>
 9 |     <BaseBtn text="Upload" />
10 |     <FlashMessage :message="message" :error="error" />
11 |   </form>
12 | </template>
13 | 
14 | <script>
15 | import { getError } from "@/utils/helpers";
16 | import BaseBtn from "@/components/BaseBtn";
17 | import FileService from "@/services/FileService";
18 | import FlashMessage from "@/components/FlashMessage";
19 | 
20 | export default {
21 |   name: "FileUpload",
22 |   props: {
23 |     fileTypes: {
24 |       type: Array,
25 |       default: null,
26 |     },
27 |     endpoint: {
28 |       type: String,
29 |       required: true,
30 |     },
31 |     label: {
32 |       type: String,
33 |       default: "",
34 |     },
35 |   },
36 |   components: {
37 |     BaseBtn,
38 |     FlashMessage,
39 |   },
40 |   data() {
41 |     return {
42 |       file: null,
43 |       message: null,
44 |       error: null,
45 |     };
46 |   },
47 |   methods: {
48 |     clearMessage() {
49 |       this.error = null;
50 |       this.message = null;
51 |     },
52 |     fileChange(event) {
53 |       this.clearMessage();
54 |       this.file = event.target.files[0];
55 |     },
56 |     uploadFile() {
57 |       const payload = {};
58 |       const formData = new FormData();
59 |       formData.append("file", this.file);
60 |       payload.file = formData;
61 |       payload.endpoint = this.endpoint;
62 |       this.clearMessage();
63 |       FileService.uploadFile(payload)
64 |         .then(() => {
65 |           this.message = "File uploaded.";
66 |           this.$emit("fileUploaded");
67 |         })
68 |         .catch((error) => (this.error = getError(error)));
69 |     },
70 |   },
71 | };
72 | </script>
73 | 


--------------------------------------------------------------------------------
/src/components/FlashMessage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <transition-group name="fade">
 4 |       <p v-if="message" class="mt-2 text-sm text-green-500" key="message">
 5 |         {{ message }}
 6 |       </p>
 7 |       <p
 8 |         v-if="error && getType(error) === 'string'"
 9 |         key="error"
10 |         class="mt-2 text-sm text-red-500"
11 |       >
12 |         {{ error }}
13 |       </p>
14 |       <ul
15 |         v-if="getType(error) === 'object'"
16 |         class="mt-2 text-sm text-red-500"
17 |         key="error-list"
18 |       >
19 |         <li v-for="key in errorKeys" :key="key">
20 |           <b class="font-bold capitalize">{{ key | titleCase }}</b>
21 |           <ul class="ml-2">
22 |             <li v-for="(item, index) in getErrors(key)" :key="`${index}-error`">
23 |               {{ item }}
24 |             </li>
25 |           </ul>
26 |         </li>
27 |       </ul>
28 |     </transition-group>
29 |   </div>
30 | </template>
31 | 
32 | <script>
33 | export default {
34 |   name: "FlashMessage",
35 |   props: {
36 |     message: {
37 |       type: String,
38 |       default: null,
39 |     },
40 |     error: {
41 |       type: [Object, String],
42 |       default: null,
43 |     },
44 |   },
45 |   computed: {
46 |     errorKeys() {
47 |       if (!this.error || this.getType(this.error) === "string") {
48 |         return null;
49 |       }
50 |       return Object.keys(this.error);
51 |     },
52 |   },
53 |   methods: {
54 |     getErrors(key) {
55 |       return this.error[key];
56 |     },
57 |     getType(obj) {
58 |       return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
59 |     },
60 |   },
61 |   filters: {
62 |     titleCase(value) {
63 |       return value.replace("_", " ");
64 |     },
65 |   },
66 | };
67 | </script>
68 | 


--------------------------------------------------------------------------------
/src/components/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <header class="p-5 text-white bg-blue-400">
 3 |     <nav class="container flex items-center justify-between mx-auto">
 4 |       <div v-if="authUser" class="flex items-center space-x-5">
 5 |         <router-link to="/dashboard">
 6 |           <HomeIcon class="w-6 h-6 text-white" />
 7 |           <span class="sr-only">Dashboard</span>
 8 |         </router-link>
 9 |         <router-link to="/users" v-if="isAdmin">Users</router-link>
10 |       </div>
11 |       <router-link to="/" v-else>
12 |         <HomeIcon class="w-6 h-6 text-white" />
13 |       </router-link>
14 |       <div class="inline-flex items-center space-x-5" v-if="authUser">
15 |         <router-link to="/user">{{ authUser.name }}</router-link>
16 |         <Logout />
17 |       </div>
18 |       <router-link
19 |         v-else
20 |         to="/login"
21 |         class="inline-flex items-center space-x-2"
22 |       >
23 |         <span>Login</span>
24 |         <LoginIcon class="w-6 h-6 text-white" />
25 |       </router-link>
26 |     </nav>
27 |   </header>
28 | </template>
29 | 
30 | <script>
31 | import { mapGetters } from "vuex";
32 | import Logout from "@/components/Logout";
33 | import HomeIcon from "@/components/icons/HomeIcon";
34 | import LoginIcon from "@/components/icons/LoginIcon";
35 | 
36 | export default {
37 |   name: "Header",
38 |   components: {
39 |     Logout,
40 |     HomeIcon,
41 |     LoginIcon,
42 |   },
43 |   computed: {
44 |     ...mapGetters("auth", ["authUser", "isAdmin"]),
45 |   },
46 | };
47 | </script>
48 | 


--------------------------------------------------------------------------------
/src/components/LoginForm.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <form @submit.prevent="login">
 3 |     <BaseInput
 4 |       type="email"
 5 |       label="Email"
 6 |       name="email"
 7 |       v-model="email"
 8 |       autocomplete="email"
 9 |       placeholder="luke@jedi.com"
10 |       class="mb-2"
11 |     />
12 |     <BaseInput
13 |       type="password"
14 |       label="Password"
15 |       name="password"
16 |       v-model="password"
17 |       class="mb-4"
18 |     />
19 |     <div class="flex justify-between">
20 |       <BaseBtn type="submit" text="Login" />
21 |       <router-link to="/forgot-password" class="text-sm base-link">
22 |         Forgot your password?
23 |       </router-link>
24 |     </div>
25 |     <FlashMessage :error="error" />
26 |   </form>
27 | </template>
28 | 
29 | <script>
30 | import { getError } from "@/utils/helpers";
31 | import BaseBtn from "@/components/BaseBtn";
32 | import BaseInput from "@/components/BaseInput";
33 | import AuthService from "@/services/AuthService";
34 | import FlashMessage from "@/components/FlashMessage";
35 | 
36 | export default {
37 |   name: "LoginView",
38 |   components: {
39 |     BaseBtn,
40 |     BaseInput,
41 |     FlashMessage,
42 |   },
43 |   data() {
44 |     return {
45 |       email: null,
46 |       password: null,
47 |       error: null,
48 |     };
49 |   },
50 |   methods: {
51 |     async login() {
52 |       const payload = {
53 |         email: this.email,
54 |         password: this.password,
55 |       };
56 |       this.error = null;
57 |       try {
58 |         await AuthService.login(payload);
59 |         const authUser = await this.$store.dispatch("auth/getAuthUser");
60 |         if (authUser) {
61 |           this.$store.dispatch("auth/setGuest", { value: "isNotGuest" });
62 |           this.$router.push("/dashboard");
63 |         } else {
64 |           const error = Error(
65 |             "Unable to fetch user after login, check your API settings."
66 |           );
67 |           error.name = "Fetch User";
68 |           throw error;
69 |         }
70 |       } catch (error) {
71 |         this.error = getError(error);
72 |       }
73 |     },
74 |   },
75 | };
76 | </script>
77 | 


--------------------------------------------------------------------------------
/src/components/Logout.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <button
 3 |     type="button"
 4 |     @click="logout"
 5 |     class="inline-flex items-center space-x-2"
 6 |   >
 7 |     <span class="hidden sm:inline">Logout</span>
 8 |     <LogoutIcon class="w-6 h-6 text-white" />
 9 |   </button>
10 | </template>
11 | 
12 | <script>
13 | import LogoutIcon from "@/components/icons/LogoutIcon";
14 | export default {
15 |   components: { LogoutIcon },
16 |   name: "Logout",
17 |   methods: {
18 |     logout() {
19 |       this.$store.dispatch("auth/logout");
20 |     },
21 |   },
22 | };
23 | </script>
24 | 


--------------------------------------------------------------------------------
/src/components/MessageForm.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <form @submit.prevent="postMessage">
 3 |     <BaseInput
 4 |       type="message"
 5 |       label="Message"
 6 |       name="message"
 7 |       v-model="body"
 8 |       class="mb-4"
 9 |     />
10 |     <div class="flex justify-end mb-2">
11 |       <BaseBtn type="submit" text="Message" />
12 |     </div>
13 |     <FlashMessage :error="error" />
14 |   </form>
15 | </template>
16 | 
17 | <script>
18 | import { getError } from "@/utils/helpers";
19 | import BaseBtn from "@/components/BaseBtn";
20 | import BaseInput from "@/components/BaseInput";
21 | import FlashMessage from "@/components/FlashMessage";
22 | 
23 | export default {
24 |   name: "MessageForm",
25 |   components: {
26 |     BaseBtn,
27 |     BaseInput,
28 |     FlashMessage,
29 |   },
30 |   data() {
31 |     return {
32 |       body: null,
33 |       error: null,
34 |     };
35 |   },
36 |   methods: {
37 |     async postMessage() {
38 |       try {
39 |         const payload = {
40 |           body: this.body,
41 |         };
42 |         this.error = null;
43 |         await this.$store.dispatch("message/postMessage", payload);
44 |         this.body = null;
45 |       } catch (error) {
46 |         this.error = getError(error);
47 |       }
48 |     },
49 |   },
50 | };
51 | </script>
52 | 


--------------------------------------------------------------------------------
/src/components/Messages.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <transition name="fade" mode="out-in">
 4 |       <FlashMessage
 5 |         message="loading..."
 6 |         v-if="loading && !messages.length"
 7 |         key="loading"
 8 |       />
 9 |       <ul v-else>
10 |         <li
11 |           v-for="message in messages"
12 |           :key="message.id"
13 |           class="flex py-2 space-x-2 border-b"
14 |         >
15 |           <div>
16 |             <img
17 |               v-if="message.user.avatar"
18 |               :src="message.user.avatar"
19 |               class="w-10 h-10 rounded-full"
20 |               alt=""
21 |             />
22 |             <AvatarIcon class="w-10 h-10 text-gray-400 rounded-full" v-else />
23 |           </div>
24 |           <div>
25 |             <div class="flex space-x-2">
26 |               <span class="font-bold">{{ message.user.name }}</span>
27 |               <span class="text-gray-400">{{ message.createdAt }}</span>
28 |             </div>
29 |             <div class="text-gray-600">{{ message.body }}</div>
30 |           </div>
31 |         </li>
32 |       </ul>
33 |     </transition>
34 |     <transition name="fade">
35 |       <FlashMessage :error="error" v-if="error" key="error" />
36 |     </transition>
37 |     <transition name="fade">
38 |       <BasePagination
39 |         :meta="meta"
40 |         :links="links"
41 |         action="message/paginateMessages"
42 |         v-if="meta && meta.last_page > 1"
43 |       />
44 |     </transition>
45 |   </div>
46 | </template>
47 | 
48 | <script>
49 | import { mapGetters } from "vuex";
50 | import FlashMessage from "@/components/FlashMessage";
51 | import AvatarIcon from "@/components/icons/AvatarIcon";
52 | import BasePagination from "@/components/BasePagination";
53 | 
54 | export default {
55 |   name: "Messages",
56 |   components: { FlashMessage, BasePagination, AvatarIcon },
57 |   computed: {
58 |     ...mapGetters("message", ["loading", "error", "messages", "meta", "links"]),
59 |   },
60 |   created() {
61 |     const currentPage = 1;
62 |     this.$store.dispatch("message/getMessages", currentPage);
63 |   },
64 | };
65 | </script>
66 | 


--------------------------------------------------------------------------------
/src/components/RegisterForm.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <form @submit.prevent="registerUser">
 3 |     <BaseInput
 4 |       type="text"
 5 |       label="Name"
 6 |       name="name"
 7 |       v-model="name"
 8 |       placeholder="Luke Skywalker"
 9 |       class="mb-2"
10 |     />
11 |     <BaseInput
12 |       type="email"
13 |       label="Email"
14 |       name="email"
15 |       v-model="email"
16 |       placeholder="luke@jedi.com"
17 |       class="mb-2"
18 |     />
19 |     <BaseInput
20 |       type="password"
21 |       label="Password"
22 |       name="password"
23 |       v-model="password"
24 |       class="mb-2"
25 |     />
26 |     <BaseInput
27 |       type="password"
28 |       label="Confirm Password"
29 |       name="password-confirm"
30 |       v-model="passwordConfirm"
31 |       class="mb-4"
32 |     />
33 |     <BaseBtn type="submit" text="Register" />
34 |     <FlashMessage :error="error" />
35 |   </form>
36 | </template>
37 | 
38 | <script>
39 | import { getError } from "@/utils/helpers";
40 | import BaseBtn from "@/components/BaseBtn";
41 | import BaseInput from "@/components/BaseInput";
42 | import AuthService from "@/services/AuthService";
43 | import FlashMessage from "@/components/FlashMessage";
44 | 
45 | export default {
46 |   name: "RegisterForm",
47 |   components: {
48 |     BaseBtn,
49 |     BaseInput,
50 |     FlashMessage,
51 |   },
52 |   data() {
53 |     return {
54 |       name: null,
55 |       email: null,
56 |       password: null,
57 |       passwordConfirm: null,
58 |       error: null,
59 |     };
60 |   },
61 |   methods: {
62 |     registerUser() {
63 |       this.error = null;
64 |       const payload = {
65 |         name: this.name,
66 |         email: this.email,
67 |         password: this.password,
68 |         password_confirmation: this.passwordConfirm,
69 |       };
70 |       AuthService.registerUser(payload)
71 |         .then(() => this.$router.push("/dashboard"))
72 |         .catch((error) => (this.error = getError(error)));
73 |     },
74 |   },
75 | };
76 | </script>
77 | 


--------------------------------------------------------------------------------
/src/components/UpdatePassword.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <form @submit.prevent="updatePassword">
 3 |     <div class="mb-2">
 4 |       <label for="password" class="text-sm text-gray-500"
 5 |         >Current Password</label
 6 |       >
 7 |       <input
 8 |         type="password"
 9 |         id="current-password"
10 |         v-model="currentPassword"
11 |         class="block w-full px-3 py-2 placeholder-gray-400 border border-gray-300 rounded-md shadow-sm appearance-none focus:outline-none focus:ring-blue-500 focus:border-blue-500"
12 |       />
13 |     </div>
14 |     <div class="mb-2">
15 |       <label for="password" class="text-sm text-gray-500">Password</label>
16 |       <input
17 |         type="password"
18 |         id="password"
19 |         v-model="password"
20 |         class="block w-full px-3 py-2 placeholder-gray-400 border border-gray-300 rounded-md shadow-sm appearance-none focus:outline-none focus:ring-blue-500 focus:border-blue-500"
21 |       />
22 |     </div>
23 |     <div class="mb-4">
24 |       <label for="password-confirm" class="text-sm text-gray-500"
25 |         >Confirm Password</label
26 |       >
27 |       <input
28 |         type="password"
29 |         id="password-confirm"
30 |         v-model="passwordConfirm"
31 |         class="block w-full px-3 py-2 placeholder-gray-400 border border-gray-300 rounded-md shadow-sm appearance-none focus:outline-none focus:ring-blue-500 focus:border-blue-500"
32 |       />
33 |     </div>
34 |     <BaseBtn type="submit" text="Update" />
35 |     <FlashMessage :message="message" :error="error" />
36 |   </form>
37 | </template>
38 | 
39 | <script>
40 | import { getError } from "@/utils/helpers";
41 | import BaseBtn from "@/components/BaseBtn";
42 | import AuthService from "@/services/AuthService";
43 | import FlashMessage from "@/components/FlashMessage";
44 | 
45 | export default {
46 |   name: "UpdatePassword",
47 |   components: {
48 |     BaseBtn,
49 |     FlashMessage,
50 |   },
51 |   data() {
52 |     return {
53 |       currentPassword: null,
54 |       password: null,
55 |       passwordConfirm: null,
56 |       error: null,
57 |       message: null,
58 |     };
59 |   },
60 |   methods: {
61 |     updatePassword() {
62 |       this.error = null;
63 |       this.message = null;
64 |       const payload = {
65 |         current_password: this.currentPassword,
66 |         password: this.password,
67 |         password_confirmation: this.passwordConfirm,
68 |       };
69 |       AuthService.updatePassword(payload)
70 |         .then(() => (this.message = "Password updated."))
71 |         .catch((error) => (this.error = getError(error)));
72 |     },
73 |   },
74 | };
75 | </script>
76 | 


--------------------------------------------------------------------------------
/src/components/VerifyEmail.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <form @submit.prevent="sendVerification">
 4 |       <BaseBtn type="submit" text="Verify Email" />
 5 |     </form>
 6 |     <FlashMessage :message="message" :error="error" />
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | import { mapGetters } from "vuex";
12 | import { getError } from "@/utils/helpers";
13 | import BaseBtn from "@/components/BaseBtn";
14 | import AuthService from "@/services/AuthService";
15 | import FlashMessage from "@/components/FlashMessage";
16 | 
17 | export default {
18 |   name: "UpdatePassword",
19 |   components: {
20 |     BaseBtn,
21 |     FlashMessage,
22 |   },
23 |   data() {
24 |     return {
25 |       error: null,
26 |       message: null,
27 |     };
28 |   },
29 |   computed: {
30 |     ...mapGetters("auth", ["authUser"]),
31 |   },
32 |   methods: {
33 |     sendVerification() {
34 |       this.error = null;
35 |       this.message = null;
36 |       const payload = {
37 |         user: this.authUser.id,
38 |       };
39 |       AuthService.sendVerification(payload)
40 |         .then(() => (this.message = "Verification email sent."))
41 |         .catch((error) => (this.error = getError(error)));
42 |     },
43 |   },
44 | };
45 | </script>
46 | 


--------------------------------------------------------------------------------
/src/components/icons/AvatarIcon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     xmlns="http://www.w3.org/2000/svg"
 4 |     fill="currentColor"
 5 |     viewBox="0 0 24 24"
 6 |     aria-hidden="true"
 7 |   >
 8 |     <path
 9 |       d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z"
10 |     />
11 |   </svg>
12 | </template>
13 | 
14 | <script>
15 | export default {
16 |   name: "AvatarIcon",
17 | };
18 | </script>
19 | 


--------------------------------------------------------------------------------
/src/components/icons/HomeIcon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     xmlns="http://www.w3.org/2000/svg"
 4 |     viewBox="0 0 20 20"
 5 |     fill="currentColor"
 6 |     aria-hidden="true"
 7 |   >
 8 |     <path
 9 |       d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"
10 |     />
11 |   </svg>
12 | </template>
13 | 
14 | <script>
15 | export default {
16 |   name: "HomeIcon",
17 | };
18 | </script>
19 | 


--------------------------------------------------------------------------------
/src/components/icons/LoginIcon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     xmlns="http://www.w3.org/2000/svg"
 4 |     viewBox="0 0 20 20"
 5 |     fill="currentColor"
 6 |     aria-hidden="true"
 7 |   >
 8 |     <path
 9 |       fill-rule="evenodd"
10 |       d="M3 3a1 1 0 011 1v12a1 1 0 11-2 0V4a1 1 0 011-1zm7.707 3.293a1 1 0 010 1.414L9.414 9H17a1 1 0 110 2H9.414l1.293 1.293a1 1 0 01-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0z"
11 |       clip-rule="evenodd"
12 |     />
13 |   </svg>
14 | </template>
15 | 
16 | <script>
17 | export default {
18 |   name: "LogoutIcon",
19 | };
20 | </script>
21 | 


--------------------------------------------------------------------------------
/src/components/icons/LogoutIcon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     xmlns="http://www.w3.org/2000/svg"
 4 |     viewBox="0 0 20 20"
 5 |     fill="currentColor"
 6 |     aria-hidden="true"
 7 |   >
 8 |     <path
 9 |       fill-rule="evenodd"
10 |       d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10.293 9.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L14.586 9H7a1 1 0 100 2h7.586l-1.293 1.293z"
11 |       clip-rule="evenodd"
12 |     />
13 |   </svg>
14 | </template>
15 | 
16 | <script>
17 | export default {
18 |   name: "LogoutIcon",
19 | };
20 | </script>
21 | 


--------------------------------------------------------------------------------
/src/components/icons/MailIcon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     xmlns="http://www.w3.org/2000/svg"
 4 |     viewBox="0 0 20 20"
 5 |     fill="currentColor"
 6 |     aria-hidden="true"
 7 |   >
 8 |     <path
 9 |       d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"
10 |     />
11 |     <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
12 |   </svg>
13 | </template>
14 | 
15 | <script>
16 | export default {
17 |   name: "MailIcon",
18 | };
19 | </script>
20 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import App from "./App.vue";
 3 | import router from "./router";
 4 | import store from "./store";
 5 | import "@/assets/css/tailwind.css";
 6 | 
 7 | Vue.config.productionTip = false;
 8 | 
 9 | new Vue({
10 |   router,
11 |   store,
12 |   render: (h) => h(App),
13 | }).$mount("#app");
14 | 


--------------------------------------------------------------------------------
/src/middleware/admin.js:
--------------------------------------------------------------------------------
1 | export default function admin({ next, store }) {
2 |   if (store.getters["auth/isAdmin"]) next();
3 |   else next({ name: "notFound" });
4 | }
5 | 


--------------------------------------------------------------------------------
/src/middleware/auth.js:
--------------------------------------------------------------------------------
 1 | export default function auth({ to, next, store }) {
 2 |   const loginQuery = { path: "/login", query: { redirect: to.fullPath } };
 3 | 
 4 |   if (!store.getters["auth/authUser"]) {
 5 |     store.dispatch("auth/getAuthUser").then(() => {
 6 |       if (!store.getters["auth/authUser"]) next(loginQuery);
 7 |       else next();
 8 |     });
 9 |   } else {
10 |     next();
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/src/middleware/guest.js:
--------------------------------------------------------------------------------
 1 | export default function guest({ next, store }) {
 2 |   const storageItem = window.localStorage.getItem("guest");
 3 |   if (storageItem === "isNotGuest" && !store.getters["auth/authUser"]) {
 4 |     store.dispatch("auth/getAuthUser").then(() => {
 5 |       if (store.getters["auth/authUser"]) {
 6 |         next({ name: "dashboard" });
 7 |       } else {
 8 |         store.dispatch("auth/setGuest", { value: "isGuest" });
 9 |         next();
10 |       }
11 |     });
12 |   } else {
13 |     next();
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
  1 | import Vue from "vue";
  2 | import store from "@/store/index";
  3 | import VueRouter from "vue-router";
  4 | import auth from "@/middleware/auth";
  5 | import admin from "@/middleware/admin";
  6 | import guest from "@/middleware/guest";
  7 | import middlewarePipeline from "@/router/middlewarePipeline";
  8 | 
  9 | Vue.use(VueRouter);
 10 | 
 11 | const routes = [
 12 |   {
 13 |     path: "/",
 14 |     name: "home",
 15 |     meta: { middleware: [guest] },
 16 |     component: () => import(/* webpackChunkName: "home" */ "../views/Home"),
 17 |   },
 18 |   {
 19 |     path: "/dashboard",
 20 |     name: "dashboard",
 21 |     meta: { middleware: [auth] },
 22 |     component: () =>
 23 |       import(/* webpackChunkName: "dashboard" */ "../views/Dashboard"),
 24 |   },
 25 |   {
 26 |     path: "/user",
 27 |     name: "user",
 28 |     meta: { middleware: [auth] },
 29 |     component: () => import(/* webpackChunkName: "user" */ "../views/User"),
 30 |   },
 31 |   {
 32 |     path: "/users",
 33 |     name: "users",
 34 |     meta: { middleware: [auth, admin] },
 35 |     component: () => import(/* webpackChunkName: "users" */ "../views/Users"),
 36 |   },
 37 |   {
 38 |     path: "/login",
 39 |     name: "login",
 40 |     meta: { middleware: [guest] },
 41 |     component: () => import(/* webpackChunkName: "login" */ "../views/Login"),
 42 |   },
 43 |   {
 44 |     path: "/register",
 45 |     name: "register",
 46 |     meta: { middleware: [guest] },
 47 |     component: () =>
 48 |       import(/* webpackChunkName: "register" */ "../views/Register"),
 49 |   },
 50 |   {
 51 |     path: "/reset-password",
 52 |     name: "resetPassword",
 53 |     meta: { middleware: [guest] },
 54 |     component: () =>
 55 |       import(/* webpackChunkName: "reset-password" */ "../views/ResetPassword"),
 56 |   },
 57 |   {
 58 |     path: "/forgot-password",
 59 |     name: "forgotPassword",
 60 |     meta: { middleware: [guest] },
 61 |     component: () =>
 62 |       import(
 63 |         /* webpackChunkName: "forgot-password" */ "../views/ForgotPassword"
 64 |       ),
 65 |   },
 66 |   {
 67 |     path: "/:catchAll(.*)",
 68 |     name: "notFound",
 69 |     component: () =>
 70 |       import(/* webpackChunkName: "not-found" */ "../views/NotFound"),
 71 |   },
 72 | ];
 73 | 
 74 | const router = new VueRouter({
 75 |   mode: "history",
 76 |   routes,
 77 |   scrollBehavior(to, from, savedPosition) {
 78 |     if (savedPosition) {
 79 |       return savedPosition;
 80 |     } else {
 81 |       return { x: 0, y: 0 };
 82 |     }
 83 |   },
 84 | });
 85 | 
 86 | router.beforeEach((to, from, next) => {
 87 |   const middleware = to.meta.middleware;
 88 |   const context = { to, from, next, store };
 89 | 
 90 |   if (!middleware) {
 91 |     return next();
 92 |   }
 93 | 
 94 |   middleware[0]({
 95 |     ...context,
 96 |     next: middlewarePipeline(context, middleware, 1),
 97 |   });
 98 | });
 99 | 
100 | export default router;
101 | 


--------------------------------------------------------------------------------
/src/router/middlewarePipeline.js:
--------------------------------------------------------------------------------
 1 | export default function middlewarePipeline(context, middleware, index) {
 2 |   const nextMiddleware = middleware[index];
 3 |   if (!nextMiddleware) {
 4 |     return context.next;
 5 |   }
 6 |   return () => {
 7 |     nextMiddleware({
 8 |       ...context,
 9 |       next: middlewarePipeline(context, middleware, index + 1),
10 |     });
11 |   };
12 | }
13 | 


--------------------------------------------------------------------------------
/src/services/API.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * This is the initial API interface
 3 |  * we set the base URL for the API
 4 |  */
 5 | 
 6 | import axios from "axios";
 7 | import store from "@/store";
 8 | 
 9 | export const apiClient = axios.create({
10 |   baseURL: process.env.VUE_APP_API_URL + "/api",
11 |   withCredentials: true, // required to handle the CSRF token
12 | });
13 | 
14 | /*
15 |  * Add a response interceptor
16 |  */
17 | apiClient.interceptors.response.use(
18 |   (response) => {
19 |     return response;
20 |   },
21 |   function (error) {
22 |     if (
23 |       error.response &&
24 |       [401, 419].includes(error.response.status) &&
25 |       store.getters["auth/authUser"] &&
26 |       !store.getters["auth/guest"]
27 |     ) {
28 |       store.dispatch("auth/logout");
29 |     }
30 |     return Promise.reject(error);
31 |   }
32 | );
33 | 


--------------------------------------------------------------------------------
/src/services/AuthService.js:
--------------------------------------------------------------------------------
 1 | import axios from "axios";
 2 | import store from "@/store";
 3 | 
 4 | export const authClient = axios.create({
 5 |   baseURL: process.env.VUE_APP_API_URL,
 6 |   withCredentials: true, // required to handle the CSRF token
 7 | });
 8 | 
 9 | /*
10 |  * Add a response interceptor
11 |  */
12 | authClient.interceptors.response.use(
13 |   (response) => {
14 |     return response;
15 |   },
16 |   function (error) {
17 |     if (
18 |       error.response &&
19 |       [401, 419].includes(error.response.status) &&
20 |       store.getters["auth/authUser"] &&
21 |       !store.getters["auth/guest"]
22 |     ) {
23 |       store.dispatch("auth/logout");
24 |     }
25 |     return Promise.reject(error);
26 |   }
27 | );
28 | 
29 | export default {
30 |   async login(payload) {
31 |     await authClient.get("/sanctum/csrf-cookie");
32 |     return authClient.post("/login", payload);
33 |   },
34 |   logout() {
35 |     return authClient.post("/logout");
36 |   },
37 |   async forgotPassword(payload) {
38 |     await authClient.get("/sanctum/csrf-cookie");
39 |     return authClient.post("/forgot-password", payload);
40 |   },
41 |   getAuthUser() {
42 |     return authClient.get("/api/users/auth");
43 |   },
44 |   async resetPassword(payload) {
45 |     await authClient.get("/sanctum/csrf-cookie");
46 |     return authClient.post("/reset-password", payload);
47 |   },
48 |   updatePassword(payload) {
49 |     return authClient.put("/user/password", payload);
50 |   },
51 |   async registerUser(payload) {
52 |     await authClient.get("/sanctum/csrf-cookie");
53 |     return authClient.post("/register", payload);
54 |   },
55 |   sendVerification(payload) {
56 |     return authClient.post("/email/verification-notification", payload);
57 |   },
58 |   updateUser(payload) {
59 |     return authClient.put("/user/profile-information", payload);
60 |   },
61 | };
62 | 


--------------------------------------------------------------------------------
/src/services/FileService.js:
--------------------------------------------------------------------------------
1 | import * as API from "@/services/API";
2 | 
3 | export default {
4 |   uploadFile(payload) {
5 |     return API.apiClient.post(payload.endpoint, payload.file);
6 |   },
7 | };
8 | 


--------------------------------------------------------------------------------
/src/services/MessageService.js:
--------------------------------------------------------------------------------
 1 | import * as API from "@/services/API";
 2 | 
 3 | export default {
 4 |   getMessages(page) {
 5 |     return API.apiClient.get(`/messages/?page=${page}`);
 6 |   },
 7 |   postMessage(payload) {
 8 |     return API.apiClient.post("/messages", payload);
 9 |   },
10 |   paginateMessages(link) {
11 |     return API.apiClient.get(link);
12 |   },
13 | };
14 | 


--------------------------------------------------------------------------------
/src/services/UserService.js:
--------------------------------------------------------------------------------
 1 | import * as API from "@/services/API";
 2 | 
 3 | export default {
 4 |   getUser(userId) {
 5 |     return API.apiClient.get(`/users/${userId}`);
 6 |   },
 7 |   getUsers(page) {
 8 |     return API.apiClient.get(`/users/?page=${page}`);
 9 |   },
10 |   paginateUsers(link) {
11 |     return API.apiClient.get(link);
12 |   },
13 | };
14 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import Vuex from "vuex";
 3 | 
 4 | import * as auth from "@/store/modules/Auth";
 5 | import * as user from "@/store/modules/User";
 6 | import * as message from "@/store/modules/Message";
 7 | 
 8 | Vue.use(Vuex);
 9 | 
10 | export default new Vuex.Store({
11 |   strict: true,
12 | 
13 |   modules: {
14 |     auth,
15 |     user,
16 |     message,
17 |   },
18 | });
19 | 


--------------------------------------------------------------------------------
/src/store/modules/Auth.js:
--------------------------------------------------------------------------------
 1 | import router from "@/router";
 2 | import { getError } from "@/utils/helpers";
 3 | import AuthService from "@/services/AuthService";
 4 | 
 5 | export const namespaced = true;
 6 | 
 7 | export const state = {
 8 |   user: null,
 9 |   loading: false,
10 |   error: null,
11 | };
12 | 
13 | export const mutations = {
14 |   SET_USER(state, user) {
15 |     state.user = user;
16 |   },
17 |   SET_LOADING(state, loading) {
18 |     state.loading = loading;
19 |   },
20 |   SET_ERROR(state, error) {
21 |     state.error = error;
22 |   },
23 | };
24 | 
25 | export const actions = {
26 |   logout({ commit, dispatch }) {
27 |     return AuthService.logout()
28 |       .then(() => {
29 |         commit("SET_USER", null);
30 |         dispatch("setGuest", { value: "isGuest" });
31 |         if (router.currentRoute.name !== "login")
32 |           router.push({ path: "/login" });
33 |       })
34 |       .catch((error) => {
35 |         commit("SET_ERROR", getError(error));
36 |       });
37 |   },
38 |   async getAuthUser({ commit }) {
39 |     commit("SET_LOADING", true);
40 |     try {
41 |       const response = await AuthService.getAuthUser();
42 |       commit("SET_USER", response.data.data);
43 |       commit("SET_LOADING", false);
44 |       return response.data.data;
45 |     } catch (error) {
46 |       commit("SET_LOADING", false);
47 |       commit("SET_USER", null);
48 |       commit("SET_ERROR", getError(error));
49 |     }
50 |   },
51 |   setGuest(context, { value }) {
52 |     window.localStorage.setItem("guest", value);
53 |   },
54 | };
55 | 
56 | export const getters = {
57 |   authUser: (state) => {
58 |     return state.user;
59 |   },
60 |   isAdmin: (state) => {
61 |     return state.user ? state.user.isAdmin : false;
62 |   },
63 |   error: (state) => {
64 |     return state.error;
65 |   },
66 |   loading: (state) => {
67 |     return state.loading;
68 |   },
69 |   loggedIn: (state) => {
70 |     return !!state.user;
71 |   },
72 |   guest: () => {
73 |     const storageItem = window.localStorage.getItem("guest");
74 |     if (!storageItem) return false;
75 |     if (storageItem === "isGuest") return true;
76 |     if (storageItem === "isNotGuest") return false;
77 |   },
78 | };
79 | 


--------------------------------------------------------------------------------
/src/store/modules/Message.js:
--------------------------------------------------------------------------------
 1 | import { getError } from "@/utils/helpers";
 2 | import MessageService from "@/services/MessageService";
 3 | 
 4 | export const namespaced = true;
 5 | 
 6 | function setPaginatedMessages(commit, response) {
 7 |   commit("SET_MESSAGES", response.data.data);
 8 |   commit("SET_META", response.data.meta);
 9 |   commit("SET_LINKS", response.data.links);
10 |   commit("SET_LOADING", false);
11 | }
12 | 
13 | export const state = {
14 |   messages: [],
15 |   meta: null,
16 |   links: null,
17 |   loading: false,
18 |   error: null,
19 | };
20 | 
21 | export const mutations = {
22 |   SET_MESSAGES(state, messages) {
23 |     state.messages = messages;
24 |   },
25 |   SET_META(state, meta) {
26 |     state.meta = meta;
27 |   },
28 |   SET_LINKS(state, links) {
29 |     state.links = links;
30 |   },
31 |   SET_LOADING(state, loading) {
32 |     state.loading = loading;
33 |   },
34 |   SET_ERROR(state, error) {
35 |     state.error = error;
36 |   },
37 | };
38 | 
39 | export const actions = {
40 |   getMessages({ commit }, page) {
41 |     commit("SET_LOADING", true);
42 |     MessageService.getMessages(page)
43 |       .then((response) => {
44 |         setPaginatedMessages(commit, response);
45 |       })
46 |       .catch((error) => {
47 |         commit("SET_LOADING", false);
48 |         commit("SET_ERROR", getError(error));
49 |       });
50 |   },
51 |   postMessage({ commit }, payload) {
52 |     return MessageService.postMessage(payload).then((response) => {
53 |       setPaginatedMessages(commit, response);
54 |     });
55 |   },
56 |   paginateMessages({ commit }, link) {
57 |     commit("SET_LOADING", true);
58 |     MessageService.paginateMessages(link)
59 |       .then((response) => {
60 |         setPaginatedMessages(commit, response);
61 |       })
62 |       .catch((error) => {
63 |         commit("SET_LOADING", false);
64 |         commit("SET_ERROR", getError(error));
65 |       });
66 |   },
67 | };
68 | 
69 | export const getters = {
70 |   messages: (state) => {
71 |     return state.messages;
72 |   },
73 |   meta: (state) => {
74 |     return state.meta;
75 |   },
76 |   links: (state) => {
77 |     return state.links;
78 |   },
79 |   loading: (state) => {
80 |     return state.loading;
81 |   },
82 |   error: (state) => {
83 |     return state.error;
84 |   },
85 | };
86 | 


--------------------------------------------------------------------------------
/src/store/modules/User.js:
--------------------------------------------------------------------------------
 1 | import { getError } from "@/utils/helpers";
 2 | import UserService from "@/services/UserService";
 3 | 
 4 | export const namespaced = true;
 5 | 
 6 | function setPaginatedUsers(commit, response) {
 7 |   commit("SET_USERS", response.data.data);
 8 |   commit("SET_META", response.data.meta);
 9 |   commit("SET_LINKS", response.data.links);
10 |   commit("SET_LOADING", false);
11 | }
12 | 
13 | export const state = {
14 |   users: [],
15 |   meta: null,
16 |   links: null,
17 |   loading: false,
18 |   error: null,
19 | };
20 | 
21 | export const mutations = {
22 |   SET_USERS(state, users) {
23 |     state.users = users;
24 |   },
25 |   SET_META(state, meta) {
26 |     state.meta = meta;
27 |   },
28 |   SET_LINKS(state, links) {
29 |     state.links = links;
30 |   },
31 |   SET_LOADING(state, loading) {
32 |     state.loading = loading;
33 |   },
34 |   SET_ERROR(state, error) {
35 |     state.error = error;
36 |   },
37 | };
38 | 
39 | export const actions = {
40 |   getUsers({ commit }, page) {
41 |     commit("SET_LOADING", true);
42 |     UserService.getUsers(page)
43 |       .then((response) => {
44 |         setPaginatedUsers(commit, response);
45 |       })
46 |       .catch((error) => {
47 |         commit("SET_LOADING", false);
48 |         commit("SET_ERROR", getError(error));
49 |       });
50 |   },
51 |   paginateUsers({ commit }, link) {
52 |     commit("SET_LOADING", true);
53 |     UserService.paginateUsers(link)
54 |       .then((response) => {
55 |         setPaginatedUsers(commit, response);
56 |       })
57 |       .catch((error) => {
58 |         commit("SET_LOADING", false);
59 |         commit("SET_ERROR", getError(error));
60 |       });
61 |   },
62 | };
63 | 
64 | export const getters = {
65 |   users: (state) => {
66 |     return state.users;
67 |   },
68 |   meta: (state) => {
69 |     return state.meta;
70 |   },
71 |   links: (state) => {
72 |     return state.links;
73 |   },
74 |   loading: (state) => {
75 |     return state.loading;
76 |   },
77 |   error: (state) => {
78 |     return state.error;
79 |   },
80 | };
81 | 


--------------------------------------------------------------------------------
/src/utils/helpers.js:
--------------------------------------------------------------------------------
 1 | export const getError = (error) => {
 2 |   const errorMessage = "API Error, please try again.";
 3 | 
 4 |   if (error.name === "Fetch User") {
 5 |     return error.message;
 6 |   }
 7 | 
 8 |   if (!error.response) {
 9 |     console.error(`API ${error.config.url} not found`);
10 |     return errorMessage;
11 |   }
12 |   if (process.env.NODE_ENV === "development") {
13 |     console.error(error.response.data);
14 |     console.error(error.response.status);
15 |     console.error(error.response.headers);
16 |   }
17 |   if (error.response.data && error.response.data.errors) {
18 |     return error.response.data.errors;
19 |   }
20 | 
21 |   return errorMessage;
22 | };
23 | 


--------------------------------------------------------------------------------
/src/views/Dashboard.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="p-5 xl:px-0">
 3 |     <div class="max-w-xl m-auto">
 4 |       <MessageForm class="mb-4" />
 5 |       <article class="p-5 bg-white rounded shadow">
 6 |         <Messages />
 7 |       </article>
 8 |     </div>
 9 |     <footer class="py-5 text-center">
10 |       <p class="text-gray-400">
11 |         Full documentation for how this application is built can be found at
12 |         <a href="https://laravelvuespa.com/" class="base-link"
13 |           >laravelvuespa.com</a
14 |         >
15 |       </p>
16 |     </footer>
17 |   </div>
18 | </template>
19 | 
20 | <script>
21 | import { mapGetters } from "vuex";
22 | import Messages from "@/components/Messages";
23 | import MessageForm from "@/components/MessageForm";
24 | 
25 | export default {
26 |   name: "Dashboard",
27 |   components: {
28 |     Messages,
29 |     MessageForm,
30 |   },
31 |   computed: {
32 |     ...mapGetters("auth", ["authUser"]),
33 |   },
34 | };
35 | </script>
36 | 


--------------------------------------------------------------------------------
/src/views/ForgotPassword.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="max-w-sm p-5 m-auto">
 3 |     <h2 class="mb-4 text-xl font-bold text-center">Forgot Password</h2>
 4 |     <form
 5 |       @submit.prevent="forgotPassword"
 6 |       class="p-5 bg-white border rounded shadow"
 7 |     >
 8 |       <BaseInput
 9 |         type="email"
10 |         label="Email"
11 |         name="email"
12 |         v-model="email"
13 |         autocomplete="email"
14 |         placeholder="luke@jedi.com"
15 |         class="mb-4"
16 |       />
17 |       <BaseBtn type="submit" text="Send" />
18 |     </form>
19 |     <FlashMessage :message="message" :error="error" />
20 |   </div>
21 | </template>
22 | 
23 | <script>
24 | import { getError } from "@/utils/helpers";
25 | import BaseBtn from "@/components/BaseBtn";
26 | import BaseInput from "@/components/BaseInput";
27 | import AuthService from "@/services/AuthService";
28 | import FlashMessage from "@/components/FlashMessage";
29 | 
30 | export default {
31 |   name: "ForgotPassword",
32 |   components: {
33 |     BaseBtn,
34 |     BaseInput,
35 |     FlashMessage,
36 |   },
37 |   data() {
38 |     return {
39 |       email: null,
40 |       error: null,
41 |       message: null,
42 |     };
43 |   },
44 |   methods: {
45 |     forgotPassword() {
46 |       this.error = null;
47 |       this.message = null;
48 |       const payload = {
49 |         email: this.email,
50 |       };
51 |       AuthService.forgotPassword(payload)
52 |         .then(() => (this.message = "Reset password email sent."))
53 |         .catch((error) => (this.error = getError(error)));
54 |     },
55 |   },
56 | };
57 | </script>
58 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="max-w-lg p-5 m-auto">
 3 |     <article class="p-5">
 4 |       <h1
 5 |         class="mb-2 text-6xl font-bold text-transparent bg-gradient-to-r bg-clip-text from-blue-500 to-green-500"
 6 |       >
 7 |         Laravel Vue Demo SPA.
 8 |       </h1>
 9 |       <p class="font-bold">
10 |         You can register for an account
11 |         <router-link to="/register" class="base-link">here</router-link>.
12 |       </p>
13 |     </article>
14 |     <article class="p-5 mt-5 text-gray-600">
15 |       <p>
16 |         Docs on how this application is built can be found at:
17 |         <a href="https://laravelvuespa.com/" class="base-link"
18 |           >laravelvuespa.com</a
19 |         >
20 |       </p>
21 |     </article>
22 |   </div>
23 | </template>
24 | 
25 | <script>
26 | export default {
27 |   name: "Home",
28 | };
29 | </script>
30 | 


--------------------------------------------------------------------------------
/src/views/Login.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="max-w-sm p-5 m-auto">
 3 |     <h2 class="mb-4 text-xl font-bold text-center">Login</h2>
 4 |     <LoginForm class="p-5 bg-white border rounded shadow" />
 5 |     <p class="mt-2 text-center text-gray-500">
 6 |       <router-link
 7 |         to="/register"
 8 |         class="text-pink-500 transition hover:text-pink-600"
 9 |         >Register for an account</router-link
10 |       >
11 |     </p>
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 | import LoginForm from "@/components/LoginForm";
17 | 
18 | export default {
19 |   name: "LoginView",
20 |   components: {
21 |     LoginForm,
22 |   },
23 | };
24 | </script>
25 | 


--------------------------------------------------------------------------------
/src/views/NotFound.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="max-w-lg p-5 m-auto">
 3 |     <article class="p-5">
 4 |       <h1
 5 |         class="mb-2 text-6xl font-bold text-transparent bg-gradient-to-r bg-clip-text from-blue-500 to-green-500"
 6 |       >
 7 |         4Oh4
 8 |       </h1>
 9 |       <p class="font-bold">
10 |         The page you're looking for is not here.
11 |         <router-link to="/dashboard" class="base-link">Back home</router-link>.
12 |       </p>
13 |     </article>
14 |   </div>
15 | </template>
16 | 
17 | <script>
18 | export default {
19 |   name: "NotFound",
20 | };
21 | </script>
22 | 


--------------------------------------------------------------------------------
/src/views/Register.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="max-w-sm p-5 m-auto">
 3 |     <h2 class="mb-4 text-xl font-bold text-center">Register</h2>
 4 |     <RegisterForm class="p-5 bg-white border rounded shadow" />
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | import RegisterForm from "@/components/RegisterForm";
10 | 
11 | export default {
12 |   name: "RegisterView",
13 |   components: {
14 |     RegisterForm,
15 |   },
16 | };
17 | </script>
18 | 


--------------------------------------------------------------------------------
/src/views/ResetPassword.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="max-w-sm p-5 m-auto">
 3 |     <h2 class="mb-4 text-xl font-bold text-center">Reset Password</h2>
 4 |     <form
 5 |       @submit.prevent="resetPassword"
 6 |       class="p-5 bg-white border rounded shadow"
 7 |     >
 8 |       <div class="mb-2">
 9 |         <label for="email" class="text-sm text-gray-500">Email</label>
10 |         <input
11 |           type="email"
12 |           id="email"
13 |           v-model="email"
14 |           class="block w-full px-3 py-2 placeholder-gray-400 border border-gray-300 rounded-md shadow-sm appearance-none focus:outline-none focus:ring-blue-500 focus:border-blue-500"
15 |         />
16 |       </div>
17 |       <div class="mb-2">
18 |         <label for="password" class="text-sm text-gray-500">Password</label>
19 |         <input
20 |           type="password"
21 |           id="password"
22 |           v-model="password"
23 |           class="block w-full px-3 py-2 placeholder-gray-400 border border-gray-300 rounded-md shadow-sm appearance-none focus:outline-none focus:ring-blue-500 focus:border-blue-500"
24 |         />
25 |       </div>
26 |       <div class="mb-4">
27 |         <label for="password-confirm" class="text-sm text-gray-500"
28 |           >Confirm Password</label
29 |         >
30 |         <input
31 |           type="password"
32 |           id="password-confirm"
33 |           v-model="passwordConfirm"
34 |           class="block w-full px-3 py-2 placeholder-gray-400 border border-gray-300 rounded-md shadow-sm appearance-none focus:outline-none focus:ring-blue-500 focus:border-blue-500"
35 |         />
36 |       </div>
37 |       <BaseBtn type="submit" text="Reset Password" />
38 |     </form>
39 |     <FlashMessage :message="message" :error="error" />
40 |   </div>
41 | </template>
42 | 
43 | <script>
44 | import { getError } from "@/utils/helpers";
45 | import BaseBtn from "@/components/BaseBtn";
46 | import AuthService from "@/services/AuthService";
47 | import FlashMessage from "@/components/FlashMessage";
48 | 
49 | export default {
50 |   name: "ResetPassword",
51 |   components: {
52 |     BaseBtn,
53 |     FlashMessage,
54 |   },
55 |   data() {
56 |     return {
57 |       email: null,
58 |       password: null,
59 |       passwordConfirm: null,
60 |       error: null,
61 |       message: null,
62 |     };
63 |   },
64 |   methods: {
65 |     resetPassword() {
66 |       this.error = null;
67 |       this.message = null;
68 |       const payload = {
69 |         email: this.email,
70 |         password: this.password,
71 |         password_confirmation: this.passwordConfirm,
72 |         token: this.$route.query.token,
73 |       };
74 |       AuthService.resetPassword(payload)
75 |         .then(() => (this.message = "Password reset."))
76 |         .catch((error) => (this.error = getError(error)));
77 |     },
78 |   },
79 | };
80 | </script>
81 | 


--------------------------------------------------------------------------------
/src/views/User.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="p-5 xl:px-0">
 3 |     <div class="grid grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-3">
 4 |       <AuthUser class="p-5 bg-white border rounded shadow" />
 5 |       <AuthUserForm class="p-5 bg-white border rounded shadow" />
 6 |       <UpdatePassword class="p-5 bg-white border rounded shadow" />
 7 |       <FileUpload
 8 |         label="Upload Avatar"
 9 |         :fileTypes="['image/*']"
10 |         endpoint="/users/auth/avatar"
11 |         @fileUploaded="updateUser"
12 |         class="p-5 bg-white border rounded shadow"
13 |       />
14 |     </div>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 | import AuthUser from "@/components/AuthUser";
20 | import FileUpload from "@/components/FileUpload";
21 | import AuthUserForm from "@/components/AuthUserForm";
22 | import UpdatePassword from "@/components/UpdatePassword";
23 | 
24 | export default {
25 |   name: "UserView",
26 |   components: {
27 |     AuthUser,
28 |     FileUpload,
29 |     AuthUserForm,
30 |     UpdatePassword,
31 |   },
32 |   methods: {
33 |     updateUser() {
34 |       this.$store.dispatch("auth/getAuthUser");
35 |     },
36 |   },
37 | };
38 | </script>
39 | 


--------------------------------------------------------------------------------
/src/views/Users.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="p-5 xl:px-0">
 3 |     <transition name="fade" mode="out-in">
 4 |       <FlashMessage
 5 |         message="loading..."
 6 |         v-if="loading && !users.length"
 7 |         key="loading"
 8 |       />
 9 |       <ul v-else class="mt-5">
10 |         <li
11 |           v-for="user in users"
12 |           :key="user.id"
13 |           class="flex items-center justify-between py-2 border-b"
14 |         >
15 |           <div class="inline-flex items-center space-x-2">
16 |             <img
17 |               v-if="user.avatar"
18 |               :src="user.avatar"
19 |               class="w-10 h-10 rounded-full"
20 |               alt=""
21 |             />
22 |             <AvatarIcon class="w-10 h-10 text-gray-400 rounded-full" v-else />
23 |             <span class="text-gray-600">{{ user.name }}</span>
24 |           </div>
25 |           <a
26 |             :href="`mailto:${user.email}`"
27 |             :title="user.emailVerified ? 'Verified' : 'Not Verified'"
28 |             class="inline-flex items-center space-x-2"
29 |           >
30 |             <span class="hidden sm:inline">{{ user.email }}</span>
31 |             <MailIcon
32 |               class="w-8 h-8"
33 |               :class="user.emailVerified ? 'text-green-400' : 'text-gray-300'"
34 |             />
35 |           </a>
36 |         </li>
37 |       </ul>
38 |     </transition>
39 |     <transition name="fade">
40 |       <FlashMessage :error="error" v-if="error" key="error" />
41 |     </transition>
42 |     <transition name="fade">
43 |       <BasePagination
44 |         path="users"
45 |         :meta="meta"
46 |         :links="links"
47 |         action="user/paginateUsers"
48 |         v-if="meta && meta.last_page > 1"
49 |       />
50 |     </transition>
51 |   </div>
52 | </template>
53 | 
54 | <script>
55 | import { mapGetters } from "vuex";
56 | import store from "@/store/index";
57 | import MailIcon from "@/components/icons/MailIcon";
58 | import FlashMessage from "@/components/FlashMessage";
59 | import AvatarIcon from "@/components/icons/AvatarIcon";
60 | import BasePagination from "@/components/BasePagination";
61 | 
62 | export default {
63 |   name: "UsersView",
64 |   components: { FlashMessage, BasePagination, MailIcon, AvatarIcon },
65 |   computed: {
66 |     ...mapGetters("user", ["loading", "error", "users", "meta", "links"]),
67 |   },
68 |   beforeRouteEnter(to, from, next) {
69 |     const currentPage = parseInt(to.query.page) || 1;
70 |     store.dispatch("user/getUsers", currentPage).then(() => {
71 |       to.params.page = currentPage;
72 |       next();
73 |     });
74 |   },
75 | };
76 | </script>
77 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   purge: ["./src/**/*.html", "./src/**/*.vue"],
 3 |   darkMode: false, // or 'media' or 'class'
 4 |   theme: {
 5 |     extend: {
 6 |       fontFamily: {
 7 |         sans: ["'Open Sans'", "sans-serif"],
 8 |       },
 9 |     },
10 |   },
11 |   variants: {
12 |     extend: {},
13 |   },
14 |   plugins: [require("@tailwindcss/forms")],
15 | };
16 | 


--------------------------------------------------------------------------------