├── static
    └── .gitkeep
├── config
    ├── prod.env.js
    ├── dev.env.js
    └── index.js
├── slack2.gif
├── .firebaserc
├── src
    ├── assets
    │   ├── logo.png
    │   └── Slack_icons.svg
    ├── pages
    │   ├── Schat.vue
    │   ├── Login.vue
    │   └── Register.vue
    ├── router
    │   └── index.js
    ├── App.vue
    ├── components
    │   ├── sidebar
    │   │   ├── Sidebar.vue
    │   │   ├── ConnectedUser.vue
    │   │   ├── Users.vue
    │   │   └── Channels.vue
    │   └── messages
    │   │   ├── SingleMessage.vue
    │   │   ├── FileModal.vue
    │   │   ├── Messages.vue
    │   │   └── MessageForm.vue
    ├── main.js
    └── store.js
├── .gitignore
├── .editorconfig
├── .postcssrc.js
├── .babelrc
├── firebase.json
├── README.md
├── index.html
└── package.json


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


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


--------------------------------------------------------------------------------
/slack2.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/brunorafael8/Slack-Clone/HEAD/slack2.gif


--------------------------------------------------------------------------------
/.firebaserc:
--------------------------------------------------------------------------------
1 | {
2 |   "projects": {
3 |     "default": "slack-clone-c9c18"
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/brunorafael8/Slack-Clone/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | dist/
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | 


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


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


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


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", { "modules": false }],
 4 |     "stage-2"
 5 |   ],
 6 |   "plugins": ["transform-runtime"],
 7 |   "comments": false,
 8 |   "env": {
 9 |     "test": {
10 |       "presets": ["env", "stage-2"],
11 |       "plugins": [ "istanbul" ]
12 |     }
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/firebase.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "hosting": {
 3 |     "public": "dist",
 4 |       "redirects": [ {
 5 |       "source" : "/login",
 6 |       "destination" : "/",
 7 |       "type" : 301
 8 |       },
 9 |       {
10 |       "source" : "/register",
11 |       "destination" : "/",
12 |       "type" : 302
13 |     }]
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # **SLACK CLONE **
 3 | 
 4 | ----------
 5 | ![Slack](https://github.com/brunorafael8/Slack-Clone/blob/master/slack2.gif)
 6 | 
 7 | *Vue.js + Firebase project*
 8 | 
 9 | ## Build Setup
10 | ----------
11 | ### install dependencies
12 | >*npm install*
13 | 
14 | ### serve with hot reload at localhost:8080
15 | >*npm run dev*
16 | 
17 | ### build for production with minification
18 | >*npm run build*
19 | 
20 | ### build for production and view the bundle analyzer report
21 | >*npm run build --report*
22 | 


--------------------------------------------------------------------------------
/src/pages/Schat.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="schat__container">
 3 |         <sidebar></sidebar>
 4 |         <messages></messages>
 5 |     </div>
 6 | </template>
 7 | <script>
 8 |     
 9 |     import Sidebar from '../components/sidebar/Sidebar'
10 |     import Messages from '../components/messages/Messages'
11 | 
12 |     export default{
13 |         name: 'schat',
14 |         components: { Sidebar, Messages }
15 |     }
16 | </script>
17 | <style scoped>
18 |     .schat__container{
19 |         height: 100%;
20 |     }
21 | </style>
22 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Slack Clone</title>
 6 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css">
 7 |   </head>
 8 |   <body>
 9 |     <div id="app"></div>
10 |     <!-- built files will be auto injected -->
11 |     <script
12 |     src="https://code.jquery.com/jquery-3.2.1.min.js"
13 |     integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
14 |     crossorigin="anonymous"></script>
15 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.js"></script>
16 |   </body>
17 | </html>
18 | 


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


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |       <router-view></router-view>
 4 | 
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   name: 'app'
11 | }
12 | 
13 | </script>
14 | 
15 | <style lang="scss">
16 |   body{
17 |     background: rgb(14,0,73); /* Old browsers */
18 | background: -moz-linear-gradient(left, rgba(14,0,73,1) 2%, rgba(0,158,195,1) 100%); /* FF3.6-15 */
19 | background: -webkit-linear-gradient(left, rgba(14,0,73,1) 2%,rgba(0,158,195,1) 100%); /* Chrome10-25,Safari5.1-6 */
20 | background: linear-gradient(to right, rgba(14,0,73,1) 2%,rgba(0,158,195,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
21 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e0049', endColorstr='#009ec3',GradientType=1 ); /* IE6-9 */
22 |   }
23 |  #app{
24 |    height: 100%;
25 |  }
26 | 
27 | </style>  
28 | 


--------------------------------------------------------------------------------
/src/components/sidebar/Sidebar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="sidebar"> 
 3 |         <h1 class="ui inverted center aligned header">Slack Clone</h1> 
 4 |         <connected-user></connected-user>
 5 |         <div class="ui divider"></div>
 6 |       
 7 |         <channels></channels>
 8 |         <div class="ui divider"></div>
 9 |         <users></users>
10 |     </div>
11 | </template>
12 | <script>
13 |     import ConnectedUser from './ConnectedUser'
14 |     import Channels from './Channels'
15 |     import Users from './Users'
16 |     export default {
17 |         name: 'sidebar',
18 |         components: { ConnectedUser, Channels, Users }
19 |     }
20 | </script>
21 | <style scoped>
22 |     .sidebar{
23 |         position: fixed;
24 |         display: flex;
25 |         flex-flow: column nowrap;
26 |         width: 300px;
27 |         padding: 10px;
28 |         top: 0;
29 |         left: 0;
30 |         bottom: 0;
31 |         background-color: #4d394b;
32 |         padding-top: 110px;
33 | 
34 |     }
35 | </style>
36 | 


--------------------------------------------------------------------------------
/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'
 7 | import store from './store'
 8 | 
 9 | // Initialize Firebase
10 | let config = {
11 |   apiKey: "AIzaSyBf7sUbfgN3jNwi2a0jXPW1vocrvwGKrik",
12 |   authDomain: "slack-clone-c9c18.firebaseapp.com",
13 |   databaseURL: "https://slack-clone-c9c18.firebaseio.com",
14 |   projectId: "slack-clone-c9c18",
15 |   storageBucket: "slack-clone-c9c18.appspot.com",
16 |   messagingSenderId: "643242151043"
17 | };
18 | firebase.initializeApp(config);
19 | window.firebase = firebase
20 | 
21 | const unsuscribe = firebase.auth().onAuthStateChanged(user => {
22 | 
23 |   store.dispatch('setUser', user)
24 | 
25 |   new Vue({
26 |     el: '#app',
27 |     router,
28 |     template: '<App/>',
29 |     components: { App },
30 |     store
31 |   })
32 | 
33 |   unsuscribe()
34 | 
35 | })
36 | 
37 | Vue.config.productionTip = false
38 | 
39 | /* eslint-disable no-new */
40 | 


--------------------------------------------------------------------------------
/src/store.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'Vuex'
 3 | 
 4 | Vue.use(Vuex)
 5 | 
 6 | const state = {
 7 |     currentUser: null,
 8 |     currentChannel: null,
 9 |     isPrivate: false
10 | }
11 |     
12 | const mutations = {
13 |     SET_USER(state, user){
14 |         state.currentUser = user
15 |     },
16 |     SET_CURRENT_CHANNEL(state, channel){
17 |         state.currentChannel = channel
18 |     },
19 |     SET_PRIVATE(state, isPrivate){
20 |         state.isPrivate = isPrivate
21 |     }
22 | }
23 | 
24 | const actions = {
25 |     setUser({commit}, user){
26 |         commit("SET_USER", user)
27 |     },
28 |     setCurrentChannel({commit}, channel){
29 |         commit("SET_CURRENT_CHANNEL", channel)
30 |     },
31 |     setPrivate({commit}, isPrivate){
32 |         commit("SET_PRIVATE", isPrivate)
33 |     }
34 | }
35 | 
36 | const getters = {
37 |     currentUser: state => state.currentUser,
38 |     currentChannel: state => state.currentChannel,
39 |     isPrivate: state => state.isPrivate
40 | }
41 | 
42 | export default new Vuex.Store({
43 |     state,
44 |     mutations,
45 |     actions,
46 |     getters
47 | })
48 | 


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | // see http://vuejs-templates.github.io/webpack for documentation.
 2 | var path = require('path')
 3 | 
 4 | module.exports = {
 5 |   build: {
 6 |     env: require('./prod.env'),
 7 |     index: path.resolve(__dirname, '../dist/index.html'),
 8 |     assetsRoot: path.resolve(__dirname, '../dist'),
 9 |     assetsSubDirectory: 'static',
10 |     assetsPublicPath: '/',
11 |     productionSourceMap: true,
12 |     // Gzip off by default as many popular static hosts such as
13 |     // Surge or Netlify already gzip all static assets for you.
14 |     // Before setting to `true`, make sure to:
15 |     // npm install --save-dev compression-webpack-plugin
16 |     productionGzip: false,
17 |     productionGzipExtensions: ['js', 'css'],
18 |     // Run the build command with an extra argument to
19 |     // View the bundle analyzer report after build finishes:
20 |     // `npm run build --report`
21 |     // Set to `true` or `false` to always turn it on or off
22 |     bundleAnalyzerReport: process.env.npm_config_report
23 |   },
24 |   dev: {
25 |     env: require('./dev.env'),
26 |     port: 8080,
27 |     autoOpenBrowser: true,
28 |     assetsSubDirectory: 'static',
29 |     assetsPublicPath: '/',
30 |     proxyTable: {},
31 |     // CSS Sourcemaps off by default because relative paths are "buggy"
32 |     // with this option, according to the CSS-Loader README
33 |     // (https://github.com/webpack/css-loader#sourcemaps)
34 |     // In our experience, they generally work as expected,
35 |     // just be aware of this issue when enabling this option.
36 |     cssSourceMap: false
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/src/assets/Slack_icons.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 270 270" style="enable-background:new 0 0 270 270;" xml:space="preserve">
 5 | <style type="text/css">
 6 | 	.st0{fill:#2D333A;}
 7 | </style>
 8 | <g id="Layer_1_1_">
 9 | </g>
10 | <g id="Layer_3">
11 | </g>
12 | <g id="Layer_4">
13 | </g>
14 | <g id="Layer_2">
15 | 	<g>
16 | 		
17 | 			<rect x="128.5" y="127.3" transform="matrix(0.9482 -0.3176 0.3176 0.9482 -36.0197 50.6366)" class="st0" width="17.6" height="17"/>
18 | 		<g>
19 | 			
20 | 				<rect x="128.5" y="127.3" transform="matrix(0.9482 -0.3176 0.3176 0.9482 -36.0197 50.6366)" class="st0" width="17.6" height="17"/>
21 | 			<path class="st0" d="M194.6,118.5c-12.9-43-31.5-53-74.5-40.1s-53,31.5-40.1,74.5s31.5,53,74.5,40.1S207.5,161.5,194.6,118.5z
22 | 				 M172.9,146.4l-8.1,2.7l2.8,8.4c1.1,3.4-0.7,7.1-4.1,8.2c-0.7,0.2-1.5,0.4-2.2,0.3c-2.6-0.1-5.1-1.8-6-4.4l-2.8-8.4l-16.7,5.6
23 | 				l2.8,8.4c1.1,3.4-0.7,7.1-4.1,8.2c-0.7,0.2-1.5,0.4-2.2,0.3c-2.6-0.1-5.1-1.8-6-4.4l-2.8-8.4l-8.1,2.7c-0.7,0.2-1.5,0.4-2.2,0.3
24 | 				c-2.6-0.1-5.1-1.8-6-4.4c-1.1-3.4,0.7-7.1,4.1-8.2l8.1-2.7l-5.4-16.1l-8.1,2.7c-0.7,0.2-1.5,0.4-2.2,0.3c-2.6-0.1-5.1-1.8-6-4.4
25 | 				c-1.1-3.4,0.7-7.1,4.1-8.2l8.1-2.7l-2.8-8.4c-1.1-3.4,0.7-7.1,4.1-8.2s7.1,0.7,8.2,4.1l2.8,8.4l16.7-5.6l-2.8-8.4
26 | 				c-1.1-3.4,0.7-7.1,4.1-8.2c3.4-1.1,7.1,0.7,8.2,4.1l2.8,8.4l8.1-2.7c3.4-1.1,7.1,0.7,8.2,4.1c1.1,3.4-0.7,7.1-4.1,8.2l-8.1,2.7
27 | 				l5.4,16.1l8.1-2.7c3.4-1.1,7.1,0.7,8.2,4.1C178.1,141.6,176.3,145.3,172.9,146.4z"/>
28 | 		</g>
29 | 	</g>
30 | </g>
31 | </svg>
32 | 


--------------------------------------------------------------------------------
/src/components/messages/SingleMessage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="comment comment__container">
 3 |         <a class="avatar">
 4 |             <img :src="message.user.avatar">
 5 |         </a>
 6 |         <div class="content" :class="{'comment__self': selfMessage(message.user)}">
 7 |             <a class="author">{{ message.user.name }}</a>
 8 |             <div class="metadata">
 9 |                 <span class="date comment__date"> {{ message.timestamp | fromNow }}</span>
10 |             </div>
11 |             <div class="text" v-if="!isFile(message)">{{ message.content }}</div>
12 | 
13 |             <img class="ui image comment__image" :src="message.image" alt="image" v-else>
14 | 
15 |         </div>
16 |     </div>
17 | </template>
18 | 
19 | <script>
20 |     import { mapGetters } from 'Vuex'
21 |     import moment from 'moment'
22 |     export default {
23 |         name: 'single-message',     
24 |         props: ['message'],
25 |         computed: {
26 |             ...mapGetters(['currentUser'])
27 |         },
28 |         methods: {
29 |             selfMessage(user) {
30 |                 return user.id === this.currentUser.uid
31 |             },
32 |             isFile(message){
33 |                 return message.content == null && message.image != null
34 |             }
35 |         },
36 |         filters: {
37 |             fromNow (value){
38 |                 return moment(value).fromNow()
39 |             }
40 |         }  
41 |       
42 |     }
43 | </script>
44 | 
45 | <style scoped>
46 |  .comment__container pre{
47 |         font-size: 0.9em;
48 |         background: #232323;
49 |         box-shadow: 3px 6px 9px 0px #a2a2a2;
50 |     }   
51 |     .comment__self{
52 |         border-left: 10px solid orange;
53 |         padding-left: 8px;
54 |     }
55 |     .comment__image{
56 |         min-height: 100px;
57 |         margin-top: 16px;
58 |     }
59 |     .comment__date{
60 |         color: #767676;
61 |     }    
62 | </style>
63 | 


--------------------------------------------------------------------------------
/src/components/sidebar/ConnectedUser.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 
 3 |     <div class="connectedUser__container">
 4 |         <div class="ui items">
 5 |             <div class="item">
 6 |                 <div class="ui mini image">
 7 |                     <img :src="currentUser.photoURL" alt="avatar">
 8 |                 </div>
 9 |                 <div class="middle aligned content">
10 |                     <div class="ui container">
11 |                         <div class="ui inverted header">
12 |                             {{ currentUser.displayName }}
13 |                         </div>
14 |                     </div>
15 |                 </div>
16 |                 <div class="extra">
17 |                     <button class="ui circular icon right floated button" @click="logout">
18 |                         <i class="icon sign out"></i>
19 |                     </button>
20 |                 </div>
21 |             </div>
22 |         </div>
23 |     </div>
24 | 
25 | </template>
26 | 
27 | <script>
28 |     import { mapGetters } from 'Vuex'
29 |     export default {
30 |         name: 'connected-user',
31 |          data () {
32 |             return {
33 |                  presenceRef: firebase.database().ref('presence')
34 |              }
35 |        },
36 |         computed: {
37 |             ...mapGetters(['currentUser'])
38 |         },
39 |         methods: {
40 |             logout () {
41 |                 this.presenceRef.child(this.currentUser.uid).remove()
42 |                 firebase.auth().signOut()
43 |                 this.$store.dispatch("setUser", null)
44 |                 this.$router.push('/login')
45 | 
46 |             }
47 |         }
48 |     }
49 | </script>
50 | 
51 | <style scoped>
52 |     .connectedUser__container{       
53 |         position: absolute;
54 |         background-color: #4d394b;
55 |         top: 0;
56 |         right: 0;
57 |         bottom: 0;
58 |         left: 0;
59 |         height: 90px;
60 |         padding: 8px;
61 |     }
62 | </style>
63 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "slack_clone",
 3 |   "version": "1.0.0",
 4 |   "description": "A Vue.js project",
 5 |   "author": "Bruno Rafael <bruninho_lito@hotmail.com>",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "node build/dev-server.js",
 9 |     "start": "node build/dev-server.js",
10 |     "build": "node build/build.js"
11 |   },
12 |   "dependencies": {
13 |     "firebase": "^3.9.0",
14 |     "md5": "^2.2.1",
15 |     "mime-types": "^2.1.15",
16 |     "moment": "^2.18.1",
17 |     "uuid": "^3.0.1",
18 |     "vue": "^2.2.6",
19 |     "vue-router": "^2.3.1",
20 |     "vuex": "^2.3.1"
21 |   },
22 |   "devDependencies": {
23 |     "autoprefixer": "^6.7.2",
24 |     "babel-core": "^6.22.1",
25 |     "babel-loader": "^6.2.10",
26 |     "babel-plugin-transform-runtime": "^6.22.0",
27 |     "babel-preset-env": "^1.3.2",
28 |     "babel-preset-stage-2": "^6.22.0",
29 |     "babel-register": "^6.22.0",
30 |     "chalk": "^1.1.3",
31 |     "connect-history-api-fallback": "^1.3.0",
32 |     "copy-webpack-plugin": "^4.0.1",
33 |     "css-loader": "^0.28.0",
34 |     "eventsource-polyfill": "^0.9.6",
35 |     "express": "^4.14.1",
36 |     "extract-text-webpack-plugin": "^2.0.0",
37 |     "file-loader": "^0.11.1",
38 |     "friendly-errors-webpack-plugin": "^1.1.3",
39 |     "html-webpack-plugin": "^2.28.0",
40 |     "http-proxy-middleware": "^0.17.3",
41 |     "image-webpack-loader": "^3.3.1",
42 |     "node-sass": "^4.5.3",
43 |     "opn": "^4.0.2",
44 |     "optimize-css-assets-webpack-plugin": "^1.3.0",
45 |     "ora": "^1.2.0",
46 |     "rimraf": "^2.6.0",
47 |     "sass-loader": "^6.0.5",
48 |     "semver": "^5.3.0",
49 |     "shelljs": "^0.7.6",
50 |     "url-loader": "^0.5.8",
51 |     "vue-loader": "^11.3.4",
52 |     "vue-style-loader": "^2.0.5",
53 |     "vue-template-compiler": "^2.2.6",
54 |     "webpack": "^2.6.1",
55 |     "webpack-bundle-analyzer": "^2.2.1",
56 |     "webpack-dev-middleware": "^1.10.0",
57 |     "webpack-hot-middleware": "^2.18.0",
58 |     "webpack-merge": "^4.1.0"
59 |   },
60 |   "engines": {
61 |     "node": ">= 4.0.0",
62 |     "npm": ">= 3.0.0"
63 |   },
64 |   "browserslist": [
65 |     "> 1%",
66 |     "last 2 versions",
67 |     "not ie <= 8"
68 |   ]
69 | }
70 | 


--------------------------------------------------------------------------------
/src/components/messages/FileModal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 
 3 |     <div class="ui modal" id="fileModal">
 4 |         <i class="close icon"></i>
 5 |         <div class="header">
 6 |             Send a fichier
 7 |         </div>
 8 |         <div class="content">
 9 |             <div class="description">
10 |                 <div class="ui header">Choice a fichier <em>( jpg, png, 1 mb max )</em></div>
11 |                 <form class="ui form">
12 |                     <div class="field">
13 |                         <input type="file" name="file" id="file" @change="addFile">
14 |                     </div>
15 |                 </form>
16 | 
17 |             </div>
18 |         </div>
19 |         <div class="actions">
20 |             <div class="ui black deny button">
21 |                 Cancel
22 |             </div>
23 |             <div class="ui right green labeled icon button" @click.prevent="sendFile">
24 |                 Send
25 |                 <i class="checkmark icon"></i>
26 |             </div>
27 |         </div>
28 |     </div>
29 | 
30 | </template>
31 | 
32 | <script>
33 |     import mime from 'mime-types'
34 |     export default {
35 |         name: 'file-modal',
36 |         data () {
37 |             return {
38 |                 file: null,
39 |                 authorized: ['image/jpeg', 'image/png']
40 |             }
41 |         },
42 |         methods : {
43 |             addFile(e){
44 |                 let files = e.target.files
45 |                 console.log(files)
46 |                 if(files.length === 1){
47 |                     this.file = files[0]
48 |                 }
49 |             },
50 |             sendFile(){
51 |                 if(this.file !== null){
52 |                    
53 |                     if(this.isValid(this.file.name)){
54 |                         let metadata = { contentType: mime.lookup(this.file.name)}
55 |                         this.$parent.uploadFile(this.file, metadata)
56 |                         $("#fileModal").modal('hide')
57 |                     }
58 |                 }
59 |             },
60 |             isValid(filename){
61 |                 let index = this.authorized.indexOf(mime.lookup(filename))
62 |                 return index !== -1
63 |             },
64 |             resetForm(){
65 |                 console.log("reset form")
66 |                 $('.form').trigger('reset')
67 |                 this.file = null
68 |             }
69 |         }
70 |     }
71 | </script>
72 | 


--------------------------------------------------------------------------------
/src/pages/Login.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |         <div>
  3 |         <div class="login__container ui middle aligned center aligned grid">
  4 |             <div class="column">
  5 |                 <h2 class="ui header">
  6 |                 <img src="../assets/Slack_icons.svg" class="logo">
  7 |                 <div class="content">
  8 |                     Slack Clone
  9 |                 </div>
 10 |                 </h2>
 11 |                 <form class="ui large form" :class="{ 'error' : hasErrors}">
 12 |                 <div class="ui stacked segment">
 13 | 
 14 |                     <div class="field">
 15 |                     <div class="ui left icon input">
 16 |                         <i class="user icon"></i>
 17 |                         <input type="email" name="email" placeholder="Email" v-model.trim="email" required>
 18 |                     </div>
 19 |                     </div>
 20 | 
 21 |                     <div class="field">
 22 |                     <div class="ui left icon input">
 23 |                         <i class="lock icon"></i>
 24 |                         <input type="password" name="password" placeholder="Password" v-model.trim="password" required>
 25 |                     </div>
 26 |                     </div>
 27 | 
 28 |                     <button class="ui fluid large black submit button" @submit.prevent="login" @click.prevent="login" :class="{ 'loading': isLoading }" >Login</button>
 29 |                 </div>
 30 | 
 31 |                 <div class="ui error message" v-if="hasErrors">
 32 |                     <p v-for="error in errors">{{ error }}</p>
 33 |                 </div>
 34 | 
 35 |                 </form>
 36 | 
 37 |                 <div class="ui message">
 38 |                  New to Slack? <router-link to="/register">Register</router-link>
 39 |                 </div>
 40 |             </div>
 41 |         </div>  
 42 |     </div>
 43 | </template>
 44 | <script>
 45 |     
 46 |     export default{
 47 |         name: 'login',
 48 |         data() {
 49 |             return {
 50 |                 email: '',
 51 |                 password: '',
 52 |                 errors: [],
 53 |                 isLoading: false
 54 |             }
 55 |         },
 56 |         computed: {
 57 |             hasErrors() {
 58 |                 return this.errors.length > 0
 59 |             }
 60 |         },
 61 |         methods: {
 62 |             login() {
 63 |                 console.log("login");
 64 |                 if(this.isFormValid()){
 65 |                     this.isLoading = true
 66 | 
 67 |                     firebase.auth().signInWithEmailAndPassword(this.email, this.password).then(user => {
 68 | 
 69 |                         this.$store.dispatch('setUser', user)
 70 |                         this.$router.push('/')
 71 | 
 72 |                         }).catch(error => {
 73 |                         this.errors.push(error.message)
 74 |                         this.isLoading = false
 75 |                     })
 76 |                 }
 77 |             },
 78 |             isFormValid(){
 79 |                 if(this.email.length > 0 && this.password.length > 0){
 80 |                     return true;
 81 |                 }
 82 |                 return false
 83 |             }
 84 |         }
 85 |     }
 86 | </script>
 87 | <style scoped>
 88 |     .login__container{
 89 |         margin-top: 40px;
 90 |     }
 91 |     .column{
 92 |         max-width: 450px;
 93 |     }
 94 |     .ui.header>.image:not(.icon), .ui.header>img{
 95 |         height: 120px;
 96 |         width: 120px;
 97 |         margin: 0;
 98 |         margin-right: -35px;
 99 |     }
100 |     .ui.header{
101 |         display: flex;
102 |         justify-content: center;
103 |         align-items: center;
104 |         margin-left: -40px;
105 |         color: #fff;
106 |     }
107 | 
108 |     
109 | </style>
110 | 


--------------------------------------------------------------------------------
/src/components/messages/Messages.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 
  3 |     <div class="messages__container">
  4 |         <div class="messages__content">
  5 |             <h2 class="ui inverted center aligned header">{{ channelName }}</h2>
  6 |             <div class="ui segment">
  7 |                 <div class="ui comments">
  8 |                     <!-- Composant single message-->
  9 |                     <transition-group tag="div" name="list">
 10 |                         <single-message :message="message" v-for="message in messages" :key="message.id"></single-message>
 11 |                     </transition-group>
 12 |                 </div>
 13 |             </div>
 14 | 
 15 |         </div>
 16 | 
 17 |         <!-- Formulaire d'envoi-->
 18 |         <message-form></message-form>
 19 | 
 20 |     </div>
 21 | 
 22 | </template>
 23 | 
 24 | <script>
 25 |     import MessageForm from './MessageForm'
 26 |     import SingleMessage from './SingleMessage'
 27 |     import { mapGetters } from 'Vuex'
 28 |     export default {
 29 |         name: 'messages',
 30 |         components: { MessageForm, SingleMessage },
 31 |         data () {
 32 |             return {
 33 |                 messagesRef: firebase.database().ref('messages'),
 34 |                 privateMessagesRef: firebase.database().ref('privateMessages'),
 35 |                 messages: [],
 36 |                 channel: null,
 37 |                 listeners: []
 38 |             }
 39 |         },
 40 |         computed: {
 41 |             ...mapGetters(['currentChannel', 'currentUser', 'isPrivate']),
 42 |             channelName(){
 43 |                 if(this.channel !== null){
 44 |                     return this.isPrivate ? '@ ' + this.channel.name : '# ' + this.channel.name 
 45 |                 }
 46 |             }
 47 |         },
 48 |         watch : {
 49 |             currentChannel () {                
 50 |                 this.detachListeners()
 51 |                 this.addListeners()
 52 |                 this.channel = this.currentChannel
 53 |             }
 54 |         },
 55 |         methods: {
 56 |             addListeners () {
 57 |                 let ref = this.getMessageRef()
 58 |                 ref.child(this.currentChannel.id).on('child_added', snap => {    
 59 |                     let message = snap.val()
 60 |                     message['id'] = snap.key               
 61 |                     this.messages.push(message)
 62 |                     this.$nextTick( () => {
 63 |                         $('html, body').scrollTop($(document).height())
 64 |                     })
 65 |                     
 66 |                     
 67 |                 })
 68 |                 this.addToListeners(this.currentChannel.id, ref, 'child_added')
 69 |             },
 70 |             addToListeners(id, ref, event){
 71 |                 let index = this.listeners.findIndex( el => {
 72 |                     return el.id === id && el.ref === ref && el.event === event
 73 |                 })
 74 |                 if(index === -1){
 75 |                     this.listeners.push({id: id, ref: ref, event: event})
 76 |                 }
 77 |             },
 78 |             detachListeners () {
 79 |                 this.listeners.forEach( listener => {
 80 |                     listener.ref.child(listener.id).off(listener.event)
 81 |                 })
 82 |                 this.listeners = []
 83 |                 this.messages = []
 84 |               
 85 |             },
 86 |             getMessageRef () {
 87 |                 if(this.isPrivate){
 88 |                     return this.privateMessagesRef
 89 |                 }else{
 90 |                     return this.messagesRef
 91 |                 }
 92 |             }
 93 |         },
 94 |         beforeDestroy () {
 95 |             this.detachListeners()
 96 |         }
 97 |     }
 98 | </script>
 99 | 
100 | <style scoped>
101 |     .messages__container{
102 |         position: relative;        
103 |         background-color: #2a2a2e;        
104 |         padding: 10px 30px 210px 30px; 
105 |         margin-left: 300px;
106 |         min-height: 100%;
107 |     }
108 |     .messages__container .comments{
109 |         font-size: 1.2em;
110 |     }  
111 |     .list-enter-active{
112 |         transition: all 0.3s
113 |     }  
114 |     .list-enter, .list-leave-to{
115 |         opacity: 0;
116 |         transform: translateX(30px);
117 |     }
118 | </style>
119 | 


--------------------------------------------------------------------------------
/src/components/sidebar/Users.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 
  3 |     <div class="users__container">
  4 |         <h2 class="ui inverted center aligned header">Users</h2>
  5 |         <div class="ui feed" v-for="user in users" :key="user.uid" :class="{'is_active' : isActive(user)}" @click.prevent="changeChannel(user)">
  6 |             <div class="event">
  7 |                 <div class="label">
  8 |                     <img :src="user.avatar" alt="avatar">
  9 |                 </div>
 10 |                 <div class="content">
 11 |                     <span class="ui empty circular label connection__label" :class="{'olive': isOnline(user), 'red': !isOnline(user)}"></span> {{ user.name }}
 12 |                 </div>
 13 |             </div>
 14 |         </div>
 15 |     </div>
 16 | 
 17 | </template>
 18 | 
 19 | <script>
 20 |     import { mapGetters } from 'Vuex'
 21 |     export default {
 22 |         name: 'users',
 23 |         data() {
 24 |             return {
 25 |                 users: [],
 26 |                 usersRef: firebase.database().ref('users'),
 27 |                 connectedRef: firebase.database().ref('.info/connected'),
 28 |                 presenceRef: firebase.database().ref('presence')
 29 |             }
 30 |         },
 31 |         computed: {
 32 |             ...mapGetters(['currentUser', 'currentChannel'])
 33 |         },
 34 |         mounted() {
 35 |             this.addListeners()
 36 |         },
 37 |         methods: {
 38 |             addListeners() {
 39 |                 this.usersRef.on('child_added', snap => {
 40 |                     if (this.currentUser.uid !== snap.key) {
 41 |                         let user = snap.val()
 42 |                         user['uid'] = snap.key
 43 |                         user['status'] = 'offline'
 44 |                         this.users.push(user)
 45 |                     }
 46 |                 })
 47 |                 //Check du status utilisateur
 48 |                 this.presenceRef.on('child_added', snap => {
 49 |                     if(this.currentUser.uid !== snap.key){
 50 |                         this.addStatusToUser(snap.key)
 51 |                     }
 52 |                 })
 53 |                 this.presenceRef.on('child_removed', snap => {
 54 |                      if(this.currentUser.uid !== snap.key){
 55 |                         this.addStatusToUser(snap.key, false)
 56 |                     }
 57 |                 })
 58 |                 this.connectedRef.on('value', snap => {
 59 |                     if(snap.val() === true){
 60 |                         let ref  = this.presenceRef.child(this.currentUser.uid)
 61 |                         ref.set(true)
 62 |                         ref.onDisconnect().remove( err => {
 63 |                             if(err !== null) console.log(err)
 64 |                         })
 65 |                     }
 66 |                 })
 67 |             },
 68 |             addStatusToUser(userId, connected = true){
 69 |                 let index = this.users.findIndex( user => user.uid === userId)
 70 |                 if(index !== -1){
 71 |                     connected === true ? this.users[index].status = 'online' : this.users[index].status = 'offline'
 72 |                 }
 73 |             },            
 74 |             isOnline(user){
 75 |                 return user.status == 'online'
 76 |             },
 77 |             changeChannel(user){
 78 |                 let channelId = this.getChannelId(user.uid)
 79 |                 let channel = { id: channelId, name: user.name}
 80 |                 this.$store.dispatch('setPrivate', true)
 81 |                 this.$store.dispatch('setCurrentChannel', channel)
 82 |             },
 83 |             isActive(user){
 84 |                 let channelId = this.getChannelId(user.uid)
 85 |                 return this.currentChannel.id === channelId
 86 |             },
 87 |             getChannelId(userId){
 88 |                 return userId < this.currentUser.uid ? userId+'/'+this.currentUser.uid : this.currentUser.uid + '/'+userId
 89 |             },
 90 |             detachListeners() {
 91 |                 this.usersRef.off()
 92 |                 this.presenceRef.off()
 93 |                 this.connectedRef.off()
 94 |             }
 95 |         },
 96 |         beforeDestroy() {
 97 |             this.detachListeners()
 98 |         }
 99 |     }
100 | </script>
101 | 
102 | <style scoped>
103 | .users__container{
104 |         overflow-y: auto;
105 |     }
106 |     .users__container .feed{
107 |         cursor: pointer;
108 |         padding: 4px;
109 |         border-radius: 4px;
110 |         color: #ab9ba9
111 |     }
112 |     .users__container .feed:hover{
113 |         background: #3e313c;
114 |     }
115 |     .users__container .feed.is_active{
116 |         color: #fff;
117 |         background: rgba(0,158,195,1);
118 |     }
119 |     .connection__label{
120 |         float:left!important;
121 |         margin-right: 12px!important;
122 |         margin-top: 5px;
123 |     }
124 | </style>
125 | 


--------------------------------------------------------------------------------
/src/components/sidebar/Channels.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |  <div class="channels__container">
  3 |         <h2 class="ui inverted center aligned header">Channels <i class="add square icon add_channel" @click="openChannelModal"></i></h2>
  4 |         <div class="ui raised channels__list">
  5 |             <ul>
  6 |                 <li class="channels__item" 
  7 |                     v-for="channel in channels" 
  8 |                     :key="channel.id" 
  9 |                     :class="{'is_active': setChannelActive(channel)}"
 10 |                     @click="changeChannel(channel)">
 11 |                     # {{ channel.name }}
 12 |                </li>
 13 |             </ul>
 14 |         </div>
 15 | 
 16 | 
 17 |         <!-- Modal Pour ajouter un Channel -->
 18 | 
 19 |         <div class="ui basic modal" id="channelModal">
 20 |             <div class="ui icon header">
 21 |                 Add Channel
 22 |             </div>
 23 | 
 24 |             <div class="content">
 25 |                 <div class="ui inverted form" :class="{'error': hasErrors }">
 26 |                     <div class="field">
 27 |                         <label for="new_channel">Name for Channel</label>
 28 |                         <input type="text" name="new_channel" v-model="new_channel" id="new_channel">
 29 |                     </div>
 30 | 
 31 |                     <div class="ui error message" v-if="hasErrors">
 32 |                         <p v-for="error in errors">{{ error }}</p>
 33 |                     </div>
 34 |                 </div>
 35 |             </div>
 36 | 
 37 |             <div class="actions">
 38 |                 <div class="ui red basic cancel inverted button">
 39 |                     <i class="remove icon"></i>Not add
 40 |                 </div>
 41 |                 <div class="ui green inverted button" @click="addChannel">
 42 |                     <i class="checkmark icon"></i>Add
 43 |                 </div>
 44 |             </div>
 45 | 
 46 | 
 47 |         </div>
 48 | 
 49 |     </div>
 50 | </template>
 51 | <script>
 52 |      import {mapGetters} from 'Vuex'
 53 |        export default {
 54 |         name: 'channels', 
 55 |         data () {
 56 |             return {
 57 |                 channels: [],
 58 |                 new_channel: '',
 59 |                 channelsRef: firebase.database().ref('channels'),
 60 |                 errors: [],
 61 |                 firstLoad: true     
 62 |             }
 63 |         },
 64 |         computed : {
 65 |             ...mapGetters(['currentChannel']),
 66 |             hasErrors () {
 67 |                 return this.errors.length > 0
 68 |             }
 69 |         },
 70 |         mounted () {
 71 |             this.addListeners()
 72 |         },
 73 |         methods: {
 74 |             addListeners () {
 75 |                 this.channelsRef.on('child_added', snap => {
 76 |                     this.channels.push(snap.val())
 77 |                     
 78 |                     if(this.firstLoad && this.channels.length > 0){
 79 |                         this.$store.dispatch("setCurrentChannel", this.channels[0])
 80 |                     }
 81 |                     this.firsLoad = false
 82 |                 })
 83 |             },
 84 |             openChannelModal () {
 85 |                 $("#channelModal").modal('show')
 86 |             },
 87 |             addChannel () {
 88 |                 this.errors = []
 89 |                 let key = this.channelsRef.push().key
 90 |                 let newChannel = { id: key, name: this.new_channel }
 91 |                 this.channelsRef.child(key).update(newChannel).then( () => {
 92 |                     this.new_channel = ''
 93 |                     $("#channelModal").modal('hide')
 94 |                 }).catch( error => {
 95 |                     this.errors.push(error.message)
 96 |                 })
 97 |             },
 98 |             changeChannel(channel){
 99 |                 this.$store.dispatch('setPrivate', false)
100 |                 this.$store.dispatch('setCurrentChannel', channel)
101 |             },
102 |             detachListeners () {
103 |                 this.channelsRef.off()
104 |             },
105 |             setChannelActive(channel){
106 |                 return channel.id === this.currentChannel.id
107 |             }
108 |         },
109 |         beforeDestroy () {
110 |             this.detachListeners()
111 |         }
112 |     }
113 | </script>
114 | <style scoped>
115 |     .channels__list {
116 |         min-height: 100px;
117 |         max-height: 300px!important;
118 |         overflow-y: auto!important;
119 |     }
120 |     .channels__container ul{
121 |         margin: 0;
122 |         padding: 0;
123 |         background-color: #4d394b;
124 |     }
125 |     .raised{
126 |       background-color: #4d394b;  
127 |     }
128 |     .channels__item{
129 |         height: 30px;
130 |         margin: 8px;
131 |         list-style: none;
132 |         background-color: #4d394b;
133 |         cursor: pointer;
134 |         line-height: 30px;       
135 |         border-radius: 2px;
136 |         padding-left: 12px;
137 |         font-weight: bold;
138 |         font-size: 1.1em;
139 |         color: #ab9ba9;
140 |     }
141 |     .channel__count{
142 |         float:right;
143 |     }
144 |     .is_active{
145 |         color: #fff;
146 |         background-color: rgba(0,158,195,1);
147 |     }
148 |     .channels__item:hover{
149 |         background-color: #3e313c;
150 |     }
151 |     .add_channel{
152 |         cursor: pointer;
153 |         color: #2ab27b;
154 |     }
155 |     .add_channel:hover{
156 |         color: #689F38;
157 |     } 
158 | </style>
159 | 


--------------------------------------------------------------------------------
/src/pages/Register.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <div class="login__container ui middle aligned center aligned grid">
  4 |             <div class="column">
  5 |                 <h2 class="ui header">
  6 |                 <img src="../assets/Slack_icons.svg" class="logo">
  7 |                 <div class="content">
  8 |                     Slack Clone
  9 |                 </div>
 10 |                 </h2>
 11 |                 <form class="ui large form" :class="{ 'error' : hasErrors}">
 12 |                 <div class="ui stacked segment">
 13 | 
 14 |                     <div class="field">
 15 |                     <div class="ui left icon input">
 16 |                         <i class="user icon"></i>
 17 |                         <input type="text" name="name" placeholder="User" v-model.trim="name" required>
 18 |                     </div>
 19 |                     </div>
 20 | 
 21 |                     <div class="field">
 22 |                     <div class="ui left icon input">
 23 |                         <i class="user icon"></i>
 24 |                         <input type="email" name="email" placeholder="Email" v-model.trim="email" required>
 25 |                     </div>
 26 |                     </div>
 27 | 
 28 |                     <div class="field">
 29 |                     <div class="ui left icon input">
 30 |                         <i class="lock icon"></i>
 31 |                         <input type="password" name="password" placeholder="Password" v-model.trim="password" required>
 32 |                     </div>
 33 |                     </div>
 34 |                     <div class="field">
 35 |                     <div class="ui left icon input">
 36 |                         <i class="lock icon"></i>
 37 |                         <input type="password" name="password_confirmation" placeholder="Password Repeat" v-model.trim="password_confirmation" required>
 38 |                     </div>
 39 |                     </div>
 40 | 
 41 |                     <button class="ui fluid large black submit button" @submit.prevent="register" @click.prevent="register" :class="{ 'loading': isLoading }" >Sign In</button>
 42 |                 </div>
 43 | 
 44 |                 <div class="ui error message" v-if="hasErrors">
 45 |                     <p v-for="error in errors">{{ error }}</p>
 46 |                 </div>
 47 | 
 48 |                 </form>
 49 | 
 50 |                 <div class="ui message">
 51 |                  You Already Enrolled? <router-link to="/login">Login</router-link>
 52 |                 </div>
 53 |             </div>
 54 |         </div>  
 55 |     </div>
 56 | </template>
 57 | <script>
 58 | 
 59 |     import md5 from 'md5'
 60 | 
 61 |     export default{
 62 | 
 63 |         name: 'register',
 64 |         data() {
 65 |             return {
 66 |                 name: '',
 67 |                 email: '',
 68 |                 password: '',
 69 |                 password_confirmation: '',
 70 |                 errors: [],
 71 |                 usersRef: firebase.database().ref('users'),
 72 |                 isLoading: false         
 73 |              }
 74 |         },
 75 |         computed: {
 76 |             hasErrors() {
 77 |                 return this.errors.length > 0
 78 |             }
 79 |         },
 80 |         methods: {
 81 |             register() {
 82 |                 this.errors = [];
 83 | 
 84 |                 if(this.isFormValid()){
 85 |                     this.isLoading = true
 86 |                     firebase.auth().createUserWithEmailAndPassword(this.email, this.password)
 87 |                     .then( user => { 
 88 |                     
 89 |                     user.updateProfile({
 90 |                         displayName: this.name,
 91 |                         photoURL: "http://www.gravatar.com/avatar/"+md5(user.email)+"?d=identicon"
 92 |                     }).then ( () => {
 93 | 
 94 |                         this.saveUsertoUsersRef(user).then( () => {
 95 |                             this.$store.dispatch("setUser", user)
 96 |                             this.$router.push('/')
 97 |                         })
 98 | 
 99 |                     }, error => {
100 |                         
101 |                         this.errors.push(error.message)
102 |                         this.isLoading = false
103 |                     })
104 | 
105 |                     }).catch( error => {
106 |                         console.log(error)
107 |                         this.errors.push(error.message)
108 |                         this.isLoading = false
109 |                     });
110 |                 }
111 |    
112 |             },
113 |             saveUsertoUsersRef(user){
114 |                 return this.usersRef.child(user.uid).set({
115 |                     name: user.displayName,
116 |                     avatar: user.photoURL
117 |                 })
118 |             },
119 |             isEmpty () {
120 |                 if(this.name.length == 0 || this.email.length == 0 || this.password.length == 0 || this.password_confirmation.length == 0 ){
121 |                     return true;
122 |                 }
123 |                 return false;
124 |             },
125 |             passwordValid() {
126 |                 if(this.password.length < 6|| this.password_confirmation.length < 6){
127 |                     return false;
128 |                 }
129 |                 return true;
130 |             },
131 |             passwordValid2(){
132 |                 if( this.password != this.password_confirmation){
133 |                     return false;
134 |                 }
135 |                 return true;
136 |             },
137 |             isFormValid(){
138 |                 if(this.isEmpty()){
139 |                     this.errors.push('Fill out the form!')
140 |                     return false;
141 |                 }
142 |                 if(!this.passwordValid()){
143 |                     this.errors.push("Password must contain at least six characters!")
144 |                     return false
145 |                 }
146 |                 if(!this.passwordValid2()){
147 |                     this.errors.push("Please confirm your password!")
148 |                     return false
149 |                 }
150 |                 return true;
151 |             }
152 |         }
153 |     }
154 | </script>
155 | <style scoped>
156 |     .login__container{
157 |         margin-top: 40px;
158 | 
159 |     }
160 |     .column{
161 |         max-width: 450px;
162 |     }
163 |     .ui.header>.image:not(.icon), .ui.header>img{
164 |         height: 120px;
165 |         width: 120px;
166 |         margin: 0;
167 |         margin-right: -35px;
168 |     }
169 |     .ui.header{
170 |         display: flex;
171 |         justify-content: center;
172 |         align-items: center;
173 |         margin-left: -40px;
174 |         color: #fff;
175 |     }
176 | </style>
177 | 


--------------------------------------------------------------------------------
/src/components/messages/MessageForm.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     
  3 |     <div class="messages__form">
  4 |         <div class="ui inverted form">
  5 |             <form action="" id="form">
  6 |                 <div class="two fields">
  7 | 
  8 |                     <div class="field">
  9 |                         <textarea name="message" @keydown.ctrl.enter.prevent="submit" id="message" v-model.trim="message" rows="3" placeholder="Message"></textarea>
 10 |                     </div>
 11 | 
 12 |                     <div class="field">
 13 |                         <button class="ui green button"  @submit.prevent="sendMessage" @click.prevent="sendMessage">Send</button>
 14 |                         <button class="ui labeled icon button" @click.prevent="openFileModal"><i class="cloud upload icon"></i>Fichier</button>
 15 |                     </div>
 16 | 
 17 |                 </div>
 18 |             </form>
 19 |         </div>
 20 | 
 21 |         <!-- Progress Bar Upload File -->
 22 |         <div class="ui small orange inverted progress" data-total="100" id="uploadedFile">
 23 | 
 24 |             <div class="bar">
 25 |                 <div class="progress"></div>
 26 |             </div>
 27 |             <div class="label">{{ uploadLabel }}</div>
 28 | 
 29 |         </div>
 30 | 
 31 |         <!-- File modal -->
 32 |         <file-modal ref="file_modal"></file-modal>
 33 |     </div>
 34 |     
 35 | </template>
 36 | 
 37 | <script>
 38 |     import { mapGetters } from 'Vuex'
 39 |     import FileModal from './FileModal'
 40 |     import uuidV4 from 'uuid/V4'
 41 |     export default {
 42 |         name: 'message-form',
 43 |         components: { FileModal },
 44 |         data () {
 45 |             return {
 46 |                 message: '',
 47 |                 errors: [],
 48 |                 storageRef: firebase.storage().ref(),
 49 |                 uploadTask: null,
 50 |                 uploadState: null,
 51 |             }
 52 |         },
 53 |         computed : {
 54 |             ...mapGetters(['currentChannel', 'currentUser']),
 55 |             uploadLabel () {
 56 |                 switch(this.uploadState){
 57 |                     case 'uploading': return 'Envoi en cours...'
 58 |                         break;
 59 |                     case 'error': return 'Une erreur s\'est produite'
 60 |                         break;
 61 |                     case 'done': return 'Envoi effectué'
 62 |                         break;
 63 |                     default: return ''    
 64 |                 }
 65 |             }
 66 |         },
 67 |         methods: {
 68 |             submit () {
 69 |                 this.sendMessage()
 70 |             },
 71 |             sendMessage () { 
 72 |                 if(this.currentChannel !== null){
 73 |                     if(this.message.length > 0){
 74 |                         //Envoi du message
 75 |                         this.$parent.messagesRef.child(this.currentChannel.id).push().set(this.createMessage()).then( () => {
 76 |                         }).catch( error => {
 77 |                             this.errors.push(error.message)
 78 |                         })
 79 |                     
 80 |                         this.message = ""
 81 |                     }
 82 |                 }
 83 |             },
 84 |             createMessage () { 
 85 |                 return {
 86 |                     content: this.message,
 87 |                     timestamp: firebase.database.ServerValue.TIMESTAMP,
 88 |                     user: {
 89 |                         name: this.currentUser.displayName,
 90 |                         avatar: this.currentUser.photoURL,
 91 |                         id: this.currentUser.uid
 92 |                     }
 93 |                 }
 94 |                 if(fileUrl == null){
 95 |                     message['content'] = this.message
 96 |                 }else{
 97 |                     message['image'] = fileUrl
 98 |                 }
 99 |                 return message
100 |             },
101 |             uploadFile(file, metadata) {
102 |                 if(file === null) return false
103 |                 let pathToUpload = this.currentChannel.id
104 |                 let ref = this.$parent.getMessageRef()
105 |                 let filePath = this.getPath() + '/' + uuidV4() + '.jpg'
106 |                 //Upload du Fichier
107 |                 this.uploadTask = this.storageRef.child(filePath).put(file, metadata)
108 |                 this.uploadState = "uploading"
109 |                 this.uploadTask.on('state_changed', snap => {
110 |                     // Upload en cours
111 |                     let percent = (snap.bytesTransferred / snap.totalBytes) * 100
112 |                     $("#uploadedFile").progress("set percent", percent)
113 |                 }, error => {
114 |                     // Erreur
115 |                     this.errors.push(error.message)
116 |                     this.uploadState = 'error'
117 |                     this.uploadTask = null
118 |                 }, () => {
119 |                     // Upload finit
120 |                     this.uploadState = 'done'
121 |                     this.$refs.file_modal.resetForm()
122 |                     //Récupération de l'url du Fichier
123 |                     let fileUrl = this.uploadTask.snapshot.downloadURL
124 |                     this.sendFileMessage(fileUrl, ref, pathToUpload)
125 |                     
126 |                 })
127 |             },
128 |             sendFileMessage(fileUrl, ref, pathToUpload){
129 |                 
130 |                 ref.child(pathToUpload).push().set(this.createMessage(fileUrl)).then( () => {
131 |                     this.$nextTick(() => {
132 |                         $("html, body").scrollTop($(document).height())
133 |                     })
134 |                 }).catch( error => {
135 |                     this.errors.push(error.message)
136 |                 })
137 |                 
138 |             },  
139 |             openFileModal () {
140 |                 $("#fileModal").modal("show")
141 |             },
142 |             getPath() {
143 |                 if(this.isPrivate){
144 |                     return 'schat/private/'+this.currentChannel.id
145 |                 }else{
146 |                     return 'schat/public'
147 |                 }
148 |             }
149 |         },
150 |         beforeDestroy () {
151 |             if(this.uploadTask !== null){
152 |                 this.uploadTask.cancel()
153 |                 this.uploadTask = null
154 |             }
155 |         }
156 |     }
157 | </script>
158 | 
159 | <style scoped>
160 | .messages__form{
161 |         position: fixed;
162 |         bottom: 0;
163 |         background-color:#232323;
164 |         width: 100%;
165 |         margin: 0 0 0 -30px;
166 | }
167 | .shortcut{
168 |     color:white;
169 | }
170 | .ui.small.progress{
171 |     width: 70%;
172 | }
173 | </style>
174 | 


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