Рубрика: Uncategorized

services:
  pgadmin:
    container_name: pgadmin
    image: dpage/pgadmin4:8.11.0
    restart: unless-stopped
    networks:
      - proxynet
    env_file:
      - /data/secrets/${SERVER_DOMAIN}/${SERVER_DOMAIN}.env
    environment:
       PGADMIN_CONFIG_SERVER_MODE: 'False'
       PGADMIN_CONFIG_MASTER_PASSWORD_REQUIRED: 'False'
       PGADMIN_DEFAULT_EMAIL: ${ADMIN_EMAIL}
    labels:
       - "traefik.enable=true"
       - "traefik.http.routers.pgadmin.rule=Host(`pgadmin.${SERVER_DOMAIN}`)"
       - "traefik.http.routers.pgadmin.middlewares=pgadmin-auth"
       - "traefik.http.middlewares.pgadmin-auth.basicauth.usersfile=/httpauth/usersfile.htpasswd"
    volumes:
      - /data/secrets/${SERVER_DOMAIN}/httpauth:/httpauth
      - /data/appdata/pgadmin:/var/lib/pgadmin
networks:
  proxynet:
    external: true

#!/bin/bash

if [ "$(id -u)" != "0" ]; then
    echo -e "\033[31mThis script requires superuser rights.\033[0m"
    exit 0
fi

trap 'echo -e "\033[31minstall.sh: Something went wrong\033[0m"; exit 1' ERR
set -e

export DEBIAN_FRONTEND=noninteractive

echo "Install pgadmin..."
mkdir -p /data/appdata/pgadmin
chown -R 5050:5050 /data/appdata/pgadmin
cd /data/utils
sudo bash env-gen.sh PGADMIN_DEFAULT_PASSWORD
cd /data/pgadmin
sudo docker compose up -d

trap - ERR
echo "Install pgadmin complete"

mkdir -p /data/appdata/pgadmin
chown -R 5050:5050 /data/appdata/pgadmin

sudo bash env-gen.sh PGADMIN_DEFAULT_PASSWORD

cd /data/utils
bash global-env.sh PGADMIN_DEFAULT_EMAIL admin@checkerwars.com
bash global-env.sh SERVER_DOMAIN checkerwars.com

if [ "$(id -u)" != "0" ]; then
    echo -e "\033[31mThis script requires superuser rights.\033[0m"
    exit 0
fi

trap 'echo -e "\033[31minit-docker.sh: Something went wrong\033[0m"; exit 1' ERR
set -e

export DEBIAN_FRONTEND=noninteractive

apt-get install -y apt-transport-https ca-certificates curl software-properties-common
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | gpg --dearmor -o /etc/apt/trusted.gpg.d/docker.gpg
add-apt-repository -y "deb [arch=amd64] https://download.docker.com/linux/ubuntu focal stable"
apt-get update -y
apt-get install -y docker-ce

echo "Creating docker network proxynet..."
docker network create proxynet

trap - ERR
echo "Docker installed"

#!/bin/bash

if [ "$(id -u)" != "0" ]; then
    echo -e "\033[31mThis script requires superuser rights.\033[0m"
    exit 0
fi

trap 'echo -e "\033[31minit-docker.sh: Something went wrong\033[0m"; exit 1' ERR
set -e

export DEBIAN_FRONTEND=noninteractive

apt-get install -y apt-transport-https ca-certificates curl software-properties-common
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | gpg --dearmor -o /etc/apt/trusted.gpg.d/docker.gpg
add-apt-repository -y "deb [arch=amd64] https://download.docker.com/linux/ubuntu focal stable"
apt-get update -y
apt-get install -y docker-ce

echo "Creating docker network proxynet..."
docker network create proxynet

trap - ERR
echo "Docker installed"

services:
  messenger-frontend:
    container_name: messenger-frontend
    build:
      context: .
      target: 'production-stage'
      args:
        VITE_APP_VERSION: 0.3
        VITE_CLIENT_URL: https://messenger.${SERVER_DOMAIN}
        VITE_API_URL: https://msg.${SERVER_DOMAIN}
    environment:
      NODE_ENV: production
    restart: unless-stopped
    networks:
      - proxynet
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.msgfe.rule=Host(`messenger.${SERVER_DOMAIN}`)"
    logging:
      driver: "json-file"
      options:
        max-size: "1m"
