├── .DS_Store
├── README.md
├── final
    ├── .babelrc
    ├── .editorconfig
    ├── .firebaserc
    ├── .gitignore
    ├── .postcssrc.js
    ├── 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
    ├── database.rules.json
    ├── firebase.json
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── public
    │   └── index.html
    ├── src
    │   ├── App.vue
    │   ├── main.js
    │   ├── messages
    │   │   ├── FileModal.vue
    │   │   ├── MessageForm.vue
    │   │   ├── Messages.vue
    │   │   └── SingleMessage.vue
    │   ├── mixins.js
    │   ├── pages
    │   │   ├── Chat.vue
    │   │   ├── Login.vue
    │   │   └── Register.vue
    │   ├── router
    │   │   └── index.js
    │   ├── sidebar
    │   │   ├── Channels.vue
    │   │   ├── Sidebar.vue
    │   │   └── Users.vue
    │   └── store.js
    ├── static
    │   └── .gitkeep
    └── storage.rules
├── img
    ├── app.png
    ├── app2.png
    ├── app3.png
    ├── app4.png
    ├── app5.png
    ├── app6.png
    └── app7.png
└── slack versions.zip


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kaloraat/vue-vuex-firebase-messaging-app/1b74fb15be1e5b40b2314c4d230cdca1a04be73d/.DS_Store


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## Vue Vuex Firebase Messaging App - Slack clone
 2 | 
 3 | This is an advance messaging app build with Vue Vuex and Firebase. Users can add channels, use private messaging and upload images.
 4 | 
 5 | ## App Screenshots
 6 | 
 7 | <img src="/img/app.png" alt="Vue Vuex Firebase Messaging App - Slack clone" />
 8 | <img src="/img/app2.png" alt="Vue Vuex Firebase Messaging App - Slack clone" />
 9 | <img src="/img/app3.png" alt="Vue Vuex Firebase Messaging App - Slack clone" />
10 | <img src="/img/app4.png" alt="Vue Vuex Firebase Messaging App - Slack clone" />
11 | <img src="/img/app5.png" alt="Vue Vuex Firebase Messaging App - Slack clone" />
12 | <img src="/img/app6.png" alt="Vue Vuex Firebase Messaging App - Slack clone" />
13 | <img src="/img/app7.png" alt="Vue Vuex Firebase Messaging App - Slack clone" />
14 | 


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


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


--------------------------------------------------------------------------------
/final/.firebaserc:
--------------------------------------------------------------------------------
1 | {
2 |   "projects": {
3 |     "default": "vuexslack"
4 |   }
5 | }
6 | 


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


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


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


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


--------------------------------------------------------------------------------
/final/build/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kaloraat/vue-vuex-firebase-messaging-app/1b74fb15be1e5b40b2314c4d230cdca1a04be73d/final/build/logo.png


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


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


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


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


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


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


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


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


--------------------------------------------------------------------------------
/final/database.rules.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "rules": {
 3 |     
 4 |     "channels": {
 5 |       ".read": "auth != null",
 6 |         "$channelId": {
 7 |           ".write": "auth != null",
 8 |             ".validate": "newData.hasChildren(['id', 'name'])",
 9 |               "name": {
10 |                 ".validate": "newData.val().length > 0"
11 |               },
12 |               "id": {
13 |                 ".validate": "newData.val() === $channelId"
14 |               }
15 |         }
16 |     },
17 |       
18 |     "messages": {
19 |       "$channelId": {
20 |         ".read": "auth != null",
21 |           ".validate": "root.child('channels/'+$channelId).exists()",
22 |             "$messageId": {
23 |               ".write": "auth != null",
24 |                 ".validate": "(newData.hasChildren(['content', 'user', 'timestamp']) && !newData.hasChildren(['image'])) || (newData.hasChildren(['image', 'user', 'timestamp']) && !newData.hasChildren(['content']))",
25 |                   "content": {
26 |                     ".validate": "newData.val().length > 0"
27 |                   },
28 |                   "user": {
29 |                     ".validate": "newData.hasChildren(['name', 'avatar', 'id'])",
30 |                       "id": {
31 |                         ".validate": "newData.val() === auth.uid"
32 |                       }
33 |                   }
34 |             }
35 |       }
36 |     },
37 |       
38 |       
39 |     "privateMessages": {
40 |       "$uid1": {
41 |         "$uid2": {
42 |           ".read": "auth !== null && ($uid1 === auth.uid || $uid2 === auth.uid)",
43 |             "$messageId": {
44 |               ".write": "auth !== null && newData.child('user/id').val() === auth.uid",
45 |                 ".validate": "$uid1 < $uid2 && (newData.hasChildren(['content', 'user', 'timestamp']) && !newData.hasChildren(['image'])) || (newData.hasChildren(['image', 'user', 'timestamp']) && !newData.hasChildren(['content']))",
46 |               	"content": {
47 |                   ".validate": "newData.val().length > 0"
48 |                 },
49 |                 "user": {
50 |                   ".validate": "newData.hasChildren(['name', 'avatar', 'id'])",
51 |                     "id": {
52 |                       ".validate": "newData.val() === auth.uid"
53 |                     }
54 |                 }
55 |             }
56 |         }
57 |       }
58 |     },
59 |     
60 |       "presence": {
61 |         ".read": "auth != null",
62 |           ".write": "auth != null"
63 |       },
64 |         
65 |         
66 |     "users": {
67 |       ".read": "auth != null",
68 |       "$uid": {
69 |         // ".read": "auth != null",
70 |           ".write": "auth != null && auth.uid === $uid",
71 |             ".validate": "newData.hasChildren(['name', 'avatar'])",
72 |               "name": {
73 |                 ".validate": "newData.val().length > 0"
74 |               },
75 |               "avatar": {
76 |                 ".validate": "newData.val().length > 0"
77 |               }
78 |       }
79 |     }
80 |   }
81 | }


--------------------------------------------------------------------------------
/final/firebase.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "database": {
 3 |     "rules": "database.rules.json"
 4 |   },
 5 |   "hosting": {
 6 |     "public": "./dist",
 7 |     "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
 8 |     "rewrites": [
 9 |       {
10 |         "source": "**",
11 |         "destination": "/index.html"
12 |       }
13 |     ]
14 |   },
15 |   "storage": {
16 |     "rules": "storage.rules"
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/final/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 |     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
 7 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 8 |     <title>slack</title>
 9 |   </head>
10 |   <body>
11 |     <div id="app"></div>
12 |     <!-- built files will be auto injected -->
13 | 
14 |     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
15 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
16 |     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/final/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "slack",
 3 |   "version": "1.0.0",
 4 |   "description": "A Vue.js project",
 5 |   "author": "Ryan Dhungel <kaloraat@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 |     "build": "node build/build.js"
11 |   },
12 |   "dependencies": {
13 |     "firebase": "^5.0.4",
14 |     "md5": "^2.2.1",
15 |     "mime-types": "^2.1.18",
16 |     "moment": "^2.22.2",
17 |     "uuid": "^3.2.1",
18 |     "vue": "^2.5.2",
19 |     "vue-router": "^3.0.1",
20 |     "vuex": "^3.0.1"
21 |   },
22 |   "devDependencies": {
23 |     "autoprefixer": "^7.1.2",
24 |     "babel-core": "^6.22.1",
25 |     "babel-helper-vue-jsx-merge-props": "^2.0.3",
26 |     "babel-loader": "^7.1.1",
27 |     "babel-plugin-syntax-jsx": "^6.18.0",
28 |     "babel-plugin-transform-runtime": "^6.22.0",
29 |     "babel-plugin-transform-vue-jsx": "^3.5.0",
30 |     "babel-preset-env": "^1.3.2",
31 |     "babel-preset-stage-2": "^6.22.0",
32 |     "chalk": "^2.0.1",
33 |     "copy-webpack-plugin": "^4.0.1",
34 |     "css-loader": "^0.28.0",
35 |     "extract-text-webpack-plugin": "^3.0.0",
36 |     "file-loader": "^1.1.4",
37 |     "friendly-errors-webpack-plugin": "^1.6.1",
38 |     "html-webpack-plugin": "^2.30.1",
39 |     "node-notifier": "^5.1.2",
40 |     "optimize-css-assets-webpack-plugin": "^3.2.0",
41 |     "ora": "^1.2.0",
42 |     "portfinder": "^1.0.13",
43 |     "postcss-import": "^11.0.0",
44 |     "postcss-loader": "^2.0.8",
45 |     "postcss-url": "^7.2.1",
46 |     "rimraf": "^2.6.0",
47 |     "semver": "^5.3.0",
48 |     "shelljs": "^0.7.6",
49 |     "uglifyjs-webpack-plugin": "^1.1.1",
50 |     "url-loader": "^0.5.8",
51 |     "vue-loader": "^13.3.0",
52 |     "vue-style-loader": "^3.0.1",
53 |     "vue-template-compiler": "^2.5.2",
54 |     "webpack": "^3.6.0",
55 |     "webpack-bundle-analyzer": "^2.9.0",
56 |     "webpack-dev-server": "^2.9.1",
57 |     "webpack-merge": "^4.1.0"
58 |   },
59 |   "engines": {
60 |     "node": ">= 6.0.0",
61 |     "npm": ">= 3.0.0"
62 |   },
63 |   "browserslist": [
64 |     "> 1%",
65 |     "last 2 versions",
66 |     "not ie <= 8"
67 |   ]
68 | }
69 | 


