diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..5484946 --- /dev/null +++ b/.gitignore @@ -0,0 +1,265 @@ +# General git ignore file for tex projects +# ------------------------------------------------------------- +# https://github.com/github/gitignore/blob/master/TeX.gitignore +# ------------------------------------------------------------- + +## Core latex/pdflatex auxiliary files: +*.aux +*.lof +*.log +*.lot +*.fls +*.out +*.toc +*.fmt +*.fot +*.cb +*.cb2 +.*.lb + +## Intermediate documents: +*.dvi +*.xdv +*-converted-to.* +# these rules might exclude image files for figures etc. +# *.ps +# *.eps +# *.pdf + +## Generated if empty string is given at "Please type another file name for output:" +.pdf + +## Bibliography auxiliary files (bibtex/biblatex/biber): +*.bbl +*.bcf +*.blg +*-blx.aux +*-blx.bib +*.run.xml + +## Build tool auxiliary files: +*.fdb_latexmk +*.synctex +*.synctex(busy) +*.synctex.gz +*.synctex.gz(busy) +*.pdfsync + +## Build tool directories for auxiliary files +# latexrun +latex.out/ + +## Auxiliary and intermediate files from other packages: +# algorithms +*.alg +*.loa + +# achemso +acs-*.bib + +# amsthm +*.thm + +# beamer +*.nav +*.pre +*.snm +*.vrb + +# changes +*.soc + +# comment +*.cut + +# cprotect +*.cpt + +# elsarticle (documentclass of Elsevier journals) +*.spl + +# endnotes +*.ent + +*.lox + +# feynmf/feynmp +*.mf +*.mp +*.t[1-9] +*.t[1-9][0-9] +*.tfm + +#(r)(e)ledmac/(r)(e)ledpar +*.end +*.?end +*.[1-9] +*.[1-9][0-9] +*.[1-9][0-9][0-9] +*.[1-9]R +*.[1-9][0-9]R +*.[1-9][0-9][0-9]R +*.eledsec[1-9] +*.eledsec[1-9]R +*.eledsec[1-9][0-9] +*.eledsec[1-9][0-9]R +*.eledsec[1-9][0-9][0-9] +*.eledsec[1-9][0-9][0-9]R + +# glossaries +*.acn +*.acr +*.glg +*.glo +*.gls +*.glsdefs + +# gnuplottex +*-gnuplottex-* + +# gregoriotex +*.gaux +*.gtex + +# htlatex +*.4ct +*.4tc +*.idv +*.lg +*.trc +*.xref + +# hyperref +*.brf + +# knitr +*-concordance.tex +*.tikz +*-tikzDictionary + +# listings +*.lol + +# luatexja-ruby +*.ltjruby + +# makeidx +*.idx +*.ilg +*.ind + +# minitoc +*.maf +*.mlf +*.mlt +*.mtc[0-9]* +*.slf[0-9]* +*.slt[0-9]* +*.stc[0-9]* + +# minted +_minted* +*.pyg + +# morewrites +*.mw + +# nomencl +*.nlg +*.nlo +*.nls + +# pax +*.pax + +# pdfpcnotes +*.pdfpc + +# sagetex +*.sagetex.sage +*.sagetex.py +*.sagetex.scmd + +# scrwfile +*.wrt + +# sympy +*.sout +*.sympy +sympy-plots-for-*.tex/ + +# pdfcomment +*.upa +*.upb + +# pythontex +*.pytxcode +pythontex-files-*/ + +# tcolorbox +*.listing + +# thmtools +*.loe + +# TikZ & PGF +*.dpth +*.md5 +*.auxlock + +# todonotes +*.tdo + +# vhistory +*.hst +*.ver + +*.lod + +# xcolor +*.xcp + +# xmpincl +*.xmpi + +# xindy +*.xdy + +# xypic precompiled matrices +*.xyc + +# endfloat +*.ttt +*.fff + +# Latexian +TSWLatexianTemp* + +## Editors: +# WinEdt +*.bak +*.sav + +# Texpad +.texpadtmp + +# LyX +*.lyx~ + +# Kile +*.backup + +# KBibTeX +*~[0-9]* + +# auto folder when using emacs and auctex +./auto/* +*.el + +# expex forward references with \gathertags +*-tags.tex + +# standalone packages +*.sta + +out diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml new file mode 100644 index 0000000..f5e4e69 --- /dev/null +++ b/.pre-commit-config.yaml @@ -0,0 +1,22 @@ +repos: + - repo: https://github.com/pre-commit/pre-commit-hooks + rev: v4.1.0 + hooks: + - id: check-added-large-files + - id: check-case-conflict + - id: check-merge-conflict + - id: check-symlinks + - id: check-toml + - id: check-yaml + - id: detect-private-key + - id: end-of-file-fixer + - id: fix-byte-order-marker + - id: mixed-line-ending + - id: trailing-whitespace + - repo: https://github.com/pre-commit/mirrors-prettier + rev: v2.6.2 + hooks: + - id: prettier + name: Prettier + entry: prettier --write --list-different . + files: "\\.(graphql|graphqls|json|md|js|jsx|ts|tsx|yaml|yml|css|less|scss)$" diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..aac3fd8 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2022 Lukas Kucera + +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: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +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. diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..371dc53 --- /dev/null +++ b/Makefile @@ -0,0 +1,17 @@ +DOCUMENT_NAME = main +OUTPUT_DIR = out + +.PHONY: all clean build help + +default: help + +clean: ## Remove output directory. + rm -rf $(OUTPUT_DIR)/* + +build: ## Generate PDF from LaTex files. + mkdir -p ../$(OUTPUT_DIR) + latexmk -pdf -jobname=$(OUTPUT_DIR)/$(DOCUMENT_NAME) $(DOCUMENT_NAME) + @echo "pdf document $(OUTPUT_DIR)/$(DOCUMENT_NAME).pdf has been built" + +help: ## Display help. + @awk 'BEGIN {FS = ":.*##"; printf "\nUsage:\n make \033[36m\033[0m\n"} /^[a-zA-Z_-]+:.*?##/ { printf " \033[36m%-15s\033[0m %s\n", $$1, $$2 } /^##@/ { printf "\n\033[1m%s\033[0m\n", substr($$0, 5) } ' $(MAKEFILE_LIST) diff --git a/README.md b/README.md index ebfb366..0e1cfa0 100644 --- a/README.md +++ b/README.md @@ -1 +1,62 @@ # documentation + +[![made-with-latex](https://img.shields.io/badge/Made%20with-LaTeX-1f425f.svg)](https://www.latex-project.org/) +[![pre-commit.ci status](https://results.pre-commit.ci/badge/github/stegoer/documentation/main.svg)](https://results.pre-commit.ci/latest/github/stegoer/documentation/main) + +Documentation is written using [LaTex](https://www.latex-project.org/). + +Be aware that the text of the document is not written in English. +It will be submitted to the director at my school. +That is its only purpose. + +--- + +Development documentation: https://github.com/stegoer/documentation/blob/main/README.md + +Source code: https://github.com/stegoer/documentation + +--- + +## Installation + +### Install instructions + +1. Install LaTex https://www.latex-project.org/get/ +2. Clone this repository + +```sh +git clone git@github.com:stegoer/documentation.git +``` + +## Development + +### Build pdf document + +```sh +make build +``` + +### Make + +```sh +make help +``` + +### Assets + +If you need to add any assets please add them to the `assets` folder. + +### Bibliography + +If you need to add bibliography you can do so in the +`bibliography/biblography.bib` file. + +## Contributing + +```sh +pre-commit install +``` + +## License + +Developed under the [MIT](https://github.com/stegoer/documentation/blob/master/LICENSE) license. diff --git a/assets/images/color-scheme.png b/assets/images/color-scheme.png new file mode 100644 index 0000000..34aaff8 Binary files /dev/null and b/assets/images/color-scheme.png differ diff --git a/assets/images/docs-accordion.png b/assets/images/docs-accordion.png new file mode 100644 index 0000000..0f020be Binary files /dev/null and b/assets/images/docs-accordion.png differ diff --git a/assets/images/encode-configuration.png b/assets/images/encode-configuration.png new file mode 100644 index 0000000..cf95aa5 Binary files /dev/null and b/assets/images/encode-configuration.png differ diff --git a/assets/images/encode-editor.png b/assets/images/encode-editor.png new file mode 100644 index 0000000..acb02a1 Binary files /dev/null and b/assets/images/encode-editor.png differ diff --git a/assets/images/image-detail.png b/assets/images/image-detail.png new file mode 100644 index 0000000..74e7d4b Binary files /dev/null and b/assets/images/image-detail.png differ diff --git a/assets/images/images-table.png b/assets/images/images-table.png new file mode 100644 index 0000000..6792cd2 Binary files /dev/null and b/assets/images/images-table.png differ diff --git a/assets/images/password-popover.png b/assets/images/password-popover.png new file mode 100644 index 0000000..f1ca5db Binary files /dev/null and b/assets/images/password-popover.png differ diff --git a/bibliography/bibliography.bib b/bibliography/bibliography.bib new file mode 100644 index 0000000..1d8b746 --- /dev/null +++ b/bibliography/bibliography.bib @@ -0,0 +1,30 @@ +@misc{ wiki:steganografie, + author = "Wikipedie", + title = "Steganografie --- Wikipedie: Otevřená encyklopedie", + year = "2020", + url = "https://cs.wikipedia.org/w/index.php?title=Steganografie&oldid=18463745", + note = "[Online; navštíveno 13. 04. 2022]" +} +@misc{ enwiki:popover, + author = "{Wikipedia contributors}", + title = "Popover (GUI) --- {Wikipedia}{,} The Free Encyclopedia", + year = "2022", + url = "https://en.wikipedia.org/w/index.php?title=Popover_(GUI)&oldid=1070958937", + note = "[Online; accessed 13-April-2022]" +} + +@misc{ enwiki:accordion, + author = "{Wikipedia contributors}", + title = "Accordion (GUI) --- {Wikipedia}{,} The Free Encyclopedia", + year = "2022", + url = "https://en.wikipedia.org/w/index.php?title=Accordion_(GUI)&oldid=1065223091", + note = "[Online; accessed 13-April-2022]" +} + +@misc{ enwiki:aes, + author = "{Wikipedia contributors}", + title = "Advanced Encryption Standard --- {Wikipedia}{,} The Free Encyclopedia", + year = "2022", + url = "https://en.wikipedia.org/w/index.php?title=Advanced_Encryption_Standard&oldid=1081249354", + note = "[Online; accessed 13-April-2022]" +} diff --git a/main.tex b/main.tex new file mode 100644 index 0000000..b30a81a --- /dev/null +++ b/main.tex @@ -0,0 +1,67 @@ +%! Author = kucera-lukas +%! Date = 4/13/22 + +% Options for packages loaded elsewhere +\PassOptionsToPackage{unicode}{hyperref} +\PassOptionsToPackage{hyphens}{url} +\PassOptionsToPackage{graphicx}{includegraphics} +% + +\documentclass[11pt +]{article} +\usepackage{lmodern} +\usepackage{url} +\usepackage[a4paper, total={18cm, 25cm}]{geometry} +\usepackage{amssymb,amsmath} +\usepackage{ifxetex,ifluatex} +\usepackage[T1]{fontenc} +\usepackage[utf8]{inputenc} +\usepackage[czech]{babel} +\usepackage[parfill]{parskip} +\usepackage{textcomp} +\usepackage{xcolor,graphicx,grffile} +\usepackage{hyperref} +\usepackage{expl3} +\usepackage[backend=biber]{biblatex} +\usepackage{titlesec} +\usepackage{siunitx} + +\setcounter{secnumdepth}{4} + +\titleformat{\paragraph} +{\normalfont\normalsize\bfseries}{\theparagraph}{1em}{} +\titlespacing*{\paragraph} +{0pt}{3.25ex plus 1ex minus .2ex}{1.5ex plus .2ex} + +\setcounter{secnumdepth}{4} +\setcounter{tocdepth}{4} + +\graphicspath{ {../assets} } + +\addbibresource{bibliography/bibliography.bib} + +\setlength{\emergencystretch}{3em} % prevent overfull lines + +\date{} + +\begin{document} + \input{src/title.tex} + + \tableofcontents + + \newpage + + \input{src/about.tex} + \input{src/steganography.tex} + \input{src/user.tex} + \input{src/other.tex} + \input{src/documentation.tex} + + \newpage + + \input{src/sources.tex} + + \newpage + + \printbibliography[heading=bibintoc] +\end{document} diff --git a/src/about.tex b/src/about.tex new file mode 100644 index 0000000..20ae8cd --- /dev/null +++ b/src/about.tex @@ -0,0 +1,19 @@ +%! Author = kucera-lukas +%! Date = 4/13/22 + +\section{O aplikaci}\label{sec:o-aplikaci} + +\emph{Stegoer} je aplikace, která umožňuje uživateli ukrýt informaci do obrázku +změnou nejméně významných bitů (LSB steganografie). + +Uživatel si může vybrat, jakým způsobem má být obrázek upraven. +Lze nastavit vlastní klíč k zašifrovaní informace, +počet nejméně vyznamných bitů, změna v daných barevných složkách nebo +rozprostření zprávy. + +Projekt funguje jako webová aplikace. + +\begin{itemize} + \item Klient běží na Netlify \url{https://stegoer.netlify.app} + \item Server běží na Heroku \url{https://stegoer-server.herokuapp.com/} +\end{itemize} diff --git a/src/documentation.tex b/src/documentation.tex new file mode 100644 index 0000000..f52815e --- /dev/null +++ b/src/documentation.tex @@ -0,0 +1,38 @@ +%! Author = kucera-lukas +%! Date = 4/13/22 + +\section{Dokumentace}\label{sec:dokumentace} + +\subsection{Rozcestník}\label{subsec:rozcestnik} +Na adrese \url{https://stegoer.netlify.app/docs} se nachazí odkazy na všechny +materiály spojené s dokumentací projektu. + +Po načtení stránky se zobrazí accordion\cite{enwiki:accordion}. +Ten je rozdělen na 3 části a každá odpovídá jednomu repozitáři. +Po kliknutí na sekci se daná sekce rozšíří a odkazy se zpřístupní. + +\subsection{Přímé odkazy}\label{subsec:online} + +\subsubsection{Klient}\label{subsubsec:doc-klient} + +\begin{enumerate} + \item Vývojářská dokumentace \url{https://github.com/stegoer/client/blob/master/README.md} + \item Referenční dokumentace \url{https://stegoer.github.io/client/} +\end{enumerate} + +\subsubsection{Server}\label{subsubsec:doc-server} +\begin{enumerate} + \item Vývojářská dokumentace \url{https://github.com/stegoer/server/blob/main/README.md} + \item Referenční dokumentace \url{https://pkg.go.dev/github.com/stegoer/server} +\end{enumerate} + +\subsubsection{Dokumentace}\label{subsubsec:doc-dokumentace} +\begin{enumerate} + \item Vývojářská dokumentace \url{https://github.com/stegoer/documentation/blob/main/README.md} +\end{enumerate} + +\begin{figure} + \centering + \includegraphics[scale=0.3]{assets/images/docs-accordion} + \caption{Rozcestník dokumentace}\label{fig:rozcestnik-dokumentace} +\end{figure} diff --git a/src/other.tex b/src/other.tex new file mode 100644 index 0000000..f4a4c6b --- /dev/null +++ b/src/other.tex @@ -0,0 +1,22 @@ +%! Author = kucera-lukas +%! Date = 4/13/22 + +\section{Ostatní}\label{sec:ostatni} + +\subsection{Barevný motiv}\label{subsec:barevny-motiv} +Aplikace umožňuje změnu barevného motivu. +Stačí kliknout na ikonku v pravém horním rohu. + +\begin{figure} + \centering + \includegraphics[scale=0.4]{assets/images/color-scheme} + \caption{Barevný motiv}\label{fig:barevny-motiv} +\end{figure} + +\subsubsection{Klávesová zkratka} +Barevný motiv lze také přepnout klávesovou zkratkou \texttt{ctrl + k}. + +\subsubsection{Lokální úložistě} +Vybraný motiv se uloží do \texttt{Window.localStorage} +\url{https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage} +a tak není potřeba motiv upravovat při každém vstupu na webovou stránku. diff --git a/src/sources.tex b/src/sources.tex new file mode 100644 index 0000000..831fcbb --- /dev/null +++ b/src/sources.tex @@ -0,0 +1,75 @@ +%! Author = kucera-lukas +%! Date = 4/13/22 + +\section{Zdroje}\label{sec:zdroje} + +\subsection{Použité knihovny}\label{subsec:pouzite-knihovny} + +\subsubsection{Client}\label{subsubsec:client} +\begin{itemize} + \item TypeScript v4.6.3 \url{https://www.typescriptlang.org/} + \item React v17.0.2 \url{https://reactjs.org/} + \item Next.js v12.1.4 \url{https://nextjs.org/} + \item GraphQL \url{https://graphql.org/} + \item URQL v2.2.0 \url{https://formidable.com/open-source/urql/} + \item Mantine v4.1.3 \url{https://mantine.dev/} + \item GraphQL Code Generator \url{https://www.graphql-code-generator.com/} + \item Prettier v2.6.2 \url{https://prettier.io/} + \item ESLint v8.13.0 \url{https://eslint.org/} +\end{itemize} + +Detailní seznam všech závislostí je dostupný na +\url{https://github.com/stegoer/client/blob/master/package-lock.json} + +\subsubsection{Server}\label{subsubsec:server} +\begin{itemize} + \item Go v1.17.5 \url{https://go.dev/} + \item GraphQL \url{https://graphql.org/} + \item ent v0.10.1 \url{https://entgo.io/} + \item gqlgen v0.17.2 \url{https://gqlgen.com/} + \item Go Redis v8.11.5 \url{https://redis.uptrace.dev/} + \item pq v1.10.5 \url{https://pkg.go.dev/github.com/lib/pq} + \item gorilla/mux v1.8.0 \url{https://www.gorillatoolkit.org/pkg/mux} + \item Viper v1.10.1 \url{https://pkg.go.dev/github.com/spf13/viper} + \item zap v1.21.0 \url{https://pkg.go.dev/go.uber.org/zap} + \item golangci-lint v1.45.2 \url{https://golangci-lint.run/} +\end{itemize} + +Detailní seznam všech závislostí je dostupný na +\url{https://github.com/stegoer/server/blob/main/go.sum} +a na \url{https://github.com/stegoer/server/blob/main/tools/go.sum} + +\subsection{Vývojářská dokumentace}\label{subsec:dev-dokumentace} + +\begin{itemize} + \item GitHub \url{https://github.com/} + \item Markdown \url{https://www.markdownguide.org/} +\end{itemize} + +\subsection{Referenční dokumentace}\label{subsec:ref-dokumentace} + +\begin{itemize} + \item TypeDoc v4.6.3 \url{https://typedoc.org/} + \item GitHub Pages Deploy Action v4.3.0 \url{https://github.com/JamesIves/github-pages-deploy-action} + \item pkg.go.dev \url{https://pkg.go.dev/} + \item \LaTeX \url{https://www.latex-project.org/} + \item Jakub Jelínek \url{https://github.com/kubajj/Computatis} +\end{itemize} + +\subsubsection{Uživatelská dokumentace}\label{subsec:user-dokumentace} + +\begin{itemize} + \item \LaTeX \url{https://www.latex-project.org/} + \item Jakub Jelínek \url{https://github.com/kubajj/Computatis} +\end{itemize} + +\subsection{Ostatní}\label{subsec:ostatni} + +\begin{itemize} + \item StackOverflow \url{https://stackoverflow.com/} + \item MDN Web Docs \url{https://developer.mozilla.org/en-US/} + \item pre-commit \url{https://pre-commit.com/} + \item GitHub Actions \url{https://github.com/features/actions} + \item GitHub Pages \url{https://pages.github.com/} + \item Dependabot \url{https://github.com/dependabot} +\end{itemize} diff --git a/src/steganography.tex b/src/steganography.tex new file mode 100644 index 0000000..df95221 --- /dev/null +++ b/src/steganography.tex @@ -0,0 +1,171 @@ +%! Author = kucera-lukas +%! Date = 4/13/22 + +\section{Steganografie}\label{sec:steganografie} + +\subsection{Definice}\label{subsec:definice} +Steganografie je vědní disciplína (podobor kryptografie) zabývající se utajením +komunikace prostřednictvím ukrytí zprávy. +Zpráva je ukryta tak, aby si pozorovatel neuvědomil, +že komunikace vůbec probíhá.\cite{wiki:steganografie} + +\subsection{Implementace}\label{subsec:implementace} +Skrytí a odkrytí informace probíhá ve třech fázích. + +\subsubsection{Kontrola vstupních dat}\label{subsubsec:kontrola-vstupnich-dat} +Aplikace si nejdříve ověří, že všechny informace, které přišly od uživatele jsou +v pořádku. + +Jde například o to, že obrázek musí být v bezztrátovém formátu PNG, případně +o kontrolu konfigurace nebo autorizace uživatele pro přístup k pokročilým +funkcím. + +Aplikace také zkontroluje, zda se celá informace do obrázku při dané konfiguraci +vejde. + +\subsubsection{Metadata}\label{subsubsec:metadata} + +Do prvních \num{104} bitů obrázku se zapíšou metadata. +Z nich lze zjisit, jaká konfigurace byla použita pro zbytek dat, aby +bylo možné je později odkódovat. + +\paragraph{Konfigurace zakódování} + +Pro skrytí metadat je vždy použita nejbezpečnější konfigurace +(záměna 1 bitu a všech 3 barevných složek). + +\paragraph{Bezpečnost} +Vzhledem k tomu, že jsou metadata vždy systematicky uložena stejně, +kdokoliv je může získat. +Po získání metadat je už triviální najít přesné bity, které reprezentují +zakódovanou informaci. +Bez klíče k odšifrování jsou ale tyto bity k ničemu +(klíč se samozřejmě neukládá), protože bez něj jde celková informace jen +extrémně těžce prolomit\cite{enwiki:aes}. + +\subsubsection{Zakódování informace}\label{subsubsec:zakodovani-informace} +Zakódování samotné informace již probíhá na základě dané konfigurace. + +Nejdříve se přípraví kanál pro transport bitů zprávy mezi Gorutinami. +To samé se udělá s pixely a jejich barevnými složkami. + +Pak už stačí pouze procházet pixely a postupně bity na relevantních pozicích a +barevných složkách nastavovat. + +\subsubsection{Dekódování informace}\label{subsubsec:dekodovani-informace} +Dekódování informace probíhá velmi podobně jako odkódování. +Jediný rozdílný krok je, že aplikace nepoužívá konfiguraci od uživatele, ale +sama si ji najde z metadat z prvních 104 bitů \ref{subsubsec:metadata}. + +Získané bity dané informace se zapisují do vyrovnávací paměti (buffer) a pak +jsou dešifrovány daným klíčem. + +\subsection{Zakódování}\label{subsec:zakodovani-dat} +Na adrese \url{https://stegoer.netlify.app/encode} může uživatel nahrát svůj +obrázek a zakódovat do něj informaci. + +\begin{subsubsection}{Textový editor}\label{subsubsec:textovy-editor} +V horní části stránky se nachází textový editor. +Do něj uživatel zadá data, která mají být skryta v obrázku. +Editor umožňuje mnoho možností pro formátování textu a například i nahrání +obrázku (lze zakódovat i více obrázků do jednoho obrázku). +Z editoru dostane aplikace zpět HTML, které se pak pošle na server. + +\begin{figure}[h] + \centering + \includegraphics[scale=0.5]{assets/images/encode-editor} + \caption{Editor textu pro data k zakódování}\label{fig:editor-textu} +\end{figure} + +\end{subsubsection} + +\begin{subsubsection}{Konfigurace}\label{subsubsec:enc-konfigurace} + +Konfigurace je dostupná pouze pro přihlášené uživatele. + +V sekci \texttt{Advanced Configuration} je dostupné nastavení parametrů +pro zakódování. + +\begin{enumerate} + \item Vlastní klíč pro zašifrování dat + \item Počet nejméně významných bitů, které mají být použity + \item Určení jaké barevné složky mají být změněny + \item Zda-li mají být data rozprostřena po obrázku rovnoměrně +\end{enumerate} + +Pokud není specifikován žádný klíč pro zašifrování, aplikace použije +svůj globálně definovaný klíč (ten jen samozřejmě tajný). + +\end{subsubsection} + +\begin{figure} + \centering + \includegraphics[scale=0.5]{assets/images/encode-configuration} + \caption{Konfigurace zakódování}\label{fig:konfigurace-zakodovani} +\end{figure} + +\begin{subsubsection}{Nahrání obrázku}\label{subsubsec:enc-nahrani-obrazku} + +Na stránce nalezneme pole, do kterého lze nahrát obrázek. +Do něj budou informace zakódovány. + +\end{subsubsection} + +\begin{subsubsection}{Potvrzení}\label{subsubsec:enc-potvrzeni} + +Po stisknutí tlačítka \texttt{Encode} proběhne kontrola vložených hodnot. +Pokud je nějaký problém nalezen, aplikace uživatele upozorní. + +Dále aplikace pošle požadavek s informací, konfigurací a +obrázkem na server. + +Následně server zprávu zašifruje a rozdělí na jednotlivé bity a zapíše je do +obrázku. + +Pokud vše proběhne v pořádku, klient dostane zpět odpověď s tímto upraveným +obrázkem. + +Dále se uživateli nabídne možnost si obrázek stáhnout. + +\end{subsubsection} + +\subsection{Dekódování}\label{subsec:dekodovani-dat} +Na adrese \url{https://stegoer.netlify.app/decode} může uživatel nahrát svůj +obrázek a dekódovat z něj data, která tam v minulosti zakódoval. + +\begin{subsubsection}{Konfigurace}\label{subsubsec:dec-konfigurace} + +V sekci \texttt{Advanced Configuration}, která je opět dostupná pouze +přihlášeným uživatelům, je možné specifikovat vlastní klíč, který má být použit +k odšifrování zprávy. + +\end{subsubsection} + +\begin{subsubsection}{Nahrání obrázku}\label{subsubsec:dec-nahrani-obrazku} + +Na stránce opět nalezneme pole do kterého lze nahrát obrázek. +Z tohotu obrázku se aplikace pokusí zakódovanou informaci dekódovat. + +\end{subsubsection} + +\begin{subsubsection}{Potvrzení}\label{subsubsec:dec-potvrzeni} + +Po stisknutí tlačítka \texttt{Decode} proběhne kontrola vložených hodnot. +Pokud je vše v pořádku, aplikace opět pošle požadavek s obrázkem a +případnou konfigurací na server. + +Server následně obrázek zpracuje a pokusí se zakódovanou informaci odšifrovat. +Pokud vše proběhne v pořádku, klient dostane zpět odpověd s odšifrovanou +informací. + +Na konci stránky se pak tato informace zobrazí. +Informaci se vloží do DOM +\url{https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model} +pomocí \url{https://reactjs.org/docs/dom-elements.html\#dangerouslysetinnerhtml} +a proto zůstává stejné formátování, které bylo možné vidět při enkódování +zprávy v textovém editoru \ref{subsubsec:textovy-editor}. + +Aplikace také informaci uživateli zkopíruje do schránky, aby s ní mohl dále +pracovat. + +\end{subsubsection} diff --git a/src/title.tex b/src/title.tex new file mode 100644 index 0000000..e885b88 --- /dev/null +++ b/src/title.tex @@ -0,0 +1,34 @@ +%! Author = kucera-lukas +%! Date = 4/13/22 + +\begin{titlepage} + \begin{center} + \textbf{\large Gymnázium, Praha 6, Nad Alejí 1952}\\ + \vspace{0.2cm} + \rule{\textwidth}{0.5pt}\\ + \vspace{5cm} + \textbf{\Huge stegoer}\\ + \vspace{5cm} + \textbf{\large MATURITNÍ PRÁCE}\\ + \vspace{2cm} + \textbf{\large Lukáš Kučera}\\ + \textbf{Oktáva B}\\ + \vspace*{\fill} + \textbf{\large 2021/2022}\\ + \end{center} +\end{titlepage} +\newpage +Prohlašuji, že jsem tuto maturitní práci vypracoval samostatně a že je zde +uvedena veškerá použitá literatura a další zdroje.\newline +\begin{minipage}{0.7\textwidth} + \vspace{1cm} + V Praze dne 13.4.2022 +\end{minipage} +\begin{minipage}{0.3\textwidth} + \vspace{1cm} + \begin{flushright} + \vspace{11pt} + \hrulefill + \end{flushright} +\end{minipage} +\newpage diff --git a/src/user.tex b/src/user.tex new file mode 100644 index 0000000..8d010ba --- /dev/null +++ b/src/user.tex @@ -0,0 +1,115 @@ +%! Author = kucera-lukas +%! Date = 4/13/22 + +\section{Uživatel}\label{sec:uzivatel} + +\subsection{Registrace}\label{subsec:registrace} +Na adrese \url{https://stegoer.netlify.app/account?form=register} (pokud není +uživatel již přihlášen) se zobrazí stránka, pomocí které je možné si založit +nový uživatelský účet. + +\subsubsection{Náležitosti údajů}\label{subsubsec:naleziosti-udaju} + +\begin{enumerate} + \item Uživatelské jméno musí mít minimálně 6 znaků. + \item Email musí odpovídat regulernímu výrazu \verb/^\S+@\S+\.\S+$/. + \item Heslo musí mít minimálně 6 znaků, obsahovat číslo, velké písmeno, malé + písmeno a alespoň jeden speciální znak. +\end{enumerate} + +\subsubsection{Zadávání hesla}\label{subsubsec:zadavani-hesla} + +Při vyplňování pole pro heslo se zobrazí popover\cite{enwiki:popover}, +který uživateli dává najevo, zda jeho heslo splňuje potřebné podmínky. + +\begin{figure} + \centering + \includegraphics[scale=0.3]{assets/images/password-popover} + \caption{Zadávaní hesla}\label{fig:zadavani-hesla} +\end{figure} + +\subsection{Přihlášení}\label{subsec:prihlaseni} +Na adrese \url{https://stegoer.netlify.app/account?form=login} se zobrazí +přihlašovací stránka. + +Zde se pomocí emailu a hesla lze se přihlásit do vlastního účtu (pokud není +uživatel již přihlášen). + +U přihlášeni probíhá validace pouze emailu, který by opět měl odpovídat +regulernímu výrazu \verb/^\S+@\S+\.\S+$/. + +\subsection{Správa účtu}\label{subsec:sprava-uctu} +Při každém vstupu na adresu \url{https://stegoer.netlify.app/account} aplikace +zkontroje stav uživatele. + +Pokud uživatel není přihlášen aplikace ho přesměruje na přihlašovací +stránku\ref{subsec:prihlaseni}. + +\subsubsection{Informace o účtu} + +Z jednoduché tabulky, která se zobrazí hned při vstupu lze vyčíst tři informace: + +\begin{enumerate} + \item Poslední datum prihlášení uživatele + \item Poslední datum aktualizace uživatele + \item Datum vytvoření uživatelského účtu +\end{enumerate} + +\subsubsection{Aktualizace účtu} + +Levé tlačítko \texttt{Update Account} otevře dialog, pomocí kterého může +uživatel zaktualizovat svůj účet. + +\paragraph{Změna jména a emailu} + +Nabízí se změna uživatelského jména a emailu. +Samozřejmě musí být splněny stejné podmínky jako při +registraci\ref{subsec:registrace}. + +Pro potvrzení je třeba změny povtrdit kliknutím na \texttt{Update} tlačítko. +Pokud aktualizace proběhne bez problému, uživateli se zobrazí notifikace. + +\paragraph{Změna hesla} + +Aplikace umožňuje i změnu hesla. +Pole pro aktualizaci hesla se zpřístupní po kliknutí na tlačítko +\texttt{Set new password?}. +Vše pak probíhá stejně jako při registraci \ref{subsec:registrace} +Pokud uživatel nechce heslo dále měnit je třeba znovu kliknout na tlačítko, +při otevření hesla je popsáno textem \texttt{Close password}. + +Pro potvrzení je opět třeba změny povtrdit kliknutím na \texttt{Update} +tlačítko. + +\subsubsection{Odhlášení} + +Po stisknutí pravého tlačítka \texttt{Logout} je uživatel ze svého účtu odhlášen. + +\subsection{Tabulka obrázků}\label{subsec:tabulka-obrazku} +Na adrese \url{https://stegoer.netlify.app/images} nalezneme tabulku, pomocí +které může uživatel procházet obrázky, do kterých v minulosti uložil nějaká +data. + +\begin{figure} + \centering + \includegraphics[scale=0.5]{assets/images/images-table} + \caption{Tabulka s obrázky}\label{fig:tabulka-obrazky} +\end{figure} + +\subsubsection{Stránkování}\label{subsubsec:strankovani} +Na jedné straně se zobrazí maximálně 10 řádků, pro zobrazení ostatních je třeba +použít navigační tlačítka pod tabulkou. + +Každý řádek tabulky reprezentuje jeden obrázek a lze z něho vyčíst jeho ID a +datum vytvoření. + +\subsubsection{Detail obrázku}\label{subsubsec:detail-obrazku} +Tlačítko \texttt{view}, které se nachází na každém řádku slouží k otevřeni +detailní informace o souboru a možnost si soubor opět znovu stáhnout +(pokud tak uživatel například neučinil po zakódóváni informace). + +\begin{figure} + \centering + \includegraphics[scale=0.5]{assets/images/image-detail} + \caption{Detail obrázku}\label{fig:detail-obrazku} +\end{figure}