networks:
  proxynet:
    external: true

services:
  messenger-frontend-dev:
    container_name: messenger-frontend-dev
    build:
      context: .
      target: 'develop-stage'
    environment:
      NODE_ENV: development
      PORT: 9000
      VITE_APP_VERSION: 0.3
      VITE_CLIENT_URL: https://messenger.${SERVER_DOMAIN}
      VITE_API_URL: https://msg.${SERVER_DOMAIN}
    volumes:
      - .:/app:rw
    command: sh -c "npm install && quasar dev"
    restart: unless-stopped
    networks:
      - proxynet
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.msgfe.rule=Host(`messenger.${SERVER_DOMAIN}`)"
      - "traefik.http.routers.msgfe.entrypoints=https"
      - "traefik.http.routers.msgfe.service=msgfe-service"
      - "traefik.http.services.msgfe-service.loadbalancer.server.port=9000"
    logging:
      driver: "json-file"
      options:
        max-size: "1m"
networks:
  proxynet:
    external: true

# develop stage
FROM node:22.8.0-alpine3.20 AS develop-stage
WORKDIR /app
COPY package*.json ./
RUN npm config set fund false --location=global
RUN npm install -g @quasar/cli
COPY . .


# build stage
FROM develop-stage AS build-stage
RUN npm install

ARG VITE_API_URL
ENV VITE_API_URL=${VITE_API_URL}

ARG VITE_APP_VERSION
ENV VITE_APP_VERSION=${VITE_APP_VERSION}

ARG VITE_CLIENT_URL
ENV VITE_CLIENT_URL=${VITE_CLIENT_URL}

#RUN quasar build
RUN quasar build -m pwa


# production stage
FROM nginx:1.27.1-alpine3.20 AS production-stage
WORKDIR /app
COPY --from=build-stage /app/dist/pwa /usr/share/nginx/html
# COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80

services:
  messenger-backend:
    container_name: messenger-backend
    build:
      context: .
      target: 'production-stage'
    env_file:
      - /data/secrets/${SERVER_DOMAIN}/messenger-backend/app.env
      - /data/secrets/${SERVER_DOMAIN}/messenger-backend/static.env
    environment:
      PORT: 5000
      NODE_ENV: production

      POSTGRES_HOST: postgres
      POSTGRES_USER: messenger
      POSTGRES_DB: messenger
      POSTGRES_PORT: 5432

      WEB_CLIENT_URL: https://messenger.${SERVER_DOMAIN}
      APP_CLIENT_URL: https://localhost
      API_URL: https://msg.${SERVER_DOMAIN}

      ACCESS_TOKEN_MAX_AGE: 60d
      REFRESH_TOKEN_MAX_AGE: 15m
      COOKIE_REFRESH_TOKEN_MAX_AGE: 6048000000
    volumes:
      - /data/appdata/messenger:/app/static/user
    command: ["node", "dist/main.js"]
    restart: unless-stopped
    networks:
      - proxynet
    labels: 
      - "traefik.enable=true"
      - "traefik.http.routers.msgbe.rule=Host(`msg.${SERVER_DOMAIN}`)"
      - "traefik.http.routers.msgbe.entrypoints=https"
      - "traefik.http.routers.msgbe.service=msgbe-service"
      - "traefik.http.services.msgbe-service.loadbalancer.server.port=5000"
    logging:
      driver: "json-file"
      options:
        max-size: "1m"
networks:
  proxynet:
    external: true
    