--------------------------------------------------------------------------------
/final/public/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">
 6 |     <title>Welcome to Firebase Hosting</title>
 7 | 
 8 |     <!-- update the version number as needed -->
 9 |     <script defer src="/__/firebase/5.0.4/firebase-app.js"></script>
10 |     <!-- include only the Firebase features as you need -->
11 |     <script defer src="/__/firebase/5.0.4/firebase-auth.js"></script>
12 |     <script defer src="/__/firebase/5.0.4/firebase-database.js"></script>
13 |     <script defer src="/__/firebase/5.0.4/firebase-messaging.js"></script>
14 |     <script defer src="/__/firebase/5.0.4/firebase-storage.js"></script>
15 |     <!-- initialize the SDK after all desired features are loaded -->
16 |     <script defer src="/__/firebase/init.js"></script>
17 | 
18 |     <style media="screen">
19 |       body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
20 |       #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px; border-radius: 3px; }
21 |       #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
22 |       #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
23 |       #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
24 |       #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
25 |       #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
26 |       #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
27 |       @media (max-width: 600px) {
28 |         body, #message { margin-top: 0; background: white; box-shadow: none; }
29 |         body { border-top: 16px solid #ffa100; }
30 |       }
31 |     </style>
32 |   </head>
33 |   <body>
34 |     <div id="message">
35 |       <h2>Welcome</h2>
36 |       <h1>Firebase Hosting Setup Complete</h1>
37 |       <p>You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!</p>
38 |       <a target="_blank" href="https://firebase.google.com/docs/hosting/">Open Hosting Documentation</a>
39 |     </div>
40 |     <p id="load">Firebase SDK Loading&hellip;</p>
41 | 
42 |     <script>
43 |       document.addEventListener('DOMContentLoaded', function() {
44 |         // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
45 |         // // The Firebase SDK is initialized and available here!
46 |         //
47 |         // firebase.auth().onAuthStateChanged(user => { });
48 |         // firebase.database().ref('/path/to/ref').on('value', snapshot => { });
49 |         // firebase.messaging().requestPermission().then(() => { });
50 |         // firebase.storage().ref('/path/to/ref').getDownloadURL().then(() => { });
51 |         //
52 |         // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
53 | 
54 |         try {
55 |           let app = firebase.app();
56 |           let features = ['auth', 'database', 'messaging', 'storage'].filter(feature => typeof app[feature] === 'function');
57 |           document.getElementById('load').innerHTML = `Firebase SDK loaded with ${features.join(', ')}`;
58 |         } catch (e) {
59 |           console.error(e);
60 |           document.getElementById('load').innerHTML = 'Error loading the Firebase SDK, check the console.';
61 |         }
62 |       });
63 |     </script>
64 |   </body>
65 | </html>
66 | 


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


--------------------------------------------------------------------------------
/final/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 firebase from 'firebase/app';
 7 | import store from './store';
 8 | import auth from 'firebase/auth';
 9 | 
10 | Vue.config.productionTip = false;
11 | 
12 | // Initialize Firebase
13 | var config = {
14 |     apiKey: 'AIzaSyD89dSF5uMoN5Oig4mkUu0g4kDgf7f6cJ0',
15 |     authDomain: 'vuexslack.firebaseapp.com',
16 |     databaseURL: 'https://vuexslack.firebaseio.com',
17 |     projectId: 'vuexslack',
18 |     storageBucket: 'vuexslack.appspot.com',
19 |     messagingSenderId: '520664506704'
20 | };
21 | firebase.initializeApp(config);
22 | 
23 | window.firebase = firebase;
24 | 
25 | const unsubscribe = firebase.auth().onAuthStateChanged(user => {
26 |     // dispatch user
27 |     store.dispatch('setUser', user);
28 | 
29 |     new Vue({
30 |         el: '#app',
31 |         router,
32 |         store,
33 |         components: { App },
34 |         template: '<App/>'
35 |     });
36 |     // recursion - this function calls itself on auth state change
37 |     unsubscribe();
38 | });
39 | 


--------------------------------------------------------------------------------
/final/src/messages/FileModal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <!-- Modal -->
 3 |         <div class="modal fade" id="fileModal">
 4 |           <div class="modal-dialog modal-dialog-centered" role="document">
 5 |             <div class="modal-content">
 6 | 
 7 |               <div class="modal-header">
 8 |                 <h5 class="modal-title text-dark">Upload file (jpeg, png, imb max)</h5>
 9 |                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
10 |                   <span aria-hidden="true">&times;</span>
11 |                 </button>
12 |               </div>
13 | 
14 |               <div class="modal-body">
15 |                 <form class="form">
16 |                     <div class="form-group">
17 |                         <input @change="addFile" type="file" id="file" name="file" class="form-control">
18 |                     </div>
19 |                 </form>
20 |               </div>
21 | 
22 |               <div class="modal-footer">
23 |                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancle</button>
24 |                 <button @click="sendFile" type="button" class="btn btn-primary">Send file</button>
25 |               </div>
26 |             </div>
27 |           </div>
28 |         </div>
29 | </template>
30 | 
31 | <script>
32 | import mime from 'mime-types'
33 | 
34 |     export default {
35 |         name: 'file-modal',
36 | 
37 |         data() {
38 |             return {
39 |                 file: null,
40 |                 authorized: ['image/jpeg', 'image/jpg', 'image/png']
41 |             }
42 |         },
43 | 
44 |         methods: {
45 | 
46 |             isValid(filename) {
47 |                 let index = this.authorized.indexOf(mime.lookup(filename))
48 |                 return index !== -1
49 |             },
50 | 
51 |             addFile(e) {
52 |                 let files = e.target.files
53 |                 console.log(files)
54 | 
55 |                 if(files.length === 1) {
56 |                     this.file = files[0]
57 |                 }
58 |             },
59 | 
60 |             sendFile() {
61 |                 if(this.file !== null) {
62 |                     if(this.isValid(this.file.name)) {
63 | 
64 |                         let metadata = {contentType: mime.lookup(this.file.name)}
65 |                         this.$parent.uploadFile(this.file, metadata)
66 |                         $("#fileModal").modal('hide');
67 |                     }
68 |                 }
69 |             },
70 | 
71 |             // reset form
72 |             resetForm() {
73 |                 $('.form').trigger('reset')
74 |                 this.file = null
75 |             }
76 |         }
77 |     }
78 | </script>
79 | 
80 | 
81 | 
82 | 
83 | 
84 | 
85 | 
86 | 
87 | 
88 | 
89 | 
90 | 
91 | 
92 | 


--------------------------------------------------------------------------------
/final/src/messages/MessageForm.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <div class="messageform">
  4 | 
  5 |           <!-- file upload progress bar -->
  6 |           <div class="progress" v-if="uploadState !== null">
  7 |             <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar">{{ uploadLabel }}</div>
  8 |           </div>
  9 | 
 10 |             <form @submit.prevent="sendMessage">
 11 |                 <div class="input-group mb-3">
 12 |                     <input v-model.trim="message" name="message" id="message" placeholder="Write something" class="form-control mt-3" autofocus>
 13 | 
 14 |                     <div class="input-group-append">
 15 |                         <button @click="sendMessage" class="btn btn-primary mt-3" type="button">&nbsp; Send &nbsp;</button>
 16 |                     </div>
 17 | 
 18 |                     <div class="input-group-append">
 19 |                         <button @click.prevent="openFileModal" :disabled="uploadState == 'uploading'" class="btn btn-warning mt-3" type="button">Upload</button>
 20 |                     </div>
 21 |                 </div>
 22 |             </form>
 23 | 
 24 |             <!-- file modal -->
 25 |             <file-modal ref="file_modal"></file-modal>
 26 |         </div>
 27 |     </div>
 28 | </template>
 29 | 
 30 | <script>
 31 | import {mapGetters} from 'vuex'
 32 | import FileModal from './FileModal'
 33 | import uuidV4 from 'uuid/V4'
 34 | import storage from 'firebase/storage'
 35 | 
 36 |     export default {
 37 |         name: 'message-form',
 38 |         components: {FileModal},
 39 | 
 40 |         data() {
 41 |           return {
 42 |             message: '',
 43 |             errors: [],
 44 |             storageRef: firebase.storage().ref(),
 45 |             uploadTask: null,
 46 |             uploadState: null
 47 |           }
 48 |         },
 49 | 
 50 |         computed: {
 51 |           ...mapGetters(['currentChannel', 'currentUser', 'isPrivate']),
 52 | 
 53 |           // upload state
 54 |           uploadLabel() {
 55 |             switch(this.uploadState) {
 56 |               case 'uploading': return 'Uploading in progress'
 57 |                 break
 58 |               case 'error': return 'Error occured'
 59 |                 break
 60 |               case 'done': return 'Upload completed'
 61 |                 break
 62 |               default: return ''
 63 |             }
 64 |           }
 65 |         },
 66 | 
 67 |         methods: {
 68 |           sendMessage() {
 69 |             // construct new message object
 70 |             // let newMessage = {
 71 |             //   content: this.message,
 72 |             //   timestamp: firebase.database.ServerValue.TIMESTAMP,
 73 |             //   user: {
 74 |             //     name: this.currentUser.displayName,
 75 |             //     avatar: this.currentUser.photoURL,
 76 |             //     id: this.currentUser.uid
 77 |             //   }
 78 |             // }
 79 | 
 80 |             // use some validation
 81 |             if(this.currentChannel !== null) {
 82 |               if(this.message.length > 0) {
 83 |                 this.$parent.getMessagesRef().child(this.currentChannel.id).push().set(this.createMessage())
 84 |                 .then(() => {
 85 |                   this.$nextTick(() => {
 86 |                     $("html, body").scrollTop($(document).height());
 87 |                   })
 88 |                 })
 89 |                 .catch((error) => {
 90 |                   this.errors.push(error.message)
 91 |                 })
 92 |                 // reset message
 93 |                 this.message = ''
 94 |               }
 95 |             }
 96 |           },
 97 | 
 98 |           createMessage(fileUrl = null) {
 99 |             // create message object to push to firebase
100 |             let message = {
101 |               timestamp: firebase.database.ServerValue.TIMESTAMP,
102 |               user: {
103 |                 name: this.currentUser.displayName,
104 |                 avatar: this.currentUser.photoURL,
105 |                 id: this.currentUser.uid
106 |               }
107 |             }
108 | 
109 |             if(fileUrl == null) {
110 |               // either send message with content
111 |               message['content'] = this.message
112 |             } else {
113 |               // or send the message with image
114 |               message['image'] = fileUrl
115 |             }
116 |             return message
117 |           },
118 | 
119 |           uploadFile(file, metadata) {
120 |             // console.log('file: ', file, ' metadata: ', metadata)
121 |             if(file === null) return false
122 | 
123 |               let pathToUpload = this.currentChannel.id
124 |               let ref = this.$parent.getMessagesRef()
125 |               let filePath = this.getPath() + '/' + uuidV4() + '.jpg'
126 | 
127 |               this.uploadTask = this.storageRef.child(filePath).put(file, metadata)
128 |               this.uploadState = "uploading"
129 | 
130 |               // on upload state change
131 |               this.uploadTask.on('state_changed', snapshot => {
132 |                 // upload in progress
133 |                 let percent = (snapshot.bytesTransferred / snapshot.totalBytes) * 100
134 |                 $(".progress-bar").css("width", percent+'%')
135 |               }, error => {
136 |                 // error
137 |                 this.errors.push(error.message)
138 |                 this.uploadState = 'error'
139 |                 this.uploadTask = null
140 |                 // reset form
141 |                 this.$refs.file_modal.resetForm()
142 |               }, () => {
143 |                 // upload finished
144 |                 this.uploadState = 'done'
145 |                 // reset form
146 |                 this.$refs.file_modal.resetForm()
147 |                 // recover the url of file
148 |                 let fileUrl = this.uploadTask.snapshot.ref.getDownloadURL().then(fileUrl => {
149 |                   this.sendFileMessage(fileUrl, ref, pathToUpload)
150 |                 })
151 |               })
152 |           },
153 | 
154 |           sendFileMessage(fileUrl, ref, pathToUpload) {
155 |             ref.child(pathToUpload).push().set(this.createMessage(fileUrl)).then(() => {
156 |               this.$nextTick(() => {
157 |                 $("html, body").scrollTop($(document).height())
158 |               })
159 |             }).catch(error => {
160 |               this.errors.push(error.message)
161 |             })
162 |           },
163 | 
164 |           // folder directory to store files in firebase storage
165 |           getPath() {
166 |             if(this.isPrivate) {
167 |               return 'chat/private/'+this.currentChannel.id
168 |             } else {
169 |               return 'chat/public'
170 |             }
171 |           },
172 | 
173 |           openFileModal() {
174 |             $("#fileModal").appendTo("body").modal('show');
175 |             console.log('openfilemodal')
176 |           }
177 |         },
178 | 
179 |         mounted() {
180 |           $("html, body").scrollTop($(document).height());
181 |         },
182 | 
183 |         beforeDestroy() {
184 |           if(this.uploadTask !== null) {
185 |             this.uploadTask.cancel()
186 |             this.uploadTask = null
187 |           }
188 |         }
189 |     }
190 | </script>
191 | 
192 | <style scoped>
193 |     .messageform {
194 |         position: fixed;
195 |         left:0;
196 |         bottom:0;
197 |         width: 67%;
198 |         z-index:100;
199 |         color:white;
200 |         text-align:center;
201 |         margin-bottom:-20px;
202 |         margin-left:33.3%;
203 |     }
204 | 
205 |     input, button {
206 |         height:50px;
207 |     }
208 | 
209 |     .progress {
210 |       margin-bottom: -16px;
211 |     }
212 | </style>
213 | 
214 | 
215 | 
216 | 
217 | 
218 | 
219 | 
220 | 
221 | 
222 | 
223 | 


--------------------------------------------------------------------------------
/final/src/messages/Messages.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <h2>{{ channelName }}</h2>
  4 |         <!-- show single messages -->
  5 |         <single-message :messages="messages"></single-message>
  6 |         <!-- message form -->
  7 |         <message-form></message-form>
  8 |     </div>
  9 | </template>
 10 | 
 11 | <script>
 12 | import SingleMessage from './SingleMessage'
 13 | import MessageForm from './MessageForm'
 14 | import database from 'firebase/database'
 15 | import {mapGetters} from 'vuex'
 16 | 
 17 |     export default {
 18 |         name: 'messages',
 19 | 
 20 |         components: {SingleMessage, MessageForm},
 21 | 
 22 |         data() {
 23 |             return {
 24 |                 messagesRef: firebase.database().ref('messages'),
 25 |                 privateMessagesRef: firebase.database().ref('privateMessages'),
 26 |                 messages: [],
 27 |                 channel: null,
 28 |                 listeners: []
 29 |             }
 30 |         },
 31 | 
 32 |         computed: {
 33 |             ...mapGetters(['currentChannel', 'currentUser', 'isPrivate']),
 34 |             // channel name
 35 |             channelName() {
 36 |                 if(this.channel !== null) {
 37 |                     return this.isPrivate ? '@ ' + this.channel.name : '# ' + this.channel.name
 38 |                 }
 39 |             }
 40 |         },
 41 | 
 42 |         watch: {
 43 |             currentChannel: function() {
 44 |                 // if current channel changes, watch for its messages
 45 |                 // this.messages = []
 46 |                 this.detachListeners()
 47 |                 this.addListeners()
 48 |                 this.channel = this.currentChannel
 49 |             }
 50 |         },
 51 | 
 52 |         methods: {
 53 |             addListeners() {
 54 |                 let ref = this.getMessagesRef()
 55 |                 // listen to child added events on current channel
 56 |                 ref.child(this.currentChannel.id).on('child_added', (snapshot) => {
 57 | 
 58 |                     let message = snapshot.val()
 59 |                     message['id'] = snapshot.key
 60 | 
 61 |                     this.messages.push(message)
 62 | 
 63 |                     // scroll to the top
 64 |                     this.$nextTick(() => {
 65 |                         $("html, body").scrollTop($(document).height());
 66 |                       })
 67 |                 })
 68 | 
 69 |                 // pass arguments to addToListeners() method
 70 |                 this.addToListeners(this.currentChannel.id, ref, 'child_added')
 71 |             },
 72 | 
 73 |             addToListeners(id, ref, event) {
 74 |                 let index = this.listeners.findIndex(el => {
 75 |                     return el.id === id && el.ref === ref && el.event === event
 76 |                 })
 77 | 
 78 |                 if(index === -1) {
 79 |                     this.listeners.push({id:id, ref:ref, event:event})
 80 |                 }
 81 |             },
 82 | 
 83 |             detachListeners() {
 84 |                 this.listeners.forEach(listener => {
 85 |                     listener.ref.child(listener.id).off(listener.event)
 86 |                 })
 87 | 
 88 |                 this.listeners = []
 89 |                 this.messages = []
 90 | 
 91 |                 // if(this.channel !== null) {
 92 |                 //     this.messagesRef.child(this.channel.id).off()
 93 |                 // }
 94 |             },
 95 | 
 96 |             getMessagesRef() {
 97 |                 if(this.isPrivate) {
 98 |                     return this.privateMessagesRef
 99 |                 } else {
100 |                     return this.messagesRef
101 |                 }
102 |             }
103 |         },
104 | 
105 |         beforeDestroy() {
106 |             this.detachListeners()
107 |         }
108 |     }
109 | </script>
110 | 
111 | 
112 | 
113 | 
114 | 
115 | 
116 | 
117 | 
118 | 
119 | 
120 | 
121 | 


--------------------------------------------------------------------------------
/final/src/messages/SingleMessage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <div class="mt-3 mb-5">
 4 |             <div v-for="message in messages">
 5 |                 <div class="media">
 6 |                     <img :src="message.user.avatar" height="50" class="align-self-start mr-3">
 7 | 
 8 |                     <div class="media-body">
 9 |                         <h6 class="mt-0">
10 |                             <a href="#">{{ message.user.name }}</a> - {{ message.timestamp | fromNow }}
11 |                         </h6>
12 |                         <p v-if="!isFile(message)" :class="{'self_message': selfMessage(message.user)}">{{ message.content }}</p>
13 | 
14 |                         <img v-else class="img img-responsive" height="200" :src="message.image" alt="image">
15 |                     </div>
16 |                 </div>
17 |             </div>
18 |         </div>
19 |     </div>
20 | </template>
21 | 
22 | <script>
23 | import moment from 'moment'
24 | import {mapGetters} from 'vuex'
25 | 
26 |     export default {
27 |         name: 'single-message',
28 |         props: ['messages'],
29 | 
30 |         computed: {
31 |             ...mapGetters(['currentUser'])
32 |         },
33 | 
34 |         methods: {
35 |             selfMessage(user) {
36 |                 return user.id === this.currentUser.uid
37 |             },
38 | 
39 |             isFile(message) {
40 |                 return message.content == null && message.image != null
41 |             }
42 |         },
43 | 
44 |         filters: {
45 |             fromNow(value) {
46 |                 return moment(value).fromNow()
47 |             }
48 |         }
49 |     }
50 | </script>
51 | 
52 | <style scoped>
53 |     .self_message {
54 |         border-left: 5px solid red;
55 |         padding: 0 10px;
56 |     }
57 | </style>
58 | 
59 | 
60 | 
61 | 
62 | 
63 | 
64 | 
65 | 
66 | 
67 | 
68 | 
69 | 


--------------------------------------------------------------------------------
/final/src/mixins.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     methods: {
 3 |         handleNotifications(channelId, currentChannelId, notifCount, snapshot) {
 4 |             let lastTotal = 0;
 5 |             // find if channelId is already added to notifCount[]
 6 |             let index = notifCount.findIndex(el => el.id === channelId);
 7 |             // if found
 8 |             if (index != -1) {
 9 |                 if (channelId !== currentChannelId) {
10 |                     lastTotal = notifCount[index].total;
11 | 
12 |                     if (snapshot.numChildren() - lastTotal > 0) {
13 |                         notifCount[index].notif = snapshot.numChildren() - lastTotal;
14 |                     }
15 |                 }
16 |                 notifCount[index].lastKnownTotal = snapshot.numChildren();
17 |             } else {
18 |                 // push to notifCount[]
19 |                 notifCount.push({
20 |                     id: channelId,
21 |                     total: snapshot.numChildren(),
22 |                     lastKnownTotal: snapshot.numChildren(),
23 |                     notif: 0
24 |                 });
25 |             }
26 |         }
27 |     }
28 | };
29 | 


