├── .babelrc
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .postcssrc.js
├── README.md
├── build
    ├── build.js
    ├── check-versions.js
    ├── logo.png
    ├── utils.js
    ├── vue-loader.conf.js
    ├── webpack.base.conf.js
    ├── webpack.dev.conf.js
    └── webpack.prod.conf.js
├── config
    ├── dev.env.js
    ├── index.js
    └── prod.env.js
├── index.html
├── package-lock.json
├── package.json
├── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   ├── Dashboard.vue
    │   ├── HelloWorld.vue
    │   ├── NewThreadPage.vue
    │   ├── SignInPage.vue
    │   ├── SignUpPage.vue
    │   ├── ThreadPage.vue
    │   └── threadPage
    │   │   ├── Comment.vue
    │   │   ├── CommentControls.vue
    │   │   └── CommentReplyForm.vue
    ├── main.js
    ├── router
    │   └── index.js
    └── services
    │   ├── comment.service.js
    │   ├── thread.service.js
    │   └── user.service.js
└── static
    └── .gitkeep


/.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 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | /build/
2 | /config/
3 | /dist/
4 | /*.js
5 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | // https://eslint.org/docs/user-guide/configuring
 2 | 
 3 | module.exports = {
 4 |   root: true,
 5 |   parserOptions: {
 6 |     parser: 'babel-eslint'
 7 |   },
 8 |   env: {
 9 |     "es6": true,
10 |     browser: true,
11 |   },
12 |   extends: [
13 |     // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
14 |     // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
15 |     'plugin:vue/essential', 
16 |     // https://github.com/standard/standard/blob/master/docs/RULES-en.md
17 |     'standard'
18 |   ],
19 |   // required to lint *.vue files
20 |   plugins: [
21 |     'vue'
22 |   ],
23 |   // add your custom rules here
24 |   rules: {
25 |     // allow async-await
26 |     'generator-star-spacing': 'off',
27 |     // allow debugger during development
28 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
29 |     "indent": [
30 |       "error",
31 |       2
32 |     ],
33 |     "quotes": [
34 |       "error",
35 |       "double"
36 |     ],
37 |     "semi": [
38 |       "error",
39 |       "always"
40 |     ],
41 |     "space-before-function-paren": [
42 |       "error",
43 |       "always"
44 |     ]
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # client
 2 | 
 3 | > A Vue.js project
 4 | 
 5 | ## Build Setup
 6 | 
 7 | ``` bash
 8 | # install dependencies
 9 | npm install
10 | 
11 | # serve with hot reload at localhost:8080
12 | npm run dev
13 | 
14 | # build for production with minification
15 | npm run build
16 | 
17 | # build for production and view the bundle analyzer report
18 | npm run build --report
19 | ```
20 | 
21 | For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
22 | 


--------------------------------------------------------------------------------
/build/build.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | require('./check-versions')()
 3 | 
 4 | process.env.NODE_ENV = 'production'
 5 | 
 6 | const ora = require('ora')
 7 | const rm = require('rimraf')
 8 | const path = require('path')
 9 | const chalk = require('chalk')
10 | const webpack = require('webpack')
11 | const config = require('../config')
12 | const webpackConfig = require('./webpack.prod.conf')
13 | 
14 | const spinner = ora('building for production...')
15 | spinner.start()
16 | 
17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
18 |   if (err) throw err
19 |   webpack(webpackConfig, (err, stats) => {
20 |     spinner.stop()
21 |     if (err) throw err
22 |     process.stdout.write(stats.toString({
23 |       colors: true,
24 |       modules: false,
25 |       children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
26 |       chunks: false,
27 |       chunkModules: false
28 |     }) + '\n\n')
29 | 
30 |     if (stats.hasErrors()) {
31 |       console.log(chalk.red('  Build failed with errors.\n'))
32 |       process.exit(1)
33 |     }
34 | 
35 |     console.log(chalk.cyan('  Build complete.\n'))
36 |     console.log(chalk.yellow(
37 |       '  Tip: built files are meant to be served over an HTTP server.\n' +
38 |       '  Opening index.html over file:// won\'t work.\n'
39 |     ))
40 |   })
41 | })
42 | 


--------------------------------------------------------------------------------
/build/check-versions.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | const chalk = require('chalk')
 3 | const semver = require('semver')
 4 | const packageConfig = require('../package.json')
 5 | const shell = require('shelljs')
 6 | 
 7 | function exec (cmd) {
 8 |   return require('child_process').execSync(cmd).toString().trim()
 9 | }
10 | 
11 | const versionRequirements = [
12 |   {
13 |     name: 'node',
14 |     currentVersion: semver.clean(process.version),
15 |     versionRequirement: packageConfig.engines.node
16 |   }
17 | ]
18 | 
19 | if (shell.which('npm')) {
20 |   versionRequirements.push({
21 |     name: 'npm',
22 |     currentVersion: exec('npm --version'),
23 |     versionRequirement: packageConfig.engines.npm
24 |   })
25 | }
26 | 
27 | module.exports = function () {
28 |   const warnings = []
29 | 
30 |   for (let i = 0; i < versionRequirements.length; i++) {
31 |     const mod = versionRequirements[i]
32 | 
33 |     if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
34 |       warnings.push(mod.name + ': ' +
35 |         chalk.red(mod.currentVersion) + ' should be ' +
36 |         chalk.green(mod.versionRequirement)
37 |       )
38 |     }
39 |   }
40 | 
41 |   if (warnings.length) {
42 |     console.log('')
43 |     console.log(chalk.yellow('To use this template, you must update following to modules:'))
44 |     console.log()
45 | 
46 |     for (let i = 0; i < warnings.length; i++) {
47 |       const warning = warnings[i]
48 |       console.log('  ' + warning)
49 |     }
50 | 
51 |     console.log()
52 |     process.exit(1)
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------
/build/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JscramblerBlog/Task-Manager-Client/6f5a2b8066f95bc149a58e4e270be362c08c0e8a/build/logo.png


--------------------------------------------------------------------------------
/build/utils.js:
--------------------------------------------------------------------------------
  1 | 'use strict'
  2 | const path = require('path')
  3 | const config = require('../config')
  4 | const ExtractTextPlugin = require('extract-text-webpack-plugin')
  5 | const packageConfig = require('../package.json')
  6 | 
  7 | exports.assetsPath = function (_path) {
  8 |   const assetsSubDirectory = process.env.NODE_ENV === 'production'
  9 |     ? config.build.assetsSubDirectory
 10 |     : config.dev.assetsSubDirectory
 11 | 
 12 |   return path.posix.join(assetsSubDirectory, _path)
 13 | }
 14 | 
 15 | exports.cssLoaders = function (options) {
 16 |   options = options || {}
 17 | 
 18 |   const cssLoader = {
 19 |     loader: 'css-loader',
 20 |     options: {
 21 |       sourceMap: options.sourceMap
 22 |     }
 23 |   }
 24 | 
 25 |   const postcssLoader = {
 26 |     loader: 'postcss-loader',
 27 |     options: {
 28 |       sourceMap: options.sourceMap
 29 |     }
 30 |   }
 31 | 
 32 |   // generate loader string to be used with extract text plugin
 33 |   function generateLoaders (loader, loaderOptions) {
 34 |     const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
 35 | 
 36 |     if (loader) {
 37 |       loaders.push({
 38 |         loader: loader + '-loader',
 39 |         options: Object.assign({}, loaderOptions, {
 40 |           sourceMap: options.sourceMap
 41 |         })
 42 |       })
 43 |     }
 44 | 
 45 |     // Extract CSS when that option is specified
 46 |     // (which is the case during production build)
 47 |     if (options.extract) {
 48 |       return ExtractTextPlugin.extract({
 49 |         use: loaders,
 50 |         fallback: 'vue-style-loader'
 51 |       })
 52 |     } else {
 53 |       return ['vue-style-loader'].concat(loaders)
 54 |     }
 55 |   }
 56 | 
 57 |   // https://vue-loader.vuejs.org/en/configurations/extract-css.html
 58 |   return {
 59 |     css: generateLoaders(),
 60 |     postcss: generateLoaders(),
 61 |     less: generateLoaders('less'),
 62 |     sass: generateLoaders('sass', { indentedSyntax: true }),
 63 |     scss: generateLoaders('sass'),
 64 |     stylus: generateLoaders('stylus'),
 65 |     styl: generateLoaders('stylus')
 66 |   }
 67 | }
 68 | 
 69 | // Generate loaders for standalone style files (outside of .vue)
 70 | exports.styleLoaders = function (options) {
 71 |   const output = []
 72 |   const loaders = exports.cssLoaders(options)
 73 | 
 74 |   for (const extension in loaders) {
 75 |     const loader = loaders[extension]
 76 |     output.push({
 77 |       test: new RegExp('\\.' + extension + '$'),
 78 |       use: loader
 79 |     })
 80 |   }
 81 | 
 82 |   return output
 83 | }
 84 | 
 85 | exports.createNotifierCallback = () => {
 86 |   const notifier = require('node-notifier')
 87 | 
 88 |   return (severity, errors) => {
 89 |     if (severity !== 'error') return
 90 | 
 91 |     const error = errors[0]
 92 |     const filename = error.file && error.file.split('!').pop()
 93 | 
 94 |     notifier.notify({
 95 |       title: packageConfig.name,
 96 |       message: severity + ': ' + error.name,
 97 |       subtitle: filename || '',
 98 |       icon: path.join(__dirname, 'logo.png')
 99 |     })
100 |   }
101 | }
102 | 


--------------------------------------------------------------------------------
/build/vue-loader.conf.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | const utils = require('./utils')
 3 | const config = require('../config')
 4 | const isProduction = process.env.NODE_ENV === 'production'
 5 | const sourceMapEnabled = isProduction
 6 |   ? config.build.productionSourceMap
 7 |   : config.dev.cssSourceMap
 8 | 
 9 | module.exports = {
10 |   loaders: utils.cssLoaders({
11 |     sourceMap: sourceMapEnabled,
12 |     extract: isProduction
13 |   }),
14 |   cssSourceMap: sourceMapEnabled,
15 |   cacheBusting: config.dev.cacheBusting,
16 |   transformToRequire: {
17 |     video: ['src', 'poster'],
18 |     source: 'src',
19 |     img: 'src',
20 |     image: 'xlink:href'
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/build/webpack.base.conf.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | const path = require('path')
 3 | const utils = require('./utils')
 4 | const config = require('../config')
 5 | const vueLoaderConfig = require('./vue-loader.conf')
 6 | 
 7 | function resolve (dir) {
 8 |   return path.join(__dirname, '..', dir)
 9 | }
10 | 
11 | const createLintingRule = () => ({
12 |   test: /\.(js|vue)$/,
13 |   loader: 'eslint-loader',
14 |   enforce: 'pre',
15 |   include: [resolve('src'), resolve('test')],
16 |   options: {
17 |     formatter: require('eslint-friendly-formatter'),
18 |     emitWarning: !config.dev.showEslintErrorsInOverlay
19 |   }
20 | })
21 | 
22 | module.exports = {
23 |   context: path.resolve(__dirname, '../'),
24 |   entry: {
25 |     app: './src/main.js'
26 |   },
27 |   output: {
28 |     path: config.build.assetsRoot,
29 |     filename: '[name].js',
30 |     publicPath: process.env.NODE_ENV === 'production'
31 |       ? config.build.assetsPublicPath
32 |       : config.dev.assetsPublicPath
33 |   },
34 |   resolve: {
35 |     extensions: ['.js', '.vue', '.json'],
36 |     alias: {
37 |       'vue$': 'vue/dist/vue.esm.js',
38 |       '@': resolve('src'),
39 |     }
40 |   },
41 |   module: {
42 |     rules: [
43 |       ...(config.dev.useEslint ? [createLintingRule()] : []),
44 |       {
45 |         test: /\.vue$/,
46 |         loader: 'vue-loader',
47 |         options: vueLoaderConfig
48 |       },
49 |       {
50 |         test: /\.js$/,
51 |         loader: 'babel-loader',
52 |         include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
53 |       },
54 |       {
55 |         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
56 |         loader: 'url-loader',
57 |         options: {
58 |           limit: 10000,
59 |           name: utils.assetsPath('img/[name].[hash:7].[ext]')
60 |         }
61 |       },
62 |       {
63 |         test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
64 |         loader: 'url-loader',
65 |         options: {
66 |           limit: 10000,
67 |           name: utils.assetsPath('media/[name].[hash:7].[ext]')
68 |         }
69 |       },
70 |       {
71 |         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
72 |         loader: 'url-loader',
73 |         options: {
74 |           limit: 10000,
75 |           name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
76 |         }
77 |       }
78 |     ]
79 |   },
80 |   node: {
81 |     // prevent webpack from injecting useless setImmediate polyfill because Vue
82 |     // source contains it (although only uses it if it's native).
83 |     setImmediate: false,
84 |     // prevent webpack from injecting mocks to Node native modules
85 |     // that does not make sense for the client
86 |     dgram: 'empty',
87 |     fs: 'empty',
88 |     net: 'empty',
89 |     tls: 'empty',
90 |     child_process: 'empty'
91 |   }
92 | }
93 | 


--------------------------------------------------------------------------------
/build/webpack.dev.conf.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | const utils = require('./utils')
 3 | const webpack = require('webpack')
 4 | const config = require('../config')
 5 | const merge = require('webpack-merge')
 6 | const path = require('path')
 7 | const baseWebpackConfig = require('./webpack.base.conf')
 8 | const CopyWebpackPlugin = require('copy-webpack-plugin')
 9 | const HtmlWebpackPlugin = require('html-webpack-plugin')
10 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
11 | const portfinder = require('portfinder')
12 | 
13 | const HOST = process.env.HOST
14 | const PORT = process.env.PORT && Number(process.env.PORT)
15 | 
16 | const devWebpackConfig = merge(baseWebpackConfig, {
17 |   module: {
18 |     rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
19 |   },
20 |   // cheap-module-eval-source-map is faster for development
21 |   devtool: config.dev.devtool,
22 | 
23 |   // these devServer options should be customized in /config/index.js
24 |   devServer: {
25 |     clientLogLevel: 'warning',
26 |     historyApiFallback: {
27 |       rewrites: [
28 |         { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
29 |       ],
30 |     },
31 |     hot: true,
32 |     contentBase: false, // since we use CopyWebpackPlugin.
33 |     compress: true,
34 |     host: HOST || config.dev.host,
35 |     port: PORT || config.dev.port,
36 |     open: config.dev.autoOpenBrowser,
37 |     overlay: config.dev.errorOverlay
38 |       ? { warnings: false, errors: true }
39 |       : false,
40 |     publicPath: config.dev.assetsPublicPath,
41 |     proxy: config.dev.proxyTable,
42 |     quiet: true, // necessary for FriendlyErrorsPlugin
43 |     watchOptions: {
44 |       poll: config.dev.poll,
45 |     }
46 |   },
47 |   plugins: [
48 |     new webpack.DefinePlugin({
49 |       'process.env': require('../config/dev.env')
50 |     }),
51 |     new webpack.HotModuleReplacementPlugin(),
52 |     new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
53 |     new webpack.NoEmitOnErrorsPlugin(),
54 |     // https://github.com/ampedandwired/html-webpack-plugin
55 |     new HtmlWebpackPlugin({
56 |       filename: 'index.html',
57 |       template: 'index.html',
58 |       inject: true
59 |     }),
60 |     // copy custom static assets
61 |     new CopyWebpackPlugin([
62 |       {
63 |         from: path.resolve(__dirname, '../static'),
64 |         to: config.dev.assetsSubDirectory,
65 |         ignore: ['.*']
66 |       }
67 |     ])
68 |   ]
69 | })
70 | 
71 | module.exports = new Promise((resolve, reject) => {
72 |   portfinder.basePort = process.env.PORT || config.dev.port
73 |   portfinder.getPort((err, port) => {
74 |     if (err) {
75 |       reject(err)
76 |     } else {
77 |       // publish the new Port, necessary for e2e tests
78 |       process.env.PORT = port
79 |       // add port to devServer config
80 |       devWebpackConfig.devServer.port = port
81 | 
82 |       // Add FriendlyErrorsPlugin
83 |       devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
84 |         compilationSuccessInfo: {
85 |           messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
86 |         },
87 |         onErrors: config.dev.notifyOnErrors
88 |         ? utils.createNotifierCallback()
89 |         : undefined
90 |       }))
91 | 
92 |       resolve(devWebpackConfig)
93 |     }
94 |   })
95 | })
96 | 


--------------------------------------------------------------------------------
/build/webpack.prod.conf.js:
--------------------------------------------------------------------------------
  1 | 'use strict'
  2 | const path = require('path')
  3 | const utils = require('./utils')
  4 | const webpack = require('webpack')
  5 | const config = require('../config')
  6 | const merge = require('webpack-merge')
  7 | const baseWebpackConfig = require('./webpack.base.conf')
  8 | const CopyWebpackPlugin = require('copy-webpack-plugin')
  9 | const HtmlWebpackPlugin = require('html-webpack-plugin')
 10 | const ExtractTextPlugin = require('extract-text-webpack-plugin')
 11 | const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
 12 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 13 | 
 14 | const env = require('../config/prod.env')
 15 | 
 16 | const webpackConfig = merge(baseWebpackConfig, {
 17 |   module: {
 18 |     rules: utils.styleLoaders({
 19 |       sourceMap: config.build.productionSourceMap,
 20 |       extract: true,
 21 |       usePostCSS: true
 22 |     })
 23 |   },
 24 |   devtool: config.build.productionSourceMap ? config.build.devtool : false,
 25 |   output: {
 26 |     path: config.build.assetsRoot,
 27 |     filename: utils.assetsPath('js/[name].[chunkhash].js'),
 28 |     chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
 29 |   },
 30 |   plugins: [
 31 |     // http://vuejs.github.io/vue-loader/en/workflow/production.html
 32 |     new webpack.DefinePlugin({
 33 |       'process.env': env
 34 |     }),
 35 |     new UglifyJsPlugin({
 36 |       uglifyOptions: {
 37 |         compress: {
 38 |           warnings: false
 39 |         }
 40 |       },
 41 |       sourceMap: config.build.productionSourceMap,
 42 |       parallel: true
 43 |     }),
 44 |     // extract css into its own file
 45 |     new ExtractTextPlugin({
 46 |       filename: utils.assetsPath('css/[name].[contenthash].css'),
 47 |       // Setting the following option to `false` will not extract CSS from codesplit chunks.
 48 |       // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
 49 |       // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 
 50 |       // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
 51 |       allChunks: true,
 52 |     }),
 53 |     // Compress extracted CSS. We are using this plugin so that possible
 54 |     // duplicated CSS from different components can be deduped.
 55 |     new OptimizeCSSPlugin({
 56 |       cssProcessorOptions: config.build.productionSourceMap
 57 |         ? { safe: true, map: { inline: false } }
 58 |         : { safe: true }
 59 |     }),
 60 |     // generate dist index.html with correct asset hash for caching.
 61 |     // you can customize output by editing /index.html
 62 |     // see https://github.com/ampedandwired/html-webpack-plugin
 63 |     new HtmlWebpackPlugin({
 64 |       filename: config.build.index,
 65 |       template: 'index.html',
 66 |       inject: true,
 67 |       minify: {
 68 |         removeComments: true,
 69 |         collapseWhitespace: true,
 70 |         removeAttributeQuotes: true
 71 |         // more options:
 72 |         // https://github.com/kangax/html-minifier#options-quick-reference
 73 |       },
 74 |       // necessary to consistently work with multiple chunks via CommonsChunkPlugin
 75 |       chunksSortMode: 'dependency'
 76 |     }),
 77 |     // keep module.id stable when vendor modules does not change
 78 |     new webpack.HashedModuleIdsPlugin(),
 79 |     // enable scope hoisting
 80 |     new webpack.optimize.ModuleConcatenationPlugin(),
 81 |     // split vendor js into its own file
 82 |     new webpack.optimize.CommonsChunkPlugin({
 83 |       name: 'vendor',
 84 |       minChunks (module) {
 85 |         // any required modules inside node_modules are extracted to vendor
 86 |         return (
 87 |           module.resource &&
 88 |           /\.js$/.test(module.resource) &&
 89 |           module.resource.indexOf(
 90 |             path.join(__dirname, '../node_modules')
 91 |           ) === 0
 92 |         )
 93 |       }
 94 |     }),
 95 |     // extract webpack runtime and module manifest to its own file in order to
 96 |     // prevent vendor hash from being updated whenever app bundle is updated
 97 |     new webpack.optimize.CommonsChunkPlugin({
 98 |       name: 'manifest',
 99 |       minChunks: Infinity
100 |     }),
101 |     // This instance extracts shared chunks from code splitted chunks and bundles them
102 |     // in a separate chunk, similar to the vendor chunk
103 |     // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
104 |     new webpack.optimize.CommonsChunkPlugin({
105 |       name: 'app',
106 |       async: 'vendor-async',
107 |       children: true,
108 |       minChunks: 3
109 |     }),
110 | 
111 |     // copy custom static assets
112 |     new CopyWebpackPlugin([
113 |       {
114 |         from: path.resolve(__dirname, '../static'),
115 |         to: config.build.assetsSubDirectory,
116 |         ignore: ['.*']
117 |       }
118 |     ])
119 |   ]
120 | })
121 | 
122 | if (config.build.productionGzip) {
123 |   const CompressionWebpackPlugin = require('compression-webpack-plugin')
124 | 
125 |   webpackConfig.plugins.push(
126 |     new CompressionWebpackPlugin({
127 |       asset: '[path].gz[query]',
128 |       algorithm: 'gzip',
129 |       test: new RegExp(
130 |         '\\.(' +
131 |         config.build.productionGzipExtensions.join('|') +
132 |         ')$'
133 |       ),
134 |       threshold: 10240,
135 |       minRatio: 0.8
136 |     })
137 |   )
138 | }
139 | 
140 | if (config.build.bundleAnalyzerReport) {
141 |   const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
142 |   webpackConfig.plugins.push(new BundleAnalyzerPlugin())
143 | }
144 | 
145 | module.exports = webpackConfig
146 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 |     //   "/api": "http://localhost:3000"
15 |     // },
16 | 
17 |     // Various Dev Server settings
18 |     host: "localhost", // can be overwritten by process.env.HOST
19 |     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
20 |     autoOpenBrowser: false,
21 |     errorOverlay: true,
22 |     notifyOnErrors: true,
23 |     poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
24 | 
25 |     // Use Eslint Loader?
26 |     // If true, your code will be linted during bundling and
27 |     // linting errors and warnings will be shown in the console.
28 |     useEslint: true,
29 |     // If true, eslint errors and warnings will also be shown in the error overlay
30 |     // in the browser.
31 |     showEslintErrorsInOverlay: false,
32 | 
33 |     /**
34 |      * Source Maps
35 |      */
36 | 
37 |     // https://webpack.js.org/configuration/devtool/#development
38 |     devtool: "cheap-module-eval-source-map",
39 | 
40 |     // If you have problems debugging vue-files in devtools,
41 |     // set this to false - it *may* help
42 |     // https://vue-loader.vuejs.org/en/options.html#cachebusting
43 |     cacheBusting: true,
44 | 
45 |     cssSourceMap: true
46 |   },
47 | 
48 |   build: {
49 |     // Template for index.html
50 |     index: path.resolve(__dirname, "../dist/index.html"),
51 | 
52 |     // Paths
53 |     assetsRoot: path.resolve(__dirname, "../dist"),
54 |     assetsSubDirectory: "static",
55 |     assetsPublicPath: "/",
56 | 
57 |     /**
58 |      * Source Maps
59 |      */
60 | 
61 |     productionSourceMap: true,
62 |     // https://webpack.js.org/configuration/devtool/#production
63 |     devtool: "#source-map",
64 | 
65 |     // Gzip off by default as many popular static hosts such as
66 |     // Surge or Netlify already gzip all static assets for you.
67 |     // Before setting to `true`, make sure to:
68 |     // npm install --save-dev compression-webpack-plugin
69 |     productionGzip: false,
70 |     productionGzipExtensions: ["js", "css"],
71 | 
72 |     // Run the build command with an extra argument to
73 |     // View the bundle analyzer report after build finishes:
74 |     // `npm run build --report`
75 |     // Set to `true` or `false` to always turn it on or off
76 |     bundleAnalyzerReport: process.env.npm_config_report
77 |   }
78 | };
79 | 


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


