├── static
    └── .gitkeep
├── src
    ├── assets
    │   └── logo.png
    ├── components
    │   ├── marketing
    │   │   ├── About.vue
    │   │   └── LandingPage.vue
    │   ├── TodoItemsRemaining.vue
    │   ├── auth
    │   │   ├── Logout.vue
    │   │   ├── Login.vue
    │   │   └── Register.vue
    │   ├── TodoCheckAll.vue
    │   ├── TodoClearCompleted.vue
    │   ├── TodoFiltered.vue
    │   ├── TodoItem.vue
    │   ├── TodoList.vue
    │   └── layouts
    │   │   └── Master.vue
    ├── App.vue
    ├── routes.js
    ├── main.js
    └── store
    │   └── store.js
├── config
    ├── prod.env.js
    ├── dev.env.js
    └── index.js
├── .editorconfig
├── .gitignore
├── .babelrc
├── .postcssrc.js
├── index.html
├── README.md
└── package.json


/static/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/drehimself/todo-vue/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/config/prod.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | module.exports = {
3 |   NODE_ENV: '"production"'
4 | }
5 | 


--------------------------------------------------------------------------------
/src/components/marketing/About.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="page-wrapper flex-center">
3 |     Content for About Page
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/src/components/marketing/LandingPage.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="page-wrapper flex-center">
3 |     Landing Page content here
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/config/dev.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const merge = require('webpack-merge')
3 | const prodEnv = require('./prod.env')
4 | 
5 | module.exports = merge(prodEnv, {
6 |   NODE_ENV: '"development"'
7 | })
8 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | /dist/
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Editor directories and files
 9 | .idea
10 | .vscode
11 | *.suo
12 | *.ntvs*
13 | *.njsproj
14 | *.sln
15 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", {
 4 |       "modules": false,
 5 |       "targets": {
 6 |         "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
 7 |       }
 8 |     }],
 9 |     "stage-2"
10 |   ],
11 |   "plugins": ["transform-vue-jsx", "transform-runtime"]
12 | }
13 | 


--------------------------------------------------------------------------------
/.postcssrc.js:
--------------------------------------------------------------------------------
 1 | // https://github.com/michael-ciniawsky/postcss-load-config
 2 | 
 3 | module.exports = {
 4 |   "plugins": {
 5 |     "postcss-import": {},
 6 |     "postcss-url": {},
 7 |     // to edit target browsers: use "browserslist" field in package.json
 8 |     "autoprefixer": {}
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/src/components/TodoItemsRemaining.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>{{ remaining }} items left</div>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   name: 'todo-remaining',
 8 |   computed: {
 9 |     remaining() {
10 |       return this.$store.getters.remaining
11 |     }
12 |   }
13 | }
14 | </script>
15 | 
16 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6 |     <title>todo-vue</title>
 7 |   </head>
 8 |   <body>
 9 |     <div id="app"></div>
10 |     <!-- built files will be auto injected -->
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/src/components/auth/Logout.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   created() {
 8 |     this.$store.dispatch('clearTodos')
 9 |     this.$store.dispatch('destroyToken')
10 |       .then(response => {
11 |         this.$router.push({ name: 'home' })
12 |       })
13 |   }
14 | }
15 | </script>
16 | 
17 | 


--------------------------------------------------------------------------------
/src/components/TodoCheckAll.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div><label><input type="checkbox" :checked="!anyRemaining" @change="allChecked"> Check All</label></div>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   name: 'todo-check-all',
 8 |   computed: {
 9 |     anyRemaining() {
10 |       return this.$store.getters.anyRemaining
11 |     }
12 |   },
13 |   methods: {
14 |     allChecked() {
15 |       this.$store.dispatch('checkAll', event.target.checked)
16 |     }
17 |   }
18 | }
19 | </script>
20 | 
21 | 


--------------------------------------------------------------------------------
/src/components/TodoClearCompleted.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <button v-if="showClearCompletedButton" @click="clearCompleted">Clear Completed</button>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   name: 'todo-clear-completed',
 8 |   computed: {
 9 |     showClearCompletedButton() {
10 |       return this.$store.getters.showClearCompletedButton
11 |     }
12 |   },
13 |   methods: {
14 |     clearCompleted() {
15 |       this.$store.dispatch('clearCompleted')
16 |     }
17 |   }
18 | }
19 | </script>
20 | 
21 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app" class="container">
 3 |     <img src="./assets/logo.png" class="logo">
 4 |     <todo-list></todo-list>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | import TodoList from './components/TodoList'
10 | 
11 | export default {
12 |   name: 'App',
13 |   components: {
14 |     TodoList,
15 |   }
16 | }
17 | </script>
18 | 
19 | <style>
20 | 
21 | .container {
22 |   max-width: 600px;
23 |   margin: 0 auto;
24 | }
25 | 
26 | .logo {
27 |   display: block;
28 |   margin: 20px auto;
29 |   height: 75px;
30 | }
31 | </style>
32 | 


--------------------------------------------------------------------------------
/src/components/TodoFiltered.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <button :class="{ active: filter == 'all' }" @click="changeFilter('all')">All</button>
 4 |     <button :class="{ active: filter == 'active' }" @click="changeFilter('active')">Active</button>
 5 |     <button :class="{ active: filter == 'completed' }" @click="changeFilter('completed')">Completed</button>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 |   name: 'todo-filtered',