--------------------------------------------------------------------------------
/final/src/pages/Chat.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <div class="container-fluid">
 4 |             <div class="row">
 5 |                 <div class="col-md-4 sidebar">
 6 |                     <sidebar></sidebar>
 7 |                 </div>
 8 | 
 9 |                 <div class="col-md-8 content">
10 |                     <messages></messages>
11 |                 </div>
12 |             </div>
13 |         </div>
14 |     </div>
15 | </template>
16 | 
17 | <script>
18 | import Sidebar from '../sidebar/Sidebar'
19 | import Messages from '../messages/Messages'
20 | 
21 |     export default {
22 |         name: 'chat',
23 | 
24 |         components: {Sidebar, Messages}
25 | 
26 |     }
27 | </script>
28 | 
29 | <style scoped>
30 |     .sidebar {
31 |         width: 33.5%;
32 |         display: block;
33 |         float: left;
34 |         position: fixed;
35 |         height: 100%;
36 |         background: #000;
37 |         padding-top: 2em;
38 |         overflow: scroll;
39 |     }
40 | 
41 |     .content {
42 |         width: 66%;
43 |         display: block;
44 |         float: left;
45 |         margin-left: 34%;
46 |     }
47 | </style>
48 | 
49 | 
50 | 
51 | 
52 | 
53 | 
54 | 
55 | 
56 | 
57 | 
58 | 
59 | 
60 | 
61 | 
62 | 
63 | 
64 | 
65 | 


