update dependecies

update deps
2025-09-06 17:30:39 +00:00 · 2023-05-13 10:29:12 +02:00 · 2023-05-13 09:02:49 +02:00 · 2023-05-13 09:02:44 +02:00 · 2023-05-13 09:02:34 +02:00 · 2023-05-13 08:49:29 +02:00
135 changed files with 5342 additions and 2862 deletions
--- a/.dev.env
+++ b/.dev.env
@@ -0,0 +1,2 @@
+SIZE_LIMIT=10MiB
+VERBOSITY=debug
--- a/.dockerignore
+++ b/.dockerignore
@@ -1,15 +1,15 @@
 *

-!/backend/src
-!/backend/Cargo.lock
-!/backend/Cargo.toml
+!/packages
+!/package.json
+!/pnpm-lock.yaml
+!/pnpm-workspace.yaml

-!/frontend/locales
-!/frontend/src
-!/frontend/static
-!/frontend/.npmrc
-!/frontend/package.json
-!/frontend/pnpm-lock.yaml
-!/frontend/svelte.config.js
-!/frontend/tsconfig.json
-!/frontend/vite.config.js
+**/target
+**/node_modules
+**/dist
+**/bin
+**/*.tsbuildinfo
+**/build
+**/.svelte
+**/.svelte-kit
--- a/.gitattributes
+++ b/.gitattributes
@@ -1 +1,2 @@
 *.afdesign filter=lfs diff=lfs merge=lfs -text