services:
  messenger-backend-dev:
    container_name: messenger-backend-dev
    build:
      context: .
      target: 'develop-stage'
    env_file:
      - /data/secrets/${SERVER_DOMAIN}/messenger-backend/app.env
      - /data/secrets/${SERVER_DOMAIN}/messenger-backend/static.env
    environment:
      PORT: 5000
      NODE_ENV: development

      POSTGRES_HOST: postgres
      POSTGRES_USER: messenger
      POSTGRES_DB: messenger
      POSTGRES_PORT: 5432

      WEB_CLIENT_URL: https://messenger.${SERVER_DOMAIN}
      APP_CLIENT_URL: https://localhost
      API_URL: https://msg.${SERVER_DOMAIN}

      ACCESS_TOKEN_MAX_AGE: 365d
      REFRESH_TOKEN_MAX_AGE: 365d
      COOKIE_REFRESH_TOKEN_MAX_AGE: 6048000000
    volumes:
      - .:/app:rw
      - /data/appdata/messenger:/app/static/user
    command: sh -c "npm install && npm run start:dev"
    restart: unless-stopped
    networks:
      - proxynet
    labels: 
      - "traefik.enable=true"
      - "traefik.http.routers.msgbe.rule=Host(`msg.${SERVER_DOMAIN}`)"
      - "traefik.http.routers.msgbe.entrypoints=https"
      - "traefik.http.routers.msgbe.service=msgbe-service"
      - "traefik.http.services.msgbe-service.loadbalancer.server.port=5000"
    logging:
      driver: "json-file"
      options:
        max-size: "1m"
networks:
  proxynet:
    external: true
    

# develop stage
FROM node:22.8.0-alpine3.20 AS develop-stage
WORKDIR /app
COPY package*.json ./
RUN npm config set fund false --location=global
COPY . .


# build stage
FROM develop-stage AS build-stage
RUN npm install
RUN npm run build


# production stage
FROM node:22.8.0-alpine3.20 AS production-stage
WORKDIR /app
COPY --from=build-stage /app/node_modules /app/node_modules
COPY --from=build-stage /app/dist /app/dist
COPY --from=build-stage /app/static /app/static
COPY package.json ./
CMD ["node", "dist/main.js"]
EXPOSE 5000

services:
  traefik:
    container_name: traefik
    image: traefik:v3.1.2
    restart: unless-stopped
    env_file:
      - /data/secrets/${SERVER_DOMAIN}/${SERVER_DOMAIN}.env
    command: 
     - "--providers.file.filename=/traefik/certs.yml"
     - "--providers.docker.network=proxynet"
     - "--api.insecure=false"
     - "--api.dashboard=true" 
     - "--providers.docker"
     - "--log=true"
     - "--log.level=${TRAEFIK_LOG_LEVEL}"
     - "--providers.docker.exposedByDefault=false"
    #Entrypoints:
     - "--entrypoints.http.address=:80"
     - "--entrypoints.https.address=:443"
     - "--entrypoints.postgres.address=:5432"
     - "--entrypoints.mariadb.address=:3306"
     - "--entrypoints.http.http.redirections.entrypoint.to=https"
     - "--entrypoints.http.http.redirections.entrypoint.scheme=https"
    #SSL Let's Encrypt:
     - "--entrypoints.https.http.tls.certResolver=le"
     - "--certificatesresolvers.le.acme.tlschallenge=true"
     - "--certificatesresolvers.le.acme.email=${ADMIN_EMAIL}"
     - "--certificatesresolvers.le.acme.storage=/letsencrypt/${SERVER_DOMAIN}.acme.json"
     #Dashboard secure:
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.dashboard.rule=Host(`traefik.${SERVER_DOMAIN}`)"
      - "traefik.http.routers.dashboard.entrypoints=https"
      - "traefik.http.routers.dashboard.tls=true"
      - "traefik.http.routers.dashboard.tls.certresolver=le"
      - "traefik.http.routers.dashboard.service=api@internal"
      - "traefik.http.routers.dashboard.middlewares=auth"
      - "traefik.http.middlewares.auth.basicauth.usersfile=/httpauth/usersfile.htpasswd"
    ports:
      - "80:80"
      - "443:443"
      - "5432:5432"
      - "3306:3306"
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock:ro
      - /data/secrets/${SERVER_DOMAIN}/letsencrypt:/letsencrypt
      - /data/secrets/${SERVER_DOMAIN}/httpauth:/httpauth
      - /data/traefik/certs.yml:/traefik/certs.yml
      - /data/secrets/${SERVER_DOMAIN}/selfsigned:/selfsigned
    logging:
      driver: "json-file"
      options:
        max-size: "1m"
