├── store
    ├── app
    │   ├── getters.js
    │   ├── state.js
    │   ├── mutation-types.js
    │   ├── mutations.js
    │   └── actions.js
    ├── chat
    │   ├── getters.js
    │   ├── state.js
    │   ├── mutation-types.js
    │   ├── actions.js
    │   └── mutations.js
    ├── index.js
    ├── app.js
    └── chat.js
├── components
    ├── app
    │   ├── app.scss
    │   ├── app.html
    │   ├── app.vue
    │   └── app.js
    ├── country-config
    │   ├── country-config.scss
    │   ├── country-config.vue
    │   ├── country-config.html
    │   └── country-config.js
    ├── contact-details
    │   ├── contact-details.scss
    │   ├── contact-details.vue
    │   ├── contact-details.js
    │   └── contact-details.html
    ├── confirm-tab-dialog
    │   ├── confirm-tab-dialog.scss
    │   ├── confirm-tab-dialog.vue
    │   ├── confirm-tab-dialog.js
    │   └── confirm-tab-dialog.html
    ├── profile-image-edit
    │   ├── profile-image-edit.scss
    │   ├── profile-image-edit.html
    │   ├── profile-image-edit.vue
    │   └── profile-image-edit.js
    ├── chat-box
    │   ├── chat-box.vue
    │   ├── chat-box.scss
    │   ├── chat-box.html
    │   └── chat-box.js
    ├── contact-list
    │   ├── contact-list.scss
    │   ├── contact-list.vue
    │   ├── contact-list.html
    │   └── contact-list.js
    ├── chat-config
    │   ├── chat-config.vue
    │   ├── chat-config.scss
    │   ├── chat-config.html
    │   └── chat-config.js
    ├── chat-header
    │   ├── chat-header.vue
    │   ├── chat-header.scss
    │   ├── chat-header.js
    │   └── chat-header.html
    ├── loading-app
    │   ├── loading-app.vue
    │   ├── loading-app.js
    │   ├── loading-app.html
    │   └── loading-app.scss
    ├── conversations
    │   ├── conversations.vue
    │   ├── conversations.scss
    │   ├── conversations.html
    │   └── conversations.js
    ├── cool-textarea
    │   ├── cool-textarea.vue
    │   ├── cool-textarea.scss
    │   ├── cool-textarea.html
    │   └── cool-textarea.js
    └── templates
    │   └── base-template
    │       ├── base-template.vue
    │       ├── base-template.html
    │       ├── base-template.js
    │       └── base-template.scss
├── .prettierrc
├── static
    ├── favicon.ico
    ├── flags
    │   ├── de-de.png
    │   ├── en-us.png
    │   └── pt-br.png
    ├── audio
    │   └── notification.mp3
    ├── favicon
    │   ├── favicon-bell.png
    │   └── favicon-normal.png
    ├── config
    │   └── app-config.json
    ├── svg-emoji
    │   ├── confused-emoji.svg
    │   ├── happy-emoji.svg
    │   ├── pensive-emoji.svg
    │   └── thinking-emoji.svg
    └── locales
    │   ├── en-us.json
    │   ├── pt-br.json
    │   └── de-de.json
├── .dockerignore
├── pages
    ├── index.vue
    ├── chat
    │   ├── index.vue
    │   ├── index.html
    │   ├── index.scss
    │   └── index.js
    ├── index.html
    └── index.js
├── assets
    └── img
    │   ├── chat-logo.png
    │   └── background-login.jpg
├── plugins
    ├── filters.js
    ├── vue-intersect.js
    ├── i18n.js
    ├── element-ui.js
    ├── vue-fontawesome.js
    └── global-mixins.js
├── middleware
    └── authenticated.js
├── entrypoint.sh
├── .editorconfig
├── utils
    ├── promise-utils.js
    ├── format-utils.js
    ├── filter-utils.js
    ├── object-utils.js
    ├── screen-utils.js
    ├── array-utils.js
    ├── date-utils.js
    ├── string-utils.js
    └── cache-utils.js
├── layouts
    ├── error-layout.vue
    ├── default.vue
    └── error.vue
├── Dockerfile
├── .eslintrc.js
├── services
    ├── emoji-service.js
    ├── axios-service.js
    ├── config-service.js
    ├── doc-title-service.js
    ├── notification-service.js
    ├── profile-config-service.js
    ├── favicon-service.js
    ├── message-parser.js
    └── xmpp-service.js
├── global-styles
    ├── element-variables.scss
    └── main.scss
├── server
    └── index.js
├── LICENSE
├── .gitignore
├── strophe
    └── strophe-mam-mod.js
├── enums
    └── presence-enum.js
├── package.json
├── nuxt.config.js
└── README.md


/store/app/getters.js:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/store/chat/getters.js:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/components/app/app.scss:
--------------------------------------------------------------------------------
1 | .app {
2 | }
3 | 


--------------------------------------------------------------------------------
/components/country-config/country-config.scss:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/store/index.js:
--------------------------------------------------------------------------------
1 | export const strict = false;
2 | 


--------------------------------------------------------------------------------
/components/app/app.html:
--------------------------------------------------------------------------------
1 | <router-view></router-view>


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "semi": true,
3 |   "singleQuote": true
4 | }
5 | 


--------------------------------------------------------------------------------
/components/contact-details/contact-details.scss:
--------------------------------------------------------------------------------
1 | .contact-details {
2 | }
3 | 


--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/credija/opa/HEAD/static/favicon.ico


--------------------------------------------------------------------------------
/.dockerignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .nuxt
3 | npm-debug.log
4 | README.md
5 | Dockerfile
6 | 


--------------------------------------------------------------------------------
/components/confirm-tab-dialog/confirm-tab-dialog.scss:
--------------------------------------------------------------------------------
1 | .confirm-tab-dialog {
2 | }
3 | 


--------------------------------------------------------------------------------
/components/profile-image-edit/profile-image-edit.scss:
--------------------------------------------------------------------------------
1 | .profile-image-edit {
2 | }
3 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
1 | <template src="./index.html" />
2 | <script src="./index.js"></script>
3 | 


--------------------------------------------------------------------------------
/static/flags/de-de.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/credija/opa/HEAD/static/flags/de-de.png


--------------------------------------------------------------------------------
/static/flags/en-us.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/credija/opa/HEAD/static/flags/en-us.png


--------------------------------------------------------------------------------
/static/flags/pt-br.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/credija/opa/HEAD/static/flags/pt-br.png


--------------------------------------------------------------------------------
/assets/img/chat-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/credija/opa/HEAD/assets/img/chat-logo.png


--------------------------------------------------------------------------------
/static/audio/notification.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/credija/opa/HEAD/static/audio/notification.mp3


--------------------------------------------------------------------------------
/assets/img/background-login.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/credija/opa/HEAD/assets/img/background-login.jpg


--------------------------------------------------------------------------------
/static/favicon/favicon-bell.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/credija/opa/HEAD/static/favicon/favicon-bell.png


--------------------------------------------------------------------------------
/static/favicon/favicon-normal.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/credija/opa/HEAD/static/favicon/favicon-normal.png


--------------------------------------------------------------------------------
/components/profile-image-edit/profile-image-edit.html:
--------------------------------------------------------------------------------
1 | <div class="profile-image-edit">
2 |   This is the ProfileImageEdit
3 | </div>
4 | 


--------------------------------------------------------------------------------
/components/app/app.vue:
--------------------------------------------------------------------------------
1 | <template src="./app.html"/>
2 | <style src="./app.scss" lang="scss"></style>
3 | <script src="./app.js"></script>
4 | 


--------------------------------------------------------------------------------
/pages/chat/index.vue:
--------------------------------------------------------------------------------
1 | <template src="./index.html" />
2 | <style src="./index.scss" scoped lang="scss"></style>
3 | <script src="./index.js"></script>
4 | 


--------------------------------------------------------------------------------
/plugins/filters.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import FilterUtils from '@/utils/filter-utils';
3 | 
4 | Vue.filter('isDateToday', FilterUtils.isDateToday);
5 | 


--------------------------------------------------------------------------------
/components/chat-box/chat-box.vue:
--------------------------------------------------------------------------------
1 | <template src="./chat-box.html" />
2 | <style src="./chat-box.scss" scoped lang="scss"></style>
3 | <script src="./chat-box.js"></script>
4 | 


--------------------------------------------------------------------------------
/plugins/vue-intersect.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import Intersect from 'vue-intersect';
3 | 
4 | export default () => {
5 |   Vue.component('intersect', Intersect);
6 | };
7 | 


--------------------------------------------------------------------------------
/components/contact-list/contact-list.scss:
--------------------------------------------------------------------------------
1 | .height-fix-contact {
2 |   height: 65px !important;
3 | }
4 | 
5 | .contact-list {
6 |   overflow-x: hidden;
7 |   overflow-y: hidden;
8 | }
9 | 


--------------------------------------------------------------------------------
/components/chat-config/chat-config.vue:
--------------------------------------------------------------------------------
1 | <template src="./chat-config.html" />
2 | <style src="./chat-config.scss" scoped lang="scss"></style>
3 | <script src="./chat-config.js"></script>
4 | 


--------------------------------------------------------------------------------
/components/chat-header/chat-header.vue:
--------------------------------------------------------------------------------
1 | <template src="./chat-header.html" />
2 | <style src="./chat-header.scss" scoped lang="scss"></style>
3 | <script src="./chat-header.js"></script>
4 | 


--------------------------------------------------------------------------------
/components/loading-app/loading-app.vue:
--------------------------------------------------------------------------------
1 | <template src="./loading-app.html" />
2 | <style src="./loading-app.scss" scoped lang="scss"></style>
3 | <script src="./loading-app.js"></script>
4 | 


--------------------------------------------------------------------------------
/middleware/authenticated.js:
--------------------------------------------------------------------------------
1 | export default function({ store, redirect }) {
2 |   if (store.state.app.xmppClient === null) {
3 |     return redirect('/?loginExpired=true');
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/components/contact-list/contact-list.vue:
--------------------------------------------------------------------------------
1 | <template src="./contact-list.html" />
2 | <style src="./contact-list.scss" scoped lang="scss"></style>
3 | <script src="./contact-list.js"></script>
4 | 


--------------------------------------------------------------------------------
/components/conversations/conversations.vue:
--------------------------------------------------------------------------------
1 | <template src="./conversations.html" />
2 | <style src="./conversations.scss" scoped lang="scss"></style>
3 | <script src="./conversations.js"></script>
4 | 


--------------------------------------------------------------------------------
/components/cool-textarea/cool-textarea.vue:
--------------------------------------------------------------------------------
1 | <template src="./cool-textarea.html" />
2 | <style src="./cool-textarea.scss" scoped lang="scss"></style>
3 | <script src="./cool-textarea.js"></script>
4 | 


--------------------------------------------------------------------------------
/components/country-config/country-config.vue:
--------------------------------------------------------------------------------
1 | <template src="./country-config.html" />
2 | <style src="./country-config.scss" scoped lang="scss"></style>
3 | <script src="./country-config.js"></script>
4 | 


--------------------------------------------------------------------------------
/components/loading-app/loading-app.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   name: 'LoadingApp',
3 |   computed: {
4 |     isAppLoading() {
5 |       return this.$store.state.app.isAppLoading;
6 |     }
7 |   }
8 | };
9 | 


--------------------------------------------------------------------------------
/components/templates/base-template/base-template.vue:
--------------------------------------------------------------------------------
1 | <template src="./base-template.html"/>
2 | <style src="./base-template.scss" scoped lang="scss"></style>
3 | <script src="./base-template.js"></script>
4 | 


--------------------------------------------------------------------------------
/components/contact-details/contact-details.vue:
--------------------------------------------------------------------------------
1 | <template src="./contact-details.html" />
2 | <style src="./contact-details.scss" scoped lang="scss"></style>
3 | <script src="./contact-details.js"></script>
4 | 


--------------------------------------------------------------------------------
/entrypoint.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/sh
 2 | if [ -d /app/bundle ];
 3 | then
 4 |   echo "yarn start"
 5 |   yarn start
 6 | else
 7 |   echo "yarn build && start"
 8 |   yarn build && yarn cache clean && yarn start
 9 | fi
10 | 


--------------------------------------------------------------------------------
/components/app/app.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   name: 'App',
 3 |   components: {},
 4 |   props: [],
 5 |   data() {
 6 |     return {};
 7 |   },
 8 |   computed: {},
 9 |   mounted() {},
10 |   methods: {}
11 | };
12 | 


--------------------------------------------------------------------------------
/components/confirm-tab-dialog/confirm-tab-dialog.vue:
--------------------------------------------------------------------------------
1 | <template src="./confirm-tab-dialog.html"/>
2 | <style src="./confirm-tab-dialog.scss" scoped lang="scss"></style>
3 | <script src="./confirm-tab-dialog.js"></script>
4 | 


--------------------------------------------------------------------------------
/components/profile-image-edit/profile-image-edit.vue:
--------------------------------------------------------------------------------
1 | <template src="./profile-image-edit.html"/>
2 | <style src="./profile-image-edit.scss" scoped lang="scss"></style>
3 | <script src="./profile-image-edit.js"></script>
4 | 


--------------------------------------------------------------------------------
/static/config/app-config.json:
--------------------------------------------------------------------------------
1 | {
2 |   "XMPP_SERVER_ADDRESS": "http://www.credija.com.br/openfire-demo/http-bind",
3 |   "XMPP_SERVER_DOMAIN": "chat",
4 |   "APP_LOCALE": "en-us",
5 |   "SHOW_USERS_WITHOUT_GROUPS": true
6 | }
7 | 


--------------------------------------------------------------------------------
/components/templates/base-template/base-template.html:
--------------------------------------------------------------------------------
 1 | <div>
 2 |   <div class="template-app">
 3 |     <el-container>
 4 |       <el-main>
 5 |         <router-view></router-view>
 6 |       </el-main>
 7 |     </el-container>
 8 |   </div>
 9 | </div>
10 | 


--------------------------------------------------------------------------------
/components/profile-image-edit/profile-image-edit.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   name: 'ProfileImageEdit',
 3 |   components: {},
 4 |   props: [],
 5 |   data() {
 6 |     return {};
 7 |   },
 8 |   computed: {},
 9 |   mounted() {},
10 |   methods: {}
11 | };
12 | 


--------------------------------------------------------------------------------
/components/templates/base-template/base-template.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   name: 'BaseTemplate',
 3 |   components: {},
 4 |   props: [],
 5 |   data() {
 6 |     return {};
 7 |   },
 8 |   computed: {},
 9 |   mounted() {},
10 |   methods: {}
11 | };
12 | 


--------------------------------------------------------------------------------
/components/templates/base-template/base-template.scss:
--------------------------------------------------------------------------------
 1 | @media (max-height: 700px) {
 2 |   .el-main {
 3 |     padding: 0px;
 4 |   }
 5 | }
 6 | 
 7 | @media (max-height: 650px) {
 8 |   .el-main {
 9 |     overflow-x: hidden !important;
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/components/confirm-tab-dialog/confirm-tab-dialog.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   name: 'ConfirmTabDialog',
 3 |   components: {},
 4 |   props: ['showDialog'],
 5 |   computed: {},
 6 |   mounted() {},
 7 |   methods: {
 8 |     refreshPage() {
 9 |       location.reload();
10 |     }
11 |   }
12 | };
13 | 


--------------------------------------------------------------------------------
/utils/promise-utils.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   promiseTimeout(ms, promise) {
 3 |     let timeout = new Promise((resolve, reject) => {
 4 |       let id = setTimeout(() => {
 5 |         clearTimeout(id);
 6 |         resolve([]);
 7 |       }, ms);
 8 |     });
 9 | 
10 |     return Promise.race([promise, timeout]);
11 |   }
12 | };
13 | 


--------------------------------------------------------------------------------
/layouts/error-layout.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="error-layout">
 3 |     <el-container>
 4 |       <el-main>
 5 |         <nuxt />
 6 |       </el-main>
 7 |     </el-container>
 8 |   </div>
 9 | </template>
10 | 
11 | <style scoped lang="scss">
12 | .el-main {
13 |   padding: 0px !important;
14 |   overflow: hidden !important;
15 | }
16 | </style>
17 | 


--------------------------------------------------------------------------------
/components/cool-textarea/cool-textarea.scss:
--------------------------------------------------------------------------------
 1 | .cool-textarea {
 2 |   min-height: 15px;
 3 |   max-height: 150px;
 4 |   background-color: white;
 5 |   padding-left: 3px;
 6 |   padding-right: 3px;
 7 |   overflow-y: auto;
 8 |   overflow-x: hidden;
 9 |   white-space: pre-wrap;
10 | }
11 | 
12 | .cool-textarea:focus {
13 |   outline: none !important;
14 | }
15 | 


--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
 1 | FROM node:10.13-alpine
 2 | 
 3 | LABEL Author: Kevin de Faveri Aguiar
 4 | 
 5 | RUN mkdir -p /app
 6 | COPY . /app
 7 | WORKDIR /app
 8 | 
 9 | COPY package.json /app
10 | COPY yarn.lock /app
11 | RUN yarn install 
12 | 
13 | ENV NODE_ENV=production
14 | 
15 | COPY . /app
16 | 
17 | ENV HOST 0.0.0.0
18 | EXPOSE 3000
19 | 
20 | CMD ["sh", "entrypoint.sh"]
21 | 


--------------------------------------------------------------------------------
/components/cool-textarea/cool-textarea.html:
--------------------------------------------------------------------------------
 1 | <div
 2 |   id="cool-textarea"
 3 |   class="cool-textarea"
 4 |   contenteditable="true"
 5 |   @input="updateContent"
 6 |   @paste="onPaste"
 7 |   @keydown.enter="enterKey"
 8 |   @keydown.shift.enter="shiftEnterKey"
 9 |   @mouseup="saveSelection"
10 |   @keyup="saveSelection"
11 |   @focus="restoreSelection"
12 | ></div>
13 | 


--------------------------------------------------------------------------------
/store/app.js:
--------------------------------------------------------------------------------
 1 | import State from './app/state';
 2 | import Getters from './app/getters';
 3 | import Actions from './app/actions';
 4 | import Mutations from './app/mutations';
 5 | 
 6 | const store = () =>
 7 |   new Vuex.Store({
 8 |     state: State(),
 9 |     getters: Getters,
10 |     actions: Actions,
11 |     mutations: Mutations
12 |   });
13 | 
14 | export default store;
15 | 


--------------------------------------------------------------------------------
/store/chat.js:
--------------------------------------------------------------------------------
 1 | import State from './chat/state';
 2 | import Getters from './chat/getters';
 3 | import Actions from './chat/actions';
 4 | import Mutations from './chat/mutations';
 5 | 
 6 | const store = () =>
 7 |   new Vuex.Store({
 8 |     state: State(),
 9 |     getters: Getters,
10 |     actions: Actions,
11 |     mutations: Mutations
12 |   });
13 | 
14 | export default store;
15 | 


--------------------------------------------------------------------------------
/static/svg-emoji/confused-emoji.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#FFCC4D" d="M36 18c0 9.941-8.059 18-18 18-9.94 0-18-8.059-18-18C0 8.06 8.06 0 18 0c9.941 0 18 8.06 18 18"/><ellipse fill="#664500" cx="11.5" cy="16.5" rx="2.5" ry="3.5"/><ellipse fill="#664500" cx="24.5" cy="16.5" rx="2.5" ry="3.5"/><path fill="#664500" d="M12 28c2-5 13-5 13-3 0 1-8-1-13 3z"/></svg>


--------------------------------------------------------------------------------
/store/app/state.js:
--------------------------------------------------------------------------------
 1 | export const state = () => ({
 2 |   isAppLoading: true,
 3 |   appConfig: null,
 4 |   appLocale: 'en-us',
 5 |   showUsersWithoutGroups: true,
 6 |   isLogging: false,
 7 |   isDisconnected: false,
 8 |   xmppClient: null,
 9 |   authUser: '',
10 |   rosterList: [],
11 |   isLoadingRoster: true,
12 |   profileImageList: [],
13 |   chatTimestamp: Date.now()
14 | });
15 | 
16 | export default state;
17 | 


--------------------------------------------------------------------------------
/utils/format-utils.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   getBase64FromFile(file) {
 3 |     return new Promise((resolve, reject) => {
 4 |       const reader = new FileReader();
 5 |       reader.readAsDataURL(file);
 6 |       reader.onload = () => {
 7 |         const encoded = reader.result.replace(/^.*;base64,/, '');
 8 |         resolve(encoded);
 9 |       };
10 |       reader.onerror = error => reject(error);
11 |     });
12 |   }
13 | };
14 | 


--------------------------------------------------------------------------------
/components/conversations/conversations.scss:
--------------------------------------------------------------------------------
 1 | .max-h-64 {
 2 |   max-height: 84px;
 3 | }
 4 | 
 5 | .p-fix {
 6 |   padding: 5px;
 7 | }
 8 | 
 9 | .truncate-last-message {
10 |   max-width: 290px !important;
11 |   white-space: nowrap !important;
12 |   overflow: hidden !important;
13 |   text-overflow: ellipsis !important;
14 |   display: inline-block !important;
15 | }
16 | 
17 | .conversations {
18 |   overflow-x: hidden;
19 |   overflow-y: hidden;
20 | }
21 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="default">
 3 |     <el-container>
 4 |       <el-main>
 5 |         <nuxt />
 6 |       </el-main>
 7 |     </el-container>
 8 |   </div>
 9 | </template>
10 | 
11 | <style scoped lang="scss">
12 | @media (max-height: 700px) {
13 |   .el-main {
14 |     padding: 0px;
15 |   }
16 | }
17 | 
18 | @media (max-height: 650px) {
19 |   .el-main {
20 |     overflow-x: hidden !important;
21 |   }
22 | }
23 | </style>
24 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     browser: true,
 5 |     node: true
 6 |   },
 7 |   parserOptions: {
 8 |     parser: 'babel-eslint'
 9 |   },
10 |   extends: ['plugin:vue/recommended'],
11 |   plugins: ['vue'],
12 |   rules: {
13 |     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
14 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
15 |     'vue/require-prop-types': 0
16 |   }
17 | };
18 | 


--------------------------------------------------------------------------------
/store/chat/state.js:
--------------------------------------------------------------------------------
 1 | export const state = () => ({
 2 |   conversationList: [],
 3 |   delayedMessageList: [],
 4 |   delayIncomingMessages: false,
 5 |   activeConversation: null,
 6 |   chatboxEmoji: 'confused',
 7 |   lastNotification: new Date(),
 8 |   chatConfig: null,
 9 |   numUnreadConversation: 0,
10 |   lastMessageSentStamp: new Date(),
11 |   isPresenceAway: false,
12 |   lastPresence: 'off',
13 |   lockAutoLoadOldMessages: false
14 | });
15 | 
16 | export default state;
17 | 


--------------------------------------------------------------------------------
/services/emoji-service.js:
--------------------------------------------------------------------------------
 1 | import Twemoji from 'twemoji';
 2 | 
 3 | export default {
 4 |   constructor(store) {
 5 |     this.store = store;
 6 |     return this;
 7 |   },
 8 | 
 9 |   twemoji() {
10 |     return Twemoji;
11 |   },
12 | 
13 |   localTwemoji() {
14 |     Twemoji.base = `${process.env.baseUrl}/emoji/`;
15 |     return Twemoji;
16 |   },
17 | 
18 |   getEmojiImgFromCodepoint(codepoint) {
19 |     return this.parse(Twemoji.convert.fromCodePoint(codepoint));
20 |   }
21 | };
22 | 


--------------------------------------------------------------------------------
/utils/filter-utils.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   removeAfterHyphen(value) {
 3 |     const cutIndex = value.indexOf('-');
 4 |     value = value.substring(0, cutIndex !== -1 ? cutIndex : value.length);
 5 |     return value;
 6 |   },
 7 |   isDateToday(date, appLocale) {
 8 |     const isToday = new Date().toDateString() == date.toDateString();
 9 | 
10 |     if (isToday) {
11 |       return date.toLocaleTimeString(appLocale);
12 |     }
13 | 
14 |     return date.toLocaleString(appLocale);
15 |   }
16 | };
17 | 


--------------------------------------------------------------------------------
/components/loading-app/loading-app.html:
--------------------------------------------------------------------------------
 1 | <div class="loading-app">
 2 |   <el-dialog
 3 |     :visible="isAppLoading"
 4 |     :fullscreen="true"
 5 |     :close-on-press-escape="false"
 6 |     :show-close="false"
 7 |     :close-on-click-modal="false"
 8 |   >
 9 |     <img
10 |       class="center-img"
11 |       src="@/assets/img/chat-logo.png"
12 |       width="250"
13 |       height="250"
14 |     />
15 |     <div class="lds-ring">
16 |       <div></div>
17 |       <div></div>
18 |       <div></div>
19 |       <div></div>
20 |     </div>
21 |   </el-dialog>
22 | </div>
23 | 


--------------------------------------------------------------------------------
/services/axios-service.js:
--------------------------------------------------------------------------------
 1 | import Axios from 'axios';
 2 | 
 3 | export const localAxios = Axios.create({ baseURL: '/' });
 4 | 
 5 | // Tryn to find a solution to embed tweets without CORS block
 6 | export const twitterAxios = Axios.create({
 7 |   baseURL: 'https://api.twitter.com/1/statuses/oembed.json?url=',
 8 |   withCredentials: true,
 9 |   headers: {
10 |     'Access-Control-Allow-Origin': '*',
11 |     Accept: 'application/json',
12 |     'Content-Type': 'application/json'
13 |   }
14 | });
15 | 
16 | export default {
17 |   getTweetEmbed(tweetUrl) {
18 |     // Wont work since Cross Blocks
19 |     return twitterAxios.get(tweetUrl);
20 |   }
21 | };
22 | 


--------------------------------------------------------------------------------
/plugins/i18n.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import VueI18n from 'vue-i18n';
 3 | 
 4 | Vue.use(VueI18n);
 5 | 
 6 | export default ({ app, store }) => {
 7 |   app.i18n = new VueI18n({
 8 |     locale: store.state.app.appLocale,
 9 |     fallbackLocale: 'en-us',
10 |     messages: {
11 |       'en-us': require('@/static/locales/en-us.json'),
12 |       'pt-br': require('@/static/locales/pt-br.json'),
13 |       'de-de': require('@/static/locales/de-de.json')
14 |     }
15 |   });
16 | 
17 |   app.i18n.path = link => {
18 |     if (app.i18n.locale === app.i18n.fallbackLocale) {
19 |       return `/${link}`;
20 |     }
21 | 
22 |     return `/${app.i18n.locale}/${link}`;
23 |   };
24 | };
25 | 


--------------------------------------------------------------------------------
/components/chat-header/chat-header.scss:
--------------------------------------------------------------------------------
 1 | .mt-prefix {
 2 |   margin-top: 13px;
 3 | }
 4 | 
 5 | .overlay-profile-img {
 6 |   position: absolute;
 7 |   top: 0;
 8 |   bottom: 0;
 9 |   left: 0;
10 |   right: 0;
11 |   height: 83px;
12 |   width: 83px;
13 |   opacity: 0;
14 |   transition: 0.3s ease;
15 |   background-color: #ccffff;
16 | }
17 | 
18 | .profile-img-container {
19 |   position: relative;
20 | }
21 | 
22 | .profile-img-container:hover .overlay-profile-img {
23 |   opacity: 1;
24 | }
25 | 
26 | .profile-img-close {
27 |   position: absolute;
28 |   top: 0;
29 |   right: 0;
30 | }
31 | 
32 | .header-max-height {
33 |   height: 90px;
34 |   min-height: 90px;
35 |   max-height: 90px;
36 | }
37 | 


--------------------------------------------------------------------------------
/utils/object-utils.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | export default {
 3 |   getValidValue(fn, defaultVal) {
 4 |     try {
 5 |       if (fn() === undefined) {
 6 |         return defaultVal;
 7 |       }
 8 |       return fn();
 9 |     } catch (e) {
10 |       return defaultVal;
11 |     }
12 |   },
13 |   getValidUsername(fn) {
14 |     return this.getValidValue(fn, 'INVALID_USERNAME');
15 |   },
16 |   cloneObject(obj) {
17 |     const clone = {};
18 |     for (let i in obj) {
19 |       if (obj[i] != null && typeof obj[i] == 'object') {
20 |         clone[i] = this.cloneObject(obj[i]);
21 |       } else {
22 |         clone[i] = obj[i];
23 |       }
24 |     }
25 |     return clone;
26 |   }
27 | };
28 | 


--------------------------------------------------------------------------------
/services/config-service.js:
--------------------------------------------------------------------------------
 1 | import Axios from 'axios';
 2 | 
 3 | export default {
 4 |   async getConfigFile() {
 5 |     let appConfigPath = null;
 6 | 
 7 |     if (process.env.isDev) {
 8 |       appConfigPath = `${process.env.baseUrl}/config/app-config-dev.json`;
 9 |     } else {
10 |       appConfigPath = `${process.env.baseUrl}/config/app-config.json`;
11 |     }
12 | 
13 |     const appConfig = await Axios.get(appConfigPath)
14 |       .then(res => {
15 |         return res.data;
16 |       })
17 |       .catch(() => {
18 |         return {
19 |           XMPP_SERVER_ADDRESS: 'http://chat:7070/http-bind',
20 |           XMPP_SERVER_DOMAIN: 'chat',
21 |           APP_LOCALE: 'en-us'
22 |         };
23 |       });
24 |     return appConfig;
25 |   }
26 | };
27 | 


--------------------------------------------------------------------------------
/components/chat-config/chat-config.scss:
--------------------------------------------------------------------------------
 1 | @media (min-height: 910px) {
 2 |   .chat-config {
 3 |     max-height: 70px;
 4 |     height: 70px;
 5 |     min-height: 70px;
 6 |   }
 7 | }
 8 | 
 9 | @media (min-height: 760px) and (max-height: 910px) {
10 |   .chat-config {
11 |     max-height: 70px;
12 |     height: 70px;
13 |     min-height: 70px;
14 |   }
15 | }
16 | 
17 | @media (min-height: 660px) and (max-height: 760px) {
18 |   .chat-config {
19 |     max-height: 60px;
20 |     height: 60px;
21 |     min-height: 60px;
22 |   }
23 | }
24 | 
25 | @media (max-height: 660px) {
26 |   .chat-config {
27 |     max-height: 70px;
28 |     height: 70px;
29 |     min-height: 70px;
30 |   }
31 | }
32 | 
33 | .margin-config-btn {
34 |   margin-right: 5px;
35 |   margin-left: 5px;
36 | }
37 | 


--------------------------------------------------------------------------------
/global-styles/element-variables.scss:
--------------------------------------------------------------------------------
 1 | // Element Custom
 2 | $--color-primary: #00b3b3;
 3 | 
 4 | $--font-path: '../node_modules/element-ui/packages/theme-chalk/src/fonts';
 5 | @import 'element-ui/packages/theme-chalk/src/index.scss';
 6 | 
 7 | .el-card {
 8 |   color: #404040;
 9 | }
10 | 
11 | .el-form-item__label {
12 |   padding-bottom: 0px !important;
13 | }
14 | 
15 | .el-input__inner {
16 |   border-top: none;
17 |   border-left: none;
18 |   border-right: none;
19 |   border-radius: 0px;
20 | }
21 | 
22 | .el-card__body {
23 |   padding: 0px;
24 | }
25 | 
26 | .form-label {
27 |   color: #666666;
28 | }
29 | 
30 | .disable-resize textarea {
31 |   resize: none !important;
32 | }
33 | 
34 | .is-success .el-textarea__inner {
35 |   border-color: #dcdfe6 !important;
36 | }
37 | 


--------------------------------------------------------------------------------
/server/index.js:
--------------------------------------------------------------------------------
 1 | const express = require('express');
 2 | const consola = require('consola');
 3 | const { Nuxt, Builder } = require('nuxt');
 4 | const app = express();
 5 | const host = process.env.HOST || 'localhost';
 6 | const port = process.env.PORT || 3000;
 7 | const BASE_URL = process.env.BASE_URL;
 8 | 
 9 | app.set('port', port);
10 | 
11 | let config = require('../nuxt.config.js');
12 | 
13 | async function start() {
14 |   const nuxt = new Nuxt(config);
15 |   if (config.dev) {
16 |     const builder = new Builder(nuxt);
17 |     await builder.build();
18 |   }
19 | 
20 |   app.use(nuxt.render);
21 | 
22 |   app.listen(port, host);
23 |   consola.ready({
24 |     message: `Opa is now running on the address: http://${host}:${port}`,
25 |     badge: true
26 |   });
27 |   consola.info({
28 |     message: `BaseURL: ${BASE_URL !== undefined ? BASE_URL : '/'}`,
29 |     badge: true
30 |   });
31 | }
32 | start();
33 | 


