├── .env.example
├── .gitignore
├── README.md
├── babel.config.js
├── netlify.toml
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   └── css
    │   │   ├── app.css
    │   │   └── custom.css
    ├── components
    │   ├── ChatList.vue
    │   ├── ChatMessage.vue
    │   ├── ChatRoom.vue
    │   ├── Credits.vue
    │   ├── Home.vue
    │   ├── Login.vue
    │   ├── Nav.vue
    │   ├── User.vue
    │   └── UserProfile.vue
    ├── firebase.js
    └── main.js
├── tailwind.config.js
└── vue.config.js


/.env.example:
--------------------------------------------------------------------------------
 1 | NODE_ENV=production
 2 | 
 3 | VUE_APP_NAME=Qevoxo
 4 | VUE_APP_ENV=production
 5 | VUE_APP_DEBUG=false
 6 | 
 7 | VUE_APP_FIREBASE_API=
 8 | VUE_APP_FIREBASE_AUTH_DOMAIN=
 9 | VUE_APP_FIREBASE_PROJECT_ID=
10 | VUE_APP_FIREBASE_DATABASE_URL=
11 | VUE_APP_FIREBASE_STORAGE_BUCKET=
12 | VUE_APP_FIREBASE_MESSAGING_SENDER_ID=
13 | VUE_APP_FIREBASE_APP_ID=
14 | VUE_APP_FIREBASE_MEASUREMENT_ID=
15 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | 
15 | # Editor directories and files
16 | .idea
17 | .vscode
18 | *.suo
19 | *.ntvs*
20 | *.njsproj
21 | *.sln
22 | *.sw?
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # qevoxo
 2 | 
 3 | Project is a work in progress.
 4 | 
 5 | ## Project setup
 6 | ```
 7 | npm install
 8 | ```
 9 | 
10 | ### Compiles and hot-reloads for development
11 | ```
12 | npm run serve
13 | ```
14 | 
15 | ### Compiles and minifies for production
16 | ```
17 | npm run build
18 | ```
19 | 
20 | ### Lints and fixes files
21 | ```
22 | npm run lint
23 | ```
24 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [build]
2 |   command = "npm run build"
3 |   publish = "dist"
4 | 
5 | [[redirects]]
6 |   from = "/*"
7 |   to = "/index.html"
8 |   status = 200
9 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "qevoxo",
 3 |   "version": "1.2.0",
 4 |   "private": false,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "@vue/composition-api": "^1.0.0-beta.6",
12 |     "core-js": "^3.6.5",
13 |     "firebase": "^7.17.1",
14 |     "vue": "^2.6.11",
15 |     "vue-router": "^3.3.4",
16 |     "vuefire": "^2.2.3"
17 |   },
18 |   "devDependencies": {
19 |     "@fortawesome/fontawesome-free": "^5.13.0",
20 |     "@fullhuman/postcss-purgecss": "^2.2.0",
21 |     "@tailwindcss/custom-forms": "^0.2.1",
22 |     "@vue/cli-plugin-babel": "~4.4.0",
23 |     "@vue/cli-plugin-eslint": "~4.4.0",
24 |     "@vue/cli-service": "~4.4.0",
25 |     "babel-eslint": "^10.1.0",
26 |     "eslint": "^6.7.2",
27 |     "eslint-plugin-vue": "^6.2.2",
28 |     "moment": "^2.26.0",
29 |     "simplebar-vue": "^1.5.1",
30 |     "tailwindcss": "^1.5",
31 |     "vue-template-compiler": "^2.6.11"
32 |   },
33 |   "eslintConfig": {
34 |     "root": true,
35 |     "env": {
36 |       "node": true
37 |     },
38 |     "extends": [
39 |       "plugin:vue/essential",
40 |       "eslint:recommended"
41 |     ],
42 |     "parserOptions": {
43 |       "parser": "babel-eslint"
44 |     },
45 |     "rules": {}
46 |   },
47 |   "browserslist": [
48 |     "> 1%",
49 |     "last 2 versions",
50 |     "not dead"
51 |   ]
52 | }
53 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
 1 | const autoprefixer = require('autoprefixer');
 2 | const tailwindcss = require('tailwindcss');
 3 | const postcssPurgecss = require(`@fullhuman/postcss-purgecss`);
 4 | 
 5 | const purgecss = postcssPurgecss({
 6 |   content: [
 7 |     './public/**/*.html',
 8 |     './src/**/*.vue',
 9 |   ],
10 | 
11 |   defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
12 | });
13 | 
14 | module.exports = {
15 |   plugins: [
16 |     tailwindcss,
17 |     autoprefixer,
18 |     // purgecss,
19 |   ]
20 | }
21 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Thavarshan/qevoxo/cc7687ee3029d264352194facc587dd5714909c1/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div id="app" class="antialiased h-screen min-h-screen leading-normal bg-gray-900 text-gray-600 overflow-x-hidden">
 3 |         <header>
 4 |             <Nav />
 5 |         </header>
 6 | 
 7 |         <main role="main">
 8 |             <!-- Content Area -->
 9 |             <router-view></router-view>