networks:
  default:
    name: proxynet
    external: true

services:
  postgres:
    container_name: postgres
    image: postgres:16.4-alpine3.20
    restart: unless-stopped
    networks:
      - proxynet
    env_file:
      - /data/secrets/${SERVER_DOMAIN}/${SERVER_DOMAIN}.env
    environment:
      PG_DATA: /var/lib/postgresql/data
      POSTGRES_USER: ${POSTGRES_USER}
      POSTGRES_DB: ${POSTGRES_DB}
    volumes:
      - /data/appdata/pgdata:/var/lib/postgresql/data
    labels:
      - "traefik.enable=true"
      - "traefik.tcp.routers.postgresql.rule=HostSNI(*)"
      - "traefik.tcp.services.postgresql.loadbalancer.server.port=5432"
      - "traefik.tcp.routers.postgresql.entrypoints=postgres"
networks:
  proxynet:
    external: true

#!/bin/bash

if [ "$(id -u)" != "0" ]; then
    echo -e "\033[31mThis script requires superuser rights.\033[0m"
    exit 0
fi

trap 'echo -e "\033[31minstall.sh: Something went wrong\033[0m"; exit 1' ERR
set -e

export DEBIAN_FRONTEND=noninteractive

echo "Install postgres..."
cd /data/utils
bash global-env.sh POSTGRES_USER admin
bash global-env.sh POSTGRES_DB postgres
sudo bash env-gen.sh POSTGRES_PASSWORD
cd /data/postgres
sudo docker compose up -d

trap - ERR
echo "Install postgres complete"

cd /data/utils
bash global-env.sh POSTGRES_USER admin
bash global-env.sh POSTGRES_DB postgres

bash global-env.sh SERVER_DOMAIN checkerwars.com

sudo bash env-gen.sh POSTGRES_PASSWORD

cd /data/postgres
sudo docker compose up -d

import { boot } from 'quasar/wrappers';
import axios, { AxiosInstance } from 'axios';

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $axios: AxiosInstance;
    $api: AxiosInstance;
  }
}

const api = axios.create({
  withCredentials: true,
  baseURL: import.meta.env.VITE_API_URL + '/api',
});

api.interceptors.request.use((config) => {
  config.headers.Authorization = `Bearer ${localStorage.getItem(
    'accessToken'
  )}`;
  return config;
});

api.interceptors.response.use(
  (config) => {
    return config;
  },
  async (error) => {
    const originalRequest = error.config;
    if (
      error.response?.status == 401 &&
      error.config &&
      !error.config._isRetry
    ) {
      originalRequest._isRetry = true;
      try {
        const sessionId = localStorage.getItem('sessionId');
        const response = await axios.post(
          `${import.meta.env.VITE_API_URL}/api/refresh`,
          { sessionId, withCredentials: true }
        );
        localStorage.setItem('accessToken', response.data.accessToken);
        return api.request(originalRequest);
      } catch (e) {
        console.log('Not Authorized');
      }
    }
    throw error;
  }
);

export default boot(({ app }) => {
  app.config.globalProperties.$axios = axios;
  app.config.globalProperties.$api = api;
});

export { api };

