├── .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
    ├── components
    │   ├── Auth
    │   │   ├── LogInForm.vue
    │   │   └── SignUpForm.vue
    │   ├── Home.vue
    │   ├── Notification.vue
    │   ├── Tweet
    │   │   ├── Replies.vue
    │   │   ├── SingleTweet.vue
    │   │   ├── Tweet.vue
    │   │   ├── TweetReactions.vue
    │   │   └── Tweets.vue
    │   └── User
    │   │   ├── Profile
    │   │       ├── FavoriteTweets.vue
    │   │       ├── UserCard.vue
    │   │       ├── UserFollowers.vue
    │   │       ├── UserProfile.vue
    │   │       ├── UserProfileHeader.vue
    │   │       ├── UserProfileSidebarDetails.vue
    │   │       └── UsersFollowing.vue
    │   │   ├── Settings
    │   │       ├── UserPasswordSettings.vue
    │   │       ├── UserProfileSettings.vue
    │   │       └── UserSettingsMenu.vue
    │   │   ├── UserSidebar.vue
    │   │   └── WhoToFollow.vue
    ├── eventBus.js
    ├── main.js
    ├── mixins
    │   └── profileMixin.js
    └── router
    │   └── index.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 |   parser: 'babel-eslint',
 6 |   parserOptions: {
 7 |     sourceType: 'module'
 8 |   },
 9 |   env: {
10 |     browser: true,
11 |   },
12 |   // https://github.com/standard/standard/blob/master/docs/RULES-en.md
13 |   extends: 'standard',
14 |   // required to lint *.vue files
15 |   plugins: [
16 |     'html'
17 |   ],
18 |   // add your custom rules here
19 |   rules: {
20 |     // allow async-await
21 |     'generator-star-spacing': 'off',
22 |     // allow debugger during development
23 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/.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 |     // to edit target browsers: use "browserslist" field in package.json
 6 |     "postcss-import": {},
 7 |     "autoprefixer": {}
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # tweetr-app
 2 | 
 3 | > A Twitter clone. The repo for the API is available at [https://github.com/ammezie/tweetr-api](https://github.com/ammezie/tweetr-api)
 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 tyescript 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/ammezie/tweetr-app/f5b77e8583215e73c37539ab1a0e6f6a9fcfee7a/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')]
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 baseWebpackConfig = require('./webpack.base.conf')
 7 | const HtmlWebpackPlugin = require('html-webpack-plugin')
 8 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
 9 | const portfinder = require('portfinder')
10 | 
11 | const HOST = process.env.HOST
12 | const PORT = process.env.PORT && Number(process.env.PORT)
13 | 
14 | const devWebpackConfig = merge(baseWebpackConfig, {
15 |   module: {
16 |     rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
17 |   },
18 |   // cheap-module-eval-source-map is faster for development
19 |   devtool: config.dev.devtool,
20 | 
21 |   // these devServer options should be customized in /config/index.js
22 |   devServer: {
23 |     clientLogLevel: 'warning',
24 |     historyApiFallback: true,
25 |     hot: true,
26 |     compress: true,
27 |     host: HOST || config.dev.host,
28 |     port: PORT || config.dev.port,
29 |     open: config.dev.autoOpenBrowser,
30 |     overlay: config.dev.errorOverlay
31 |       ? { warnings: false, errors: true }
32 |       : false,
33 |     publicPath: config.dev.assetsPublicPath,
34 |     proxy: config.dev.proxyTable,
35 |     quiet: true, // necessary for FriendlyErrorsPlugin
36 |     watchOptions: {
37 |       poll: config.dev.poll,
38 |     }
39 |   },
40 |   plugins: [
41 |     new webpack.DefinePlugin({
42 |       'process.env': require('../config/dev.env')
43 |     }),
44 |     new webpack.HotModuleReplacementPlugin(),
45 |     new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
46 |     new webpack.NoEmitOnErrorsPlugin(),
47 |     // https://github.com/ampedandwired/html-webpack-plugin
48 |     new HtmlWebpackPlugin({
49 |       filename: 'index.html',
50 |       template: 'index.html',
51 |       inject: true
52 |     }),
53 |   ]
54 | })
55 | 
56 | module.exports = new Promise((resolve, reject) => {
57 |   portfinder.basePort = process.env.PORT || config.dev.port
58 |   portfinder.getPort((err, port) => {
59 |     if (err) {
60 |       reject(err)
61 |     } else {
62 |       // publish the new Port, necessary for e2e tests
63 |       process.env.PORT = port
64 |       // add port to devServer config
65 |       devWebpackConfig.devServer.port = port
66 | 
67 |       // Add FriendlyErrorsPlugin
68 |       devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
69 |         compilationSuccessInfo: {
70 |           messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
71 |         },
72 |         onErrors: config.dev.notifyOnErrors
73 |         ? utils.createNotifierCallback()
74 |         : undefined
75 |       }))
76 | 
77 |       resolve(devWebpackConfig)
78 |     }
79 |   })
80 | })
81 | 


--------------------------------------------------------------------------------
/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 vender 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.2.7
 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 |     // Use Eslint Loader?
24 |     // If true, your code will be linted during bundling and
25 |     // linting errors and warnings will be shown in the console.
26 |     useEslint: true,
27 |     // If true, eslint errors and warnings will also be shown in the error overlay
28 |     // in the browser.
29 |     showEslintErrorsInOverlay: false,
30 | 
31 |     /**
32 |      * Source Maps
33 |      */
34 | 
35 |     // https://webpack.js.org/configuration/devtool/#development
36 |     devtool: 'eval-source-map',
37 | 
38 |     // If you have problems debugging vue-files in devtools,
39 |     // set this to false - it *may* help
40 |     // https://vue-loader.vuejs.org/en/options.html#cachebusting
41 |     cacheBusting: true,
42 | 
43 |     // CSS Sourcemaps off by default because relative paths are "buggy"
44 |     // with this option, according to the CSS-Loader README
45 |     // (https://github.com/webpack/css-loader#sourcemaps)
46 |     // In our experience, they generally work as expected,
47 |     // just be aware of this issue when enabling this option.
48 |     cssSourceMap: false,
49 |   },
50 | 
51 |   build: {
52 |     // Template for index.html
53 |     index: path.resolve(__dirname, '../dist/index.html'),
54 | 
55 |     // Paths
56 |     assetsRoot: path.resolve(__dirname, '../dist'),
57 |     assetsSubDirectory: 'static',
58 |     assetsPublicPath: '/',
59 | 
60 |     /**
61 |      * Source Maps
62 |      */
63 | 
64 |     productionSourceMap: true,
65 |     // https://webpack.js.org/configuration/devtool/#production
66 |     devtool: '#source-map',
67 | 
68 |     // Gzip off by default as many popular static hosts such as
69 |     // Surge or Netlify already gzip all static assets for you.
70 |     // Before setting to `true`, make sure to:
71 |     // npm install --save-dev compression-webpack-plugin
72 |     productionGzip: false,
73 |     productionGzipExtensions: ['js', 'css'],
74 | 
75 |     // Run the build command with an extra argument to
76 |     // View the bundle analyzer report after build finishes:
77 |     // `npm run build --report`
78 |     // Set to `true` or `false` to always turn it on or off
79 |     bundleAnalyzerReport: process.env.npm_config_report
80 |   }
81 | }
82 | 


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


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |   <title>Tweetr - A Twitter Clone</title>
 8 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css" />
 9 | </head>
10 | 
11 | <body>
12 |   <div id="app"></div>
13 |   <!-- built files will be auto injected -->
14 | </body>
15 | 
16 | </html>
17 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tweetr-app",
 3 |   "version": "1.0.0",
 4 |   "description": "A Twitter clone",
 5 |   "author": "Chimezie Enyinnaya <meziemichael@gmail.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 |     "lint": "eslint --ext .js,.vue src",