10 |         </main>
11 | 
12 |         <footer>
13 |             <Credits />
14 |         </footer>
15 |     </div>
16 | </template>
17 | 
18 | <script>
19 |     import Nav from './components/Nav';
20 |     import Credits from './components/Credits';
21 | 
22 |     export default {
23 |         name: 'App',
24 | 
25 |         components: {
26 |             Nav,
27 |             Credits
28 |         },
29 |     }
30 | </script>
31 | 
32 | 


--------------------------------------------------------------------------------
/src/assets/css/app.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | 
 3 | a {
 4 |     @apply .text-blue-500;
 5 | }
 6 | 
 7 | a:hover,
 8 | a:focus {
 9 |     @apply .text-blue-600;
10 | }
11 | 
12 | @tailwind components;
13 | 
14 | @import './custom.css';
15 | 
16 | @tailwind utilities;
17 | 


--------------------------------------------------------------------------------
/src/assets/css/custom.css:
--------------------------------------------------------------------------------
 1 | .btn {
 2 |     @apply .inline-block;
 3 |     @apply .px-4;
 4 |     @apply .py-0;
 5 |     @apply .leading-10;
 6 |     @apply .whitespace-no-wrap;
 7 |     @apply .rounded-lg;
 8 |     @apply .text-center;
 9 |     @apply .text-sm;
10 |     @apply .font-medium;
11 |     @apply .transition;
12 |     @apply .ease-in-out;
13 |     @apply .duration-150;
14 |     @apply .shadow;
15 | }
16 | 
17 | .btn:focus {
18 |     @apply .outline-none;
19 |     @apply .shadow-outline;
20 | }
21 | 
22 | .btn.btn-primary {
23 |     @apply .bg-blue-500;
24 |     @apply .text-white;
25 | }
26 | 
27 | .btn.btn-primary:hover {
28 |     @apply .bg-blue-600;
29 |     @apply .text-white;
30 | }
31 | 
32 | .btn.btn-primary:focus {
33 |     @apply .bg-blue-600;
34 |     @apply .text-white;
35 | }
36 | 
37 | .btn.btn-secondary {
38 |     @apply .bg-white;
39 |     @apply .text-gray-600;
40 |     @apply .shadow;
41 | }
42 | 
43 | .btn.btn-secondary:hover {
44 |     @apply .text-gray-700;
45 | }
46 | 
47 | .btn.btn-secondary:focus {
48 |     @apply .text-gray-700;
49 | }
50 | 
51 | .btn.btn-danger {
52 |     @apply .bg-red-500;
53 |     @apply .text-white;
54 | }
55 | 
56 | .btn.btn-danger:hover {
57 |     @apply .bg-red-600;
58 |     @apply .text-white;
59 | }
60 | 
61 | .btn.btn-danger:focus {
62 |     @apply .bg-red-600;
63 |     @apply .text-white;
64 | }
65 | 


