@coopenomics/desktop 2025.11.20-alpha-2 → 2025.11.24-alpha-1

package/extensions/coopgram/README.md

@@ -0,0 +1,65 @@
+# Coopgram Extension
+
+Расширение для интеграции Matrix чата в кооперативную систему.
+
+## Описание
+
+Coopgram предоставляет встроенный Matrix чат для пользователей кооператива. Расширение:
+
+- Получает временный токен аутентификации через GraphQL API
+- Отображает Matrix клиент (Element Web) в iframe
+- Автоматически аутентифицирует пользователя с полученным токеном
+
+## Структура
+
+```
+coopgram/
+├── install.ts                    # Конфигурация рабочего стола
+├── entities/
+│   └── CoopgramChat/             # Entity для работы с Matrix токенами
+│       ├── api/                  # GraphQL запросы через SDK
+│       └── model/                # Store и типы данных из SDK
+├── pages/
+│   └── CoopgramPage/             # Главная страница с iframe
+├── shared/                       # Общие компоненты
+└── widgets/                      # Виджеты
+```
+
+## SDK интеграция
+
+Расширение использует типизированные запросы из SDK:
+
+- **Query**: `Queries.Coopgram.GetToken`
+- **Selector**: `coopgramTokenSelector`
+- **Типы**: Автоматически генерируются из GraphQL схемы
+
+## Работа с iframe URL
+
+1. При загрузке страницы вызывается `coopgramStore.loadToken()`
+2. Entity отправляет типизированный GraphQL запрос через SDK: `Queries.Coopgram.GetToken`
+3. Бэкенд проверяет/создает Matrix пользователя и генерирует токен
+4. Бэкенд формирует полную iframe URL с токеном аутентификации
+5. Store сохраняет полученную ссылку в состоянии (типизировано через SDK)
+6. Страница загружает iframe с готовой ссылкой
+7. Пользователь автоматически входит в Matrix чат
+
+## Конфигурация
+
+- **MATRIX_CLIENT_URL**: URL Element Web клиента
+- **workspace**: 'coopgram'
+- **defaultRoute**: 'chat'
+
+## Архитектура
+
+Расширение построено по принципам Feature-Sliced Design (FSD):
+
+- **Entities**: `CoopgramChat` - бизнес-сущность для работы с Matrix токенами
+- **Pages**: `CoopgramPage` - UI страница без бизнес-логики
+- **Store**: Pinia store для управления состоянием токена
+- **API**: Функции для GraphQL запросов
+
+## Зависимости
+
+- GraphQL API с resolver `getToken`
+- Matrix Synapse сервер
+- Element Web клиент

package/extensions/coopgram/entities/CoopgramChat/api/index.ts

@@ -0,0 +1,19 @@
+import { client } from 'src/shared/api/client';
+import { Queries } from '@coopenomics/sdk';
+import type { ICoopgramAccountStatus } from '../model/types';
+
+async function getAccountStatus(): Promise<ICoopgramAccountStatus> {
+  const { [Queries.Coopgram.GetAccountStatus.name]: output } = await client.Query(
+    Queries.Coopgram.GetAccountStatus.query,
+  );
+
+  return {
+    hasAccount: output.hasAccount,
+    matrixUsername: output.matrixUsername || undefined,
+    iframeUrl: output.iframeUrl || undefined,
+  };
+}
+
+export const api = {
+  getAccountStatus,
+};

package/extensions/coopgram/entities/CoopgramChat/index.ts

@@ -0,0 +1,2 @@
+export * from './api';
+export * from './model';

package/extensions/coopgram/entities/CoopgramChat/model/index.ts

@@ -0,0 +1,2 @@
+export * from './store';
+export * from './types';

package/extensions/coopgram/entities/CoopgramChat/model/store.ts