--------------------------------------------------------------------------------
/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>client</title>
 7 |   </head>
 8 |   <body>
 9 |     <div id="app"></div>
10 |     <!-- built files will be auto injected -->
11 |   </body>
12 | </html>
13 | 


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


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <div class="title-bar">
  4 |       <router-link :to="{ name: 'Dashboard'}">Home</router-link>
  5 |     </div>
  6 |     <div class="content">
  7 |       <div class="main-content">
  8 |         <router-view/>
  9 |       </div>
 10 |       <div class="sidebar">
 11 |         <p>
 12 |           <router-link class="new-post-link" :to="{ name: 'NewThreadPage'}">
 13 |             Create Thread
 14 |           </router-link>
 15 |         </p>
 16 |         <p>
 17 |           <router-link class="sign-up-link" :to="{ name: 'SignUpPage'}">
 18 |             Sign up
 19 |           </router-link>
 20 |         </p>
 21 |         <p>
 22 |           <router-link class="sign-in-link" :to="{ name: 'SignInPage'}">
 23 |             Sign In
 24 |           </router-link>
 25 |         </p>
 26 |         <div v-if="user">
 27 |           <p>Firstname: {{ user.first_name }}</p>
 28 |           <p>Lastname: {{ user.last_name }}</p>
 29 |         </div>
 30 |       </div>
 31 |     </div>
 32 |   </div>
 33 | </template>
 34 | 
 35 | <script>
 36 | import userService from "./services/user.service";
 37 | export default {
 38 |   name: "App",
 39 |   data () {
 40 |     return {
 41 |       user: null
 42 |     }
 43 |   },
 44 |   mounted () {
 45 |     if (this.user === null) {
 46 |       userService.getUser().then((user) => {
 47 |         this.$set(this, "user", user);
 48 |       });
 49 |     }
 50 |   }
 51 | };
 52 | </script>
 53 | 
 54 | <style>
 55 | body {
 56 |   background-color: #DAE0E6;
 57 |   margin: 0;
 58 | }
 59 | #app {
 60 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
 61 |   -webkit-font-smoothing: antialiased;
 62 |   -moz-osx-font-smoothing: grayscale;
 63 |   text-align: center;
 64 |   color: #2c3e50;
 65 | }
 66 | * {
 67 |   box-sizing: border-box;
 68 | }
 69 | .content {
 70 |   display: flex;
 71 |   flex-direction: row;
 72 |   width: 60%;
 73 |   margin: 40px auto 0;
 74 | }
 75 | .title-bar {
 76 |   padding: 20px;
 77 | }
 78 | .main-content {
 79 |   width: 70%;
 80 |   margin-right: 30px;
 81 | }
 82 | .sidebar {
 83 |   width: 30%;
 84 |   height: 500px;
 85 |   padding: 5px 10px;
 86 |   background-color: #FFFFFF;
 87 | }
 88 | .new-post-link {
 89 |   background-color: #5c5cdc;
 90 |   color: #FFFFFF;
 91 |   display: block;
 92 |   text-transform: uppercase;
 93 |   padding: 10px;
 94 |   font-weight: 600;
 95 |   text-decoration: none;
 96 | }
 97 | .title-bar {
 98 |   background-color: #FFFFFF;
 99 | }