--------------------------------------------------------------------------------
/components/confirm-tab-dialog/confirm-tab-dialog.html:
--------------------------------------------------------------------------------
 1 | <div class="confirm-tab-dialog">
 2 |   <el-dialog
 3 |     :visible.sync="showDialog"
 4 |     :fullscreen="true"
 5 |     :close-on-press-escape="false"
 6 |     :show-close="false"
 7 |     :close-on-click-modal="false"
 8 |   >
 9 |     <div class="text-center text-big text-primary mt7">
10 |       <p>Você já possui uma janela aberta com o app Chat.</p>
11 |       <p>
12 |         Para usar aqui feche a outra janela e
13 |         <a class="link-text clickable" @click="refreshPage()"
14 |           >atualize a página.</a
15 |         >
16 |       </p>
17 |     </div>
18 |     <div class="text-center text-medium text-primary mt7">
19 |       <span
20 |         >Não consegue sair desta tela?
21 |         <router-link class="link-text" to="/">Clique aqui</router-link> para
22 |         efetuar login novamente.</span
23 |       >
24 |     </div>
25 |   </el-dialog>
26 | </div>
27 | 


--------------------------------------------------------------------------------
/static/svg-emoji/happy-emoji.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#FFCC4D" d="M36 18c0 9.941-8.059 18-18 18-9.94 0-18-8.059-18-18C0 8.06 8.06 0 18 0c9.941 0 18 8.06 18 18"/><path fill="#664500" d="M28.457 17.797c-.06-.135-1.499-3.297-4.457-3.297-2.957 0-4.397 3.162-4.457 3.297-.092.207-.032.449.145.591.175.142.426.147.61.014.012-.009 1.262-.902 3.702-.902 2.426 0 3.674.881 3.702.901.088.066.194.099.298.099.11 0 .221-.037.312-.109.177-.142.238-.386.145-.594zm-12 0c-.06-.135-1.499-3.297-4.457-3.297-2.957 0-4.397 3.162-4.457 3.297-.092.207-.032.449.144.591.176.142.427.147.61.014.013-.009 1.262-.902 3.703-.902 2.426 0 3.674.881 3.702.901.088.066.194.099.298.099.11 0 .221-.037.312-.109.178-.142.237-.386.145-.594zM18 22c-3.623 0-6.027-.422-9-1-.679-.131-2 0-2 2 0 4 4.595 9 11 9 6.404 0 11-5 11-9 0-2-1.321-2.132-2-2-2.973.578-5.377 1-9 1z"/><path fill="#FFF" d="M9 23s3 1 9 1 9-1 9-1-2 4-9 4-9-4-9-4z"/></svg>


--------------------------------------------------------------------------------
/utils/screen-utils.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   getSizeChat() {
 3 |     const screenWidth = window.innerWidth;
 4 |     if (screenWidth >= 1900) {
 5 |       return {
 6 |         offsetAlert: 2,
 7 |         sizeAlert: 20,
 8 | 
 9 |         offsetSideMenu: 2,
10 |         sizeSideMenu: 6,
11 | 
12 |         offsetChatbox: 0,
13 |         sizeChatbox: 14
14 |       };
15 |     } else if (screenWidth >= 1400) {
16 |       return {
17 |         offsetAlert: 1,
18 |         sizeAlert: 22,
19 | 
20 |         offsetSideMenu: 1,
21 |         sizeSideMenu: 7,
22 | 
23 |         offsetChatbox: 0,
24 |         sizeChatbox: 15
25 |       };
26 |     } else if (screenWidth < 1400) {
27 |       return {
28 |         offsetAlert: 0,
29 |         sizeAlert: 24,
30 | 
31 |         offsetSideMenu: 0,
32 |         sizeSideMenu: 8,
33 | 
34 |         offsetChatbox: 0,
35 |         sizeChatbox: 16
36 |       };
37 |     }
38 |     return window.innerWidth;
39 |   }
40 | };
41 | 


--------------------------------------------------------------------------------
/utils/array-utils.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   getRosterByGroup(rosterArray) {
 3 |     const arrayByGroup = [];
 4 | 
 5 |     for (let i = 0; i < rosterArray.length; i++) {
 6 |       const findGroup = arrayByGroup.find(
 7 |         rosterGroup =>
 8 |           rosterGroup.group.toUpperCase() === rosterArray[i].group.toUpperCase()
 9 |       );
10 |       if (findGroup === undefined && rosterArray[i].group !== 'UNKNOWN') {
11 |         arrayByGroup.push({
12 |           group: rosterArray[i].group,
13 |           contacts: [rosterArray[i]]
14 |         });
15 |       } else if (findGroup !== undefined) {
16 |         findGroup.contacts.push(rosterArray[i]);
17 |       }
18 |     }
19 | 
20 |     arrayByGroup.sort(function(obj1, obj2) {
21 |       const textA = obj1.group.toUpperCase();
22 |       const textB = obj2.group.toUpperCase();
23 |       return textA < textB ? -1 : textA > textB ? 1 : 0;
24 |     });
25 | 
26 |     return arrayByGroup;
27 |   }
28 | };
29 | 


--------------------------------------------------------------------------------
/components/contact-details/contact-details.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   name: 'ContactDetails',
 3 |   components: {},
 4 |   props: ['activeContact', 'showContactDetails'],
 5 |   data() {
 6 |     return {};
 7 |   },
 8 |   computed: {
 9 |     profileImageSrc() {
10 |       const profileImageList = this.$store.state.app.profileImageList;
11 |       const profileImageObj = profileImageList.find(
12 |         profileImage =>
13 |           profileImage.username.toUpperCase() ===
14 |           this.activeContact.username.toUpperCase()
15 |       );
16 |       let imgSrc = null;
17 |       if (profileImageObj !== undefined && profileImageObj.bin) {
18 |         imgSrc =
19 |           'data:' + profileImageObj.type + ';base64,' + profileImageObj.bin;
20 |       }
21 |       return imgSrc;
22 |     },
23 |     chatConfig() {
24 |       return this.$store.state.chat.chatConfig;
25 |     }
26 |   },
27 |   mounted() {},
28 |   methods: {
29 |     handleClose() {
30 |       this.$emit('closeContactDetails');
31 |     }
32 |   }
33 | };
34 | 


--------------------------------------------------------------------------------
/components/country-config/country-config.html:
--------------------------------------------------------------------------------
 1 | <el-dialog
 2 |   :title="$t('config.selectCountry')"
 3 |   :visible="showCountryConfig"
 4 |   width="30%"
 5 |   :before-close="handleClose"
 6 |   :close-on-click-modal="false"
 7 |   :close-on-press-escape="false"
 8 |   :center="true"
 9 |   :class="{ 'dark-theme': chatConfigForm.darkMode === true}"
10 | >
11 |   <el-row
12 |     class="text-center my1"
13 |     v-for="country in countryArray"
14 |     :key="country"
15 |   >
16 |     <el-button
17 |       :type="countryConfig === country ? 'primary' : ''"
18 |       @click="clickCountry(country)"
19 |     >
20 |       <img :src="'flags/' + country + '.png'" width="80" height="48" />
21 |     </el-button>
22 |   </el-row>
23 | 
24 |   <div class="text-center">
25 |     <el-button type="primary" class="mx1" @click="saveCountryConfig()">
26 |       {{ $t('dialogs.save') }}
27 |     </el-button>
28 |     <el-button type="danger" class="mx1" @click="handleClose()">
29 |       {{ $t('dialogs.cancel') }}
30 |     </el-button>
31 |   </div>
32 | </el-dialog>
33 | 


--------------------------------------------------------------------------------
/services/doc-title-service.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   constructor(store) {
 3 |     this.store = store;
 4 |     return this;
 5 |   },
 6 | 
 7 |   updateTitle() {
 8 |     const numUnreadConversation = this.store.state.chat.numUnreadConversation;
 9 |     const title = this.getTitleById(numUnreadConversation);
10 |     document.title = title.value;
11 |   },
12 | 
13 |   titleArray() {
14 |     return [
15 |       { id: 0, value: 'Opa' },
16 |       { id: 1, value: 'Opa (1)' },
17 |       { id: 2, value: 'Opa (2)' },
18 |       { id: 3, value: 'Opa (3)' },
19 |       { id: 4, value: 'Opa (4)' },
20 |       { id: 5, value: 'Opa (5)' },
21 |       { id: 6, value: 'Opa (6)' },
22 |       { id: 7, value: 'Opa (7)' },
23 |       { id: 8, value: 'Opa (8)' },
24 |       { id: 9, value: 'Opa (9)' },
25 |       { id: 10, value: 'Opa (9+)' }
26 |     ];
27 |   },
28 | 
29 |   getTitleById(idTitle) {
30 |     if (idTitle > 9) {
31 |       return this.titleArray()[10];
32 |     }
33 |     return this.titleArray().find(title => title.id === idTitle);
34 |   }
35 | };
36 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright 2018 Sicoob Credija
2 | 
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4 | 
5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6 | 
7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


--------------------------------------------------------------------------------
/static/svg-emoji/pensive-emoji.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#FFCC4D" d="M36 18c0 9.941-8.059 18-18 18-9.94 0-18-8.059-18-18C0 8.06 8.06 0 18 0c9.941 0 18 8.06 18 18"/><path fill="#664500" d="M17.312 17.612c-.176-.143-.427-.147-.61-.014-.012.009-1.26.902-3.702.902-2.441 0-3.69-.893-3.7-.9-.183-.137-.435-.133-.611.009-.178.142-.238.386-.146.594.06.135 1.5 3.297 4.457 3.297 2.958 0 4.397-3.162 4.457-3.297.092-.207.032-.449-.145-.591zm10 0c-.176-.143-.426-.148-.61-.014-.012.009-1.261.902-3.702.902-2.44 0-3.69-.893-3.7-.9-.183-.137-.434-.133-.611.009-.178.142-.238.386-.146.594.06.135 1.5 3.297 4.457 3.297 2.958 0 4.397-3.162 4.457-3.297.092-.207.032-.449-.145-.591zM22 28h-8c-.552 0-1-.447-1-1s.448-1 1-1h8c.553 0 1 .447 1 1s-.447 1-1 1zM6 14c-.552 0-1-.448-1-1 0-.551.445-.998.996-1 .156-.002 3.569-.086 6.205-3.6.331-.44.957-.532 1.4-.2.442.331.531.958.2 1.4C10.538 13.95 6.184 14 6 14zm24 0c-.184 0-4.537-.05-7.8-4.4-.332-.442-.242-1.069.2-1.4.441-.333 1.067-.242 1.399.2 2.641 3.521 6.061 3.599 6.206 3.6.55.006.994.456.991 1.005-.002.551-.446.995-.996.995z"/></svg>


--------------------------------------------------------------------------------
/components/contact-details/contact-details.html:
--------------------------------------------------------------------------------
 1 | <el-dialog
 2 |   :title="$t('contactDetails.modalTitle')"
 3 |   :visible.sync="showContactDetails"
 4 |   width="30%"
 5 |   :before-close="handleClose"
 6 |   :close-on-click-modal="false"
 7 |   :close-on-press-escape="false"
 8 |   :center="true"
 9 |   v-if="activeContact !== null"
10 |   :class="{ 'dark-theme': chatConfig.darkMode === true}"
11 | >
12 |   <p class="text-center">
13 |     <img
14 |       v-if="profileImageSrc !== null"
15 |       class="b-full-circle img-fit b1"
16 |       :src="profileImageSrc"
17 |       width="120"
18 |       height="120"
19 |     />
20 |   </p>
21 |   <p class="text-bold text-center">
22 |     {{ $t('contactDetails.nameLabel') }}: {{ activeContact.name }}
23 |   </p>
24 |   <p class="text-bold text-center" v-if="activeContact.status.length !== 0">
25 |     Status: {{ activeContact.status }}
26 |   </p>
27 |   <p class="text-bold text-center" v-if="activeContact.group !== 'UNKNOWN'">
28 |     {{ $t('contactDetails.groupLabel') }}:
29 |     {{ activeContact.group === 'Others' ? $t('contacts.groupOthers') : activeContact.group }}
30 |   </p>
31 | </el-dialog>
32 | 


--------------------------------------------------------------------------------
/plugins/element-ui.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import {
 3 |   Container,
 4 |   Main,
 5 |   Form,
 6 |   FormItem,
 7 |   Col,
 8 |   Row,
 9 |   Alert,
10 |   Input,
11 |   Button,
12 |   Card,
13 |   Loading,
14 |   MessageBox,
15 |   Dialog,
16 |   Collapse,
17 |   CollapseItem,
18 |   Popover,
19 |   Select,
20 |   Option,
21 |   Notification,
22 |   Badge
23 | } from 'element-ui';
24 | import lang from 'element-ui/lib/locale/lang/en';
25 | import locale from 'element-ui/lib/locale';
26 | import '@/global-styles/element-variables.scss';
27 | 
28 | export default () => {
29 |   locale.use(lang);
30 | 
31 |   Vue.use(Container);
32 |   Vue.use(Main);
33 |   Vue.use(Form);
34 |   Vue.use(FormItem);
35 |   Vue.use(Col);
36 |   Vue.use(Row);
37 |   Vue.use(Alert);
38 |   Vue.use(Input);
39 |   Vue.use(Button);
40 |   Vue.use(Card);
41 |   Vue.use(Loading.directive);
42 |   Vue.use(Dialog);
43 |   Vue.use(Collapse);
44 |   Vue.use(CollapseItem);
45 |   Vue.use(Popover);
46 |   Vue.use(Select);
47 |   Vue.use(Option);
48 |   Vue.use(Badge);
49 | 
50 |   Vue.prototype.$notify = Notification;
51 |   Vue.prototype.$confirm = MessageBox.confirm;
52 |   Vue.prototype.$alert = MessageBox.alert;
53 | };
54 | 


--------------------------------------------------------------------------------
/services/notification-service.js:
--------------------------------------------------------------------------------
 1 | import DateUtils from '@/utils/date-utils';
 2 | import ChatLogo from '@/assets/img/chat-logo.png';
 3 | import Push from 'push.js';
 4 | import MessageParser from '@/services/message-parser';
 5 | 
 6 | export default {
 7 |   constructor(store) {
 8 |     this.store = store;
 9 |     return this;
10 |   },
11 | 
12 |   sendAudioNotification() {
13 |     const notificationEnabled = this.store.state.chat.chatConfig
14 |       .soundNotification;
15 |     if (
16 |       DateUtils.constructor(this.store).isDateLastNotificationMinutesOlder(1) &&
17 |       notificationEnabled
18 |     ) {
19 |       const audio = new Audio('audio/notification.mp3');
20 |       audio.play();
21 |     }
22 |   },
23 |   sendDesktopNotification(name, message) {
24 |     message = MessageParser.removeHtmlTags(message);
25 |     if (
26 |       DateUtils.constructor(this.store).isDateLastNotificationMinutesOlder(1) &&
27 |       Push.Permission.has()
28 |     ) {
29 |       Push.create(name, {
30 |         body: message,
31 |         icon: ChatLogo,
32 |         timeout: 4000,
33 |         onClick: function() {
34 |           window.focus();
35 |           this.close();
36 |         }
37 |       });
38 |     }
39 |   }
40 | };
41 | 


--------------------------------------------------------------------------------
/components/chat-box/chat-box.scss:
--------------------------------------------------------------------------------
 1 | @media (min-height: 910px) {
 2 |   .size-conversation {
 3 |     max-height: 680px;
 4 |     height: 680px;
 5 |     min-height: 680px;
 6 |     overflow: auto;
 7 |   }
 8 | }
 9 | 
10 | @media (min-height: 760px) and (max-height: 910px) {
11 |   .size-conversation {
12 |     max-height: 540px;
13 |     height: 540px;
14 |     min-height: 540px;
15 |     overflow: auto;
16 |   }
17 | }
18 | 
19 | @media (min-height: 660px) and (max-height: 760px) {
20 |   .size-conversation {
21 |     max-height: 500px;
22 |     height: 500px;
23 |     min-height: 500px;
24 |     overflow: auto;
25 |   }
26 | }
27 | 
28 | @media (max-height: 660px) {
29 |   .size-conversation {
30 |     max-height: 470px;
31 |     height: 470px;
32 |     min-height: 470px;
33 |     overflow: auto;
34 |   }
35 | }
36 | 
37 | .message-style {
38 |   max-width: 60% !important;
39 |   word-wrap: break-word;
40 |   white-space: pre-wrap;
41 | }
42 | 
43 | .max-size-header {
44 |   min-height: 80px;
45 |   max-height: 80px;
46 | }
47 | 
48 | .margin-chatbox-btn {
49 |   margin-top: 13px;
50 | }
51 | 
52 | .chatbox-bg {
53 |   background-color: white;
54 |   color: #404040;
55 |   border: 1px solid #ccc;
56 |   border-radius: 25px;
57 |   padding: 10px;
58 | }
59 | 


--------------------------------------------------------------------------------
/plugins/vue-fontawesome.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import { library, config } from '@fortawesome/fontawesome-svg-core';
 3 | import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 4 | import {
 5 |   faUser,
 6 |   faPlane,
 7 |   faChevronCircleRight,
 8 |   faCircle,
 9 |   faClock,
10 |   faTimes,
11 |   faComment,
12 |   faCheck,
13 |   faMinus,
14 |   faSmile,
15 |   faCommentAlt,
16 |   faBell,
17 |   faBellSlash,
18 |   faUserSlash,
19 |   faSun,
20 |   faMoon,
21 |   faUndo,
22 |   faKey,
23 |   faUserCog,
24 |   faEnvelope,
25 |   faLock,
26 |   faArrowCircleRight,
27 |   faLanguage,
28 |   faSync
29 | } from '@fortawesome/free-solid-svg-icons';
30 | 
31 | export default () => {
32 |   config.autoAddCss = false;
33 | 
34 |   library.add(
35 |     faUser,
36 |     faPlane,
37 |     faChevronCircleRight,
38 |     faCircle,
39 |     faClock,
40 |     faTimes,
41 |     faComment,
42 |     faCheck,
43 |     faMinus,
44 |     faSmile,
45 |     faCommentAlt,
46 |     faBell,
47 |     faBellSlash,
48 |     faUserSlash,
49 |     faSun,
50 |     faMoon,
51 |     faUndo,
52 |     faKey,
53 |     faUserCog,
54 |     faEnvelope,
55 |     faLock,
56 |     faArrowCircleRight,
57 |     faLanguage,
58 |     faSync
59 |   );
60 | 
61 |   Vue.component('font-awesome-icon', FontAwesomeIcon);
62 | };
63 | 


--------------------------------------------------------------------------------
/pages/chat/index.html:
--------------------------------------------------------------------------------
 1 | <el-row class="chat" :gutter="10">
 2 |   <el-col
 3 |     :offset="sizes.offsetSideMenu"
 4 |     :span="sizes.sizeSideMenu"
 5 |     class="b-rounded px0"
 6 |     :class="{ 'dark-theme': chatConfig.darkMode === true }"
 7 |   >
 8 |     <chat-header
 9 |       :showContactList="showContactList"
10 |       @switchActiveMenu="switchActiveMenu"
11 |     ></chat-header>
12 |     <el-card
13 |       class="card-contact-list"
14 |       :class="{ 'dark-theme': chatConfig.darkMode === true, 'dark-border': chatConfig.darkMode === true }"
15 |     >
16 |       <el-row>
17 |         <contact-list
18 |           class="mx2"
19 |           v-show="showContactList"
20 |           @switchActiveMenu="switchActiveMenu"
21 |           :showContactList="showContactList"
22 |         ></contact-list>
23 |         <conversations v-show="!showContactList"></conversations>
24 |       </el-row>
25 |     </el-card>
26 |     <chat-config></chat-config>
27 |   </el-col>
28 |   <el-col :span="sizes.sizeChatbox" class="chatbox-col">
29 |     <el-card
30 |       class="card-chatbox bg-light-gray ov-hidden"
31 |       :class="{ 'dark-theme': chatConfig.darkMode === true, 
32 |             'dark-light': chatConfig.darkMode === true,
33 |             'dark-border': chatConfig.darkMode === true  }"
34 |     >
35 |       <chat-box></chat-box>
36 |     </el-card>
37 |   </el-col>
38 |   <loading-app></loading-app>
39 | </el-row>
40 | 


--------------------------------------------------------------------------------
/static/svg-emoji/thinking-emoji.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><circle fill="#FFCB4C" cx="18" cy="17.018" r="17"/><path fill="#65471B" d="M14.524 21.036c-.145-.116-.258-.274-.312-.464-.134-.46.13-.918.59-1.021 4.528-1.021 7.577 1.363 7.706 1.465.384.306.459.845.173 1.205-.286.358-.828.401-1.211.097-.11-.084-2.523-1.923-6.182-1.098-.274.061-.554-.016-.764-.184z"/><ellipse fill="#65471B" cx="13.119" cy="11.174" rx="2.125" ry="2.656"/><ellipse fill="#65471B" cx="24.375" cy="12.236" rx="2.125" ry="2.656"/><path fill="#F19020" d="M17.276 35.149s1.265-.411 1.429-1.352c.173-.972-.624-1.167-.624-1.167s1.041-.208 1.172-1.376c.123-1.101-.861-1.363-.861-1.363s.97-.4 1.016-1.539c.038-.959-.995-1.428-.995-1.428s5.038-1.221 5.556-1.341c.516-.12 1.32-.615 1.069-1.694-.249-1.08-1.204-1.118-1.697-1.003-.494.115-6.744 1.566-8.9 2.068l-1.439.334c-.54.127-.785-.11-.404-.512.508-.536.833-1.129.946-2.113.119-1.035-.232-2.313-.433-2.809-.374-.921-1.005-1.649-1.734-1.899-1.137-.39-1.945.321-1.542 1.561.604 1.854.208 3.375-.833 4.293-2.449 2.157-3.588 3.695-2.83 6.973.828 3.575 4.377 5.876 7.952 5.048l3.152-.681z"/><path fill="#65471B" d="M9.296 6.351c-.164-.088-.303-.224-.391-.399-.216-.428-.04-.927.393-1.112 4.266-1.831 7.699-.043 7.843.034.433.231.608.747.391 1.154-.216.405-.74.546-1.173.318-.123-.063-2.832-1.432-6.278.047-.257.109-.547.085-.785-.042zm12.135 3.75c-.156-.098-.286-.243-.362-.424-.187-.442.023-.927.468-1.084 4.381-1.536 7.685.48 7.823.567.415.26.555.787.312 1.178-.242.39-.776.495-1.191.238-.12-.072-2.727-1.621-6.267-.379-.266.091-.553.046-.783-.096z"/></svg>


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Created by .ignore support plugin (hsz.mobi)
 2 | ### Node template
 3 | # Logs
 4 | logs
 5 | *.log
 6 | npm-debug.log*
 7 | yarn-debug.log*
 8 | yarn-error.log*
 9 | 
10 | # Runtime data
11 | pids
12 | *.pid
13 | *.seed
14 | *.pid.lock
15 | 
16 | # Directory for instrumented libs generated by jscoverage/JSCover
17 | lib-cov
18 | 
19 | # Coverage directory used by tools like istanbul
20 | coverage
21 | 
22 | # nyc test coverage
23 | .nyc_output
24 | 
25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
26 | .grunt
27 | 
28 | # Bower dependency directory (https://bower.io/)
29 | bower_components
30 | 
31 | # node-waf configuration
32 | .lock-wscript
33 | 
34 | # Compiled binary addons (https://nodejs.org/api/addons.html)
35 | build/Release
36 | 
37 | # Dependency directories
38 | node_modules/
39 | jspm_packages/
40 | 
41 | # TypeScript v1 declaration files
42 | typings/
43 | 
44 | # Optional npm cache directory
45 | .npm
46 | 
47 | # Optional eslint cache
48 | .eslintcache
49 | 
50 | # Optional REPL history
51 | .node_repl_history
52 | 
53 | # Output of 'npm pack'
54 | *.tgz
55 | 
56 | # Yarn Integrity file
57 | .yarn-integrity
58 | 
59 | # dotenv environment variables file
60 | .env
61 | 
62 | # parcel-bundler cache (https://parceljs.org/)
63 | .cache
64 | 
65 | # next.js build output
66 | .next
67 | 
68 | # nuxt.js build output
69 | .nuxt
70 | 
71 | # Nuxt generate
72 | dist
73 | 
74 | # vuepress build output
75 | .vuepress/dist
76 | 
77 | # Serverless directories
78 | .serverless
79 | 
80 | # IDE
81 | .idea
82 | 
83 | bundle
84 | 
85 | app-config-dev.json
86 | 


--------------------------------------------------------------------------------
/store/app/mutation-types.js:
--------------------------------------------------------------------------------
 1 | // Global App States
 2 | export const UPDATE_IS_APP_LOADING = 'UPDATE_IS_APP_LOADING';
 3 | export const UPDATE_APP_LOCALE = 'UPDATE_APP_LOCALE';
 4 | export const UPDATE_SHOW_USERS_WITHOUT_GROUPS = 'UPDATE_SHOW_USERS_WITHOUT_GROUPS';
 5 | export const UPDATE_APP_CONFIG = 'UPDATE_APP_CONFIG';
 6 | export const UPDATE_IS_LOGGING = 'UPDATE_IS_LOGGING';
 7 | export const UPDATE_IS_DISCONNECTED = 'UPDATE_IS_DISCONNECTED';
 8 | export const UPDATE_XMPP_CLIENT = 'UPDATE_XMPP_CLIENT';
 9 | export const UPDATE_CHAT_TIMESTAMP = 'UPDATE_CHAT_TIMESTAMP';
10 | 
11 | // Auth User
12 | export const UPDATE_AUTH_USER = 'UPDATE_AUTH_USER';
13 | export const UPDATE_AUTH_USER_PRESENCE = 'UPDATE_AUTH_USER_PRESENCE';
14 | export const UPDATE_AUTH_USER_IMAGE_BIN = 'UPDATE_AUTH_USER_IMAGE_BIN';
15 | 
16 | // Roster List
17 | export const UPDATE_ROSTER_LIST = 'UPDATE_ROSTER_LIST';
18 | export const UPDATE_ROSTER_OBJ = 'UPDATE_ROSTER_OBJ';
19 | export const UPDATE_PRESENCE_ROSTER_CONTACT = 'UPDATE_PRESENCE_ROSTER_CONTACT';
20 | export const UPDATE_STATUS_ROSTER_CONTACT = 'UPDATE_STATUS_ROSTER_CONTACT';
21 | export const ADD_TO_ROSTER_LIST = 'ADD_TO_ROSTER_LIST';
22 | export const UPDATE_IS_LOADING_ROSTER = 'UPDATE_IS_LOADING_ROSTER';
23 | 
24 | // Profile Image
25 | export const UPDATE_PROFILE_IMAGE_LIST = 'UPDATE_PROFILE_IMAGE_LIST';
26 | export const UPDATE_PROFILE_IMAGE_BIN = 'UPDATE_PROFILE_IMAGE_BIN';
27 | export const UPDATE_PROFILE_IMAGE_HASH = 'UPDATE_PROFILE_IMAGE_HASH';
28 | export const ADD_PROFILE_IMAGE_TO_LIST = 'ADD_PROFILE_IMAGE_TO_LIST';
29 | export const REMOVE_PROFILE_IMAGE_FROM_LIST = 'REMOVE_PROFILE_IMAGE_FROM_LIST';
30 | 


--------------------------------------------------------------------------------
/components/country-config/country-config.js:
--------------------------------------------------------------------------------
 1 | import ProfileConfigService from '@/services/profile-config-service';
 2 | import ObjectUtils from '@/utils/object-utils';
 3 | 
 4 | export default {
 5 |   name: 'CountryConfig',
 6 |   components: {},
 7 |   props: ['showCountryConfig'],
 8 |   data() {
 9 |     return {
10 |       chatConfigForm: ObjectUtils.cloneObject(
11 |         this.$store.state.chat.chatConfig
12 |       ),
13 |       countryConfig: 'en-us',
14 |       countryArray: ['en-us', 'pt-br', 'de-de']
15 |     };
16 |   },
17 |   computed: {
18 |     appConfig() {
19 |       return this.$store.state.app.appConfig;
20 |     }
21 |   },
22 |   mounted() {
23 |     if (this.chatConfigForm.countryConfig !== undefined) {
24 |       this.countryConfig = this.chatConfigForm.countryConfig;
25 |     } else {
26 |       this.countryConfig = this.appConfig.APP_LOCALE;
27 |     }
28 |   },
29 |   methods: {
30 |     handleClose() {
31 |       this.$emit('update:showCountryConfig', false);
32 |     },
33 |     clickCountry(country) {
34 |       this.countryConfig = country;
35 |     },
36 |     saveCountryConfig() {
37 |       const ctx = this;
38 |       this.chatConfigForm.countryConfig = JSON.parse(
39 |         JSON.stringify(this.countryConfig)
40 |       );
41 | 
42 |       this.$store.dispatch('app/updateIsAppLoading', true);
43 |       setTimeout(function() {
44 |         ProfileConfigService.saveConfig(ctx.chatConfigForm);
45 |         ctx.$i18n.locale = JSON.parse(
46 |           JSON.stringify(ctx.chatConfigForm.countryConfig)
47 |         );
48 |         ctx.$store.dispatch('app/updateIsAppLoading', false);
49 |         ctx.handleClose();
50 |       }, 500);
51 |     }
52 |   }
53 | };
54 | 


--------------------------------------------------------------------------------
/services/profile-config-service.js:
--------------------------------------------------------------------------------
 1 | import ObjectUtils from '@/utils/object-utils';
 2 | import StringUtils from '@/utils/string-utils';
 3 | 
 4 | export default {
 5 |   constructor(store) {
 6 |     this.store = store;
 7 |     return this;
 8 |   },
 9 | 
10 |   saveConfig(chatConfig) {
11 |     const client = this.store.state.app.xmppClient;
12 |     const clientUsername = StringUtils.removeAfterInclChar(client.jid, '@');
13 | 
14 |     const chatConfigNew = ObjectUtils.cloneObject(chatConfig);
15 |     this.store.dispatch('chat/updateChatConfig', chatConfigNew);
16 |     localStorage.setItem(
17 |       btoa(`chat-config-${clientUsername}`),
18 |       btoa(JSON.stringify(chatConfig))
19 |     );
20 | 
21 |     this.store.dispatch('app/updateAppLocale', chatConfigNew.countryConfig);
22 |   },
23 | 
24 |   loadConfig() {
25 |     const client = this.store.state.app.xmppClient;
26 |     const clientUsername = StringUtils.removeAfterInclChar(client.jid, '@');
27 | 
28 |     let chatConfig = localStorage.getItem(
29 |       btoa(`chat-config-${clientUsername}`)
30 |     );
31 |     if (chatConfig !== null) chatConfig = JSON.parse(atob(chatConfig));
32 |     if (chatConfig) {
33 |       this.store.dispatch('chat/updateChatConfig', chatConfig);
34 |     } else {
35 |       chatConfig = {
36 |         showOffline: false,
37 |         soundNotification: false,
38 |         darkMode: false,
39 |         countryConfig: this.store.state.app.appLocale
40 |       };
41 |       this.store.dispatch('chat/updateChatConfig', chatConfig);
42 |       localStorage.setItem(
43 |         btoa(`chat-config-${clientUsername}`),
44 |         btoa(JSON.stringify(chatConfig))
45 |       );
46 |     }
47 |   }
48 | };
49 | 


--------------------------------------------------------------------------------
/strophe/strophe-mam-mod.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | import { Strophe, $iq } from 'strophe.js';
 3 | 
 4 | Strophe.addConnectionPlugin('mam', {
 5 |   _c: null,
 6 |   _p: ['with', 'start', 'end'],
 7 |   init: function(conn) {
 8 |     this._c = conn;
 9 |     Strophe.addNamespace('MAM', 'urn:xmpp:mam:1');
10 |   },
11 |   query: function(jid, options) {
12 |     var _p = this._p;
13 |     var attr = {
14 |       type: 'set',
15 |       to: jid
16 |     };
17 |     options = options || {};
18 |     var mamAttr = { xmlns: Strophe.NS.MAM };
19 |     if (!!options.queryid) {
20 |       mamAttr.queryid = options.queryid;
21 |       delete options.queryid;
22 |     }
23 |     var iq = $iq(attr)
24 |       .c('query', mamAttr)
25 |       .c('x', { xmlns: 'jabber:x:data', type: 'submit' });
26 | 
27 |     iq.c('field', { var: 'FORM_TYPE', type: 'hidden' })
28 |       .c('value')
29 |       .t(Strophe.NS.MAM)
30 |       .up()
31 |       .up();
32 |     var i;
33 |     for (i = 0; i < this._p.length; i++) {
34 |       var pn = _p[i];
35 |       var p = options[pn];
36 |       delete options[pn];
37 |       if (!!p) {
38 |         iq.c('field', { var: pn })
39 |           .c('value')
40 |           .t(p)
41 |           .up()
42 |           .up();
43 |       }
44 |     }
45 |     iq.up();
46 | 
47 |     var onMessage = options.onMessage;
48 |     delete options.onMessage;
49 |     var onComplete = options.onComplete;
50 |     delete options.onComplete;
51 | 
52 |     iq.cnode(new Strophe.RSM(options).toXML());
53 |     var _c = this._c;
54 |     var handler = _c.addHandler(onMessage, Strophe.NS.MAM, 'message', null);
55 |     return this._c.sendIQ(iq, function() {
56 |       _c.deleteHandler(handler);
57 |       onComplete.apply(this, arguments);
58 |     });
59 |   }
60 | });
61 | 