--------------------------------------------------------------------------------
/final/src/pages/Login.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div class="jumbotron bg-primary text-white text-center">
  4 |       <h2 class="lead display-3">#SLACK#</h2>
  5 |       <hr>
  6 |       <p>Realtime communication at it's best!</p>
  7 |       <hr>
  8 |     </div>
  9 |     <!-- login with email and password -->
 10 |     <div class="col-md-6 offset-md-3">
 11 |       <h2 class="text-center text-primary mb-5 display-4"><i class="fa fa-user"></i> Login</h2>
 12 |       <form>
 13 |         <div class="form-group">
 14 |           <input v-model.trim="email" @input="clearErrors" type="email" name="email" class="form-control" placeholder="Email" required="">
 15 |         </div>
 16 |         <div class="form-group">
 17 |           <input v-model.trim="password" type="password" password="password" class="form-control" placeholder="Password" required>
 18 |         </div>
 19 |         <button @click.prevent="login" type="submit" class="btn btn-lg btn-primary form-control" v-if="!isLoading">Login</button>
 20 |         <button class="btn btn-primary form-control" disabled v-else>Please wait...</button>
 21 |         <big class="form-text">Not registered yet? <router-link to="register">Register</router-link>
 22 |                     <span class="float-right text-success" @click.prevent="fp">
 23 |                         <span v-if="!fpform">Forgot password</span>
 24 |                         <span v-else>
 25 |                             <i class="fa fa-close text-danger"></i>
 26 |                         </span>
 27 |                     </span>
 28 |                   </big>
 29 |         <br>
 30 |         <div class="alert alert-danger" v-if="hasErrors">
 31 |           <div v-for="error in errors">{{ error }}</div>
 32 |         </div>
 33 |       </form>
 34 |       <!-- forgot password form -->
 35 |       <form v-if="fpform">
 36 |         <div class="input-group">
 37 |           <input v-model.trim="forgot_password" type="email" name="forgot_password" class="form-control" placeholder="Email to send password reset link">
 38 |           <button @click.prevent="forgotPassword" class="btn btn-primary">Submit</button>
 39 |         </div>
 40 |         <br>
 41 |         <!-- show loading statue -->
 42 |         <div class="alert alert-info" v-if="loading">
 43 |             <div>Please wait...</div>
 44 |         </div>
 45 |         <!-- show errors -->
 46 |         <div class="alert alert-danger" v-if="hasErrors">
 47 |           <div v-for="error in errors">{{ error }}</div>
 48 |         </div>
 49 |       </form>
 50 |       <!-- social login -->
 51 |       <div class="text-center mt-4">
 52 |         <button @click="loginWithGoogle" class="btn btn-danger btn-lg btn-block">Login with Google</button>
 53 |       </div>
 54 |       <div class="text-center mt-4">
 55 |         <button @click="loginWithTwitter" class="btn btn-info btn-lg btn-block">Login with Twitter</button>
 56 |       </div>
 57 |     </div>
 58 |   </div>
 59 | </template>
 60 | <script>
 61 | import auth from 'firebase/auth'
 62 | import database from 'firebase/database'
 63 | 
 64 | export default {
 65 |   name: 'login',
 66 | 
 67 |   data() {
 68 |     return {
 69 |       email: '',
 70 |       password: '',
 71 |       forgot_password: '',
 72 |       fpform: false,
 73 |       errors: [],
 74 |       loading: false,
 75 |       usersRef: firebase.database().ref('users')
 76 |     }
 77 |   },
 78 | 
 79 |   computed: {
 80 |     hasErrors() {
 81 |       return this.errors.length > 0
 82 |     }
 83 |   },
 84 | 
 85 |   methods: {
 86 |     login() {
 87 |       console.log('login')
 88 |       this.errors = []
 89 | 
 90 |       if (!this.isFormValid()) {
 91 |         this.isLoading = true
 92 | 
 93 |         firebase.auth().signInWithEmailAndPassword(this.email, this.password).then(response => {
 94 |           let user = response.user;
 95 |           console.log(user)
 96 | 
 97 |           this.$store.dispatch('setUser', user)
 98 |           this.$router.push('/')
 99 | 
100 |         }).catch(error => {
101 |           this.errors.push(error.message)
102 |           this.isLoading = false
103 |         })
104 |       }
105 |     },
106 |     isFormValid() {
107 |       if (this.email.length > 0 && this.email.length <= 6 && this.password.length > 0 && this.password.length <= 6) {
108 |         return true
109 |       }
110 |       return false
111 |     },
112 | 
113 |     forgotPassword() {
114 |       console.log('forgot password', this.forgot_password)
115 |       firebase.auth().sendPasswordResetEmail(this.forgot_password)
116 |         .then(success => {
117 |           this.fpform = false
118 |           alert('Check your email for password reset link')
119 |           this.$router.push('/')
120 |         })
121 |         .catch(error => {
122 |           alert(error.message)
123 |         })
124 |     },
125 | 
126 |     fp() {
127 |       return this.fpform = !this.fpform
128 |     },
129 | 
130 |     loginWithGoogle() {
131 |       // loading set to true
132 |       this.loading = true
133 |       // clear old errors
134 |       this.errors = []
135 | 
136 |       firebase.auth().signInWithPopup(new firebase.auth.GoogleAuthProvider())
137 |         .then((response) => {
138 |           // console.log(response.user)
139 | 
140 |           // pass user to save in db
141 |           this.saveUserToUsersRef(response.user)
142 | 
143 |           // dispatch setUser action
144 |           this.$store.dispatch('setUser', response.user)
145 |           // then redirect user to '/' page
146 |           this.$router.push('/')
147 |         })
148 |         .catch(error => {
149 |           this.errors.push(error.message)
150 |           // set loading to false
151 |           this.loading = false
152 |         })
153 |     },
154 | 
155 |     // save user to database
156 |     saveUserToUsersRef(user) {
157 |       return this.usersRef.child(user.uid).set({
158 |         name: user.displayName,
159 |         avatar: user.photoURL
160 |       })
161 |     },
162 | 
163 |     loginWithTwitter() {
164 |       // loading set to true
165 |       this.loading = true
166 |       // clear old errors
167 |       this.errors = []
168 | 
169 |       firebase.auth().signInWithPopup(new firebase.auth.TwitterAuthProvider())
170 |         .then((response) => {
171 |           // console.log(response.user)
172 | 
173 |           // dispatch setUser action
174 |           this.$store.dispatch('setUser', response.user)
175 |           // then redirect user to '/' page
176 |           this.$router.push('/')
177 |         })
178 |         .catch(error => {
179 |           this.errors.push(error.message)
180 |           // set loading to false
181 |           this.loading = false
182 |         })
183 |     },
184 | 
185 |     clearErrors() {
186 |         this.errors = []
187 |     }
188 |   }
189 | }
190 | 
191 | </script>
192 | <style>
193 | .btn,
194 | .jumbotron {
195 |   border-radius: 0px;
196 | }
197 | 
198 | </style>
199 | 