11 |     "build": "node build/build.js"
12 |   },
13 |   "dependencies": {
14 |     "axios": "^0.17.1",
15 |     "moment": "^2.20.1",
16 |     "vee-validate": "^2.0.0-rc.27",
17 |     "vue": "^2.5.2",
18 |     "vue-router": "^3.0.1"
19 |   },
20 |   "devDependencies": {
21 |     "autoprefixer": "^7.1.2",
22 |     "babel-core": "^6.22.1",
23 |     "babel-eslint": "^7.1.1",
24 |     "babel-helper-vue-jsx-merge-props": "^2.0.3",
25 |     "babel-loader": "^7.1.1",
26 |     "babel-plugin-syntax-jsx": "^6.18.0",
27 |     "babel-plugin-transform-runtime": "^6.22.0",
28 |     "babel-plugin-transform-vue-jsx": "^3.5.0",
29 |     "babel-preset-env": "^1.3.2",
30 |     "babel-preset-stage-2": "^6.22.0",
31 |     "chalk": "^2.0.1",
32 |     "copy-webpack-plugin": "^4.0.1",
33 |     "css-loader": "^0.28.0",
34 |     "eslint": "^3.19.0",
35 |     "eslint-config-standard": "^10.2.1",
36 |     "eslint-friendly-formatter": "^3.0.0",
37 |     "eslint-loader": "^1.7.1",
38 |     "eslint-plugin-html": "^3.2.2",
39 |     "eslint-plugin-import": "^2.7.0",
40 |     "eslint-plugin-node": "^5.2.0",
41 |     "eslint-plugin-promise": "^3.4.0",
42 |     "eslint-plugin-standard": "^3.0.1",
43 |     "extract-text-webpack-plugin": "^3.0.0",
44 |     "file-loader": "^1.1.4",
45 |     "friendly-errors-webpack-plugin": "^1.6.1",
46 |     "html-webpack-plugin": "^2.30.1",
47 |     "node-notifier": "^5.1.2",
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 |     "rimraf": "^2.6.0",
54 |     "semver": "^5.3.0",
55 |     "shelljs": "^0.7.6",
56 |     "uglifyjs-webpack-plugin": "^1.1.1",
57 |     "url-loader": "^0.5.8",
58 |     "vue-loader": "^13.3.0",
59 |     "vue-style-loader": "^3.0.1",
60 |     "vue-template-compiler": "^2.5.2",
61 |     "webpack": "^3.6.0",
62 |     "webpack-bundle-analyzer": "^2.9.0",
63 |     "webpack-dev-server": "^2.9.1",
64 |     "webpack-merge": "^4.1.0"
65 |   },
66 |   "engines": {
67 |     "node": ">= 4.0.0",
68 |     "npm": ">= 3.0.0"
69 |   },
70 |   "browserslist": [
71 |     "> 1%",
72 |     "last 2 versions",
73 |     "not ie <= 8"
74 |   ]
75 | }
76 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view/>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   export default {
 9 |     name: 'app'
10 |   }
11 | </script>
12 | 
13 | <style>
14 |   body {
15 |     background-color: #f7f7f7;
16 |     padding-top: 50px;
17 |     padding-bottom: 50px;
18 |   }
19 | 
20 |   .is-danger {
21 |     color: #9f3a38;
22 |   }
23 | </style>
24 | 


--------------------------------------------------------------------------------
/src/components/Auth/LogInForm.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="ui stackable three column centered grid container">
 3 |     <div class="column">
 4 |       <h2 class="ui dividing header">Log In</h2>
 5 | 
 6 |       <Notification
 7 |         :message="notification.message"
 8 |         :type="notification.type"
 9 |         v-if="notification.message"
10 |       />
11 | 
12 |       <form class="ui form" @submit.prevent="login">
13 |         <div class="field">
14 |           <label>Email</label>
15 |           <input type="email" name="email" v-model="email" placeholder="Email" required>
16 |         </div>
17 | 
18 |         <div class="field">
19 |           <label>Password</label>
20 |           <input type="password" name="password" v-model="password" placeholder="Password" required>
21 |         </div>
22 | 
23 |         <button class="fluid ui primary button">LOG IN</button>
24 | 
25 |         <div class="ui hidden divider"></div>
26 |       </form>
27 | 
28 |       <div class="ui divider"></div>
29 | 
30 |       <div class="ui column grid">
31 |         <div class="center aligned column">
32 |           <p>
33 |             Don't have an account? <router-link to="/signup">Sign Up</router-link>
34 |           </p>
35 |         </div>
36 |       </div>
37 |     </div>
38 |   </div>
39 | </template>
40 | 
41 | <script>
42 | import Notification from '@/components/Notification'
43 | 
44 | export default {
45 |   name: 'LogInForm',
46 |   components: {
47 |     Notification
48 |   },
49 |   data () {
50 |     return {
51 |       email: '',
52 |       password: '',
53 |       notification: {
54 |         message: '',
55 |         type: ''
56 |       }
57 |     }
58 |   },
59 |   beforeRouteEnter (to, from, next) {
60 |     const token = localStorage.getItem('tweetr-token')
61 | 
62 |     return token ? next('/') : next()
63 |   },
64 |   methods: {
65 |     login () {
66 |       axios
67 |         .post('/login', {
68 |           email: this.email,
69 |           password: this.password,
70 |         })
71 |         .then(response => {
72 |           // save token in localstorage
73 |           localStorage.setItem('tweetr-token', response.data.data.token)
74 | 
75 |           // redirect to user home
76 |           this.$router.push('/')
77 |         })
78 |         .catch(error => {
79 |           // clear form inputs
80 |           this.email = this.password = ''
81 | 
82 |           // display error notification
83 |           this.notification = Object.assign({}, this.notification, {
84 |             message: error.response.data.message,
85 |             type: error.response.data.status
86 |           })
87 |         })
88 |     }
89 |   }
90 | }
91 | </script>
92 | 


--------------------------------------------------------------------------------
/src/components/Auth/SignUpForm.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="ui stackable three column centered grid container">
  3 |     <div class="column">
  4 |       <h2 class="ui dividing header">Sign Up, it's free!</h2>
  5 | 
  6 |       <Notification :message="notification.message" :type="notification.type" v-if="notification.message" />
  7 | 
  8 |       <form class="ui form" @submit.prevent="signup">
  9 |         <div class="field" :class="{ error: errors.has('name') }">
 10 |           <label>Full Name</label>
 11 |           <input type="text" name="name" v-model="name" v-validate="'required'" placeholder="Full name">
 12 |           <span v-show="errors.has('name')" class="is-danger">{{ errors.first('name') }}</span>
 13 |         </div>
 14 | 
 15 |         <div class="field" :class="{ error: errors.has('username') }">
 16 |           <label>Username</label>
 17 |           <input type="text" name="username" :class="{'input': true, 'is-danger': errors.has('username') }" v-model="username" v-validate="'required'"
 18 |             placeholder="Username">
 19 |           <span v-show="errors.has('username')" class="is-danger">{{ errors.first('username') }}</span>
 20 |         </div>
 21 | 
 22 |         <div class="field" :class="{ error: errors.has('email') }">
 23 |           <label>Email</label>
 24 |           <input type="email" name="email" :class="{'input': true, 'is-danger': errors.has('email') }" v-model="email" v-validate="'required|email'"
 25 |             placeholder="Email">
 26 |           <span v-show="errors.has('email')" class="is-danger">{{ errors.first('email') }}</span>
 27 |         </div>
 28 | 
 29 |         <div class="field" :class="{ error: errors.has('password') }">
 30 |           <label>Password</label>
 31 |           <input type="password" name="password" :class="{'input': true, 'is-danger': errors.has('password') }" v-model="password"
 32 |             v-validate="'required'" placeholder="Password">
 33 |           <span v-show="errors.has('password')" class="is-danger">{{ errors.first('password') }}</span>
 34 |         </div>
 35 | 
 36 |         <button class="fluid ui primary button" :disabled="!isFormValid">SIGN UP</button>
 37 | 
 38 |         <div class="ui hidden divider"></div>
 39 |       </form>
 40 | 
 41 |       <div class="ui divider"></div>
 42 | 
 43 |       <div class="ui column grid">
 44 |         <div class="center aligned column">
 45 |           <p>
 46 |             Got an account?
 47 |             <router-link to="/login">Log In</router-link>
 48 |           </p>
 49 |         </div>
 50 |       </div>
 51 |     </div>
 52 |   </div>
 53 | </template>
 54 | 
 55 | <script>
 56 | import Notification from '@/components/Notification'
 57 | 
 58 | export default {
 59 |   name: 'SignUpForm',
 60 |   components: {
 61 |     Notification
 62 |   },
 63 |   data () {
 64 |     return {
 65 |       name: '',
 66 |       username: '',
 67 |       email: '',
 68 |       password: '',
 69 |       notification: {
 70 |         message: '',
 71 |         type: ''
 72 |       }
 73 |     }
 74 |   },
 75 |   computed: {
 76 |     isFormValid () {
 77 |       return Object.keys(this.fields).every(key => this.fields[key].valid)
 78 |     }
 79 |   },
 80 |   beforeRouteEnter (to, from, next) {
 81 |     const token = localStorage.getItem('tweetr-token')
 82 | 
 83 |     return token ? next('/') : next()
 84 |   },
 85 |   methods: {
 86 |     signup () {
 87 |       axios
 88 |         .post('/signup', {
 89 |           name: this.name,
 90 |           username: this.username,
 91 |           email: this.email,
 92 |           password: this.password
 93 |         })
 94 |         .then(response => {
 95 |           // save token in localstorage
 96 |           localStorage.setItem('tweetr-token', response.data.data.token)
 97 | 
 98 |           // redirect to user home
 99 |           this.$router.push('/')
100 |         })
101 |         .catch(error => {
102 |           // display error notification
103 |           this.notification = Object.assign({}, this.notification, {
104 |             message: error.response.data.message,
105 |             type: error.response.data.status
106 |           })
107 |         })
108 |     }
109 |   }
110 | }
111 | </script>
112 | 