--------------------------------------------------------------------------------
/pages/chat/index.scss:
--------------------------------------------------------------------------------
 1 | // Media Query Card Contact
 2 | @media (min-height: 910px) {
 3 |   .card-contact-list {
 4 |     max-height: 680px;
 5 |     height: 680px;
 6 |     min-height: 680px;
 7 |     overflow: auto;
 8 |   }
 9 | }
10 | 
11 | @media (min-height: 760px) and (max-height: 910px) {
12 |   .card-contact-list {
13 |     max-height: 550px;
14 |     height: 550px;
15 |     min-height: 550px;
16 |     overflow: auto;
17 |   }
18 | }
19 | 
20 | @media (min-height: 660px) and (max-height: 760px) {
21 |   .card-contact-list {
22 |     max-height: 500px;
23 |     height: 500px;
24 |     min-height: 500px;
25 |     overflow: auto;
26 |   }
27 | }
28 | 
29 | @media (max-height: 660px) {
30 |   .card-contact-list {
31 |     max-height: 460px;
32 |     height: 460px;
33 |     min-height: 460px;
34 |     overflow: auto;
35 |   }
36 | }
37 | 
38 | // Media Query Card Chatbox
39 | @media (min-height: 910px) {
40 |   .card-chatbox {
41 |     margin-top: 10px;
42 |     margin-bottom: 10px;
43 |     max-height: 860px;
44 |     height: 860px;
45 |     min-height: 860px;
46 |     overflow: auto;
47 |   }
48 | }
49 | 
50 | @media (min-height: 760px) and (max-height: 910px) {
51 |   .card-chatbox {
52 |     margin-top: 10px;
53 |     margin-bottom: 10px;
54 |     max-height: 730px;
55 |     height: 730px;
56 |     min-height: 730px;
57 |     overflow: auto;
58 |   }
59 | }
60 | 
61 | @media (min-height: 660px) and (max-height: 760px) {
62 |   .card-chatbox {
63 |     margin-top: 3px;
64 |     margin-bottom: 3px;
65 |     max-height: 680px;
66 |     height: 680px;
67 |     min-height: 680px;
68 |     overflow: auto;
69 |   }
70 | }
71 | 
72 | @media (max-height: 660px) {
73 |   .card-chatbox {
74 |     max-height: 660px;
75 |     height: 660px;
76 |     min-height: 660px;
77 |     overflow: auto;
78 |   }
79 | }
80 | 


--------------------------------------------------------------------------------
/enums/presence-enum.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   getPresenceEnum() {
 3 |     const PresenceEnum = [
 4 |       { id: 'away', value: 'Away' },
 5 |       { id: 'chat', value: 'Online' },
 6 |       { id: 'dnd', value: 'Busy' },
 7 |       { id: 'xa', value: 'Away Extended' },
 8 |       { id: 'on', value: 'Online' }
 9 |     ];
10 |     return PresenceEnum;
11 |   },
12 |   getPresenceEnumUser() {
13 |     const PresenceEnum = [
14 |       { id: 'on', value: 'Online' },
15 |       { id: 'dnd', value: 'Busy' },
16 |       { id: 'away', value: 'Away' }
17 |     ];
18 |     return PresenceEnum;
19 |   },
20 |   getPresenceColor() {
21 |     const PresenceColorEnum = [
22 |       { id: 'away', value: 'text-away' },
23 |       { id: 'chat', value: 'text-teal-clean' },
24 |       { id: 'dnd', value: 'text-danger' },
25 |       { id: 'xa', value: 'text-away' },
26 |       { id: 'on', value: 'text-teal-clean' },
27 |       { id: 'off', value: 'text-light-gray' }
28 |     ];
29 |     return PresenceColorEnum;
30 |   },
31 |   getPresenceBorderColor() {
32 |     const PresenceColorEnum = [
33 |       { id: 'away', value: 'b-away' },
34 |       { id: 'chat', value: 'b-teal-clean' },
35 |       { id: 'dnd', value: 'b-danger' },
36 |       { id: 'xa', value: 'b-away' },
37 |       { id: 'on', value: 'b-teal-clean' },
38 |       { id: 'off', value: 'b-light-gray' }
39 |     ];
40 |     return PresenceColorEnum;
41 |   },
42 |   getPresenceById(idPresence) {
43 |     return this.getPresenceEnum().find(presence => presence.id === idPresence);
44 |   },
45 |   getIconColor(idPresence) {
46 |     return this.getPresenceColor().find(presence => presence.id === idPresence);
47 |   },
48 |   getBorderColor(idPresence) {
49 |     return this.getPresenceBorderColor().find(
50 |       presence => presence.id === idPresence
51 |     );
52 |   }
53 | };
54 | 


--------------------------------------------------------------------------------
/utils/date-utils.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   constructor(store) {
 3 |     this.store = store;
 4 |     return this;
 5 |   },
 6 | 
 7 |   isDateVal(dateBefore, dateAfter) {
 8 |     const yearBefore = dateBefore.substring(6, 10);
 9 |     const monthBefore = dateBefore.substring(3, 5);
10 |     const dayBefore = dateBefore.substring(0, 2);
11 |     const dDateBefore = new Date(yearBefore, monthBefore - 1, dayBefore);
12 |     dDateBefore.setDate(dDateBefore.getDate() + 1);
13 | 
14 |     const yearAfter = dateAfter.substring(6, 10);
15 |     const monthAfter = dateAfter.substring(3, 5);
16 |     const dayAfter = dateAfter.substring(0, 2);
17 |     const dDateAfter = new Date(yearAfter, monthAfter - 1, dayAfter);
18 | 
19 |     const todayDate = new Date();
20 |     const yesterdayDate = new Date();
21 |     yesterdayDate.setDate(yesterdayDate.getDate() - 1);
22 | 
23 |     if (
24 |       dDateBefore.toDateString() === dDateAfter.toDateString() &&
25 |       todayDate.toDateString() === dDateAfter.toDateString()
26 |     ) {
27 |       return 'Hoje';
28 |     } else if (
29 |       dDateBefore < dDateAfter &&
30 |       yesterdayDate.toDateString() === dDateAfter.toDateString()
31 |     ) {
32 |       return 'Ontem';
33 |     } else if (dDateBefore.toDateString() === dDateAfter.toDateString()) {
34 |       return 'Dia ' + dateAfter.substring(0, 10);
35 |     }
36 |     return null;
37 |   },
38 | 
39 |   isDateMinutesOlder(minutes, date) {
40 |     const minutesOlder = minutes * 60 * 1000;
41 |     if (Math.abs(date - new Date()) > minutesOlder) {
42 |       return true;
43 |     }
44 |     return false;
45 |   },
46 | 
47 |   isDateLastNotificationMinutesOlder(minutes) {
48 |     return this.isDateMinutesOlder(
49 |       minutes,
50 |       this.store.state.chat.lastNotification
51 |     );
52 |   },
53 | 
54 |   isDateLastMessageSentMinutesOlder(minutes) {
55 |     return this.isDateMinutesOlder(
56 |       minutes,
57 |       this.store.state.chat.lastMessageSentStamp
58 |     );
59 |   }
60 | };
61 | 


--------------------------------------------------------------------------------
/utils/string-utils.js:
--------------------------------------------------------------------------------
 1 | import MessageParser from '@/services/message-parser';
 2 | 
 3 | export default {
 4 |   isStringLengthValid(string, minLength) {
 5 |     if (string.trim().length === 0) {
 6 |       return false;
 7 |     } else if (string.length < minLength) {
 8 |       return false;
 9 |     }
10 |     return true;
11 |   },
12 |   isStringTrimLengthValid(string, minLength) {
13 |     if (string.toString().trim().length < minLength) {
14 |       return false;
15 |     }
16 |     return true;
17 |   },
18 |   capitalizeString(string) {
19 |     return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
20 |   },
21 |   removeAfterInclChar(string, char) {
22 |     const cutIndex = string.indexOf(char);
23 |     string = string.substring(0, cutIndex !== -1 ? cutIndex : string.length);
24 |     return string;
25 |   },
26 |   truncateOnWord(str, limit) {
27 |     str = MessageParser.removeHtmlTags(str);
28 | 
29 |     if (str.length < limit) {
30 |       return str;
31 |     }
32 | 
33 |     const trimmable =
34 |       '\u0009\u000A\u000B\u000C\u000D\u0020\u00A0\u1680\u180E' +
35 |       '\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200A\u202F\u205F\u2028\u2029\u3000\uFEFF';
36 |     const reg = new RegExp('(?=[' + trimmable + '])');
37 |     const words = str.split(reg);
38 |     let count = 0;
39 | 
40 |     let truncatedWord =
41 |       words
42 |         .filter(function(word) {
43 |           count += word.length;
44 |           return count <= limit;
45 |         })
46 |         .join('') + '...';
47 | 
48 |     if (truncatedWord === '...') {
49 |       truncatedWord = str.substring(0, limit) + '...';
50 |     }
51 |     return truncatedWord;
52 |   },
53 |   randomIdGenerator() {
54 |     const length = 32;
55 |     const chars =
56 |       '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
57 |     let result = '';
58 |     for (let i = length; i > 0; --i)
59 |       result += chars[Math.floor(Math.random() * chars.length)];
60 |     return result;
61 |   }
62 | };
63 | 


--------------------------------------------------------------------------------
/components/loading-app/loading-app.scss:
--------------------------------------------------------------------------------
 1 | .loading-app {
 2 |   height: 100vh;
 3 |   width: 100vw;
 4 | }
 5 | 
 6 | .center-img {
 7 |   position: absolute;
 8 |   top: 50%;
 9 |   left: 50%;
10 |   width: 250px;
11 |   height: 250px;
12 |   margin-top: -135px;
13 |   margin-left: -125px;
14 | 
15 |   animation: balance 8s ease-in-out infinite alternate;
16 |   will-change: transform;
17 |   transform-origin: 0% 100%;
18 | }
19 | 
20 | @keyframes balance {
21 |   0% {
22 |     transform: rotate3d(0, 0, 1, 8deg);
23 |   }
24 |   10% {
25 |     transform: rotate3d(0, 0, 1, -8deg);
26 |   }
27 |   20% {
28 |     transform: rotate3d(0, 0, 1, 8deg);
29 |   }
30 |   30% {
31 |     transform: rotate3d(0, 0, 1, -8deg);
32 |   }
33 |   40% {
34 |     transform: rotate3d(0, 0, 1, 8deg);
35 |   }
36 |   50% {
37 |     transform: rotate3d(0, 0, 1, -8deg);
38 |   }
39 |   60% {
40 |     transform: rotate3d(0, 0, 1, 8deg);
41 |   }
42 |   70% {
43 |     transform: rotate3d(0, 0, 1, -8deg);
44 |   }
45 |   80% {
46 |     transform: rotate3d(0, 0, 1, 8deg);
47 |   }
48 |   90% {
49 |     transform: rotate3d(0, 0, 1, -8deg);
50 |   }
51 |   100% {
52 |     transform: rotate3d(0, 0, 1, 8deg);
53 |   }
54 | }
55 | 
56 | .lds-ring {
57 |   position: absolute;
58 |   top: 50%;
59 |   left: 50%;
60 |   margin-top: -210px;
61 |   margin-left: -200px;
62 | }
63 | 
64 | .lds-ring div {
65 |   box-sizing: border-box;
66 |   display: block;
67 |   position: absolute;
68 |   width: 380px;
69 |   height: 380px;
70 |   margin: 6px;
71 |   border: 6px solid #00b3b3;
72 |   border-radius: 50%;
73 |   animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
74 |   border-color: #00b3b3 transparent transparent transparent;
75 | }
76 | 
77 | .lds-ring div:nth-child(1) {
78 |   animation-delay: -0.45s;
79 | }
80 | 
81 | .lds-ring div:nth-child(2) {
82 |   animation-delay: -0.3s;
83 | }
84 | 
85 | .lds-ring div:nth-child(3) {
86 |   animation-delay: -0.15s;
87 | }
88 | 
89 | @keyframes lds-ring {
90 |   0% {
91 |     transform: rotate(0deg);
92 |   }
93 |   100% {
94 |     transform: rotate(360deg);
95 |   }
96 | }
97 | 


--------------------------------------------------------------------------------
/services/favicon-service.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   constructor(store) {
 3 |     this.store = store;
 4 |     return this;
 5 |   },
 6 | 
 7 |   updateFavicon() {
 8 |     const numUnreadConversation = this.store.state.chat.numUnreadConversation;
 9 |     const faviconObj = this.getFaviconByType(numUnreadConversation);
10 |     const faviconOldLink = document.getElementById('favicon');
11 |     const newFaviconLink = document.createElement('link');
12 | 
13 |     if (faviconOldLink) {
14 |       faviconOldLink.id = 'favicon';
15 |       faviconOldLink.rel = 'icon';
16 |       faviconOldLink.type = 'image/png';
17 |       faviconOldLink.href = faviconObj.path;
18 |     } else {
19 |       newFaviconLink.id = 'favicon';
20 |       newFaviconLink.rel = 'icon';
21 |       newFaviconLink.type = 'image/png';
22 |       newFaviconLink.href = faviconObj.path;
23 |       document.getElementsByTagName('head')[0].appendChild(newFaviconLink);
24 |     }
25 |   },
26 | 
27 |   faviconArray() {
28 |     return [
29 |       { id: 0, path: `${process.env.baseUrl}/favicon/favicon-normal.png` },
30 |       { id: 1, path: `${process.env.baseUrl}/favicon/favicon-1.png` },
31 |       { id: 2, path: `${process.env.baseUrl}/favicon/favicon-2.png` },
32 |       { id: 3, path: `${process.env.baseUrl}/favicon/favicon-3.png` },
33 |       { id: 4, path: `${process.env.baseUrl}/favicon/favicon-4.png` },
34 |       { id: 5, path: `${process.env.baseUrl}/favicon/favicon-5.png` },
35 |       { id: 6, path: `${process.env.baseUrl}/favicon/favicon-6.png` },
36 |       { id: 7, path: `${process.env.baseUrl}/favicon/favicon-7.png` },
37 |       { id: 8, path: `${process.env.baseUrl}/favicon/favicon-8.png` },
38 |       { id: 9, path: `${process.env.baseUrl}/favicon/favicon-9.png` },
39 |       { id: 10, path: `${process.env.baseUrl}/favicon/favicon-9-plus.png` },
40 |       { id: 11, path: `${process.env.baseUrl}/favicon/favicon-bell.png` }
41 |     ];
42 |   },
43 | 
44 |   getFaviconByType(idFavicon) {
45 |     if (idFavicon > 0) {
46 |       return this.faviconArray()[11];
47 |     }
48 |     return this.faviconArray()[0];
49 |   }
50 | };
51 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "opa-ssr-nuxt",
 3 |   "version": "0.7.0",
 4 |   "description": "Opa XMPP Chat Client in SSR",
 5 |   "author": "Kevin Aguiar",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
 9 |     "dev:ctx": "cross-env NODE_ENV=development BASE_URL='/opa-demo' nodemon server/index.js --watch server",
10 |     "build": "nuxt build",
11 |     "build:ctx": "cross-env BASE_URL='/opa-demo' nuxt build",
12 |     "build:a": "nuxt build -a",
13 |     "start": "cross-env NODE_ENV=production node server/index.js",
14 |     "start:ctx": "cross-env NODE_ENV=production BASE_URL='/opa-demo' node server/index.js",
15 |     "build:start:ctx": "cross-env BASE_URL='/opa-demo' nuxt build && cross-env NODE_ENV=production BASE_URL='/opa-demo' node server/index.js",
16 |     "generate": "nuxt generate",
17 |     "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
18 |     "precommit": "npm run lint"
19 |   },
20 |   "dependencies": {
21 |     "@nuxtjs/axios": "^5.5.4",
22 |     "cool-emoji-picker": "^3.1.0",
23 |     "cross-env": "^5.2.0",
24 |     "element-ui": "^2.9.1",
25 |     "express": "^4.17.1",
26 |     "lodash.includes": "^4.3.0",
27 |     "nuxt": "^2.8.1",
28 |     "push.js": "^1.0.9",
29 |     "remove-accents": "^0.4.2",
30 |     "spacing-help": "0.0.4",
31 |     "strophe.js": "^1.3.3",
32 |     "strophejs-plugin-rsm": "0.0.2",
33 |     "twemoji": "^12.0.4",
34 |     "vue-i18n": "^8.11.2",
35 |     "vue-intersect": "^1.1.3"
36 |   },
37 |   "devDependencies": {
38 |     "@fortawesome/fontawesome-svg-core": "^1.2.19",
39 |     "@fortawesome/free-solid-svg-icons": "^5.9.0",
40 |     "@fortawesome/vue-fontawesome": "^0.1.6",
41 |     "babel-eslint": "^10.0.1",
42 |     "babel-plugin-component": "^1.1.1",
43 |     "eslint": "^5.16.0",
44 |     "eslint-loader": "^2.1.2",
45 |     "eslint-plugin-vue": "^5.2.2",
46 |     "node-sass": "^4.12.0",
47 |     "nodemon": "^1.19.1",
48 |     "sass-loader": "^7.1.0",
49 |     "eslint-config-prettier": "^5.0.0",
50 |     "eslint-plugin-prettier": "^3.1.0",
51 |     "prettier": "^1.18.2"
52 |   }
53 | }
54 | 


--------------------------------------------------------------------------------
/plugins/global-mixins.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import XmppService from '@/services/xmpp-service';
 3 | import PresenceEnum from '@/enums/presence-enum';
 4 | import MessageParser from '@/services/message-parser';
 5 | import ArrayUtils from '@/utils/array-utils';
 6 | 
 7 | export default ({ store }) => {
 8 |   Vue.prototype.dispatchHappyEmoji = () => {
 9 |     store.dispatch('chat/updateChatboxEmoji', 'happy');
10 |   };
11 |   Vue.prototype.dispatchThinkingEmoji = () => {
12 |     store.dispatch('chat/updateChatboxEmoji', 'thinking');
13 |   };
14 |   Vue.prototype.dispatchPensiveEmoji = () => {
15 |     store.dispatch('chat/updateChatboxEmoji', 'pensive');
16 |   };
17 |   Vue.prototype.dispatchConfusedEmoji = () => {
18 |     store.dispatch('chat/updateChatboxEmoji', 'confused');
19 |   };
20 |   Vue.prototype.changePresenceUserAction = () => {
21 |     store.dispatch('chat/updateLastMessageSentStamp', new Date());
22 |     if (store.state.chat.isPresenceAway) {
23 |       XmppService.constructor(store).sendChangePresenceSignal(
24 |         store.state.chat.lastPresence
25 |       );
26 |       store.dispatch(
27 |         'app/updateAuthUserPresence',
28 |         PresenceEnum.getPresenceById(store.state.chat.lastPresence)
29 |       );
30 |       store.dispatch('chat/updateIsPresenceAway', false);
31 |     }
32 |   };
33 |   Vue.prototype.saveChatboxState = () => {
34 |     const coolTextarea = document.getElementById('cool-textarea');
35 |     if (coolTextarea) {
36 |       let content = coolTextarea.innerHTML;
37 |       content = MessageParser.replaceEmojiWithAltAttribute(content);
38 |       content = MessageParser.unescapeHtml(content);
39 | 
40 |       store.dispatch('chat/setChatboxStateConversation', {
41 |         conversation: store.state.chat.activeConversation,
42 |         chatboxState: content
43 |       });
44 |     }
45 |   };
46 |   Vue.prototype.scrollMessageBoxToBottom = () => {
47 |     setTimeout(function() {
48 |       const messageBox = document.getElementById('message-box');
49 |       if (messageBox !== undefined) {
50 |         messageBox.scrollTop =
51 |           messageBox.scrollHeight !== null ? messageBox.scrollHeight : 0;
52 |       }
53 |     });
54 |   };
55 | };
56 | 


--------------------------------------------------------------------------------
/store/chat/mutation-types.js:
--------------------------------------------------------------------------------
 1 | // Chatbox Global States
 2 | export const UPDATE_CHATBOX_EMOJI = 'UPDATE_CHATBOX_EMOJI';
 3 | export const UPDATE_LAST_NOTIFICATION = 'UPDATE_LAST_NOTIFICATION';
 4 | export const UPDATE_CHAT_CONFIG = 'UPDATE_CHAT_CONFIG';
 5 | export const UPDATE_NUM_UNREAD_CONVERSATION = 'UPDATE_NUM_UNREAD_CONVERSATION';
 6 | export const UPDATE_LAST_MESSAGE_SENT_STAMP = 'UPDATE_LAST_MESSAGE_SENT_STAMP';
 7 | export const UPDATE_IS_PRESENCE_AWAY = 'UPDATE_IS_PRESENCE_AWAY';
 8 | export const UPDATE_LAST_PRESENCE = 'UPDATE_LAST_PRESENCE';
 9 | 
10 | // Conversation List
11 | export const ADD_CONVERSATION_TO_LIST = 'ADD_CONVERSATION_TO_LIST';
12 | export const UPDATE_CONVERSATION_LIST = 'UPDATE_CONVERSATION_LIST';
13 | export const REMOVE_CONVERSATION_FROM_LIST = 'REMOVE_CONVERSATION_FROM_LIST';
14 | export const REORDER_CONVERSATIONS_BY_CONVERSATION =
15 |   'REORDER_CONVERSATIONS_BY_CONVERSATION';
16 | export const ADD_MESSAGE_TO_DELAYED_LIST = 'ADD_MESSAGE_TO_DELAYED_LIST';
17 | export const UPDATE_DELAY_INCOMING_MESSAGES = 'UPDATE_DELAY_INCOMING_MESSAGES';
18 | 
19 | // Conversation
20 | export const ADD_MESSAGE_TO_CONVERSATION = 'ADD_MESSAGE_TO_CONVERSATION';
21 | export const CLEAR_UNREAD_COUNTER_CONVERSATION =
22 |   'CLEAR_UNREAD_COUNTER_CONVERSATION';
23 | export const PLUS_UNREAD_COUNTER_CONVERSATION =
24 |   'PLUS_UNREAD_COUNTER_CONVERSATION';
25 | export const SET_CHATBOX_STATE_CONVERSATION = 'SET_CHATBOX_STATE_CONVERSATION';
26 | export const UPDATE_ACTIVE_CONVERSATION = 'UPDATE_ACTIVE_CONVERSATION';
27 | export const UPDATE_ACTIVE_CONVERSATION_IS_TYPING =
28 |   'UPDATE_ACTIVE_CONVERSATION_IS_TYPING';
29 | 
30 | // Old Conversation
31 | export const UPDATE_OLD_CONVERSATION = 'UPDATE_OLD_CONVERSATION';
32 | export const UPDATE_OLD_CONVERSATION_LAST_STAMP =
33 |   'UPDATE_OLD_CONVERSATION_LAST_STAMP';
34 | export const UPDATE_OLD_CONVERSATION_NO_RESULT =
35 |   'UPDATE_OLD_CONVERSATION_NO_RESULT';
36 | export const UPDATE_OLD_CONVERSATION_LAST_RETRIEVED_ID =
37 |   'UPDATE_OLD_CONVERSATION_LAST_RETRIEVED_ID';
38 | export const UPDATE_OLD_CONVERSATION_LAST_MESSAGE_ID =
39 |   'UPDATE_OLD_CONVERSATION_LAST_MESSAGE_ID';
40 | 
41 | export const UPDATE_LOCK_AUTO_LOAD_OLD_MESSAGES =
42 |   'UPDATE_LOCK_AUTO_LOAD_OLD_MESSAGES';
43 | export const CLEAR_OLD_CONVERSATION = 'CLEAR_OLD_CONVERSATION';
44 | 
45 | // Chat Store
46 | export const RESET_CHAT_STORE = 'RESET_CHAT_STORE';
47 | 


--------------------------------------------------------------------------------
/pages/index.html:
--------------------------------------------------------------------------------
 1 | <div class="login">
 2 |     <el-row class="mb2 mt7">
 3 |         <el-col :offset="8" :span="8">
 4 |             <el-alert v-if="isLoginExpired" class="mt1 mb2" 
 5 |                 :title="$t('login.isLoginExpired')" 
 6 |                 type="error" center show-icon>
 7 |             </el-alert>
 8 |             <el-alert v-if="isCredentialsInvalid" class="mt1 mb2" 
 9 |                 :title="$t('login.isCredentialsInvalid')"
10 |                 type="error" center show-icon>
11 |             </el-alert>
12 |             <el-alert v-if="isLogout" class="mt1 mb2" 
13 |                 :title="$t('login.isLogout')"
14 |                 type="success" center show-icon>
15 |             </el-alert>
16 |         </el-col>
17 |         <el-col :offset="8" :span="8">
18 |             <el-card class="b-rounded pb2">
19 |                 <el-row class="text-center mt2"><img src="@/assets/img/chat-logo.png" width="180" height="180"/></el-row>
20 |                 <el-form :model="loginForm" status-icon label-position="left" :rules="formRules" ref="loginForm" 
21 |                     @submit.native.prevent="loginFormSubmit()">
22 |                     <el-row>
23 |                         <el-col :offset="3" :span="18">
24 |                             <el-form-item prop="username">
25 |                                 <el-input :placeholder="$t('login.usernamePlaceholder')" v-model="loginForm.username" auto-complete="on" name="username">
26 |                                     <i slot="suffix" class="el-input__icon"><font-awesome-icon icon="user"/></i>
27 |                                 </el-input>
28 |                             </el-form-item>
29 |                         </el-col>
30 |                         <el-col :offset="3" :span="18">
31 |                             <el-form-item prop="password">
32 |                                 <el-input :placeholder="$t('login.passwordPlaceholder')" type="password" v-model="loginForm.password">
33 |                                     <i slot="prefix" class="el-input__icon"><font-awesome-icon icon="lock"/></i>
34 |                                 </el-input>
35 |                             </el-form-item>
36 |                         </el-col>
37 |                         <el-col :span="24" class="text-center">
38 |                             <el-button native-type="submit" type="primary" :loading="isLogging">
39 |                                 {{ $t('login.loginButton') }} <font-awesome-icon icon="arrow-circle-right"/>
40 |                             </el-button>
41 |                         </el-col>
42 |                     </el-row>
43 |                 </el-form>
44 |             </el-card>
45 |         </el-col>
46 |     </el-row>
47 |     <loading-app></loading-app>
48 | </div>
49 | 


--------------------------------------------------------------------------------
/components/chat-config/chat-config.html:
--------------------------------------------------------------------------------
 1 | <el-card :class="{ 'dark-theme': chatConfig.darkMode === true}" class="chat-config pb1">
 2 |     <el-row class="text-bold text-center mt2">
 3 |         <el-popover
 4 |           placement="bottom"
 5 |           trigger="hover"
 6 |           :content="selectCountryMessage">
 7 |           <el-button slot="reference" type="primary" circle @click="openCountryDialog()" class="margin-config-btn">
 8 |               <font-awesome-icon icon="language" class="icon-medium"/>
 9 |           </el-button>
10 |         </el-popover>
11 |         <country-config :showCountryConfig.sync="showCountryConfig" 
12 |           v-if="showCountryConfig"></country-config>
13 | 
14 |         <el-popover
15 |           placement="bottom"
16 |           trigger="hover"
17 |           :content="$t('config.desktopNotifications')">
18 |           <el-button slot="reference" type="primary" circle @click="requestNotificationPermission()" class="margin-config-btn">
19 |               <font-awesome-icon icon="comment-alt" class="icon-medium"/>
20 |           </el-button>
21 |         </el-popover>
22 | 
23 |         <el-popover
24 |           placement="bottom"
25 |           trigger="hover"
26 |           :content="soundNotificationMsg">
27 |           <el-button slot="reference" type="primary" circle @click="changeSoundNotification()" class="margin-config-btn">
28 |               <font-awesome-icon icon="bell" class="icon-medium" v-if="chatConfig.soundNotification"/>
29 |               <font-awesome-icon icon="bell-slash" class="icon-medium" 
30 |                 v-if="chatConfig.soundNotification === undefined || chatConfig.soundNotification === false"/>
31 |           </el-button>
32 |         </el-popover>
33 | 
34 |         <el-popover
35 |           placement="bottom"
36 |           trigger="hover"
37 |           :content="showOfflineMsg">
38 |           <el-button slot="reference" type="primary" circle @click="changeShowOffline()" class="margin-config-btn">
39 |               <font-awesome-icon icon="user" class="icon-medium" v-if="chatConfig.showOffline"/>
40 |               <font-awesome-icon icon="user-slash" class="icon-medium" 
41 |                 v-if="chatConfig.showOffline === undefined || chatConfig.showOffline === false"/>
42 |           </el-button>
43 |         </el-popover>
44 | 
45 |         <el-popover
46 |           placement="bottom"
47 |           trigger="hover"
48 |           :content="darkModeMsg">
49 |           <el-button slot="reference" type="primary" circle @click="changeDarkTheme()" class="margin-config-btn">
50 |               <font-awesome-icon icon="moon" class="icon-medium" v-if="chatConfig.darkMode"/>
51 |               <font-awesome-icon icon="sun" class="icon-medium" 
52 |                 v-if="chatConfig.darkMode === undefined || chatConfig.darkMode === false"/>
53 |           </el-button>
54 |         </el-popover>
55 | 
56 |     </el-row>
57 |   
58 | </el-card>
59 | 


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
  1 | const pkg = require('./package');
  2 | 
  3 | let BASE_URL = process.env.BASE_URL;
  4 | if (
  5 |   BASE_URL !== undefined &&
  6 |   BASE_URL.length === 1 &&
  7 |   BASE_URL.substr(BASE_URL.length - 1) === '/'
  8 | ) {
  9 |   BASE_URL = '';
 10 | } else if (
 11 |   BASE_URL !== undefined &&
 12 |   BASE_URL.length > 0 &&
 13 |   BASE_URL.substr(BASE_URL.length - 1) !== '/'
 14 | ) {
 15 |   BASE_URL += '/';
 16 | }
 17 | 
 18 | // TODO: Compatibity and performance test in browsers
 19 | module.exports = {
 20 |   mode: 'universal',
 21 |   env: {
 22 |     baseUrl: BASE_URL !== undefined ? BASE_URL : '',
 23 |     isDev: process.env.NODE_ENV !== 'production'
 24 |   },
 25 |   router: {
 26 |     base: BASE_URL !== undefined ? BASE_URL : ''
 27 |   },
 28 |   buildDir: 'bundle',
 29 |   dev: process.env.NODE_ENV !== 'production',
 30 |   head: {
 31 |     title: 'Opa',
 32 |     meta: [
 33 |       { charset: 'utf-8' },
 34 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
 35 |       { hid: 'description', name: 'description', content: pkg.description }
 36 |     ],
 37 |     script: [{ src: 'https://polyfill.io/v3/polyfill.min.js?flags=gated' }],
 38 |     link: [
 39 |       {
 40 |         rel: 'icon',
 41 |         type: 'image/x-icon',
 42 |         href: `${
 43 |           BASE_URL !== undefined ? BASE_URL : ''
 44 |         }/favicon/favicon-normal.png`,
 45 |         id: 'favicon'
 46 |       },
 47 |       {
 48 |         rel: 'stylesheet',
 49 |         href: 'https://fonts.googleapis.com/css?family=Roboto'
 50 |       }
 51 |     ]
 52 |   },
 53 | 
 54 |   loading: { color: '#fff' },
 55 | 
 56 |   css: [
 57 |     { src: '~global-styles/main.scss', lang: 'scss' },
 58 |     '@fortawesome/fontawesome-svg-core/styles.css'
 59 |   ],
 60 | 
 61 |   plugins: [
 62 |     '@/plugins/element-ui',
 63 |     '@/plugins/vue-fontawesome',
 64 |     '@/plugins/i18n',
 65 |     { src: '@/plugins/vue-intersect', ssr: false },
 66 |     { src: '@/plugins/global-mixins', ssr: false },
 67 |     { src: '@/plugins/filters', ssr: false }
 68 |   ],
 69 | 
 70 |   modules: ['@nuxtjs/axios'],
 71 |   axios: {},
 72 | 
 73 |   build: {
 74 |     transpile: ['cool-emoji-picker', /^element-ui/],
 75 |     extend(config, ctx) {
 76 |       // Run ESLint on save
 77 |       if (ctx.isDev && ctx.isClient) {
 78 |         config.module.rules.push({
 79 |           enforce: 'pre',
 80 |           test: /\.(js|vue)$/,
 81 |           loader: 'eslint-loader',
 82 |           exclude: /(node_modules)/,
 83 |           options: {
 84 |             fix: true
 85 |           }
 86 |         });
 87 |         config.module.rules.push({
 88 |           test: /\.mp3$/,
 89 |           include: '/(assets/audio)/',
 90 |           loader: 'file-loader'
 91 |         });
 92 |       }
 93 | 
 94 |       if (!ctx.isDev) {
 95 |         config.output.publicPath = './_nuxt/';
 96 |       }
 97 |     }
 98 |   }
 99 | };