--------------------------------------------------------------------------------
/final/src/pages/Register.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     
  3 |     <div class="">
  4 |         <div class="jumbotron bg-primary text-white text-center">
  5 |             <h2 class="lead display-3">#SLACK#</h2>
  6 |             <hr>
  7 |             <p>Realtime communication at it's best!</p>
  8 |             <hr>
  9 |         </div>
 10 | 
 11 |         <div class="row">
 12 |             <div class="col-md-6 offset-md-3">
 13 |                 <h2 class="text-center text-primary mb-5 display-4"><i class="fa fa-user"></i> Register</h2>
 14 |                 <form>
 15 |                   <div class="form-group">
 16 |                     <input v-model.trim="name" @input="clearErrors" type="text" name="name" class="form-control" placeholder="Name" required>
 17 |                   </div>
 18 | 
 19 |                   <div class="form-group">
 20 |                     <input v-model.trim="email" @input="clearErrors" type="email" name="email" class="form-control" placeholder="Email" required>
 21 |                   </div>
 22 | 
 23 |                   <div class="form-group">
 24 |                     <input v-model.trim="password" type="password" password="password" class="form-control" placeholder="Password" required>
 25 |                   </div>
 26 | 
 27 |                   <div class="form-group">
 28 |                     <input v-model.trim="password_confirmation" type="password" name="password_confirmation" class="form-control" placeholder="Repeat password" required>
 29 |                   </div>
 30 | 
 31 |                   <button @click.prevent="register" type="submit" class="btn btn-primary btn-lg form-control" v-if="!isLoading">Register</button>
 32 |                   <button class="btn btn-primary form-control" disabled v-else>Please wait...</button>
 33 | 
 34 |                   <big class="form-text">Already registered? <router-link to="login">Login</router-link>
 35 |                 </big>
 36 | 
 37 |                     <br>
 38 | 
 39 |                   <div class="alert alert-danger" v-if="hasErrors">
 40 |                       <div v-for="error in errors">{{ error }}</div>
 41 |                   </div>
 42 |                 </form>
 43 |             </div>
 44 |         </div>
 45 |     </div>
 46 | 
 47 | </template>
 48 | 
 49 | <script>
 50 | import firebase from 'firebase'
 51 | import md5 from 'md5'
 52 | 
 53 |     export default {
 54 |         name: 'register',
 55 |         data() {
 56 |             return {
 57 |                 name: '',
 58 |                 email: '',
 59 |                 password: '',
 60 |                 password_confirmation: '',
 61 |                 errors: [],
 62 |                 usersRef: firebase.database().ref('users'),
 63 |                 isLoading: false
 64 |             }
 65 |         },
 66 | 
 67 |         computed: {
 68 |             hasErrors() {
 69 |                 return this.errors.length > 0
 70 |             }
 71 |         },
 72 | 
 73 |         methods: {
 74 |             register() {
 75 |                 // on each new attempt clear the old errors
 76 |                 this.errors = []
 77 |                 // console.log('register')
 78 |                 if(this.isFormValid()) {
 79 |                     // set loading class to true
 80 |                     this.isLoading = true
 81 | 
 82 |                     firebase.auth().createUserWithEmailAndPassword(this.email, this.password)
 83 |                     .then(response => {
 84 |                         console.log(response)
 85 |                         // set the user's name and avatar
 86 |                         let user = response.user;
 87 | 
 88 |                         user.updateProfile({
 89 |                                 displayName: this.name,
 90 |                                 photoURL: "http://www.gravatar.com/avatar/"+md5(user.email)+"?d=identicon"
 91 |                             })
 92 | 
 93 |                         .then(() => {
 94 |                             // pass user to this method to store in database
 95 |                             this.saveUserToUsersRef(user)
 96 |                             .then(() => {
 97 |                                 //  create store and save user
 98 |                                 //  using actions to cause mutations
 99 |                                 this.$store.dispatch("setUser", user)
100 |                                 this.$router.push('/')
101 |                             })
102 |                         },
103 |                         error => {
104 |                             console.log(error)
105 |                             this.errors.push(error.message)
106 |                             // set loading class to true
107 |                             this.isLoading = false
108 |                         })
109 | 
110 |                     }) 
111 |                     .catch(error => {
112 |                         console.log(error)
113 |                         this.errors.push(error.message)
114 |                         // set loading class to true
115 |                         this.isLoading = false
116 |                     })
117 |                 }
118 |             },
119 | 
120 |             // user received from register method
121 |             saveUserToUsersRef(user){
122 |                 return this.usersRef.child(user.uid).set({
123 |                     name: user.displayName,
124 |                     avatar: user.photoURL
125 |                 })
126 |             },
127 | 
128 |             isEmpty () {
129 |                 if(this.name.length == 0 || this.email.length == 0 || this.password.length == 0 || this.password_confirmation.length == 0){
130 |                     return true;
131 |                 }
132 |                 return false;
133 |             },
134 | 
135 |             passwordValid () {
136 |                 if(this.password.length < 6 || this.password_confirmation.length < 6){
137 |                     return false;
138 |                 }
139 |                 if(this.password !== this.password_confirmation){
140 |                     return false;
141 |                 }
142 |                 return true;
143 |             },
144 | 
145 |             isFormValid(){
146 |                 if(this.isEmpty()){
147 |                     this.errors.push('Please complete all fields')
148 |                     return false
149 |                 }
150 |                 if(!this.passwordValid()){
151 |                     this.errors.push('Incorrect password')
152 |                     return false
153 |                 }
154 |                 return true
155 |             },
156 | 
157 |             clearErrors() {
158 |                 this.errors = []
159 |             }
160 |         }
161 |     }
162 | 
163 | 
164 | </script>
165 | 
166 | 
167 | 
168 | 
169 |   