@@ -0,0 +1,58 @@
+import { defineStore } from 'pinia';
+import { ref, Ref } from 'vue';
+import { api } from '../api';
+import type { ICoopgramAccountStatus } from './types';
+
+const namespace = 'coopgramChatStore';
+
+interface ICoopgramChatStore {
+  accountStatus: Ref<ICoopgramAccountStatus | null>;
+  isLoading: Ref<boolean>;
+  error: Ref<string | null>;
+  loadAccountStatus: () => Promise<ICoopgramAccountStatus | null>;
+  clearAccountStatus: () => void;
+  clearError: () => void;
+}
+
+export const useCoopgramChatStore = defineStore(
+  namespace,
+  (): ICoopgramChatStore => {
+    const accountStatus = ref<ICoopgramAccountStatus | null>(null);
+    const isLoading = ref(false);
+    const error = ref<string | null>(null);
+
+    const loadAccountStatus = async (): Promise<ICoopgramAccountStatus | null> => {
+      isLoading.value = true;
+      error.value = null;
+
+      try {
+        const status = await api.getAccountStatus();
+        accountStatus.value = status;
+        return status;
+      } catch (err) {
+        console.error('Failed to load Coopgram account status:', err);
+        error.value = 'Не удалось получить статус аккаунта. Попробуйте обновить страницу.';
+        return null;
+      } finally {
+        isLoading.value = false;
+      }
+    };
+
+    const clearAccountStatus = () => {
+      accountStatus.value = null;
+    };
+
+    const clearError = () => {
+      error.value = null;
+    };
+
+    return {
+      accountStatus,
+      isLoading,
+      error,
+      loadAccountStatus,
+      clearAccountStatus,
+      clearError,
+    };
+  },
+);

package/extensions/coopgram/entities/CoopgramChat/model/types.ts

@@ -0,0 +1,3 @@
+import type { Queries } from '@coopenomics/sdk';
+
+export type ICoopgramAccountStatus = Queries.Coopgram.GetAccountStatus.IOutput[typeof Queries.Coopgram.GetAccountStatus.name];

package/extensions/coopgram/entities/index.ts

@@ -0,0 +1 @@
+export * from './CoopgramChat';

package/extensions/coopgram/index.ts

@@ -0,0 +1,2 @@
+// Экспорт главной функции install
+export { default } from './install';

package/extensions/coopgram/install.ts

@@ -0,0 +1,41 @@
+import { markRaw } from 'vue';
+import { CoopgramPage } from './pages/CoopgramPage';
+import { agreementsBase } from 'src/shared/lib/consts/workspaces';
+import type { IWorkspaceConfig } from 'src/shared/lib/types/workspace';
+
+export default async function (): Promise<IWorkspaceConfig[]> {
+  return [{
+    workspace: 'coopgram',
+    extension_name: 'coopgram',
+    title: 'Коопграм',
+    icon: 'fa-solid fa-comments',
+    defaultRoute: 'chat', // Маршрут по умолчанию для рабочего стола чата
+    routes: [
+      {
+        meta: {
+          title: 'Кооперативный мессенджер',
+          icon: 'fa-solid fa-comments',
+          roles: ['user', 'chairman', 'member'],
+        },
+        path: '/:coopname/coopgram',
+        name: 'coopgram',
+        component: markRaw(CoopgramPage),
+        children: [
+          {
+            path: 'chat',
+            name: 'coopgram-chat',
+            component: markRaw(CoopgramPage),
+            meta: {
+              title: 'Кооперативный мессенджер',
+              icon: 'fa-solid fa-comments',
+              roles: ['user', 'chairman', 'member'],
+              agreements: agreementsBase,
+              requiresAuth: true,
+            },
+            children: [],
+          },
+        ],
+      },
+    ],
+  }];
+}

package/extensions/coopgram/pages/CoopgramPage/features/CreateMatrixAccount/index.ts

@@ -0,0 +1,2 @@
+export { default as CreateMatrixAccountButton } from './ui/CreateMatrixAccountButton.vue';
+export { useCreateMatrixAccount } from './model/useCreateMatrixAccount';

package/extensions/coopgram/pages/CoopgramPage/features/CreateMatrixAccount/model/useCreateMatrixAccount.ts

@@ -0,0 +1,38 @@
+import { ref } from 'vue';
+import { client } from 'src/shared/api/client';
+import { Mutations } from '@coopenomics/sdk';
+
+export function useCreateMatrixAccount() {
+  const isLoading = ref(false);
+  const error = ref<string | null>(null);
+
+  const createAccount = async (username: string, password: string): Promise<boolean> => {
+    isLoading.value = true;
+    error.value = null;
+
+    try {
+      const { [Mutations.Coopgram.CreateAccount.name]: result } = await client.Mutation(
+        Mutations.Coopgram.CreateAccount.mutation,
+        {
+          variables: {
+          data: { username, password },
+          },
+        }
+      );
+
+      return result;
+    } catch (err: any) {
+      console.error('Failed to create Matrix account:', err);
+      error.value = err?.message || 'Не удалось создать аккаунт Matrix';
+      return false;
+    } finally {
+      isLoading.value = false;
+    }
+  };
+
+  return {
+    createAccount,
+    isLoading,
+    error,
+  };
+}

package/extensions/coopgram/pages/CoopgramPage/features/CreateMatrixAccount/ui/CreateMatrixAccountButton.vue