--------------------------------------------------------------------------------
/src/components/ChatList.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <div class="mt-6">
  4 |             <button class="btn btn-primary inline-flex items-center" @click="createChatRoom()">
  5 |                 <span v-show="loading" class="mr-2">
  6 |                     <i class="fas fa-spinner fa-pulse"></i>
  7 |                 </span>
  8 | 
  9 |                 <span>Create new chat room</span>
 10 |             </button>
 11 |         </div>
 12 | 
 13 |         <div class="mt-10">
 14 |             <h3 class="text-white text-lg font-bold">Recent Chats</h3>
 15 |         </div>
 16 | 
 17 |         <div class="my-4 h-px border-b border-gray-800"></div>
 18 | 
 19 |         <div>
 20 |             <div v-if="chats.length > 0">
 21 |                 <div v-for="chat in chats" :key="chat.id" class="mb-4 rounded-lg overflow-hidden">
 22 |                     <div class="block bg-gray-800 px-4 py-3">
 23 |                         <div>
 24 |                             <div class="flex items-start justify-between">
 25 |                                 <span class="text-xs font-semibold text-gray-500">Channel ID</span>
 26 | 
 27 |                                 <router-link class="text-sm text-blue-400 inline-flex items-center" :to="{ name: 'chat', params: { id: chat.id } }">
 28 |                                     <span>Join</span> <span class="ml-1">&rarr;</span>
 29 |                                 </router-link>
 30 |                             </div>
 31 | 
 32 |                             <div>
 33 |                                 <span class="text-white font-bold">{{ chat.id }}</span>
 34 |                             </div>
 35 |                         </div>
 36 | 
 37 |                         <div class="mt-2">
 38 |                             <div class="flex items-end justify-between">
 39 |                                 <span class="text-xs text-gray-600">{{ diffForHumans(chat.createdAt) }}</span>
 40 | 
 41 |                                 <button v-if="uid === chat.owner" @click="deleteChat(chat.id)" class="text-xs text-red-500 hover:text-red-600">
 42 |                                     <i class="fas fa-trash"></i>
 43 |                                 </button>
 44 |                             </div>
 45 |                         </div>
 46 |                     </div>
 47 |                 </div>
 48 |             </div>
 49 | 
 50 |             <div v-else class="text-sm text-gray-600">No chats found</div>
 51 |         </div>
 52 |     </div>
 53 | </template>
 54 | 
 55 | <script>
 56 |     import { db } from '../firebase';
 57 |     import moment from 'moment';
 58 | 
 59 |     export default {
 60 |         props: ['uid'],
 61 | 
 62 |         data() {
 63 |             return {
 64 |                 loading: false,
 65 |                 chats: []
 66 |             }
 67 |         },
 68 | 
 69 |         firestore() {
 70 |             return {
 71 |                 chats: db.collection('chats').where('members', 'array-contains', this.uid)
 72 |             }
 73 |         },
 74 | 
 75 |         methods: {
 76 |             async createChatRoom() {
 77 |                 this.loading = true;
 78 | 
 79 |                 const newChat = await db.collection('chats').add({
 80 |                     createdAt: Date.now(),
 81 |                     owner: this.uid,
 82 |                     members: [this.uid]
 83 |                 });
 84 | 
 85 |                 if (newChat) {
 86 |                     this.loading = false;
 87 |                 }
 88 |             },
 89 | 
 90 |             async deleteChat(chatId) {
 91 |                 await db.collection('chats').doc(chatId).delete();
 92 |             },
 93 | 
 94 |             diffForHumans(timestamp) {
 95 |                 return moment(timestamp).fromNow();
 96 |             }
 97 |         }
 98 |     }
 99 | </script>
100 | 