--------------------------------------------------------------------------------
/src/components/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="ui stackable grid vertically padded container">
 3 |     <div class="four wide column">
 4 |       <UserSidebar :user="user"/>
 5 |     </div>
 6 |     <div class="eight wide column">
 7 |       <div class="ui segment">
 8 |         <h2 class="ui medium dividing header">Timeline</h2>
 9 | 
10 |         <Tweets
11 |           :tweets.sync="tweets"
12 |           :auth-user="user"
13 |         />
14 | 
15 |       </div>
16 |     </div>
17 |     <div class="four wide column">
18 |       <WhoToFollow/>
19 |     </div>
20 |   </div>
21 | </template>
22 | 
23 | <script>
24 |   import UserSidebar from '@/components/User/UserSidebar'
25 |   import Tweets from '@/components/Tweet/Tweets'
26 |   import WhoToFollow from '@/components/User/WhoToFollow'
27 | 
28 |   export default {
29 |     name: 'Home',
30 |     components: {
31 |       UserSidebar,
32 |       Tweets,
33 |       WhoToFollow
34 |     },
35 |     data () {
36 |       return {
37 |         user: '',
38 |         tweets: []
39 |       }
40 |     },
41 |     beforeRouteEnter (to, from, next) {
42 |       const token = localStorage.getItem('tweetr-token')
43 | 
44 |       return token ? next() : next('/login')
45 |     },
46 |     created () {
47 |       this.fetchAuthenticatedUser()
48 |       this.fetchUserTimeline()
49 |     },
50 |     methods: {
51 |       fetchAuthenticatedUser () {
52 |         const token = localStorage.getItem('tweetr-token')
53 | 
54 |         axios
55 |           .get('/account/me', {
56 |             headers: {
57 |               Authorization: `Bearer ${token}`
58 |             }
59 |           })
60 |           .then(response => {
61 |             this.user = response.data.data
62 |           })
63 |       },
64 |       fetchUserTimeline () {
65 |         const token = localStorage.getItem('tweetr-token')
66 | 
67 |         axios
68 |           .get('/users/timeline', {
69 |             headers: {
70 |               Authorization: `Bearer ${token}`
71 |             }
72 |           })
73 |           .then(response => {
74 |             this.tweets = response.data.data.reverse()
75 |           })
76 |       }
77 |     }
78 |   }
79 | </script>
80 | 


--------------------------------------------------------------------------------
/src/components/Notification.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="ui message" :class="type">
 3 |     {{ message }}
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: 'Notification',
10 |   props: {
11 |     message: {
12 |       type: String,
13 |       required: true,
14 |     },
15 |     type: {
16 |       type: String,
17 |       required: true,
18 |     },
19 |   },
20 | };
21 | </script>
22 | 


--------------------------------------------------------------------------------
/src/components/Tweet/Replies.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="ui small feed">
 3 |     <div class="event" v-for="reply in replies" :key="reply.id">
 4 |       <div class="label">
 5 |         <img src="https://www.gravatar.com/avatar/default?s=200&r=pg&d=mm">
 6 |       </div>
 7 |       <div class="content">
 8 |         <div class="summary">
 9 |           <router-link :to="reply.user.username">
10 |             {{ reply.user.name }}
11 |             <small>{{ `@${reply.user.username}` }}</small>
12 |           </router-link>
13 |           <div class="date">
14 |             {{ reply.created_at | timeAgo }}
15 |           </div>
16 |         </div>
17 |         <div class="extra text">
18 |           {{ reply.reply }}
19 |         </div>
20 |       </div>
21 |     </div>
22 |   </div>
23 | </template>
24 | 
25 | <script>
26 |   export default {
27 |     name: 'Replies',
28 |     props: {
29 |       replies: {
30 |         type: Array,
31 |         required: true
32 |       }
33 |     }
34 |   }
35 | </script>
36 | 


--------------------------------------------------------------------------------
/src/components/Tweet/SingleTweet.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="ui stackable two column centered vertically padded grid container">
  3 |     <div class="column">
  4 |       <a class="ui button mini primary" @click="back">Back</a>
  5 |       <div class="ui feed">
  6 |         <div class="event">
  7 |           <div class="label">
  8 |             <img src="https://www.gravatar.com/avatar/default?s=200&r=pg&d=mm">
  9 |           </div>
 10 |           <div class="content">
 11 |             <div class="summary">
 12 |               <router-link :to="`/${tweet.user.username}`">
 13 |                 {{ tweet.user.name }}
 14 |                 <small>{{ `@${tweet.user.username}` }}</small>
 15 |               </router-link>
 16 |             </div>
 17 |             <div class="extra text">
 18 |               {{ tweet.tweet }}
 19 |             </div>
 20 | 
 21 |             <TweetReactions
 22 |               :tweet="tweet"
 23 |               :replies="replies"
 24 |               :favorites.sync="tweet.favorites"
 25 |               :auth-user="authUser"
 26 |             />
 27 | 
 28 |           </div>
 29 |         </div>
 30 |       </div>
 31 |       <div class="ui divider"></div>
 32 | 
 33 |       <form class="ui form" @submit.prevent="replyTweet">
 34 |         <div class="field">
 35 |           <textarea name="reply" v-model="reply" rows="2" placeholder="Reply tweet"></textarea>
 36 |         </div>
 37 | 
 38 |         <button class="ui button primary" :disabled="!isFormValid">Reply</button>
 39 |       </form>
 40 | 
 41 |       <Replies :replies="replies"/>
 42 |     </div>
 43 |   </div>
 44 | </template>
 45 | 
 46 | <script>
 47 |   import Replies from '@/components/Tweet/Replies'
 48 |   import TweetReactions from '@/components/Tweet/TweetReactions'
 49 | 
 50 |   export default {
 51 |     name: 'SingleTweet',
 52 |     components: {
 53 |       Replies,
 54 |       TweetReactions,
 55 |     },
 56 |     data () {
 57 |       return {
 58 |         tweet: '',
 59 |         replies: [],
 60 |         reply: '',
 61 |         authUser: ''
 62 |       }
 63 |     },
 64 |     computed: {
 65 |       isFormValid () {
 66 |         return !!this.reply
 67 |       }
 68 |     },
 69 |     created () {
 70 |       this.fetchTweet()
 71 |       this.fetchAuthenticatedUser()
 72 |     },
 73 |     methods: {
 74 |       fetchTweet () {
 75 |         axios.get(`/tweets/${this.$route.params.id}`).then(response => {
 76 |           this.tweet = response.data.data
 77 |           this.replies = response.data.data.replies.reverse()
 78 |         })
 79 |       },
 80 |       back () {
 81 |         this.$router.go(-1)
 82 |       },
 83 |       replyTweet () {
 84 |         const token = localStorage.getItem('tweetr-token')
 85 | 
 86 |         axios
 87 |           .post(
 88 |             `/tweets/reply/${this.tweet.id}`,
 89 |             { reply: this.reply },
 90 |             {
 91 |               headers: {
 92 |                 Authorization: `Bearer ${token}`
 93 |               }
 94 |             }
 95 |           )
 96 |           .then(response => {
 97 |             this.reply = ''
 98 | 
 99 |             this.replies.unshift(response.data.data)
100 |           })
101 |       },
102 |       fetchAuthenticatedUser () {
103 |         const token = localStorage.getItem('tweetr-token')
104 | 
105 |         axios
106 |           .get('account/me', {
107 |             headers: {
108 |               Authorization: `Bearer ${token}`
109 |             }
110 |           })
111 |           .then(response => {
112 |             this.authUser = response.data.data
113 |           })
114 |       }
115 |     }
116 |   }
117 | </script>
118 | 