100 | 


--------------------------------------------------------------------------------
/static/locales/en-us.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "login": {
 3 |     "usernamePlaceholder": "Username",
 4 |     "passwordPlaceholder": "Password",
 5 |     "loginButton": "Sign In",
 6 |     "isLoginExpired": "Your session has expired, please sign in again.",
 7 |     "isCredentialsInvalid": "The username and / or password is incorrect.",
 8 |     "isLogout": "Session ended successfully!"
 9 |   },
10 |   "chat": {
11 |     "isDisconnectedMsg": "You have been disconnected from the chat because of connection problems.",
12 |     "noOpenConversation": "There is no open chat.",
13 |     "tipNewConversation": "You can open a new chat by clicking the",
14 |     "noConversation": "You do not have conversations yet",
15 |     "openNewConversation": "Open New Chat",
16 |     "back": "Go Back",
17 |     "adminMessageTitle": "Admin Message"
18 |   },
19 |   "contactDetails": {
20 |     "modalTitle": "Contact Details",
21 |     "nameLabel": "Name",
22 |     "groupLabel": "Group"
23 |   },
24 |   "chatbox": {
25 |     "messageRequired": "You must enter a message.",
26 |     "chatboxPlaceholder": "Enter your message",
27 |     "typingLabel": "Typing...",
28 |     "loadOldMessages": "Load old messages...",
29 |     "loadingOldMessages": "Loading old messages...",
30 |     "oldMessagesLimit": "You have reached the old message search limit",
31 |     "oldMessagesLabel": "Old Messages",
32 |     "loadingMessages": "Loading messages..."
33 |   },
34 |   "contacts": {
35 |     "searchPlaceholder": "Search Contact",
36 |     "min3Characters": "Please enter at least 3 characters.",
37 |     "noContactFound": "No contacts found",
38 |     "loadingContacts": "Loading contacts...",
39 |     "noAvailableContacts": "You do not have any contacts.",
40 |     "groupOthers": "Others"
41 |   },
42 |   "profile": {
43 |     "changePhoto": "Change",
44 |     "onlinePresence": "Online",
45 |     "busyPresence": "Busy",
46 |     "awayPresence": "Away",
47 |     "offlinePresence": "Offline",
48 |     "deleteAvatarTitle": "Are you sure?",
49 |     "deleteAvatarBody": "When you confirm the deletion of the photo you will be using the default photo.",
50 |     "cancelDeleteAvatar": "Cancel",
51 |     "avatarExtensionInvalid": "Image must be of .PNG or .JPG extension!",
52 |     "avatarSizeInvalid": "Image must be less than 2MBs!",
53 |     "reLoginButton": "Sign In Again",
54 |     "reLoginTitle": "Are you sure?",
55 |     "reLoginBody": "When you log in again you will lose access to active conversations!",
56 |     "cancelReLogin": "Cancel"
57 |   },
58 |   "config": {
59 |     "desktopNotifications": "Desktop Notifications",
60 |     "enableSoundNotification": "Enable Sound Notifications",
61 |     "disableSoundNotification": "Disable Sound Notifications",
62 |     "enableOfflineContacts": "Show Offline Contacts",
63 |     "disableOfflineContacts": "Hide Offline Contacts",
64 |     "enableDarkMode": "Enable Night Mode",
65 |     "disableDarkMode": "Disable Night Mode",
66 |     "selectCountry": "Select Country"
67 |   },
68 |   "dialogs": {
69 |     "save": "Save",
70 |     "cancel": "Cancel"
71 |   },
72 |   "date": {
73 |     "today": "Today",
74 |     "yesterday": "Yesterday"
75 |   },
76 |   "page404": {
77 |     "button": "Oops! Click here to return to the home page."
78 |   }
79 | }
80 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
  1 | import LoadingApp from '@/components/loading-app/loading-app.vue';
  2 | let XmppService,
  3 |   ConfigService = null;
  4 | 
  5 | export default {
  6 |   name: 'Login',
  7 |   components: {
  8 |     'loading-app': LoadingApp
  9 |   },
 10 |   data() {
 11 |     return {
 12 |       loginForm: {
 13 |         username: '',
 14 |         password: ''
 15 |       },
 16 |       formRules: {
 17 |         username: [
 18 |           {
 19 |             required: true,
 20 |             message: 'Este campo é obrigatório.',
 21 |             trigger: 'none'
 22 |           }
 23 |         ],
 24 |         password: [
 25 |           {
 26 |             required: true,
 27 |             message: 'Este campo é obrigatório.',
 28 |             trigger: 'none'
 29 |           }
 30 |         ]
 31 |       }
 32 |     };
 33 |   },
 34 |   computed: {
 35 |     isLoginExpired() {
 36 |       if (!this.$route.query.loginExpired === true) {
 37 |         return false;
 38 |       }
 39 |       return true;
 40 |     },
 41 |     isCredentialsInvalid() {
 42 |       if (!this.$route.query.invalidCredentials === true) {
 43 |         return false;
 44 |       }
 45 |       return true;
 46 |     },
 47 |     isLogout() {
 48 |       if (!this.$route.query.logout === true) {
 49 |         return false;
 50 |       }
 51 |       return true;
 52 |     },
 53 |     isLogging() {
 54 |       return this.$store.state.app.isLogging;
 55 |     }
 56 |   },
 57 |   beforeCreate() {
 58 |     if (process.browser) {
 59 |       XmppService = require('@/services/xmpp-service').default.constructor(
 60 |         this.$store,
 61 |         this.$i18n
 62 |       );
 63 |       ConfigService = require('@/services/config-service').default;
 64 | 
 65 |       const staticBase = this.$nuxt._router.options.base;
 66 |       ConfigService.getConfigFile(staticBase).then(appConfig => {
 67 |         this.$store.dispatch('app/updateAppConfig', appConfig);
 68 |         this.$store.dispatch(
 69 |           'app/updateShowUsersWithoutGroups',
 70 |           appConfig.SHOW_USERS_WITHOUT_GROUPS
 71 |         );
 72 | 
 73 |         if (
 74 |           typeof navigator.language === 'string' &&
 75 |           Object.keys(this.$i18n.messages).includes(
 76 |             navigator.language.toLowerCase()
 77 |           )
 78 |         ) {
 79 |           this.$i18n.locale = navigator.language.toLowerCase();
 80 |         } else {
 81 |           this.$i18n.locale = appConfig.APP_LOCALE;
 82 |         }
 83 | 
 84 |         this.$store.dispatch('app/updateIsAppLoading', false);
 85 |       });
 86 |     }
 87 |   },
 88 |   mounted() {
 89 |     this.$store.dispatch('chat/updateConversationList', []);
 90 |     this.$store.dispatch('chat/updateActiveConversation', null);
 91 |     this.$store.dispatch('app/updateRosterList', []);
 92 |     this.$store.dispatch('app/updateProfileImageList', []);
 93 |   },
 94 |   methods: {
 95 |     loginFormSubmit() {
 96 |       this.$refs.loginForm.validate(valid => {
 97 |         if (valid) {
 98 |           this.$refs.loginForm.clearValidate();
 99 |           this.$store.dispatch('app/updateIsLogging', true);
100 |           XmppService.loginXmpp(
101 |             this.loginForm.username,
102 |             this.loginForm.password
103 |           );
104 |         }
105 |       });
106 |     }
107 |   }
108 | };
109 | 


--------------------------------------------------------------------------------
/static/locales/pt-br.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "login": {
 3 |     "usernamePlaceholder": "Usuário",
 4 |     "passwordPlaceholder": "Senha",
 5 |     "loginButton": "Login",
 6 |     "isLoginExpired": "Sua sessão expirou, favor efetuar login novamente.",
 7 |     "isCredentialsInvalid": "O nome de usuário e/ou senha está incorreta.",
 8 |     "isLogout": "Sessão encerrada com sucesso!"
 9 |   },
10 |   "chat": {
11 |     "isDisconnectedMsg": "Você foi desconectado do chat por problemas de conexão.",
12 |     "noOpenConversation": "Não há nenhuma conversa aberta.",
13 |     "tipNewConversation": "Você pode abrir uma nova conversa clicando no botão",
14 |     "noConversation": "Você ainda não possui conversas.",
15 |     "openNewConversation": "Abrir Nova Conversa",
16 |     "back": "Voltar",
17 |     "adminMessageTitle": "Mensagem do Administrador"
18 |   },
19 |   "chatbox": {
20 |     "messageRequired": "Você precisa digitar uma mensagem.",
21 |     "chatboxPlaceholder": "Digite sua mensagem.",
22 |     "typingLabel": "Digitando...",
23 |     "loadOldMessages": "Carregar mensagens antigas...",
24 |     "loadingOldMessages": "Carregando mensagens antigas...",
25 |     "oldMessagesLimit": "Você atingiu o limite de pesquisa de mensagens antigas",
26 |     "oldMessagesLabel": "Mensagens Antigas",
27 |     "loadingMessages": "Carregando mensagens..."
28 |   },
29 |   "contacts": {
30 |     "searchPlaceholder": "Pesquisar Contato",
31 |     "min3Characters": "Digite no mínimo 3 caracteres.",
32 |     "noContactFound": "Nenhum contato encontrado.",
33 |     "loadingContacts": "Carregando contatos...",
34 |     "noAvailableContacts": "Você não possui contatos.",
35 |     "groupOthers": "Outros"
36 |   },
37 |   "contactDetails": {
38 |     "modalTitle": "Detalhes do Contato",
39 |     "nameLabel": "Nome",
40 |     "groupLabel": "Grupo"
41 |   },
42 |   "profile": {
43 |     "changePhoto": "Trocar",
44 |     "onlinePresence": "Online",
45 |     "busyPresence": "Ocupado",
46 |     "awayPresence": "Ausente",
47 |     "offlinePresence": "Offline",
48 |     "deleteAvatarTitle": "Tem certeza?",
49 |     "deleteAvatarBody": "Ao confirmar a exclusão da foto você passará a utilizar a foto padrão.",
50 |     "cancelDeleteAvatar": "Cancelar",
51 |     "avatarExtensionInvalid": "A imagem precisa ser da extensão .PNG ou .JPG!",
52 |     "avatarSizeInvalid": "A imagem precisa ser menor que 2MBs!",
53 |     "reLoginButton": "Efetuar Login Novamente",
54 |     "reLoginTitle": "Tem certeza?",
55 |     "reLoginBody": "Ao fazer o login novamente você perderá o acesso às conversas ativas!",
56 |     "cancelReLogin": "Cancelar"
57 |   },
58 |   "config": {
59 |     "desktopNotifications": "Notificações na Área de Trabalho",
60 |     "enableSoundNotification": "Ativar Notificações por Som",
61 |     "disableSoundNotification": "Desativar Notificações por Som",
62 |     "enableOfflineContacts": "Mostrar Contatos Offline",
63 |     "disableOfflineContacts": "Esconder Contatos Offline",
64 |     "enableDarkMode": "Ativar Modo Noturno",
65 |     "disableDarkMode": "Desativar Modo Noturno",
66 |     "selectCountry": "Selecione seu país"
67 |   },
68 |   "dialogs": {
69 |     "save": "Salvar",
70 |     "cancel": "Cancelar"
71 |   },
72 |   "date": {
73 |     "today": "Hoje",
74 |     "yesterday": "Ontem"
75 |   },
76 |   "page404": {
77 |     "button": "Oops! Clique aqui para voltar a página inicial."
78 |   }
79 | }
80 | 


--------------------------------------------------------------------------------
/store/app/mutations.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import * as types from './mutation-types';
 3 | 
 4 | const mutations = {
 5 |   // Global App States
 6 |   [types.UPDATE_IS_APP_LOADING](state, { isAppLoading }) {
 7 |     state.isAppLoading = isAppLoading;
 8 |   },
 9 |   [types.UPDATE_APP_LOCALE](state, { appLocale }) {
10 |     state.appLocale = appLocale;
11 |   },
12 |   [types.UPDATE_SHOW_USERS_WITHOUT_GROUPS](state, { showUsersWithoutGroups }) {
13 |     state.showUsersWithoutGroups = showUsersWithoutGroups;
14 |   },
15 |   [types.UPDATE_APP_CONFIG](state, { appConfig }) {
16 |     state.appConfig = appConfig;
17 |   },
18 |   [types.UPDATE_IS_LOGGING](state, { isLogging }) {
19 |     state.isLogging = isLogging;
20 |   },
21 |   [types.UPDATE_IS_DISCONNECTED](state, { isDisconnected }) {
22 |     state.isDisconnected = isDisconnected;
23 |   },
24 |   [types.UPDATE_XMPP_CLIENT](state, { xmppClient }) {
25 |     state.xmppClient = xmppClient;
26 |   },
27 |   [types.UPDATE_CHAT_TIMESTAMP](state, { chatTimestamp }) {
28 |     state.chatTimestamp = chatTimestamp;
29 |   },
30 | 
31 |   // Auth User
32 |   [types.UPDATE_AUTH_USER](state, { authUser }) {
33 |     state.authUser = authUser;
34 |   },
35 |   [types.UPDATE_AUTH_USER_PRESENCE](state, { presence }) {
36 |     state.authUser.presence = presence;
37 |   },
38 |   [types.UPDATE_AUTH_USER_IMAGE_BIN](state, { authUser, type, bin }) {
39 |     Vue.set(authUser, 'photoType', type);
40 |     Vue.set(authUser, 'photoBin', bin);
41 |   },
42 | 
43 |   // Roster List
44 |   [types.UPDATE_ROSTER_LIST](state, { rosterList }) {
45 |     state.rosterList = rosterList;
46 |   },
47 |   [types.UPDATE_ROSTER_OBJ](state, { oldRosterObj, newRosterObj }) {
48 |     Vue.set(oldRosterObj, 'username', newRosterObj.username);
49 |     Vue.set(oldRosterObj, 'name', newRosterObj.name);
50 |     Vue.set(oldRosterObj, 'status', newRosterObj.status);
51 |     Vue.set(oldRosterObj, 'group', newRosterObj.group);
52 |   },
53 |   [types.UPDATE_PRESENCE_ROSTER_CONTACT](state, { rosterObj, presence }) {
54 |     Vue.set(rosterObj, 'presence', presence);
55 |   },
56 |   [types.UPDATE_STATUS_ROSTER_CONTACT](state, { rosterObj, status }) {
57 |     Vue.set(rosterObj, 'status', status);
58 |   },
59 |   [types.ADD_TO_ROSTER_LIST](state, rosterObj) {
60 |     state.rosterList.push(rosterObj);
61 |   },
62 |   [types.UPDATE_IS_LOADING_ROSTER](state, bol) {
63 |     state.isLoadingRoster = bol;
64 |   },
65 | 
66 |   // Profile Image
67 |   [types.UPDATE_PROFILE_IMAGE_LIST](state, { profileImageList }) {
68 |     state.profileImageList = profileImageList;
69 |   },
70 |   [types.UPDATE_PROFILE_IMAGE_BIN](state, { profileImage, type, bin }) {
71 |     Vue.set(profileImage, 'type', type);
72 |     Vue.set(profileImage, 'bin', bin);
73 |   },
74 |   [types.UPDATE_PROFILE_IMAGE_HASH](state, { profileImage, hash }) {
75 |     Vue.set(profileImage, 'hash', hash);
76 |   },
77 |   [types.ADD_PROFILE_IMAGE_TO_LIST](state, { profileImage }) {
78 |     state.profileImageList.push(profileImage);
79 |   },
80 |   [types.REMOVE_PROFILE_IMAGE_FROM_LIST](state, { profileImage }) {
81 |     const objIndex = state.profileImageList.findIndex(
82 |       o => o.username === profileImage.username
83 |     );
84 | 
85 |     if (objIndex > -1) {
86 |       state.profileImageList = state.profileImageList.slice(objIndex, 1);
87 |     }
88 |   }
89 | };
90 | 
91 | export default mutations;
92 | 


--------------------------------------------------------------------------------
/components/conversations/conversations.html:
--------------------------------------------------------------------------------
 1 | <div class="conversations">
 2 |     <transition-group name="slide-bt">
 3 |         <el-row v-if="conversationList.length !== 0" v-for="(conversation, key) in conversationList" 
 4 |             :key="conversation.contact.username" 
 5 |             class="p1 by1 clickable max-h-64"
 6 |             :class="{ bl8: isConversationActive(conversation), 
 7 |                 'bg-gray': chatConfig.darkMode === false && isConversationActive(conversation), 
 8 |                 'bg-gray-hover': chatConfig.darkMode === false, 
 9 |                 'dark-bg': chatConfig.darkMode === true && isConversationActive(conversation),
10 |                 'dark-hover': chatConfig.darkMode === true,
11 |                 'dark-border': chatConfig.darkMode === true && !isConversationActive(conversation) }"
12 |             @click.native="onClickConversation(conversation)"
13 |             @mouseover.native="dispatchHappyEmoji"
14 |             @mouseleave.native="dispatchThinkingEmoji">
15 |             <el-col :span="4">
16 |                 <intersect @enter="getProfileAvatar(conversation.contact.username)">
17 |                     <div id="conversationAvatar">
18 |                         <img v-if="profileImageSrc(conversation.contact.username) !== null" class="b-full-circle img-fit b4 fade-in" 
19 |                         :src="profileImageSrc(conversation.contact.username)" width="48" height="48"
20 |                         :class="getPresenceBorderColor(conversation.contact.presence.id)"/>
21 |         
22 |                         <div class="user-icon-mini b-full-circle b4 clickable text-center v-align" 
23 |                             :class="getPresenceBorderColor(conversation.contact.presence.id)"
24 |                             v-if="profileImageSrc(conversation.contact.username) === null">
25 |                             <font-awesome-icon icon="user" class="ml2"/>
26 |                         </div>
27 |                     </div>
28 |                 </intersect>
29 |             </el-col>
30 |             <el-col :span="20" class="unselectable">
31 |                 <el-row class="ml2 my1">
32 |                     <span class="text-bold">{{ conversation.contact.name }}</span>
33 |                     <small class="float-right text-italic" v-if="getLastMessage(conversation).msg !== ''">
34 |                         {{ getLastMessage(conversation).stampDate | isDateToday(appLocale) }}
35 |                     </small>
36 |                 </el-row>
37 |                 <el-row class="ml2 v-align">
38 |                     <small class="mr1" v-if="isLastOwnMessage(conversation)"><font-awesome-icon icon="check"/></small>
39 |                     <small class="float-right p-fix bg-primary b-half-circle text-white text-bold mr1" 
40 |                         v-if="conversation.numUnreadMsgs !== 0">
41 |                         {{ conversation.numUnreadMsgs }}
42 |                     </small>
43 |                     <span class="truncate-last-message emoji-mini disable-anchors" v-html="getLastMessage(conversation).msg"></span>
44 |                 </el-row>
45 |             </el-col>
46 |         </el-row>
47 |     </transition-group>
48 |     <el-row v-if="conversationList.length === 0" class="p1 by1 text-center">
49 |         <p>{{ $t('chat.noConversation') }} <img src="svg-emoji/pensive-emoji.svg" width="20" height="20"/></p>
50 |     </el-row>
51 | </div>
52 | 


--------------------------------------------------------------------------------
/static/locales/de-de.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "login": {
 3 |     "usernamePlaceholder": "Nutzername",
 4 |     "passwordPlaceholder": "Passwort",
 5 |     "loginButton": "Anmelden",
 6 |     "isLoginExpired": "Deine Sitzung ist abgelaufen, bitte melde dich erneut an.",
 7 |     "isCredentialsInvalid": "Dein Nutzername / Passwort ist ungültig.",
 8 |     "isLogout": "Deine Sitzung wurde erfolgreich beendet!"
 9 |   },
10 |   "chat": {
11 |     "isDisconnectedMsg": "Du wurdest aufgrund eines Verbindungsfehlers abgemeldet.",
12 |     "noOpenConversation": "Zurzeit ist kein Chat geöffnet.",
13 |     "tipNewConversation": "Du kannst einen neuen Chat öffnem indem du hier klickst",
14 |     "noConversation": "Du hast bisher noch keine Konversationen",
15 |     "openNewConversation": "Neuen Chat öffnen",
16 |     "back": "Zurück",
17 |     "adminMessageTitle": "Admin Nachricht"
18 |   },
19 |   "contactDetails": {
20 |     "modalTitle": "Kontakt Details",
21 |     "nameLabel": "Name",
22 |     "groupLabel": "Gruppe"
23 |   },
24 |   "chatbox": {
25 |     "messageRequired": "Du musst eine Nachricht angeben.",
26 |     "chatboxPlaceholder": "Gebe deine Nachricht ein",
27 |     "typingLabel": "Tippt...",
28 |     "loadOldMessages": "Lade alte Nachrichten...",
29 |     "loadingOldMessages": "Alte Nachrichten werden geladen...",
30 |     "oldMessagesLimit": "Du hast das Limit an alten Nachrichten in der Suche erreicht",
31 |     "oldMessagesLabel": "Alte Nachrichten",
32 |     "loadingMessages": "Nachrichten werden geladen..."
33 |   },
34 |   "contacts": {
35 |     "searchPlaceholder": "Kontakte suchen",
36 |     "min3Characters": "Bitte gebe mindestens 3 Zeichen ein.",
37 |     "noContactFound": "Keine Kontakte gefunden",
38 |     "loadingContacts": "Kontakte werden geladen...",
39 |     "noAvailableContacts": "Sie haben keine Kontakte.",
40 |     "groupOthers": "Andere"
41 |   },
42 |   "profile": {
43 |     "changePhoto": "Bearbeiten",
44 |     "onlinePresence": "Online",
45 |     "busyPresence": "Beschäftigt",
46 |     "awayPresence": "Weg",
47 |     "offlinePresence": "Offline",
48 |     "deleteAvatarTitle": "Bist du sicher?",
49 |     "deleteAvatarBody": "Wenn du das Foto löschst wirst du das Standardfoto verwenden.",
50 |     "cancelDeleteAvatar": "Abbrechen",
51 |     "avatarExtensionInvalid": "Dateityp muss .JPG oder .PNG sein!",
52 |     "avatarSizeInvalid": "Das Bild muss kleiner als 2 MB sein!",
53 |     "reLoginButton": "Erneut anmelden",
54 |     "reLoginTitle": "Bist du sicher?",
55 |     "reLoginBody": "Wenn du dich erneut anmeldest verlierst du den Zugang zu aktiven Konversationen!",
56 |     "cancelReLogin": "Abbrechen"
57 |   },
58 |   "config": {
59 |     "desktopNotifications": "Desktop Benachrichtigungen",
60 |     "enableSoundNotification": "Ton bei Benachrichtungen aktivieren",
61 |     "disableSoundNotification": "Ton bei Benachrichtigungen deaktivieren",
62 |     "enableOfflineContacts": "Zeige Offline Kontakte",
63 |     "disableOfflineContacts": "Verstecke Offline Kontakte",
64 |     "enableDarkMode": "Nachtmodus aktivieren",
65 |     "disableDarkMode": "Nachtmodus deaktivieren",
66 |     "selectCountry": "Wählen Sie Ihr Land aus"
67 |   },
68 |   "dialogs": {
69 |     "save": "Speichern",
70 |     "cancel": "Stornieren"
71 |   },
72 |   "date": {
73 |     "today": "Heute",
74 |     "yesterday": "Gestern"
75 |   },
76 |   "page404": {
77 |     "button": "Hoppla! Klicken Sie hier, um zur Startseite zurückzukehren."
78 |   }
79 | }
80 | 


--------------------------------------------------------------------------------
/components/chat-config/chat-config.js:
--------------------------------------------------------------------------------
  1 | import ProfileConfigService from '@/services/profile-config-service';
  2 | import Push from 'push.js';
  3 | import ObjectUtils from '@/utils/object-utils';
  4 | import CountryConfig from '@/components/country-config/country-config.vue';
  5 | 
  6 | export default {
  7 |   name: 'ChatConfig',
  8 |   components: { 'country-config': CountryConfig },
  9 |   props: ['showChatConfig'],
 10 |   data() {
 11 |     return {
 12 |       chatConfigForm: {},
 13 |       showErrorMessage: false,
 14 |       showCountryConfig: false
 15 |     };
 16 |   },
 17 |   computed: {
 18 |     chatConfig() {
 19 |       return this.$store.state.chat.chatConfig;
 20 |     },
 21 |     soundNotificationMsg() {
 22 |       if (
 23 |         this.chatConfigForm.soundNotification === undefined ||
 24 |         this.chatConfigForm.soundNotification === false
 25 |       ) {
 26 |         return this.$t('config.enableSoundNotification');
 27 |       }
 28 |       return this.$t('config.disableSoundNotification');
 29 |     },
 30 |     showOfflineMsg() {
 31 |       if (
 32 |         this.chatConfigForm.showOffline === undefined ||
 33 |         this.chatConfigForm.showOffline === false
 34 |       ) {
 35 |         return this.$t('config.enableOfflineContacts');
 36 |       }
 37 |       return this.$t('config.disableOfflineContacts');
 38 |     },
 39 |     darkModeMsg() {
 40 |       if (
 41 |         this.chatConfigForm.darkMode === undefined ||
 42 |         this.chatConfigForm.darkMode === false
 43 |       ) {
 44 |         return this.$t('config.enableDarkMode');
 45 |       }
 46 |       return this.$t('config.disableDarkMode');
 47 |     },
 48 |     selectCountryMessage() {
 49 |       return this.$t('config.selectCountry');
 50 |     }
 51 |   },
 52 |   mounted() {
 53 |     this.chatConfigForm = ObjectUtils.cloneObject(this.chatConfig);
 54 |   },
 55 |   methods: {
 56 |     chatConfigFormSubmit() {
 57 |       ProfileConfigService.saveConfig(this.chatConfigForm);
 58 |     },
 59 |     changeSoundNotification() {
 60 |       this.changePresenceUserAction();
 61 |       if (
 62 |         this.chatConfigForm.soundNotification === undefined ||
 63 |         this.chatConfigForm.soundNotification === false
 64 |       ) {
 65 |         this.chatConfigForm.soundNotification = true;
 66 |       } else {
 67 |         this.chatConfigForm.soundNotification = false;
 68 |       }
 69 |       ProfileConfigService.saveConfig(this.chatConfigForm);
 70 |     },
 71 |     changeShowOffline() {
 72 |       this.changePresenceUserAction();
 73 |       if (
 74 |         this.chatConfigForm.showOffline === undefined ||
 75 |         this.chatConfigForm.showOffline === false
 76 |       ) {
 77 |         this.chatConfigForm.showOffline = true;
 78 |       } else {
 79 |         this.chatConfigForm.showOffline = false;
 80 |       }
 81 |       ProfileConfigService.saveConfig(this.chatConfigForm);
 82 |     },
 83 |     changeDarkTheme() {
 84 |       this.changePresenceUserAction();
 85 |       if (
 86 |         this.chatConfigForm.darkMode === undefined ||
 87 |         this.chatConfigForm.darkMode === false
 88 |       ) {
 89 |         this.chatConfigForm.darkMode = true;
 90 |       } else {
 91 |         this.chatConfigForm.darkMode = false;
 92 |       }
 93 |       ProfileConfigService.saveConfig(this.chatConfigForm);
 94 |     },
 95 |     requestNotificationPermission() {
 96 |       this.changePresenceUserAction();
 97 |       Push.Permission.request(
 98 |         () => {
 99 |           this.showErrorMessage = false;
100 |         },
101 |         () => {
102 |           this.showErrorMessage = true;
103 |         }
104 |       );
105 |     },
106 |     openCountryDialog() {
107 |       this.showCountryConfig = true;
108 |     }
109 |   }
110 | };
111 | 


--------------------------------------------------------------------------------
/store/app/actions.js:
--------------------------------------------------------------------------------
  1 | import * as types from './mutation-types';
  2 | 
  3 | const actions = {
  4 |   // Global App States
  5 |   updateIsAppLoading({ commit }, isAppLoading) {
  6 |     commit(types.UPDATE_IS_APP_LOADING, {
  7 |       isAppLoading
  8 |     });
  9 |   },
 10 |   updateAppConfig({ commit }, appConfig) {
 11 |     commit(types.UPDATE_APP_CONFIG, {
 12 |       appConfig
 13 |     });
 14 |   },
 15 |   updateAppLocale({ commit }, appLocale) {
 16 |     commit(types.UPDATE_APP_LOCALE, {
 17 |       appLocale
 18 |     });
 19 |   },
 20 |   updateShowUsersWithoutGroups({ commit }, showUsersWithoutGroups) {
 21 |     commit(types.UPDATE_SHOW_USERS_WITHOUT_GROUPS, {
 22 |       showUsersWithoutGroups
 23 |     });
 24 |   },
 25 | 
 26 |   updateIsLogging({ commit }, isLogging) {
 27 |     commit(types.UPDATE_IS_LOGGING, {
 28 |       isLogging
 29 |     });
 30 |   },
 31 |   updateIsDisconnected({ commit }, isDisconnected) {
 32 |     commit(types.UPDATE_IS_DISCONNECTED, {
 33 |       isDisconnected
 34 |     });
 35 |   },
 36 |   updateXmppClient({ commit }, xmppClient) {
 37 |     commit(types.UPDATE_XMPP_CLIENT, {
 38 |       xmppClient
 39 |     });
 40 |   },
 41 |   updateChatTimestamp({ commit }, chatTimestamp) {
 42 |     commit(types.UPDATE_CHAT_TIMESTAMP, {
 43 |       chatTimestamp
 44 |     });
 45 |   },
 46 | 
 47 |   // Auth User
 48 |   updateAuthUser({ commit }, authUser) {
 49 |     commit(types.UPDATE_AUTH_USER, {
 50 |       authUser
 51 |     });
 52 |   },
 53 |   updateAuthUserPresence({ commit }, presence) {
 54 |     commit(types.UPDATE_AUTH_USER_PRESENCE, {
 55 |       presence
 56 |     });
 57 |   },
 58 |   updateAuthUserImageBin({ commit }, updateAuthUserImageBin) {
 59 |     const { authUser, type, bin } = updateAuthUserImageBin;
 60 |     commit(types.UPDATE_AUTH_USER_IMAGE_BIN, { authUser, type, bin });
 61 |   },
 62 | 
 63 |   // Roster List
 64 |   updateRosterList({ commit }, rosterList) {
 65 |     commit(types.UPDATE_ROSTER_LIST, {
 66 |       rosterList
 67 |     });
 68 |   },
 69 |   updateRosterObj({ commit }, rosterObjects) {
 70 |     const { oldRosterObj, newRosterObj } = rosterObjects;
 71 |     commit(types.UPDATE_ROSTER_OBJ, { oldRosterObj, newRosterObj });
 72 |   },
 73 |   updatePresenceRosterContact({ commit }, updatePresenceRosterContact) {
 74 |     const { rosterObj, presence } = updatePresenceRosterContact;
 75 |     commit(types.UPDATE_PRESENCE_ROSTER_CONTACT, { rosterObj, presence });
 76 |   },
 77 |   updateStatusRosterContact({ commit }, updateStatusRosterContact) {
 78 |     const { rosterObj, status } = updateStatusRosterContact;
 79 |     commit(types.UPDATE_STATUS_ROSTER_CONTACT, {
 80 |       rosterObj,
 81 |       status
 82 |     });
 83 |   },
 84 |   addToRosterList({ commit }, rosterObj) {
 85 |     commit(types.ADD_TO_ROSTER_LIST, rosterObj);
 86 |   },
 87 |   updateIsLoadingRoster({ commit }, bol) {
 88 |     commit(types.UPDATE_IS_LOADING_ROSTER, bol);
 89 |   },
 90 | 
 91 |   // Profile Image
 92 |   updateProfileImageList({ commit }, profileImageList) {
 93 |     commit(types.UPDATE_PROFILE_IMAGE_LIST, {
 94 |       profileImageList
 95 |     });
 96 |   },
 97 |   updateProfileImageBin({ commit }, updateProfileImageBin) {
 98 |     const { profileImage, type, bin } = updateProfileImageBin;
 99 |     commit(types.UPDATE_PROFILE_IMAGE_BIN, { profileImage, type, bin });
100 |   },
101 |   updateProfileImageHash({ commit }, updateProfileImageHash) {
102 |     const { profileImage, hash } = updateProfileImageHash;
103 |     commit(types.UPDATE_PROFILE_IMAGE_HASH, { profileImage, hash });
104 |   },
105 |   addProfileImageToList({ commit }, profileImage) {
106 |     commit(types.ADD_PROFILE_IMAGE_TO_LIST, { profileImage });
107 |   },
108 |   removeProfileImageFromList({ commit }, profileImage) {
109 |     commit(types.REMOVE_PROFILE_IMAGE_FROM_LIST, {
110 |       profileImage
111 |     });
112 |   }
113 | };
114 | 
115 | export default actions;
116 | 