+test/assets/** filter=lfs diff=lfs merge=lfs -text
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -1,24 +1,37 @@
-name: ci
+name: Publish

 on:
  workflow_dispatch:
  push:
    tags:
-      - "v*.*.*"
+      - 'v*.*.*'

 jobs:
+  cli:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+      - uses: pnpm/action-setup@v2
+
+      - run: |
+          pnpm install --frozen-lockfile
+          pnpm run build
+
  docker:
    runs-on: ubuntu-latest
    steps:
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v1
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v1
+      - uses: actions/checkout@v3
+      - uses: docker/setup-qemu-action@v2
+      - uses: docker/setup-buildx-action@v2
        with:
          install: true
      - name: Docker Labels
        id: meta
-        uses: crazy-max/ghaction-docker-meta@v2
+        uses: docker/metadata-action@v4
        with:
          images: cupcakearmy/cryptgeon
          tags: |
@@ -26,16 +39,13 @@ jobs:
            type=semver,pattern={{major}}.{{minor}}
            type=semver,pattern={{major}}
      - name: Login to DockerHub
-        uses: docker/login-action@v1
+        uses: docker/login-action@v2
        with:
          username: ${{ secrets.DOCKERHUB_USERNAME }}
          password: ${{ secrets.DOCKERHUB_TOKEN }}
      - name: Build and push
-        id: docker_build
-        uses: docker/build-push-action@v2
+        uses: docker/build-push-action@v4
        with:
          platforms: linux/amd64,linux/arm64
          push: true
          tags: ${{ steps.meta.outputs.tags }}
-      - name: Image digest
-        run: echo ${{ steps.docker_build.outputs.digest }}
--- a/.github/workflows/test.yaml
+++ b/.github/workflows/test.yaml
@@ -0,0 +1,38 @@
+name: Test
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      # Node
+      - uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+      - uses: pnpm/action-setup@v2
+
+      # Docker
+      - uses: docker/setup-qemu-action@v2
+      - uses: docker/setup-buildx-action@v2
+        with:
+          install: true
+
+      - name: Prepare
+        run: |
+          pnpm install --frozen-lockfile
+          pnpm exec playwright install --with-deps
+          pnpm run test:prepare
+
+      - name: Run your tests
+        run: pnpm test
+      - uses: actions/upload-artifact@v3
+        with:
+          name: test-results
+          path: test-results
--- a/.gitignore
+++ b/.gitignore
@@ -1,11 +1,10 @@
+.env
+*.tsbuildinfo
+node_modules
+dist
+bin

-# Backend
 target

-# Client
-.DS_Store
-node_modules
-/.svelte
-/build
-/functions
-.env
+# Testing
+test-results
--- a/.nvmrc
+++ b/.nvmrc
@@ -0,0 +1 @@
+v18.16
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,6 +0,0 @@
-{
-  "cSpell.words": ["ciphertext", "cryptgeon"],
-  "i18n-ally.localesPaths": ["frontend/locales"],
-  "i18n-ally.enabledFrameworks": ["svelte"],
-  "i18n-ally.keystyle": "nested"
-}
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,27 +5,119 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

+## [2.3.0] - 2023-05-XX
+
+### Added
+
+- New CLI 🎉
+- Russian language
+
+### Changed
+
+- Moved to monorepo
+
+## [2.2.0] - 2023-01-14
+
+### Changed
+
+- Default port is now 8000, not 5000.
+- Moved to generic encryption library `occulto`.
+
+### Fixed
+
+- Bad chinese language code.
+
+### Security
+
+- Updated dependencies.
+
+## [2.1.0] - 2023-01-04
+
+### Added
+
+- QR Code to more easily copy and share links.
+
+## [2.0.7] - 2022-12-26
+
+### Changed
+
+- Svelte Kit now stable 🎉
+
+## [2.0.6] - 2022-11-12
+
+### Fixed
+
+- #66 Set minimum a view.
+
+### Security
+
+- Updated dependencies.
+
+## [2.0.5] - 2022-11-04
+
+### Fixed
+
+- Docker build pipeline.
+
+## [2.0.4] - 2022-10-29
+
+### Added
+
+- `THEME_PAGE_TITLE`.
+- `THEME_FAVICON`.
+
+## [2.0.3] - 2022-10-07
+
+### Added
+
+- Flag for verbosity.
+
+### Fixed
+
+- #58 Fixed bug in the max views frontend form.
+
+## [2.0.2] - 2022-07-20
+
+### Added
+
+- Toasts for events.
+- E2E Tests.
+- Make backend more configurable.
+
+## [2.0.1] - 2022-07-18
+
+### Added
+
+- Max file size on the client now.
+- Loading information.
+
+### Changed
+
+- Changed encoding from hex to base64.
+- Chinese language code.
+- Notable speed improvements for big files.
+
 ## [2.0.0] - 2022-07-16

 ### Added

- Theming for logo and description text
+- Theming for logo and description text.

 ### Changed

- Moved to redis
- New html sanitizing library
+- Moved to redis.
+- New html sanitizing library.

 ## [2.0.0-rc.0] - 2022-07-15

 ### Added

- Theming for logo and description text
+- Theming for logo and description text.

 ### Changed

- Moved to redis
- New html sanitizing library
+- Moved to redis.
+- New html sanitizing library.

 ## [1.5.3] - 2022-06-07

--- a/21
+++ b/21
@@ -1,17 +1,19 @@
 # FRONTEND
-FROM node:16-alpine as client 
+FROM node:18-alpine as client 
 WORKDIR /tmp
-RUN npm install -g pnpm@7
-COPY ./frontend ./
-RUN pnpm install
+RUN npm install -g pnpm@8
+COPY . .
+RUN pnpm install --frozen-lockfile
 RUN pnpm run build


 # BACKEND
-FROM rust:1.61-alpine as backend
+FROM rust:1.69-alpine as backend
 WORKDIR /tmp
 RUN apk add libc-dev openssl-dev alpine-sdk
-COPY ./backend ./
+COPY ./packages/backend/Cargo.* ./
+RUN cargo fetch
+COPY ./packages/backend ./
 RUN cargo build --release


@@ -19,7 +21,8 @@ RUN cargo build --release
 FROM alpine
 WORKDIR /app
 COPY --from=backend /tmp/target/release/cryptgeon .
-COPY --from=client /tmp/build ./frontend/build
-ENV REDIS=redis://redis/
-EXPOSE 5000
+COPY --from=client /tmp/packages/frontend/build ./frontend
+ENV FRONTEND_PATH="./frontend"
+ENV REDIS="redis://redis/"
+EXPOSE 8000
 ENTRYPOINT [ "/app/cryptgeon" ]
--- a/README.md
+++ b/README.md
@@ -24,9 +24,9 @@ _cryptgeon_ is a secure, open source sharing note or file service inspired by [_
 >
 > Thanks to [Lokalise](https://lokalise.com/) for providing free access to their platform.

-## Demo
+## Live Service / Demo

-Check out the demo and see for yourself https://cryptgeon.nicco.io.
+Check out the live service / demo and see for yourself [cryptgeon.org](https://cryptgeon.org)

 ## Features

@@ -50,15 +50,18 @@ of the notes even if it tried to.

 ## Environment Variables

-| Variable         | Default          | Description                                                                                                               |
-| ---------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------- |
-| `REDIS`          | `redis://redis/` | Redis URL to connect to.                                                                                                  |
-| `SIZE_LIMIT`     | `1 KiB`          | Max size for body. Accepted values according to [byte-unit](https://docs.rs/byte-unit/). `512 MiB` is the maximum allowed |
-| `MAX_VIEWS`      | `100`            | Maximal number of views.                                                                                                  |
-| `MAX_EXPIRATION` | `360`            | Maximal expiration in minutes.                                                                                            |
-| `ALLOW_ADVANCED` | `true`           | Allow custom configuration. If set to `false` all notes will be one view only.                                            |
-| `THEME_IMAGE`    | `""`             | Custom image for replacing the logo. Must be publicly reachable                                                           |
-| `THEME_TEXT`     | `""`             | Custom text for replacing the description below the logo                                                                  |
+| Variable           | Default          | Description                                                                                                                                                                                                   |
+| ------------------ | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `REDIS`            | `redis://redis/` | Redis URL to connect to. [According to format](https://docs.rs/redis/latest/redis/#connection-parameters)                                                                                                     |
+| `SIZE_LIMIT`       | `1 KiB`          | Max size for body. Accepted values according to [byte-unit](https://docs.rs/byte-unit/). <br> `512 MiB` is the maximum allowed. <br> The frontend will show that number including the ~35% encoding overhead. |
+| `MAX_VIEWS`        | `100`            | Maximal number of views.                                                                                                                                                                                      |
+| `MAX_EXPIRATION`   | `360`            | Maximal expiration in minutes.                                                                                                                                                                                |
+| `ALLOW_ADVANCED`   | `true`           | Allow custom configuration. If set to `false` all notes will be one view only.                                                                                                                                |
+| `VERBOSITY`        | `warn`           | Verbosity level for the backend. [Possible values](https://docs.rs/env_logger/latest/env_logger/#enabling-logging) are: `error`, `warn`, `info`, `debug`, `trace`                                             |
+| `THEME_IMAGE`      | `""`             | Custom image for replacing the logo. Must be publicly reachable                                                                                                                                               |
+| `THEME_TEXT`       | `""`             | Custom text for replacing the description below the logo                                                                                                                                                      |
+| `THEME_PAGE_TITLE` | `""`             | Custom text the page title                                                                                                                                                                                    |
+| `THEME_FAVICON`    | `""`             | Custom url for the favicon. Must be publicly reachable                                                                                                                                                        |

 ## Deployment

@@ -76,15 +79,19 @@ version: '3.8'
 services:
  redis:
    image: redis:7-alpine
+    # Set a size limit. See link below on how to customise.
+    # https://redis.io/docs/manual/eviction/
+    command: redis-server --maxmemory 1gb --maxmemory-policy allkeys-lru

  app:
    image: cupcakearmy/cryptgeon:latest
    depends_on:
      - redis
    environment:
+      # Size limit for a single note.
      SIZE_LIMIT: 4 MiB
    ports:
-      - 80:5000
+      - 80:8000
 ```

 ### NGINX Proxy
@@ -93,39 +100,21 @@ See the [examples/nginx](https://github.com/cupcakearmy/cryptgeon/tree/main/exam

 ### Traefik 2

-Assumptions:
+See the [examples/traefik](https://github.com/cupcakearmy/cryptgeon/tree/main/examples/traefik) folder.

- External proxy docker network `proxy`
- A certificate resolver `le`
- A https entrypoint `secure`
- Domain name `example.org`
+### Scratch

-```yaml
-version: '3.8'
+See the [examples/scratch](https://github.com/cupcakearmy/cryptgeon/tree/main/examples/scratch) folder. There you'll find a guide how to setup a server and install cryptgeon from scratch.

-networks:
-  proxy:
-    external: true
+### Synology

-services:
-  redis:
-    image: redis:7-alpine
-    restart: unless-stopped
+There is a [guide](https://mariushosting.com/how-to-install-cryptgeon-on-your-synology-nas/) you can follow.

-  app:
-    image: cupcakearmy/cryptgeon:latest
-    restart: unless-stopped
-    depends_on:
-      - redis
-    networks:
-      - default
-      - proxy
-    labels:
-      - traefik.enable=true
-      - traefik.http.routers.cryptgeon.rule=Host(`example.org`)
-      - traefik.http.routers.cryptgeon.entrypoints=secure
-      - traefik.http.routers.cryptgeon.tls.certresolver=le
-```
+### YouTube Guides
+
+- English by [Webnestify](https://www.youtube.com/watch?v=XAyD42I7wyI)
+- English by [DB Tech](https://www.youtube.com/watch?v=S0jx7wpOfNM) [Previous Video](https://www.youtube.com/watch?v=JhpIatD06vE)
+- German by [ApfelCast](https://www.youtube.com/watch?v=84ZMbE9AkHg)

 ## Development

@@ -150,9 +139,6 @@ cargo install cargo-watch

 Make sure you have docker running.

-> If you are on `macOS` you might need to disable AirPlay Receiver as it uses port 5000 (So stupid...)
-> https://developer.apple.com/forums/thread/682332
-
 ```bash
 pnpm run dev
 ```
@@ -165,6 +151,29 @@ Running `pnpm run dev` in the root folder will start the following things:

 You can see the app under [localhost:1234](http://localhost:1234).

+## Tests
+
+Tests are end to end tests written with Playwright.
+
+```sh
+pnpm run test:prepare
+docker compose up redis -d
+pnpm run test:server
+
+# In another terminal.
+# Use the test or test:local script. The local version only runs in one browser for quicker development.
+pnpm run test:local
+```
+
+## Security
+
+Please refer to the security section [here](./SECURITY.md).
+
 ###### Attributions

-Icons made by <a href="https://www.freepik.com" title="Freepik">freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>
+- Test data:
+  - Text for tests [Nietzsche Ipsum](https://nietzsche-ipsum.com/)
+  - [AES Paper](https://www.cs.miami.edu/home/burt/learning/Csc688.012/rijndael/rijndael_doc_V2.pdf)
+  - [Unsplash Pictures](https://unsplash.com/)
+- Loading animation by [Nikhil Krishnan](https://codepen.io/nikhil8krishnan/pen/rVoXJa)
+- Icons made by <a href="https://www.freepik.com" title="Freepik">freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>
--- a/README_zh-CN.md
+++ b/README_zh-CN.md
@@ -26,7 +26,7 @@ _加密鸽_ 是一个受 [_PrivNote_](https://privnote.com)项目启发的安全

 ## 演示示例

-查看加密鸽的在线演示 demo： https://cryptgeon.nicco.io.
+查看加密鸽的在线演示 demo： [cryptgeon.org](https://cryptgeon.org)

 ## 功能

@@ -49,11 +49,13 @@ _加密鸽_ 是一个受 [_PrivNote_](https://privnote.com)项目启发的安全

 | 变量名称          | 默认值           | 描述                                                                              |
 | ----------------- | ---------------- | --------------------------------------------------------------------------------- |
-| `REDIS`           | `redis://redis/` | Redis URL to connect to.                                                          |
+| `REDIS`           | `redis://redis/` | Redis 连接 URL。                                                                  |
 | `SIZE_LIMIT`      | `1 KiB`          | 最大请求体(body)限制。有关支持的数值请查看 [字节单位](https://docs.rs/byte-unit/) |
 | `MAX_VIEWS`       | `100`            | 密信最多查看次数限制                                                              |
 | ` MAX_EXPIRATION` | `360`            | 密信最长过期时间限制(分钟)                                                        |
 | `ALLOW_ADVANCED`  | `true`           | 是否允许自定义设置，该项如果设为`false`，则不会显示自定义设置模块                 |
+| `THEME_IMAGE`     | `""`             | 自定义 Logo 图片，你在这里填写的的图片链接必须是可以公开访问的。                  |
+| `THEME_TEXT`      | `""`             | 自定义在 Logo 下方的文本。                                                        |

 ## 部署

@@ -80,7 +82,7 @@ services:
    environment:
      SIZE_LIMIT: 4 MiB
    ports:
-      - 80:5000
+      - 80:8000
 ```

 ### NGINX 反向代理
@@ -137,7 +139,7 @@ services:
 pnpm install
 pnpm --prefix frontend install

-# Also you need cargo watch if you don't already have it installed.
+# 你还需要安装CargoWatch.
 # https://lib.rs/crates/cargo-watch
 cargo install cargo-watch
 ```
@@ -146,9 +148,6 @@ cargo install cargo-watch

 确保你的 Docker 正在运行

-> If you are on `macOS` you might need to disable AirPlay Receiver as it uses port 5000 (So stupid...)
-> https://developer.apple.com/forums/thread/682332
-
 ```bash
 pnpm run dev
 ```
@@ -161,6 +160,25 @@ pnpm run dev

 你可以通过 1234 端口进入该应用，即 [localhost:1234](http://localhost:1234).

+## 测试
+
+这些测试是用 Playwright 实现的一些端到端测试用例。
+
+```sh
+pnpm run test:prepare
+docker compose up redis -d
+pnpm run test:server
+
+# 在另一个终端中：
+# 使用test或者test:local script。为了更快的开发，本地版本只会在一个浏览器中运行。
+pnpm run test:local
+```
+
 ###### Attributions

-本项目所使用的图标由<a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com 的<a href="https://www.freepik.com" title="Freepik">freepik</a>制作</a>
+- 测试数据:
+  - 测试文本 [Nietzsche Ipsum](https://nietzsche-ipsum.com/)
+  - [AES Paper](https://www.cs.miami.edu/home/burt/learning/Csc688.012/rijndael/rijndael_doc_V2.pdf)
+  - [Unsplash Pictures](https://unsplash.com/)
+- 加载动画由 [Nikhil Krishnan](https://codepen.io/nikhil8krishnan/pen/rVoXJa) 提供
+- 图标由来自 <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> 的 <a href="https://www.freepik.com" title="Freepik">freepik</a> 提供
--- a/SECURITY.md
+++ b/SECURITY.md
@@ -0,0 +1,18 @@
+# Security Policy
+
+## Supported Versions
+
+Please ensure that you are using the latest major version available.
+
+| Version | Supported |
+| ------- | --------- |
+| 2.x     | ✅        |
+| < 1.x   | ❌        |
+
+## Reporting a vulnerability
+
+_cryptgeon_ has a full disclosure vulnerability policy.
+Report any bug / vulnerability directly to the [issue tracker](https://github.com/cupcakearmy/cryptgeon/issues).
+Please do NOT attempt to report any security vulnerability in this code privately to anybody.
+
+> Shamefully copied of the [ring security section](https://github.com/briansmith/ring#bug-reporting).
--- a/cryptgeon.code-workspace
+++ b/cryptgeon.code-workspace
@@ -0,0 +1,23 @@
+{
+  "folders": [
+    {
+      "path": "."
+    },
+    {
+      "path": "packages/backend"
+    },
+    {
+      "path": "packages/frontend"
+    },
+    {
+      "path": "packages/cli"
+    },
+    {
+      "path": "packages/shared"
+    }
+  ],
+  "settings": {
+    "i18n-ally.localesPaths": ["packages/frontend/locales"],
+    "cSpell.words": ["cryptgeon"]
+  }
+}
--- a/docker-compose.dev.yaml
+++ b/docker-compose.dev.yaml
@@ -11,9 +11,8 @@ services:

  app:
    build: .
+    env_file: .dev.env
    depends_on:
      - redis
-    environment:
-      SIZE_LIMIT: 128 MiB
    ports:
-      - 80:5000
+      - 1234:8000
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -0,0 +1,18 @@
+version: '3.8'
+
+services:
+  redis:
+    image: redis:7-alpine
+    # Set a size limit. See link below on how to customise.
+    # https://redis.io/docs/manual/eviction/
+    # command: redis-server --maxmemory 1gb --maxmemory-policy allkeys-lru
+
+  app:
+    image: cupcakearmy/cryptgeon:latest
+    depends_on:
+      - redis
+    environment:
+      # Size limit for a single note.
+      SIZE_LIMIT: 4 MiB
+    ports:
+      - 80:8000
--- a/examples/nginx/nginx-plain.conf
+++ b/examples/nginx/nginx-plain.conf
@@ -4,7 +4,7 @@ server {
    server_name _;

    location / {
-      proxy_pass http://app:5000/;
+      proxy_pass http://app:8000/;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
--- a/examples/nginx/nginx-tls.conf
+++ b/examples/nginx/nginx-tls.conf
@@ -20,7 +20,7 @@ server {
    ssl_trusted_certificate /path/to/fullchain.pem;

    location / {
-      proxy_pass http://app:5000/;
+      proxy_pass http://app:8000/;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
--- a/examples/traefik/README.md
+++ b/examples/traefik/README.md
@@ -0,0 +1,36 @@
+# Install Cryptgeon with Traefik
+
+Assumptions:
+
+- Traefik 2 installed.
+- External proxy docker network `proxy`.
+- A certificate resolver `le`.
+- A https entrypoint `secure`.
+- Domain name `example.org`.
+
+```yaml
+version: '3.8'
+
+networks:
+  proxy:
+    external: true
+
+services:
+  redis:
+    image: redis:7-alpine
+    restart: unless-stopped
+
+  app:
+    image: cupcakearmy/cryptgeon:latest
+    restart: unless-stopped
+    depends_on:
+      - redis
+    networks:
+      - default
+      - proxy
+    labels:
+      - traefik.enable=true
+      - traefik.http.routers.cryptgeon.rule=Host(`example.org`)
+      - traefik.http.routers.cryptgeon.entrypoints=secure
+      - traefik.http.routers.cryptgeon.tls.certresolver=le
+```
--- a/frontend/.dockerignore
+++ b/frontend/.dockerignore
@@ -1,5 +0,0 @@
-.DS_Store
-node_modules
-/.svelte
-/build
-/functions
--- a/frontend/.npmrc
+++ b/frontend/.npmrc
@@ -1 +0,0 @@
-engine-strict=true
--- a/frontend/locales/cn.json
+++ b/frontend/locales/cn.json
@@ -1,42 +0,0 @@
-{
-	"common": {
-		"note": "密信",
-		"file": "上传文件",
-		"advanced": "高级设置",
-		"create": "创建",
-		"loading": "加载中...",
-		"mode": "模式",
-		"views": "{n, plural, =0 {可查看次数} =1 {1 次查看} other {# 次查看}}",
-		"minutes": "{n, plural, =0 {有效期(分钟)} =1 {1 分钟} other {# 分钟}}",
-		"max": "最大值",
-		"share_link": "分享链接",
-		"copy_clipboard": "复制到剪切版"
-	},
-	"home": {
-		"intro": "一键轻松发送 <i>完全加密的</i> 密信或者文件。只需创建一个密信然后分享链接。",
-		"explanation": "该密信会在{type}后失效。",
-		"new_note": "新建密信",
-		"new_note_notice": "<b>可用性警示：</b><br />由于加密鸽的所有数据是全部保存在内存中的，所以如果加密鸽的可用内存被用光了那么它将会删除最早的密信以释放内存，因此不保证该密信的可用性。<br />(一般情况下是您应该是不会遇到这个问题，只是警示一下。)",
-		"errors": {
-			"note_to_big": "无法创建密信，这个密信太大了！",
-			"note_error": "无法创建密信，请再试一遍。",
-			"max": "最大文件大小: {n}",
-			"empty_content": "密信为空！"
-		},
-		"copied_to_clipboard": "已复制到剪切板 🔗"
-	},
-	"show": {
-		"errors": {
-			"not_found": "该密信无法被找到或者它已经被删除了！",
-			"decryption_failed": "密钥错误！您可能不小心粘贴了一个不完整的链接或者正在尝试破解该密信！但无论如何，该密信已被销毁！"
-		},
-		"explanation": "点击下方的按钮可以查看密信，如果它到达了限制将会被删除",
-		"show_note": "查看密信",
-		"warning_will_not_see_again": "您将<b>无法</b>再次查看该密信",
-		"download_all": "下载全部"
-	},
-	"file_upload": {
-		"selected_files": "已选中的文件",
-		"no_files_selected": "没有文件被选中"
-	}
-}
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,35 +0,0 @@
-{
-	"private": true,
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build",
-		"preview": "svelte-kit preview",
-		"check": "svelte-check --tsconfig tsconfig.json",
-		"licenses": "license-checker --summary > licenses.csv",
-		"locale:download": "node scripts/locale.js"
-	},
-	"type": "module",
-	"devDependencies": {
-		"@lokalise/node-api": "^7.3.1",
-		"@sveltejs/adapter-static": "^1.0.0-next.34",
-		"@sveltejs/kit": "^1.0.0-next.361",
-		"@types/dompurify": "^2.3.3",
-		"@types/file-saver": "^2.0.5",
-		"adm-zip": "^0.5.9",
-		"dotenv": "^16.0.1",
-		"svelte": "^3.49.0",
-		"svelte-check": "^2.8.0",
-		"svelte-intl-precompile": "^0.10.1",
-		"svelte-preprocess": "^4.10.7",
-		"tslib": "^2.4.0",
-		"typescript": "^4.7.4",
-		"vite": "^3.0.0"
-	},
-	"dependencies": {
-		"@fontsource/fira-mono": "^4.5.8",
-		"copy-to-clipboard": "^3.3.1",
-		"dompurify": "^2.3.9",
-		"file-saver": "^2.0.5",
-		"pretty-bytes": "^5.6.0"
-	}
-}
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
--- a/frontend/src/global.d.ts
+++ b/frontend/src/global.d.ts
@@ -1,3 +0,0 @@
-/// <reference types="@sveltejs/kit" />
-/// <reference types="svelte" />
-/// <reference types="vite/client" />
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -1,74 +0,0 @@
-export type NoteMeta = { type: 'text' | 'file' }
-
-export type Note = {
-	contents: string
-	meta: NoteMeta
-	views?: number
-	expiration?: number
-}
-export type NoteInfo = {}
-export type NotePublic = Pick<Note, 'contents' | 'meta'>
-export type NoteCreate = Omit<Note, 'meta'> & { meta: string }
-
-export type FileDTO = Pick<File, 'name' | 'size' | 'type'> & {
-	contents: string
-}
-
-type CallOptions = {
-	url: string
-	method: string
-	body?: any
-}
-
-export class PayloadToLargeError extends Error {}
-
-export async function call(options: CallOptions) {
-	const response = await fetch('/api/' + options.url, {
-		method: options.method,
-		body: options.body === undefined ? undefined : JSON.stringify(options.body),
-		mode: 'cors',
-		headers: {
-			'Content-Type': 'application/json',
-		},
-	})
-
-	if (!response.ok) {
-		if (response.status === 413) throw new PayloadToLargeError()
-		else throw new Error('API call failed')
-	}
-	return response.json()
-}
-
-export async function create(note: Note) {
-	const { meta, ...rest } = note
-	const body: NoteCreate = {
-		...rest,
-		meta: JSON.stringify(meta),
-	}
-	const data = await call({
-		url: 'notes/',
-		method: 'post',
-		body,
-	})
-	return data as { id: string }
-}
-
-export async function get(id: string): Promise<NotePublic> {
-	const data = await call({
-		url: `notes/${id}`,
-		method: 'delete',
-	})
-	const { contents, meta } = data
-	return {
-		contents,
-		meta: JSON.parse(meta) as NoteMeta,
-	}
-}
-
-export async function info(id: string): Promise<NoteInfo> {
-	const data = await call({
-		url: `notes/${id}`,
-		method: 'get',
-	})
-	return data
-}
--- a/frontend/src/lib/crypto.ts
+++ b/frontend/src/lib/crypto.ts
@@ -1,71 +0,0 @@
-export class Hex {
-	static encode(buffer: ArrayBuffer): string {
-		let s = ''
-		for (const i of new Uint8Array(buffer)) {
-			s += i.toString(16).padStart(2, '0')
-		}
-		return s
-	}
-
-	static decode(s: string): ArrayBuffer {
-		const size = s.length / 2
-		const buffer = new Uint8Array(size)
-		for (let i = 0; i < size; i++) {
-			const idx = i * 2
-			const segment = s.slice(idx, idx + 2)
-			buffer[i] = parseInt(segment, 16)
-		}
-		return buffer
-	}
-}
-
-const ALG = 'AES-GCM'
-
-export function getRandomBytes(size = 16): Uint8Array {
-	return window.crypto.getRandomValues(new Uint8Array(size))
-}
-
-export function getKeyFromString(password: string) {
-	return window.crypto.subtle.importKey(
-		'raw',
-		new TextEncoder().encode(password),
-		'PBKDF2',
-		false,
-		['deriveBits', 'deriveKey']
-	)
-}
-
-export async function getDerivedForKey(key: CryptoKey, salt: ArrayBuffer) {
-	const iterations = 100_000
-	return window.crypto.subtle.deriveKey(
-		{
-			name: 'PBKDF2',
-			salt,
-			iterations,
-			hash: 'SHA-512',
-		},
-		key,
-		{ name: ALG, length: 256 },
-		true,
-		['encrypt', 'decrypt']
-	)
-}
-
-export async function encrypt(plaintext: string, key: CryptoKey) {
-	const salt = getRandomBytes(16)
-	const derived = await getDerivedForKey(key, salt)
-	const iv = getRandomBytes(16)
-	const encrypted = await window.crypto.subtle.encrypt(
-		{ name: ALG, iv },
-		derived,
-		new TextEncoder().encode(plaintext)
-	)
-	return [salt, iv, encrypted].map(Hex.encode).join(':')
-}
-
-export async function decrypt(ciphertext: string, key: CryptoKey) {
-	const [salt, iv, encrypted] = ciphertext.split(':').map(Hex.decode)
-	const derived = await getDerivedForKey(key, salt)
-	const plaintext = await window.crypto.subtle.decrypt({ name: ALG, iv }, derived, encrypted)
-	return new TextDecoder().decode(plaintext)
-}
--- a/frontend/src/lib/files.ts
+++ b/frontend/src/lib/files.ts
@@ -1,13 +0,0 @@
-export class Files {
-	static toString(f: File | Blob): Promise<string> {
-		const reader = new window.FileReader()
-		reader.readAsDataURL(f)
-		return new Promise((resolve) => {
-			reader.onloadend = () => resolve(reader.result as string)
-		})
-	}
-
-	static async fromString(s: string): Promise<Blob> {
-		return fetch(s).then((r) => r.blob())
-	}
-}
--- a/frontend/src/lib/stores/status.ts
+++ b/frontend/src/lib/stores/status.ts
@@ -1,22 +0,0 @@
-import { call } from '$lib/api'
-import { writable } from 'svelte/store'
-
-export type Status = {
-	version: string
-	max_size: number
-	max_views: number
-	max_expiration: number
-	allow_advanced: boolean
-	theme_image: string
-	theme_text: string
-}
-
-export const status = writable<null | Status>(null)
-
-export async function init() {
-	const data = await call({
-		url: 'status/',
-		method: 'get',
-	})
-	status.set(data)
-}
--- a/frontend/src/lib/views/Create.svelte
+++ b/frontend/src/lib/views/Create.svelte
@@ -1,201 +0,0 @@
-<script lang="ts">
-	import type { Note } from '$lib/api'
-	import { create,PayloadToLargeError } from '$lib/api'
-	import { encrypt,getKeyFromString,getRandomBytes,Hex } from '$lib/crypto'
-	import { status } from '$lib/stores/status'
-	import Button from '$lib/ui/Button.svelte'
-	import FileUpload from '$lib/ui/FileUpload.svelte'
-	import MaxSize from '$lib/ui/MaxSize.svelte'
-	import Switch from '$lib/ui/Switch.svelte'
-	import TextArea from '$lib/ui/TextArea.svelte'
-	import TextInput from '$lib/ui/TextInput.svelte'
-	import { t } from 'svelte-intl-precompile'
-	import { blur } from 'svelte/transition'
-
-	let note: Note = {
-		contents: '',
-		meta: { type: 'text' },
-		views: 1,
-		expiration: 60,
-	}
-	let result: { password: string; id: string } | null = null
-	let advanced = false
-	let file = false
-	let timeExpiration = false
-	let message = ''
-	let loading = false
-	let error: string | null = null
-
-	$: if (!advanced) {
-		note.views = 1
-		timeExpiration = false
-	}
-
-	$: {
-		message = $t('home.explanation', {
-			values: {
-				type: $t(timeExpiration ? 'common.minutes' : 'common.views', {
-					values: { n: (timeExpiration ? note.expiration : note.views) ?? '?' },
-				}),
-			},
-		})
-	}
-
-	$: note.meta.type = file ? 'file' : 'text'
-
-	$: if (!file) {
-		note.contents = ''
-	}
-
-	class EmptyContentError extends Error {}
-
-	async function submit() {
-		try {
-			error = null
-			loading = true
-			const password = Hex.encode(getRandomBytes(32))
-			const key = await getKeyFromString(password)
-			if (note.contents === '') throw new EmptyContentError()
-			const data: Note = {
-				contents: await encrypt(note.contents, key),
-				meta: note.meta,
-			}
-			if (timeExpiration) data.expiration = parseInt(note.expiration as any)
-			else data.views = parseInt(note.views as any)
-
-			const response = await create(data)
-			result = {
-				password: password,
-				id: response.id,
-			}
-		} catch (e) {
-			if (e instanceof PayloadToLargeError) {
-				error = $t('home.errors.note_to_big')
-			} else if (e instanceof EmptyContentError) {
-				error = $t('home.errors.empty_content')
-			} else {
-				error = $t('home.errors.note_error')
-			}
-		} finally {
-			loading = false
-		}
-	}
-
-	function reset() {
-		window.location.reload()
-	}
-</script>
-
-{#if result}
-	<TextInput
-		type="text"
-		readonly
-		label={$t('common.share_link')}
-		value="{window.location.origin}/note/{result.id}#{result.password}"
-		copy
-	/>
-	<br />
-	<p>
-		{@html $t('home.new_note_notice')}
-	</p>
-	<br />
-	<Button on:click={reset}>{$t('home.new_note')}</Button>
-{:else}
-	<p>
-		{@html $status?.theme_text || $t('home.intro')}
-	</p>
-	<form on:submit|preventDefault={submit}>
-		<fieldset disabled={loading}>
-			{#if file}
-				<FileUpload label={$t('common.file')} on:file={(f) => (note.contents = f.detail)} />
-			{:else}
-				<TextArea label={$t('common.note')} bind:value={note.contents} placeholder="..." />
-			{/if}
-
-			<div class="bottom">
-				<Switch class="file" label={$t('common.file')} bind:value={file} />
-				{#if $status?.allow_advanced}
-					<Switch label={$t('common.advanced')} bind:value={advanced} />
-				{/if}
-				<div class="grow" />
-				<div class="tr">
-					<small>{$t('common.max')}: <MaxSize /> </small>
-					<br />
-					<Button type="submit">{$t('common.create')}</Button>
-				</div>
-			</div>
-
-			{#if error}
-				<div class="error-text">{error}</div>
-			{/if}
-
-			<p>
-				<br />
-				{#if loading}
-					{$t('common.loading')}
-				{:else}
-					{message}
-				{/if}
-			</p>
-
-			{#if advanced}
-				<div transition:blur={{ duration: 250 }}>
-					<br />
-					<div class="fields">
-						<TextInput
-							type="number"
-							label={$t('common.views', { values: { n: 0 } })}
-							bind:value={note.views}
-							disabled={timeExpiration}
-							max={$status?.max_views}
-							validate={(v) =>
-								($status && v < $status?.max_views) ||
-								$t('home.errors.max', { values: { n: $status?.max_views ?? 0 } })}
-						/>
-						<div class="middle-switch">
-							<Switch label={$t('common.mode')} bind:value={timeExpiration} color={false} />
-						</div>
-						<TextInput
-							type="number"
-							label={$t('common.minutes', { values: { n: 0 } })}
-							bind:value={note.expiration}
-							disabled={!timeExpiration}
-							max={$status?.max_expiration}
-							validate={(v) =>
-								($status && v < $status?.max_expiration) ||
-								$t('home.errors.max', { values: { n: $status?.max_expiration ?? 0 } })}
-						/>
-					</div>
-				</div>
-			{/if}
-		</fieldset>
-	</form>
-{/if}
-
-<style>
-	.bottom {
-		display: flex;
-		align-items: flex-end;
-		margin-top: 0.5rem;
-	}
-
-	.bottom :global(.file) {
-		margin-right: 0.5rem;
-	}
-
-	.grow {
-		flex: 1;
-	}
-
-	.middle-switch {
-		margin: 0 1rem;
-	}
-
-	.error-text {
-		margin-top: 0.5rem;
-	}
-
-	.fields {
-		display: flex;
-	}
-</style>
--- a/frontend/src/routes/note/[id].svelte
+++ b/frontend/src/routes/note/[id].svelte
@@ -1,83 +0,0 @@
-<script context="module" lang="ts">
-	import type { Load } from '@sveltejs/kit'
-
-	export const load: Load = async ({ params }) => {
-		return {
-			props: params,
-		}
-	}
-</script>
-
-<script lang="ts">
-	import { onMount } from 'svelte'
-	import { t } from 'svelte-intl-precompile'
-
-	import type { NotePublic } from '$lib/api'
-	import { get, info } from '$lib/api'
-	import { decrypt, getKeyFromString } from '$lib/crypto'
-	import Button from '$lib/ui/Button.svelte'
-	import ShowNote from '$lib/ui/ShowNote.svelte'
-
-	export let id: string
-
-	let password: string
-	let note: NotePublic | null = null
-	let exists = false
-
-	let loading = true
-	let error = false
-
-	onMount(async () => {
-		try {
-			loading = true
-			error = false
-			password = window.location.hash.slice(1)
-			await info(id)
-			exists = true
-		} catch {
-			exists = false
-		} finally {
-			loading = false
-		}
-	})
-
-	async function show() {
-		try {
-			error = false
-			loading = true
-			const data = note || (await get(id)) // Don't get the content twice on wrong password.
-			const key = await getKeyFromString(password)
-			data.contents = await decrypt(data.contents, key)
-			note = data
-		} catch {
-			error = true
-		} finally {
-			loading = false
-		}
-	}
-</script>
-
-{#if !loading}
-	{#if !exists}
-		<p class="error-text">{$t('show.errors.not_found')}</p>
-	{:else if note && !error}
-		<ShowNote {note} />
-	{:else}
-		<form on:submit|preventDefault={show}>
-			<fieldset>
-				<p>{$t('show.explanation')}</p>
-				<Button type="submit">{$t('show.show_note')}</Button>
-				{#if error}
-					<br />
-					<p class="error-text">
-						{$t('show.errors.decryption_failed')}
-						<br />
-					</p>
-				{/if}
-			</fieldset>
-		</form>
-	{/if}
-{/if}
-{#if loading}
-	<p>{$t('common.loading')}</p>
-{/if}
--- a/frontend/svelte.config.js
+++ b/frontend/svelte.config.js
@@ -1,12 +0,0 @@
-import adapter from '@sveltejs/adapter-static'
-import preprocess from 'svelte-preprocess'
-
-export default {
-	preprocess: preprocess(),
-
-	kit: {
-		adapter: adapter({
-			fallback: 'index.html',
-		}),
-	},
-}
--- a/package.json
+++ b/package.json
@@ -1,13 +1,21 @@
 {
+  "packageManager": "pnpm@8.4.0",
  "scripts": {
-    "dev:docker": "docker-compose up redis",
-    "dev:backend": "cd backend && cargo watch -x 'run --bin cryptgeon'",
-    "dev:front": "pnpm --prefix frontend run dev",
-    "dev:proxy": "node proxy.mjs",
-    "dev": "run-p dev:*"
+    "dev:docker": "docker-compose -f docker-compose.dev.yaml up redis",
+    "dev:packages": "pnpm --parallel run dev",
+    "dev": "run-p dev:*",
+    "docker:up": "docker compose -f docker-compose.dev.yaml up",
+    "docker:build": "docker compose -f docker-compose.dev.yaml build",
+    "test": "playwright test --project chrome firefox safari",
+    "test:local": "playwright test --project local",
+    "test:server": "run-s docker:up",
+    "test:prepare": "run-p build docker:build",
+    "build": "pnpm run --recursive --filter=!@cryptgeon/backend build"
  },
  "devDependencies": {
-    "http-proxy": "^1.18.1",
-    "npm-run-all": "^4.1.5"
+    "@playwright/test": "^1.33.0",
+    "@types/node": "^20.1.3",
+    "npm-run-all": "^4.1.5",
+    "shelljs": "^0.8.5"
  }
 }
--- a/packages/backend/Cargo.lock
+++ b/packages/backend/Cargo.lock
--- a/packages/backend/Cargo.toml
+++ b/packages/backend/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "cryptgeon"
-version = "2.0.0"
+version = "2.3.0-beta.4"
 authors = ["cupcakearmy <hi@nicco.io>"]
 edition = "2021"

@@ -8,6 +8,9 @@ edition = "2021"
 name = "cryptgeon"
 path = "src/main.rs"

+[registries.crates-io]
+protocol = "sparse"
+
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

 [dependencies]
--- a/packages/backend/package.json
+++ b/packages/backend/package.json
@@ -0,0 +1,10 @@
+{
+  "private": true,
+  "name": "@cryptgeon/backend",
+  "scripts": {
+    "dev": "cargo watch -x 'run --bin cryptgeon'",
+    "build": "cargo build --release",
+    "test:server": "SIZE_LIMIT=10MiB LISTEN_ADDR=0.0.0.0:1234 cargo run",
+    "test:prepare": "cargo build"
+  }
+}
--- a/packages/backend/src/api.rs
+++ b/packages/backend/src/api.rs
--- a/packages/backend/src/client.rs
+++ b/packages/backend/src/client.rs
@@ -1,14 +1,17 @@
 use actix_files::{Files, NamedFile};
 use actix_web::{web, Result};

+use crate::config;
+
 pub fn init(cfg: &mut web::ServiceConfig) {
    cfg.service(
-        Files::new("/", "./frontend/build")
+        Files::new("/", config::FRONTEND_PATH.to_string())
            .index_file("index.html")
            .use_etag(true),
    );
 }

 pub async fn index() -> Result<NamedFile> {
-    Ok(NamedFile::open("./frontend/build/index.html")?)
+    let index = format!("{}{}", config::FRONTEND_PATH.to_string(), "/index.html");
+    Ok(NamedFile::open(index)?)
 }
--- a/packages/backend/src/config.rs
+++ b/packages/backend/src/config.rs
@@ -1,10 +1,15 @@
 use byte_unit::Byte;

-// General
+// Internal
 lazy_static! {
    pub static ref VERSION: String = option_env!("CARGO_PKG_VERSION")
        .unwrap_or("Unknown")
        .to_string();
+    pub static ref FRONTEND_PATH: String =
+        std::env::var("FRONTEND_PATH").unwrap_or("../frontend/build".to_string());
+    pub static ref LISTEN_ADDR: String =
+        std::env::var("LISTEN_ADDR").unwrap_or("0.0.0.0:8000".to_string());
+    pub static ref VERBOSITY: String = std::env::var("VERBOSITY").unwrap_or("warn".to_string());
 }

 // CONFIG
@@ -37,4 +42,12 @@ lazy_static! {
        .unwrap_or("".to_string())
        .parse()
        .unwrap();
+    pub static ref THEME_PAGE_TITLE: String = std::env::var("THEME_PAGE_TITLE")
+        .unwrap_or("".to_string())
+        .parse()
+        .unwrap();
+    pub static ref THEME_FAVICON: String = std::env::var("THEME_FAVICON")
+        .unwrap_or("".to_string())
+        .parse()
+        .unwrap();
 }
--- a/packages/backend/src/main.rs
+++ b/packages/backend/src/main.rs
@@ -18,10 +18,11 @@ mod store;
 #[actix_web::main]
 async fn main() -> std::io::Result<()> {
    dotenv().ok();
-    env_logger::init_from_env(env_logger::Env::new().default_filter_or("warning"));
+    env_logger::init_from_env(env_logger::Env::new().default_filter_or(config::VERBOSITY.as_str()));
+
    return HttpServer::new(|| {
        App::new()
-            .wrap(Logger::new("%a \"%r\" %s %b %T"))
+            .wrap(Logger::new("\"%r\" %s %b %T"))
            .wrap(middleware::Compress::default())
            .wrap(middleware::DefaultHeaders::default())
            .configure(size::init)
@@ -29,7 +30,7 @@ async fn main() -> std::io::Result<()> {
            .configure(client::init)
            .default_service(web::to(client::index))
    })
-    .bind("0.0.0.0:5000")?
+    .bind(config::LISTEN_ADDR.to_string())?
    .run()
    .await;
 }
--- a/packages/backend/src/note/mod.rs
+++ b/packages/backend/src/note/mod.rs
--- a/packages/backend/src/note/model.rs
+++ b/packages/backend/src/note/model.rs
--- a/packages/backend/src/note/routes.rs
+++ b/packages/backend/src/note/routes.rs
@@ -49,7 +49,7 @@ async fn create(note: web::Json<Note>) -> impl Responder {
    }
    match n.views {
        Some(v) => {
-            if v > *config::MAX_VIEWS {
+            if v > *config::MAX_VIEWS || v < 1 {
                return bad_req;
            }
            n.expiration = None; // views overrides expiration
--- a/packages/backend/src/size.rs
+++ b/packages/backend/src/size.rs
@@ -7,5 +7,6 @@ pub fn init(cfg: &mut web::ServiceConfig) {
    let plain = web::PayloadConfig::default()
        .limit(*config::LIMIT)
        .mimetype(mime::STAR_STAR);
+    // cfg.app_data(plain);
    cfg.app_data(json).app_data(plain);
 }
--- a/packages/backend/src/status/mod.rs
+++ b/packages/backend/src/status/mod.rs
--- a/packages/backend/src/status/model.rs
+++ b/packages/backend/src/status/model.rs
@@ -12,4 +12,6 @@ pub struct Status {
    // Theme
    pub theme_image: String,
    pub theme_text: String,
+    pub theme_page_title: String,
+    pub theme_favicon: String,
 }
--- a/packages/backend/src/status/routes.rs
+++ b/packages/backend/src/status/routes.rs
@@ -13,6 +13,8 @@ async fn get_status() -> impl Responder {
        allow_advanced: *config::ALLOW_ADVANCED,
        theme_image: config::THEME_IMAGE.to_string(),
        theme_text: config::THEME_TEXT.to_string(),
+        theme_page_title: config::THEME_PAGE_TITLE.to_string(),
+        theme_favicon: config::THEME_FAVICON.to_string()
    });
 }

--- a/packages/backend/src/store.rs
+++ b/packages/backend/src/store.rs
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -0,0 +1,37 @@
+{
+  "version": "2.3.0-beta.4",
+  "name": "cryptgeon",
+  "type": "module",
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "dev": "./scripts/build.js --watch",
+    "build": "./scripts/build.js",
+    "package": "./scripts/package.js",
+    "bin": "run-s build package",
+    "prepublishOnly": "run-s build"
+  },
+  "main": "./dist/index.cjs",
+  "bin": {
+    "cryptgeon": "./dist/index.cjs"
+  },
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "@commander-js/extra-typings": "^10.0.3",
+    "@cryptgeon/shared": "workspace:*",
+    "@types/inquirer": "^9.0.3",
+    "@types/mime": "^3.0.1",
+    "@types/node": "^20.1.3",
+    "commander": "^10.0.1",
+    "esbuild": "^0.17.19",
+    "inquirer": "^9.2.2",
+    "mime": "^3.0.0",
+    "occulto": "^2.0.1",
+    "pkg": "^5.8.1",
+    "pretty-bytes": "^6.1.0",
+    "typescript": "^5.0.4"
+  }
+}
--- a/packages/cli/scripts/build.js
+++ b/packages/cli/scripts/build.js
@@ -0,0 +1,17 @@
+#!/usr/bin/env node
+
+import { build, context } from 'esbuild'
+import pkg from '../package.json' assert { type: 'json' }
+
+const options = {
+  entryPoints: ['./src/index.ts'],
+  bundle: true,
+  minify: true,
+  platform: 'node',
+  outfile: './dist/index.cjs',
+  define: { VERSION: `"${pkg.version}"` },
+}
+
+const watch = process.argv.slice(2)[0] === '--watch'
+if (watch) (await context(options)).watch()
+else await build(options)
--- a/packages/cli/scripts/package.js
+++ b/packages/cli/scripts/package.js
@@ -0,0 +1,17 @@
+#!/usr/bin/env node
+
+import { exec } from 'pkg'
+
+const targets = [
+  'node18-macos-arm64',
+  'node18-macos-x64',
+  'node18-linux-arm64',
+  'node18-linux-x64',
+  'node18-win-arm64',
+  'node18-win-x64',
+]
+
+for (const target of targets) {
+  console.log(`🚀 Building ${target}`)
+  await exec(['./dist/index.cjs', '--target', target, '--output', `./bin/${target.replace('node18', 'cryptgeon')}`])
+}
--- a/packages/cli/src/download.ts
+++ b/packages/cli/src/download.ts
@@ -0,0 +1,62 @@
+import { Adapters, get, info, setBase } from '@cryptgeon/shared'
+import inquirer from 'inquirer'
+import { access, constants, writeFile } from 'node:fs/promises'
+import { basename, resolve } from 'node:path'
+import { Hex } from 'occulto'
+import pretty from 'pretty-bytes'
+
+import { exit } from './utils'
+
+export async function download(url: URL) {
+  setBase(url.origin)
+  const id = url.pathname.split('/')[2]
+  await info(id).catch(() => exit('Note does not exist or is expired'))
+  const note = await get(id)
+
+  const password = url.hash.slice(1)
+  const key = Hex.decode(password)
+
+  const couldNotDecrypt = () => exit('Could not decrypt note. Probably an invalid password')
+  switch (note.meta.type) {
+    case 'file':
+      const files = await Adapters.Files.decrypt(note.contents, key).catch(couldNotDecrypt)
+      if (!files) {
+        exit('No files found in note')
+        return
+      }
+      const { names } = await inquirer.prompt([
+        {
+          type: 'checkbox',
+          message: 'What files should be saved?',
+          name: 'names',
+          choices: files.map((file) => ({
+            value: file.name,
+            name: `${file.name} - ${file.type} - ${pretty(file.size, { binary: true })}`,
+            checked: true,
+          })),
+        },
+      ])
+
+      const selected = files.filter((file) => names.includes(file.name))
+
+      if (!selected.length) exit('No files selected')
+
+      await Promise.all(
+        files.map(async (file) => {
+          let filename = resolve(file.name)
+          try {
+            // If exists -> prepend timestamp to not overwrite the current file
+            await access(filename, constants.R_OK)
+            filename = resolve(`${Date.now()}-${file.name}`)
+          } catch {}
+          await writeFile(filename, file.contents)
+          console.log(`Saved: ${basename(filename)}`)
+        })
+      )
+      break
+    case 'text':
+      const plaintext = await Adapters.Text.decrypt(note.contents, key).catch(couldNotDecrypt)
+      console.log(plaintext)
+      break
+  }
+}
--- a/packages/cli/src/index.ts
+++ b/packages/cli/src/index.ts
@@ -0,0 +1,93 @@
+#!/usr/bin/env node
+
+import { Argument, Option, program } from '@commander-js/extra-typings'
+import { setBase, status } from '@cryptgeon/shared'
+import prettyBytes from 'pretty-bytes'
+
+import { download } from './download.js'
+import { parseFile, parseNumber } from './parsers.js'
+import { uploadFiles, uploadText } from './upload.js'
+import { exit } from './utils.js'
+
+const defaultServer = process.env['CRYPTGEON_SERVER'] || 'https://cryptgeon.org'
+const server = new Option('-s --server <url>', 'the cryptgeon server to use').default(defaultServer)
+const files = new Argument('<file...>', 'Files to be sent').argParser(parseFile)
+const text = new Argument('<text>', 'Text content of the note')
+const password = new Option('-p --password <string>', 'manually set a password')
+const url = new Argument('<url>', 'The url to open')
+const views = new Option('-v --views <number>', 'Amount of views before getting destroyed').argParser(parseNumber)
+const minutes = new Option('-m --minutes <number>', 'Minutes before the note expires').argParser(parseNumber)
+
+// Node 18 guard
+parseInt(process.version.slice(1).split(',')[0]) < 18 && exit('Node 18 or higher is required')
+
+// @ts-ignore
+const version: string = VERSION
+
+async function checkConstrains(constrains: { views?: number; minutes?: number }) {
+  const { views, minutes } = constrains
+  if (views && minutes) exit('cannot set view and minutes constrains simultaneously')
+  if (!views && !minutes) constrains.views = 1
+
+  const response = await status()
+  if (views && views > response.max_views)
+    exit(`Only a maximum of ${response.max_views} views allowed. ${views} given.`)
+  if (minutes && minutes > response.max_expiration)
+    exit(`Only a maximum of ${response.max_expiration} minutes allowed. ${minutes} given.`)
+}
+
+program.name('cryptgeon').version(version).configureHelp({ showGlobalOptions: true })
+
+program
+  .command('info')
+  .addOption(server)
+  .action(async (options) => {
+    setBase(options.server)
+    const response = await status()
+    const formatted = {
+      ...response,
+      max_size: prettyBytes(response.max_size),
+    }
+    for (const key of Object.keys(formatted)) {
+      if (key.startsWith('theme_')) delete formatted[key as keyof typeof formatted]
+    }
+    console.table(formatted)
+  })
+
+const send = program.command('send')
+send
+  .command('file')
+  .addArgument(files)
+  .addOption(server)
+  .addOption(views)
+  .addOption(minutes)
+  .action(async (files, options) => {
+    setBase(options.server!)
+    await checkConstrains(options)
+    await uploadFiles(files, { views: options.views, expiration: options.minutes })
+  })
+send
+  .command('text')
+  .addArgument(text)
+  .addOption(server)
+  .addOption(views)
+  .addOption(minutes)
+  .action(async (text, options) => {
+    setBase(options.server!)
+    await checkConstrains(options)
+    await uploadText(text, { views: options.views, expiration: options.minutes })
+  })
+
+program
+  .command('open')
+  .addArgument(url)
+  .action(async (note, options) => {
+    try {
+      const url = new URL(note)
+      await download(url)
+    } catch {
+      exit('Invalid URL')
+    }
+  })
+
+program.parse()
--- a/packages/cli/src/parsers.ts
+++ b/packages/cli/src/parsers.ts
@@ -0,0 +1,27 @@
+import { InvalidArgumentError, InvalidOptionArgumentError } from '@commander-js/extra-typings'
+import { accessSync, constants } from 'node:fs'
+import { resolve } from 'node:path'
+
+export function parseFile(value: string, before: string[] = []) {
+  try {
+    const file = resolve(value)
+    accessSync(file, constants.R_OK)
+    return [...before, file]
+  } catch {
+    throw new InvalidArgumentError('cannot access file')
+  }
+}
+
+export function parseURL(value: string, _: URL): URL {
+  try {
+    return new URL(value)
+  } catch {
+    throw new InvalidArgumentError('is not a valid url')
+  }
+}
+
+export function parseNumber(value: string, _: number): number {
+  const n = parseInt(value, 10)
+  if (isNaN(n)) throw new InvalidOptionArgumentError('invalid number')
+  return n
+}
--- a/packages/cli/src/upload.ts
+++ b/packages/cli/src/upload.ts
@@ -0,0 +1,48 @@
+import { readFile, stat } from 'node:fs/promises'
+import { basename } from 'node:path'
+
+import { Adapters, BASE, create, FileDTO, Note } from '@cryptgeon/shared'
+import mime from 'mime'
+import { AES, Hex, TypedArray } from 'occulto'
+
+import { exit } from './utils.js'
+
+type UploadOptions = Pick<Note, 'views' | 'expiration'>
+
+export async function upload(key: TypedArray, note: Note) {
+  try {
+    const result = await create(note)
+    const password = Hex.encode(key)
+    const url = `${BASE}/note/${result.id}#${password}`
+    console.log(`Note created under:\n\n${url}`)
+  } catch {
+    exit('Could not create note')
+  }
+}
+
+export async function uploadFiles(paths: string[], options: UploadOptions) {
+  const key = await AES.generateKey()
+  const files: FileDTO[] = await Promise.all(
+    paths.map(async (path) => {
+      const data = new Uint8Array(await readFile(path))
+      const stats = await stat(path)
+      const extension = path.substring(path.indexOf('.') + 1)
+      const type = mime.getType(extension) ?? 'application/octet-stream'
+      return {
+        name: basename(path),
+        size: stats.size,
+        contents: data,
+        type,
+      } satisfies FileDTO
+    })
+  )
+
+  const contents = await Adapters.Files.encrypt(files, key)
+  await upload(key, { ...options, contents, meta: { type: 'file' } })
+}
+
+export async function uploadText(text: string, options: UploadOptions) {
+  const key = await AES.generateKey()
+  const contents = await Adapters.Text.encrypt(text, key)
+  await upload(key, { ...options, contents, meta: { type: 'text' } })
+}
--- a/packages/cli/src/utils.ts
+++ b/packages/cli/src/utils.ts
@@ -0,0 +1,6 @@
+import { exit as exitNode } from 'node:process'
+
+export function exit(message: string) {
+  console.error(message)
+  exitNode(1)
+}
--- a/packages/cli/tsconfig.json
+++ b/packages/cli/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "module": "es2022",
+    "moduleResolution": "node",
+    "noEmit": true,
+    "strict": true,
+    "allowSyntheticDefaultImports": true
+  }
+}
--- a/packages/frontend/.gitignore
+++ b/packages/frontend/.gitignore
--- a/packages/frontend/.prettierignore
+++ b/packages/frontend/.prettierignore
--- a/packages/frontend/.prettierrc
+++ b/packages/frontend/.prettierrc
--- a/packages/frontend/README.md
+++ b/packages/frontend/README.md
--- a/packages/frontend/licenses.csv
+++ b/packages/frontend/licenses.csv
@@ -1,8 +1,8 @@
-├─ MIT: 12
+├─ MIT: 13
+├─ ISC: 2
 ├─ BSD-3-Clause: 1
 ├─ (MPL-2.0 OR Apache-2.0): 1
 ├─ BSD-2-Clause: 1
-├─ ISC: 1
 ├─ 0BSD: 1
 └─ Apache-2.0: 1

--- a/packages/frontend/locales/de.json
+++ b/packages/frontend/locales/de.json
@@ -4,13 +4,19 @@
 		"file": "Datei",
 		"advanced": "erweitert",
 		"create": "erstellen",
-		"loading": "Läd...",
+		"loading": "läd",
 		"mode": "Modus",
 		"views": "{n, plural, =0 {Ansichten} =1 {1 Ansicht} other {# Ansichten}}",
 		"minutes": "{n, plural, =0 {Minuten} =1 {1 Minute} other {# Minuten}}",
 		"max": "max",
 		"share_link": "Link teilen",
-		"copy_clipboard": "in die Zwischenablage kopieren"
+		"copy_clipboard": "in die Zwischenablage kopieren",
+		"copied_to_clipboard": "in die Zwischenablage kopiert",
+		"encrypting": "verschlüsseln",
+		"decrypting": "entschlüsselt",
+		"uploading": "hochladen",
+		"downloading": "wird heruntergeladen",
+		"qr_code": "qr-code"
 	},
 	"home": {
 		"intro": "Senden Sie ganz einfach <i>vollständig verschlüsselte</i>, sichere Notizen oder Dateien mit einem Klick. Erstellen Sie einfach eine Notiz und teilen Sie den Link.",
@@ -23,12 +29,15 @@
 			"max": "max: {n}",
 			"empty_content": "Notiz ist leer."
 		},
-		"copied_to_clipboard": "in die Zwischenablage kopiert 🔗"
+		"messages": {
+			"note_created": "notiz erstellt."
+		}
 	},
 	"show": {
 		"errors": {
 			"not_found": "wurde nicht gefunden oder wurde bereits gelöscht.",
-			"decryption_failed": "falsches Passwort. konnte nicht entziffert werden. wahrscheinlich ein defekter Link. Notiz wurde zerstört."
+			"decryption_failed": "falsches Passwort. konnte nicht entziffert werden. wahrscheinlich ein defekter Link. Notiz wurde zerstört.",
+			"unsupported_type": "nicht unterstützter Notiztyp."
 		},
 		"explanation": "Klicken Sie unten, um die Notiz anzuzeigen und zu löschen, wenn der Zähler sein Limit erreicht hat",
 		"show_note": "Notiz anzeigen",
--- a/packages/frontend/locales/en.json
+++ b/packages/frontend/locales/en.json
@@ -4,13 +4,19 @@
 		"file": "file",
 		"advanced": "advanced",
 		"create": "create",
-		"loading": "loading...",
+		"loading": "loading",
 		"mode": "mode",
 		"views": "{n, plural, =0 {views} =1 {1 view} other {# views}}",
 		"minutes": "{n, plural, =0 {minutes} =1 {1 minute} other {# minutes}}",
 		"max": "max",
 		"share_link": "share link",
-		"copy_clipboard": "copy to clipboard"
+		"copy_clipboard": "copy to clipboard",
+		"copied_to_clipboard": "copied to clipboard",
+		"encrypting": "encrypting",
+		"decrypting": "decrypting",
+		"uploading": "uploading",
+		"downloading": "downloading",
+		"qr_code": "qr code"
 	},
 	"home": {
 		"intro": "Easily send <i>fully encrypted</i>, secure notes or files with one click. Just create a note and share the link.",
@@ -23,12 +29,15 @@
 			"max": "max: {n}",
 			"empty_content": "note is empty."
 		},
-		"copied_to_clipboard": "copied to clipboard 🔗"
+		"messages": {
+			"note_created": "note created."
+		}
 	},
 	"show": {
 		"errors": {
 			"not_found": "note was not found or was already deleted.",
-			"decryption_failed": "wrong password. could not decipher. probably a broken link. note was destroyed."
+			"decryption_failed": "wrong password. could not decipher. probably a broken link. note was destroyed.",
+			"unsupported_type": "unsupported note type."
 		},
 		"explanation": "click below to show and delete the note if the counter has reached it's limit",
 		"show_note": "show note",
--- a/packages/frontend/locales/es.json
+++ b/packages/frontend/locales/es.json
@@ -4,13 +4,19 @@
 		"file": "archivo",
 		"advanced": "avanzado",
 		"create": "crear",
-		"loading": "cargando...",
+		"loading": "cargando",
 		"mode": "modo",
 		"views": "{n, plural, =0 {vistas} =1 {1 vista} other {# vistas}}",
 		"minutes": "{n, plural, =0 {minutos} =1 {1 minuto} other {# minutos}}",
 		"max": "max",
 		"share_link": "compartir enlace",
-		"copy_clipboard": "copiar al portapapeles"
+		"copy_clipboard": "copiar al portapapeles",
+		"copied_to_clipboard": "copiado al portapapeles",
+		"encrypting": "encriptando",
+		"decrypting": "descifrando",
+		"uploading": "cargando",
+		"downloading": "descargando",
+		"qr_code": "código qr"
 	},
 	"home": {
 		"intro": "Envía fácilmente notas o archivos <i>totalmente encriptados</i> y seguros con un solo clic. Solo tienes que crear una nota y compartir el enlace.",
@@ -23,16 +29,19 @@
 			"max": "max: {n}",
 			"empty_content": "la nota está vacía."
 		},
-		"copied_to_clipboard": "copiado al portapapeles 🔗"
+		"messages": {
+			"note_created": "nota creada."
+		}
 	},
 	"show": {
 		"errors": {
 			"not_found": "la nota no se encontró o ya fue borrada.",
-			"decryption_failed": "contraseña incorrecta. no se pudo descifrar. probablemente un enlace roto. la nota fue destruida."
+			"decryption_failed": "contraseña incorrecta. no se pudo descifrar. probablemente un enlace roto. la nota fue destruida.",
+			"unsupported_type": "tipo de nota no compatible."
 		},
 		"explanation": "pulse abajo para mostrar y borrar la nota si el contador ha llegado a su límite",
 		"show_note": "mostrar nota",
-		"warning_will_not_see_again": " <b>no</b> tendrás la oportunidad de volver a ver la nota.",
+		"warning_will_not_see_again": "<b>no</b> tendrás la oportunidad de volver a ver la nota.",
 		"download_all": "descargar todo"
 	},
 	"file_upload": {
--- a/packages/frontend/locales/fr.json
+++ b/packages/frontend/locales/fr.json
@@ -4,13 +4,19 @@
 		"file": "fichier",
 		"advanced": "avancé",
 		"create": "créer",
-		"loading": "chargement...",
+		"loading": "chargement",
 		"mode": "mode",
 		"views": "{n, plural, =0 {vues} =1 {1 vue} other {# vues}}",
 		"minutes": "{n, plural, =0 {minutes} =1 {1 minute} other {# minutes}}",
 		"max": "max",
 		"share_link": "partager le lien",
-		"copy_clipboard": "copier dans le presse-papiers"
+		"copy_clipboard": "copier dans le presse-papiers",
+		"copied_to_clipboard": "copié dans le presse-papiers",
+		"encrypting": "cryptage",
+		"decrypting": "déchiffrer",
+		"uploading": "téléchargement",
+		"downloading": "téléchargement",
+		"qr_code": "code qr"
 	},
 	"home": {
 		"intro": "Envoyez facilement des notes ou des fichiers <i>entièrement cryptés</i> et sécurisés en un seul clic. Il suffit de créer une note et de partager le lien.",
@@ -23,12 +29,15 @@
 			"max": "max: {n}",
 			"empty_content": "La note est vide."
 		},
-		"copied_to_clipboard": "copié dans le presse-papiers 🔗"
+		"messages": {
+			"note_created": "note créée."
+		}
 	},
 	"show": {
 		"errors": {
 			"not_found": "La note n'a pas été trouvée ou a déjà été supprimée.",
-			"decryption_failed": "mauvais mot de passe. impossible à déchiffrer. probablement un lien brisé. la note a été détruite."
+			"decryption_failed": "mauvais mot de passe. impossible à déchiffrer. probablement un lien brisé. la note a été détruite.",
+			"unsupported_type": "type de note non supporté."
 		},
 		"explanation": "Cliquez ci-dessous pour afficher et supprimer la note si le compteur a atteint sa limite.",
 		"show_note": "note de présentation",
--- a/packages/frontend/locales/it.json
+++ b/packages/frontend/locales/it.json
@@ -4,13 +4,19 @@
 		"file": "file",
 		"advanced": "avanzato",
 		"create": "crea",
-		"loading": "carica...",
+		"loading": "carica",
 		"mode": "modalita",
 		"views": "{n, plural, =0 {viste} =1 {1 vista} other {# viste}}",
 		"minutes": "{n, plural, =0 {minuti} =1 {1 minuto} other {# minuti}}",
 		"max": "max",
 		"share_link": "condividi link",
-		"copy_clipboard": "copia negli appunti"
+		"copy_clipboard": "copia negli appunti",
+		"copied_to_clipboard": "copiato negli appunti",
+		"encrypting": "criptando",
+		"decrypting": "decifrando",
+		"uploading": "caricamento",
+		"downloading": "scaricando",
+		"qr_code": "codice qr"
 	},
 	"home": {
 		"intro": "Invia facilmente note o file <i>completamente criptati</i> e sicuri con un solo clic. Basta creare una nota e condividere il link.",
@@ -23,16 +29,19 @@
 			"max": "max: {n}",
 			"empty_content": "la nota è vuota."
 		},
-		"copied_to_clipboard": "copiato negli appunti 🔗"
+		"messages": {
+			"note_created": "nota creata."
+		}
 	},
 	"show": {
 		"errors": {
 			"not_found": "non è stata trovata o è stata già cancellata.",
-			"decryption_failed": "password sbagliata. non ha potuto decifrare. probabilmente un link rotto. la nota è stata distrutta."
+			"decryption_failed": "password sbagliata. non ha potuto decifrare. probabilmente un link rotto. la nota è stata distrutta.",
+			"unsupported_type": "tipo di nota non supportato."
 		},
 		"explanation": "clicca sotto per mostrare e cancellare la nota se il contatore ha raggiunto il suo limite",
 		"show_note": "mostra la nota",
-		"warning_will_not_see_again": " <b>non</b> avrete la possibilità di rivedere la nota.",
+		"warning_will_not_see_again": "<b>non</b> avrete la possibilità di rivedere la nota.",
 		"download_all": "scarica tutti"
 	},
 	"file_upload": {
--- a/packages/frontend/locales/ja.json
+++ b/packages/frontend/locales/ja.json
@@ -0,0 +1,51 @@
+{
+	"common": {
+		"note": "新しいメモ",
+		"file": "ファイル",
+		"advanced": "アドバンスド",
+		"create": "作成",
+		"loading": "読み込み中",
+		"mode": "モード",
+		"views": "{n, plural, =0 {表示可能な時間} =1 { 1 ビュー} other {#ビュー}}",
+		"minutes": "{n, plural, =0 {有効期間(分)} =1 {1 分} other {# 分}}",
+		"max": "マックス",
+		"share_link": "共有リンク",
+		"copy_clipboard": "クリップボードにコピーする",
+		"copied_to_clipboard": "クリップボードにコピーされました",
+		"encrypting": "暗号化",
+		"decrypting": "復号化",
+		"uploading": "アップロード中",
+		"downloading": "ダウンロード中",
+		"qr_code": "QRコード"
+	},
+	"home": {
+		"intro": "<i>完全に暗号化された</i> 、安全なメモやファイルをワンクリックで簡単に送信できます。メモを作成してリンクを共有するだけです。",
+		"explanation": "メモは{type}後に期限切れになり、破棄されます。",
+		"new_note": "新しいメモ",
+		"new_note_notice": "<b>可用性: </b> <br />すべてが RAM に保持されるため、メモが保存されるとは限りません。いっぱいになると、最も古いメモが削除されます。 <br /> (大丈夫だと思いますが、ご了承ください。)",
+		"errors": {
+			"note_to_big": "メモを作成できませんでした。メモが大きすぎる",
+			"note_error": "メモを作成できませんでした。もう一度お試しください。",
+			"max": "最大ファイルサイズ: {n}",
+			"empty_content": "メモは空です。"
+		},
+		"messages": {
+			"note_created": "メモが作成されました。"
+		}
+	},
+	"show": {
+		"errors": {
+			"not_found": "メモが見つからないか、既に削除されています。",
+			"decryption_failed": "パスワードエラー！不完全なリンクを貼り付けたり、暗号を解読しようとしたりしている可能性があります！しかし、いずれにしても、この暗号は破棄されました！",
+			"unsupported_type": "サポートされていないメモ タイプです。"
+		},
+		"explanation": "カウンターが上限に達した場合、ノートの表示と削除を行うには、以下をクリックします。",
+		"show_note": "メモを表示",
+		"warning_will_not_see_again": "あなた <b>できません</b> このノートをもう一度見る",
+		"download_all": "すべてダウンロード"
+	},
+	"file_upload": {
+		"selected_files": "選択したファイル",
+		"no_files_selected": "ファイルが選択されていません"
+	}
+}
--- a/packages/frontend/locales/ru.json
+++ b/packages/frontend/locales/ru.json
@@ -0,0 +1,51 @@
+{
+	"common": {
+		"note": "заметка",
+		"file": "файл",
+		"advanced": "расширенные",
+		"create": "создать",
+		"loading": "загрузка",
+		"mode": "режим",
+		"views": "{n, plural, =0 {просмотры} =1 {1 просмотр} other {# просмотры}}",
+		"minutes": "{n, plural, =0 {минут} =1 {1 минута} other {# минуты}}",
+		"max": "макс",
+		"share_link": "поделиться ссылкой",
+		"copy_clipboard": "скопировать в буфер обмена",
+		"copied_to_clipboard": "скопировано в буфер обмена",
+		"encrypting": "шифрование",
+		"decrypting": "расшифровка",
+		"uploading": "загрузка",
+		"downloading": "скачивание",
+		"qr_code": "qr код"
+	},
+	"home": {
+		"intro": "Легко отправляйте <i>полностью зашифрованные</i> защищенные заметки или файлы одним щелчком мыши. Просто создайте заметку и поделитесь ссылкой.",
+		"explanation": "заметка истечет и будет уничтожена после {type}.",
+		"new_note": "новая заметка",
+		"new_note_notice": "<b>availability:</b><br />the note is not guaranteed to be stored as everything is kept in ram, if it fills up the oldest notes will be removed.<br />(you probably will be fine, just be warned.)",
+		"errors": {
+			"note_to_big": "нельзя создать новую заметку. заметка слишком большая",
+			"note_error": "нельзя создать новую заметку. пожалйста попробуйте позднее.",
+			"max": "макс: {n}",
+			"empty_content": "пустая заметка."
+		},
+		"messages": {
+			"note_created": "заметка создана."
+		}
+	},
+	"show": {
+		"errors": {
+			"not_found": "заметка не найдена или была удалена.",
+			"decryption_failed": "неправильный пароль. не смог расшифровать. возможно ссылка битая. записка уничтожена.",
+			"unsupported_type": "неподдерживаемый тип заметки."
+		},
+		"explanation": "щелкните ниже, чтобы показать и удалить примечание, если счетчик достиг предела",
+		"show_note": "показать заметку",
+		"warning_will_not_see_again": "вы <b>не сможете</b> больше просмотреть заметку.",
+		"download_all": "скачать всё"
+	},
+	"file_upload": {
+		"selected_files": "Выбранные файлы",
+		"no_files_selected": "Файлы не выбраны"
+	}
+}
--- a/packages/frontend/locales/zh.json
+++ b/packages/frontend/locales/zh.json
@@ -0,0 +1,51 @@
+{
+	"common": {
+		"note": "密信",
+		"file": "上传文件",
+		"advanced": "高级设置",
+		"create": "创建",
+		"loading": "加载中",
+		"mode": "模式",
+		"views": "{n, plural, =0 {可读次数} =1 {1 次查看} other {# 次查看}}",
+		"minutes": "{n, plural, =0 {有效期（分钟）} =1 {1 分钟} other {# 分钟}}",
+		"max": "最大值",
+		"share_link": "分享链接",
+		"copy_clipboard": "复制到粘贴板",
+		"copied_to_clipboard": "已成功复制到粘贴板",
+		"encrypting": "加密",
+		"decrypting": "解密",
+		"uploading": "上传",
+		"downloading": "下载",
+		"qr_code": "二维码"
+	},
+	"home": {
+		"intro": "飞鸽传书，一键传输完全加密的密信或文件，阅后即焚。",
+		"explanation": "该密信会在{type}后失效。",
+		"new_note": "新建密信",
+		"new_note_notice": "<b>提醒：</b><br>密信保存在内存中，如果内存满了，则最早的密信将被删除以释放内存，因此不保证该密信的可用性。一般不会出现这种情况，无需担心。",
+		"errors": {
+			"note_to_big": "创建失败，密信过大。",
+			"note_error": "创建失败，请稍后重试。",
+			"max": "次数上限：{n}",
+			"empty_content": "密信不能为空。"
+		},
+		"messages": {
+			"note_created": "密信创建成功。"
+		}
+	},
+	"show": {
+		"errors": {
+			"not_found": "密信不存在，可能已被查看或删除。",
+			"decryption_failed": "密钥错误，无法查看。",
+			"unsupported_type": "不支持的类型。"
+		},
+		"explanation": "点击下方按钮即可查看密信，阅后即焚。",
+		"show_note": "查看密信",
+		"warning_will_not_see_again": "你将<b>无法</b>再次查看该密信，请尽快复制到粘贴板。",
+		"download_all": "下载全部"
+	},
+	"file_upload": {
+		"selected_files": "已选中的文件",
+		"no_files_selected": "没有文件被选中"
+	}
+}
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -0,0 +1,41 @@
+{
+	"private": true,
+	"name": "@cryptgeon/web",
+	"scripts": {
+		"postinstall": "svelte-kit sync",
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"check": "svelte-check --tsconfig tsconfig.json",
+		"licenses": "license-checker --summary > licenses.csv",
+		"locale:download": "node scripts/locale.js",
+		"test:prepare": "pnpm run build"
+	},
+	"type": "module",
+	"devDependencies": {
+		"@lokalise/node-api": "^9.8.0",
+		"@sveltejs/adapter-static": "^2.0.2",
+		"@sveltejs/kit": "^1.16.3",
+		"@types/dompurify": "^3.0.2",
+		"@types/file-saver": "^2.0.5",
+		"@zerodevx/svelte-toast": "^0.9.3",
+		"adm-zip": "^0.5.10",
+		"dotenv": "^16.0.3",
+		"svelte": "^3.59.1",
+		"svelte-check": "^3.3.2",
+		"svelte-intl-precompile": "^0.12.1",
+		"tslib": "^2.5.0",
+		"typescript": "^5.0.4",
+		"vite": "^4.3.5"
+	},
+	"dependencies": {
+		"@cryptgeon/shared": "workspace:*",
+		"@fontsource/fira-mono": "^4.5.10",
+		"copy-to-clipboard": "^3.3.3",
+		"dompurify": "^3.0.3",
+		"file-saver": "^2.0.5",
+		"occulto": "^2.0.1",
+		"pretty-bytes": "^6.1.0",
+		"qrious": "^4.0.2"
+	}
+}
--- a/packages/frontend/scripts/locale.js
+++ b/packages/frontend/scripts/locale.js
@@ -1,14 +1,19 @@
-import dotenv from 'dotenv'
 import { LokaliseApi } from '@lokalise/node-api'
-import https from 'https'
 import AdmZip from 'adm-zip'
+import dotenv from 'dotenv'
+import https from 'https'

 dotenv.config()

+function exit(msg) {
+	console.error(msg)
+	process.exit(1)
+}
+
 const apiKey = process.env.LOKALISE_API_KEY
 const project_id = process.env.LOKALISE_PROJECT
-if (!apiKey) throw new Error('No API Key set for Lokalize! Set with "LOKALISE_API_KEY"')
-if (!project_id) throw new Error('No project id set for Lokalize! Set with "LOKALISE_PROJECT"')
+if (!apiKey) exit('No API Key set for Lokalize! Set with "LOKALISE_API_KEY"')
+if (!project_id) exit('No project id set for Lokalize! Set with "LOKALISE_PROJECT"')
 const client = new LokaliseApi({ apiKey })

 const WGet = (url) =>
--- a/packages/frontend/src/app.css
+++ b/packages/frontend/src/app.css
@@ -14,7 +14,9 @@
 	--ui-text-0: #fefefe;
 	--ui-text-1: #eee;
 	--ui-clr-primary: hsl(186, 65%, 55%);
+	--ui-clr-primary-alt: hsl(186, 85%, 35%);
 	--ui-clr-error: hsl(357, 77%, 51%);
+	--ui-clr-error-alt: hsl(357, 87%, 41%);

 	--ui-anim: all 150ms ease;
 }
@@ -85,6 +87,8 @@ button {
 	font-size: inherit;
 	background: inherit;
 	color: inherit;
+	border: none;
+	padding-inline: initial;
 }

 *:disabled,
--- a/packages/frontend/src/app.d.ts
+++ b/packages/frontend/src/app.d.ts
@@ -0,0 +1,9 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+// and what to do when importing types
+declare namespace App {
+	// interface Error {}
+	// interface Locals {}
+	// interface PageData {}
+	// interface Platform {}
+}
--- a/packages/frontend/src/app.html
+++ b/packages/frontend/src/app.html
@@ -2,7 +2,6 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />

 		%sveltekit.head%
--- a/packages/frontend/src/lib/icons/IconContrast.svelte
+++ b/packages/frontend/src/lib/icons/IconContrast.svelte
--- a/packages/frontend/src/lib/icons/IconCopy.svelte
+++ b/packages/frontend/src/lib/icons/IconCopy.svelte
--- a/packages/frontend/src/lib/icons/IconDice.svelte
+++ b/packages/frontend/src/lib/icons/IconDice.svelte
--- a/packages/frontend/src/lib/icons/IconEye.svelte
+++ b/packages/frontend/src/lib/icons/IconEye.svelte
--- a/packages/frontend/src/lib/icons/IconEyeOff.svelte
+++ b/packages/frontend/src/lib/icons/IconEyeOff.svelte
--- a/packages/frontend/src/lib/stores/status.ts
+++ b/packages/frontend/src/lib/stores/status.ts
@@ -0,0 +1,8 @@
+import { status as getStatus, type Status } from '@cryptgeon/shared'
+import { writable } from 'svelte/store'
+
+export const status = writable<null | Status>(null)
+
+export async function init() {
+	status.set(await getStatus())
+}
--- a/packages/frontend/src/lib/toast.ts
+++ b/packages/frontend/src/lib/toast.ts
@@ -0,0 +1,37 @@
+import { toast, type SvelteToastOptions } from '@zerodevx/svelte-toast'
+
+export enum NotifyType {
+	Success = 'success',
+	Error = 'error',
+}
+
+const themeMapping: Record<NotifyType, SvelteToastOptions['theme']> = {
+	[NotifyType.Success]: {
+		'--toastBackground': 'var(--ui-clr-primary)',
+		'--toastBarBackground': 'var(--ui-clr-primary-alt)',
+	},
+	[NotifyType.Error]: {
+		'--toastBackground': 'var(--ui-clr-error)',
+		'--toastBarBackground': 'var(--ui-clr-error-alt)',
+	},
+}
+
+function notifyFN(message: string, type: NotifyType = NotifyType.Success) {
+	const options: SvelteToastOptions = {
+		duration: 5_000,
+		theme: {
+			...themeMapping[type],
+			'--toastBarHeight': '0.25rem',
+			'--toastMinHeight': 'auto',
+			'--toastMsgPadding': '0.5rem',
+			'--toastBorderRadius': '0',
+		},
+	}
+
+	toast.push(message, options)
+}
+
+export const notify = {
+	success: (message: string) => notifyFN(message, NotifyType.Success),
+	error: (message: string) => notifyFN(message, NotifyType.Error),
+}
--- a/packages/frontend/src/lib/ui/AboutParagraph.svelte
+++ b/packages/frontend/src/lib/ui/AboutParagraph.svelte
--- a/packages/frontend/src/lib/ui/AdvancedParameters.svelte
+++ b/packages/frontend/src/lib/ui/AdvancedParameters.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { t } from 'svelte-intl-precompile'
+
+	import { status } from '$lib/stores/status'
+	import Switch from '$lib/ui/Switch.svelte'
+	import TextInput from '$lib/ui/TextInput.svelte'
+	import type { Note } from '@cryptgeon/shared'
+
+	export let note: Note
+	export let timeExpiration = false
+</script>
+
+<div class="fields">
+	<TextInput
+		data-testid="field-views"
+		type="number"
+		label={$t('common.views', { values: { n: 0 } })}
+		bind:value={note.views}
+		disabled={timeExpiration}
+		max={$status?.max_views}
+		min={1}
+		validate={(v) =>
+			($status && v <= $status?.max_views && v > 0) ||
+			$t('home.errors.max', { values: { n: $status?.max_views ?? 0 } })}
+	/>
+	<div class="middle-switch">
+		<Switch
+			data-testid="switch-advanced-toggle"
+			label={$t('common.mode')}
+			bind:value={timeExpiration}
+			color={false}
+		/>
+	</div>
+	<TextInput
+		data-testid="field-expiration"
+		type="number"
+		label={$t('common.minutes', { values: { n: 0 } })}
+		bind:value={note.expiration}
+		disabled={!timeExpiration}
+		max={$status?.max_expiration}
+		validate={(v) =>
+			($status && v < $status?.max_expiration) ||
+			$t('home.errors.max', { values: { n: $status?.max_expiration ?? 0 } })}
+	/>
+</div>
+
+<style>
+	.middle-switch {
+		margin: 0 1rem;
+	}
+
+	.fields {
+		display: flex;
+	}
+</style>
--- a/packages/frontend/src/lib/ui/Button.svelte
+++ b/packages/frontend/src/lib/ui/Button.svelte
--- a/packages/frontend/src/lib/ui/Canvas.svelte
+++ b/packages/frontend/src/lib/ui/Canvas.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	// @ts-ignore
+	import QR from 'qrious'
+	import { t } from 'svelte-intl-precompile'
+
+	import { getCSSVariable } from '$lib/utils'
+
+	export let value: string
+
+	let canvas: HTMLCanvasElement
+
+	$: {
+		new QR({
+			value,
+			level: 'Q',
+			size: 800,
+			background: getCSSVariable('--ui-bg-0'),
+			foreground: getCSSVariable('--ui-text-0'),
+			element: canvas,
+		})
+	}
+</script>
+
+<small>{$t('common.qr_code')}</small>
+<div>
+	<canvas bind:this={canvas} />
+</div>
+
+<style>
+	div {
+		padding: 0.5rem;
+		width: fit-content;
+		border: 2px solid var(--ui-bg-1);
+		background-color: var(--ui-bg-0);
+		margin-top: 0.125rem;
+	}
+
+	canvas {
+		width: 100%;
+		height: auto;
+	}
+</style>
--- a/packages/frontend/src/lib/ui/FileUpload.svelte
+++ b/packages/frontend/src/lib/ui/FileUpload.svelte
@@ -1,38 +1,33 @@
 <script lang="ts">
-	import type { FileDTO } from '$lib/api'
-	import { Files } from '$lib/files'
-	import { createEventDispatcher } from 'svelte'
 	import { t } from 'svelte-intl-precompile'
-	import Button from './Button.svelte'
-	import MaxSize from './MaxSize.svelte'
+
+	import Button from '$lib/ui/Button.svelte'
+	import MaxSize from '$lib/ui/MaxSize.svelte'
+	import type { FileDTO } from '@cryptgeon/shared'

 	export let label: string = ''
-	let files: File[] = []
+	export let files: FileDTO[] = []

-	const dispatch = createEventDispatcher<{ file: string }>()
+	async function fileToDTO(file: File): Promise<FileDTO> {
+		return {
+			name: file.name,
+			size: file.size,
+			type: file.type,
+			contents: new Uint8Array(await file.arrayBuffer()),
+		}
+	}

 	async function onInput(e: Event) {
 		const input = e.target as HTMLInputElement
 		if (input?.files?.length) {
-			files = [...files, ...Array.from(input.files)]
-			const data: FileDTO[] = await Promise.all(
-				files.map(async (file) => ({
-					name: file.name,
-					type: file.type,
-					size: file.size,
-					contents: await Files.toString(file),
-				}))
-			)
-			dispatch('file', JSON.stringify(data))
-		} else {
-			dispatch('file', '')
+			const toAdd = await Promise.all(Array.from(input.files).map(fileToDTO))
+			files = [...files, ...toAdd]
 		}
 	}

 	function clear(e: Event) {
 		e.preventDefault()
 		files = []
-		dispatch('file', '')
 	}
 </script>

@@ -40,7 +35,7 @@
 	<small>
 		{label}
 	</small>
-	<input type="file" on:change={onInput} multiple />
+	<input {...$$restProps} type="file" on:change={onInput} multiple />
 	<div class="box">
 		{#if files.length}
 			<div>
@@ -57,7 +52,9 @@
 			<div>
 				<b>{$t('file_upload.no_files_selected')}</b>
 				<br />
-				<small>{$t('common.max')}: <MaxSize /></small>
+				<small>
+					{$t('common.max')}: <MaxSize />
+				</small>
 			</div>
 		{/if}
 	</div>
--- a/packages/frontend/src/lib/ui/Icon.svelte
+++ b/packages/frontend/src/lib/ui/Icon.svelte
--- a/packages/frontend/src/lib/ui/Loader.svelte
+++ b/packages/frontend/src/lib/ui/Loader.svelte
@@ -0,0 +1,41 @@
+<svg
+	version="1.1"
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	viewBox="0 0 100 100"
+	xml:space="preserve"
+>
+	<rect fill="none" stroke="currentColor" stroke-width="4" x="25" y="25" width="50" height="50">
+		<animateTransform
+			attributeName="transform"
+			dur="0.5s"
+			from="0 50 50"
+			to="180 50 50"
+			type="rotate"
+			id="strokeBox"
+			attributeType="XML"
+			begin="rectBox.end"
+		/>
+	</rect>
+	<rect x="27" y="27" fill="currentColor" width="46" height="50">
+		<animate
+			attributeName="height"
+			dur="1.3s"
+			attributeType="XML"
+			from="50"
+			to="0"
+			id="rectBox"
+			fill="freeze"
+			begin="0s;strokeBox.end"
+		/>
+	</rect>
+</svg>
+
+<style>
+	svg {
+		height: 2em;
+		position: relative;
+		top: 0.6em;
+		pointer-events: none;
+	}
+</style>
--- a/packages/frontend/src/lib/ui/MaxSize.svelte
+++ b/packages/frontend/src/lib/ui/MaxSize.svelte
@@ -1,12 +1,17 @@
 <script lang="ts">
-	import { status } from '$lib/stores/status'
 	import prettyBytes from 'pretty-bytes'
 	import { _ } from 'svelte-intl-precompile'
+
+	import { status } from '$lib/stores/status'
+
+	// Due to encoding overhead (~35%) with base64
+	// https://en.wikipedia.org/wiki/Base64
+	const overhead = 1 / 1.35
 </script>

 <span>
 	{#if $status !== null}
-		{prettyBytes($status.max_size, { binary: true })}
+		{prettyBytes($status.max_size * overhead, { binary: true })}
 	{:else}
 		{$_('common.loading')}
 	{/if}
--- a/packages/frontend/src/lib/ui/NoteResult.svelte
+++ b/packages/frontend/src/lib/ui/NoteResult.svelte
@@ -0,0 +1,49 @@
+<script lang="ts" context="module">
+	export type NoteResult = {
+		password: string
+		id: string
+	}
+</script>
+
+<script lang="ts">
+	import { t } from 'svelte-intl-precompile'
+
+	import Button from '$lib/ui/Button.svelte'
+	import TextInput from '$lib/ui/TextInput.svelte'
+	import Canvas from './Canvas.svelte'
+
+	export let result: NoteResult
+
+	$: url = `${window.location.origin}/note/${result.id}#${result.password}`
+
+	function reset() {
+		window.location.reload()
+	}
+</script>
+
+<TextInput
+	type="text"
+	readonly
+	label={$t('common.share_link')}
+	value={url}
+	copy
+	data-testid="share-link"
+/>
+
+<div>
+	<Canvas value={url} />
+</div>
+
+<p>
+	{@html $t('home.new_note_notice')}
+</p>
+<br />
+<Button on:click={reset}>{$t('home.new_note')}</Button>
+
+<style>
+	div {
+		width: min(12rem, 100%);
+		margin-top: 1rem;
+		margin-bottom: 1rem;
+	}
+</style>
--- a/packages/frontend/src/lib/ui/ShowNote.svelte
+++ b/packages/frontend/src/lib/ui/ShowNote.svelte
@@ -1,20 +1,24 @@
+<script lang="ts" context="module">
+	export type DecryptedNote = Omit<NotePublic, 'contents'> & { contents: any }
+</script>
+
 <script lang="ts">
-	import type { FileDTO, NotePublic } from '$lib/api'
-	import { Files } from '$lib/files'
-	import copy from 'copy-to-clipboard'
 	import DOMPurify from 'dompurify'
 	import { saveAs } from 'file-saver'
 	import prettyBytes from 'pretty-bytes'
 	import { t } from 'svelte-intl-precompile'
-	import Button from './Button.svelte'

-	export let note: NotePublic
+	import Button from '$lib/ui/Button.svelte'
+	import { copy } from '$lib/utils'
+	import type { FileDTO, NotePublic } from '@cryptgeon/shared'
+
+	export let note: DecryptedNote

 	const RE_URL = /[A-Za-z]+:\/\/([A-Z a-z0-9\-._~:\/?#\[\]@!$&'()*+,;%=])+/g
 	let files: FileDTO[] = []

 	$: if (note.meta.type === 'file') {
-		files = JSON.parse(note.contents) as FileDTO[]
+		files = note.contents
 	}

 	$: download = () => {
@@ -24,7 +28,7 @@
 	}

 	async function downloadFile(file: FileDTO) {
-		const f = new File([await Files.fromString(file.contents)], file.name, {
+		const f = new File([file.contents], file.name, {
 			type: file.type,
 		})
 		saveAs(f)
@@ -40,20 +44,24 @@
 </script>

 <p class="error-text">{@html $t('show.warning_will_not_see_again')}</p>
-{#if note.meta.type === 'text'}
-	<div class="note">
-		{@html contentWithLinks(note.contents)}
-	</div>
-	<Button on:click={() => copy(note.contents)}>{$t('common.copy_clipboard')}</Button>
-{:else}
-	{#each files as file}
-		<div class="note file">
-			<b on:click={() => downloadFile(file)}>↓ {file.name}</b>
-			<small> {file.type} － {prettyBytes(file.size)}</small>
+<div data-testid="result">
+	{#if note.meta.type === 'text'}
+		<div class="note">
+			{@html contentWithLinks(note.contents)}
 		</div>
-	{/each}
-	<Button on:click={download}>{$t('show.download_all')}</Button>
-{/if}
+		<Button on:click={() => copy(note.contents)}>{$t('common.copy_clipboard')}</Button>
+	{:else}
+		{#each files as file}
+			<div class="note file">
+				<button on:click={() => downloadFile(file)}>
+					<b>↓ {file.name}</b>
+				</button>
+				<small> {file.type} － {prettyBytes(file.size)}</small>
+			</div>
+		{/each}
+		<Button on:click={download}>{$t('show.download_all')}</Button>
+	{/if}
+</div>

 <style>
 	.note {
--- a/packages/frontend/src/lib/ui/Switch.svelte
+++ b/packages/frontend/src/lib/ui/Switch.svelte
--- a/packages/frontend/src/lib/ui/TextArea.svelte
+++ b/packages/frontend/src/lib/ui/TextArea.svelte
--- a/packages/frontend/src/lib/ui/TextInput.svelte
+++ b/packages/frontend/src/lib/ui/TextInput.svelte
@@ -1,9 +1,7 @@
 <script lang="ts">
-	import { getRandomBytes, Hex } from '$lib/crypto'
-	import copyToClipboard from 'copy-to-clipboard'
-	import { t } from 'svelte-intl-precompile'
-	import { fade } from 'svelte/transition'
-	import Icon from './Icon.svelte'
+	import Icon from '$lib/ui/Icon.svelte'
+	import { copy as copyFN } from '$lib/utils'
+	import { getRandomBytes, Hex } from 'occulto'

 	export let label: string = ''
 	export let value: any
@@ -14,8 +12,6 @@
 	const initialType = $$restProps.type
 	const isPassword = initialType === 'password'
 	let hidden = true
-	let notification: string | null = null
-	let notificationTimeout: NodeJS.Timeout | null = null

 	$: valid = validate(value)

@@ -27,22 +23,9 @@
 	function toggle() {
 		hidden = !hidden
 	}
-	function copyFN() {
-		copyToClipboard(value.toString())
-		notify($t('home.copied_to_clipboard'))
-	}
-	function randomFN() {
-		value = Hex.encode(getRandomBytes(20))
-	}

-	function notify(msg: string, delay: number = 2000) {
-		if (notificationTimeout) {
-			clearTimeout(notificationTimeout)
-		}
-		notificationTimeout = setTimeout(() => {
-			notification = null
-		}, delay)
-		notification = msg
+	async function randomFN() {
+		value = Hex.encode(await getRandomBytes(32))
 	}
 </script>

@@ -62,12 +45,9 @@
 			<Icon class="icon" icon="dice" on:click={randomFN} />
 		{/if}
 		{#if copy}
-			<Icon class="icon" icon="copy" on:click={copyFN} />
+			<Icon class="icon" icon="copy" on:click={() => copyFN(value.toString())} />
 		{/if}
 	</div>
-	{#if notification}
-		<div class="notification" transition:fade><small>{notification}</small></div>
-	{/if}
 </label>

 <style>
@@ -117,11 +97,4 @@
 	.icons > :global(.icon:hover) {
 		border-color: var(--ui-clr-primary);
 	}
-
-	.notification {
-		text-align: right;
-		position: absolute;
-		right: 0;
-		bottom: -1.5em;
-	}
 </style>
--- a/packages/frontend/src/lib/ui/ThemeToggle.svelte
+++ b/packages/frontend/src/lib/ui/ThemeToggle.svelte
@@ -40,19 +40,19 @@
 	}
 </script>

-<div on:click={change}>
+<button on:click={change}>
 	<Icon class="icon" icon="contrast" />
 	{$theme}
-</div>
+</button>

 <style>
-	div :global(.icon) {
+	button :global(.icon) {
 		height: 1rem;
 		width: 1rem;
 		margin-right: 0.5rem;
 	}

-	div {
+	button {
 		display: flex;
 		flex-direction: row;
 		justify-content: flex-end;
--- a/packages/frontend/src/lib/utils.ts
+++ b/packages/frontend/src/lib/utils.ts
@@ -0,0 +1,16 @@
+import copyToClipboard from 'copy-to-clipboard'
+import { t } from 'svelte-intl-precompile'
+import { get } from 'svelte/store'
+
+import { notify } from './toast'
+
+export function copy(value: string) {
+	copyToClipboard(value)
+	const msg = get(t)('common.copied_to_clipboard')
+	notify.success(msg)
+}
+
+export function getCSSVariable(variable: string): string {
+	if (typeof window === 'undefined') return ''
+	return window.getComputedStyle(window.document.body).getPropertyValue(variable)
+}
--- a/packages/frontend/src/lib/views/Create.svelte
+++ b/packages/frontend/src/lib/views/Create.svelte
@@ -0,0 +1,173 @@
+<script lang="ts">
+	import { AES, Hex } from 'occulto'
+	import { t } from 'svelte-intl-precompile'
+	import { blur } from 'svelte/transition'
+
+	import { status } from '$lib/stores/status'
+	import { notify } from '$lib/toast'
+	import AdvancedParameters from '$lib/ui/AdvancedParameters.svelte'
+	import Button from '$lib/ui/Button.svelte'
+	import FileUpload from '$lib/ui/FileUpload.svelte'
+	import Loader from '$lib/ui/Loader.svelte'
+	import MaxSize from '$lib/ui/MaxSize.svelte'
+	import Result, { type NoteResult } from '$lib/ui/NoteResult.svelte'
+	import Switch from '$lib/ui/Switch.svelte'
+	import TextArea from '$lib/ui/TextArea.svelte'
+	import type { FileDTO, Note } from '@cryptgeon/shared'
+	import { Adapters, create, PayloadToLargeError } from '@cryptgeon/shared'
+
+	let note: Note = {
+		contents: '',
+		meta: { type: 'text' },
+		views: 1,
+		expiration: 60,
+	}
+	let files: FileDTO[]
+	let result: NoteResult | null = null
+	let advanced = false
+	let isFile = false
+	let timeExpiration = false
+	let description = ''
+	let loading: string | null = null
+
+	$: if (!advanced) {
+		note.views = 1
+		timeExpiration = false
+	}
+
+	$: {
+		description = $t('home.explanation', {
+			values: {
+				type: $t(timeExpiration ? 'common.minutes' : 'common.views', {
+					values: { n: (timeExpiration ? note.expiration : note.views) ?? '?' },
+				}),
+			},
+		})
+	}
+
+	$: note.meta.type = isFile ? 'file' : 'text'
+
+	$: if (!isFile) {
+		note.contents = ''
+	}
+
+	class EmptyContentError extends Error {}
+
+	async function submit() {
+		try {
+			loading = $t('common.encrypting')
+
+			const key = await AES.generateKey()
+			const password = Hex.encode(key)
+
+			const data: Note = {
+				contents: '',
+				meta: note.meta,
+			}
+			if (isFile) {
+				if (files.length === 0) throw new EmptyContentError()
+				data.contents = await Adapters.Files.encrypt(files, key)
+			} else {
+				if (note.contents === '') throw new EmptyContentError()
+				data.contents = await Adapters.Text.encrypt(note.contents, key)
+			}
+			if (timeExpiration) data.expiration = parseInt(note.expiration as any)
+			else data.views = parseInt(note.views as any)
+
+			loading = $t('common.uploading')
+			const response = await create(data)
+			result = {
+				password: password,
+				id: response.id,
+			}
+			notify.success($t('home.messages.note_created'))
+		} catch (e) {
+			if (e instanceof PayloadToLargeError) {
+				notify.error($t('home.errors.note_to_big'))
+			} else if (e instanceof EmptyContentError) {
+				notify.error($t('home.errors.empty_content'))
+			} else {
+				console.error(e)
+				notify.error($t('home.errors.note_error'))
+			}
+		} finally {
+			loading = null
+		}
+	}
+</script>
+
+{#if result}
+	<Result {result} />
+{:else}
+	<p>
+		{@html $status?.theme_text || $t('home.intro')}
+	</p>
+	<form on:submit|preventDefault={submit}>
+		<fieldset disabled={loading !== null}>
+			{#if isFile}
+				<FileUpload data-testid="file-upload" label={$t('common.file')} bind:files />
+			{:else}
+				<TextArea
+					data-testid="text-field"
+					label={$t('common.note')}
+					bind:value={note.contents}
+					placeholder="..."
+				/>
+			{/if}
+
+			<div class="bottom">
+				<Switch
+					data-testid="switch-file"
+					class="file"
+					label={$t('common.file')}
+					bind:value={isFile}
+				/>
+				{#if $status?.allow_advanced}
+					<Switch
+						data-testid="switch-advanced"
+						label={$t('common.advanced')}
+						bind:value={advanced}
+					/>
+				{/if}
+				<div class="grow" />
+				<div class="tr">
+					<small>{$t('common.max')}: <MaxSize /> </small>
+					<br />
+					<Button type="submit">{$t('common.create')}</Button>
+				</div>
+			</div>
+
+			<p>
+				<br />
+				{#if loading}
+					{loading} <Loader />
+				{:else}
+					{description}
+				{/if}
+			</p>
+
+			{#if advanced}
+				<div transition:blur={{ duration: 250 }}>
+					<br />
+					<AdvancedParameters bind:note bind:timeExpiration />
+				</div>
+			{/if}
+		</fieldset>
+	</form>
+{/if}
+
+<style>
+	.bottom {
+		display: flex;
+		align-items: flex-end;
+		margin-top: 0.5rem;
+	}
+
+	.bottom :global(.file) {
+		margin-right: 0.5rem;
+	}
+
+	.grow {
+		flex: 1;
+	}
+</style>
--- a/packages/frontend/src/lib/views/Footer.svelte
+++ b/packages/frontend/src/lib/views/Footer.svelte
@@ -7,7 +7,9 @@
 	<nav>
 		<a href="/">/home</a>
 		<a href="/about">/about</a>
-		<a href="https://github.com/cupcakearmy/cryptgeon" target="_blank" rel="noopener">/code</a>
+		<a href="https://github.com/cupcakearmy/cryptgeon" target="_blank" rel="noopener noreferrer">
+			code
+		</a>
 	</nav>
 </footer>

--- a/packages/frontend/src/lib/views/Header.svelte
+++ b/packages/frontend/src/lib/views/Header.svelte
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Niccolo Borgioli	3590efbfc1	update dependecies	2023-05-13 10:29:12 +02:00
Niccolo Borgioli	e133cd5456	update deps	2023-05-13 09:02:49 +02:00
Niccolo Borgioli	eabff03751	update deps	2023-05-13 09:02:44 +02:00
Niccolo Borgioli	283cc9a051	update locales	2023-05-13 09:02:34 +02:00
Niccolo Borgioli	a3d7731f4f	Merge remote-tracking branch 'origin/main' into CLI	2023-05-13 08:49:29 +02:00
Nicco	13dfd933af	Add tutorial (#83 )	2023-05-13 08:41:05 +02:00
Oleg Salnikov	74840416f1	locales (#85 )	2023-05-13 08:40:50 +02:00
Niccolo Borgioli	569b15d6a0	version bump	2023-05-12 21:17:34 +02:00
Niccolo Borgioli	53d7e43740	changelog	2023-05-12 21:17:24 +02:00
Niccolo Borgioli	7cbbf43f03	pipelines	2023-05-12 21:17:17 +02:00
Niccolo Borgioli	ec4c95b20e		2023-05-12 20:29:49 +02:00
Niccolo Borgioli	663ffc057c	test pipeline	2023-05-12 20:28:55 +02:00
Niccolo Borgioli	a2cf751012	testing	2023-05-12 20:22:49 +02:00
Niccolo Borgioli	3af5d0ef1a	build system	2023-05-12 20:22:39 +02:00
Niccolo Borgioli	88e502562a	packages	2023-05-12 18:55:39 +02:00
Niccolo Borgioli	63d72ca17e	node 18 guard	2023-05-12 18:55:33 +02:00
Niccolo Borgioli	bc156f504f	cli packaging	2023-05-12 18:55:27 +02:00
Niccolo Borgioli	1abb78190a	remove comment	2023-05-12 18:55:11 +02:00
Niccolo Borgioli	2ab4bbf150	use synthetic default imports	2023-05-12 18:55:05 +02:00
Niccolo Borgioli	0ac151f42c	fix default import	2023-04-27 22:52:53 +02:00
Niccolo Borgioli	86cdb6d5da	cli	2023-04-27 19:01:32 +02:00
Niccolo Borgioli	55b6e9ea51	don't use blob	2023-04-27 19:01:26 +02:00
Niccolo Borgioli	be0d523d90	actions maintenance	2023-04-27 09:36:33 +02:00
Niccolo Borgioli	5817fd19b1	update deps	2023-04-27 09:36:21 +02:00
Niccolo Borgioli	5fb6f65a13	update deps	2023-04-27 09:36:14 +02:00
Niccolo Borgioli	420370acaf	Merge remote-tracking branch 'origin/main' into CLI	2023-04-26 18:10:07 +02:00
Niccolo Borgioli	4c25ca005e	move to packages	2023-04-26 18:06:09 +02:00
luolongfei	9aaad5b910	update zh.json file. (#79 )	2023-03-02 09:55:50 +01:00
dependabot[bot]	c246207420	Bump tokio from 1.24.1 to 1.25.0 in /packages/backend (#75 ) Bumps [tokio](https://github.com/tokio-rs/tokio) from 1.24.1 to 1.25.0. - [Release notes](https://github.com/tokio-rs/tokio/releases) - [Commits](https://github.com/tokio-rs/tokio/compare/tokio-1.24.1...tokio-1.25.0) --- updated-dependencies: - dependency-name: tokio dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2023-02-13 19:21:06 +01:00
cupcakearmy	7ee1b8370a	update deps	2023-01-14 18:54:27 +01:00
cupcakearmy	e7750699cc	chose: changelog	2023-01-14 18:40:45 +01:00
cupcakearmy	e14042ea28	chinese language code	2023-01-14 18:40:16 +01:00
Niccolo Borgioli	6fb7518b6a	moved to occulto	2023-01-13 21:24:27 +01:00
Niccolo Borgioli	436ae2a7e5	move dev ports	2023-01-13 19:36:26 +01:00
cupcakearmy	fe5ce580ab	locales	2023-01-04 19:45:25 +01:00
cupcakearmy	0f882da5d1	bump version	2023-01-04 19:45:18 +01:00
cupcakearmy	ad6f136dd0	qr code	2023-01-04 19:40:37 +01:00
cupcakearmy	da527a0857	2.0.7	2022-12-26 22:54:47 +01:00
cupcakearmy	a95931ae77	update deps	2022-12-26 18:00:00 +01:00
cupcakearmy	d6c2236673	update deps	2022-12-26 12:59:37 +01:00
cupcakearmy	42a8ab5d0f	test command	2022-11-15 13:15:34 +01:00
cupcakearmy	0934808a59	testing	2022-11-15 13:05:13 +01:00
cupcakearmy	88ea828b66	upload	2022-11-15 12:35:02 +01:00
cupcakearmy	41ed5c0e23	ci	2022-11-15 12:17:52 +01:00
cupcakearmy	0a98481991	use npx	2022-11-15 12:13:03 +01:00
cupcakearmy	5d62c48a35	don't use pnpm	2022-11-14 16:26:51 +01:00
cupcakearmy	0ab39023b0	test	2022-11-14 16:16:50 +01:00
cupcakearmy	7b202962e8	testing	2022-11-14 15:55:49 +01:00
cupcakearmy	7a045b3f34	test on docker image	2022-11-14 15:47:12 +01:00
cupcakearmy	cb80c8bfe4	changelog	2022-11-12 14:40:21 +01:00
cupcakearmy	74c3197e47	update dependencies and fix some a11y issues	2022-11-12 14:40:17 +01:00
cupcakearmy	6ae927ce71	update version and dependencies	2022-11-12 13:55:33 +01:00
cupcakearmy	9d13e607f5	#66 set minimum	2022-11-12 13:42:09 +01:00
cupcakearmy	0db3ef4a1f	changelog and only test on x86	2022-11-04 23:34:36 +01:00
cupcakearmy	03e9fb431f	put flows back together	2022-11-04 22:10:19 +01:00
cupcakearmy	b84df2866b	build matrix	2022-11-02 13:36:56 +01:00
cupcakearmy	3d4fef7c23	try with matrix build	2022-11-02 13:34:41 +01:00
cupcakearmy	9d787008a4	also build docker when testing	2022-11-02 13:29:19 +01:00
cupcakearmy	687f26bb40	name the workflow	2022-11-02 13:26:57 +01:00
cupcakearmy	371a869800	use nightly cargo with sparse registry	2022-11-02 13:24:30 +01:00
cupcakearmy	321c303a8a	changelog	2022-10-29 19:45:14 +02:00
cupcakearmy	2f176d84e9	wrong docker compose	2022-10-29 19:43:59 +02:00
Nicco	67d4f09bd7	#62 (#63 ) * #62 add theme options for title and favicon * docs * version bump	2022-10-27 17:26:56 +02:00
Nicco	c40f009523	Update README.md	2022-10-24 16:35:54 +02:00
Nicco	026f8c69d7	add size limit to redis	2022-10-24 16:11:50 +02:00
Nicco	cacb808117	restructuring (#56 ) * restructuring * pin svelte kit version & parallel execution * update svelte kit * correct test result assets * add timeout * correct locale path * simplify crypto * fix for #58 * add verbosity flag * disable flaky test	2022-10-07 21:28:25 +02:00
cupcakearmy	2d573edcac	change link	2022-09-12 14:24:05 +02:00
cupcakearmy	4287cd429d	security reporting	2022-09-10 13:13:09 +02:00
cupcakearmy	024dfeeeb7	add url spec	2022-07-26 23:48:53 +02:00
cupcakearmy	f24bcba20b	remove ununsed	2022-07-26 15:49:12 +02:00
cupcakearmy	1d95edc455	readme	2022-07-26 15:49:06 +02:00
hash070	ec24ab3edd	Update CN README translate (#47 )	2022-07-21 11:32:38 +02:00
Nicco	a552e4d766	Toasts (#45 ) * locales * add toasts and update deps * changelog * lock file	2022-07-20 10:41:37 +02:00
Nicco	c3b1772728	Testing (#44 ) * testing * try playwrigth * testing * add pr support * not on each commit * add test ids * make backend more configuratble * 2.0.2 * spec	2022-07-19 21:55:05 +02:00
Nicco	786878a3e4	Testing (#41 ) * testing * try playwrigth * testing * add pr support * not on each commit	2022-07-19 14:12:51 +02:00
Nicco	a5d98b76bd	2.0.1 (#40 ) * locale from lokalise * version bump * update dependencies * show size with overhead * use base64 instead of hex and refactor a bit * changelog & readme * size limit * locale * add sync for svelte * refarcor create & add loading animation * changelog	2022-07-19 10:27:23 +02:00