--------------------------------------------------------------------------------
/src/components/ChatMessage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="overflow-hidden shadow" :class="owner ? 'rounded-t-lg rounded-l-lg' : 'rounded-b-lg rounded-r-lg'">
 3 |         <div class="max-w-lg px-4 py-3" :class="owner ? 'bg-blue-400 text-white' : 'bg-gray-900 text-white'">
 4 |             <div>
 5 |                 {{ message.text }}
 6 |             </div>
 7 | 
 8 |             <div class="text-xs opacity-50 text-white mt-1">
 9 |                 {{ diffForHumans(message.createdAt) }}
10 |             </div>
11 |         </div>
12 |     </div>
13 | </template>
14 | 
15 | <script>
16 |     import moment from 'moment';
17 | 
18 |     export default {
19 |         props: ['message', 'owner'],
20 | 
21 |         methods: {
22 |             diffForHumans(timestamp) {
23 |                 return moment(timestamp).fromNow();
24 |             }
25 |         }
26 |     }
27 | </script>
28 | 


--------------------------------------------------------------------------------
/src/components/ChatRoom.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <section class="py-6">
  3 |         <div class="container mx-auto px-6">
  4 |             <User v-slot:user="{ user }">
  5 |                 <div v-if="user" class="grid grid-rows-1 grid-cols-12 gap-6">
  6 |                     <div class="col-span-12 lg:col-span-3">
  7 |                         <div class="text-gray-500">
  8 |                             <div>
  9 |                                 <span class="text-sm font-medium text-gray-500">Channel:</span>
 10 | 
 11 |                                 <span class="ml-2 px-2 py-1 inline-flex items-center rounded-lg bg-gray-800 text-sm font-semibold text-gray-500 uppercase">
 12 |                                     <span class="h-2 w-2 rounded-full overflow-hidden bg-green-500"></span>
 13 | 
 14 |                                     <span class="ml-1">{{ chatId }}</span>
 15 |                                 </span>
 16 |                             </div>
 17 | 
 18 |                             <div class="border-b border-gray-800 my-3"></div>
 19 | 
 20 |                             <div>
 21 |                                 <div class="text-sm text-gray-600 whitespace-pre-wrap">
 22 |                                     <div>
 23 |                                         Invite other members by sharing the link
 24 |                                     </div>
 25 | 
 26 |                                     <div class="mt-2">
 27 |                                         <span class="font-semibold text-blue-500">
 28 |                                             {{ chatLink }}
 29 |                                         </span>
 30 |                                     </div>
 31 |                                 </div>
 32 |                             </div>
 33 |                         </div>
 34 |                     </div>
 35 | 
 36 |                     <div class="mt-6 lg:mt-0 col-span-12 lg:col-span-9">
 37 |                         <div>
 38 |                             <div class="rounded-lg overflow-hidden">
 39 |                                 <simplebar class="px-4 py-5 sm:px-6 bg-gray-800 text-gray-500 h-custom overflow-auto">
 40 |                                     <div>
 41 |                                         <div v-for="message in messages" :key="message.id" class="mb-4 flex items-center" :class="user.uid === message.sender ? 'justify-end' : 'justify-start'">
 42 |                                             <ChatMessage :message="message" :owner="user.uid === message.sender" />
 43 |                                         </div>
 44 |                                     </div>
 45 |                                 </simplebar>
 46 |                             </div>
 47 | 
 48 |                             <div class="mt-6">
 49 |                                 <div class="flex items-start">
 50 |                                     <textarea v-model="newMessage" class="mr-6 flex-1 form-textarea block w-full resize-y text-gray-300 bg-gray-900 focus:bg-gray-800 focus:bg-opacity-50 border-gray-800 focus:border-gray-700" name="message" id="message" rows="2" placeholder="Type a message..."></textarea>
 51 | 
 52 |                                     <button :disable="!newMessage || loading" @click="addMessage(user.uid)" class="btn btn-primary rounded-full inline-flex items-center justify-center h-10 w-10">
 53 |                                         <span v-if="loading">
 54 |                                             <i class="fas fa-spinner fa-pulse"></i>
 55 |                                         </span>
 56 | 
 57 |                                         <span v-else>
 58 |                                             <i class="fas fa-paper-plane"></i>
 59 |                                         </span>
 60 |                                     </button>
 61 |                                 </div>
 62 |                             </div>
 63 |                         </div>
 64 |                     </div>
 65 |                 </div>
 66 | 
 67 |                 <Login v-else />
 68 |             </User>
 69 |         </div>
 70 |     </section>
 71 | </template>
 72 | 
 73 | <script>
 74 |     import { db } from '../firebase';
 75 |     import User from './User';
 76 |     import Login from './Login';
 77 |     import ChatMessage from './ChatMessage';
 78 |     import simplebar from 'simplebar-vue';
 79 |     import 'simplebar/dist/simplebar.min.css';
 80 | 
 81 |     export default {
 82 |         components: {
 83 |             User,
 84 |             Login,
 85 |             ChatMessage,
 86 |             simplebar
 87 |         },
 88 | 
 89 |         data() {
 90 |             return {
 91 |                 newMessage: null,
 92 |                 loading: false,
 93 |                 messages: []
 94 |             }
 95 |         },
 96 | 
 97 |         firestore() {
 98 |             return {
 99 |                 messages: this.messagesCollection
100 |                     .orderBy('createdAt')
101 |                     .limitToLast(10)
102 |             };
103 |         },
104 | 
105 |         computed: {
106 |             chatId() {
107 |                 return this.$route.params.id;
108 |             },
109 | 
110 |             chatLink() {
111 |                 return location.href;
112 |             },
113 | 
114 |             messagesCollection() {
115 |                 return db.doc(`chats/${this.chatId}`).collection('messages');
116 |             },
117 |         },
118 | 
119 |         methods: {
120 |             async addMessage(userId) {
121 |                 this.loading = true;
122 | 
123 |                 const { id: messageId } = this.messagesCollection.doc();
124 | 
125 |                 await this.messagesCollection.doc(messageId).set({
126 |                     text: this.newMessage,
127 |                     sender: userId,
128 |                     createdAt: Date.now()
129 |                 });
130 | 
131 |                 this.loading = false;
132 |                 this.newMessage = null;
133 |             }
134 |         }
135 |     }
136 | </script>
137 | 
138 | <style scoped>
139 |     .h-custom {
140 |         height: 33rem;
141 |     }
142 | </style>
143 | 