100 | </style>
101 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JscramblerBlog/Task-Manager-Client/6f5a2b8066f95bc149a58e4e270be362c08c0e8a/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/Dashboard.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="threads-list">
 3 |     <h2>My Threads</h2>
 4 |     <div v-for="thread in myThreads" :key="thread._id" class="thread">
 5 |       <router-link :to="{ name: 'ThreadPage', params: {threadId: thread._id }}">
 6 |         <p class="title-container">
 7 |           <a class="thread-title">{{ thread.title }}</a>
 8 |         </p>
 9 |         <p class="description-container">{{ thread.description }}</p>
10 |       </router-link>
11 |     </div>
12 |     <h2>Other Threads</h2>
13 |     <div v-for="thread in otherThreads" :key="thread._id" class="thread">
14 |       <router-link :to="{ name: 'ThreadPage', params: {threadId: thread._id }}">
15 |         <p class="title-container">
16 |           <a class="thread-title">{{ thread.title }}</a>
17 |         </p>
18 |         <p class="description-container">{{ thread.description }}</p>
19 |       </router-link>
20 |     </div>
21 |     <p v-if="myThreads.length === 0 && otherThreads.length === 0">No threads yet</p>
22 |   </div>
23 | </template>
24 | 
25 | <script>
26 | import threadService from "../services/thread.service";
27 | export default {
28 |   data () {
29 |     return {
30 |       myThreads: [],
31 |       otherThreads: []
32 |     };
33 |   },
34 |   mounted (params) {
35 |     threadService.findAll().then(data => {
36 |       this.$set(this, "myThreads", data.myThreads);
37 |       this.$set(this, "otherThreads", data.otherThreads);
38 |     });
39 |   }
40 | };
41 | </script>
42 | 
43 | <style lang="scss" scoped>
44 | .thread {
45 |   border: 1px solid #cccccc;
46 |   background-color: #ffffff;
47 |   padding: 10px;
48 |   margin-bottom: 15px;
49 |   text-align: left;
50 |   > a {
51 |     color: #000000;
52 |     text-decoration: none;
53 |   }
54 |   .title-container {
55 |     margin-top: 0;
56 |   }
57 |   .thread-title {
58 |     color: #000000;
59 |     font-weight: 600;
60 |     font-size: 22px;
61 |     text-decoration: none;
62 |   }
63 |   .description-container {
64 |     margin: 0;
65 |   }
66 |   &:hover {
67 |     border-color: #a9a8a8;
68 |   }
69 | }
70 | </style>
71 | 


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="hello">
  3 |     <h1>{{ msg }}</h1>
  4 |     <h2>Essential Links</h2>
  5 |     <ul>
  6 |       <li>
  7 |         <a
  8 |           href="https://vuejs.org"
  9 |           target="_blank"
 10 |         >
 11 |           Core Docs
 12 |         </a>
 13 |       </li>
 14 |       <li>
 15 |         <a
 16 |           href="https://forum.vuejs.org"
 17 |           target="_blank"
 18 |         >
 19 |           Forum
 20 |         </a>
 21 |       </li>
 22 |       <li>
 23 |         <a
 24 |           href="https://chat.vuejs.org"
 25 |           target="_blank"
 26 |         >
 27 |           Community Chat
 28 |         </a>
 29 |       </li>
 30 |       <li>
 31 |         <a
 32 |           href="https://twitter.com/vuejs"
 33 |           target="_blank"
 34 |         >
 35 |           Twitter
 36 |         </a>
 37 |       </li>
 38 |       <br>
 39 |       <li>
 40 |         <a
 41 |           href="http://vuejs-templates.github.io/webpack/"
 42 |           target="_blank"
 43 |         >
 44 |           Docs for This Template
 45 |         </a>
 46 |       </li>
 47 |     </ul>
 48 |     <h2>Ecosystem</h2>
 49 |     <ul>
 50 |       <li>
 51 |         <a
 52 |           href="http://router.vuejs.org/"
 53 |           target="_blank"
 54 |         >
 55 |           vue-router
 56 |         </a>
 57 |       </li>
 58 |       <li>
 59 |         <a
 60 |           href="http://vuex.vuejs.org/"
 61 |           target="_blank"
 62 |         >
 63 |           vuex
 64 |         </a>
 65 |       </li>
 66 |       <li>
 67 |         <a
 68 |           href="http://vue-loader.vuejs.org/"
 69 |           target="_blank"
 70 |         >
 71 |           vue-loader
 72 |         </a>
 73 |       </li>
 74 |       <li>
 75 |         <a
 76 |           href="https://github.com/vuejs/awesome-vue"
 77 |           target="_blank"
 78 |         >
 79 |           awesome-vue
 80 |         </a>
 81 |       </li>
 82 |     </ul>
 83 |   </div>
 84 | </template>
 85 | 
 86 | <script>
 87 | export default {
 88 |   name: "HelloWorld",
 89 |   data () {
 90 |     return {
 91 |       msg: "Welcome to Your Vue.js App"
 92 |     };
 93 |   }
 94 | };
 95 | </script>
 96 | 
 97 | <!-- Add "scoped" attribute to limit CSS to this component only -->
 98 | <style scoped>
 99 | h1, h2 {
100 |   font-weight: normal;
101 | }
102 | ul {
103 |   list-style-type: none;
104 |   padding: 0;
105 | }
106 | li {
107 |   display: inline-block;
108 |   margin: 0 10px;
109 | }
110 | a {
111 |   color: #42b983;
112 | }
113 | </style>
114 | 