--------------------------------------------------------------------------------
/final/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import Router from "vue-router";
 3 | 
 4 | import Chat from "../pages/Chat";
 5 | import Login from "../pages/Login";
 6 | import Register from "@/pages/Register";
 7 | import auth from "firebase/auth";
 8 | 
 9 | Vue.use(Router);
10 | 
11 | export default new Router({
12 |     routes: [
13 |         {
14 |             path: "/",
15 |             name: "chat",
16 |             component: Chat,
17 |             beforeEnter: (to, from, next) => {
18 |                 if (!firebase.auth().currentUser) {
19 |                     next("/login");
20 |                 } else {
21 |                     next();
22 |                 }
23 |             }
24 |         },
25 |         {
26 |             path: "/login",
27 |             name: "login",
28 |             component: Login
29 |         },
30 |         {
31 |             path: "/register",
32 |             name: "register",
33 |             component: Register
34 |         }
35 |     ],
36 |     mode: "history"
37 | });
38 | 


--------------------------------------------------------------------------------
/final/src/sidebar/Channels.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <button @click="openModal" class="btn btn-outline-primary">Add Channel</button>
  4 | 
  5 |         <!-- show list of channels -->
  6 |         <div class="mt-4">
  7 |             <button v-for="channel in channels" class="list-group-item list-group-item-action" type="button" :class="{'active': setActiveChannel(channel)}" @click="changeChannel(channel)">{{ channel.name }} <span v-if="getNotification(channel) > 0 && channel.id !== currentChannel.id" class="float-right">{{ getNotification(channel) }}</span></button>
  8 |         </div>
  9 | 
 10 |         <!-- Modal -->
 11 |         <div class="modal fade" id="channelModal">
 12 |           <div class="modal-dialog modal-dialog-centered" role="document">
 13 |             <div class="modal-content">
 14 | 
 15 |               <div class="modal-header">
 16 |                 <h5 class="modal-title text-dark">Channel name</h5>
 17 |                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 18 |                   <span aria-hidden="true">&times;</span>
 19 |                 </button>
 20 |               </div>
 21 | 
 22 |               <div class="modal-body">
 23 |                 <form>
 24 |                     <div class="form-group">
 25 |                         <input v-model="new_channel" type="text" id="new_channel" name="new_channel" placeholder="Channel name" class="form-control">
 26 |                     </div>
 27 |                     <!-- errors -->
 28 |                     <ul class="list-group" v-if="hasErrors">
 29 |                         <li class="list-group-item text-danger" v-for="error in errors">{{ error }}</li>
 30 |                     </ul>
 31 |                 </form>
 32 |               </div>
 33 | 
 34 |               <div class="modal-footer">
 35 |                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancle</button>
 36 |                 <button @click="addChannel" type="button" class="btn btn-primary">Add Channel</button>
 37 |               </div>
 38 |             </div>
 39 |           </div>
 40 |         </div>
 41 |     </div>
 42 | </template>
 43 | 
 44 | <script>
 45 | import database from 'firebase/database'
 46 | import {mapGetters} from 'vuex'
 47 | import mixin from '../mixins'
 48 | 
 49 |     export default {
 50 |         name: 'channels',
 51 | 
 52 |         data() {
 53 |             return {
 54 |                 new_channel: '',
 55 |                 errors: [],
 56 |                 channelsRef: firebase.database().ref('channels'),
 57 |                 messagesRef: firebase.database().ref('messages'),
 58 |                 notifCount: [],
 59 |                 channels: [],
 60 |                 channel: null
 61 |             }
 62 |         },
 63 | 
 64 |         mixins: [mixin],
 65 | 
 66 |         computed: {
 67 |             ...mapGetters(['currentChannel', 'isPrivate']),
 68 | 
 69 |             hasErrors() {
 70 |                 return this.errors.length > 0
 71 |             }
 72 |         },
 73 | 
 74 |         watch: {
 75 |             isPrivate() {
 76 |                 if(this.isPrivate) {
 77 |                     this.resetNotifications()
 78 |                 }
 79 |             }
 80 |         },
 81 | 
 82 |         methods: {
 83 |             openModal() {
 84 |                 $('#channelModal').appendTo("body").modal('show');
 85 |             },
 86 | 
 87 |             // add channel
 88 |             addChannel() {
 89 |                 this.errors = []
 90 |                 // get key to the newly creating channel
 91 |                 let key = this.channelsRef.push().key
 92 |                 console.log('newly creating channel key: ', key)
 93 |                 // minimum info needed to create a new channel
 94 |                 // id and name
 95 |                 let newChannel = {id: key, name: this.new_channel}
 96 |                 // create new channel
 97 |                 this.channelsRef.child(key).update(newChannel)
 98 |                 .then(() => {
 99 |                     // dispatch setCurrentChannel when a new channel is added
100 |                     this.$store.dispatch("setCurrentChannel", newChannel)
101 |                     
102 |                     this.new_channel = ''
103 |                     $("#channelModal").modal('hide')
104 |                 })
105 |                 // error handling
106 |                 .catch((error) => {
107 |                     this.errors.push(error.message)
108 |                 })
109 |             },
110 | 
111 |             addListeners() {
112 |                 this.channelsRef.on('child_added', snapshot => {
113 |                     // console.log('listening channelsRef on child_added: ', snapshot.val())
114 |                     this.channels.push(snapshot.val())
115 | 
116 |                     // set current channel
117 |                     if(this.channels.length > 0) {
118 |                         // set the first one as current channel
119 |                         this.channel = this.channels[0]
120 |                         // dispatch current channel to store
121 |                         this.$store.dispatch("setCurrentChannel", this.channel) // pick the first one
122 |                     }
123 |                     // add count listener to manage the notifications
124 |                     this.addCountListener(snapshot.key)
125 |                 })
126 |             },
127 | 
128 |             addCountListener(channelId) {
129 |                 this.messagesRef.child(channelId).on('value', snapshot => {
130 |                     this.handleNotifications(channelId, this.currentChannel.id, this.notifCount, snapshot)
131 |                 })
132 |             },
133 | 
134 |             getNotification(channel) {
135 |                 let notif = 0
136 |                 this.notifCount.forEach(el => {
137 |                     if(el.id === channel.id) {
138 |                         notif = el.notif
139 |                     }
140 |                 })
141 |                 return notif
142 |             },
143 | 
144 |             // set active channel
145 |             setActiveChannel(channel) {
146 |                 return channel.id === this.currentChannel.id
147 |             },
148 | 
149 |             // change channel
150 |             changeChannel(channel) {
151 |                 // reset notifications
152 |                 this.resetNotifications()
153 |                 this.$store.dispatch('setPrivate', false)
154 |                 this.$store.dispatch("setCurrentChannel", channel)
155 |                 // set channel
156 |                 this.channel = channel
157 |             },
158 | 
159 |             // reset notifications
160 |             resetNotifications() {
161 |                 let index = this.notifCount.findIndex(el => el.id === this.channel.id)
162 |                 if(index !== -1) {
163 |                     this.notifCount[index].total = this.notifCount[index].lastKnownTotal
164 |                     this.notifCount[index].notif = 0
165 |                 }
166 |             },
167 | 
168 |             detachListeners() {
169 |                 this.channelsRef.off()
170 |                 this.channels.forEach(el => {
171 |                     this.messagesRef.child(el.id).off()
172 |                 })
173 |             }
174 |         },
175 | 
176 |         mounted() {
177 |             this.addListeners()
178 |         },
179 | 
180 |         beforeDestroy() {
181 |             this.detachListeners()
182 |         }
183 |     }
184 | </script>
185 | 
186 | 
187 | 
188 | 
189 | 
190 | 
191 | 
192 | 
193 | 
194 | 
195 | 