--------------------------------------------------------------------------------
/src/components/Tweet/Tweet.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="event">
 3 |     <div class="label">
 4 |       <img src="https://www.gravatar.com/avatar/default?s=200&r=pg&d=mm">
 5 |     </div>
 6 |     <div class="content">
 7 |       <div class="summary">
 8 |         <router-link :to="`/${tweet.user.username}`">
 9 |           {{ tweet.user.name }}
10 |           <small>{{ `@${tweet.user.username}` }}</small>
11 |         </router-link>
12 |         <div class="date">
13 |           {{ tweet.created_at | timeAgo }}
14 |           <small v-if="canDeleteTweet">
15 |             <a @click="deleteTweet(tweet.id)">Delete Tweet</a>
16 |           </small>
17 |         </div>
18 |       </div>
19 |       <router-link :to="`/${tweet.user.username}/status/${tweet.id}`">
20 |         <div class="extra text">
21 |           {{ tweet.tweet }}
22 |         </div>
23 |       </router-link>
24 | 
25 |       <TweetReactions
26 |         :tweet="tweet"
27 |         :replies="tweet.replies"
28 |         :favorites.sync="tweet.favorites"
29 |         :auth-user="authUser"
30 |       />
31 |     </div>
32 |   </div>
33 | </template>
34 | 
35 | <script>
36 |   import TweetReactions from '@/components/Tweet/TweetReactions'
37 | 
38 |   export default {
39 |     name: 'Tweet',
40 |     components: {
41 |       TweetReactions
42 |     },
43 |     props: {
44 |       tweet: {
45 |         type: Object,
46 |         required: true
47 |       },
48 |       authUser: {
49 |         type: Object,
50 |         required: true
51 |       }
52 |     },
53 |     computed: {
54 |       canDeleteTweet () {
55 |         return this.tweet.user_id === this.authUser.id
56 |       }
57 |     },
58 |     methods: {
59 |       deleteTweet (tweetId) {
60 |         const token = localStorage.getItem('tweetr-token')
61 |         const deleteConfirmed = confirm('Are you sure?')
62 | 
63 |         if (deleteConfirmed) {
64 |           axios
65 |             .delete(`/tweets/destroy/${tweetId}`, {
66 |               headers: {
67 |                 Authorization: `Bearer ${token}`
68 |               }
69 |             })
70 |             .then(response => {
71 |               this.$emit('delete', tweetId)
72 |             })
73 |         }
74 |       }
75 |     }
76 |   }
77 | </script>
78 | 


--------------------------------------------------------------------------------
/src/components/Tweet/TweetReactions.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="meta">
 3 |     <a class="reply">
 4 |       <i class="reply icon"></i>
 5 |       {{ replies.length }}
 6 |     </a>
 7 |     <a class="like" v-if="isFavoritedByUser" @click="unFavoriteTweet">
 8 |       <i class="like red icon"></i> {{ favorites.length }}
 9 |     </a>
10 |     <a class="like" v-else @click="favoriteTweet">
11 |       <i class="like icon"></i> {{ favorites.length }}
12 |     </a>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 |   export default {
18 |     name: 'TweetReactions',
19 |     props: {
20 |       tweet: {
21 |         type: Object,
22 |         required: true
23 |       },
24 |       authUser: {
25 |         type: Object,
26 |         required: true
27 |       },
28 |       replies: {
29 |         type: Array,
30 |         required: true
31 |       },
32 |       favorites: {
33 |         type: Array,
34 |         required: true
35 |       }
36 |     },
37 | 
38 |     computed: {
39 |       isFavoritedByUser() {
40 |         for (const favorite of this.favorites) {
41 |           if (favorite.user_id === this.authUser.id) {
42 |             return true
43 |           }
44 |         }
45 | 
46 |         return false
47 |       }
48 |     },
49 |     methods: {
50 |       favoriteTweet () {
51 |         const token = localStorage.getItem('tweetr-token')
52 | 
53 |         if (!token) {
54 |           alert('You must be logged in to perform the action.')
55 |           return
56 |         }
57 | 
58 |         axios
59 |           .post(
60 |             '/favorites/create',
61 |             { tweet_id: this.tweet.id },
62 |             {
63 |               headers: {
64 |                 Authorization: `Bearer ${token}`
65 |               }
66 |             }
67 |           )
68 |           .then(response => {
69 |             this.favorites.push(response.data.data)
70 |           })
71 |       },
72 |       unFavoriteTweet() {
73 |         const token = localStorage.getItem('tweetr-token')
74 | 
75 |         if (!token) {
76 |           alert('You must be logged in to perform the action.')
77 |           return
78 |         }
79 | 
80 |         axios
81 |           .delete(`/favorites/destroy/${this.tweet.id}`, {
82 |             headers: {
83 |               Authorization: `Bearer ${token}`
84 |             }
85 |           })
86 |           .then(response => {
87 |             const filteredFavorites = this.favorites.filter(favorite => {
88 |               return favorite.user_id !== this.authUser.id
89 |             })
90 | 
91 |             this.$emit('update:favorites', filteredFavorites)
92 |           })
93 |       }
94 |     }
95 |   }
96 | </script>
97 | 


--------------------------------------------------------------------------------
/src/components/Tweet/Tweets.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="ui feed">
 3 |     <Tweet
 4 |       v-for="tweet in tweets"
 5 |       :key="tweet.id"
 6 |       :tweet="tweet"
 7 |       :auth-user="authUser"
 8 |       v-on:delete="removeDeletedTweet"
 9 |     />
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 |   import Tweet from '@/components/Tweet/Tweet'
15 |   import EventBus from '@/eventBus'
16 | 
17 |   export default {
18 |     name: 'Tweets',
19 |     components: {
20 |       Tweet
21 |     },
22 |     props: {
23 |       tweets: {
24 |         type: Array,
25 |         required: true
26 |       },
27 |       authUser: {
28 |         type: Object,
29 |         required: true
30 |       }
31 |     },
32 |     created () {
33 |       // listen for event fired
34 |       EventBus.$on('tweetAdded', this.fetchAddedTweet)
35 |     },
36 |     methods: {
37 |       fetchAddedTweet (tweet) {
38 |         // add tweet to top of tweets
39 |         return this.tweets.unshift(tweet)
40 |       },
41 |       removeDeletedTweet (tweetId) {
42 |         const filteredTweets = this.tweets.filter(tweet => {
43 |           return tweet.id !== tweetId
44 |         })
45 | 
46 |         this.$emit('update:tweets', filteredTweets)
47 |       }
48 |     }
49 |   }
50 | </script>
51 | 


--------------------------------------------------------------------------------
/src/components/User/Profile/FavoriteTweets.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <UserProfileHeader
 4 |       :user="user"
 5 |       :auth-user="authUser"
 6 |     />
 7 |     <div class="ui stackable grid container">
 8 |       <div class="four wide column">
 9 |         <UserProfileSidebarDetails :user="user"/>