--------------------------------------------------------------------------------
/src/components/Credits.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <section class="py-8">
 3 |         <div class="container mx-auto px-6">
 4 |             <span class="text-sm text-gray-700">&copy; {{ year }} Qevoxo</span>
 5 |         </div>
 6 |     </section>
 7 | </template>
 8 | 
 9 | <script>
10 |     export default {
11 |         computed: {
12 |             year() {
13 |                 const date = new Date;
14 | 
15 |                 return date.getFullYear();
16 |             }
17 |         }
18 |     }
19 | </script>
20 | 


--------------------------------------------------------------------------------
/src/components/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <section class="py-6">
 3 |         <div class="container mx-auto px-6">
 4 |             <User v-slot:user="{ user }">
 5 |                 <UserProfile v-if="user" :user="user" />
 6 | 
 7 |                 <Login v-else />
 8 |             </User>
 9 |         </div>
10 |     </section>
11 | </template>
12 | 
13 | <script>
14 |     import User from './User';
15 |     import UserProfile from './UserProfile';
16 |     import Login from './Login';
17 | 
18 |     export default {
19 |         components: {
20 |             User,
21 |             UserProfile,
22 |             Login,
23 |         }
24 |     }
25 | </script>
26 | 
27 | 


--------------------------------------------------------------------------------
/src/components/Login.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="grid grid-rows-1 grid-cols-12">
 3 |         <div class="col-span-12 sm:col-span-10 md:col-span-7 lg:col-span-5 xl:col-span-4">
 4 |             <div>
 5 |                 <h3 class="text-white text-3xl font-bold">{{ newUser ? 'Create an account' : 'Sign in' }}</h3>
 6 | 
 7 |                 <h6 class="text-gray-500">Let's get you up and running with a private channel.</h6>
 8 |             </div>
 9 | 