--------------------------------------------------------------------------------
/src/components/NewThreadPage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2>Create Thread</h2>
 4 |     <form v-on:submit.prevent="onSubmit" class="new-thread-form" action="">
 5 |       <p>
 6 |         <input type="text" placeholder="Title" name="title" id="title" v-model="title">
 7 |       </p>
 8 |       <p>
 9 |         <textarea name="description" placeholder="Text(optional)" id="description" v-model="description" cols="30" rows="10"></textarea>
10 |       </p>
11 |       <p class="submit-button-container">
12 |         <input type="submit" value="Post">
13 |       </p>
14 |     </form>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 | import threadService from "../services/thread.service";
20 | export default {
21 |   data () {
22 |     return {
23 |       title: "",
24 |       description: ""
25 |     };
26 |   },
27 |   methods: {
28 |     onSubmit () {
29 |       if (this.title.length === 0) {
30 |         alert("You must enter a title");
31 |       }
32 |       threadService.create(this.title, this.description).then((newThread) => {
33 |         this.$router.push({name: "ThreadPage", params: {threadId: newThread._id }});
34 |       });
35 |     }
36 |   }
37 | };
38 | </script>
39 | 
40 | <style lang="scss" scoped>
41 | h2 {
42 |   margin-top: 0;
43 |   text-align: left;
44 | }
45 | .new-thread-form {
46 |   background-color: #ffffff;
47 |   padding: 20px;
48 |   p {
49 |     margin: 0;
50 |   }
51 |   input[type=text], textarea {
52 |     width: 100%;
53 |     display: block;
54 |     padding: 10px;
55 |     margin: 0 0 20px;
56 |     border: 1px solid #dcdcdc;
57 |     border-radius: 3px;
58 |   }
59 |   .submit-button-container {
60 |     text-align: right;
61 |     padding: 5px;
62 |     input {
63 |       background-color: #5c5cdc;
64 |       color: #ffffff;
65 |       text-transform: uppercase;
66 |       padding: 10px;
67 |       font-weight: 600;
68 |       text-decoration: none;
69 |     }
70 |   }
71 | }
72 | </style>
73 | 