10 |       </div>
11 |       <div class="eight wide column">
12 |         <div class="ui segment">
13 |           <h2 class="ui medium dividing header">Favorites</h2>
14 | 
15 |           <Tweets
16 |             :tweets.sync="onlyTweets"
17 |             :auth-user="authUser"
18 |           />
19 |         </div>
20 |       </div>
21 |       <div class="four wide column">
22 |         <WhoToFollow v-if="isLoggedIn"/>
23 |       </div>
24 |     </div>
25 |   </div>
26 | </template>
27 | 
28 | <script>
29 | import UserProfileHeader from '@/components/User/Profile/UserProfileHeader'
30 | import UserProfileSidebarDetails from '@/components/User/Profile/UserProfileSidebarDetails'
31 | import Tweets from '@/components/Tweet/Tweets'
32 | import WhoToFollow from '@/components/User/WhoToFollow'
33 | import profileMixin from '@/mixins/profileMixin'
34 | 
35 | export default {
36 |   name: 'FavoriteTweets',
37 |   mixins: [profileMixin],
38 |   components: {
39 |     UserProfileHeader,
40 |     UserProfileSidebarDetails,
41 |     Tweets,
42 |     WhoToFollow
43 |   },
44 |   data () {
45 |     return {
46 |       user: '',
47 |       authUser: ''
48 |     }
49 |   },
50 |   computed: {
51 |     isLoggedIn () {
52 |       return !!this.authUser
53 |     },
54 |     onlyTweets () {
55 |       return Array.from(this.user.favorites, favorite => favorite.tweet).reverse()
56 |     }
57 |   }
58 | }
59 | </script>
60 | 


--------------------------------------------------------------------------------
/src/components/User/Profile/UserCard.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="column">
 3 |     <div class="ui card">
 4 |       <div class="content">
 5 |         <img class="right floated mini ui image" src="https://www.gravatar.com/avatar/default?s=200&r=pg&d=mm">
 6 |         <div class="header">
 7 |           <router-link :to="`/${user.username}`">{{ user.name }}</router-link>
 8 |         </div>
 9 |         <div class="meta">
10 |           {{ `@${user.username}` }}
11 |         </div>
12 |         <div class="description">
13 |           {{ user.bio }}
14 |         </div>
15 |       </div>
16 |     </div>
17 |   </div>
18 | </template>
19 | 
20 | <script>
21 | export default {
22 |   name: 'UserCard',
23 |   props: {
24 |     user: {
25 |       type: Object,
26 |       required: true
27 |     }
28 |   }
29 | }
30 | </script>
31 | 


--------------------------------------------------------------------------------
/src/components/User/Profile/UserFollowers.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <UserProfileHeader
 4 |       :user="user"
 5 |       :auth-user="authUser"
 6 |     />
 7 |     <div class="ui stackable grid container">
 8 |       <div class="four wide column">
 9 |         <UserProfileSidebarDetails :user="user"/>
10 |       </div>
11 |       <div class="twelve wide column">
12 |         <div class="ui segment">
13 |           <div class="ui three column grid">
14 |             <UserCard
15 |               v-for="follower in user.followers"
16 |               :key="follower.id"
17 |               :user="follower"
18 |             />
19 |           </div>
20 |         </div>
21 |       </div>
22 |     </div>
23 |   </div>
24 | </template>
25 | 
26 | <script>
27 | import UserProfileHeader from '@/components/User/Profile/UserProfileHeader'
28 | import UserProfileSidebarDetails from '@/components/User/Profile/UserProfileSidebarDetails'
29 | import UserCard from '@/components/User/Profile/UserCard'
30 | import profileMixin from '@/mixins/profileMixin'
31 | 
32 | export default {
33 |   name: 'UserFollowers',
34 |   mixins: [profileMixin],
35 |   components: {
36 |     UserProfileHeader,
37 |     UserCard,
38 |     UserProfileSidebarDetails
39 |   },
40 |   data () {
41 |     return {
42 |       user: '',
43 |       authUser: ''
44 |     }
45 |   }
46 | }
47 | </script>
48 | 


--------------------------------------------------------------------------------
/src/components/User/Profile/UserProfile.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <UserProfileHeader
 4 |       :user="user"
 5 |       :auth-user="authUser"
 6 |     />
 7 |     <div class="ui stackable grid container">
 8 |       <div class="four wide column">
 9 |         <UserProfileSidebarDetails :user="user"/>
10 |       </div>
11 |       <div class="eight wide column">
12 |         <div class="ui segment">
13 |           <h2 class="ui medium dividing header">Tweets</h2>
14 | 
15 |           <Tweets
16 |             :tweets.sync="tweets"
17 |             :auth-user="authUser"
18 |           />
19 |         </div>
20 | 
21 |       </div>
22 |       <div class="four wide column">
23 |         <WhoToFollow v-if="isLoggedIn"/>
24 |       </div>
25 |     </div>
26 |   </div>
27 | </template>
28 | 
29 | <script>
30 |   import UserProfileHeader from '@/components/User/Profile/UserProfileHeader'
31 |   import UserProfileSidebarDetails from '@/components/User/Profile/UserProfileSidebarDetails'
32 |   import WhoToFollow from '@/components/User/WhoToFollow'
33 |   import Tweets from '@/components/Tweet/Tweets'
34 | 
35 |   export default {
36 |     name: 'UserProfile',
37 |     components: {
38 |       UserProfileSidebarDetails,
39 |       UserProfileHeader,
40 |       WhoToFollow,
41 |       Tweets
42 |     },
43 |     data () {
44 |       return {
45 |         user: '',
46 |         authUser: '',
47 |         tweets: []
48 |       }
49 |     },
50 |     beforeRouteUpdate (to, from, next) {
51 |       this.fetchUser(to.params.username)
52 | 
53 |       next()
54 |     },
55 |     computed: {
56 |       isLoggedIn () {
57 |         return !!this.authUser
58 |       }
59 |     },
60 |     created () {
61 |       this.fetchUser(this.$route.params.username)
62 | 
63 |       const token = localStorage.getItem('tweetr-token')
64 | 
65 |       if (token) {
66 |         this.fetchAuthenticatedUser(token)
67 |       }
68 |     },
69 |     methods: {
70 |       fetchUser (username) {
71 |         axios.get(`/${username}`).then(response => {
72 |           this.user = response.data.data
73 |           this.tweets = response.data.data.tweets.reverse()
74 |         })
75 |       },
76 |       fetchAuthenticatedUser (token) {
77 |         axios
78 |           .get('account/me', {
79 |             headers: {
80 |               Authorization: `Bearer ${token}`
81 |             }
82 |           })
83 |           .then(response => {
84 |             this.authUser = response.data.data
85 |           })
86 |       }
87 |     }
88 |   }
89 | </script>
90 | 