@@ -0,0 +1,59 @@
+<template lang="pug">
+button.create-account-button(
+  @click="handleCreateAccount",
+  :disabled="isLoading || !password",
+  type="button"
+)
+  span(v-if="isLoading") Создание аккаунта...
+  span(v-else) Создать аккаунт Matrix
+</template>
+
+<script lang="ts" setup>
+import { useCreateMatrixAccount } from '../model/useCreateMatrixAccount';
+
+const props = defineProps<{
+  username: string;
+  password: string;
+}>();
+
+const emit = defineEmits<{
+  success: [];
+  error: [message: string];
+}>();
+
+const { createAccount, isLoading, error } = useCreateMatrixAccount();
+
+const handleCreateAccount = async () => {
+  const success = await createAccount(props.username, props.password);
+
+  if (success) {
+    emit('success');
+  } else {
+    emit('error', error.value || 'Не удалось создать аккаунт');
+  }
+};
+</script>
+
+<style scoped>
+.create-account-button {
+  padding: 0.875rem 2rem;
+  background-color: #28a745;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 1rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  width: 100%;
+}
+
+.create-account-button:hover:not(:disabled) {
+  background-color: #218838;
+}
+
+.create-account-button:disabled {
+  background-color: #6c757d;
+  cursor: not-allowed;
+}
+</style>

package/extensions/coopgram/pages/CoopgramPage/index.ts

@@ -0,0 +1 @@
+export * from './ui'

package/extensions/coopgram/pages/CoopgramPage/ui/CoopgramPage.vue

@@ -0,0 +1,123 @@
+<template lang="pug">
+div
+  // Лоадер пока получаем статус аккаунта
+  WindowLoader(v-if="coopgramStore.isLoading", text="Проверка статуса аккаунта...")
+
+  // Сообщение об ошибке
+  div(v-else-if="coopgramStore.error", class="error-message")
+    p {{ coopgramStore.error }}
+    button(@click="retryLoadStatus", class="retry-button") Повторить попытку
+
+  // Виджет регистрации Matrix аккаунта
+  MatrixRegistration(
+    v-else-if="coopgramStore.accountStatus && !coopgramStore.accountStatus.hasAccount",
+    @account-created="handleAccountCreated"
+  )
+
+  // Лоадер пока загружается iframe Matrix клиента
+  WindowLoader(
+    v-else-if="coopgramStore.accountStatus?.iframeUrl && isIframeLoading",
+    text="Загрузка Matrix клиента..."
+  )
+
+  // Iframe с Matrix клиентом после полной загрузки
+  iframe(
+    v-else-if="coopgramStore.accountStatus?.iframeUrl",
+    v-show="!isIframeLoading",
+    :src="coopgramStore.accountStatus.iframeUrl",
+    class="matrix-iframe",
+    frameborder="0",
+    width="100%",
+    :style="{ height: 'calc(100vh - 56px)' }"
+    @load="onIframeLoaded"
+  )
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, watch } from 'vue';
+import { WindowLoader } from 'src/shared/ui/Loader';
+import { useCoopgramChatStore } from '../../../entities/CoopgramChat/model';
+import { MatrixRegistration } from '../../../widgets/MatrixRegistration';
+
+const coopgramStore = useCoopgramChatStore();
+const isIframeLoading = ref(true);
+let iframeLoadTimeout: number | null = null;
+
+// Сбрасываем состояние загрузки iframe при изменении URL
+watch(() => coopgramStore.accountStatus?.iframeUrl, () => {
+  if (coopgramStore.accountStatus?.iframeUrl) {
+    isIframeLoading.value = true;
+
+    // Очищаем предыдущий таймаут
+    if (iframeLoadTimeout) {
+      clearTimeout(iframeLoadTimeout);
+    }
+
+    // Устанавливаем таймаут на 5 секунд как fallback
+    iframeLoadTimeout = window.setTimeout(() => {
+      isIframeLoading.value = false;
+    }, 5000);
+  }
+});
+
+function onIframeLoaded() {
+  // Очищаем таймаут, если загрузка произошла раньше
+  if (iframeLoadTimeout) {
+    clearTimeout(iframeLoadTimeout);
+    iframeLoadTimeout = null;
+  }
+  isIframeLoading.value = false;
+}
+
+async function retryLoadStatus() {
+  coopgramStore.clearError();
+  await coopgramStore.loadAccountStatus();
+}
+
+async function handleAccountCreated() {
+  // После успешного создания аккаунта перезагружаем статус
+  await coopgramStore.loadAccountStatus();
+}
+
+onMounted(async () => {
+  await coopgramStore.loadAccountStatus();
+});
+</script>
+
+<style scoped>
+.matrix-iframe {
+  width: 100%;
+  border: none;
+  display: block;
+}
+
+.error-message {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: calc(100vh - 56px);
+  text-align: center;
+  padding: 2rem;
+}
+
+.error-message p {
+  margin-bottom: 1rem;
+  color: #dc3545;
+  font-size: 1.1rem;
+}
+
+.retry-button {
+  padding: 0.5rem 1rem;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  font-size: 1rem;
+}
+
+.retry-button:hover {
+  background-color: #0056b3;
+}
+</style>