--------------------------------------------------------------------------------
/src/components/SignInPage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div>
 3 |     <form v-on:submit.prevent="onSubmit">
 4 |         <p>
 5 |             <input placeholder="Email" type="text" name="email" v-model="email">
 6 |         </p>
 7 |         <p>
 8 |             <input placeholder="Password" type="password" name="password" v-model="password">
 9 |         </p>
10 |         <p>
11 |             <input type="submit" value="Signin">
12 |         </p>
13 |     </form>
14 | </div>    
15 | </template>
16 | 
17 | <script>
18 | import userService from "../services/user.service";
19 | export default {
20 |     data () {
21 |         return {
22 |             email: "",
23 |             password: ""
24 |         }
25 |     },
26 |     methods: {
27 |         onSubmit () {
28 |             userService.signIn(this.email, this.password)
29 |                 .then(((user) => {
30 |                     console.log("Logged in");
31 |                     this.$router.push({name: "Dashboard"});
32 |                 }).bind(this)).catch(() => {
33 |                     console.log("Error logging in");
34 |                 });
35 |         }
36 |     }
37 | }
38 | </script>
39 | 
40 | <style lang="scss" scoped>
41 | 
42 | </style>
43 | 


--------------------------------------------------------------------------------
/src/components/SignUpPage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div>
 3 |     <form v-on:submit.prevent="onSubmit">
 4 |         <p>
 5 |             <input placeholder="Firstname" type="text" name="firstName" v-model="firstName">
 6 |         </p>
 7 |         <p>
 8 |             <input placeholder="Lastname" type="text" name="lastName" v-model="lastName">
 9 |         </p>