--------------------------------------------------------------------------------
/src/components/User/Profile/UserProfileHeader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="ui segment">
  3 |     <div class="ui grid container">
  4 |       <div class="four wide column">
  5 |         <img class="ui tiny avatar image" src="https://www.gravatar.com/avatar/default?s=200&r=pg&d=mm">
  6 |       </div>
  7 |       <div class="bottom aligned twelve wide column">
  8 |         <div class="ui horizontal relaxed link list">
  9 |           <div class="item">
 10 |             <div class="content">
 11 |               <router-link :to="`/${user.username}`">
 12 |                 <div class="header">Tweets</div>
 13 |                 <strong>{{ user.tweets.length }}</strong>
 14 |               </router-link>
 15 |             </div>
 16 |           </div>
 17 |           <div class="item">
 18 |             <div class="content">
 19 |               <router-link :to="isOwner ? `/following` : `/${user.username}/following`">
 20 |                 <div class="header">Following</div>
 21 |                 <strong>{{ user.following.length }}</strong>
 22 |               </router-link>
 23 |             </div>
 24 |           </div>
 25 |           <div class="item">
 26 |             <div class="content">
 27 |               <router-link :to="isOwner ? `/followers` : `/${user.username}/followers`">
 28 |                 <div class="header">Followers</div>
 29 |                 <strong>{{ user.followers.length }}</strong>
 30 |               </router-link>
 31 |             </div>
 32 |           </div>
 33 |           <div class="item">
 34 |             <div class="content">
 35 |               <router-link :to="isOwner ? `/favorites` : `/${user.username}/favorites`">
 36 |                 <div class="header">Favorites</div>
 37 |                 <strong>{{ user.favorites.length }}</strong>
 38 |               </router-link>
 39 |             </div>
 40 |           </div>
 41 |         </div>
 42 |         <div class="ui right floated horizontal list" v-if="isOwner">
 43 |           <router-link to="/settings/profile" class="ui button primary">Edit profile</router-link>
 44 |         </div>
 45 |         <div class="ui right floated horizontal list" v-if="isLoggedIn && !isOwner">
 46 |           <button class="ui tiny primary button" v-if="isFollowing" @click="unFollow(user.id)">Unfollow</button>
 47 |           <button class="ui tiny primary button" v-else @click="follow(user.id)">Follow</button>
 48 |         </div>
 49 |       </div>
 50 |     </div>
 51 |   </div>
 52 | </template>
 53 | 
 54 | <script>
 55 |   export default {
 56 |     name: 'UserProfileHeader',
 57 |     props: {
 58 |       user: {
 59 |         type: Object,
 60 |         required: true
 61 |       },
 62 |       authUser: {
 63 |         type: Object,
 64 |         required: true
 65 |       }
 66 |     },
 67 |     computed: {
 68 |       isOwner () {
 69 |         return this.user.id === this.authUser.id
 70 |       },
 71 |       isLoggedIn () {
 72 |         return !!this.authUser
 73 |       },
 74 |       isFollowing () {
 75 |         for (const following of this.authUser.following) {
 76 |           if (following.id === this.user.id) {
 77 |             return true
 78 |           }
 79 |         }
 80 | 
 81 |         return false
 82 |       }
 83 |     },
 84 |     methods: {
 85 |       follow (userId) {
 86 |         const token = localStorage.getItem('tweetr-token')
 87 | 
 88 |         axios
 89 |           .post(
 90 |             '/users/follow',
 91 |             { user_id: userId },
 92 |             {
 93 |               headers: {
 94 |                 Authorization: `Bearer ${token}`
 95 |               }
 96 |             }
 97 |           )
 98 |           .then(response => {
 99 |             this.authUser.following.push({ id: userId })
100 |           })
101 |       },
102 |       unFollow (userId) {
103 |         const token = localStorage.getItem('tweetr-token')
104 | 
105 |         axios
106 |           .delete(`/users/unfollow/${userId}`, {
107 |             headers: {
108 |               Authorization: `Bearer ${token}`
109 |             }
110 |           })
111 |           .then(response => {
112 |             this.authUser.following = this.authUser.following.filter(u => {
113 |               return u.id !== userId
114 |             })
115 |           })
116 |       }
117 |     }
118 |   }
119 | </script>
120 | 


--------------------------------------------------------------------------------
/src/components/User/Profile/UserProfileSidebarDetails.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <router-link class="ui button mini primary" to="/">Back Home</router-link>
 4 |     <div class="ui segment">
 5 |       <h2 class="ui medium header">
 6 |         <router-link :to="`/${user.username}`">{{ user.name }}</router-link>
 7 |         <div class="sub header">
 8 |           <router-link :to="`/${user.username}`">{{ `@${user.username}` }}</router-link>
 9 |         </div>
10 |       </h2>
11 | 
12 |       <p v-show="user.bio">{{ user.bio }}</p>
13 | 
14 |       <div class="ui list">
15 |         <div class="item" v-show="user.location">
16 |           <i class="marker icon"></i>
17 |           <div class="content">
18 |             {{ user.location }}
19 |           </div>
20 |         </div>
21 |         <div class="item" v-show="user.website_url">
22 |           <i class="linkify icon"></i>
23 |           <div class="content">
24 |             <a :href="user.website_url" target="_blank">{{ user.website_url }}</a>
25 |           </div>
26 |         </div>
27 |         <div class="item" v-show="user.created_at">
28 |           <i class="calendar icon"></i>
29 |           <div class="content">
30 |             Joined {{ user.created_at | joined }}
31 |           </div>
32 |         </div>
33 |         <div class="item" v-show="user.dob">
34 |           <i class="birthday icon"></i>
35 |           <div class="content">
36 |             {{ user.dob | dob }}
37 |           </div>
38 |         </div>
39 |       </div>
40 |     </div>
41 |   </div>
42 | </template>
43 | 
44 | <script>
45 |   export default {
46 |     name: 'UserProfileSidebarDetails',
47 |     props: {
48 |       user: {
49 |         type: Object,
50 |         required: true
51 |       }
52 |     }
53 |   }
54 | </script>
55 | 


--------------------------------------------------------------------------------
/src/components/User/Profile/UsersFollowing.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <UserProfileHeader
 4 |       :user="user"
 5 |       :auth-user="authUser"
 6 |     />
 7 |     <div class="ui stackable grid container">
 8 |       <div class="four wide column">
 9 |         <UserProfileSidebarDetails :user="user"/>
10 |       </div>
11 |       <div class="twelve wide column">
12 |         <div class="ui segment">
13 |           <div class="ui three column grid">
14 |             <UserCard
15 |               v-for="following in user.following"
16 |               :key="following.id"
17 |               :user="following"
18 |             />
19 |           </div>
20 |         </div>
21 |       </div>
22 |     </div>
23 |   </div>
24 | </template>
25 | 
26 | <script>
27 |   import UserProfileHeader from '@/components/User/Profile/UserProfileHeader';
28 |   import UserCard from '@/components/User/Profile/UserCard';
29 |   import UserProfileSidebarDetails from '@/components/User/Profile/UserProfileSidebarDetails';
30 |   import profileMixin from '@/mixins/profileMixin';
31 | 
32 |   export default {
33 |     name: 'UsersFollowing',
34 |     mixins: [profileMixin],
35 |     components: {
36 |       UserProfileHeader,
37 |       UserCard,
38 |       UserProfileSidebarDetails
39 |     },
40 |     data () {
41 |       return {
42 |         user: '',
43 |         authUser: ''
44 |       }
45 |     }
46 |   }
47 | </script>
48 | 


--------------------------------------------------------------------------------
/src/components/User/Settings/UserPasswordSettings.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="ui stackable grid container">
  3 |     <UserSettingsMenu/>
  4 | 
  5 |     <div class="eight wide column">
  6 |       <div class="ui segment">
  7 |         <h2 class="ui dividing header">Change Password</h2>
  8 | 
  9 |         <Notification
 10 |           :message="notification.message"
 11 |           :type="notification.type"
 12 |           v-if="notification.message"
 13 |         />
 14 | 
 15 |         <form class="ui form" @submit.prevent="changePassword">
 16 |           <div class="field" :class="{ error: errors.has('password') }">
 17 |             <label>Current Password</label>
 18 |             <input type="password" name="password" v-model="password" data-vv-as="current password" v-validate="'required'">
 19 |             <span v-show="errors.has('password')" class="is-danger">{{ errors.first('password') }}</span>
 20 |           </div>
 21 | 
 22 |           <div class="field" :class="{ error: errors.has('newPassword') }">
 23 |             <label>New Password</label>
 24 |             <input type="password" name="newPassword" v-model="newPassword" data-vv-as="new password" v-validate="'required'">
 25 |             <span v-show="errors.has('newPassword')" class="is-danger">{{ errors.first('newPassword') }}</span>
 26 |           </div>
 27 | 
 28 |           <div class="field" :class="{ error: errors.has('confirmPassword') }">
 29 |             <label>New Password</label>
 30 |             <input type="password" name="confirmPassword" v-model="confirmPassword" data-vv-as="confirm password" v-validate="'required|confirmed:newPassword'">
 31 |             <span v-show="errors.has('confirmPassword')" class="is-danger">{{ errors.first('confirmPassword') }}</span>
 32 |           </div>
 33 | 
 34 |           <button type="submit" class="ui button primary" :disabled="!isFormValid">Change password</button>
 35 |         </form>
 36 |       </div>
 37 |     </div>
 38 |   </div>
 39 | </template>
 40 | 
 41 | <script>
 42 |   import Notification from '@/components/Notification'
 43 |   import UserSettingsMenu from '@/components/User/Settings/UserSettingsMenu'
 44 | 
 45 |   export default {
 46 |     name: 'UserProfileEditForm',
 47 |     components: {
 48 |       Notification,
 49 |       UserSettingsMenu
 50 |     },
 51 |     data () {
 52 |       return {
 53 |         password: '',
 54 |         newPassword: '',
 55 |         confirmPassword: '',
 56 |         notification: {
 57 |           message: '',
 58 |           type: ''
 59 |         }
 60 |       }
 61 |     },
 62 |     computed: {
 63 |       isFormValid () {
 64 |         return Object.keys(this.fields).every(key => this.fields[key].valid)
 65 |       },
 66 |     },
 67 |     beforeRouteEnter (to, from, next) {
 68 |       const token = localStorage.getItem('tweetr-token')
 69 | 
 70 |       return token ? next() : next('/login')
 71 |     },
 72 |     methods: {
 73 |       changePassword () {
 74 |         const token = localStorage.getItem('tweetr-token')
 75 | 
 76 |         axios
 77 |           .put(
 78 |             '/account/change_password',
 79 |             {
 80 |               password: this.password,
 81 |               newPassword: this.newPassword
 82 |             },
 83 |             {
 84 |               headers: {
 85 |                 Authorization: `Bearer ${token}`
 86 |               },
 87 |             }
 88 |           )
 89 |           .then(response => {
 90 |             // clear form inputs
 91 |             this.password = this.newPassword = this.confirmPassword = ''
 92 | 
 93 |             // display success notification
 94 |             this.notification = Object.assign({}, this.notification, {
 95 |               message: response.data.message,
 96 |               type: 'success'
 97 |             })
 98 |           })
 99 |           .catch(error => {
100 |             // clear form inputs
101 |             this.password = this.newPassword = this.confirmPassword = ''
102 | 
103 |             // clear form error messages
104 |             this.$nextTick(() => {
105 |               this.$validator.reset()
106 |             })
107 | 
108 |             // display error notification
109 |             this.notification = Object.assign({}, this.notification, {
110 |               message: error.response.data.message,
111 |               type: 'danger'
112 |             })
113 |           })
114 |       }
115 |     }
116 |   }
117 | </script>
118 | 