import { api } from '../boot/axios';
import { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios';
import { ApiResponse, ServerErrorResponse, ApiData } from './api.interfaces';
import { Notify, Loading, QSpinnerCube } from 'quasar';

export function axiosError(e: unknown) {
  if (e instanceof AxiosError) {
    const error = e;
    if (error.response) {
      const errorData = error.response.data as ServerErrorResponse;
      if (errorData && 'message' in errorData) {
        if (Array.isArray(errorData.message)) {
          errorData.message = errorData.message.join(', ');
        }
        return {
          status: error.response.status ?? 500,
          message: errorData.message,
        };
      }

      const errorDataArray = error.response.data as {
        validationErrors: [];
      };
      if (errorDataArray && 'validationErrors' in errorDataArray) {
        return {
          status: error.response.status ?? 500,
          message: 'Ошибка валидации',
        };
      }
    }

    if (error.code === 'ECONNABORTED' || error.message === 'Network Error') {
      return {
        status: 0,
        message: 'Ошибка соединения с сервером',
      };
    }
  } else {
    // Обработка ошибок, не являющихся AxiosError
    console.error(e);
  }

  return {
    status: 0,
    message: 'Неизвестная ошибка',
  };
}

export async function sendApiRequest<T>(
  method: 'get' | 'post' | 'put' | 'delete',
  url: string,
  config: AxiosRequestConfig = {}
): Promise<ApiResponse<T>> {
  try {
    const response: AxiosResponse<T> = await api.request<T>({
      url,
      method,
      ...config,
    });
    return {
      status: response.status,
      response: response.data,
    };
  } catch (error) {
    return axiosError(error);
  }
}

export default class MessengerApi {
  static async roomCreate(
    type: number,
    name: string,
    privacy: number,
    about: string
  ): Promise<ApiResponse<RoomCreate>> {
    return sendApiRequest<RoomCreate>('post', '/room/create', {
      data: {
        type,
        name,
        privacy,
        about,
      },
    });
  }

  static async editAvatar(
    roomId: number,
    imageBlob: Blob,
    cropWidth: number,
    cropHeight: number,
    cropLeft: number,
    cropTop: number
  ): Promise<ApiResponse<EditAvatar>> {
    const formData = new FormData();
    formData.append('roomId', roomId.toString());
    formData.append('image', imageBlob);
    formData.append('cropWidth', cropWidth.toString());
    formData.append('cropHeight', cropHeight.toString());
    formData.append('cropLeft', cropLeft.toString());
    formData.append('cropTop', cropTop.toString());

    return sendApiRequest<EditAvatar>('post', '/room/avatar', {
      data: formData,
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    });
  }

  static async dialogueCreate(
    to: number
  ): Promise<ApiResponse<DialogueCreate>> {
    return sendApiRequest<DialogueCreate>('post', '/room/createDialogue', {
      params: {
        to,
      },
    });
  }

  static async roomGet(idMixed: string): Promise<ApiResponse<Room>> {
    return sendApiRequest<Room>('get', '/room', {
      params: {
        id: idMixed,
      },
    });
  }

actions: {
    async roomCreate(
      type: number,
      name: string,
      privacy: number,
      about: string
    ): Promise<RoomCreate | boolean | { error: string; code: number }> {
      return await setResponse({
        func: MessengerApi.roomCreate,
        args: [type, name, privacy, about],
      });
    },

    async roomGet(
      idMixed: string
    ): Promise<Room | boolean | { error: string; code: number }> {
      return await setResponse({
        func: MessengerApi.roomGet,
        args: [idMixed],
      });
    },
    
    async editAvatar(
      roomId: number,
      imageBlob: Blob,
      cropWidth: number,
      cropHeight: number,
      cropLeft: number,
      cropTop: number
    ): Promise<EditAvatar | boolean | { error: string; code: number }> {
      return await setResponse({
        func: MessengerApi.editAvatar,
        args: [roomId, imageBlob, cropWidth, cropHeight, cropLeft, cropTop],
      });
    },

import { io, Socket } from 'socket.io-client';

const sessionId = localStorage.getItem('sessionId');

export interface Msg {
  msgId: number;
  roomId: number;
  name: string;
  userId: number;
  avatar: string;
  date: string;
  type: number;
  content: string;
  replyTo: number;
}

export interface Online {
  userId: number;
  online: boolean;
  timestamp: number;
  counter: number;
}

export interface Typing {
  userId: number;
  userName: string;
  typing: boolean;
  timestamp: number;
  roomId: number;
}

export interface Exception {
  status: string;
  message: string;
}

export default class SocketService {
  socket = {} as Socket;

  constructor() {
    this.connectToSocket();
  }

  connectToSocket() {
    const timerSocketConnect = setInterval(async () => {
      const accessToken = localStorage.getItem('accessToken');
      if (accessToken !== null) {
        this.socket = io(import.meta.env.VITE_API_URL, {
          withCredentials: true,
          extraHeaders: {
            Authorization: `Bearer ${accessToken}`,
          },
        });
        clearInterval(timerSocketConnect);
      }
    }, 3000);
  }

  disconnectFromSocket() {
    if (this.socket) {
      this.socket.disconnect();
    }
  }

  emit(event: string, data: { sessionId?: string | null }) {
    data.sessionId = sessionId;
    return new Promise((resolve, reject) => {
      if (!this.socket) {
        reject('No socket connection');
      } else {
        this.socket.emit(
          event,
          data,
          (response: { data: object; error: string }) => {
            if (response?.data) {
              resolve(response);
            } else {
              console.error(
                'Error on emit: ' + event + 'Server respose: ' + response //?.error
              );
              reject(response);
            }
          }
        );
      }
    });
  }

  async joinUserToAllRooms(userId: number) {
    return await this.emit('joinUserToAllRooms', { userId });
  }

  async joinToUserRoom(userId: number) {
    return await this.emit('joinToUserRoom', { userId });
  }

  async joinToRoom(roomId: number) {
    return await this.emit('joinToRoom', { roomId });
  }

  async leaveRoom(roomId: number) {
    return await this.emit('leaveRoom', { roomId });
  }

  async callUser(counter = 1) {
    return await this.emit('callUser', { counter });
  }

  async userOffline() {
    return await this.emit('userOffline', {});
  }

  async createMessage(message: object) {
    return await this.emit('createMessage', message);
  }

  async typing(roomId: string) {
    return await this.emit('typing', { roomId });
  }

  async subscribeRoom(roomId: number) {
    return await this.emit('subscribeRoom', { roomId });
  }

  async banUser(userId: number, roomId: number, banned: boolean) {
    return await this.emit('banUser', { userId, roomId, banned });
  }

  onUserOnlineStatus(action: (online: Online) => void) {
    this.socket.on('userOnlineStatus', action);
  }

  onSendMessage(action: (msg: Msg) => void) {
    this.socket.on('sendMessage', action);
  }

  onTyping(action: (typing: Typing) => void) {
    this.socket.on('broadcastTyping', action);
  }

  onException(action: (exception: Exception) => void) {
    this.socket.on('exception', action);
  }

  onConnect(action: () => void) {
    this.socket.on('connect', action);
  }

  onDisconnect(action: () => void) {
    this.socket.on('disconnect', action);
  }
}

<template>
  <router-view />
  <div class="modal-wrapper">
    <transition name="toggleBB">
      <div v-if="showMessage" class="modal modal-message">
        <div class="message" @click="onMessage">
          <div class="truncate-text">
            {{ messageLabel }}
          </div>
        </div>
      </div>
    </transition>

    <transition name="toggleBB">
      <div v-if="showAlert" class="modal modal-error">
        <div class="message">
          <div class="truncate-text">
            {{ alertLabel }}
          </div>
        </div>
      </div>
    </transition>
  </div>

  <div v-if="appStore.srvErrorOverlay" class="srvErrorOverlay">
    <div>
      <div>Что-то пошло не так...</div>
      <button @click="reloadPage">Обновить</button>
    </div>
  </div>

  <div v-if="appStore.loadingOverlay" class="loadingOverlay">
    <qq-spinner />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useAppStore } from './stores/app.store';
import { useUserStore } from '../user/user.store';
import QqSpinner from './QqSpinner.vue';
import SocketService from './socket.service';

export default defineComponent({
  name: 'App',
  components: { QqSpinner },
  data() {
    return {
      showAlert: false,
      showMessage: false,
      alertLabel: '',
      messageLabel: '',
      alertTimeout: {} as NodeJS.Timeout,
      msgTimeout: {} as NodeJS.Timeout,
    };
  },
  setup() {
    const appStore = useAppStore();
    const userStore = useUserStore();
    const socketService = new SocketService();
    appStore.socketService = socketService;
    return { appStore, userStore, socketService };
  },
  async mounted() {
    document.addEventListener('visibilitychange', () => {
      if (document.visibilityState === 'visible') {
        this.socketService.callUser();
      } else {
        this.socketService.userOffline();
      }
    });

    setInterval(() => {
      this.appStore.isSocketConnected = this.socketService.socket.connected;
    }, 2000);

    setTimeout(() => {
      this.initEvents();
      this.joinUserToAllRooms();
    }, 3000);
  },
  methods: {
    joinUserToAllRooms() {
      let timerJoinToAllRooms = setInterval(async () => {
        const accessToken = localStorage.getItem('accessToken');
        if (accessToken !== null) {
          await this.socketService.joinUserToAllRooms(this.userStore.userId);
          clearInterval(timerJoinToAllRooms);
        }
      }, 3000);
    },
    onMessage() {
      this.showAlert = true;
    },
    reloadPage() {
      location.reload();
    },
    initEvents() {
      this.socketService.onConnect(() => {
        this.appStore.isSocketConnected = true;
        console.log('CONNECTED');
        this.joinUserToAllRooms();
      });

      this.socketService.onDisconnect(() => {
        this.appStore.isSocketConnected = false;
        console.error('DISCONNECTED');
      });

      this.socketService.onException((exception) => {
        const error = exception.message;
        this.appStore.setAlertMsg(error);
        console.error(error);
      });

      this.socketService.onUserOnlineStatus((data) => {
        if (data?.userId) {
          this.appStore.userOnline = data;

          if (data.counter <= 1) {
            if (document.visibilityState === 'visible') {
              this.socketService.callUser(data.counter + 1);
            } else {
            }
          }
        }
      });

      this.socketService.onSendMessage((data) => {
        const message = {
          msgId: data.msgId,
          roomId: data.roomId,
          name: data.name,
          userId: data.userId,
          avatar: data.avatar,
          date: data.date,
          type: data.type,
          content: data.content,
          replyTo: data.replyTo,
        };

        this.appStore.lastMessage = message;
      });

      this.socketService.onTyping((data) => {
        const typing = {
          userId: data.userId,
          userName: data.userName,
          typing: data.typing,
          timestamp: data.timestamp,
          roomId: data.roomId,
        };

        this.appStore.typing = typing;
      });
    },
  },
  computed: {
    alertMessage() {
      return this.appStore.alertMessage.timestamp;
    },
    messageAlert() {
      return this.appStore.lastMessage.date;
    },
  },
  watch: {
    alertMessage() {
      clearTimeout(this.alertTimeout);
      this.showAlert = true;
      this.alertLabel = this.appStore.alertMessage.message;
      this.alertTimeout = setTimeout(() => {
        this.showAlert = false;
      }, 3000);
    },
    messageAlert() {
      if (
        this.appStore.activeRoom !== this.appStore.lastMessage.roomId &&
        this.appStore.lastMessage.userId !== this.userStore.userId
      ) {
        clearTimeout(this.msgTimeout);
        this.showMessage = true;

        switch (this.appStore.lastMessage.type) {
          case 1:
            this.messageLabel =
              this.appStore.lastMessage.name +
              ': ' +
              this.appStore.lastMessage.content;
            break;
          default:
            this.messageLabel = this.appStore.lastMessage.name + ': ...';
        }

        this.msgTimeout = setTimeout(() => {
          this.showMessage = false;
        }, 3000);
      }
    },
  },
});
</script>

<style>
body {
  background-size: cover;
  background-color: #ffffff;
  background-image: url('tr.jpg');
  font-family: Roboto, -apple-system, 'Helvetica Neue', Helvetica, Arial,
    sans-serif;
  box-sizing: border-box;
  font-size: 14px;
  direction: ltr;
  unicode-bidi: isolate;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  line-height: 21px;
  overflow: hidden;
}

a {
  text-decoration: none;
  color: black;
}

/* Remove outline on the forms and links */
:active,
:hover,
:focus {
  outline: 0;
  outline-offset: 0;
}

.app-header {
  flex: 0 0 auto;
  padding: 0 5px;
  background: #272727;
  color: white;
  text-align: center;
  height: 60px;
  display: flex;
  flex-direction: row;
  align-items: center;
  z-index: 10000;
}
</style>

<style scoped>
.modal-wrapper {
  display: block;
}

.modal {
  bottom: 0px;
  left: 0px;
  right: 0px;
  position: fixed;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: center;
  z-index: 9500;
  margin-left: 30px;
  margin-right: 30px;
  user-select: none;
  height: 30px;
}

.modal-error {
  margin-bottom: 70px;
  bottom: 0px;
}

.modal-message {
  margin-top: 80px;
  top: 0px;
  cursor: pointer;
}

.message {
  display: flex;
  align-items: center;
  max-width: 100%;
  height: 30px;
  padding: 0 14px 0 15px;
  border-radius: 20px;
  background: #1d1d1d;
  color: rgb(250, 249, 249);
}

.truncate-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes aniUp {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes aniDown {
  to {
    opacity: 0;
  }
}

.toggleBB-enter-active,
.toggleBB-leave-active {
  animation: aniUp 0.3s;
}

.toggleBB-leave-active,
.toggleBB-leave-to {
  animation: aniDown 0.5s;
}

.srvErrorOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(26, 26, 26, 0.97);
  z-index: 10000000;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(228, 228, 228);
  font-size: 20px;
}

.srvErrorOverlay > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 20px;
}

.srvErrorOverlay > div > div {
  margin: 30px 0;
}

.srvErrorOverlay > div > button {
  padding: 15px 70px;
  border: 1px solid rgb(63, 63, 63);
  cursor: pointer;
  background-color: rgb(228, 228, 228);
  font-size: 20px;
  border-radius: 5px;
}

.srvErrorOverlay > div > button:active {
  background-color: rgb(202, 202, 202);
}

.loadingOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(26, 26, 26, 0.185);
  z-index: 10000000;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(228, 228, 228);
  font-size: 20px;
}
</style>