--------------------------------------------------------------------------------
/final/src/sidebar/Sidebar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 | 
 4 |         <h2 class="text-light">#SLACK#</h2>
 5 |         <hr style="border: 1px solid #333;">
 6 | 
 7 |         <span>
 8 |             <img class="rounded-circle mr-2" height="30" :src="currentUser.photoURL" />
 9 |             <span class="text-light">{{ currentUser.displayName }}</span> 
10 |         </span>
11 | 
12 |         <hr style="border: 1px solid #333;">
13 | 
14 |         <button @click="logout" class="btn btn-outline-light">Logout</button>
15 | 
16 |         <hr style="border: 1px solid #333;">
17 | 
18 |         <channels></channels>
19 | 
20 |         <hr style="border: 1px solid #333;">
21 | 
22 |         <users></users>
23 | 
24 |     </div>
25 | </template>
26 | 
27 | <script>
28 | import auth from 'firebase/auth'
29 | import {mapGetters} from 'vuex'
30 | import Channels from './Channels'
31 | import Users from './Users'
32 | import database from 'firebase/database'
33 | 
34 |     export default {
35 |         name: 'sidebar',
36 | 
37 |         components: {Channels, Users},
38 | 
39 |         data() {
40 |             return {
41 |                 presenceRef: firebase.database().ref('presence')
42 |             }
43 |         },
44 | 
45 |         computed: {
46 |             ...mapGetters(['currentUser'])
47 |         },
48 | 
49 |         methods: {
50 |             logout() {
51 |                 this.presenceRef.child(this.currentUser.uid).remove()
52 |                 firebase.auth().signOut()
53 |                 this.$store.dispatch('setUser', null)
54 |                 this.$router.push('/login')
55 |             }
56 |         }
57 |     }
58 | </script>
59 | 
60 | 
61 | 
62 | 
63 | 
64 | 
65 | 
66 | 
67 | 
68 | 
69 | 
70 | 
71 | 
72 | 
73 | 
74 | 
75 | 
76 | 
77 | 