10 |         <p>
11 |             <input placeholder="Email" type="text" name="email" v-model="email">
12 |         </p>
13 |         <p>
14 |             <input placeholder="Password" type="password" name="password" v-model="password">
15 |         </p>
16 |         <p>
17 |             <input type="submit" value="Signup">
18 |         </p>
19 |     </form>
20 | </div>
21 | </template>
22 | 
23 | <script>
24 | import userService from "../services/user.service";
25 | export default {
26 |     data () {
27 |         return {
28 |             firstName: "",
29 |             lastName: "",
30 |             email: "",
31 |             password: ""
32 |         }
33 |     },
34 |     methods: {
35 |         onSubmit () {
36 |             userService.signUp(this.firstName, this.lastName, this.email, this.password)
37 |                 .then(() => {
38 |                     alert("Signup successful");
39 |                     this.$router.push({name: "SignInPage"});  
40 |                 })
41 |                 .catch(() => {
42 |                     alert("error signing up. please check the provided data.");
43 |                 });
44 |         }
45 |     }
46 | }
47 | </script>
48 | 
49 | <style lang="scss" scoped>
50 | 
51 | </style>
52 | 


--------------------------------------------------------------------------------
/src/components/ThreadPage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="single-thread">
 3 |     <div class="thread-content" v-if="thread !== null">
 4 |       <h2>{{ thread.title }}</h2>
 5 |       <p>{{ thread.description }}</p>
 6 |     </div>
 7 |     <comment-reply-form
 8 |       v-if="thread !== null"
 9 |       :key="thread._id"
10 |       :threadId="thread._id"
11 |       :parentCommentId="null"
12 |       v-on:comment-created="handleCommentCreated"
13 |       >
14 |     </comment-reply-form>
15 |     <div class="comments-list">
16 |       <comment
17 |         v-for="comment in comments"
18 |         :comment="comment"
19 |         :key="comment._id"
20 |       ></comment>
21 |     </div>
22 |     <p><span class="load-more-comments-link" v-on:click="loadMoreComments">Load more comments</span></p>
23 |   </div>
24 | </template>
25 | 
26 | <script>
27 | import commentService from "../services/comment.service";
28 | import Comment from "./threadPage/Comment";
29 | import CommentReplyForm from "./threadPage/CommentReplyForm";
30 | export default {
31 |   components: {
32 |     Comment,
33 |     CommentReplyForm
34 |   },
35 |   name: "ThreadPage",
36 |   data () {
37 |     return {
38 |       comments: [],
39 |       thread: null
40 |     };
41 |   },
42 |   methods: {
43 |     handleCommentCreated (newComment) {
44 |       this.comments.push(newComment);
45 |     },
46 |     loadMoreComments () {
47 |       let existingCommentIds = this.comments.map(comment => comment.ownProperties._id);
48 |       commentService.loadMoreComments(this.thread._id, existingCommentIds, null)
49 |         .then(((comments) => {
50 |           let nonExistingComments = comments.filter((comment) => {
51 |             return !this.comments.find((existingComment) => {
52 |               return existingComment.ownProperties._id === comment.ownProperties._id;
53 |             });
54 |           });
55 |           debugger;
56 |           nonExistingComments.forEach((comment) => {
57 |             this.comments.push(comment);
58 |           });
59 |         }).bind(this))
60 |     }
61 |   },
62 |   mounted () {
63 |     commentService.findAllByThreadId(this.$route.params.threadId).then(data => {
64 |       // debugger;
65 |       this.$set(this, "comments", data.comments);
66 |       this.$set(this, "thread", data.thread);
67 |     });
68 |   }
69 | };
70 | </script>
71 | 
72 | <style lang="scss" scoped>
73 | .comments-list {
74 |   padding: 10px;
75 | }
76 | .single-thread {
77 |   background-color: #ffffff;
78 |   text-align: left;
79 |   padding: 10px;
80 | }
81 | .thread-content {
82 |   h2 {
83 |     margin-top: 0;
84 |   }
85 | }
86 | .load-more-comments-link {
87 |   cursor: pointer;
88 | }
89 | </style>
90 | 