<template>
  <div
    v-if="appStore.showDropMenu"
    @click.self="hide()"
    class="menu-layout"
  ></div>
  <transition name="toggleBB">
    <div v-if="appStore.showDropMenu" class="menu" @click="hide()">
      <div class="items-container">
        <div
          v-for="(item, index) in content"
          :key="index"
          @click="item.click"
          class="item"
          :style="'color:' + item.color"
        >
          <div class="item-icon">
            <div class="icon">
              <svg-icon type="mdi" :path="item.icon"></svg-icon>
            </div>
          </div>
          <div class="item-data">
            <div class="item-text">
              {{ item.title }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script lang="js">
import { defineComponent } from 'vue';
import { useAppStore } from '../common/stores/app.store';
import { useUserStore } from '../user/user.store';
import SvgIcon from '@jamescoyle/vue-icon';

export default defineComponent({
  name: 'DropMenu',
  props: ['content'],
  components: { SvgIcon },
  setup() {
    const appStore = useAppStore();
    const userStore = useUserStore();
    return { appStore, userStore };
  },
  methods: {
    hide() {
      this.appStore.showDropMenu = false;
    },
  },
});
</script>

<style scoped>
.menu-layout {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 19000;
  display: flex;
  flex-direction: column;
}

.menu {
  position: fixed;
  top: 10px;
  right: 8px;
  width: 300px;
  z-index: 20000;
  background-color: #313131;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  box-shadow: 1px 1px 1px #252525;
  user-select: none;
}

.item-arrow {
  color: #dab3b3;
}

.item {
  display: flex;
  flex-direction: row;
  width: 100%;
  min-height: 48px;
  color: #fde2e2;
  padding-left: 15px;
}

.item:active {
  background-color: #3a3a3a;
}

.item-icon {
  display: flex;
  align-items: center;
}

.icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
}

.item-data {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 18px;
  width: 100%;
}

.item-text {
  font-size: 16px;
}

@keyframes aniUp {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes aniDown {
  to {
    opacity: 0;
  }
}

.toggleBB-enter-active,
.toggleBB-leave-active {
  animation: aniUp 0.2s;
}

.toggleBB-leave-active,
.toggleBB-leave-to {
  animation: aniDown 0.15s;
}
</style>