12 |   computed: {
13 |     filter() {
14 |       return this.$store.state.filter
15 |     }
16 |   },
17 |   methods: {
18 |     changeFilter(filter) {
19 |       this.$store.dispatch('updateFilter', filter)
20 |     }
21 |   }
22 | }
23 | </script>
24 | 
25 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue.js Todo App
 2 | 
 3 | ![Vue Todo App](https://user-images.githubusercontent.com/4316355/40896358-794f985c-6782-11e8-894d-cffc61bec4d3.png)
 4 | 
 5 | 
 6 | 
 7 | Code for YouTube Series on building a Todo App using Vue.js: [YouTube Link](https://www.youtube.com/playlist?list=PLEhEHUEU3x5q-xB1On4CsLPts0-rZ9oos)
 8 | 
 9 | **Note:** Each video has a corresponding branch. The `master` branch is up to date with the latest video.
10 | 
11 | ## Build Setup
12 | 
13 | ``` bash
14 | # install dependencies
15 | npm install
16 | 
17 | # serve with hot reload at localhost:8080
18 | npm run dev
19 | 
20 | # build for production with minification
21 | npm run build
22 | 
23 | ```
24 | 
25 | ## Specific Branch
26 | 
27 | If you want to checkout a certain branch:
28 | 
29 | `git branch -a` to list all the branches.
30 | 
31 | `git checkout 01-basics` (or any branch) to check it out.
32 | 
33 | ## Laravel API
34 | 
35 | The Laravel API repo can be [found here](https://github.com/drehimself/todo-laravel).
36 | 


--------------------------------------------------------------------------------
/src/routes.js:
--------------------------------------------------------------------------------
 1 | import App from './App'
 2 | import LandingPage from './components/marketing/LandingPage'
 3 | import About from './components/marketing/About'
 4 | import Login from './components/auth/Login'
 5 | import Logout from './components/auth/Logout'
 6 | import Register from './components/auth/Register'
 7 | 
 8 | const routes = [
 9 |   {
10 |     path: '/',
11 |     name: 'home',
12 |     component: LandingPage
13 |   },
14 |   {
15 |     path: '/todo',
16 |     name: 'todo',
17 |     component: App,
18 |     meta: {
19 |       requiresAuth: true,
20 |     }
21 |   },
22 |   {
23 |     path: '/about',
24 |     name: 'about',
25 |     component: About
26 |   },
27 |   {
28 |     path: '/login',
29 |     name: 'login',
30 |     component: Login,
31 |     props: true,
32 |     meta: {
33 |       requiresVisitor: true,
34 |     }
35 |   },
36 |   {
37 |     path: '/register',
38 |     name: 'register',
39 |     component: Register,
40 |     meta: {
41 |       requiresVisitor: true,
42 |     }
43 |   },
44 |   {
45 |     path: '/logout',
46 |     name: 'logout',
47 |     component: Logout
48 |   }
49 | ]
50 | 
51 | export default routes
52 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | // The Vue build version to load with the `import` command
 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 3 | import Vue from 'vue'
 4 | import VueRouter from 'vue-router'
 5 | import routes from './routes'
 6 | import Master from './components/layouts/Master'
 7 | import { store } from './store/store'
 8 | import VeeValidate from 'vee-validate'
 9 | import CxltToastr from 'cxlt-vue2-toastr'
10 | 
11 | const toastrConfigs = {
12 |   position: 'bottom right',
13 |   showDuration: 2000,
14 |   timeOut: 5000,
15 |   progressBar: true,
16 | }
17 | 
18 | window.eventBus = new Vue()
19 | 
20 | Vue.config.productionTip = false
21 | Vue.use(VueRouter)
22 | Vue.use(VeeValidate)
23 | Vue.use(CxltToastr, toastrConfigs)
24 | 
25 | const router = new VueRouter({
26 |   routes,
27 |   mode: 'history'
28 | })
29 | 
30 | router.beforeEach((to, from, next) => {
31 |   if (to.matched.some(record => record.meta.requiresAuth)) {
32 |     if (!store.getters.loggedIn) {
33 |       next({
34 |         name: 'login',
35 |       })
36 |     } else {
37 |       next()
38 |     }
39 |   } else if (to.matched.some(record => record.meta.requiresVisitor)) {
40 |     if (store.getters.loggedIn) {
41 |       next({
42 |         name: 'todo',
43 |       })
44 |     } else {
45 |       next()
46 |     }
47 |   } else {
48 |     next()
49 |   }
50 | })
51 | 
52 | /* eslint-disable no-new */
53 | new Vue({
54 |   el: '#app',
55 |   router: router,
56 |   store: store,
57 |   components: { Master },
58 |   template: '<Master/>'
59 | })
60 | 


--------------------------------------------------------------------------------
/src/components/auth/Login.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="page-wrapper login-form">
 3 |     <h2 class="login-heading">Login</h2>
 4 |     <form action="#" @submit.prevent="login">
 5 | 
 6 |       <div v-if="successMessage" class="success-message">{{ successMessage }}</div>
 7 |       <div v-if="serverError" class="server-error">{{ serverError }}</div>
 8 | 
 9 |       <div class="form-control">
10 |         <label for="email">Username/Email</label>
11 |         <input type="email" name="username" id="username" class="login-input" v-model="username">
12 |       </div>
13 | 
14 |       <div class="form-control mb-more">
15 |         <label for="password">Password</label>
16 |         <input type="password" name="password" id="password" class="login-input" v-model="password">
17 |       </div>
18 | 
19 |       <div class="form-control">
20 |         <button type="submit" class="btn-submit" :disabled="loading">
21 |           <div class="lds-ring-container" v-if="loading">
22 |             <div class="lds-ring"><div></div><div></div><div></div><div></div></div>
23 |           </div>
24 |           Login
25 |         </button>
26 |       </div>
27 | 
28 |     </form>
29 |   </div>
30 | </template>
31 | 
32 | <script>
33 | export default {
34 |   name: 'login',
35 |   props: {
36 |     dataSuccessMessage: {
37 |       type: String,
38 |     }
39 |   },
40 |   data() {
41 |     return {
42 |       username: '',
43 |       password: '',
44 |       serverError: '',
45 |       successMessage: this.dataSuccessMessage,
46 |       loading: false,
47 |     }
48 |   },
49 |   methods: {
50 |     login() {
51 |       this.loading = true
52 |       this.$store.dispatch('retrieveToken', {
53 |         username: this.username,
54 |         password: this.password,
55 |       })
56 |         .then(response => {
57 |           this.loading = false
58 |           this.$router.push({ name: 'todo' })
59 |         })
60 |         .catch(error => {
61 |           this.loading = false
62 |           this.serverError = error.response.data
63 |           this.password = ''
64 |           this.successMessage = ''
65 |         })
66 |     }
67 |   }
68 | }
69 | </script>
70 | 
71 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "todo-vue",
 3 |   "version": "1.0.0",
 4 |   "description": "A Vue.js project",
 5 |   "author": "Andre Madarang <andre_madarang@hotmail.com>",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
 9 |     "start": "npm run dev",
10 |     "build": "node build/build.js"
11 |   },
12 |   "dependencies": {
13 |     "axios": "^0.18.0",
14 |     "cxlt-vue2-toastr": "^1.1.0",
15 |     "node-sass": "^4.8.3",
16 |     "sass-loader": "^6.0.7",
17 |     "vee-validate": "^2.0.9",
18 |     "vue": "^2.5.2",
19 |     "vue-router": "^3.0.1",
20 |     "vuex": "^3.0.1"
21 |   },
22 |   "devDependencies": {
23 |     "autoprefixer": "^7.1.2",
24 |     "babel-core": "^6.22.1",
25 |     "babel-helper-vue-jsx-merge-props": "^2.0.3",
26 |     "babel-loader": "^7.1.1",
27 |     "babel-plugin-syntax-jsx": "^6.18.0",
28 |     "babel-plugin-transform-runtime": "^6.22.0",
29 |     "babel-plugin-transform-vue-jsx": "^3.5.0",
30 |     "babel-preset-env": "^1.3.2",
31 |     "babel-preset-stage-2": "^6.22.0",
32 |     "chalk": "^2.0.1",
33 |     "copy-webpack-plugin": "^4.0.1",
34 |     "css-loader": "^0.28.0",
35 |     "extract-text-webpack-plugin": "^3.0.0",
36 |     "file-loader": "^1.1.4",
37 |     "friendly-errors-webpack-plugin": "^1.6.1",
38 |     "html-webpack-plugin": "^2.30.1",
39 |     "node-notifier": "^5.1.2",
40 |     "optimize-css-assets-webpack-plugin": "^3.2.0",
41 |     "ora": "^1.2.0",
42 |     "portfinder": "^1.0.13",
43 |     "postcss-import": "^11.0.0",
44 |     "postcss-loader": "^2.0.8",
45 |     "postcss-url": "^7.2.1",
46 |     "rimraf": "^2.6.0",
47 |     "semver": "^5.3.0",
48 |     "shelljs": "^0.7.6",
49 |     "uglifyjs-webpack-plugin": "^1.1.1",
50 |     "url-loader": "^0.5.8",
51 |     "vue-loader": "^13.3.0",
52 |     "vue-style-loader": "^3.0.1",
53 |     "vue-template-compiler": "^2.5.2",
54 |     "webpack": "^3.6.0",
55 |     "webpack-bundle-analyzer": "^2.9.0",
56 |     "webpack-dev-server": "^2.9.1",
57 |     "webpack-merge": "^4.1.0"
58 |   },
59 |   "engines": {
60 |     "node": ">= 6.0.0",
61 |     "npm": ">= 3.0.0"
62 |   },
63 |   "browserslist": [
64 |     "> 1%",
65 |     "last 2 versions",
66 |     "not ie <= 8"
67 |   ]
68 | }
69 | 


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | // Template version: 1.3.1
 3 | // see http://vuejs-templates.github.io/webpack for documentation.
 4 | 
 5 | const path = require('path')
 6 | 
 7 | module.exports = {
 8 |   dev: {
 9 | 
10 |     // Paths
11 |     assetsSubDirectory: 'static',
12 |     assetsPublicPath: '/',
13 |     proxyTable: {},
14 | 
15 |     // Various Dev Server settings
16 |     host: 'localhost', // can be overwritten by process.env.HOST
17 |     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
18 |     autoOpenBrowser: false,
19 |     errorOverlay: true,
20 |     notifyOnErrors: true,
21 |     poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
22 | 
23 |     
24 |     /**
25 |      * Source Maps
26 |      */
27 | 
28 |     // https://webpack.js.org/configuration/devtool/#development
29 |     devtool: 'cheap-module-eval-source-map',
30 | 
31 |     // If you have problems debugging vue-files in devtools,
32 |     // set this to false - it *may* help
33 |     // https://vue-loader.vuejs.org/en/options.html#cachebusting
34 |     cacheBusting: true,
35 | 
36 |     cssSourceMap: true
37 |   },
38 | 
39 |   build: {
40 |     // Template for index.html
41 |     index: path.resolve(__dirname, '../dist/index.html'),
42 | 
43 |     // Paths
44 |     assetsRoot: path.resolve(__dirname, '../dist'),
45 |     assetsSubDirectory: 'static',
46 |     assetsPublicPath: '/',
47 | 
48 |     /**
49 |      * Source Maps
50 |      */
51 | 
52 |     productionSourceMap: true,
53 |     // https://webpack.js.org/configuration/devtool/#production
54 |     devtool: '#source-map',
55 | 
56 |     // Gzip off by default as many popular static hosts such as
57 |     // Surge or Netlify already gzip all static assets for you.
58 |     // Before setting to `true`, make sure to:
59 |     // npm install --save-dev compression-webpack-plugin
60 |     productionGzip: false,
61 |     productionGzipExtensions: ['js', 'css'],
62 | 
63 |     // Run the build command with an extra argument to
64 |     // View the bundle analyzer report after build finishes:
65 |     // `npm run build --report`
66 |     // Set to `true` or `false` to always turn it on or off
67 |     bundleAnalyzerReport: process.env.npm_config_report
68 |   }
69 | }
70 | 


--------------------------------------------------------------------------------
/src/components/TodoItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="todo-item">
 3 |     <div class="todo-item-left">
 4 |         <input type="checkbox" v-model="completed" @change="doneEdit">
 5 |         <div v-if="!editing" @dblclick="editTodo" class="todo-item-label" :class="{ completed : completed }">{{ title }}</div>
 6 |         <input v-else class="todo-item-edit" type="text" v-model="title" @blur="doneEdit" @keyup.enter="doneEdit" @keyup.esc="cancelEdit" v-focus>
 7 |     </div> <!-- end todo-item-left -->
 8 |     <div>
 9 |       <button @click="pluralize">Plural</button>
10 |       <span class="remove-item" @click="removeTodo(todo.id)">
11 |         &times;
12 |       </span>
13 |     </div>
14 |   </div> <!-- end todo-item -->
15 | </template>
16 | 
17 | <script>
18 | export default {
19 |   name: 'todo-item',
20 |   props: {
21 |     todo: {
22 |       type: Object,
23 |       required: true,
24 |     },
25 |     checkAll: {
26 |       type: Boolean,
27 |       required: true,
28 |     }
29 |   },
30 |   data() {
31 |     return {
32 |       'id': this.todo.id,
33 |       'title': this.todo.title,
34 |       'completed': this.todo.completed,
35 |       'editing': this.todo.editing,
36 |       'beforeEditCache': '',
37 |     }
38 |   },
39 |   created() {
40 |     eventBus.$on('pluralize', this.handlePluralize)
41 |   },
42 |   beforeDestroy() {
43 |     eventBus.$off('pluralize', this.handlePluralize)
44 |   },
45 |   watch: {
46 |     checkAll() {
47 |       this.completed = this.checkAll ? true : this.todo.completed
48 |     }
49 |   },
50 |   directives: {
51 |     focus: {
52 |       inserted: function (el) {
53 |         el.focus()
54 |       }
55 |     }
56 |   },
57 |   methods: {
58 |     removeTodo(id) {
59 |       this.$store.dispatch('deleteTodo', id)
60 |     },
61 |     editTodo() {
62 |       this.beforeEditCache = this.title
63 |       this.editing = true
64 |     },
65 |     doneEdit() {
66 |       if (this.title.trim() == '') {
67 |         this.title = this.beforeEditCache
68 |       }
69 |       this.editing = false
70 |       this.$store.dispatch('updateTodo', {
71 |         'id': this.id,
72 |         'title': this.title,
73 |         'completed': this.completed,
74 |         'editing': this.editing,
75 |       })
76 |     },
77 |     cancelEdit() {
78 |       this.title = this.beforeEditCache
79 |       this.editing = false
80 |     },
81 |     pluralize() {
82 |       eventBus.$emit('pluralize')
83 |     },
84 |     handlePluralize() {
85 |       this.title = this.title + 's'
86 |       this.$store.dispatch('updateTodo', {
87 |         'id': this.id,
88 |         'title': this.title,
89 |         'completed': this.completed,
90 |         'editing': this.editing,
91 |       })
92 |     }
93 |   }
94 | }
95 | </script>
96 | 
97 | 


--------------------------------------------------------------------------------
/src/components/auth/Register.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="page-wrapper login-form">
 3 |     <h2 class="login-heading">Register</h2>
 4 |     <form action="#" @submit.prevent="validateBeforeSubmit">
 5 | 
 6 |       <!-- <div v-if="successMessage" class="success-message">{{ successMessage }}</div> -->
 7 | 
 8 |       <div v-if="serverErrors" class="server-error">
 9 |         <div v-for="(value, key) in serverErrors" :key="key">
10 |           {{ value[0] }}
11 |         </div>
12 | 
13 |       </div>
14 | 
15 |       <div class="form-control">
16 |         <label for="name">Name</label>
17 |         <input type="text" name="name" id="name" class="login-input" :class="{ 'input-error': errors.has('name') }" v-model="name" v-validate="'required'">
18 |         <span class="form-error">{{ errors.first('name') }}</span>
19 |       </div>
20 | 
21 |       <div class="form-control">
22 |         <label for="email">Email</label>
23 |         <input type="text" name="email" id="email" class="login-input" :class="{ 'input-error': errors.has('email') }" v-model="email" v-validate="'required|email'">
24 |         <span class="form-error">{{ errors.first('email') }}</span>
25 |       </div>
26 | 
27 |       <div class="form-control mb-more">
28 |         <label for="password">Password</label>
29 |         <input type="password" name="password" id="password" class="login-input" :class="{ 'input-error': errors.has('password') }" v-model="password" v-validate="'required|min:6'">
30 |         <span class="form-error">{{ errors.first('password') }}</span>
31 |       </div>
32 | 
33 |       <div class="form-control">
34 |         <button type="submit" class="btn-submit">Create Account</button>
35 |       </div>
36 | 
37 |     </form>
38 |   </div>
39 | </template>
40 | 
41 | <script>
42 | export default {
43 |   data() {
44 |     return {
45 |       name: '',
46 |       email: '',
47 |       password: '',
48 |       serverErrors: '',
49 |       successMessage: '',
50 |     }
51 |   },
52 |   methods: {
53 |     validateBeforeSubmit() {
54 |       this.$validator.validateAll().then((result) => {
55 |         if (result) {
56 |           // eslint-disable-next-line
57 |           this.register()
58 |         }
59 |       })
60 |     },
61 |     register() {
62 |       this.$store.dispatch('register', {
63 |         name: this.name,
64 |         email: this.email,
65 |         password: this.password,
66 |       })
67 |         .then(response => {
68 |           this.successMessage = 'Registered Successfully!'
69 |           this.$router.push({ name: 'login', params: { dataSuccessMessage: this.successMessage } })
70 |           this.$toast.success({
71 |             title: this.successMessage,
72 |             message: 'You can login here'
73 |           })
74 |         })
75 |         .catch(error => {
76 |           this.serverErrors = Object.values(error.response.data.errors)
77 |         })
78 |     }
79 |   }
80 | }
81 | </script>
82 | 


--------------------------------------------------------------------------------
/src/components/TodoList.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div class="name-container">
  4 |       Welcome, {{ name }}
  5 |     </div>
  6 |     <input type="text" class="todo-input" placeholder="What needs to be done" v-model="newTodo" @keyup.enter="addTodo">
  7 |     <transition-group name="fade" enter-active-class="animated fadeInUp" leave-active-class="animated fadeOutDown">
  8 |     <todo-item v-for="todo in todosFiltered" :key="todo.id" :todo="todo" :checkAll="!anyRemaining">
  9 |     </todo-item>
 10 |     </transition-group>
 11 | 
 12 |     <div class="extra-container">
 13 |       <todo-check-all></todo-check-all>
 14 |       <todo-items-remaining></todo-items-remaining>
 15 |     </div> <!-- end extra-container -->
 16 | 
 17 |     <div class="extra-container">
 18 |       <todo-filtered></todo-filtered>
 19 | 
 20 |       <div>
 21 |         <transition name="fade">
 22 |         <todo-clear-completed></todo-clear-completed>
 23 |         </transition>
 24 |       </div>
 25 |     </div> <!-- end extra-container -->
 26 |   </div>
 27 | </template>
 28 | 
 29 | <script>
 30 | import TodoItem from './TodoItem'
 31 | import TodoItemsRemaining from './TodoItemsRemaining'
 32 | import TodoCheckAll from './TodoCheckAll'
 33 | import TodoFiltered from './TodoFiltered'
 34 | import TodoClearCompleted from './TodoClearCompleted'
 35 | 
 36 | export default {
 37 |   name: 'todo-list',
 38 |   components: {
 39 |     TodoItem,
 40 |     TodoItemsRemaining,
 41 |     TodoCheckAll,
 42 |     TodoFiltered,
 43 |     TodoClearCompleted,
 44 |   },
 45 |   data() {
 46 |     return {
 47 |       newTodo: '',
 48 |       idForTodo: 3,
 49 |       name: '',
 50 |     }
 51 |   },
 52 |   created() {
 53 |     this.$store.dispatch('retrieveTodos')
 54 |     this.$store.dispatch('retrieveName')
 55 |       .then(response => {
 56 |         this.name = response.data.name
 57 |       })
 58 |   },
 59 |   computed: {
 60 |     anyRemaining() {
 61 |       return this.$store.getters.anyRemaining
 62 |     },
 63 |     todosFiltered() {
 64 |       return this.$store.getters.todosFiltered
 65 |     }
 66 |   },
 67 |   methods: {
 68 |     addTodo() {
 69 |       if (this.newTodo.trim().length == 0) {
 70 |         return
 71 |       }
 72 | 
 73 |       this.$store.dispatch('addTodo', {
 74 |         id: this.idForTodo,
 75 |         title: this.newTodo,
 76 |       })
 77 | 
 78 |       this.newTodo = ''
 79 |       this.idForTodo++
 80 |     },
 81 |   }
 82 | }
 83 | </script>
 84 | 
 85 | <style lang="scss">
 86 | 
 87 | .todo-input {
 88 |   width: 100%;
 89 |   padding: 10px 18px;
 90 |   font-size: 18px;
 91 |   margin-bottom: 16px;
 92 | 
 93 |   &:focus {
 94 |     outline: 0;
 95 |   }
 96 | }
 97 | 
 98 | .todo-item {
 99 |   margin-bottom: 12px;
100 |   display: flex;
101 |   align-items: center;
102 |   justify-content: space-between;
103 |   animation-duration: 0.3s;
104 | }
105 | 
106 | .remove-item {
107 |   cursor: pointer;
108 |   margin-left: 14px;
109 |   &:hover {
110 |     color: black;
111 |   }
112 | }
113 | 
114 | .todo-item-left {
115 |   display: flex;
116 |   align-items: center;
117 | }
118 | 
119 | .todo-item-label {
120 |   padding: 10px;
121 |   border: 1px solid white;
122 |   margin-left: 12px;
123 | }
124 | 
125 | .todo-item-edit {
126 |   font-size: 24px;
127 |   color: #2c3e50;
128 |   margin-left: 12px;
129 |   width: 100%;
130 |   padding: 10px;
131 |   border: 1px solid #ccc; //override defaults
132 |   font-family: "Avenir", Helvetica, Arial, sans-serif;
133 | 
134 |   &:focus {
135 |     outline: none;
136 |   }
137 | }
138 | 
139 | .completed {
140 |   text-decoration: line-through;
141 |   color: grey;
142 | }
143 | 
144 | .extra-container {
145 |   display: flex;
146 |   align-items: center;
147 |   justify-content: space-between;
148 |   font-size: 16px;
149 |   border-top: 1px solid lightgrey;
150 |   padding-top: 14px;
151 |   margin-bottom: 14px;
152 | }
153 | 
154 | .name-container {
155 |   margin-bottom: 16px;
156 | }
157 | 
158 | button {
159 |   font-size: 14px;
160 |   background-color: white;
161 |   appearance: none;
162 |   padding: 4px;
163 | 
164 |   &:hover {
165 |     background: lightgreen;
166 |   }
167 | 
168 |   &:focus {
169 |     outline: none;
170 |   }
171 | }
172 | 
173 | .active {
174 |   background: lightgreen;
175 | }
176 | 
177 | // CSS Transitions
178 | .fade-enter-active,
179 | .fade-leave-active {
180 |   transition: opacity 0.2s;
181 | }
182 | 
183 | .fade-enter,
184 | .fade-leave-to {
185 |   opacity: 0;
186 | }
187 | </style>
188 | 


--------------------------------------------------------------------------------
/src/components/layouts/Master.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <ul class="nav">
  4 |       <li><router-link :to="{ name: 'home' }">Home</router-link></li>
  5 |       <li><router-link :to="{ name: 'todo' }">App</router-link></li>
  6 |       <li><router-link :to="{ name: 'about' }">About</router-link></li>
  7 |       <li v-if="!loggedIn"><router-link :to="{ name: 'login' }">Login</router-link></li>
  8 |       <li v-if="!loggedIn"><router-link :to="{ name: 'register' }">Register</router-link></li>
  9 |       <li v-if="loggedIn"><router-link :to="{ name: 'logout' }">Logout</router-link></li>
 10 | 
 11 |     </ul>
 12 | 
 13 |     <transition name="router-animation" enter-active-class="animated fadeIn" leave-active-class="animated fadeOut" mode="out-in">
 14 |       <router-view></router-view>
 15 |     </transition>
 16 | 
 17 |   </div>
 18 | </template>
 19 | 
 20 | <script>
 21 | export default {
 22 |   computed: {
 23 |     loggedIn() {
 24 |       return this.$store.getters.loggedIn
 25 |     }
 26 |   }
 27 | }
 28 | </script>
 29 | 
 30 | <style lang="scss">
 31 |   @import url("https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css");
 32 |   @import url('cxlt-vue2-toastr/dist/css/cxlt-vue2-toastr.css');
 33 | 
 34 |   * {
 35 |     box-sizing: border-box;
 36 |     margin: 0;
 37 |     padding: 0;
 38 |   }
 39 | 
 40 |   #app {
 41 |     font-family: 'Avenir', Helvetica, Arial, sans-serif;
 42 |     -webkit-font-smoothing: antialiased;
 43 |     -moz-osx-font-smoothing: grayscale;
 44 |     color: #2c3e50;
 45 |     font-size: 24px;
 46 |     height: 100vh;
 47 |   }
 48 | 
 49 |   .flex-center {
 50 |     display: flex;
 51 |     justify-content: center;
 52 |   }
 53 | 
 54 |   .nav {
 55 |     display: flex;
 56 |     list-style: none;
 57 |     padding: 15px 0;
 58 |     margin: 0;
 59 |     justify-content: flex-end;
 60 |     background: #F5F8FA;
 61 |     border-bottom: 1px solid lightgrey;
 62 |     margin-bottom: 24px;
 63 |   }
 64 | 
 65 |   .nav a {
 66 |     color: #636b6f;
 67 |     padding: 0 25px;
 68 |     font-size: 14px;
 69 |     font-weight: 600;
 70 |     letter-spacing: .1rem;
 71 |     text-decoration: none;
 72 |     text-transform: uppercase;
 73 |   }
 74 | 
 75 |   // Auth Pages
 76 | 
 77 |   label {
 78 |     display: block;
 79 |     margin-bottom: 4px;
 80 |   }
 81 | 
 82 |   .login-heading {
 83 |     margin-bottom: 16px;
 84 |   }
 85 | 
 86 |   .form-control {
 87 |     margin-bottom: 24px;
 88 |   }
 89 | 
 90 |   .mb-more {
 91 |     margin-bottom: 42px;
 92 |   }
 93 | 
 94 |   .login-form {
 95 |     max-width: 500px;
 96 |     margin: auto;
 97 |   }
 98 | 
 99 |   .login-input {
100 |     width: 100%;
101 |     font-size: 16px;
102 |     padding: 12px 16px;
103 |     outline: 0;
104 |     border-radius: 3px;
105 |     border: 1px solid lightgrey;
106 |   }
107 | 
108 |   .btn-submit {
109 |     width: 100%;
110 |     padding: 14px 12px;
111 |     font-size: 18px;
112 |     font-weight: bold;
113 |     background: #60BD4F;
114 |     color: white;
115 |     border-radius: 3px;
116 |     cursor: pointer;
117 | 
118 |     &:hover {
119 |       background: darken(#60BD4F, 10%);
120 |     }
121 | 
122 |     &:disabled {
123 |       background: lighten(#60BD4F, 25%);
124 |       cursor: not-allowed;
125 |     }
126 | 
127 |   }
128 | 
129 |   .server-error {
130 |     margin-bottom: 12px;
131 |     font-size: 16px;
132 |     padding: 10px 16px;
133 |     color: #a94442;
134 |     background: #F3DEDE;
135 |     border-radius: 4px;
136 |   }
137 | 
138 |   .success-message {
139 |     background-color: #dff0d8;
140 |     color: #3c763d;
141 |     margin-bottom: 12px;
142 |     font-size: 16px;
143 |     padding: 10px 16px;
144 |     border-radius: 4px;
145 |   }
146 | 
147 |   .form-error {
148 |     font-size: 16px;
149 |     color: #a94442;
150 |   }
151 | 
152 |   .input-error {
153 |     border: 1px solid red;
154 |   }
155 | 
156 |   .page-wrapper {
157 |     animation-duration: 0.2s;
158 |   }
159 | 
160 |   // CSS Spinner
161 | 
162 |   .lds-ring-container {
163 |     position: absolute;
164 |     right: 50%;
165 |   }
166 | 
167 |   .lds-ring {
168 |     display: inline-block;
169 |     position: relative;
170 |     width: 64px;
171 |     height: 64px;
172 |   }
173 |   .lds-ring div {
174 |     box-sizing: border-box;
175 |     display: block;
176 |     position: absolute;
177 |     width: 25px;
178 |     height: 25px;
179 |     // margin: 6px;
180 |     border: 3px solid #fff;
181 |     border-radius: 50%;
182 |     animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
183 |     border-color: #fff transparent transparent transparent;
184 |   }
185 |   .lds-ring div:nth-child(1) {
186 |     animation-delay: -0.45s;
187 |   }
188 |   .lds-ring div:nth-child(2) {
189 |     animation-delay: -0.3s;
190 |   }
191 |   .lds-ring div:nth-child(3) {
192 |     animation-delay: -0.15s;
193 |   }
194 |   @keyframes lds-ring {
195 |     0% {
196 |       transform: rotate(0deg);
197 |     }
198 |     100% {
199 |       transform: rotate(360deg);
200 |     }
201 |   }
202 | 
203 | </style>
204 | 
205 | 


--------------------------------------------------------------------------------
/src/store/store.js:
--------------------------------------------------------------------------------
  1 | import Vue from 'vue'
  2 | import Vuex from 'vuex'
  3 | import axios from 'axios'
  4 | 
  5 | Vue.use(Vuex)
  6 | axios.defaults.baseURL = 'http://todo-laravel.test/api'
  7 | 
  8 | export const store = new Vuex.Store({
  9 |   state: {
 10 |     token: localStorage.getItem('access_token') || null,
 11 |     filter: 'all',
 12 |     todos: [],
 13 |   },
 14 |   getters: {
 15 |     loggedIn(state) {
 16 |       return state.token !== null
 17 |     },
 18 |     remaining(state) {
 19 |       return state.todos.filter(todo => !todo.completed).length
 20 |     },
 21 |     anyRemaining(state, getters) {
 22 |       return getters.remaining != 0
 23 |     },
 24 |     todosFiltered(state) {
 25 |       if (state.filter == 'all') {
 26 |         return state.todos
 27 |       } else if (state.filter == 'active') {
 28 |         return state.todos.filter(todo => !todo.completed)
 29 |       } else if (state.filter == 'completed') {
 30 |         return state.todos.filter(todo => todo.completed)
 31 |       }
 32 |       return state.todos
 33 |     },
 34 |     showClearCompletedButton(state) {
 35 |       return state.todos.filter(todo => todo.completed).length > 0
 36 |     }
 37 |   },
 38 |   mutations: {
 39 |     addTodo(state, todo) {
 40 |       state.todos.push({
 41 |         id: todo.id,
 42 |         title: todo.title,
 43 |         completed: false,
 44 |         editing: false,
 45 |       })
 46 |     },
 47 |     updateTodo(state, todo) {
 48 |       const index = state.todos.findIndex(item => item.id == todo.id)
 49 |       state.todos.splice(index, 1, {
 50 |         'id': todo.id,
 51 |         'title': todo.title,
 52 |         'completed': todo.completed,
 53 |         'editing': todo.editing,
 54 |       })
 55 |     },
 56 |     deleteTodo(state, id) {
 57 |       const index = state.todos.findIndex(item => item.id == id)
 58 |       state.todos.splice(index, 1)
 59 |     },
 60 |     checkAll(state, checked) {
 61 |       state.todos.forEach(todo => (todo.completed = checked))
 62 |     },
 63 |     updateFilter(state, filter) {
 64 |       state.filter = filter
 65 |     },
 66 |     clearCompleted(state) {
 67 |       state.todos = state.todos.filter(todo => !todo.completed)
 68 |     },
 69 |     retrieveTodos(state, todos) {
 70 |       state.todos = todos
 71 |     },
 72 |     retrieveToken(state, token) {
 73 |       state.token = token
 74 |     },
 75 |     destroyToken(state) {
 76 |       state.token = null
 77 |     },
 78 |     clearTodos(state) {
 79 |       state.todos = []
 80 |     },
 81 |   },
 82 |   actions: {
 83 |     retrieveName(context) {
 84 |       axios.defaults.headers.common['Authorization'] = 'Bearer ' + context.state.token
 85 | 
 86 |       return new Promise((resolve, reject) => {
 87 |         axios.get('/user')
 88 |           .then(response => {
 89 |             resolve(response)
 90 |           })
 91 |           .catch(error => {
 92 |             reject(error)
 93 |           })
 94 |       })
 95 |     },
 96 |     clearTodos(context) {
 97 |       context.commit('clearTodos')
 98 |     },
 99 |     register(context, data) {
100 |       return new Promise((resolve, reject) => {
101 |         axios.post('/register', {
102 |           name: data.name,
103 |           email: data.email,
104 |           password: data.password,
105 |         })
106 |           .then(response => {
107 |             resolve(response)
108 |           })
109 |           .catch(error => {
110 |             reject(error)
111 |           })
112 |       })
113 |     },
114 |     destroyToken(context) {
115 |       axios.defaults.headers.common['Authorization'] = 'Bearer ' + context.state.token
116 | 
117 |       if (context.getters.loggedIn) {
118 |         return new Promise((resolve, reject) => {
119 |           axios.post('/logout')
120 |             .then(response => {
121 |               localStorage.removeItem('access_token')
122 |               context.commit('destroyToken')
123 |               resolve(response)
124 |               // console.log(response);
125 |               // context.commit('addTodo', response.data)
126 |             })
127 |             .catch(error => {
128 |               localStorage.removeItem('access_token')
129 |               context.commit('destroyToken')
130 |               reject(error)
131 |             })
132 |         })
133 |       }
134 |     },
135 |     retrieveToken(context, credentials) {
136 | 
137 |       return new Promise((resolve, reject) => {
138 |         axios.post('/login', {
139 |           username: credentials.username,
140 |           password: credentials.password,
141 |         })
142 |           .then(response => {
143 |             const token = response.data.access_token
144 | 
145 |             localStorage.setItem('access_token', token)
146 |             context.commit('retrieveToken', token)
147 |             resolve(response)
148 |             // console.log(response);
149 |             // context.commit('addTodo', response.data)
150 |           })
151 |           .catch(error => {
152 |             console.log(error)
153 |             reject(error)
154 |           })
155 |         })
156 |     },
157 |     retrieveTodos(context) {
158 |       axios.defaults.headers.common['Authorization'] = 'Bearer ' + context.state.token
159 | 
160 |       axios.get('/todos')
161 |         .then(response => {
162 |           context.commit('retrieveTodos', response.data)
163 |         })
164 |         .catch(error => {
165 |           console.log(error)
166 |         })
167 |     },
168 |     addTodo(context, todo) {
169 |       axios.post('/todos', {
170 |         title: todo.title,
171 |         completed: false,
172 |       })
173 |         .then(response => {
174 |           context.commit('addTodo', response.data)
175 |         })
176 |         .catch(error => {
177 |           console.log(error)
178 |         })
179 |     },
180 |     updateTodo(context, todo) {
181 |       axios.patch('/todos/' + todo.id, {
182 |         title: todo.title,
183 |         completed: todo.completed,
184 |       })
185 |         .then(response => {
186 |           context.commit('updateTodo', response.data)
187 |         })
188 |         .catch(error => {
189 |           console.log(error)
190 |         })
191 |     },
192 |     deleteTodo(context, id) {
193 |       axios.delete('/todos/' + id)
194 |         .then(response => {
195 |           context.commit('deleteTodo', id)
196 |         })
197 |         .catch(error => {
198 |           console.log(error)
199 |         })
200 |     },
201 |     checkAll(context, checked) {
202 |       axios.patch('/todosCheckAll', {
203 |         completed: checked,
204 |       })
205 |         .then(response => {
206 |           context.commit('checkAll', checked)
207 |         })
208 |         .catch(error => {
209 |           console.log(error)
210 |         })
211 |     },
212 |     updateFilter(context, filter) {
213 | 
214 |       context.commit('updateFilter', filter)
215 | 
216 |     },
217 |     clearCompleted(context) {
218 |       const completed = context.state.todos
219 |         .filter(todo => todo.completed)
220 |         .map(todo => todo.id)
221 | 
222 |       axios.delete('/todosDeleteCompleted', {
223 |         data: {
224 |           todos: completed
225 |         }
226 |       })
227 |         .then(response => {
228 |           context.commit('clearCompleted')
229 |         })
230 |         .catch(error => {
231 |           console.log(error)
232 |         })
233 |     }
234 |   }
235 | })
236 | 


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