Initial commit

.github/workflows/build_and_deploy.yml

@@ -0,0 +1,33 @@
+name: Build and Deploy
+
+on:
+  workflow_run:
+    workflows: [ "Lint and Test" ]
+    types:
+      - completed
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    if: ${{ github.event.workflow_run.conclusion == 'success' 
+      && github.event.workflow_run.head_branch == 'main' }}
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '23'
+
+      - name: Install dependencies
+        run: npm ci --omit dev
+
+      - name: Build project
+        run: npm run build
+
+      - name: Deploy 🚀
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          folder: dist

.github/workflows/lint_and_test.yml

@@ -0,0 +1,40 @@
+name: Lint and Test
+
+on: [ push, pull_request ]
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '23'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run linter
+        run: npm run lint
+
+  test:
+    runs-on: ubuntu-latest
+    needs: lint
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '23'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run tests
+        run: npm run test

.gitignore

@@ -0,0 +1,3 @@
+.idea/
+node_modules/
+dist/

README.md

@@ -0,0 +1,72 @@
+# Richelieu-Feistel-cipher
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?logo=vite&logoColor=white)
+
+Лабораторная работа по безопасности программ и данных, продуктом которой является веб-приложение, реализующее шифр
+Ришелье и сеть Фейстеля для шифрования текстовых данных. По совместительству является проектом для изучения
+фронтенд-разработки с использованием готового набора компонентов.
+
+## Основные требования
+
+- графический интерфейс
+- шифрование данных шифром Ришелье и сетью Фейстеля
+- поддержка ввода текста в интерфейсе и загрузку его из файла
+
+## Особенности реализации
+
+- [x] форма реализации — веб-приложение
+- [x] адаптивая вёрстка
+- [x] фронтенд основан на готовых компонентах
+- [x] интегрированы инструменты сборки, тестирования, анализа кода
+- [x] покрытие тестами функций шифрования
+- [x] запуск линтера, тестов и деплоя с помощью GitHub Actions
+
+## Стек
+
+- **[Node.js](https://nodejs.org)** — платформа для запуска JavaScript
+- **[TypeScript](https://www.typescriptlang.org/)** — язык программирования
+- **[Vite](https://vite.dev/)** — инструмент сборки фронтенда
+- **[Tailwind CSS](https://tailwindcss.com/)** — CSS-фреймворк
+- **[DaisyUI](https://daisyui.com/)** — библиотека компонентов для Tailwind CSS
+- **[Jest](https://jestjs.io/)** — фреймворк для тестирования
+- **[ESLint](https://eslint.org/)** — статический анализатор кода
+- **[Prettier](https://prettier.io/)** — форматировщик кода
+
+## Установка и запуск
+
+0. Клонируйте репозиторий и перейдите в его папку.
+1. Установите [Node.js](https://nodejs.org).
+2. Установите зависимости:
+
+```shell
+npm install --omit dev
+```
+
+3. Соберите проект:
+
+```shell
+npm run build
+```
+
+4. Теперь запускать сервер Vite можно командой:
+
+```shell
+npm run preview
+```
+
+## Модификация
+
+Если вы планируете модифицировать проект, установите все зависимости:
+
+```shell
+npm install
+```
+
+Запуск сервера в режиме разработки с горячей перезагрузкой осуществляется командой:
+
+```shell
+npm run dev
+```
+
+Прочие скрипты, необходимые для запуска линтеров, тестов и т. д. находятся в файле [package.json](./package.json).

eslint.config.js

@@ -0,0 +1,50 @@
+import eslintConfigPrettier from 'eslint-config-prettier';
+import prettierPlugin from 'eslint-plugin-prettier';
+import tsParser from '@typescript-eslint/parser';
+import tsPlugin from '@typescript-eslint/eslint-plugin';
+import html from '@html-eslint/eslint-plugin';
+import htmlParser from '@html-eslint/parser';
+
+export default [
+    {
+        files: ['**/*.{js,ts}'],
+        ignores: ['node_modules/**/*', 'dist/**/*'],
+        languageOptions: {
+            parser: tsParser,
+            parserOptions: {
+                ecmaVersion: 'latest',
+                sourceType: 'module',
+            },
+        },
+        plugins: {
+            '@typescript-eslint': tsPlugin,
+            prettier: prettierPlugin,
+        },
+        rules: {
+            ...tsPlugin.configs['recommended'].rules,
+            ...eslintConfigPrettier.rules,
+            'prettier/prettier': 'error',
+            '@typescript-eslint/no-unused-vars': 'error',
+            '@typescript-eslint/no-redeclare': 'error',
+            '@typescript-eslint/explicit-function-return-type': 'error',
+            '@typescript-eslint/no-explicit-any': 'error',
+            '@typescript-eslint/prefer-as-const': 'error',
+            'object-shorthand': ['error', 'always'],
+            curly: ['error', 'all'],
+            eqeqeq: ['error', 'always'],
+            'no-unreachable': 'error',
+            'no-var': 'error',
+        },
+    },
+    {
+        files: ['**/*.html'],
+        ignores: ['node_modules/**/*', 'dist/**/*'],
+        languageOptions: {
+            parser: htmlParser,
+        },
+        plugins: {
+            '@html-eslint': html,
+        },
+        ...html.configs['flat/recommended'],
+    },
+];

index.html

@@ -0,0 +1,187 @@
+<!doctype html>
+<html lang="ru">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="description" content="Лабораторная работа по предмету «Безопасность программ и данных» №2.
+                Тема «Базовые алгоритмы шифрования. Использование симметричного алгоритма «Сеть Фейстеля» для шифрования файлов на диске».
+                Вариант №7: шифр Ришелье и сеть Фейстеля (схема №3 из методички).">
+        <title>БПиД №2.7</title>
+        <link href="/src/css/index.css" rel="stylesheet">
+    </head>
+    <body class="flex min-h-screen flex-col space-y-8">
+        <header class="p-4">
+            <h1 class="text-center font-medium sm:text-2xl">
+                Лабораторная работа по БПиД №2<br>вариант 7
+            </h1>
+            <button id="switchThemeButton" class="btn absolute right-0 top-10 border-transparent bg-transparent text-2xl hover:border-transparent hover:bg-transparent sm:top-6 sm:text-3xl lg:right-6">
+                ☀️
+            </button>
+        </header>
+        <main class="flex-grow">
+            <form name="cipherForm" class="mx-5 flex flex-wrap">
+                <div class="w-full pb-10 md:w-80">
+                    <label class="label cursor-pointer justify-center space-x-2">
+                        <span class="label-text text-right font-bold" id="cipherMethodCheckboxRichelieuLabel">
+                            Шифр Ришелье
+                        </span>
+                        <input
+                            type="checkbox"
+                            id="cipherMethodCheckbox"
+                            name="cipherMethodCheckbox"
+                            class="[--tglbg:rgb(0.25 0.02 252.0)] toggle border-base-content bg-base-content hover:bg-base-content"
+                        >
+                        <span class="label-text text-left" id="cipherMethodCheckboxFeistelLabel">
+                            Сеть Фейстеля
+                        </span>
+                    </label>
+                    <div id="richelieuInfo" class="flex flex-col">
+                        <div>
+                            <span>Размер сетки:</span>
+                            <input
+                                type="number"
+                                name="richelieuGridSize"
+                                id="richelieuGridSizeHeight"
+                                class="input input-bordered h-9 w-9 p-2"
+                                min="2"
+                                max="10"
+                                value="5"
+                            >
+                            <span>x</span>
+                            <input
+                                type="number"
+                                name="richelieuGridSize"
+                                id="richelieuGridSizeWidth"
+                                class="input input-bordered h-9 w-9 p-2"
+                                min="2"
+                                max="10"
+                                value="5"
+                            >
+                        </div>
+                    </div>
+                    <div id="feistelInfo" class="flex hidden max-w-[18.5rem] flex-col space-y-3">
+                        <div class="space-y-1">
+                            <p>Схема сети:</p>
+                            <img
+                                class="block rounded-xl bg-white"
+                                src="src/res/feistel-network.png"
+                                alt="Схема сети Фейстеля"
+                            >
+                        </div>
+                        <div class="flex w-44 flex-col space-y-2">
+                            <textarea
+                                class="textarea textarea-bordered h-64 resize-none"
+                                id="keysText"
+                                name="keysText"
+                                placeholder="Ключи шифрования"
+                            ></textarea>
+                            <button
+                                id="genFeistelKeysBtn"
+                                class="btn btn-primary"
+                                type="button"
+                                onclick=""
+                            >
+                                Сгенерировать
+                            </button>
+                            <button
+                                class="btn"
+                                type="button"
+                                onclick="document.getElementById('uploadSourceFileInput').click();"
+                            >
+                                Загрузить
+                            </button>
+                            <input
+                                id="uploadKeysFileInput"
+                                type="file"
+                                class="file-input file-input-bordered file-input-sm hidden"
+                            >
+                            <button
+                                id="downloadKeysButton"
+                                class="btn"
+                                type="button"
+                                onclick=""
+                            >
+                                Сохранить
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex w-full flex-wrap space-y-10 sm:w-auto sm:grow sm:space-x-5 sm:space-y-0">
+                    <div class="flex w-full flex-col space-y-2 sm:w-auto sm:grow">
+                        <textarea
+                            class="textarea textarea-bordered h-48 w-full resize-none sm:h-96"
+                            id="sourceText"
+                            name="sourceText"
+                            placeholder="Исходный текст"
+                        ></textarea>
+                        <div class="mx-6 flex justify-center space-x-5">
+                            <div class="tooltip" data-tip="Загрузите исходный текст для шифровки из файла">
+                                <button
+                                    class="btn"
+                                    type="button"
+                                    onclick="document.getElementById('uploadSourceFileInput').click();"
+                                >
+                                    Загрузить
+                                </button>
+                                <input
+                                    id="uploadSourceFileInput"
+                                    type="file"
+                                    class="file-input file-input-bordered file-input-sm hidden"
+                                >
+                            </div>
+                            <div class="tooltip" data-tip="Сохраните расшифрованный текст в файл">
+                                <button
+                                    id="downloadSourceButton"
+                                    class="btn"
+                                    type="button"
+                                    onclick=""
+                                >
+                                    Сохранить
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex w-full flex-col space-y-2 sm:w-auto sm:grow">
+                        <textarea
+                            class="textarea textarea-bordered h-48 w-full resize-none sm:h-96"
+                            id="encryptedText"
+                            name="encryptedText"
+                            placeholder="Зашифрованный текст"
+                        ></textarea>
+                        <div class="mx-6 flex justify-center space-x-5">
+                            <div class="tooltip" data-tip="Загрузите зашифрованный текст для расшифровки">
+                                <button
+                                    class="btn"
+                                    type="button"
+                                    onclick="document.getElementById('uploadEncryptedFileInput').click();"
+                                >
+                                    Загрузить
+                                </button>
+                                <input
+                                    id="uploadEncryptedFileInput"
+                                    type="file"
+                                    class="file-input file-input-bordered file-input-sm hidden"
+                                >
+                            </div>
+                            <div class="tooltip" data-tip="Сохраните зашифрованный текст в файл">
+                                <button
+                                    id="downloadEncryptedButton"
+                                    class="btn"
+                                    type="button"
+                                    onclick=""
+                                >
+                                    Сохранить
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="lg:w-80"></div>
+            </form>
+        </main>
+        <footer class="footer footer-center p-5">
+            <p>© Scorpi-ON — 2024</p>
+        </footer>
+        <script type="module" src="/src/ts/index.ts"></script>
+    </body>
+</html>

jest.config.js

@@ -0,0 +1,7 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} **/
+export default {
+    testEnvironment: 'node',
+    transform: {
+        '^.+.tsx?$': ['ts-jest', {}],
+    },
+};