10 |             <div class="mt-6">
11 |                 <div>
12 |                     <label class="block">
13 |                         <span class="text-gray-500 text-sm font-semibold">Email</span>
14 | 
15 |                         <input type="email" name="email" id="email" class="form-input mt-1 block w-full text-gray-300 bg-gray-800 focus:bg-gray-700 border-gray-800 focus:border-gray-700" placeholder="john.doe@example.com" v-model="email" required>
16 |                     </label>
17 |                 </div>
18 | 
19 |                 <div class="mt-4">
20 |                     <label class="block">
21 |                         <span class="text-gray-500 text-sm font-semibold">Password</span>
22 | 
23 |                         <input type="password" name="password" id="password" class="form-input mt-1 block w-full text-gray-300 bg-gray-800 focus:bg-gray-700 border-gray-800 focus:border-gray-700" autocomplete="new-password" placeholder="doyourememberme" v-model="password" required>
24 |                     </label>
25 |                 </div>
26 | 
27 |                 <div v-if="error" class="mt-4" role="alert">
28 |                     <span class="text-xs text-red-500 font-semibold">{{ error }}</span>
29 |                 </div>
30 | 
31 |                 <div class="mt-8">
32 |                     <div class="flex items-center">
33 |                         <button @click="signInOrCreateUser()" class="btn btn-primary inline-flex items-center">
34 |                             <span v-show="loading" class="mr-2">
35 |                                 <i class="fas fa-spinner fa-pulse"></i>
36 |                             </span>
37 | 
38 |                             <span>
39 |                                 {{ newUser ? 'Create account' : 'Sign in' }} <span class="ml-1">&rarr;</span>
40 |                             </span>
41 |                         </button>
42 | 
43 |                         <a href="#" @click="newUser = !newUser" class="ml-4 text-sm" role="button">{{ newUser ? 'Already have an account?' : 'Don\'t have account yet?' }}</a>
44 |                     </div>
45 |                 </div>
46 |             </div>
47 |         </div>
48 |     </div>
49 | </template>
50 | 
51 | <script>
52 |     import { auth } from '../firebase';
53 | 
54 |     export default {
55 |         data() {
56 |             return {
57 |                 newUser: false,
58 |                 email: null,
59 |                 password: null,
60 |                 auth: auth,
61 |                 error: null,
62 |                 loading: false
63 |             }
64 |         },
65 | 
66 |         methods: {
67 |             async signInOrCreateUser() {
68 |                 this.loading = true;
69 |                 this.error = null;
70 | 
71 |                 try {
72 |                     if (this.newUser) {
73 |                         await auth.createUserWithEmailAndPassword(this.email, this.password);
74 |                     } else {
75 |                         await auth.signInWithEmailAndPassword(this.email, this.password);
76 |                     }
77 |                 } catch (error) {
78 |                     this.error = error.message;
79 |                 }
80 | 
81 |                 this.loading = false;
82 | 
83 |                 location.reload();
84 |             },
85 |         }
86 |     }
87 | </script>
88 | 
89 | 


--------------------------------------------------------------------------------
/src/components/Nav.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <nav class="h-16 flex items-center bg-gray-900">
 3 |         <div class="container mx-auto px-6">
 4 |             <div class="flex items-center justify-between">
 5 |                 <a href="/" class="block">
 6 |                     <span class="font-black uppercase tracking-wider text-white">Qevoxo</span>
 7 |                 </a>
 8 | 
 9 |                 <div class="ml-10 flex-1 flex items-center justify-between">