--------------------------------------------------------------------------------
/src/components/threadPage/Comment.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="comment">
 3 |     <span class="comment-indicator">&nbsp;</span>
 4 |     <p class="date-time">posted on: {{ comment.ownProperties.createdAt }}</p>
 5 |     <p class="comment-text">{{ comment.ownProperties.text }}</p>
 6 |     <comment-controls
 7 |       :threadId="currentComment.ownProperties.thread_id"
 8 |       :parentCommentId="currentComment.ownProperties._id"
 9 |       :showForm="false"
10 |       v-on:comment-created="handleCommentCreated"
11 |     ></comment-controls>
12 |     <div class="sub-comments">
13 |       <div class="comments-container">
14 |         <comment
15 |           v-for="subComment in childComments"
16 |           :key="subComment._id"
17 |           :comment="subComment"
18 |         ></comment>
19 |       </div>
20 |     </div>
21 |     <p><span class="load-more-comments-link" v-on:click="loadMoreComments">Load more comments</span></p>
22 |   </div>
23 | </template>
24 | 
25 | <script>
26 | import CommentControls from "./CommentControls";
27 | import commentService from "../../services/comment.service";
28 | export default {
29 |   props: ["comment"],
30 |   data () {
31 |     return {
32 |       currentComment: this.comment,
33 |       childComments: this.comment.childComments
34 |     }
35 |   },
36 |   name: "Comment",
37 |   components: {
38 |     CommentControls
39 |   },
40 |   methods: {
41 |     handleCommentCreated (newComment) {
42 |       this.childComments.push(newComment);
43 |     },
44 |     loadMoreComments () {
45 |       let existingCommentIds = this.childComments.map(comment => comment.ownProperties._id);
46 |       commentService.loadMoreComments(
47 |           this.currentComment.ownProperties.thread_id,
48 |           existingCommentIds,
49 |           this.currentComment.ownProperties._id
50 |         )
51 |         .then(((comments) => {
52 |           let nonExistingComments = comments.filter((comment) => {
53 |             return !this.childComments.find((existingComment) => {
54 |               return existingComment.ownProperties._id === comment.ownProperties._id;
55 |             });
56 |           });
57 |           debugger;
58 |           nonExistingComments.forEach((comment) => {
59 |             this.childComments.push(comment);
60 |           });
61 |         }).bind(this))
62 |     }
63 |   }
64 | };
65 | </script>
66 | 
67 | <style lang="scss" scoped>
68 | .comment {
69 |   border-left: 1px solid #cccccc;
70 |   padding-left: 20px;
71 |   position: relative;
72 | }
73 | .comment-text {
74 |   margin-top: 10px;
75 |   margin-bottom: 10px;
76 |   text-align: left;
77 | }
78 | .date-time {
79 |   font-size: 12px;
80 |   color: #7b7b7b;
81 | }
82 | .comment-indicator {
83 |   position: absolute;
84 |   width: 15px;
85 |   height: 15px;
86 |   top: 0;
87 |   left: 0;
88 |   background-color: #989898;
89 | }
90 | </style>
91 | 


--------------------------------------------------------------------------------
/src/components/threadPage/CommentControls.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <p class="controls-container">
 4 |       <button v-on:click="onReplyButtonClick">Reply</button>
 5 |     </p>
 6 |     <comment-reply-form
 7 |       v-if="shouldShowReplyForm"
 8 |       :threadId="threadId"
 9 |       :parentCommentId="parentCommentId"
10 |       v-on:comment-created="$emit('comment-created', $event)"
11 |     ></comment-reply-form>
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 | import CommentReplyForm from "./CommentReplyForm";
17 | export default {
18 |   props: ["threadId", "parentCommentId"],
19 |   name: "CommentControls",
20 |   data () {
21 |     return {
22 |       shouldShowReplyForm: false
23 |     };
24 |   },
25 |   components: {
26 |     CommentReplyForm
27 |   },
28 |   methods: {
29 |     onReplyButtonClick () {
30 |       this.$set(this, "shouldShowReplyForm", !this.shouldShowReplyForm);
31 |     }
32 |   }
33 | };
34 | </script>
35 | 
36 | <style lang="scss">
37 | 
38 | </style>
39 | 


--------------------------------------------------------------------------------
/src/components/threadPage/CommentReplyForm.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <form v-on:submit.prevent="onReply" class="comment-reply-form">
 3 |     <p>
 4 |       <textarea name="text" id="text" v-model="text" cols="30" rows="10"></textarea>
 5 |     </p>
 6 |     <p class="submit-button-container">
 7 |       <input type="submit" value="Comment">
 8 |     </p>
 9 |   </form>
10 | </template>
11 | 
12 | <script>
13 | import commentService from "../../services/comment.service";
14 | export default {
15 |   props: ["threadId", "parentCommentId"],
16 |   data () {
17 |     return {
18 |       text: ""
19 |     };
20 |   },
21 |   name: "CommentReplyForm",
22 |   methods: {
23 |     onReply () {
24 |       if (this.text.length === 0) {
25 |         alert("You must enter text for the comment");
26 |       }
27 | 
28 |       let $self = this;
29 | 
30 |       commentService.create(this.threadId, this.parentCommentId, this.text)
31 |         .then((comment) => {
32 |           $self.$emit("comment-created", comment);
33 |         });
34 |     }
35 |   }
36 | };
37 | </script>
38 | 
39 | <style lang="scss" scoped>
40 | .comment-reply-form {
41 |   background-color: #ffffff;
42 |   border: 1px solid #dcdcdc;
43 |   p {
44 |     margin: 0;
45 |   }
46 |   textarea {
47 |     width: 100%;
48 |     display: block;
49 |     padding: 10px;
50 |     margin: 0 0 20px;
51 |     border-radius: 3px;
52 |     outline: none;
53 |     border: 0;
54 |   }
55 |   .submit-button-container {
56 |     text-align: right;
57 |     padding: 5px;
58 |     background-color: #f0f2f5;
59 |     input {
60 |       background-color: #5c5cdc;
61 |       color: #ffffff;
62 |       text-transform: uppercase;
63 |       padding: 10px;
64 |       font-weight: 600;
65 |       text-decoration: none;
66 |     }
67 |   }
68 | }
69 | </style>
70 | 