--------------------------------------------------------------------------------
/src/components/User/Settings/UserProfileSettings.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="ui stackable grid container">
  3 |     <UserSettingsMenu/>
  4 | 
  5 |     <div class="eight wide column">
  6 |       <div class="ui segment">
  7 |         <h2 class="ui dividing header">Edit Profile</h2>
  8 | 
  9 |         <Notification
 10 |           :message="notification.message"
 11 |           :type="notification.type"
 12 |           v-if="notification.message"
 13 |         />
 14 | 
 15 |         <form class="ui form" @submit.prevent="updateProfile">
 16 |           <div class="field" :class="{ error: errors.has('name') }">
 17 |             <label>Full Name</label>
 18 |             <input type="text" name="name" v-model="name" v-validate="'required'">
 19 |             <span v-show="errors.has('name')" class="is-danger">{{ errors.first('name') }}</span>
 20 |           </div>
 21 | 
 22 |           <div class="field" :class="{ error: errors.has('name') }">
 23 |             <label>Username</label>
 24 |             <input type="text" name="username" v-model="username" v-validate="'required'">
 25 |             <span v-show="errors.has('username')" class="is-danger">{{ errors.first('username') }}</span>
 26 |           </div>
 27 | 
 28 |           <div class="field" :class="{ error: errors.has('email') }">
 29 |             <label>Email</label>
 30 |             <input type="email" name="email" v-model="email" v-validate="'required|email'" placeholder="Email">
 31 |             <span v-show="errors.has('email')" class="is-danger">{{ errors.first('email') }}</span>
 32 |           </div>
 33 | 
 34 |           <div class="field">
 35 |             <label>Bio</label>
 36 |             <textarea v-model="bio" rows="5" placeholder="A breif bio of you"></textarea>
 37 |           </div>
 38 | 
 39 |           <div class="field">
 40 |             <label>Location</label>
 41 |             <input type="text" v-model="location" placeholder="Your location">
 42 |           </div>
 43 | 
 44 |           <div class="field">
 45 |             <label>Website URL</label>
 46 |             <input type="url" v-model="websiteUrl" placeholder="Website URL">
 47 |           </div>
 48 | 
 49 |           <button class="ui button primary">Update profile</button>
 50 |         </form>
 51 |       </div>
 52 |     </div>
 53 |   </div>
 54 | </template>
 55 | 
 56 | <script>
 57 |   import Notification from '@/components/Notification'
 58 |   import UserSettingsMenu from '@/components/User/Settings/UserSettingsMenu'
 59 | 
 60 |   export default {
 61 |     name: 'UserProfileSettings',
 62 |     components: {
 63 |       Notification,
 64 |       UserSettingsMenu
 65 |     },
 66 |     data () {
 67 |       return {
 68 |         name: '',
 69 |         username: '',
 70 |         email: '',
 71 |         bio: '',
 72 |         location: '',
 73 |         websiteUrl: '',
 74 |         notification: {
 75 |           message: '',
 76 |           type: ''
 77 |         }
 78 |       }
 79 |     },
 80 |     beforeRouteEnter (to, from, next) {
 81 |       const token = localStorage.getItem('tweetr-token')
 82 | 
 83 |       return token ? next() : next('/login')
 84 |     },
 85 |     created () {
 86 |       this.fetchAuthenticatedUser()
 87 |     },
 88 |     methods: {
 89 |       fetchAuthenticatedUser () {
 90 |         const token = localStorage.getItem('tweetr-token')
 91 | 
 92 |         axios
 93 |           .get('account/me', {
 94 |             headers: {
 95 |               Authorization: `Bearer ${token}`
 96 |             }
 97 |           })
 98 |           .then(response => {
 99 |             this.name = response.data.data.name
100 |             this.username = response.data.data.username
101 |             this.email = response.data.data.email
102 |             this.location = response.data.data.location
103 |             this.bio = response.data.data.bio
104 |             this.websiteUrl = response.data.data.website_url
105 |           })
106 |       },
107 |       updateProfile () {
108 |         const token = localStorage.getItem('tweetr-token')
109 | 
110 |         axios
111 |           .put(
112 |             '/account/update_profile',
113 |             {
114 |               name: this.name,
115 |               username: this.username,
116 |               email: this.email,
117 |               location: this.location,
118 |               bio: this.bio,
119 |               website_url: this.websiteUrl
120 |             },
121 |             {
122 |               headers: {
123 |                 Authorization: `Bearer ${token}`
124 |               }
125 |             }
126 |           )
127 |           .then(response => {
128 |             // display success notification
129 |             this.notification = Object.assign({}, this.notification, {
130 |               message: response.data.message,
131 |               type: 'success'
132 |             })
133 |           })
134 |       }
135 |     }
136 |   }
137 | </script>
138 | 


--------------------------------------------------------------------------------
/src/components/User/Settings/UserSettingsMenu.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="four wide column">
 3 |     <router-link class="ui button mini primary" to="/">Back Home</router-link>
 4 |     <div class="ui fluid vertical pointing menu">
 5 |       <div class="item">
 6 |         <router-link to="/settings/profile">Profile</router-link>
 7 |       </div>
 8 |       <div class="item">
 9 |         <router-link to="/settings/password">Password</router-link>
10 |       </div>
11 |     </div>
12 |   </div>
13 | </template>
14 | 


--------------------------------------------------------------------------------
/src/components/User/UserSidebar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="ui attached segment">
 4 |       <form class="ui form" @submit.prevent="postTweet">
 5 |         <div class="field">
 6 |           <textarea name="tweet" v-model="tweet" rows="2" placeholder="Compose tweet"></textarea>
 7 |         </div>
 8 | 
 9 |         <button class="ui button fluid primary" :disabled="!isFormValid">Tweet</button>