--------------------------------------------------------------------------------
/final/src/sidebar/Users.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <div class="text-light">
  4 |             <h4>Users</h4>
  5 | 
  6 |                 <div class="mt-4">
  7 |                     <button v-for="user in users" class="list-group-item list-group-item-action" type="button" :class="{'active': isActive(user)}" @click.prevent="changeChannel(user)">
  8 | 
  9 |                         <span :class="{'fa fa-circle online': isOnline(user), 'fa fa-circle offline': !isOnline(user)}"></span>
 10 |                         
 11 |                         <span>
 12 |                             <img class="img rounded-circle" :src="user.avatar" height="20" />
 13 |                             <span><a :class="{'text-light': isActive(user)}" href="#">{{ user.name }}</a><span class="float-right" v-if="getNotification(user) >= 1">{{ getNotification(user) }}</span></span>
 14 |                         </span>
 15 | 
 16 |                     </button>
 17 |                 </div>
 18 | 
 19 |         </div>
 20 |     </div>
 21 | </template>
 22 | 
 23 | <script>
 24 | import database from 'firebase/database'
 25 | import {mapGetters} from 'vuex'
 26 | import mixin from '../mixins'
 27 | 
 28 |     export default {
 29 |         name: 'users',
 30 | 
 31 |         data() {
 32 |             return {
 33 |                 users: [],
 34 |                 usersRef: firebase.database().ref('users'),
 35 |                 connectedRef: firebase.database().ref('.info/connected'),
 36 |                 presenceRef: firebase.database().ref('presence'),
 37 |                 privateMessagesRef: firebase.database().ref('privateMessages'),
 38 |                 notifCount: [],
 39 |                 channel: null
 40 |             }
 41 |         },
 42 | 
 43 |         mixins: [mixin],
 44 | 
 45 |         computed: {
 46 |             ...mapGetters(['currentUser', 'currentChannel', 'isPrivate'])
 47 |         },
 48 | 
 49 |         watch: {
 50 |             isPrivate() {
 51 |                 if(!this.isPrivate) {
 52 |                     this.resetNotifications()
 53 |                 }
 54 |             }
 55 |         },
 56 | 
 57 |         methods: {
 58 |             addListeners() {
 59 |                 this.usersRef.on('child_added', (snapshot) => {
 60 |                     if(this.currentUser.uid !== snapshot.key) {
 61 |                         // build user object and push to users[]
 62 |                         let user = snapshot.val()
 63 |                         user['uid'] = snapshot.key
 64 |                         user['status'] = 'offline'
 65 |                         this.users.push(user)
 66 |                     }
 67 |                 })
 68 | 
 69 |                 // presenceRef child_added
 70 |                 this.presenceRef.on('child_added', snapshot => {
 71 |                     if(this.currentUser.uid !== snapshot.key) {
 72 |                         // pass to user status method
 73 |                         this.addStatusToUser(snapshot.key)
 74 | 
 75 |                         let channelId = this.getChannelId(snapshot.key)
 76 | 
 77 |                         this.privateMessagesRef.child(channelId).on('value', snapshot => {
 78 |                             this.handleNotifications(channelId, this.currentChannel.id, this.notifCount, snapshot)
 79 |                         })
 80 |                     }
 81 |                 })
 82 | 
 83 |                 // presenceRef child_removed
 84 |                 this.presenceRef.on('child_removed', snapshot => {
 85 |                     if(this.currentUser.uid !== snapshot.key) {
 86 |                         // pass to user status method
 87 |                         this.addStatusToUser(snapshot.key, false)
 88 | 
 89 |                         this.privateMessagesRef.child(this.getChannelId(snapshot.key)).off()
 90 |                     }
 91 |                 })
 92 | 
 93 |                 // returns 'connected' to every user connected to our application
 94 |                 this.connectedRef.on('value', snapshot => {
 95 |                     // console.log('connected user: ', snapshot)
 96 |                     if(snapshot.val() === true) {
 97 |                         let ref = this.presenceRef.child(this.currentUser.uid)
 98 |                         ref.set(true)
 99 |                         ref.onDisconnect().remove()
100 |                     }
101 |                 })
102 |             },
103 | 
104 |             // add user status online / offline
105 |             addStatusToUser(userId, connected = true) {
106 |                 let index = this.users.findIndex(user => user.uid === userId)
107 |                 if(index !== -1) {
108 |                     connected === true ? this.users[index].status = 'online' : this.users[index].status = 'offline'
109 |                 }
110 |             },
111 | 
112 |             // is user online or offline
113 |             isOnline(user) {
114 |                 return user.status == 'online'
115 |             }, 
116 | 
117 |             getNotification(user) {
118 |                 let channelId = this.getChannelId(user.uid)
119 |                 let notif = 0
120 | 
121 |                 this.notifCount.forEach(el => {
122 |                     if(el.id === channelId) {
123 |                         notif = el.notif
124 |                     }
125 |                 })
126 |                 return notif
127 |             },
128 | 
129 |             resetNotifications(user = null) {
130 |                 let channelId = null
131 | 
132 |                 if(user !== null) {
133 |                     channelId = this.getChannelId(user.uid)
134 |                 } else {
135 |                     channelId = this.channel.id
136 |                 }
137 | 
138 |                 let index = this.notifCount.findIndex(el => el.id === channelId)
139 |                 if(index !== -1) {
140 |                     this.notifCount[index].total = this.notifCount[index].lastKnownTotal
141 |                     this.notifCount[index].notif = 0
142 |                 }
143 |             },
144 | 
145 |             detachListeners() {
146 |                 this.usersRef.off()
147 |                 this.presenceRef.off()
148 |                 this.connectedRef.off()
149 | 
150 |                 this.channels.forEach(el => {
151 |                     this.messagesRef.child(el.id).off()
152 |                 })
153 |             },
154 | 
155 |             // changeChannel
156 |             changeChannel(user) {
157 | 
158 |                 if(this.channel === null) {
159 |                     this.resetNotifications(user)
160 |                 } else {
161 |                     this.resetNotifications()
162 |                 }
163 |                 // to change channel, you need channel id
164 |                 // to get channel id, use getChannelId() method below
165 |                 let channelId = this.getChannelId(user.uid)
166 |                 // create channel object with id and name
167 |                 let channel = {id: channelId, name: user.name}
168 | 
169 |                 this.channel = channel
170 | 
171 |                 this.$store.dispatch('setPrivate', true)
172 |                 this.$store.dispatch('setCurrentChannel', channel)
173 |             },
174 | 
175 |             isActive(user) {
176 |                 let channelId = this.getChannelId(user.uid)
177 |                 return this.currentChannel.id === channelId
178 |             },
179 | 
180 |             // get channel id
181 |             getChannelId(userId) {
182 |                 // use this format to create channel smallerUserId/biggerUserId
183 |                 return userId < this.currentUser.uid ? userId+'/'+this.currentUser.uid : this.currentUser.uid +'/'+userId 
184 |             }
185 |         },
186 | 
187 |         mounted() {
188 |             this.addListeners()
189 |         },
190 | 
191 |         beforeDestroy() {
192 |             this.detachListeners()
193 |         }
194 |     }
195 | </script>
196 | 
197 | <style scoped>
198 |     .online{color:green;}
199 |     .offline{color:red;}
200 | </style>
201 | 
202 | 
203 | 
204 | 
205 | 
206 | 
207 | 
208 | 
209 | 
210 | 
211 | 
212 | 
213 | 
214 | 


--------------------------------------------------------------------------------
/final/src/store.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import Vuex from 'vuex';
 3 | 
 4 | Vue.use(Vuex);
 5 | 
 6 | // create state that holds data
 7 | const state = {
 8 |     currentUser: null,
 9 |     currentChannel: null,
10 |     isPrivate: false
11 | };
12 | 
13 | // update state data through mutations
14 | const mutations = {
15 |     SET_USER(state, user) {
16 |         state.currentUser = user;
17 |     },
18 | 
19 |     SET_CURRENT_CHANNEL(state, channel) {
20 |         state.currentChannel = channel;
21 |     },
22 | 
23 |     SET_PRIVATE(state, isPrivate) {
24 |         state.isPrivate = isPrivate;
25 |     }
26 | };
27 | 
28 | // create actions for mutations with necessary data
29 | const actions = {
30 |     setUser(state, user) {
31 |         state.commit('SET_USER', user);
32 |     },
33 | 
34 |     setCurrentChannel({ commit }, channel) {
35 |         commit('SET_CURRENT_CHANNEL', channel);
36 |     },
37 | 
38 |     setPrivate({ commit }, isPrivate) {
39 |         commit('SET_PRIVATE', isPrivate);
40 |     }
41 | };
42 | 
43 | // get data from state
44 | const getters = {
45 |     currentUser: state => state.currentUser,
46 |     currentChannel: state => state.currentChannel,
47 |     isPrivate: state => state.isPrivate
48 | };
49 | 
50 | // create vuex store
51 | const store = new Vuex.Store({
52 |     state,
53 |     mutations,
54 |     actions,
55 |     getters
56 | });
57 | 
58 | export default store;
59 | 


--------------------------------------------------------------------------------
/final/static/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kaloraat/vue-vuex-firebase-messaging-app/1b74fb15be1e5b40b2314c4d230cdca1a04be73d/final/static/.gitkeep


--------------------------------------------------------------------------------
/final/storage.rules:
--------------------------------------------------------------------------------
 1 | service firebase.storage {
 2 |   match /b/{bucket}/o {
 3 |     match /chat {
 4 |         match /public/{imagePath=**}{
 5 |         // allow read, write: if request.auth != null;
 6 |                 allow read: if request.auth != null;
 7 |         allow write: if request.auth != null && request.resource.contentType.matches('image/.*') && request.resource.size < 1 * 1024 * 1024;
 8 |       }
 9 |       
10 |       match /private/{user1}/{user2}/{imagePath=**}{
11 |         // allow read, write: if request.auth != null;
12 |                 allow read: if request.auth != null && (request.auth.uid == user1 || request.auth.uid == user2);
13 |         allow write: if request.auth != null && (request.auth.uid == user1 || request.auth.uid == user2) && request.resource.contentType.matches('image/.*') && request.resource.size < 1 * 1024 * 1024;
14 |       }
15 |     }
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/img/app.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kaloraat/vue-vuex-firebase-messaging-app/1b74fb15be1e5b40b2314c4d230cdca1a04be73d/img/app.png


--------------------------------------------------------------------------------
/img/app2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kaloraat/vue-vuex-firebase-messaging-app/1b74fb15be1e5b40b2314c4d230cdca1a04be73d/img/app2.png


--------------------------------------------------------------------------------
/img/app3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kaloraat/vue-vuex-firebase-messaging-app/1b74fb15be1e5b40b2314c4d230cdca1a04be73d/img/app3.png


--------------------------------------------------------------------------------
/img/app4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kaloraat/vue-vuex-firebase-messaging-app/1b74fb15be1e5b40b2314c4d230cdca1a04be73d/img/app4.png


--------------------------------------------------------------------------------
/img/app5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kaloraat/vue-vuex-firebase-messaging-app/1b74fb15be1e5b40b2314c4d230cdca1a04be73d/img/app5.png


--------------------------------------------------------------------------------
/img/app6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kaloraat/vue-vuex-firebase-messaging-app/1b74fb15be1e5b40b2314c4d230cdca1a04be73d/img/app6.png


--------------------------------------------------------------------------------
/img/app7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kaloraat/vue-vuex-firebase-messaging-app/1b74fb15be1e5b40b2314c4d230cdca1a04be73d/img/app7.png


--------------------------------------------------------------------------------
/slack versions.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kaloraat/vue-vuex-firebase-messaging-app/1b74fb15be1e5b40b2314c4d230cdca1a04be73d/slack versions.zip


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