10 |                     <ul class="flex items-center">
11 |                         <!--  -->
12 |                     </ul>
13 | 
14 |                     <ul class="flex items-center">
15 |                         <User v-slot:user="{ user }">
16 |                             <li v-if="user">
17 |                                 <a @click="auth.signOut()" class="btn btn-primary inline-flex items-center leading-8" href="/">
18 |                                     <i class="fas fa-sign-out-alt"></i>
19 | 
20 |                                     <span class="ml-1">Sign out</span>
21 |                                 </a>
22 |                             </li>
23 |                         </User>
24 |                     </ul>
25 |                 </div>
26 |             </div>
27 | 
28 |             <div class="mt-3 h-px w-full border-b border-gray-800"></div>
29 |         </div>
30 |     </nav>
31 | </template>
32 | 
33 | <script>
34 |     import User from './User';
35 |     import { auth } from '../firebase';
36 | 
37 |     export default {
38 |         components: {
39 |             User,
40 |         },
41 | 
42 |         data() {
43 |             return {
44 |                 auth
45 |             }
46 |         }
47 |     }
48 | </script>
49 | 


--------------------------------------------------------------------------------
/src/components/User.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <slot name="user" :user="user"></slot>
 4 |     </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |     import { ref } from '@vue/composition-api';
 9 |     import { auth } from '../firebase';
10 | 
11 |     export default {
12 |         setup() {
13 |             const user = ref(null);
14 | 
15 |             const unsubscribe = auth.onAuthStateChanged(
16 |                 firebaseUser => {
17 |                     user.value = firebaseUser;
18 |                 }
19 |             );
20 | 
21 |             return {
22 |                 user,
23 |                 unsubscribe
24 |             }
25 |         },
26 | 
27 |         destroyed() {
28 |             this.unsubscribe();
29 |         }
30 |     }
31 | </script>
32 | 


--------------------------------------------------------------------------------
/src/components/UserProfile.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="grid grid-rows-1 grid-cols-12">
 3 |         <div class="col-span-12 sm:col-span-10 md:col-span-7 lg:col-span-5 xl:col-span-4">
 4 |             <div>
 5 |                 <h3 class="text-white text-3xl font-bold">Let's get started</h3>
 6 | 
 7 |                 <h6 class="text-gray-500">You are signed in as, <span class="text-blue-500">{{ user.email }}</span></h6>
 8 |             </div>
 9 | 
10 |             <div class="mt-6">
11 |                 <div class="rounded-lg overflow-hidden shadow">
12 |                     <div class="bg-gray-800 bg-opacity-25 px-4 py-3 flex items-start">
13 |                         <div>
14 |                             <i class="fas fa-info-circle text-gray-700"></i>
15 |                         </div>
16 | 
17 |                         <div class="ml-4">
18 |                             <span class="text-sm">Choose a already existing channel or create a new one to get started.</span>
19 |                         </div>
20 |                     </div>
21 |                 </div>
22 |             </div>
23 | 
24 |             <ChatList :uid="user.uid" />
25 |         </div>
26 |     </div>
27 | </template>
28 | 
29 | <script>
30 |     import { auth } from "../firebase";
31 |     import ChatList from './ChatList';
32 | 
33 |     export default {
34 |         components: {
35 |             ChatList
36 |         },
37 | 
38 |         props: ['user'],
39 | 
40 |         data() {
41 |             return {
42 |                 auth
43 |             }
44 |         },
45 |     }
46 | </script>
47 | 


--------------------------------------------------------------------------------
/src/firebase.js:
--------------------------------------------------------------------------------
 1 | import firebase from 'firebase/app';
 2 | import 'firebase/firestore';
 3 | import 'firebase/auth';
 4 | import 'firebase/storage';
 5 | 
 6 | const firebaseConfig = {
 7 |     apiKey: process.env.VUE_APP_FIREBASE_API,
 8 |     authDomain: process.env.VUE_APP_FIREBASE_AUTH_DOMAIN,
 9 |     projectId: process.env.VUE_APP_FIREBASE_PROJECT_ID,
10 |     databaseURL: process.env.VUE_APP_FIREBASE_DATABASE_URL,
11 |     storageBucket: process.env.VUE_APP_FIREBASE_STORAGE_BUCKET,
12 |     messagingSenderId: process.env.VUE_APP_FIREBASE_MESSAGING_SENDER_ID,
13 |     appId: process.env.VUE_APP_FIREBASE_APP_ID,
14 |     measurementId: process.env.VUE_APP_FIREBASE_MEASUREMENT_ID,
15 | };
16 | 
17 | firebase.initializeApp(firebaseConfig);
18 | 
19 | export const db = firebase.firestore();
20 | export const auth = firebase.auth();
21 | export const storage = firebase.storage();
22 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import App from './App.vue';
 3 | import { firestorePlugin } from 'vuefire';
 4 | import VueRouter from 'vue-router';
 5 | import VueCompositionApi from '@vue/composition-api';
 6 | 
 7 | import './assets/css/app.css';
 8 | import '@fortawesome/fontawesome-free/js/all.js';
 9 | 