--------------------------------------------------------------------------------
/services/message-parser.js:
--------------------------------------------------------------------------------
  1 | import EmojiService from '@/services/emoji-service';
  2 | 
  3 | export default {
  4 |   parseChatboxMessage(msg) {
  5 |     msg = this.escapeHTML(msg);
  6 | 
  7 |     // The parsing order is important!!!
  8 | 
  9 |     // Embeds
 10 |     // msg = this.convertTwitterUrlToEmbed(msg);
 11 | 
 12 |     // Links (and image links)
 13 |     msg = this.convertUrlToAnchorTag(msg);
 14 |     msg = this.convertUrlToImageTag(msg);
 15 | 
 16 |     // Convert emoji shortchut to IMG tag with the emoji
 17 |     msg = this.convertUnicodeToTwemoji(msg);
 18 |     return msg;
 19 |   },
 20 |   parseAdminMessage(msg) {
 21 |     msg = this.escapeHTML(msg);
 22 | 
 23 |     // The parsing order is important!!!
 24 | 
 25 |     // Convert emoji shortchut to IMG tag with the emoji
 26 |     msg = this.convertUnicodeToTwemoji(msg);
 27 |     return msg;
 28 |   },
 29 |   parseLastMessageConversation(msg) {
 30 |     msg = this.escapeHTML(msg);
 31 | 
 32 |     // The parsing order is important!!!
 33 |     // Convert emoji shortchut to IMG tag with the emoji
 34 |     msg = this.convertUnicodeToTwemoji(msg);
 35 |     return msg;
 36 |   },
 37 |   removeHtmlTags(msg) {
 38 |     const tmp = document.createElement('div');
 39 |     tmp.innerHTML = msg;
 40 | 
 41 |     let res = tmp.textContent || tmp.innerText || '';
 42 |     res.replace('\u200B', '');
 43 |     res = res.trim();
 44 | 
 45 |     return res;
 46 |   },
 47 |   convertNewlineToBrTag(msg) {
 48 |     return (msg + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1<br/>$2');
 49 |   },
 50 |   convertUrlToAnchorTag(msg) {
 51 |     const urlRegex = /\bwww(?!\S+(?:jpe?g|png|bmp|gif|webp|svg))\S+|https?:\/\/(?!\S+(?:jpe?g|png|bmp|gif|webp|svg))\S+/g;
 52 |     msg = msg.replace(urlRegex, function(url) {
 53 |       let anchorElement =
 54 |         '<a href="' + url + '" target="_blank">' + url + '</a>';
 55 |       if (url.substring(0, 3) === 'www') {
 56 |         const urlWithPrefix = 'http://' + url;
 57 |         anchorElement =
 58 |           '<a href="' + urlWithPrefix + '" target="_blank">' + url + '</a>';
 59 |       }
 60 |       return anchorElement;
 61 |     });
 62 |     return msg;
 63 |   },
 64 |   convertUrlToImageTag(msg) {
 65 |     const urlRegex = /(www)([/|.|\w|-])*\.(?:jpe?g|png|bmp|gif|webp|svg)|(http(s?):)([/|.|\w|-])*\.(?:jpe?g|png|bmp|gif|webp|svg)/g;
 66 |     let imageElement = '';
 67 |     msg = msg.replace(urlRegex, function(url) {
 68 |       let urlWithPrefix = url;
 69 | 
 70 |       if (url.substring(0, 3) === 'www') {
 71 |         urlWithPrefix = 'http://' + url;
 72 |       }
 73 | 
 74 |       imageElement =
 75 |         '</br>' +
 76 |         '<small>Pré-visualização:</small>' +
 77 |         '</br>' +
 78 |         '<a href="' +
 79 |         urlWithPrefix +
 80 |         '" target="_blank"> ' +
 81 |         '<img class="b-rounded max-size-chat-image img-opacity" src="' +
 82 |         urlWithPrefix +
 83 |         '"/>' +
 84 |         '</a>' +
 85 |         '</br>';
 86 | 
 87 |       return (
 88 |         '<a href="' +
 89 |         urlWithPrefix +
 90 |         '" target="_blank">' +
 91 |         url +
 92 |         '</a>' +
 93 |         imageElement
 94 |       );
 95 |     });
 96 |     return msg;
 97 |   },
 98 |   escapeHTML(msg) {
 99 |     return document
100 |       .createElement('div')
101 |       .appendChild(document.createTextNode(msg)).parentNode.innerHTML;
102 |   },
103 |   convertUnicodeToTwemoji(msg) {
104 |     return EmojiService.twemoji().parse(msg);
105 |   },
106 |   replaceEmojiWithAltAttribute(msg) {
107 |     return msg.replace(/<img.*?alt="(.*?)"[^\>]+>/g, '$1');
108 |   },
109 |   unescapeHtml(msg) {
110 |     return msg
111 |       .replace(/&amp;/g, '&')
112 |       .replace(/&lt;/g, '<')
113 |       .replace(/&gt;/g, '>')
114 |       .replace(/&quot;/g, '"')
115 |       .replace(/&#039;/g, "'");
116 |   },
117 | 
118 |   // TODO: Twitter Embed
119 |   convertTwitterUrlToEmbed(msg) {
120 |     const twitterRegex = /https?:\/\/twitter\.com\/(?:#!\/)?(\w+)\/status(es)?\/(\d+)/g;
121 |     msg = msg.replace(twitterRegex, function(twitterMatch) {
122 |       return `<iframe border=0 frameborder=0 height=250 width=550 src="${twitterMatch}"></iframe>`;
123 |     });
124 |     return msg;
125 |   }
126 | };
127 | 


--------------------------------------------------------------------------------
/components/cool-textarea/cool-textarea.js:
--------------------------------------------------------------------------------
  1 | import MessageParser from '@/services/message-parser';
  2 | 
  3 | export default {
  4 |   name: 'CoolTextarea',
  5 |   props: ['content'],
  6 |   data() {
  7 |     return {
  8 |       savedRange:
  9 |         window.getSelection().rangeCount > 0
 10 |           ? window.getSelection().getRangeAt(0)
 11 |           : null
 12 |     };
 13 |   },
 14 |   computed: {
 15 |     activeConversation() {
 16 |       return this.$store.state.chat.activeConversation;
 17 |     }
 18 |   },
 19 |   created() {
 20 |     this.$nuxt.$on('COOL_TEXTAREA_FOCUS', () => {
 21 |       this.cleanText();
 22 |       this.focus();
 23 |       this.addText(this.activeConversation.chatboxState);
 24 |     });
 25 |   },
 26 |   beforeDestroy() {
 27 |     this.$nuxt.$off('COOL_TEXTAREA_FOCUS');
 28 |   },
 29 |   methods: {
 30 |     updateContent(event) {
 31 |       const isComposing = event.inputType.length !== 0;
 32 |       let content = event.target.innerHTML;
 33 |       content = MessageParser.replaceEmojiWithAltAttribute(content);
 34 |       content = MessageParser.unescapeHtml(content);
 35 |       if (content.length !== 0 && content[content.length - 1] === '\n') {
 36 |         content = content.slice(0, -1);
 37 |       }
 38 | 
 39 |       if (isComposing) {
 40 |         this.$emit('sendTypingSignal');
 41 |       }
 42 |       this.$emit('update:content', content);
 43 |       this.$emit('contentChanged');
 44 |     },
 45 |     enterKey(event) {
 46 |       event.stopPropagation();
 47 |       event.preventDefault();
 48 |       if (event.shiftKey === false) {
 49 |         this.$emit('enterKey');
 50 |       }
 51 |     },
 52 |     shiftEnterKey(event) {
 53 |       event.stopPropagation();
 54 |       event.preventDefault();
 55 | 
 56 |       if (
 57 |         this.$el.innerHTML === '' ||
 58 |         this.$el.innerHTML[this.$el.innerHTML.length - 1] !== '\n'
 59 |       ) {
 60 |         this.addText('\n');
 61 |         this.addText('\n');
 62 |       } else {
 63 |         this.addText('\n');
 64 |       }
 65 | 
 66 |       this.$el.scrollTop = this.$el.scrollHeight;
 67 |     },
 68 |     onPaste(pasteEvent) {
 69 |       var clipboardData, pastedData;
 70 | 
 71 |       pasteEvent.stopPropagation();
 72 |       pasteEvent.preventDefault();
 73 | 
 74 |       clipboardData = pasteEvent.clipboardData || window.clipboardData;
 75 |       pastedData = clipboardData.getData('Text');
 76 |       pastedData = MessageParser.escapeHTML(pastedData);
 77 |       pastedData = MessageParser.convertUnicodeToTwemoji(pastedData);
 78 | 
 79 |       window.document.execCommand('insertHTML', false, pastedData);
 80 | 
 81 |       this.$el.scrollTop = this.$el.scrollHeight;
 82 |     },
 83 |     focus() {
 84 |       const doc = this.$el;
 85 |       const childNode = doc.childNodes[0];
 86 |       doc.focus();
 87 | 
 88 |       if (childNode === undefined) {
 89 |         const textNode = document.createTextNode('');
 90 |         doc.appendChild(textNode);
 91 |         const range = document.createRange();
 92 |         const sel = window.getSelection();
 93 |         range.setStart(doc.childNodes[0], 0);
 94 |         range.collapse(true);
 95 |         sel.removeAllRanges();
 96 |         sel.addRange(range);
 97 |         this.saveSelection();
 98 |       }
 99 |     },
100 |     addText(text) {
101 |       this.focus();
102 | 
103 |       text = MessageParser.escapeHTML(text);
104 |       text = MessageParser.convertUnicodeToTwemoji(text);
105 | 
106 |       window.document.execCommand('insertHTML', false, text);
107 |       this.saveSelection();
108 |     },
109 |     cleanText() {
110 |       this.$el.innerHTML = '';
111 |     },
112 |     saveSelection() {
113 |       if (window.getSelection) {
114 |         this.savedRange = window.getSelection().getRangeAt(0);
115 |       } else if (document.selection) {
116 |         this.savedRange = document.selection.createRange();
117 |       }
118 |     },
119 |     restoreSelection() {
120 |       const doc = this.$el;
121 |       doc.focus();
122 |       if (this.savedRange != null) {
123 |         if (window.getSelection) {
124 |           const s = window.getSelection();
125 |           if (s.rangeCount > 0) {
126 |             s.removeAllRanges();
127 |           }
128 |           s.addRange(this.savedRange);
129 |         } else if (document.createRange) {
130 |           window.getSelection().addRange(this.savedRange);
131 |         } else if (document.selection) {
132 |           this.savedRange.select();
133 |         }
134 |       }
135 |     }
136 |   }
137 | };
138 | 


--------------------------------------------------------------------------------
/components/chat-header/chat-header.js:
--------------------------------------------------------------------------------
  1 | import PresenceEnum from '@/enums/presence-enum';
  2 | import FaviconService from '@/services/favicon-service';
  3 | import DocTitleService from '@/services/doc-title-service';
  4 | let XmppService = null;
  5 | 
  6 | export default {
  7 |   name: 'ChatHeader',
  8 |   props: ['showContactList'],
  9 |   data() {
 10 |     return {
 11 |       profileImgUpload: null,
 12 |       disconnectedMessage: this.$t('chat.isDisconnectedMsg')
 13 |     };
 14 |   },
 15 |   computed: {
 16 |     presenceList() {
 17 |       return PresenceEnum.getPresenceEnumUser();
 18 |     },
 19 |     authUser() {
 20 |       return this.$store.state.app.authUser;
 21 |     },
 22 |     profileImageSrc() {
 23 |       let imgSrc = null;
 24 |       if (this.authUser !== undefined && this.authUser.photoBin) {
 25 |         imgSrc =
 26 |           'data:' +
 27 |           this.authUser.photoType +
 28 |           ';base64,' +
 29 |           this.authUser.photoBin;
 30 |       }
 31 |       return imgSrc;
 32 |     },
 33 |     isDisconnected() {
 34 |       return this.$store.state.app.isDisconnected;
 35 |     },
 36 |     chatConfig() {
 37 |       return this.$store.state.chat.chatConfig;
 38 |     },
 39 |     numUnreadConversation() {
 40 |       return this.$store.state.chat.numUnreadConversation;
 41 |     }
 42 |   },
 43 |   beforeCreate() {
 44 |     if (process.browser) {
 45 |       XmppService = require('@/services/xmpp-service').default.constructor(
 46 |         this.$store
 47 |       );
 48 |     }
 49 |   },
 50 |   methods: {
 51 |     getPresenceColor(idPresence) {
 52 |       return PresenceEnum.getIconColor(idPresence).value;
 53 |     },
 54 |     sendChangePresenceSignal() {
 55 |       XmppService.sendChangePresenceSignal(this.authUser.presence.id);
 56 |       this.$store.dispatch('chat/updateLastMessageSentStamp', new Date());
 57 |       this.$store.dispatch(
 58 |         'chat/updateLastPresence',
 59 |         this.authUser.presence.id
 60 |       );
 61 |       this.$store.dispatch('chat/updateIsPresenceAway', false);
 62 |     },
 63 |     uploadProfileImage() {
 64 |       this.changePresenceUserAction();
 65 |       const uploadInput = document.getElementById('profileimg-upload');
 66 |       uploadInput.click();
 67 |     },
 68 |     onFileChange(e) {
 69 |       const vueContext = this;
 70 | 
 71 |       const file = e.target.files[0];
 72 | 
 73 |       if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
 74 |         this.$notify({
 75 |           title: vueContext.$t('profile.avatarExtensionInvalid'),
 76 |           type: 'error'
 77 |         });
 78 |       } else if (file.size > 2097152) {
 79 |         this.$notify({
 80 |           title: vueContext.$t('profile.avatarSizeInvalid'),
 81 |           type: 'error'
 82 |         });
 83 |       } else {
 84 |         XmppService.updateProfileImage(file);
 85 |       }
 86 |     },
 87 |     emitSwitchActiveMenu() {
 88 |       this.$emit('switchActiveMenu');
 89 |     },
 90 |     goToLogin() {
 91 |       const vueContext = this;
 92 | 
 93 |       this.$confirm(
 94 |         vueContext.$t('profile.reLoginBody'),
 95 |         vueContext.$t('profile.reLoginTitle'),
 96 |         {
 97 |           confirmButtonText: 'OK',
 98 |           cancelButtonText: vueContext.$t('profile.cancelReLogin'),
 99 |           type: 'warning'
100 |         }
101 |       )
102 |         .then(() => {
103 |           this.$store.dispatch('app/updateIsAppLoading', true);
104 |           this.$store.dispatch('chat/resetChatStore');
105 |           FaviconService.updateFavicon();
106 |           DocTitleService.updateTitle();
107 |           this.$router.push('/');
108 |         })
109 |         .catch(() => {});
110 |     },
111 |     deletePhoto() {
112 |       this.changePresenceUserAction();
113 |       const vueContext = this;
114 |       this.$confirm(
115 |         vueContext.$t('profile.deleteAvatarBody'),
116 |         vueContext.$t('profile.deleteAvatarTitle'),
117 |         {
118 |           confirmButtonText: 'OK',
119 |           cancelButtonText: vueContext.$t('profile.cancelDeleteAvatar'),
120 |           type: 'warning'
121 |         }
122 |       )
123 |         .then(() => {
124 |           return XmppService.deleteProfileImage();
125 |         })
126 |         .catch(() => {});
127 |     },
128 |     getPresenceLabeli18n(presence) {
129 |       let presenceValue = '';
130 | 
131 |       if (presence.id === 'on') {
132 |         presenceValue = this.$t('profile.onlinePresence');
133 |       } else if (presence.id === 'dnd') {
134 |         presenceValue = this.$t('profile.busyPresence');
135 |       } else if (presence.id === 'away') {
136 |         presenceValue = this.$t('profile.awayPresence');
137 |       } else {
138 |         presenceValue = this.$t('profile.offlinePresence');
139 |       }
140 | 
141 |       return presenceValue;
142 |     }
143 |   }
144 | };
145 | 


--------------------------------------------------------------------------------
/pages/chat/index.js:
--------------------------------------------------------------------------------
  1 | import ChatBox from '@/components/chat-box/chat-box.vue';
  2 | import LoadingApp from '@/components/loading-app/loading-app.vue';
  3 | import ContactList from '@/components/contact-list/contact-list.vue';
  4 | import Conversations from '@/components/conversations/conversations.vue';
  5 | import ChatHeader from '@/components/chat-header/chat-header.vue';
  6 | import ScreenUtils from '@/utils/screen-utils';
  7 | import ChatConfig from '@/components/chat-config/chat-config.vue';
  8 | import PresenceEnum from '@/enums/presence-enum';
  9 | 
 10 | let XmppService,
 11 |   ProfileConfigService,
 12 |   DateUtils = null;
 13 | 
 14 | export default {
 15 |   middleware: 'authenticated',
 16 |   name: 'Chat',
 17 |   components: {
 18 |     'chat-box': ChatBox,
 19 |     'loading-app': LoadingApp,
 20 |     'contact-list': ContactList,
 21 |     'chat-header': ChatHeader,
 22 |     'chat-config': ChatConfig,
 23 |     conversations: Conversations
 24 |   },
 25 |   props: [],
 26 |   data() {
 27 |     return {
 28 |       showContactList: false,
 29 |       intervalAwayPresence: null,
 30 |       sizes: process.browser ? ScreenUtils.getSizeChat() : null
 31 |     };
 32 |   },
 33 |   computed: {
 34 |     xmppClient() {
 35 |       return this.$store.state.app.xmppClient;
 36 |     },
 37 |     chatConfig() {
 38 |       return this.$store.state.chat.chatConfig;
 39 |     },
 40 |     authUser() {
 41 |       return this.$store.state.app.authUser;
 42 |     },
 43 |     lastMessageSentStamp() {
 44 |       return this.$store.state.chat.lastMessageSentStamp;
 45 |     },
 46 |     isPresenceAway() {
 47 |       return this.$store.state.chat.isPresenceAway;
 48 |     },
 49 |     lastPresence() {
 50 |       return this.$store.state.chat.lastPresence;
 51 |     },
 52 |     activeConversation() {
 53 |       return this.$store.state.chat.activeConversation;
 54 |     }
 55 |   },
 56 |   beforeCreate() {
 57 |     if (process.browser) {
 58 |       XmppService = require('@/services/xmpp-service').default.constructor(
 59 |         this.$store
 60 |       );
 61 |       DateUtils = require('@/utils/date-utils').default.constructor(
 62 |         this.$store
 63 |       );
 64 |       ProfileConfigService = require('@/services/profile-config-service').default.constructor(
 65 |         this.$store
 66 |       );
 67 | 
 68 |       // Show confirm close message
 69 |       const ctx = this;
 70 |       window.onbeforeunload = function() {
 71 |         if (ctx.$router.currentRoute.path === '/chat') {
 72 |           return true;
 73 |         }
 74 |       };
 75 | 
 76 |       // Actions when close tab
 77 |       window.onunload = function() {
 78 |         if (ctx.$router.currentRoute.path === '/chat') {
 79 |           const client = ctx.$store.state.app.xmppClient;
 80 |           client.options.sync = true;
 81 |           client.flush();
 82 |           client.disconnect();
 83 |         }
 84 |       };
 85 | 
 86 |       window.onresize = function() {
 87 |         ctx.sizes = ScreenUtils.getSizeChat();
 88 |         ctx.$nuxt.$emit('RE_RENDER_CHATBOX');
 89 |       };
 90 | 
 91 |       // Set browser zoom to default (100%)
 92 |       document.body.style.webkitTransform = 'scale(1)';
 93 |       document.body.style.msTransform = 'scale(100)';
 94 |       document.body.style.transform = 'scale(1)';
 95 |       document.body.style.zoom = screen.logicalXDPI / screen.deviceXDPI;
 96 | 
 97 |       ProfileConfigService.loadConfig();
 98 | 
 99 |       if (
100 |         this.$store.state.chat.chatConfig.countryConfig !== undefined &&
101 |         this.$store.state.chat.chatConfig.countryConfig !== null
102 |       ) {
103 |         this.$i18n.locale = this.$store.state.chat.chatConfig.countryConfig;
104 |         this.$store.dispatch(
105 |           'app/updateAppLocale',
106 |           this.$store.state.chat.chatConfig.countryConfig
107 |         );
108 |       }
109 |     }
110 |   },
111 |   mounted() {
112 |     const vueContext = this;
113 |     this.intervalAwayPresence = setInterval(function() {
114 |       if (
115 |         DateUtils.isDateLastMessageSentMinutesOlder(15) &&
116 |         vueContext.isPresenceAway === false &&
117 |         vueContext.authUser.presence.id !== 'away'
118 |       ) {
119 |         XmppService.sendChangePresenceSignal('away');
120 |         vueContext.$store.dispatch(
121 |           'app/updateAuthUserPresence',
122 |           PresenceEnum.getPresenceById('away')
123 |         );
124 |         vueContext.$store.dispatch('chat/updateIsPresenceAway', true);
125 |       }
126 |     }, 1000);
127 |   },
128 |   beforeDestroy() {
129 |     this.intervalAwayPresence = null;
130 |   },
131 |   methods: {
132 |     switchActiveMenu() {
133 |       this.changePresenceUserAction();
134 |       if (this.showContactList) {
135 |         this.dispatchConfusedEmoji();
136 |         this.showContactList = false;
137 |       } else {
138 |         this.dispatchHappyEmoji();
139 |         this.showContactList = true;
140 |       }
141 |     }
142 |   }
143 | };
144 | 


--------------------------------------------------------------------------------
/components/contact-list/contact-list.html:
--------------------------------------------------------------------------------
 1 | <div class="contact-list">
 2 |     <el-input :placeholder="$t('contacts.searchPlaceholder')" v-model="searchTerm"
 3 |         @keyup.native="searchContactByName()" class="mt2 mb1 b-rounded-25"
 4 |         :disabled="rosterListByGroup.length === 0"
 5 |         id="contact-search"></el-input>
 6 | 
 7 |     <span class="text-center text-danger text-bold ml2" v-if="searchedRosterList.length === 0
 8 |         && searchTerm.length < 3
 9 |         && searchTerm.length !== 0">
10 |         {{ $t('contacts.min3Characters') }}
11 |     </span>
12 |     <span class="text-center text-danger text-bold ml2" v-if="searchedRosterList.length === 0 && searchTerm.length > 2">
13 |         {{ $t('contacts.noContactFound') }}
14 |         <img src="svg-emoji/pensive-emoji.svg" width="18" height="18"/>
15 |     </span>
16 | 
17 |     <span class="text-center text-primary text-bold ml2" v-if="isLoadingRoster && rosterListByGroup.length === 0">
18 |         {{ $t('contacts.loadingContacts') }}
19 |     </span>
20 |     <span class="text-center text-primary text-bold ml2" v-if="isLoadingRoster === false && rosterListByGroup.length === 0">
21 |         {{ $t('contacts.noAvailableContacts') }}
22 |     </span>
23 | 
24 |     <transition name="slide-bt">
25 |         <el-collapse class="px2 mt1" v-model="activeAccordion" v-show="searchTerm.length === 0"
26 |             :class="{ 'dark-theme': chatConfig.darkMode === true, 'dark-border': chatConfig.darkMode === true }" accordion>
27 |             <el-collapse-item v-if="rosterListByGroup.length !== 0"
28 |                 v-for="(rosterGroup, key) in rosterListByGroup"
29 |                 :key="key"
30 |                 :title="rosterGroup.group === 'Others' ? $t('contacts.groupOthers') : rosterGroup.group"
31 |                 :name="key"
32 |                 :class="{ 'dark-theme': chatConfig.darkMode === true }">
33 |                 <el-row v-if="rosterGroup.contacts.length !== 0 && showOfflineContact(contact)"
34 |                     v-for="(contact, key) in rosterGroup.contacts" :key="key"
35 |                     class="v-align clickable bg-gray-hover p1 b-rounded height-fix-contact dark-hover"
36 |                     :class="{ 'dark-theme': chatConfig.darkMode === true }"
37 |                     @click.native="openConversation(contact)">
38 |                     <el-col :span="4">
39 |                         <intersect @enter="getProfileAvatar(contact.username)">
40 |                             <div id="contactAvatar">
41 |                                 <img v-if="profileImageSrc(contact.username) !== null" class="b-full-circle img-fit b4 mt1 fade-in"
42 |                                 :src="profileImageSrc(contact.username)" width="48" height="48"
43 |                                 :class="getPresenceBorderColor(contact.presence.id)"/>
44 |                                 <div class="user-icon-mini b-full-circle b4 clickable text-center v-align"
45 |                                     :class="getPresenceBorderColor(contact.presence.id)"
46 |                                     v-if="profileImageSrc(contact.username) === null">
47 |                                     <font-awesome-icon icon="user" class="ml2"/>
48 |                                 </div>
49 |                             </div>
50 |                         </intersect>
51 |                     </el-col>
52 |                     <el-col :span="20">
53 |                         <strong class="ml2">{{ contact.name }}</strong>
54 |                     </el-col>
55 |                 </el-row>
56 |             </el-collapse-item>
57 |         </el-collapse>
58 |     </transition>
59 |     <transition-group name="slide-rl">
60 |         <el-row v-show="searchedRosterList.length !== 0 && searchTerm.length !== 0"
61 |             v-for="(contact, key) in searchedRosterList"
62 |             :key="contact.username"
63 |             class="v-align-wrap clickable bg-gray-hover p1 mt1 b-rounded height-fix-contact dark-hover"
64 |             @click.native="openConversation(contact)">
65 |             <el-col :span="4">
66 |                 <img v-if="profileImageSrc(contact.username) !== null" class="b-full-circle img-fit b4"
67 |                 :src="profileImageSrc(contact.username)" width="48" height="48"
68 |                 :class="getPresenceBorderColor(contact.presence.id)"/>
69 | 
70 |                 <div class="user-icon-mini b-full-circle b4 clickable text-center v-align"
71 |                     :class="getPresenceBorderColor(contact.presence.id)"
72 |                     v-if="profileImageSrc(contact.username) === null">
73 |                     <font-awesome-icon icon="user" class="ml2"/>
74 |                 </div>
75 |             </el-col>
76 |             <el-col :span="20">
77 |                 <el-row class="ml2 text-bold">{{ contact.name }}</el-row>
78 |                 <el-row class="ml2">{{ contact.group === 'Others' ? $t('contacts.groupOthers') : contact.group }}</el-row>
79 |             </el-col>
80 |         </el-row>
81 |     </transition-group>
82 | </div>
83 | 


--------------------------------------------------------------------------------
/components/conversations/conversations.js:
--------------------------------------------------------------------------------
  1 | import PresenceEnum from '@/enums/presence-enum';
  2 | import ObjectUtils from '@/utils/object-utils';
  3 | import MessageParser from '@/services/message-parser';
  4 | import CacheUtils from '@/utils/cache-utils';
  5 | 
  6 | let XmppService,
  7 |   DocTitleService,
  8 |   FaviconService = null;
  9 | 
 10 | export default {
 11 |   name: 'Conversations',
 12 |   props: [],
 13 |   data() {
 14 |     return {};
 15 |   },
 16 |   computed: {
 17 |     authUser() {
 18 |       return this.$store.state.app.authUser;
 19 |     },
 20 |     conversationList() {
 21 |       return this.$store.state.chat.conversationList;
 22 |     },
 23 |     activeConversation() {
 24 |       return this.$store.state.chat.activeConversation;
 25 |     },
 26 |     isDisconnected() {
 27 |       return this.$store.state.app.isDisconnected;
 28 |     },
 29 |     chatConfig() {
 30 |       return this.$store.state.chat.chatConfig;
 31 |     },
 32 |     appLocale() {
 33 |       return this.$store.state.app.appLocale;
 34 |     }
 35 |   },
 36 |   beforeCreate() {
 37 |     if (process.browser) {
 38 |       XmppService = require('@/services/xmpp-service').default.constructor(
 39 |         this.$store
 40 |       );
 41 |       DocTitleService = require('@/services/doc-title-service').default.constructor(
 42 |         this.$store
 43 |       );
 44 |       FaviconService = require('@/services/favicon-service').default.constructor(
 45 |         this.$store
 46 |       );
 47 |     }
 48 |   },
 49 |   methods: {
 50 |     onClickConversation(conversation) {
 51 |       this.changePresenceUserAction();
 52 | 
 53 |       if (conversation.numUnreadMsgs !== 0) {
 54 |         const numUnreadConversation = this.$store.state.chat
 55 |           .numUnreadConversation;
 56 |         this.$store.dispatch(
 57 |           'chat/updateNumUnreadConversation',
 58 |           numUnreadConversation - 1
 59 |         );
 60 |         FaviconService.updateFavicon();
 61 |         DocTitleService.updateTitle();
 62 |         this.$store.dispatch(
 63 |           'chat/clearUnreadCounterConversation',
 64 |           conversation
 65 |         );
 66 |         CacheUtils.saveConversationList(
 67 |           this.authUser.username,
 68 |           this.conversationList
 69 |         );
 70 |       }
 71 | 
 72 |       if (this.activeConversation !== null) {
 73 |         XmppService.sendChatSignal(
 74 |           this.activeConversation.contact.username,
 75 |           'paused'
 76 |         );
 77 |         this.saveChatboxState();
 78 |       }
 79 | 
 80 |       this.$store.dispatch('chat/updateActiveConversation', conversation);
 81 |       setTimeout(function() {
 82 |         const coolTextarea = document.getElementById('cool-textarea');
 83 |         if (coolTextarea) {
 84 |           this.$nuxt.$emit('COOL_TEXTAREA_FOCUS');
 85 |         }
 86 |       });
 87 | 
 88 |       this.scrollMessageBoxToBottom();
 89 |     },
 90 |     getLastMessage(conversation) {
 91 |       let lastMessage = {};
 92 |       lastMessage.msg = '';
 93 |       if (conversation.list.length !== 0) {
 94 |         lastMessage = JSON.parse(
 95 |           JSON.stringify(conversation.list[conversation.list.length - 1])
 96 |         );
 97 |         lastMessage.stampDate = new Date(lastMessage.stampDate);
 98 |         lastMessage.msg = MessageParser.parseLastMessageConversation(
 99 |           lastMessage.msg
100 |         );
101 |       }
102 | 
103 |       return lastMessage;
104 |     },
105 |     getPresenceBorderColor(idPresence) {
106 |       return PresenceEnum.getBorderColor(idPresence).value;
107 |     },
108 |     isConversationActive(conversation) {
109 |       let bolConversationActive = false;
110 |       if (
111 |         conversation.contact.username ===
112 |         ObjectUtils.getValidUsername(
113 |           () => this.activeConversation.contact.username
114 |         )
115 |       ) {
116 |         bolConversationActive = true;
117 |       }
118 |       return bolConversationActive;
119 |     },
120 |     profileImageSrc(username) {
121 |       const profileImageList = this.$store.state.app.profileImageList;
122 |       const profileImageObj = profileImageList.find(
123 |         profileImage =>
124 |           profileImage.username.toUpperCase() === username.toUpperCase()
125 |       );
126 |       let imgSrc = null;
127 |       if (profileImageObj !== undefined && profileImageObj.bin) {
128 |         imgSrc =
129 |           'data:' + profileImageObj.type + ';base64,' + profileImageObj.bin;
130 |       }
131 |       return imgSrc;
132 |     },
133 |     isLastOwnMessage(conversation) {
134 |       let bolOwnMessage = false;
135 | 
136 |       if (
137 |         conversation.list.length !== 0 &&
138 |         conversation.list[conversation.list.length - 1].ownMessage
139 |       ) {
140 |         bolOwnMessage = true;
141 |       }
142 | 
143 |       return bolOwnMessage;
144 |     },
145 |     getProfileAvatar(username) {
146 |       XmppService.updateUserAvatar(username);
147 |     }
148 |   }
149 | };
150 | 


--------------------------------------------------------------------------------
/components/chat-header/chat-header.html:
--------------------------------------------------------------------------------
 1 | <div class="chat-header">
 2 |     <el-card class="p2 header-max-height"
 3 |         :class="{ 'dark-theme': chatConfig.darkMode === true, 'dark-border': chatConfig.darkMode === true }"
 4 |         v-if="authUser">
 5 |         <div v-if="!isDisconnected">
 6 |             <el-col :span="5">
 7 |                 <div class="profile-img-container" @mouseover="dispatchThinkingEmoji" @mouseleave="dispatchConfusedEmoji">
 8 |                     <img v-if="profileImageSrc !== null"
 9 |                         class="b-full-circle img-fit b1"
10 |                         :src="profileImageSrc"
11 |                         width="80" height="80"/>
12 |                     <input type="file" :v-model="profileImgUpload" id="profileimg-upload"
13 |                         accept="image/x-png,image/jpeg" @change="onFileChange" class="hidden"/>
14 |                     <div class="user-icon b-full-circle b1 clickable text-center v-align"
15 |                         v-if="profileImageSrc === null">
16 |                         <font-awesome-icon icon="user" class="ml3"/>
17 |                     </div>
18 |                     <div class="overlay-profile-img b-full-circle clickable" @click="uploadProfileImage()">
19 |                         <p class="text-center text-bold text-primary mt5">{{ $t('profile.changePhoto') }} </p>
20 |                     </div>
21 |                     <el-button class="profile-img-close" type="danger" plain circle size="mini"
22 |                         @click="deletePhoto()" v-if="profileImageSrc !== null">
23 |                         <font-awesome-icon icon="times"/>
24 |                     </el-button>
25 |                 </div>
26 |             </el-col>
27 |             <el-col :span="12" :offset="2">
28 |                 <el-select v-model="authUser.presence" placeholder="Status"
29 |                     value-key="id" class="mt3 b-rounded-25"
30 |                     @mouseover.native="dispatchThinkingEmoji"
31 |                     @mouseleave.native="dispatchConfusedEmoji"
32 |                     @change="sendChangePresenceSignal()"
33 |                     :class="{ 'dark-theme': chatConfig.darkMode === true }">
34 |                     <template slot="prefix">
35 |                         <font-awesome-icon icon="circle"
36 |                             class="text-label mr1 mt-prefix"
37 |                             :class="getPresenceColor(authUser.presence.id)"/>
38 |                     </template>
39 |                     <el-option
40 |                         v-for="presence in presenceList"
41 |                         :key="presence.id"
42 |                         :label="getPresenceLabeli18n(presence)"
43 |                         :value="presence">
44 |                         <font-awesome-icon icon="circle"
45 |                             class="text-label mr1"
46 |                             :class="getPresenceColor(presence.id)"/>
47 |                         <span> {{ getPresenceLabeli18n(presence) }}</span>
48 |                     </el-option>
49 |                 </el-select>
50 |             </el-col>
51 |             <el-col :span="4">
52 |                 <el-popover
53 |                     placement="bottom"
54 |                     width="150"
55 |                     trigger="hover"
56 |                     :content="$t('chat.openNewConversation')"
57 |                     v-if="!showContactList">
58 |                     <el-button slot="reference" type="primary" circle class="float-right mt2"
59 |                         @click="emitSwitchActiveMenu()"
60 |                         @mouseover.native="dispatchHappyEmoji"
61 |                         @mouseleave.native="dispatchConfusedEmoji">
62 |                         <font-awesome-icon icon="comment" class="icon-medium"/>
63 |                     </el-button>
64 |                 </el-popover>
65 | 
66 |                 <el-badge :value="numUnreadConversation" :max="99" v-if="showContactList" class="float-right mt2"
67 |                     :hidden="numUnreadConversation === 0">
68 |                     <el-popover
69 |                         placement="bottom"
70 |                         width="150"
71 |                         trigger="hover"
72 |                         :content="$t('chat.back')">
73 |                             <el-button slot="reference" type="primary" circle
74 |                                 @click="emitSwitchActiveMenu()">
75 |                                 <font-awesome-icon icon="undo" class="icon-medium"/>
76 |                             </el-button>
77 |                     </el-popover>
78 |                 </el-badge>
79 |             </el-col>
80 |         </div>
81 |         <div v-if="isDisconnected" class="text-center">
82 |             <el-alert class="mb1" :title="disconnectedMessage" type="error" show-icon :closable="false"></el-alert>
83 |             <el-button type="primary" plain @click="goToLogin()">
84 |                 <font-awesome-icon icon="key"/> {{ $t('profile.reLoginButton') }}
85 |             </el-button>
86 |         </div>
87 |     </el-card>
88 | </div>
89 | 


--------------------------------------------------------------------------------
/utils/cache-utils.js:
--------------------------------------------------------------------------------
  1 | let XmppService,
  2 |   XmppUtils,
  3 |   DocTitleService,
  4 |   FaviconService = null;
  5 | 
  6 | export default {
  7 |   saveConversationList(username, conversationList) {
  8 |     const conversationListClone = Array.from(conversationList);
  9 |     const convListAux = [];
 10 |     for (let i = 0; i < conversationListClone.length; i++) {
 11 |       convListAux.push({
 12 |         contact: conversationListClone[i].contact,
 13 |         list: [],
 14 |         numUnreadMsgs: conversationListClone[i].numUnreadMsgs,
 15 |         isTyping: false,
 16 |         chatboxState: conversationListClone[i].chatboxState,
 17 |         oldConversation: {
 18 |           lastStamp: null,
 19 |           isLoading: false,
 20 |           lastMessageId: '',
 21 |           lastRetrievedId: '',
 22 |           list: []
 23 |         }
 24 |       });
 25 |     }
 26 |     localStorage.setItem(
 27 |       btoa(`cached-conversation-list-${username}`),
 28 |       btoa(JSON.stringify(convListAux))
 29 |     );
 30 |   },
 31 |   loadConversationList(username, cachedRoster, store) {
 32 |     DocTitleService = require('@/services/doc-title-service').default.constructor(
 33 |       store
 34 |     );
 35 |     FaviconService = require('@/services/favicon-service').default.constructor(
 36 |       store
 37 |     );
 38 |     XmppService = require('@/services/xmpp-service').default.constructor(store);
 39 |     XmppUtils = require('@/utils/xmpp-utils').default.constructor(store);
 40 | 
 41 |     let cache = localStorage.getItem(
 42 |       btoa(`cached-conversation-list-${username}`)
 43 |     );
 44 |     const conversationList = [];
 45 |     if (cache !== null) {
 46 |       cache = JSON.parse(atob(cache));
 47 |       for (let i = 0; i < cache.length; i++) {
 48 |         let contactRef = cachedRoster.find(
 49 |           roster =>
 50 |             roster.username.toUpperCase() ===
 51 |             cache[i].contact.username.toUpperCase()
 52 |         );
 53 |         if (contactRef !== undefined) {
 54 |           cache[i].contact = contactRef;
 55 |           conversationList.push(cache[i]);
 56 |         }
 57 |       }
 58 |     }
 59 | 
 60 |     const cachedConversationList = cache;
 61 |     const conversationListRes = [];
 62 |     store.dispatch('app/updateIsAppLoading', true);
 63 |     if (cachedConversationList !== null) {
 64 |       const recGetOldMessages = i => {
 65 |         if (cachedConversationList.length === i) {
 66 |           store.dispatch('chat/updateConversationList', conversationListRes);
 67 |           setTimeout(() => {
 68 |             store.dispatch('app/updateIsAppLoading', false);
 69 |             store.dispatch('chat/updateDelayIncomingMessages', false);
 70 |             const delayedMessageList = store.state.chat.delayedMessageList;
 71 |             delayedMessageList.forEach(function(msg) {
 72 |               XmppUtils.messageHandler(msg);
 73 |             });
 74 |             this.saveConversationList(
 75 |               store.state.app.authUser.username,
 76 |               store.state.chat.conversationList
 77 |             );
 78 |           }, 3000);
 79 |           return;
 80 |         }
 81 | 
 82 |         store.dispatch('chat/updateLockAutoLoadOldMessages', true);
 83 |         XmppService.setLastMessageId(cachedConversationList[i])
 84 |           .then(res => {
 85 |             if (res !== undefined) {
 86 |               if (cachedConversationList[i].numUnreadMsgs !== 0) {
 87 |                 const numUnreadConversation =
 88 |                   store.state.chat.numUnreadConversation;
 89 |                 store.dispatch(
 90 |                   'chat/updateNumUnreadConversation',
 91 |                   numUnreadConversation + 1
 92 |                 );
 93 |                 DocTitleService.updateTitle();
 94 |                 FaviconService.updateFavicon();
 95 |               }
 96 |               conversationListRes.push(cachedConversationList[i]);
 97 |               return XmppService.getOldMessages(cachedConversationList[i]);
 98 |             } else {
 99 |               return Promise.resolve([]);
100 |             }
101 |           })
102 |           .then(res => {
103 |             if (res.length < 15) {
104 |               XmppService.getOldMessages(cachedConversationList[i]);
105 |             }
106 |             return Promise.resolve(true);
107 |           })
108 |           .then(res => {
109 |             store.dispatch('chat/updateLockAutoLoadOldMessages', false);
110 |             recGetOldMessages(i + 1);
111 |           });
112 |       };
113 | 
114 |       const recOldMessages = recGetOldMessages(0);
115 |     } else {
116 |       setTimeout(() => {
117 |         store.dispatch('chat/updateDelayIncomingMessages', false);
118 |         store.dispatch('app/updateIsAppLoading', false);
119 |         const delayedMessageList = store.state.chat.delayedMessageList;
120 |         delayedMessageList.forEach(function(msg) {
121 |           XmppUtils.messageHandler(msg);
122 |         });
123 |         this.saveConversationList(
124 |           store.state.app.authUser.username,
125 |           store.state.chat.conversationList
126 |         );
127 |       }, 3000);
128 |     }
129 |   }
130 | };
131 | 


--------------------------------------------------------------------------------
/layouts/error.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="error-container">
  3 |     <section class="error-container">
  4 |       <span>4</span>
  5 |       <span>
  6 |         <span class="screen-reader-text">0</span>
  7 |       </span>
  8 |       <span>4</span>
  9 |     </section>
 10 |     <div class="link-container">
 11 |       <nuxt-link to="/">
 12 |         <el-button
 13 |           type="primary"
 14 |           plain
 15 |         >
 16 |           {{ button404Message }}
 17 |         </el-button>
 18 |       </nuxt-link>
 19 |     </div>
 20 |   </div>
 21 | </template>
 22 | 
 23 | <style scoped lang="css">
 24 | @import url('https://fonts.googleapis.com/css?family=Catamaran:400,800');
 25 | .error-container {
 26 |   text-align: center;
 27 |   font-size: 180px;
 28 |   font-family: 'Catamaran', sans-serif;
 29 |   font-weight: 800;
 30 | }
 31 | .error-container > span {
 32 |   display: inline-block;
 33 |   line-height: 0.7;
 34 |   position: relative;
 35 |   color: #ffb485;
 36 | }
 37 | .error-container > span {
 38 |   display: inline-block;
 39 |   position: relative;
 40 |   vertical-align: middle;
 41 | }
 42 | .error-container > span:nth-of-type(1) {
 43 |   color: #d1f2a5;
 44 |   animation: colordancing 4s infinite;
 45 | }
 46 | .error-container > span:nth-of-type(3) {
 47 |   color: #f56991;
 48 |   animation: colordancing2 4s infinite;
 49 | }
 50 | .error-container > span:nth-of-type(2) {
 51 |   width: 120px;
 52 |   height: 120px;
 53 |   border-radius: 999px;
 54 | }
 55 | .error-container > span:nth-of-type(2):before,
 56 | .error-container > span:nth-of-type(2):after {
 57 |   border-radius: 0%;
 58 |   content: '';
 59 |   position: absolute;
 60 |   top: 0;
 61 |   left: 0;
 62 |   width: inherit;
 63 |   height: inherit;
 64 |   border-radius: 999px;
 65 |   box-shadow: inset 30px 0 0 rgba(209, 242, 165, 0.4),
 66 |     inset 0 30px 0 rgba(239, 250, 180, 0.4),
 67 |     inset -30px 0 0 rgba(12, 211, 168, 0.4),
 68 |     inset 0 -30px 0 rgba(29, 136, 131, 0.4);
 69 |   animation: shadowsdancing 4s infinite;
 70 | }
 71 | .error-container > span:nth-of-type(2):before {
 72 |   -webkit-transform: rotate(45deg);
 73 |   -moz-transform: rotate(45deg);
 74 |   transform: rotate(45deg);
 75 | }
 76 | 
 77 | .screen-reader-text {
 78 |   position: absolute;
 79 |   top: -9999em;
 80 |   left: -9999em;
 81 | }
 82 | @keyframes shadowsdancing {
 83 |   0% {
 84 |     box-shadow: inset 30px 0 0 rgba(209, 242, 165, 0.4),
 85 |       inset 0 30px 0 rgba(239, 250, 180, 0.4),
 86 |       inset -30px 0 0 rgba(12, 211, 168, 0.4),
 87 |       inset 0 -30px 0 rgba(29, 136, 131, 0.4);
 88 |   }
 89 |   25% {
 90 |     box-shadow: inset 30px 0 0 rgba(29, 136, 131, 0.4),
 91 |       inset 0 30px 0 rgba(209, 242, 165, 0.4),
 92 |       inset -30px 0 0 rgba(239, 250, 180, 0.4),
 93 |       inset 0 -30px 0 rgba(12, 211, 168, 0.4);
 94 |   }
 95 |   50% {
 96 |     box-shadow: inset 30px 0 0 rgba(12, 211, 168, 0.4),
 97 |       inset 0 30px 0 rgba(29, 136, 131, 0.4),
 98 |       inset -30px 0 0 rgba(209, 242, 165, 0.4),
 99 |       inset 0 -30px 0 rgba(239, 250, 180, 0.4);
100 |   }
101 |   75% {
102 |     box-shadow: inset 30px 0 0 rgba(239, 250, 180, 0.4),
103 |       inset 0 30px 0 rgba(12, 211, 168, 0.4),
104 |       inset -30px 0 0 rgba(29, 136, 131, 0.4),
105 |       inset 0 -30px 0 rgba(209, 242, 165, 0.4);
106 |   }
107 |   100% {
108 |     box-shadow: inset 30px 0 0 rgba(209, 242, 165, 0.4),
109 |       inset 0 30px 0 rgba(239, 250, 180, 0.4),
110 |       inset -30px 0 0 rgba(12, 211, 168, 0.4),
111 |       inset 0 -30px 0 rgba(29, 136, 131, 0.4);
112 |   }
113 | }
114 | @keyframes colordancing {
115 |   0% {
116 |     color: #d1f2a5;
117 |   }
118 |   25% {
119 |     color: #1d888366;
120 |   }
121 |   50% {
122 |     color: #0cd3a866;
123 |   }
124 |   75% {
125 |     color: #effab4;
126 |   }
127 |   100% {
128 |     color: #d1f2a5;
129 |   }
130 | }
131 | @keyframes colordancing2 {
132 |   0% {
133 |     color: #0cd3a866;
134 |   }
135 |   25% {
136 |     color: #effab4;
137 |   }
138 |   50% {
139 |     color: #d1f2a5;
140 |   }
141 |   75% {
142 |     color: #1d888366;
143 |   }
144 |   100% {
145 |     color: #0cd3a866;
146 |   }
147 | }
148 | .link-container {
149 |   text-align: center;
150 | }
151 | </style>
152 | 
153 | <script>
154 | import ConfigService from '@/services/config-service';
155 | 
156 | export default {
157 |   props: ['error'],
158 |   computed: {
159 |     button404Message() {
160 |       return this.$t('page404.button');
161 |     }
162 |   },
163 |   beforeCreate() {
164 |     if (process.browser) {
165 |       const staticBase = this.$nuxt._router.options.base;
166 |       ConfigService.getConfigFile(staticBase).then(appConfig => {
167 |         this.$store.dispatch('app/updateAppConfig', appConfig);
168 |         this.$store.dispatch('app/updateAppLocale', appConfig.APP_LOCALE);
169 | 
170 |         if (
171 |           typeof navigator.language === 'string' &&
172 |           Object.keys(this.$i18n.messages).includes(
173 |             navigator.language.toLowerCase()
174 |           )
175 |         ) {
176 |           this.$i18n.locale = navigator.language.toLowerCase();
177 |         } else {
178 |           this.$i18n.locale = appConfig.APP_LOCALE;
179 |         }
180 |       });
181 |     }
182 |   },
183 |   layout: 'error-layout'
184 | };
185 | </script>


--------------------------------------------------------------------------------
/store/chat/actions.js:
--------------------------------------------------------------------------------
  1 | import * as types from './mutation-types';
  2 | 
  3 | const actions = {
  4 |   // Chatbox Global States
  5 |   updateChatboxEmoji({ commit }, chatboxEmoji) {
  6 |     commit(types.UPDATE_CHATBOX_EMOJI, {
  7 |       chatboxEmoji
  8 |     });
  9 |   },
 10 |   updateLastNotification({ commit }, lastNotification) {
 11 |     commit(types.UPDATE_LAST_NOTIFICATION, {
 12 |       lastNotification
 13 |     });
 14 |   },
 15 |   updateChatConfig({ commit }, chatConfig) {
 16 |     commit(types.UPDATE_CHAT_CONFIG, {
 17 |       chatConfig
 18 |     });
 19 |   },
 20 |   updateNumUnreadConversation({ commit }, numUnreadConversation) {
 21 |     commit(types.UPDATE_NUM_UNREAD_CONVERSATION, {
 22 |       numUnreadConversation
 23 |     });
 24 |   },
 25 |   updateLastMessageSentStamp({ commit }, lastMessageSentStamp) {
 26 |     commit(types.UPDATE_LAST_MESSAGE_SENT_STAMP, {
 27 |       lastMessageSentStamp
 28 |     });
 29 |   },
 30 |   updateIsPresenceAway({ commit }, isPresenceAway) {
 31 |     commit(types.UPDATE_IS_PRESENCE_AWAY, {
 32 |       isPresenceAway
 33 |     });
 34 |   },
 35 |   updateLastPresence({ commit }, lastPresence) {
 36 |     commit(types.UPDATE_LAST_PRESENCE, {
 37 |       lastPresence
 38 |     });
 39 |   },
 40 | 
 41 |   // Conversation List
 42 |   addConversationToList({ commit }, conversation) {
 43 |     commit(types.ADD_CONVERSATION_TO_LIST, { conversation });
 44 |   },
 45 |   updateConversationList({ commit }, conversationList) {
 46 |     commit(types.UPDATE_CONVERSATION_LIST, {
 47 |       conversationList
 48 |     });
 49 |   },
 50 |   removeConversationFromList({ commit }, conversation) {
 51 |     commit(types.REMOVE_CONVERSATION_FROM_LIST, { conversation });
 52 |   },
 53 |   reorderConversationByConversation({ commit }, conversation) {
 54 |     commit(types.REORDER_CONVERSATIONS_BY_CONVERSATION, { conversation });
 55 |   },
 56 | 
 57 |   // Conversation
 58 |   addMessageToConversation({ commit }, addMessageToConversation) {
 59 |     const { conversation, messageToAdd } = addMessageToConversation;
 60 |     commit(types.ADD_MESSAGE_TO_CONVERSATION, { conversation, messageToAdd });
 61 |   },
 62 |   clearUnreadCounterConversation({ commit }, conversation) {
 63 |     commit(types.CLEAR_UNREAD_COUNTER_CONVERSATION, { conversation });
 64 |   },
 65 |   plusUnreadCounterConversation({ commit }, conversation) {
 66 |     commit(types.PLUS_UNREAD_COUNTER_CONVERSATION, { conversation });
 67 |   },
 68 |   setChatboxStateConversation({ commit }, setChatboxStateConversation) {
 69 |     const { conversation, chatboxState } = setChatboxStateConversation;
 70 |     commit(types.SET_CHATBOX_STATE_CONVERSATION, {
 71 |       conversation,
 72 |       chatboxState
 73 |     });
 74 |   },
 75 |   updateActiveConversation({ commit }, activeConversation) {
 76 |     commit(types.UPDATE_ACTIVE_CONVERSATION, {
 77 |       activeConversation
 78 |     });
 79 |   },
 80 |   updateActiveConversationIsTyping({ commit }, isTyping) {
 81 |     commit(types.UPDATE_ACTIVE_CONVERSATION_IS_TYPING, {
 82 |       isTyping
 83 |     });
 84 |   },
 85 | 
 86 |   addMessageToDelayedList({ commit }, msg) {
 87 |     commit(types.ADD_MESSAGE_TO_DELAYED_LIST, { msg });
 88 |   },
 89 |   updateDelayIncomingMessages({ commit }, bool) {
 90 |     commit(types.UPDATE_DELAY_INCOMING_MESSAGES, { bool });
 91 |   },
 92 | 
 93 |   // Old Conversation
 94 |   updateOldConversation({ commit }, updateOldConversation) {
 95 |     const { conversation, oldConversation } = updateOldConversation;
 96 |     commit(types.UPDATE_OLD_CONVERSATION, { conversation, oldConversation });
 97 |   },
 98 |   updateOldConversationLastStamp({ commit }, updateOldConversationLastStamp) {
 99 |     const { oldConversation, lastStamp } = updateOldConversationLastStamp;
100 |     commit(types.UPDATE_OLD_CONVERSATION_LAST_STAMP, {
101 |       oldConversation,
102 |       lastStamp
103 |     });
104 |   },
105 |   updateOldConversationNoResult({ commit }, updateOldConversationNoResult) {
106 |     const { oldConversation, bool } = updateOldConversationNoResult;
107 |     commit(types.UPDATE_OLD_CONVERSATION_NO_RESULT, { oldConversation, bool });
108 |   },
109 |   updateOldConversationLastRetrievedId(
110 |     { commit },
111 |     updateOldConversationLastRetrievedId
112 |   ) {
113 |     const {
114 |       oldConversation,
115 |       lastRetrievedId
116 |     } = updateOldConversationLastRetrievedId;
117 |     commit(types.UPDATE_OLD_CONVERSATION_LAST_RETRIEVED_ID, {
118 |       oldConversation,
119 |       lastRetrievedId
120 |     });
121 |   },
122 |   updateOldConversationLastMessageId(
123 |     { commit },
124 |     updateOldConversationLastMessageId
125 |   ) {
126 |     const {
127 |       oldConversation,
128 |       lastMessageId
129 |     } = updateOldConversationLastMessageId;
130 |     commit(types.UPDATE_OLD_CONVERSATION_LAST_MESSAGE_ID, {
131 |       oldConversation,
132 |       lastMessageId
133 |     });
134 |   },
135 |   updateLockAutoLoadOldMessages({ commit }, bool) {
136 |     commit(types.UPDATE_LOCK_AUTO_LOAD_OLD_MESSAGES, {
137 |       bool
138 |     });
139 |   },
140 |   clearOldConversation({ commit }, oldConversation) {
141 |     commit(types.CLEAR_OLD_CONVERSATION, {
142 |       oldConversation
143 |     });
144 |   },
145 | 
146 |   // Chat Store
147 |   resetChatStore({ commit }) {
148 |     commit(types.RESET_CHAT_STORE);
149 |   }
150 | };
151 | 
152 | export default actions;
153 | 


--------------------------------------------------------------------------------
/store/chat/mutations.js:
--------------------------------------------------------------------------------
  1 | import Vue from 'vue';
  2 | import * as types from './mutation-types';
  3 | 
  4 | const mutations = {
  5 |   // Chatbox Global States
  6 |   [types.UPDATE_CHATBOX_EMOJI](state, { chatboxEmoji }) {
  7 |     state.chatboxEmoji = chatboxEmoji;
  8 |   },
  9 |   [types.UPDATE_LAST_NOTIFICATION](state, { lastNotification }) {
 10 |     state.lastNotification = lastNotification;
 11 |   },
 12 |   [types.UPDATE_CHAT_CONFIG](state, { chatConfig }) {
 13 |     state.chatConfig = chatConfig;
 14 |   },
 15 |   [types.UPDATE_NUM_UNREAD_CONVERSATION](state, { numUnreadConversation }) {
 16 |     state.numUnreadConversation = numUnreadConversation;
 17 |   },
 18 |   [types.UPDATE_LAST_MESSAGE_SENT_STAMP](state, { lastMessageSentStamp }) {
 19 |     state.lastMessageSentStamp = lastMessageSentStamp;
 20 |   },
 21 |   [types.UPDATE_IS_PRESENCE_AWAY](state, { isPresenceAway }) {
 22 |     state.isPresenceAway = isPresenceAway;
 23 |   },
 24 |   [types.UPDATE_LAST_PRESENCE](state, { lastPresence }) {
 25 |     state.lastPresence = lastPresence;
 26 |   },
 27 | 
 28 |   // Conversation List
 29 |   [types.ADD_CONVERSATION_TO_LIST](state, { conversation }) {
 30 |     state.conversationList.push(conversation);
 31 |   },
 32 |   [types.UPDATE_CONVERSATION_LIST](state, { conversationList }) {
 33 |     state.conversationList = conversationList;
 34 |   },
 35 |   [types.REMOVE_CONVERSATION_FROM_LIST](state, { conversation }) {
 36 |     state.conversationList = state.conversationList.filter(
 37 |       conv => conv.contact.username !== conversation.contact.username
 38 |     );
 39 |   },
 40 |   [types.REORDER_CONVERSATIONS_BY_CONVERSATION](state, { conversation }) {
 41 |     const reorderedConversations = state.conversationList.filter(
 42 |       conv => conv.contact.username !== conversation.contact.username
 43 |     );
 44 |     reorderedConversations.unshift(conversation);
 45 |     state.conversationList = reorderedConversations;
 46 |   },
 47 | 
 48 |   [types.ADD_MESSAGE_TO_DELAYED_LIST](state, { msg }) {
 49 |     state.delayedMessageList.push(msg);
 50 |   },
 51 |   [types.UPDATE_DELAY_INCOMING_MESSAGES](state, { bool }) {
 52 |     state.delayIncomingMessages = bool;
 53 |   },
 54 | 
 55 |   // Conversation
 56 |   [types.ADD_MESSAGE_TO_CONVERSATION](state, { conversation, messageToAdd }) {
 57 |     const duplicateMessage = conversation.list.find(
 58 |       message =>
 59 |         message.stampDate.getTime() === messageToAdd.stampDate.getTime() &&
 60 |         message.from.toUpperCase() === messageToAdd.from.toUpperCase()
 61 |     );
 62 | 
 63 |     if (duplicateMessage === undefined) {
 64 |       const conversationListClone = conversation.list.slice(0);
 65 |       conversationListClone.push(messageToAdd);
 66 |       conversationListClone.sort(function(a, b) {
 67 |         var dateA = new Date(a.stampDate),
 68 |           dateB = new Date(b.stampDate);
 69 |         return dateA - dateB;
 70 |       });
 71 |       Vue.set(conversation, 'list', conversationListClone);
 72 |     }
 73 |   },
 74 |   [types.CLEAR_UNREAD_COUNTER_CONVERSATION](state, { conversation }) {
 75 |     Vue.set(conversation, 'numUnreadMsgs', 0);
 76 |   },
 77 |   [types.PLUS_UNREAD_COUNTER_CONVERSATION](state, { conversation }) {
 78 |     Vue.set(conversation, 'numUnreadMsgs', conversation.numUnreadMsgs + 1);
 79 |   },
 80 |   [types.SET_CHATBOX_STATE_CONVERSATION](
 81 |     state,
 82 |     { conversation, chatboxState }
 83 |   ) {
 84 |     Vue.set(conversation, 'chatboxState', chatboxState);
 85 |   },
 86 |   [types.UPDATE_ACTIVE_CONVERSATION](state, { activeConversation }) {
 87 |     state.activeConversation = activeConversation;
 88 |   },
 89 |   [types.UPDATE_ACTIVE_CONVERSATION_IS_TYPING](state, { isTyping }) {
 90 |     state.activeConversation.isTyping = isTyping;
 91 |   },
 92 | 
 93 |   // Old Conversation
 94 |   [types.UPDATE_OLD_CONVERSATION](state, { conversation, oldConversation }) {
 95 |     Vue.set(conversation, 'oldConversation', oldConversation);
 96 |   },
 97 |   [types.UPDATE_OLD_CONVERSATION_LAST_STAMP](
 98 |     state,
 99 |     { oldConversation, lastStamp }
100 |   ) {
101 |     Vue.set(oldConversation, 'lastStamp', lastStamp);
102 |   },
103 |   [types.UPDATE_OLD_CONVERSATION_NO_RESULT](state, { oldConversation, bool }) {
104 |     Vue.set(oldConversation, 'noResult', bool);
105 |   },
106 |   [types.UPDATE_OLD_CONVERSATION_LAST_RETRIEVED_ID](
107 |     state,
108 |     { oldConversation, lastRetrievedId }
109 |   ) {
110 |     Vue.set(oldConversation, 'lastRetrievedId', lastRetrievedId);
111 |   },
112 |   [types.UPDATE_OLD_CONVERSATION_LAST_MESSAGE_ID](
113 |     state,
114 |     { oldConversation, lastMessageId }
115 |   ) {
116 |     Vue.set(oldConversation, 'lastMessageId', lastMessageId);
117 |   },
118 |   [types.UPDATE_LOCK_AUTO_LOAD_OLD_MESSAGES](state, { bool }) {
119 |     state.lockAutoLoadOldMessages = bool;
120 |   },
121 |   [types.CLEAR_OLD_CONVERSATION](state, { oldConversation }) {
122 |     Vue.set(oldConversation, 'lastStamp', null);
123 |     Vue.set(oldConversation, 'lastMessageId', '');
124 |     Vue.set(oldConversation, 'lastRetrievedId', '');
125 |     Vue.set(oldConversation, 'isLoading', false);
126 |     Vue.set(oldConversation, 'list', []);
127 |     Vue.set(oldConversation, 'noResult', false);
128 |   },
129 | 
130 |   // Chat State
131 |   [types.RESET_CHAT_STORE](state) {
132 |     state.conversationList = [];
133 |     state.activeConversation = null;
134 |     state.chatboxEmoji = 'confused';
135 |     state.lastNotification = new Date();
136 |     state.numUnreadConversation = 0;
137 |     state.lastMessageSentStamp = new Date();
138 |     state.isPresenceAway = false;
139 |     state.lastPresence = 'off';
140 |     state.lockAutoLoadOldMessages = false;
141 |   }
142 | };
143 | 
144 | export default mutations;
145 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Opa - A XMPP Chat Client for the Web
  2 | 
  3 | - [Introduction](#introduction)
  4 | - [Features](#features)
  5 | - [Requirements](#requirements)
  6 | - [Getting started](#getting-started)
  7 |   - [Installation](#installation)
  8 |   - [Configuration](#configuration)
  9 |   - [Internationalization](#internationalization)
 10 |   - [Compatibility](#compatibility)
 11 | - [Credits](#credits)
 12 | 
 13 | # Introduction
 14 | 
 15 | <p align="center">
 16 |   <img src="https://i.imgur.com/eQsT8zn.png" alt="Logo Opa"/>
 17 | </p>
 18 | 
 19 | **Opa** is an **open-source XMPP chat client for the Web (SSR)** entirely built on top of **Vue**, **NuxtJS** and **ElementUI** that follows the coolest trends out there ~~bye bye Flash and Desktop clients~~!
 20 | 
 21 | _**Trivia**_: "Opa", among many meanings in Brazil, is also used informally as a greeting!
 22 | 
 23 | ---
 24 | 
 25 | **Opa** boasts a modern design having a clean interface that offers a good user experience. The interface is inspired by numerous web apps that already exist in the Javascript environment, such as **WhatsApp Web**, **Telegram Web**, **Discord**, **Rocket Chat**, etc... It was born as an internal project to fill the **absence of an XMPP client** that did not need an **installation on each machine**, was **developed with current techs**, had a **modern design** and supported **common features** for a chat in a corporate environment.
 26 | 
 27 | ---
 28 | 
 29 | Opa has a demo available which is at latest version. For testing there are two users:
 30 | 
 31 | Username: darth
 32 | Password: 1234
 33 | 
 34 | Username: luke
 35 | Password: 1234
 36 | 
 37 | The demo is available here, have fun: https://www.credija.com.br/opa-demo
 38 | 
 39 | ---
 40 | 
 41 | Has some feature in mind, suggestion or come across a bug? Open an [Issue](https://github.com/credija/opa/issues) so we can discuss 👍
 42 | 
 43 | ---
 44 | 
 45 | # Features
 46 | 
 47 | Check the features here: https://github.com/credija/opa/wiki/Features
 48 | 
 49 | # Requirements
 50 | 
 51 | Currently Opa uses https://polyfill.io/v3/polyfill.min.js?flags=gated for better support because your browser needs to support these three features:
 52 | 
 53 | - https://caniuse.com/#search=es6
 54 | - https://caniuse.com/#feat=flexbox
 55 | - https://caniuse.com/#feat=intersectionobserver
 56 | - https://caniuse.com/#feat=atob-btoa
 57 | 
 58 | Also, your XMPP server must support MSM/RSM (for message archiving).
 59 | 
 60 | # Getting Started
 61 | 
 62 | The initial idea of Opa was to be a plug-n-play client to any XMPP server.
 63 | 
 64 | Following this you have two ways of running this app:
 65 | 
 66 | - Building and running from source with NodeJS
 67 | 
 68 | - Using the Docker container provided and overwriting the global configuration file
 69 | 
 70 | ## Installation
 71 | 
 72 | ### NodeJS (From Source)
 73 | 
 74 | The installation with NodeJS will need you to install the package manager [Yarn](https://yarnpkg.com/pt-BR/). You can install Yarn on an NodeJS environment with this command:
 75 | 
 76 | ```
 77 | npm install yarn -g
 78 | ```
 79 | 
 80 | After installing Yarn you will need to clone the project into a folder. This folder will be where the Opa server will run from:
 81 | 
 82 | ```
 83 | git clone https://github.com/credija/opa.git
 84 | ```
 85 | 
 86 | After clonning the project you will need to navigate to this folder and run the command below to build and start Opa:
 87 | 
 88 | ```
 89 | yarn build && yarn start
 90 | ```
 91 | 
 92 | You will, however, need to connect to your XMPP server. To do that you need to overwrite the /your-project-clone-folder/static/config/app-config.json (explanation of each option in the config file is in [Configuration](#configuration) section).
 93 | 
 94 | ### Docker
 95 | 
 96 | The installation with Docker is very straightforward. You will, however, need to connect to your XMPP server. To do that you need to overwrite the /app/static/config/app-config.json (explanation of each option in the config file is in [Configuration](#configuration) section):
 97 | 
 98 | ```
 99 | docker run --name opa -d --restart=always \
100 |   --publish 3000:3000 \
101 |   --volume /opt/your-config.json:/app/static/config/app-config.json \
102 |   -m 512MB \
103 |   credija/opa
104 | ```
105 | 
106 | ---
107 | 
108 | ## Configuration
109 | 
110 | To connect to an XMPP server you will need to overwrite the [app-config.json](https://github.com/credija/opa/blob/master/static/config/app-config.json). The options are these:
111 | 
112 | - **XMPP_SERVER_ADDRESS**: The address for the HTTP/S BOSH or WSS WebSocket connection.
113 | - **XMPP_SERVER_DOMAIN**: Your chat domain.
114 | - **APP_LOCALE**: The locale needs to be set in the format "language-country", like "en-us", "pt-br", etc since this value will be used to format date through the app.
115 | - **SHOW_USERS_WITHOUT_GROUPS**: A boolean. True for showing users which don't have groups (will be put in a 'Others' group), and false for hiding these users.
116 | 
117 | ## Internationalization
118 | 
119 | Opa has a plug-n-play structure for locales, which are stored in /static/locales.
120 | 
121 | There is right now these languages:
122 | 
123 | - en-US
124 | - pt-BR
125 | - de-DE (Thanks @matzeso for this translation)
126 | 
127 | If you want to test Opa but it doesn't have your language you can develop your own translation to the app following the example provided by [en-us.json](https://github.com/credija/opa/blob/master/static/locales/en-us.json).
128 | 
129 | Once finished send a [pull request](https://github.com/credija/opa/pulls) on the develop branch with your translation so we can add it to Opa.
130 | 
131 | **Note:** It's important to remember that the file needs to follow the 'language-country.json' format which is the same used in the **APP_LOCALE** option.
132 | 
133 | ## Compatibility
134 | 
135 | Tested Browsers:
136 | 
137 | - Google Chrome
138 | - Firefox
139 | - Opera
140 | - Microsoft Edge
141 | 
142 | Not Tested:
143 | 
144 | - IE
145 | - Safari
146 | 
147 | ---
148 | 
149 | Tested XMPP Servers:
150 | 
151 | - Ignite Realtime: Openfire Server version 4.3.2
152 | - ejabberd version 18.04
153 | 
154 | # Credits
155 | 
156 | - Thanks to the IT team of [Sicoob Credija](https://credija.com.br) which provided support, testing, and infrastructure for the development of this project.
157 | 
158 | - Thanks [VueJS](https://github.com/vuejs/vue), [NuxtJS](https://github.com/nuxt/nuxt.js/), [Element-UI](https://github.com/ElemeFE/element), [StropheJS](https://github.com/strophe/strophejs) for the core libraries of this project.
159 | 
160 | - The emojis used in this app comes from the [Twemoji](https://github.com/twitter/twemoji) project and are licensed under CC-BY 4.0.
161 | 


--------------------------------------------------------------------------------
/components/contact-list/contact-list.js:
--------------------------------------------------------------------------------
  1 | import PresenceEnum from '@/enums/presence-enum';
  2 | import ArrayUtils from '@/utils/array-utils';
  3 | import includes from 'lodash.includes';
  4 | import RemoveAccents from 'remove-accents';
  5 | 
  6 | let XmppService,
  7 |   DocTitleService,
  8 |   FaviconService = null;
  9 | 
 10 | export default {
 11 |   name: 'ContactList',
 12 |   props: ['showContactList'],
 13 |   watch: {
 14 |     showContactList: function(newVal) {
 15 |       if (newVal === false) {
 16 |         this.searchTerm = '';
 17 |       } else {
 18 |         this.focusContactSearch();
 19 |       }
 20 |     }
 21 |   },
 22 |   data() {
 23 |     return {
 24 |       activeAccordion: -1,
 25 |       searchTerm: '',
 26 |       searchedRosterList: []
 27 |     };
 28 |   },
 29 |   computed: {
 30 |     rosterListByGroup() {
 31 |       return ArrayUtils.getRosterByGroup(this.rosterList);
 32 |     },
 33 |     rosterList() {
 34 |       return this.$store.state.app.rosterList;
 35 |     },
 36 |     isLoadingRoster() {
 37 |       return this.$store.state.app.isLoadingRoster;
 38 |     },
 39 |     conversationList() {
 40 |       return this.$store.state.chat.conversationList;
 41 |     },
 42 |     activeConversation() {
 43 |       return this.$store.state.chat.activeConversation;
 44 |     },
 45 |     showOffline() {
 46 |       const chatConfig = this.$store.state.chat.chatConfig;
 47 |       if (chatConfig) {
 48 |         return chatConfig.showOffline;
 49 |       }
 50 |       return false;
 51 |     },
 52 |     chatConfig() {
 53 |       return this.$store.state.chat.chatConfig;
 54 |     }
 55 |   },
 56 |   beforeCreate() {
 57 |     if (process.browser) {
 58 |       XmppService = require('@/services/xmpp-service').default.constructor(
 59 |         this.$store
 60 |       );
 61 |       DocTitleService = require('@/services/doc-title-service').default.constructor(
 62 |         this.$store
 63 |       );
 64 |       FaviconService = require('@/services/favicon-service').default.constructor(
 65 |         this.$store
 66 |       );
 67 |     }
 68 |   },
 69 |   mounted() {
 70 |     this.focusContactSearch();
 71 |   },
 72 |   methods: {
 73 |     getPresenceBorderColor(idPresence) {
 74 |       return PresenceEnum.getBorderColor(idPresence).value;
 75 |     },
 76 |     openConversation(contact) {
 77 |       this.changePresenceUserAction();
 78 |       let conversation = this.conversationList.find(
 79 |         conversationFind =>
 80 |           conversationFind.contact.username.toUpperCase() ===
 81 |           contact.username.toUpperCase()
 82 |       );
 83 | 
 84 |       if (conversation === undefined) {
 85 |         conversation = {
 86 |           contact,
 87 |           list: [],
 88 |           numUnreadMsgs: 0,
 89 |           isTyping: false,
 90 |           chatboxState: '',
 91 |           oldConversation: {
 92 |             lastStamp: null,
 93 |             lastMessageId: '',
 94 |             lastRetrievedId: '',
 95 |             isLoading: false,
 96 |             list: []
 97 |           }
 98 |         };
 99 |         this.$store.dispatch('chat/updateLockAutoLoadOldMessages', true);
100 |         this.setNewConversation(conversation);
101 | 
102 |         // Lock autoload feature as a workaround for setLastMessageId and getOldMessages concurrently
103 |         XmppService.setLastMessageId(conversation)
104 |           .then(() => {
105 |             return XmppService.getOldMessages(conversation, true);
106 |           })
107 |           .then(res => {
108 |             if (res.length < 15) {
109 |               XmppService.getOldMessages(conversation);
110 |             }
111 |             return Promise.resolve(true);
112 |           })
113 |           .then(() => {
114 |             this.emitCoolTextareaFocus();
115 |             this.$store.dispatch('chat/updateLockAutoLoadOldMessages', false);
116 |           });
117 |       } else {
118 |         if (conversation.numUnreadMsgs !== 0) {
119 |           const numUnreadConversation = this.$store.state.chat
120 |             .numUnreadConversation;
121 |           this.$store.dispatch(
122 |             'chat/updateNumUnreadConversation',
123 |             numUnreadConversation - 1
124 |           );
125 |           FaviconService.updateFavicon();
126 |           DocTitleService.updateTitle();
127 |         }
128 |         this.$store.dispatch(
129 |           'chat/clearUnreadCounterConversation',
130 |           conversation
131 |         );
132 |         this.$store.dispatch('chat/updateLockAutoLoadOldMessages', false);
133 |         this.setNewConversation(conversation);
134 |         this.emitCoolTextareaFocus();
135 |       }
136 |     },
137 |     setNewConversation(conversation) {
138 |       if (this.activeConversation !== null) {
139 |         this.saveChatboxState();
140 |       }
141 | 
142 |       this.$store.dispatch('chat/updateActiveConversation', conversation);
143 |       this.$emit('switchActiveMenu');
144 | 
145 |       this.scrollMessageBoxToBottom();
146 |     },
147 |     emitCoolTextareaFocus() {
148 |       setTimeout(function() {
149 |         const coolTextarea = document.getElementById('cool-textarea');
150 |         if (coolTextarea) {
151 |           this.$nuxt.$emit('COOL_TEXTAREA_FOCUS');
152 |         }
153 |       });
154 |     },
155 |     searchContactByName() {
156 |       if (this.searchTerm.length > 2) {
157 |         this.searchedRosterList = this.rosterList.filter(
158 |           obj =>
159 |             includes(
160 |               RemoveAccents.remove(obj.name.toUpperCase()),
161 |               RemoveAccents.remove(this.searchTerm.toUpperCase())
162 |             ) && obj.group !== 'UNKNOWN'
163 |         );
164 |       } else {
165 |         this.searchedRosterList = [];
166 |       }
167 |     },
168 |     showOfflineContact(contact) {
169 |       if (contact.presence.id === 'off' && !this.showOffline) {
170 |         return false;
171 |       }
172 |       return true;
173 |     },
174 |     profileImageSrc(username) {
175 |       const profileImageList = this.$store.state.app.profileImageList;
176 |       const profileImageObj = profileImageList.find(
177 |         profileImage =>
178 |           profileImage.username.toUpperCase() === username.toUpperCase()
179 |       );
180 |       let imgSrc = null;
181 |       if (profileImageObj !== undefined && profileImageObj.bin) {
182 |         imgSrc =
183 |           'data:' + profileImageObj.type + ';base64,' + profileImageObj.bin;
184 |       }
185 |       return imgSrc;
186 |     },
187 |     focusContactSearch() {
188 |       setTimeout(function() {
189 |         const contactSearchInput = document.getElementById('contact-search');
190 |         if (contactSearchInput) contactSearchInput.focus();
191 |       });
192 |     },
193 | 
194 |     getProfileAvatar(username) {
195 |       XmppService.updateUserAvatar(username);
196 |     }
197 |   }
198 | };
199 | 


--------------------------------------------------------------------------------
/components/chat-box/chat-box.html:
--------------------------------------------------------------------------------
  1 | <div class="chat-box">
  2 |     <div v-show="activeConversation !== null">
  3 |         <el-row class="pl1 py2 bb1 v-align" :class="{ 'dark-border': chatConfig.darkMode === true}">
  4 |             <el-col :span="3" class="max-size-header mr1">
  5 |                 <img v-if="profileImageSrc !== null" class="b-full-circle img-fit b1 clickable" 
  6 |                 :src="profileImageSrc" width="80" height="80"
  7 |                 @click="clickContactDetails()"/>
  8 |                 <div class="user-icon b-full-circle b1 clickable text-center v-align" 
  9 |                     v-if="profileImageSrc === null" @click="clickContactDetails()">
 10 |                     <font-awesome-icon icon="user" class="ml3"/>
 11 |                 </div>
 12 |             </el-col>
 13 |             <el-col :span="16">
 14 |                 <el-row>
 15 |                     <strong class="clickable" @click="clickContactDetails()" v-if="activeConversation">
 16 |                         {{ activeConversation.contact.name }}
 17 |                     </strong>
 18 |                 </el-row>
 19 |                 <el-row class="pb1" v-if="!isDisconnected">
 20 |                     <font-awesome-icon icon="circle"
 21 |                         class="text-label" 
 22 |                         :class="getPresenceColor(activeConversation.contact.presence.id)" 
 23 |                         v-if="activeConversation && !activeConversation.isTyping"/>
 24 |                     <span v-if="activeConversation && !activeConversation.isTyping">
 25 |                         {{ presenceValue }}
 26 |                     </span>
 27 |                     <span class="text-teal-clean text-bold" v-if="activeConversation && activeConversation.isTyping">
 28 |                         {{ $t('chatbox.typingLabel') }}
 29 |                     </span>
 30 |                 </el-row>
 31 |             </el-col>
 32 |             <el-col :span="6">
 33 |                 <el-button type="danger" size="mini" class="float-right mr1" plain @click="closeActiveConversation">
 34 |                     <font-awesome-icon icon="times"/>
 35 |                 </el-button>
 36 |                 <el-button type="info" size="mini" class="float-right mr1" plain @click="minimizeActiveConversation">
 37 |                     <font-awesome-icon icon="minus"/>
 38 |                 </el-button>
 39 |             </el-col>
 40 |         </el-row>
 41 |         
 42 |         <el-row class="by1 size-conversation px3 z-index-1" id="message-box" 
 43 |             :class="{ 'bg-white': chatConfig.darkMode === undefined || chatConfig.darkMode === false, 
 44 |                 'dark-theme': chatConfig.darkMode === true,
 45 |                 'dark-border': chatConfig.darkMode === true}">
 46 | 
 47 |             <el-row class="text-center my1" v-if="activeConversation && activeConversation.oldConversation.noResult !== true">
 48 |                 <intersect @enter="autoLoadOldMessages()" v-if="showAutoloading">
 49 |                     <el-button class="unclickable" round plain>
 50 |                         <font-awesome-icon icon="sync" class="icon-medium text-primary" spin></font-awesome-icon>
 51 |                     </el-button>
 52 |                 </intersect>
 53 |                 <el-button class="unclickable" round plain v-if="showAutoloading === false">
 54 |                     <font-awesome-icon icon="sync" class="icon-medium text-primary" spin></font-awesome-icon>
 55 |                 </el-button>
 56 |             </el-row>
 57 | 
 58 |             <el-row class="text-center my1" v-if="activeConversation && activeConversation.oldConversation.noResult === true">
 59 |                 <strong>{{ $t('chatbox.oldMessagesLimit') }}</strong>
 60 |             </el-row>
 61 | 
 62 |             <el-row v-if="activeConversation && activeConversation.list.length !== 0">
 63 |                 <el-row v-for="(message, key) in activeConversation.list" :key="key">
 64 |                     <div id="newMessages">
 65 |                         <div class="float-right p1 m1 b-rounded message-style" 
 66 |                             :class="{ 'bg-light-teal': chatConfig.darkMode === undefined || chatConfig.darkMode === false, 
 67 |                                 'bg-primary': chatConfig.darkMode === true }"
 68 |                             v-if="message.ownMessage">
 69 |                             <p class="m0">
 70 |                                 <span v-html="parseMessage(message.msg)"></span>
 71 |                                 <small class="float-right text-gray"> 
 72 |                                     {{ message.stampDate | isDateToday(appLocale) }}
 73 |                                 </small>
 74 |                             </p>
 75 |                         </div>
 76 | 
 77 |                         <div class="float-left p1 m1 b-rounded message-style" 
 78 |                             :class="{ 'bg-light-gray': chatConfig.darkMode === undefined || chatConfig.darkMode === false, 
 79 |                                 'bg-dark-light': chatConfig.darkMode === true }"    
 80 |                             v-if="message.ownMessage === false">
 81 |                             <p class="m0">
 82 |                                 <span v-html="parseMessage(message.msg)"></span>
 83 |                                 <small class="float-right text-gray"> 
 84 |                                     {{ message.stampDate | isDateToday(appLocale) }}
 85 |                                 </small>
 86 |                             </p>
 87 |                         </div>
 88 |                     </div>
 89 |                 </el-row>
 90 |             </el-row>
 91 |             
 92 |         </el-row>
 93 |         <el-row>
 94 |             <el-col :span="2" class="text-center">
 95 |                 <coolpicker
 96 |                     :emojiData="emojiData" 
 97 |                     :emojiGroups="emojiGroups"
 98 |                     :recentEmojisFeat="true"
 99 |                     recentEmojisStorage="local"
100 |                     recentEmojiStorageName="recent-emojis"
101 |                     :skinsSelection="true"
102 |                     :appendToBody="true"
103 |                     :pickerWidth="495"
104 |                     @emojiUnicodeAdded="selectEmoji"></coolpicker>
105 |             </el-col>
106 |             <el-col :span="20" class="mt1">
107 |                 <div class="chatbox-bg">
108 |                     <cool-textarea 
109 |                         :content.sync="chatBoxForm.message" 
110 |                         ref="coolTextarea" 
111 |                         @enterKey="submitMessage()" 
112 |                         @sendTypingSignal="sendTypingSignal()"
113 |                         @contentChanged="chatboxContentChanged"></cool-textarea>
114 |                 </div>
115 |             </el-col>
116 |             <el-col :span="2" class="text-center margin-chatbox-btn">
117 |                 <el-button class=" button-clean" native-type="button"
118 |                     :disabled="isDisconnected" :loading="isSendingMessage" size="mini" @click="submitMessage()">
119 |                     <font-awesome-icon icon="chevron-circle-right" class="icon-medium"/>
120 |                 </el-button>
121 |             </el-col>
122 |         </el-row>
123 |     </div>
124 |     <div v-show="activeConversation === null">
125 |         <el-row class="text-center mt7">
126 |             <img src="svg-emoji/pensive-emoji.svg" height="180px" width="180px" alt="Pensive Face" v-if="chatboxEmoji === 'pensive'"/>
127 |             <img src="svg-emoji/thinking-emoji.svg" height="180px" width="180px" alt="Thinking Face" v-if="chatboxEmoji === 'thinking'"/>
128 |             <img src="svg-emoji/happy-emoji.svg" height="180px" width="180px" alt="Thinking Face" v-if="chatboxEmoji === 'happy'"/>
129 |             <img src="svg-emoji/confused-emoji.svg" height="180px" width="180px" alt="Confused Face" v-if="chatboxEmoji === 'confused'"/>
130 |         </el-row>
131 |         <el-row class="text-center text-bold text-big mt6">
132 |             <span>{{ $t('chat.noOpenConversation') }} </span>
133 |         </el-row>
134 |         <el-row class="text-center text-bold text-big">
135 |             <span>{{ $t('chat.tipNewConversation') }}  <font-awesome-icon icon="comment" class="icon-medium"/></span>
136 |         </el-row>
137 |     </div>
138 |     <contact-details class="z-index-3" :activeContact="activeContact" 
139 |         :showContactDetails="showContactDetails" 
140 |         @closeContactDetails="closeContactDetails"></contact-details>
141 | </div>
142 | 


--------------------------------------------------------------------------------
/components/chat-box/chat-box.js:
--------------------------------------------------------------------------------
  1 | import PresenceEnum from '@/enums/presence-enum';
  2 | import ContactDetails from '@/components/contact-details/contact-details.vue';
  3 | import MessageParser from '@/services/message-parser';
  4 | import CoolTextarea from '@/components/cool-textarea/cool-textarea.vue';
  5 | import { CoolPicker } from 'cool-emoji-picker';
  6 | 
  7 | import EmojiData from 'cool-emoji-picker/src/emoji-data/en/emoji-all-groups.json';
  8 | import EmojiGroups from 'cool-emoji-picker/src/emoji-data/emoji-groups.json';
  9 | 
 10 | import CacheUtils from '@/utils/cache-utils';
 11 | let XmppService = null;
 12 | 
 13 | export default {
 14 |   name: 'ChatBox',
 15 |   components: {
 16 |     'contact-details': ContactDetails,
 17 |     'cool-textarea': CoolTextarea,
 18 |     coolpicker: CoolPicker
 19 |   },
 20 |   data() {
 21 |     return {
 22 |       isSendingMessage: false,
 23 |       chatBoxForm: {
 24 |         message: ''
 25 |       },
 26 |       signalTimeout: null,
 27 |       isTyping: false,
 28 |       showContactDetails: false,
 29 |       chatboxHeight: 0,
 30 |       chatboxMaxHeight: 0,
 31 |       showAutoloading: false
 32 |     };
 33 |   },
 34 |   created() {
 35 |     this.$nuxt.$on('RE_RENDER_CHATBOX', () => {
 36 |       let componentHeight = 0;
 37 |       const screenHeight = window.innerHeight;
 38 | 
 39 |       if (screenHeight >= 910) {
 40 |         componentHeight = 680;
 41 |       } else if (screenHeight >= 760) {
 42 |         componentHeight = 540;
 43 |       } else if (screenHeight >= 660) {
 44 |         componentHeight = 500;
 45 |       } else {
 46 |         componentHeight = 470;
 47 |       }
 48 | 
 49 |       const newHeight = componentHeight - (this.chatboxHeight - 17);
 50 | 
 51 |       this.chatboxMaxHeight = componentHeight;
 52 |       this.setMessageBoxHeight(newHeight);
 53 | 
 54 |       this.scrollMessageBoxToBottom();
 55 |     });
 56 |   },
 57 |   beforeDestroy() {
 58 |     this.$nuxt.$off('RE_RENDER_CHATBOX');
 59 |   },
 60 |   watch: {
 61 |     chatboxHeight: function(newVal, oldVal) {
 62 |       const messageBox = document.getElementById('message-box');
 63 | 
 64 |       if (oldVal === 0) {
 65 |         this.chatboxMaxHeight = messageBox.offsetHeight;
 66 |         if (newVal !== 17) {
 67 |           const newHeight = messageBox.offsetHeight - newVal / 2;
 68 |           this.setMessageBoxHeight(newHeight);
 69 |         }
 70 |       } else if (newVal > oldVal && oldVal !== 0) {
 71 |         const newHeight = messageBox.offsetHeight - (newVal - oldVal);
 72 |         this.setMessageBoxHeight(newHeight);
 73 |       } else {
 74 |         const newHeight = messageBox.offsetHeight + (oldVal - newVal);
 75 |         if (this.chatboxMaxHeight >= newHeight) {
 76 |           this.setMessageBoxHeight(newHeight);
 77 |         }
 78 |       }
 79 | 
 80 |       this.scrollMessageBoxToBottom();
 81 |     },
 82 |     activeConversation: function() {
 83 |       this.showAutoloading = false;
 84 |       this.$nextTick().then(() => {
 85 |         const ctx = this;
 86 |         setTimeout(function() {
 87 |           ctx.showAutoloading = true;
 88 |         }, 0);
 89 |       });
 90 |     }
 91 |   },
 92 |   computed: {
 93 |     xmppClient() {
 94 |       return this.$store.state.app.xmppClient;
 95 |     },
 96 |     authUser() {
 97 |       return this.$store.state.app.authUser;
 98 |     },
 99 |     activeContact() {
100 |       if (this.activeConversation !== null) {
101 |         return this.$store.state.chat.activeConversation.contact;
102 |       }
103 |       return null;
104 |     },
105 |     activeConversation() {
106 |       return this.$store.state.chat.activeConversation;
107 |     },
108 |     conversationList() {
109 |       return this.$store.state.chat.conversationList;
110 |     },
111 |     profileImageSrc() {
112 |       if (this.activeContact !== null) {
113 |         const profileImageList = this.$store.state.app.profileImageList;
114 |         const profileImageObj = profileImageList.find(
115 |           profileImage =>
116 |             profileImage.username.toUpperCase() ===
117 |             this.activeContact.username.toUpperCase()
118 |         );
119 |         let imgSrc = null;
120 |         if (profileImageObj !== undefined && profileImageObj.bin) {
121 |           imgSrc =
122 |             'data:' + profileImageObj.type + ';base64,' + profileImageObj.bin;
123 |         }
124 |         return imgSrc;
125 |       }
126 |       return null;
127 |     },
128 |     isDisconnected() {
129 |       return this.$store.state.app.isDisconnected;
130 |     },
131 |     chatboxEmoji() {
132 |       return this.$store.state.chat.chatboxEmoji;
133 |     },
134 |     chatConfig() {
135 |       return this.$store.state.chat.chatConfig;
136 |     },
137 |     appLocale() {
138 |       return this.$store.state.app.appLocale;
139 |     },
140 |     lockAutoLoadOldMessages() {
141 |       return this.$store.state.chat.lockAutoLoadOldMessages;
142 |     },
143 |     presenceValue() {
144 |       let presenceValue = '';
145 |       if (this.activeConversation.contact.presence.id === 'on') {
146 |         presenceValue = this.$t('profile.onlinePresence');
147 |       } else if (this.activeConversation.contact.presence.id === 'dnd') {
148 |         presenceValue = this.$t('profile.busyPresence');
149 |       } else if (this.activeConversation.contact.presence.id === 'away') {
150 |         presenceValue = this.$t('profile.awayPresence');
151 |       } else if (this.activeConversation.contact.presence.id === 'xa') {
152 |         presenceValue = this.$t('profile.awayPresence');
153 |       } else {
154 |         presenceValue = this.$t('profile.offlinePresence');
155 |       }
156 |       return presenceValue;
157 |     },
158 |     emojiData() {
159 |       return EmojiData;
160 |     },
161 |     emojiGroups() {
162 |       return EmojiGroups;
163 |     }
164 |   },
165 |   beforeCreate() {
166 |     if (process.browser) {
167 |       XmppService = require('@/services/xmpp-service').default.constructor(
168 |         this.$store
169 |       );
170 |     }
171 |   },
172 |   methods: {
173 |     submitMessage() {
174 |       if (this.chatBoxForm.message.trim().length !== 0) {
175 |         this.send();
176 |       }
177 |     },
178 |     send() {
179 |       this.changePresenceUserAction();
180 |       const newDate = new Date();
181 | 
182 |       XmppService.sendMessage(
183 |         this.chatBoxForm.message,
184 |         this.activeConversation.contact.username,
185 |         newDate
186 |       );
187 | 
188 |       const conversation = this.conversationList.find(
189 |         conversationFind =>
190 |           conversationFind.contact.username.toUpperCase() ===
191 |           this.activeConversation.contact.username.toUpperCase()
192 |       );
193 | 
194 |       if (this.activeConversation.list.length === 0) {
195 |         newDate.setSeconds(newDate.getSeconds() - 5);
196 |         this.$store.dispatch('chat/updateOldConversationLastStamp', {
197 |           oldConversation: this.activeConversation.oldConversation,
198 |           lastStamp: newDate.toISOString()
199 |         });
200 |       }
201 | 
202 |       const messageToAdd = {
203 |         msg: this.chatBoxForm.message,
204 |         ownMessage: true,
205 |         from: this.authUser.username,
206 |         stampDate: newDate
207 |       };
208 | 
209 |       if (conversation !== undefined) {
210 |         this.$store.dispatch('chat/addMessageToConversation', {
211 |           conversation: conversation,
212 |           messageToAdd: messageToAdd
213 |         });
214 |       } else {
215 |         this.$store.dispatch('chat/addMessageToConversation', {
216 |           conversation: this.activeConversation,
217 |           messageToAdd: messageToAdd
218 |         });
219 |         this.$store.dispatch(
220 |           'chat/addConversationToList',
221 |           this.activeConversation
222 |         );
223 |       }
224 | 
225 |       this.$store.dispatch(
226 |         'chat/reorderConversationByConversation',
227 |         this.activeConversation
228 |       );
229 |       CacheUtils.saveConversationList(
230 |         this.authUser.username,
231 |         this.conversationList
232 |       );
233 | 
234 |       this.chatBoxForm.message = '';
235 |       this.scrollMessageBoxToBottom();
236 | 
237 |       this.$refs.coolTextarea.cleanText();
238 |       this.chatboxHeight = this.$refs.coolTextarea.$el.clientHeight;
239 |     },
240 |     getPresenceColor(idPresence) {
241 |       return PresenceEnum.getIconColor(idPresence).value;
242 |     },
243 |     minimizeActiveConversation() {
244 |       this.saveChatboxState();
245 |       this.changePresenceUserAction();
246 |       XmppService.sendChatSignal(
247 |         this.activeConversation.contact.username,
248 |         'paused'
249 |       );
250 |       this.$store.dispatch(
251 |         'chat/clearOldConversation',
252 |         this.activeConversation.oldConversation
253 |       );
254 |       this.$store.dispatch('chat/updateActiveConversation', null);
255 |     },
256 |     closeActiveConversation() {
257 |       this.changePresenceUserAction();
258 |       XmppService.sendChatSignal(
259 |         this.activeConversation.contact.username,
260 |         'paused'
261 |       );
262 |       this.$store.dispatch(
263 |         'chat/removeConversationFromList',
264 |         this.activeConversation
265 |       );
266 |       CacheUtils.saveConversationList(
267 |         this.authUser.username,
268 |         this.conversationList
269 |       );
270 |       this.$store.dispatch('chat/updateActiveConversation', null);
271 |     },
272 |     sendTypingSignal() {
273 |       const vueContext = this;
274 |       if (this.isTyping === false) {
275 |         XmppService.sendChatSignal(
276 |           this.activeConversation.contact.username,
277 |           'composing'
278 |         );
279 |         this.isTyping = true;
280 |       }
281 | 
282 |       clearTimeout(this.signalTimeout);
283 |       this.signalTimeout = setTimeout(function() {
284 |         if (vueContext.activeConversation !== null) {
285 |           XmppService.sendChatSignal(
286 |             vueContext.activeConversation.contact.username,
287 |             'paused'
288 |           );
289 |         }
290 |         vueContext.isTyping = false;
291 |       }, 1000);
292 |     },
293 |     clickContactDetails() {
294 |       this.changePresenceUserAction();
295 |       this.showContactDetails = true;
296 |     },
297 |     closeContactDetails() {
298 |       this.changePresenceUserAction();
299 |       this.showContactDetails = false;
300 |     },
301 |     selectEmoji(emoji) {
302 |       this.$refs.coolTextarea.addText(emoji);
303 |     },
304 |     parseMessage(msg) {
305 |       return MessageParser.parseChatboxMessage(msg);
306 |     },
307 |     chatboxContentChanged() {
308 |       this.chatboxHeight = this.$refs.coolTextarea.$el.clientHeight;
309 |     },
310 |     setMessageBoxHeight(height) {
311 |       const messageBox = document.getElementById('message-box');
312 |       if (messageBox !== undefined && messageBox !== null) {
313 |         messageBox.style.height = height + 'px';
314 |         messageBox.style.minHeight = height + 'px';
315 |         messageBox.style.maxHeight = height + 'px';
316 |       }
317 |     },
318 |     autoLoadOldMessages() {
319 |       this.changePresenceUserAction();
320 |       if (this.lockAutoLoadOldMessages === false) {
321 |         XmppService.getOldMessages(this.activeConversation).then(res => {
322 |           if (res.length < 15) {
323 |             XmppService.getOldMessages(this.activeConversation);
324 |           }
325 |         });
326 |       }
327 |     }
328 |   }
329 | };
330 | 


--------------------------------------------------------------------------------
/global-styles/main.scss:
--------------------------------------------------------------------------------
  1 | // Layout Relatives
  2 | @import 'spacing-help/spacing-help.scss';
  3 | 
  4 | body {
  5 |   background-image: url('~assets/img/background-login.jpg');
  6 |   background-size: cover;
  7 |   -ms-background-size: cover;
  8 |   -o-background-size: cover;
  9 |   -moz-background-size: cover;
 10 |   -webkit-background-size: cover;
 11 |   margin: 0px;
 12 |   font-family: 'Roboto', sans-serif;
 13 |   font-size: 14px;
 14 | }
 15 | 
 16 | @media (min-height: 910px) {
 17 |   body {
 18 |     overflow: hidden;
 19 |   }
 20 | }
 21 | 
 22 | @media (min-height: 760px) and (max-height: 910px) {
 23 |   body {
 24 |     overflow: hidden;
 25 |   }
 26 | }
 27 | 
 28 | @media (min-height: 650px) and (max-height: 760px) {
 29 |   body {
 30 |     overflow: hidden;
 31 |   }
 32 | }
 33 | 
 34 | @media (max-height: 650px) {
 35 |   body {
 36 |     overflow: auto;
 37 |   }
 38 | }
 39 | 
 40 | .flex-row {
 41 |   display: flex;
 42 |   flex-direction: row;
 43 | }
 44 | 
 45 | .flex-column {
 46 |   display: flex;
 47 |   flex-direction: column;
 48 | }
 49 | 
 50 | .flex {
 51 |   flex: 1 0 auto;
 52 | }
 53 | 
 54 | .flex-grow {
 55 |   flex-grow: 1;
 56 | }
 57 | 
 58 | .ov-hidden {
 59 |   overflow: hidden !important;
 60 | }
 61 | 
 62 | .bottom-fixed {
 63 |   position: fixed;
 64 |   bottom: 0;
 65 | }
 66 | 
 67 | .template-app {
 68 |   display: flex;
 69 |   min-height: 100vh;
 70 |   flex-direction: column;
 71 |   width: 100%;
 72 | }
 73 | 
 74 | .dark-theme,
 75 | .dark-theme .el-collapse-item__content,
 76 | .dark-theme .user-icon-mini,
 77 | .dark-theme .user-icon {
 78 |   background-color: #282d38 !important;
 79 |   color: #ffffff !important;
 80 | }
 81 | 
 82 | .dark-theme > div > .el-collapse-item__header {
 83 |   background-color: #282d38 !important;
 84 |   border-color: #4a5468 !important;
 85 |   color: #ffffff !important;
 86 | }
 87 | 
 88 | .dark-theme.el-dialog__wrapper {
 89 |   background-color: inherit !important;
 90 | }
 91 | 
 92 | .dark-theme.el-dialog__wrapper > .el-dialog {
 93 |   background-color: #282d38 !important;
 94 |   border-color: #4a5468 !important;
 95 | }
 96 | 
 97 | .dark-theme .el-dialog__body,
 98 | .dark-theme .el-dialog__title {
 99 |   color: #ffffff !important;
100 | }
101 | 
102 | .dark-theme.dark-border,
103 | .dark-theme .dark-border {
104 |   border-color: #4a5468 !important;
105 | }
106 | 
107 | .dark-theme.dark-light {
108 |   background-color: #5f6c86 !important;
109 | }
110 | 
111 | .dark-theme .dark-bg {
112 |   background-color: #4a5468 !important;
113 | }
114 | 
115 | .dark-theme .dark-hover:hover {
116 |   background-color: #4a5468 !important;
117 | }
118 | 
119 | .dark-theme .middle-text > span {
120 |   background-color: #282d38 !important;
121 | }
122 | 
123 | .dark-theme .button-clean {
124 |   background-color: #5f6c86 !important;
125 |   color: #fafafa !important;
126 |   border: none !important;
127 | 
128 |   :hover {
129 |     color: #00b3b3 !important;
130 |   }
131 | }
132 | 
133 | // Native Elements
134 | small {
135 |   font-size: 11px;
136 | }
137 | 
138 | // Custom styles for components
139 | .button-clean {
140 |   background-color: #e6e6e6 !important;
141 |   border: none !important;
142 | }
143 | 
144 | // Fix Bug Filter Dropdown
145 | .hidden-filter > div > .el-table__column-filter-trigger {
146 |   visibility: hidden !important;
147 | }
148 | 
149 | // Borders
150 | .bl8 {
151 |   border-left: #dcdfe6 solid 8px;
152 | }
153 | 
154 | .br1 {
155 |   border-right: #dcdfe6 solid 1px;
156 | }
157 | 
158 | .bl1 {
159 |   border-left: #dcdfe6 solid 2px;
160 | }
161 | 
162 | .bb1 {
163 |   border-bottom: #dcdfe6 solid 2px;
164 | }
165 | 
166 | .by1 {
167 |   border-top: #dcdfe6 solid 1px;
168 |   border-bottom: #dcdfe6 solid 1px;
169 | }
170 | 
171 | .bb0 {
172 |   border-bottom: none !important;
173 | }
174 | 
175 | .b1 {
176 |   border: #dcdfe6 solid 1px;
177 | }
178 | 
179 | .b4 {
180 |   border: #dcdfe6 solid 4px;
181 | }
182 | 
183 | .b-teal {
184 |   border-color: #00b3b3;
185 | }
186 | 
187 | .b-rounded {
188 |   border-radius: 15px;
189 | }
190 | 
191 | .b-rounded-25 input {
192 |   border-radius: 25px !important;
193 | }
194 | 
195 | .b-half-circle {
196 |   border-radius: 50%;
197 | }
198 | 
199 | .b-full-circle {
200 |   border-radius: 100%;
201 | }
202 | 
203 | .b-teal {
204 |   border-color: #00b3b3;
205 | }
206 | 
207 | .b-teal-clean {
208 |   border-color: #1fa699;
209 | }
210 | 
211 | .b-away {
212 |   border-color: #ffcc80;
213 | }
214 | 
215 | .b-danger {
216 |   border-color: #f56c6c;
217 | }
218 | 
219 | .b-light-gray {
220 |   border-color: #f0f1f5;
221 | }
222 | 
223 | // Text Relatives
224 | .text-danger {
225 |   color: #f56c6c;
226 | }
227 | 
228 | .text-primary {
229 |   color: teal !important;
230 | }
231 | 
232 | .text-warning {
233 |   color: #cccc00;
234 | }
235 | 
236 | .text-teal-clean {
237 |   color: #1fa699;
238 | }
239 | 
240 | .text-light-gray {
241 |   color: #c0c4cc !important;
242 | }
243 | 
244 | .text-gray {
245 |   color: #b8bdc6 !important;
246 | }
247 | 
248 | .text-away {
249 |   color: #ffcc80;
250 | }
251 | 
252 | .text-info {
253 |   color: #3ca1c3;
254 | }
255 | 
256 | .text-white {
257 |   color: whitesmoke !important;
258 | }
259 | 
260 | .link-text {
261 |   color: #1a0dab;
262 | }
263 | 
264 | .text-bold {
265 |   font-weight: bold;
266 | }
267 | 
268 | .text-italic {
269 |   font-style: italic;
270 | }
271 | 
272 | .text-center {
273 |   text-align: center;
274 | }
275 | 
276 | .text-justify {
277 |   text-align: justify;
278 | }
279 | 
280 | .text-left {
281 |   text-align: left;
282 | }
283 | 
284 | .text-right {
285 |   text-align: right;
286 | }
287 | 
288 | .text-decoration-none {
289 |   text-decoration: none;
290 | }
291 | 
292 | .text-label {
293 |   font-size: 14px !important;
294 | }
295 | 
296 | .text-medium {
297 |   font-size: 18px !important;
298 | }
299 | 
300 | .text-big {
301 |   font-size: 24px !important;
302 | }
303 | 
304 | .text-att {
305 |   font-size: 44px !important;
306 | }
307 | 
308 | .icon-medium {
309 |   font-size: 20px !important;
310 | }
311 | 
312 | .icon-big {
313 |   font-size: 90px !important;
314 | }
315 | 
316 | a {
317 |   text-decoration: none !important;
318 | }
319 | 
320 | .v-align {
321 |   display: flex;
322 |   align-items: center;
323 | }
324 | 
325 | .v-align-wrap {
326 |   display: flex;
327 |   align-items: center;
328 |   flex-wrap: wrap;
329 | }
330 | 
331 | .middle-text {
332 |   text-align: center;
333 |   line-height: 0.1em;
334 | }
335 | 
336 | .middle-text span {
337 |   background-color: #ffffff;
338 |   padding: 0 10px;
339 | }
340 | 
341 | // Background Relatives
342 | .bg-semi-transparent {
343 |   background: rgba(255, 255, 255, 0.8) !important;
344 | }
345 | 
346 | .bg-alert {
347 |   background-color: #ffcdd2 !important;
348 | }
349 | 
350 | .bg-danger {
351 |   background-color: #f56c6c !important;
352 | }
353 | 
354 | .bg-primary {
355 |   background-color: teal;
356 | }
357 | 
358 | .bg-warning {
359 |   background-color: #cccc00;
360 | }
361 | 
362 | .bg-teal-clean {
363 |   background-color: #1fa699;
364 | }
365 | 
366 | .bg-light-teal {
367 |   background-color: #ccffe4;
368 | }
369 | 
370 | .bg-white {
371 |   background-color: #ffffff !important;
372 | }
373 | 
374 | .bg-light-gray {
375 |   background-color: #e6e6e6 !important;
376 | }
377 | 
378 | .bg-gray {
379 |   background-color: #e6e6e6 !important;
380 | }
381 | 
382 | .bg-gray-hover:hover {
383 |   background-color: #e6e6e6 !important;
384 | }
385 | 
386 | .bg-info {
387 |   background-color: #3ca1c3;
388 | }
389 | 
390 | .bg-dark-light {
391 |   background-color: #5f6c86;
392 | }
393 | 
394 | .bg-white-clean {
395 |   background-color: #f2f2f2;
396 | }
397 | 
398 | // Position Relatives
399 | .float-right {
400 |   float: right !important;
401 | }
402 | 
403 | .float-left {
404 |   float: left !important;
405 | }
406 | 
407 | .size-max-card {
408 |   height: 50px !important;
409 |   max-height: 50px !important;
410 | }
411 | 
412 | .size-full {
413 |   height: 100% !important;
414 |   width: 100% !important;
415 | }
416 | 
417 | .h-full {
418 |   height: 100% !important;
419 | }
420 | 
421 | .w-full {
422 |   width: 100% !important;
423 | }
424 | 
425 | .w-half {
426 |   width: 50% !important;
427 | }
428 | 
429 | .w-one-quarter {
430 |   width: 25% !important;
431 | }
432 | 
433 | .hidden {
434 |   display: none !important;
435 | }
436 | 
437 | // Pointer Relatives
438 | .clickable {
439 |   cursor: pointer !important;
440 |   pointer-events: auto !important;
441 | }
442 | 
443 | .unclickable {
444 |   pointer-events: none;
445 | }
446 | 
447 | .unselectable {
448 |   -webkit-user-select: none;
449 |   -moz-user-select: none;
450 |   -ms-user-select: none;
451 |   user-select: none;
452 | }
453 | 
454 | .disable-anchors {
455 |   pointer-events: none;
456 |   cursor: default;
457 | }
458 | 
459 | // Img and Icon Relatives
460 | .img-fit {
461 |   object-fit: contain;
462 |   background: white;
463 | }
464 | 
465 | .max-size-chat-image {
466 |   max-width: 240px;
467 |   max-height: 240px;
468 | }
469 | 
470 | .user-icon {
471 |   background: white;
472 |   font-size: 45px !important;
473 |   height: 80px !important;
474 |   width: 80px !important;
475 | }
476 | 
477 | .user-icon-mini {
478 |   background: white;
479 |   font-size: 20px !important;
480 |   height: 48px !important;
481 |   width: 48px !important;
482 | }
483 | 
484 | .img-opacity:hover {
485 |   opacity: 0.5;
486 | }
487 | 
488 | // Emoji
489 | img.emoji {
490 |   height: 1.5em;
491 |   width: 1.5em;
492 |   margin: 0 0.05em 0 0.1em;
493 |   vertical-align: -0.1em;
494 | }
495 | 
496 | .emoji-mini > img.emoji {
497 |   height: 1em;
498 |   width: 1em;
499 | }
500 | 
501 | // Vue Transitions
502 | // Enter Bottom to Top / Exit Botttom
503 | .slide-bt-leave-active,
504 | .slide-bt-enter-active {
505 |   transition: all 300ms ease-in-out;
506 |   overflow: hidden;
507 | }
508 | .slide-bt-enter {
509 |   opacity: 0;
510 |   transform: translate(0, 100%);
511 |   overflow: hidden;
512 | }
513 | .slide-bt-leave-to {
514 |   opacity: 0;
515 |   transform: translate(0, 100%);
516 |   overflow: hidden;
517 | }
518 | 
519 | // Fade In/Out
520 | .fade-enter-active,
521 | .fade-leave-active {
522 |   transition: opacity 0.5s;
523 | }
524 | .fade-enter,
525 | .fade-leave-to {
526 |   opacity: 0;
527 | }
528 | 
529 | // Enter Right to Left / Exit Left
530 | .slide-rl-leave-active,
531 | .slide-rl-enter-active {
532 |   transition: all 300ms ease-in-out;
533 | }
534 | .slide-rl-enter {
535 |   opacity: 0;
536 |   transform: translate(100%, 0);
537 | }
538 | .slide-rl-leave-to {
539 |   opacity: 0;
540 |   transform: translate(-100%, 0);
541 | }
542 | 
543 | // Scrollbar
544 | ::-webkit-scrollbar {
545 |   width: 12px;
546 | }
547 | ::-webkit-scrollbar-track {
548 |   background-color: #eaeaea;
549 |   border-left: 1px solid #ccc;
550 | }
551 | ::-webkit-scrollbar-thumb {
552 |   background-color: #ccc;
553 | }
554 | ::-webkit-scrollbar-thumb:hover {
555 |   background-color: #aaa;
556 | }
557 | 
558 | // CSS Animations
559 | @-webkit-keyframes fadeIn {
560 |   0% {
561 |     opacity: 0;
562 |   }
563 |   100% {
564 |     opacity: 1;
565 |   }
566 | }
567 | 
568 | @keyframes fadeIn {
569 |   0% {
570 |     opacity: 0;
571 |   }
572 |   100% {
573 |     opacity: 1;
574 |   }
575 | }
576 | 
577 | .fade-in {
578 |   -webkit-animation-duration: 1s;
579 |   animation-duration: 1s;
580 |   -webkit-animation-fill-mode: both;
581 |   animation-fill-mode: both;
582 |   -webkit-animation-name: fadeIn;
583 |   animation-name: fadeIn;
584 | }
585 | 
586 | // Abosolute Styles
587 | .absolute-top {
588 |   position: absolute;
589 |   left: 50%;
590 |   margin-top: 10px;
591 | }
592 | 
593 | // Z-INDEX
594 | .z-index-1 {
595 |   z-index: 1;
596 | }
597 | 
598 | .z-index-2 {
599 |   z-index: 2;
600 | }
601 | 
602 | .z-index-3 {
603 |   z-index: 3;
604 | }
605 | 


--------------------------------------------------------------------------------
/services/xmpp-service.js:
--------------------------------------------------------------------------------
  1 | import XmppUtils from '@/utils/xmpp-utils';
  2 | import { Strophe, $iq, $pres, $msg } from 'strophe.js';
  3 | import StringUtils from '@/utils/string-utils';
  4 | import FormatUtils from '@/utils/format-utils';
  5 | import CacheUtils from '@/utils/cache-utils';
  6 | import 'strophejs-plugin-rsm';
  7 | import '@/strophe/strophe-mam-mod';
  8 | 
  9 | export default {
 10 |   constructor(store, i18n) {
 11 |     this.store = store;
 12 |     this.i18n = i18n;
 13 |     return this;
 14 |   },
 15 | 
 16 |   loginXmpp(username, password) {
 17 |     const appConfig = this.store.state.app.appConfig;
 18 | 
 19 |     let conn = null;
 20 |     let usernameCred = username.toLowerCase();
 21 |     if (!usernameCred.includes(`@${appConfig.XMPP_SERVER_DOMAIN}`)) {
 22 |       usernameCred += `@${appConfig.XMPP_SERVER_DOMAIN}`;
 23 |     }
 24 | 
 25 |     const connUrl = appConfig.XMPP_SERVER_ADDRESS;
 26 |     conn = new Strophe.Connection(connUrl);
 27 |     this.store.dispatch('app/updateXmppClient', conn);
 28 | 
 29 |     conn.connect(usernameCred, password, XmppUtils.onConnect.bind(this));
 30 |   },
 31 | 
 32 |   getRoster() {
 33 |     let setAppLoading = true;
 34 |     const cachedRoster = localStorage.getItem(
 35 |       btoa(`cached-roster-${this.store.state.app.authUser.username}`)
 36 |     );
 37 |     if (cachedRoster !== null) {
 38 |       const parsedCachedRoster = JSON.parse(atob(cachedRoster));
 39 |       this.store.dispatch('app/updateRosterList', parsedCachedRoster);
 40 |       const ctx = this;
 41 |       this.store.state.app.rosterList.forEach(function(rosterObj) {
 42 |         ctx.updateContactPresence(rosterObj);
 43 |       });
 44 |       setAppLoading = false;
 45 |       CacheUtils.loadConversationList(
 46 |         this.store.state.app.authUser.username,
 47 |         parsedCachedRoster,
 48 |         this.store
 49 |       );
 50 |     } else {
 51 |       this.store.dispatch('chat/updateDelayIncomingMessages', false);
 52 |     }
 53 | 
 54 |     const cachedAvatars = localStorage.getItem(
 55 |       btoa(`cached-avatars-${this.store.state.app.authUser.username}`)
 56 |     );
 57 |     if (cachedAvatars !== null) {
 58 |       this.store.dispatch(
 59 |         'app/updateProfileImageList',
 60 |         JSON.parse(atob(cachedAvatars))
 61 |       );
 62 |     }
 63 | 
 64 |     const client = this.store.state.app.xmppClient;
 65 |     const iq = $iq({
 66 |       type: 'get'
 67 |     }).c('query', {
 68 |       xmlns: 'jabber:iq:roster'
 69 |     });
 70 | 
 71 |     this.translation = this.i18n;
 72 | 
 73 |     client.sendIQ(iq, XmppUtils.rosterCallback.bind(this));
 74 |     client.addHandler(XmppUtils.presenceHandler.bind(this), null, 'presence');
 75 |     client.addHandler(
 76 |       XmppUtils.messageHandler.bind(this),
 77 |       null,
 78 |       'message',
 79 |       null,
 80 |       null,
 81 |       null
 82 |     );
 83 |     client.send($pres());
 84 |     this.store.dispatch('chat/updateLastPresence', 'on');
 85 | 
 86 |     const ctx = this;
 87 |     if (setAppLoading) {
 88 |       setTimeout(function() {
 89 |         ctx.store.dispatch('app/updateIsAppLoading', false);
 90 |       }, 3000);
 91 |     }
 92 |   },
 93 | 
 94 |   updateContactPresence(contact) {
 95 |     const appConfig = this.store.state.app.appConfig;
 96 |     const client = this.store.state.app.xmppClient;
 97 | 
 98 |     const check = $pres({
 99 |       type: 'probe',
100 |       to: contact.username + `@${appConfig.XMPP_SERVER_DOMAIN}`
101 |     });
102 |     client.send(check);
103 |   },
104 | 
105 |   updateRosterPresence() {
106 |     const appConfig = this.store.state.app.appConfig;
107 |     const rosterList = this.store.state.app.rosterList;
108 |     const client = this.store.state.app.xmppClient;
109 | 
110 |     for (let i = 0; i < rosterList.length; i++) {
111 |       const check = $pres({
112 |         type: 'probe',
113 |         to: rosterList[i].username + `@${appConfig.XMPP_SERVER_DOMAIN}`
114 |       });
115 |       client.send(check);
116 |     }
117 |   },
118 | 
119 |   sendMessage(msg, to, date) {
120 |     const appConfig = this.store.state.app.appConfig;
121 |     const client = this.store.state.app.xmppClient;
122 | 
123 |     const m = $msg({
124 |       to: to + `@${appConfig.XMPP_SERVER_DOMAIN}`,
125 |       type: 'chat'
126 |     })
127 |       .c('stamp')
128 |       .t(date.toISOString())
129 |       .up()
130 |       .c('body')
131 |       .t(msg);
132 |     client.send(m);
133 |   },
134 | 
135 |   sendChatSignal(jid, notification) {
136 |     const appConfig = this.store.state.app.appConfig;
137 |     const client = this.store.state.app.xmppClient;
138 | 
139 |     const chatSignal = $msg({
140 |       to: jid + `@${appConfig.XMPP_SERVER_DOMAIN}`,
141 |       type: 'chat'
142 |     }).c(notification, { xmlns: Strophe.NS.CHATSTATES });
143 | 
144 |     client.send(chatSignal);
145 |   },
146 |   profileImageService(presence) {
147 |     const profileImageList = this.store.state.app.profileImageList;
148 | 
149 |     const from = StringUtils.removeAfterInclChar(
150 |       presence.getAttribute('from'),
151 |       '@'
152 |     );
153 |     const photo = presence.getElementsByTagName('x')[0];
154 |     let photoUpdate = null;
155 |     if (photo !== undefined) {
156 |       photoUpdate = photo.getElementsByTagName('photo')[0].textContent;
157 |     }
158 | 
159 |     let profileImageObj = profileImageList.find(
160 |       profileImage => profileImage.username.toUpperCase() === from.toUpperCase()
161 |     );
162 |     if (profileImageObj === undefined && photoUpdate !== 'photo-deleted') {
163 |       this.updateUserAvatar(from);
164 |     } else if (photoUpdate === 'photo-deleted') {
165 |       this.store.dispatch('app/removeProfileImageFromList', profileImageObj);
166 |     } else if (photoUpdate !== profileImageObj.hash) {
167 |       this.store.dispatch('app/updateProfileImageHash', {
168 |         profileImage: profileImageObj,
169 |         hash: photoUpdate
170 |       });
171 |       this.updateUserAvatar(profileImageObj.username);
172 |     }
173 |   },
174 |   updateUserAvatar(username) {
175 |     const appConfig = this.store.state.app.appConfig;
176 |     const client = this.store.state.app.xmppClient;
177 | 
178 |     const avatarIq = $iq({
179 |       type: 'get',
180 |       to: username + `@${appConfig.XMPP_SERVER_DOMAIN}`
181 |     }).c('vCard', { xmlns: 'vcard-temp' });
182 |     client.sendIQ(avatarIq, XmppUtils.avatarCallback.bind(this));
183 |   },
184 |   updateLoggedUserVcard() {
185 |     const appConfig = this.store.state.app.appConfig;
186 |     const client = this.store.state.app.xmppClient;
187 |     const clientUsername = StringUtils.removeAfterInclChar(client.jid, '@');
188 | 
189 |     this.store.dispatch('app/updateAuthUser', {
190 |       username: clientUsername,
191 |       presence: { id: 'on', value: 'Online' }
192 |     });
193 | 
194 |     const avatarIq = $iq({
195 |       type: 'get',
196 |       to: clientUsername + `@${appConfig.XMPP_SERVER_DOMAIN}`
197 |     }).c('vCard', { xmlns: 'vcard-temp' });
198 |     client.sendIQ(avatarIq, XmppUtils.vCardLoggedUser.bind(this));
199 |   },
200 | 
201 |   sendChangePresenceSignal(presence) {
202 |     const client = this.store.state.app.xmppClient;
203 |     let presenceSignal = {};
204 | 
205 |     if (presence === 'on') {
206 |       presenceSignal = $pres();
207 |     } else {
208 |       presenceSignal = $pres()
209 |         .c('show')
210 |         .t(presence);
211 |       // TODO: Presence config per user                   .up().c('priority').t(127);
212 |     }
213 | 
214 |     client.send(presenceSignal);
215 |   },
216 | 
217 |   updateProfileImage(profileImage) {
218 |     const client = this.store.state.app.xmppClient;
219 |     const authUser = this.store.state.app.authUser;
220 | 
221 |     FormatUtils.getBase64FromFile(profileImage).then(base64File => {
222 |       const iq = $iq({
223 |         type: 'set'
224 |       })
225 |         .c('vCard', { xmlns: 'vcard-temp' })
226 |         .c('PHOTO')
227 |         .c('TYPE', profileImage.type)
228 |         .up()
229 |         .c('BINVAL', base64File);
230 | 
231 |       client.sendIQ(iq);
232 | 
233 |       this.store.dispatch('app/updateAuthUserImageBin', {
234 |         authUser: authUser,
235 |         type: profileImage.type,
236 |         bin: base64File
237 |       });
238 | 
239 |       const updateAvatarPres = $pres()
240 |         .c('x', { xmlns: 'vcard-temp:x:update' })
241 |         .c('photo', {}, StringUtils.randomIdGenerator())
242 |         .up()
243 |         .c('show')
244 |         .t(authUser.presence.id);
245 |       client.send(updateAvatarPres);
246 |     });
247 |   },
248 | 
249 |   deleteProfileImage() {
250 |     const client = this.store.state.app.xmppClient;
251 |     const authUser = this.store.state.app.authUser;
252 | 
253 |     const iq = $iq({
254 |       type: 'set'
255 |     })
256 |       .c('vCard', { xmlns: 'vcard-temp' })
257 |       .c('PHOTO')
258 |       .c('TYPE', '')
259 |       .up()
260 |       .c('BINVAL', '');
261 | 
262 |     client.sendIQ(iq);
263 | 
264 |     this.store.dispatch('app/updateAuthUserImageBin', {
265 |       authUser: authUser,
266 |       type: undefined,
267 |       bin: undefined
268 |     });
269 | 
270 |     const updateAvatarPres = $pres()
271 |       .c('x', { xmlns: 'vcard-temp:x:update' })
272 |       .c('photo', {}, 'photo-deleted')
273 |       .up()
274 |       .c('show')
275 |       .t(authUser.presence.id);
276 |     client.send(updateAvatarPres);
277 |   },
278 | 
279 |   getOldMessages(conversation, bolOpenConversation) {
280 |     return new Promise((resolve, reject) => {
281 |       const ctx = this;
282 | 
283 |       const appConfig = this.store.state.app.appConfig;
284 |       const client = this.store.state.app.xmppClient;
285 |       const authUser = this.store.state.app.authUser;
286 | 
287 |       let messageBox = document.getElementById('message-box');
288 |       let scrollHeight = null;
289 |       if (messageBox) {
290 |         scrollHeight = messageBox.scrollHeight;
291 |       }
292 | 
293 |       const startOfTime = new Date(1970, 0, 1).toISOString();
294 | 
295 |       if (
296 |         Number(conversation.oldConversation.lastRetrievedId) ===
297 |           Number(conversation.oldConversation.lastMessageId) ||
298 |         conversation.oldConversation.lastMessageId === -1
299 |       ) {
300 |         setTimeout(() => {
301 |           this.store.dispatch('chat/updateOldConversationNoResult', {
302 |             oldConversation: conversation.oldConversation,
303 |             bool: true
304 |           });
305 |         }, 300);
306 |         return;
307 |       }
308 | 
309 |       if (conversation.oldConversation.lastStamp === null) {
310 |         this.store.dispatch('chat/updateOldConversationLastStamp', {
311 |           oldConversation: conversation.oldConversation,
312 |           lastStamp: new Date().toISOString()
313 |         });
314 |       }
315 | 
316 |       let messageList = [];
317 |       const resultIdList = [];
318 | 
319 |       client.mam.query(authUser.username + `@${appConfig.XMPP_SERVER_DOMAIN}`, {
320 |         with:
321 |           conversation.contact.username + `@${appConfig.XMPP_SERVER_DOMAIN}`,
322 |         start: startOfTime,
323 |         end: conversation.oldConversation.lastStamp,
324 |         before: conversation.oldConversation.lastRetrievedId,
325 |         max: 15,
326 |         isGroup: false,
327 |         onMessage: function(message) {
328 |           const resultId = message
329 |             .getElementsByTagName('result')[0]
330 |             .getAttribute('id');
331 |           const stamp = message.getElementsByTagName('stamp')[0];
332 |           const delay = message.getElementsByTagName('delay')[0];
333 | 
334 |           const messageBody = message.getElementsByTagName('body')[0]
335 |             .textContent;
336 |           const from = StringUtils.removeAfterInclChar(
337 |             message.getElementsByTagName('message')[0].getAttribute('from'),
338 |             '@'
339 |           );
340 | 
341 |           let unformattedDate;
342 | 
343 |           if (stamp !== undefined)
344 |             unformattedDate = new Date(stamp.textContent);
345 |           else if (delay !== undefined)
346 |             unformattedDate = new Date(delay.getAttribute('stamp'));
347 | 
348 |           let ownMessage = false;
349 |           if (from === authUser.username) {
350 |             ownMessage = true;
351 |           }
352 |           messageList.push({
353 |             msg: messageBody,
354 |             ownMessage,
355 |             from,
356 |             stampDate: unformattedDate
357 |           });
358 | 
359 |           resultIdList.push(resultId);
360 | 
361 |           return true;
362 |         },
363 |         onComplete: function(response) {
364 |           const firstIdNode = response.getElementsByTagName('first')[0];
365 |           let resultId = null;
366 |           let foundIndex = 0;
367 |           if (firstIdNode !== undefined) {
368 |             resultId = firstIdNode.textContent;
369 |             foundIndex = resultIdList.indexOf(resultId);
370 |           }
371 | 
372 |           messageList = messageList.slice(foundIndex, messageList.length);
373 | 
374 |           ctx.store.dispatch('chat/updateOldConversationLastRetrievedId', {
375 |             oldConversation: conversation.oldConversation,
376 |             lastRetrievedId: resultId
377 |           });
378 | 
379 |           if (messageList.length === 0) {
380 |             ctx.store.dispatch('chat/updateOldConversationNoResult', {
381 |               oldConversation: conversation.oldConversation,
382 |               bool: true
383 |             });
384 |           } else {
385 |             for (let index = 0; index < messageList.length; index++) {
386 |               ctx.store.dispatch('chat/addMessageToConversation', {
387 |                 conversation: conversation,
388 |                 messageToAdd: messageList[index]
389 |               });
390 |             }
391 |           }
392 | 
393 |           setTimeout(function() {
394 |             if (bolOpenConversation) {
395 |               messageBox = document.getElementById('message-box');
396 |               messageBox.scrollTop = messageBox.scrollHeight;
397 |             } else {
398 |               messageBox.scrollTop = messageBox.scrollHeight - scrollHeight;
399 |             }
400 |           });
401 |           resolve(messageList);
402 |         }
403 |       });
404 |     });
405 |   },
406 | 
407 |   setLastMessageId(conversation) {
408 |     return new Promise((resolve, reject) => {
409 |       const ctx = this;
410 | 
411 |       const appConfig = this.store.state.app.appConfig;
412 |       const client = this.store.state.app.xmppClient;
413 |       const authUser = this.store.state.app.authUser;
414 | 
415 |       const startOfTime = new Date(1970, 0, 1).toISOString();
416 | 
417 |       client.mam.query(authUser.username + `@${appConfig.XMPP_SERVER_DOMAIN}`, {
418 |         with:
419 |           conversation.contact.username + `@${appConfig.XMPP_SERVER_DOMAIN}`,
420 |         start: startOfTime,
421 |         end: new Date().toISOString(),
422 |         max: 1,
423 |         isGroup: false,
424 |         onMessage: function() {
425 |           return true;
426 |         },
427 |         onComplete: function(response) {
428 |           const firstIdNode = response.getElementsByTagName('first')[0];
429 |           let resultId = -1;
430 |           if (firstIdNode !== undefined) {
431 |             resultId = firstIdNode.textContent;
432 |           } else {
433 |             ctx.store.dispatch('chat/updateOldConversationNoResult', {
434 |               oldConversation: conversation.oldConversation,
435 |               bool: true
436 |             });
437 |           }
438 |           ctx.store.dispatch('chat/updateOldConversationLastMessageId', {
439 |             oldConversation: conversation.oldConversation,
440 |             lastMessageId: resultId
441 |           });
442 |           resolve(firstIdNode);
443 |         }
444 |       });
445 |     });
446 |   }
447 | };
448 | 


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