10 |       </form>
11 |     </div>
12 |     <div class="ui bottom attached menu">
13 |       <router-link class="item" to="/">
14 |         <i class="home icon"></i>
15 |       </router-link>
16 |       <router-link class="item" :to="`/${user.username}`">Profile</router-link>
17 |       <router-link class="item" to="/settings/profile">Settings</router-link>
18 |       <a class="item" @click="logout">
19 |         <i class="sign out icon"></i>
20 |       </a>
21 |     </div>
22 |   </div>
23 | </template>
24 | 
25 | <script>
26 |   import EventBus from '@/eventBus'
27 | 
28 |   export default {
29 |     name: 'UserSidebar',
30 |     props: {
31 |       user: {
32 |         type: Object,
33 |         required: true
34 |       }
35 |     },
36 |     data () {
37 |       return {
38 |         tweet: ''
39 |       }
40 |     },
41 |     computed: {
42 |       isFormValid () {
43 |         return !!this.tweet
44 |       }
45 |     },
46 |     methods: {
47 |       postTweet () {
48 |         const token = localStorage.getItem('tweetr-token')
49 | 
50 |         axios
51 |           .post(
52 |             '/tweet',
53 |             { tweet: this.tweet },
54 |             {
55 |               headers: {
56 |                 Authorization: `Bearer ${token}`
57 |               }
58 |             }
59 |           )
60 |           .then(response => {
61 |             // fire an event to the event bus
62 |             EventBus.$emit('tweetAdded', response.data.data)
63 | 
64 |             // clear input field
65 |             this.tweet = ''
66 |           })
67 |       },
68 |       logout () {
69 |         localStorage.removeItem('tweetr-token')
70 | 
71 |         this.$router.push('/login')
72 |       }
73 |     }
74 |   }
75 | </script>
76 | 


--------------------------------------------------------------------------------
/src/components/User/WhoToFollow.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="ui segment">
 3 |     <h2 class="ui medium dividing header">Who to follow</h2>
 4 |     <i class="refresh link icon" @click="fetchWhoToFollow"></i>
 5 | 
 6 |     <div class="ui divided link items">
 7 |       <div class="item" v-for="user in usersToFollow" :key="user.id">
 8 |         <div class="ui avatar image">
 9 |           <img src="https://www.gravatar.com/avatar/default?s=200&r=pg&d=mm">
10 |         </div>
11 |         <div class="content">
12 |           <router-link class="ui small header" :to="`/${user.username}`">
13 |             {{ user.name }} <small>{{ `@${user.username}` }}</small>
14 |           </router-link>
15 | 
16 |           <div class="meta">
17 |             <button class="ui compact button mini primary" @click="followUser(user.id)">Follow</button>
18 |           </div>
19 |         </div>
20 |       </div>
21 |     </div>
22 |   </div>
23 | </template>
24 | 
25 | <script>
26 |   export default {
27 |     name: 'WhoToFollow',
28 |     data () {
29 |       return {
30 |         usersToFollow: ''
31 |       }
32 |     },
33 |     created () {
34 |       this.fetchWhoToFollow()
35 |     },
36 |     methods: {
37 |       fetchWhoToFollow () {
38 |         const token = localStorage.getItem('tweetr-token')
39 | 
40 |         axios
41 |           .get('/users/users_to_follow', {
42 |             headers: {
43 |               Authorization: `Bearer ${token}`
44 |             }
45 |           })
46 |           .then(response => {
47 |             this.usersToFollow = response.data.data
48 |           })
49 |       },
50 |       followUser (userId) {
51 |         const token = localStorage.getItem('tweetr-token')
52 | 
53 |         axios
54 |           .post(
55 |             '/users/follow',
56 |             { user_id: userId },
57 |             {
58 |               headers: {
59 |                 Authorization: `Bearer ${token}`
60 |               }
61 |             }
62 |           )
63 |           .then(response => {
64 |             this.usersToFollow = this.usersToFollow.filter(u => {
65 |               return u.id !== userId
66 |             })
67 |           })
68 |       }
69 |     }
70 |   }
71 | </script>
72 | 


--------------------------------------------------------------------------------
/src/eventBus.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | 
3 | export default new Vue()
4 | 


--------------------------------------------------------------------------------
/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 axios from 'axios'
 4 | import moment from 'moment'
 5 | import Vue from 'vue'
 6 | import VeeValidate from 'vee-validate'
 7 | import App from './App'
 8 | import router from './router'
 9 | 
10 | // reference axios globally
11 | window.axios = axios
12 | 
13 | // Global axios defaults
14 | axios.defaults.baseURL = 'http://127.0.0.1:3333'
15 | 
16 | // register vee validate plugin
17 | Vue.use(VeeValidate)
18 | 
19 | Vue.config.productionTip = false
20 | 
21 | // Global filter to format dates with momentjs
22 | Vue.filter('timeAgo', date => moment(date).fromNow())
23 | Vue.filter('joined', date => moment(date).format('MMMM YYYY'))
24 | Vue.filter('dob', date => moment(date).format('MMMM Do YYYY'))
25 | 
26 | /* eslint-disable no-new */
27 | new Vue({
28 |   el: '#app',
29 |   router,
30 |   template: '<App/>',
31 |   components: { App }
32 | })
33 | 


--------------------------------------------------------------------------------
/src/mixins/profileMixin.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | 
 3 | export default {
 4 |   created () {
 5 |     this.$_profileMixin_fetchUser(this.$route.params.username)
 6 | 
 7 |     const token = localStorage.getItem('tweetr-token')
 8 | 
 9 |     if (token) {
10 |       this.$_profileMixin_fetchAuthenticatedUser(token)
11 |     }
12 |   },
13 |   methods: {
14 |     $_profileMixin_fetchUser (username) {
15 |       if (username) {
16 |         axios.get(`/${username}`).then(response => {
17 |           this.user = response.data.data
18 |         })
19 |       } else {
20 |         const token = localStorage.getItem('tweetr-token')
21 | 
22 |         axios
23 |           .get('account/me', {
24 |             headers: {
25 |               Authorization: `Bearer ${token}`
26 |             }
27 |           })
28 |           .then(response => {
29 |             this.user = response.data.data
30 |           })
31 |       }
32 |     },
33 |     $_profileMixin_fetchAuthenticatedUser (token) {
34 |       axios
35 |         .get('account/me', {
36 |           headers: {
37 |             Authorization: `Bearer ${token}`
38 |           }
39 |         })
40 |         .then(response => {
41 |           this.authUser = response.data.data
42 |         })
43 |     }
44 |   }
45 | }
46 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import SignUpForm from '@/components/Auth/SignUpForm'
 4 | import LogInForm from '@/components/Auth/LogInForm'
 5 | import UserProfileSettings from '@/components/User/Settings/UserProfileSettings'
 6 | import UserPasswordSettings
 7 |   from '@/components/User/Settings/UserPasswordSettings'
 8 | import Home from '@/components/Home'
 9 | import SingleTweet from '@/components/Tweet/SingleTweet'
10 | import UserProfile from '@/components/User/Profile/UserProfile'
11 | import UsersFollowing from '@/components/User/Profile/UsersFollowing'
12 | import UserFollowers from '@/components/User/Profile/UserFollowers'
13 | import FavoriteTweets from '@/components/User/Profile/FavoriteTweets'
14 | 
15 | Vue.use(Router)
16 | 
17 | export default new Router({
18 |   routes: [
19 |     {
20 |       path: '/',
21 |       component: Home
22 |     },
23 |     {
24 |       path: '/signup',
25 |       component: SignUpForm
26 |     },
27 |     {
28 |       path: '/login',
29 |       component: LogInForm
30 |     },
31 |     {
32 |       path: '/settings/profile',
33 |       component: UserProfileSettings
34 |     },
35 |     {
36 |       path: '/settings/password',
37 |       component: UserPasswordSettings
38 |     },
39 |     {
40 |       path: '/following',
41 |       component: UsersFollowing
42 |     },
43 |     {
44 |       path: '/:username/following',
45 |       component: UsersFollowing,
46 |       props: true
47 |     },
48 |     {
49 |       path: '/followers',
50 |       component: UserFollowers
51 |     },
52 |     {
53 |       path: '/:username/followers',
54 |       component: UserFollowers,
55 |       props: true
56 |     },
57 |     {
58 |       path: '/favorites',
59 |       component: FavoriteTweets
60 |     },
61 |     {
62 |       path: '/:username/favorites',
63 |       component: FavoriteTweets,
64 |       props: true
65 |     },
66 |     {
67 |       path: '/:username',
68 |       component: UserProfile,
69 |       props: true
70 |     },
71 |     {
72 |       path: '/:username/status/:id',
73 |       component: SingleTweet,
74 |       props: true
75 |     }
76 |   ]
77 | })
78 | 


--------------------------------------------------------------------------------
/static/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ammezie/tweetr-app/f5b77e8583215e73c37539ab1a0e6f6a9fcfee7a/static/.gitkeep


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