10 | Vue.use(VueCompositionApi);
11 | Vue.use(VueRouter);
12 | Vue.use(firestorePlugin);
13 | 
14 | Vue.config.productionTip = false;
15 | 
16 | import Home from './components/Home';
17 | import ChatRoom from './components/ChatRoom';
18 | 
19 | const router = new VueRouter({
20 |     mode: 'history',
21 |     routes: [
22 |         {
23 |             path: '/',
24 |             component: Home,
25 |             name: 'home'
26 |         },
27 |         {
28 |             path: '/chats/:id',
29 |             component: ChatRoom,
30 |             name: 'chat'
31 |         }
32 |     ]
33 | });
34 | 
35 | new Vue({
36 |     router,
37 |     render: h => h(App),
38 | }).$mount('#app')
39 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   theme: {
 3 |     customForms: theme => ({
 4 |       default: {
 5 |         input: {
 6 |           borderRadius: theme('borderRadius.lg'),
 7 |           backgroundColor: theme('colors.gray.100'),
 8 |           '&:focus': {
 9 |             backgroundColor: theme('colors.white'),
10 |           }
11 |         },
12 |         textarea: {
13 |             borderRadius: theme('borderRadius.md'),
14 |             backgroundColor: theme('colors.gray.100'),
15 |             '&:focus': {
16 |               backgroundColor: theme('colors.white'),
17 |             }
18 |         },
19 |         select: {
20 |           borderRadius: theme('borderRadius.md'),
21 |           boxShadow: theme('boxShadow.none'),
22 |           backgroundColor: theme('colors.gray.100'),
23 |           '&:focus': {
24 |             backgroundColor: theme('colors.white'),
25 |           }
26 |         },
27 |         checkbox: {
28 |           backgroundColor: theme('colors.gray.100'),
29 |           width: theme('spacing.6'),
30 |           height: theme('spacing.6'),
31 |         },
32 |         radio: {
33 |           backgroundColor: theme('colors.gray.100'),
34 |           width: theme('spacing.6'),
35 |           height: theme('spacing.6'),
36 |         },
37 |       },
38 |     }),
39 |     typography: theme => ({
40 |         default: {
41 |           css: {
42 |             color: theme('colors.gray.600'),
43 |             a: {
44 |               color: '#0366D6',
45 |               '&:hover': {
46 |                 color: '#035CC1',
47 |               },
48 |             },
49 |           },
50 |         },
51 |     }),
52 |     extend: {
53 |         colors: {
54 |           blue: {
55 |             100: '#E6F0FB',
56 |             200: '#C0D9F5',
57 |             300: '#9AC2EF',
58 |             400: '#4F94E2',
59 |             500: '#0366D6',
60 |             600: '#035CC1',
61 |             700: '#023D80',
62 |             800: '#012E60',
63 |             900: '#011F40',
64 |           },
65 |         }
66 |     }
67 |   },
68 |   variants: {},
69 |   plugins: [
70 |     require('@tailwindcss/custom-forms'),
71 |   ],
72 | }
73 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     chainWebpack: config => {
 3 |         config
 4 |         .plugin('html')
 5 |         .tap(args => {
 6 |             args[0].title = 'Qevoxo | Web Walkie Talkie'
 7 |             return args
 8 |         })
 9 |     }
10 | }
11 | 


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