--------------------------------------------------------------------------------
/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 App from "./App";
 5 | import router from "./router";
 6 | import axios from "axios";
 7 | 
 8 | Vue.config.productionTip = false;
 9 | 
10 | axios.defaults.baseURL = "http://localhost:3000";
11 | axios.defaults.withCredentials = true;
12 | 
13 | /* eslint-disable no-new */
14 | new Vue({
15 |   el: "#app",
16 |   router,
17 |   components: { App },
18 |   template: "<App/>"
19 | });
20 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import Router from "vue-router";
 3 | import Dashboard from "@/components/Dashboard";
 4 | import ThreadPage from "@/components/ThreadPage";
 5 | import NewThreadPage from "@/components/NewThreadPage";
 6 | import SignUpPage from "@/components/SignUpPage";
 7 | import SignInPage from "@/components/SignInPage";
 8 | import VueCookies from "vue-cookies";
 9 | import userService from "../services/user.service";
10 | 
11 | Vue.use(VueCookies);
12 | Vue.use(Router);
13 | 
14 | let router = new Router({
15 |   routes: [
16 |     {
17 |       path: "/",
18 |       name: "Dashboard",
19 |       component: Dashboard,
20 |       meta: {needsAuth: true}
21 |     },
22 |     {
23 |       path: "/threads/show/:threadId",
24 |       name: "ThreadPage",
25 |       component: ThreadPage,
26 |       meta: {needsAuth: true}
27 |     },
28 |     {
29 |       path: "/threads/new",
30 |       name: "NewThreadPage",
31 |       component: NewThreadPage,
32 |       meta: {needsAuth: true}
33 |     },
34 |     {
35 |       path: "/signup",
36 |       name: "SignUpPage",
37 |       component: SignUpPage,
38 |       meta: {needsAuth: false}
39 |     },
40 |     {
41 |       path: "/signin",
42 |       name: "SignInPage",
43 |       component: SignInPage,
44 |       meta: {needsAuth: false}
45 |     }
46 |   ]
47 | });
48 | 
49 | router.beforeEach((to, from, next) => {
50 |   if (to.matched.some((record) => record.meta.needsAuth)) {
51 |     userService.getUser()
52 |       .then((user) => {
53 |         if (user) {
54 |           next();
55 |         } else {
56 |           next("/signin");
57 |         }
58 |       })
59 |       .catch(() => {
60 |         next("/signin");
61 |       });
62 |   } else {
63 |     userService.getUser()
64 |       .then((user) => {
65 |         if (user) {
66 |           next("/");
67 |         } else {
68 |           next();
69 |         }
70 |       })
71 |       .catch(() => {
72 |         next();
73 |       });
74 |   }
75 | });
76 | 
77 | export default router;
78 | 


--------------------------------------------------------------------------------
/src/services/comment.service.js:
--------------------------------------------------------------------------------
 1 | import axios from "axios";
 2 | 
 3 | export default {
 4 |   findAllByThreadId (threadId) {
 5 |     return axios.get(
 6 |       "/api/comments",
 7 |       {
 8 |         params: {
 9 |           threadId: threadId
10 |         }
11 |       }
12 |     )
13 |       .then((res) => res.data);
14 |   },
15 |   create (threadId, parentCommentId, text) {
16 |     return axios.post("/api/comments", {threadId, parentCommentId, text})
17 |       .then((res) => res.data);
18 |   },
19 |   loadMoreComments (threadId, existingCommentIds, parentCommentId) {
20 |     // debugger;
21 |     return axios.get(
22 |       "/api/loadmorecomments",
23 |       {
24 |         params: {
25 |           threadId: threadId,
26 |           parentCommentId: parentCommentId,
27 |           existingCommentIds: existingCommentIds
28 |         }
29 |       }
30 |     )
31 |       .then((res) => res.data);
32 |   }
33 | };
34 | 


--------------------------------------------------------------------------------
/src/services/thread.service.js:
--------------------------------------------------------------------------------
 1 | import axios from "axios";
 2 | 
 3 | export default {
 4 |   async findAll () {
 5 |     const res = await axios.get("/api/threads");
 6 |     return res.data;
 7 |   },
 8 |   async create (title, description) {
 9 |     const res = await axios.post("/api/threads", {
10 |       title,
11 |       description
12 |     });
13 |     return res.data;
14 |   }
15 | };
16 | 


--------------------------------------------------------------------------------
/src/services/user.service.js:
--------------------------------------------------------------------------------
 1 | import axios from "axios";
 2 | 
 3 | export default {
 4 |   pendingSigninRequest: false,
 5 |   signUp (firstName, lastName, email, password) {
 6 |     return axios.post("/api/signup", {
 7 |       firstName,
 8 |       lastName,
 9 |       email,
10 |       password
11 |     }).then((res) => { return res.data; });
12 |   },
13 |   signIn (email, password) {
14 |     return axios.post("/api/signin", {
15 |       email,
16 |       password
17 |     }).then((res) => {
18 |       window.$user = res;
19 |       return res;
20 |     });
21 |   },
22 |   getUser () {
23 |     // debugger;
24 |     let promise = new Promise((resolve, reject) => {
25 |       if (window.$user) {
26 |         resolve(window.$user);
27 |       } else {
28 |         let request;
29 |         if (this.pendingSigninRequest) {
30 |           request = this.pendingSigninRequest;
31 |         } else {
32 |           request = axios.get("/api/user");
33 |           this.pendingSigninRequest = request;
34 |         }
35 |         request
36 |           .then((res) => {
37 |             window.$user = res.data;
38 |             resolve(res.data);
39 |           })
40 |           .catch(() => {
41 |             reject(new Error("Not logged in"));
42 |           })
43 |           .finally(() => {
44 |             this.pendingSigninRequest = false;
45 |           });
46 |       }
47 |     });
48 | 
49 |     return promise;
50 |   }
51 | };
52 | 


--------------------------------------------------------------------------------
/static/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JscramblerBlog/Task-Manager-Client/6f5a2b8066f95bc149a58e4e270be362c08c0e8a/static/.gitkeep


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