package/extensions/coopgram/pages/CoopgramPage/ui/index.ts

@@ -0,0 +1 @@
+export { default as CoopgramPage } from './CoopgramPage.vue';

package/extensions/coopgram/pages/index.ts

@@ -0,0 +1 @@
+export { CoopgramPage } from './CoopgramPage';

package/extensions/coopgram/widgets/MatrixRegistration/index.ts

@@ -0,0 +1,3 @@
+export { default as MatrixRegistration } from './ui/MatrixRegistration.vue';
+export { useMatrixRegistration } from './model/useMatrixRegistration';
+export type { MatrixRegistrationForm } from './model/types';

package/extensions/coopgram/widgets/MatrixRegistration/model/types.ts

@@ -0,0 +1,4 @@
+export interface MatrixRegistrationForm {
+  password: string;
+  confirmPassword: string;
+}

package/extensions/coopgram/widgets/MatrixRegistration/model/useMatrixRegistration.ts

@@ -0,0 +1,102 @@
+import { ref, computed } from 'vue';
+import { client } from 'src/shared/api/client';
+import { Queries } from '@coopenomics/sdk';
+
+export function useMatrixRegistration() {
+  const username = ref('');
+  const password = ref('');
+  const confirmPassword = ref('');
+  const usernameAvailable = ref<boolean | null>(null);
+  const checkingUsername = ref(false);
+
+  const isSubmitting = ref(false);
+  const error = ref<string | null>(null);
+
+  const validateForm = (): boolean => {
+    if (!username.value || !password.value || !confirmPassword.value) {
+      error.value = 'Заполните все поля';
+      return false;
+    }
+
+    if (usernameAvailable.value === false) {
+      error.value = 'Пользователь с таким именем уже существует';
+      return false;
+    }
+
+    if (password.value !== confirmPassword.value) {
+      error.value = 'Пароли не совпадают';
+      return false;
+    }
+
+    error.value = null;
+    return true;
+  };
+
+  const resetForm = () => {
+    username.value = '';
+    password.value = '';
+    confirmPassword.value = '';
+    usernameAvailable.value = null;
+    error.value = null;
+  };
+
+  // Асинхронная проверка доступности username
+  const checkUsernameAvailability = async (value: string): Promise<boolean> => {
+    if (!value || value.length < 3) return false;
+
+    checkingUsername.value = true;
+    try {
+      const { [Queries.Coopgram.CheckUsernameAvailability.name]: result } = await client.Query(
+        Queries.Coopgram.CheckUsernameAvailability.query,
+        {
+          variables: {
+            data: { username: value },
+          },
+        }
+      );
+      usernameAvailable.value = result;
+      return result;
+    } catch (err) {
+      console.error('Failed to check username availability:', err);
+      usernameAvailable.value = false; // В случае ошибки считаем недоступным
+      return false;
+    } finally {
+      checkingUsername.value = false;
+    }
+  };
+
+  // Правило валидации для username
+  const validateUsernameAsync = async (val: string): Promise<string | boolean> => {
+    if (!val) {
+      usernameAvailable.value = null;
+      return 'Введите имя пользователя';
+    }
+
+    if (val.length < 3) {
+      usernameAvailable.value = null;
+      return 'Имя пользователя должно содержать минимум 3 символа';
+    }
+
+    if (!/^[a-zA-Z0-9_-]+$/.test(val)) {
+      usernameAvailable.value = null;
+      return 'Имя пользователя может содержать только буквы, цифры, подчеркивания и дефисы';
+    }
+
+    const available = await checkUsernameAvailability(val);
+    return available || 'Пользователь с таким именем уже существует';
+  };
+
+  return {
+    username,
+    password,
+    confirmPassword,
+    usernameAvailable: computed(() => usernameAvailable.value),
+    checkingUsername: computed(() => checkingUsername.value),
+    isSubmitting,
+    error,
+    validateForm,
+    resetForm,
+    checkUsernameAvailability,
+    validateUsernameAsync,
+  };
+}