2.0.7

* #62 add theme options for title and favicon

* docs

* version bump

.dev.env

@@ -0,0 +1,2 @@
+SIZE_LIMIT=10MiB
+VERBOSITY=debug

.dockerignore

@@ -1,15 +1,15 @@
 *
 
-!/backend/src
-!/backend/Cargo.lock
-!/backend/Cargo.toml
+!/packages/backend/src
+!/packages/backend/Cargo.lock
+!/packages/backend/Cargo.toml
 
-!/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
+!/packages/frontend/locales
+!/packages/frontend/src
+!/packages/frontend/static
+!/packages/frontend/.npmrc
+!/packages/frontend/package.json
+!/packages/frontend/pnpm-lock.yaml
+!/packages/frontend/svelte.config.js
+!/packages/frontend/tsconfig.json
+!/packages/frontend/vite.config.js

.gitattributes

@@ -1 +1,2 @@
 *.afdesign filter=lfs diff=lfs merge=lfs -text
+test/assets/** filter=lfs diff=lfs merge=lfs -text

.github/workflows/docker.yml

@@ -1,4 +1,4 @@
-name: ci
+name: Publish
 
 on:
   workflow_dispatch:
@@ -31,11 +31,8 @@ jobs:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
       - name: Build and push
-        id: docker_build
         uses: docker/build-push-action@v2
         with:
           platforms: linux/amd64,linux/arm64
           push: true
           tags: ${{ steps.meta.outputs.tags }}
-      - name: Image digest
-        run: echo ${{ steps.docker_build.outputs.digest }}

.github/workflows/test.yaml

@@ -0,0 +1,36 @@
+name: Test
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: "16"
+
+      - uses: docker/setup-qemu-action@v1
+      - uses: docker/setup-buildx-action@v1
+        with:
+          install: true
+      - name: Build docker image
+        run: npm run test:prepare
+
+      - name: Prepare
+        run: |
+          npm install playwright
+          npx playwright install --with-deps
+
+      - name: Run your tests
+        run: npm test
+      - uses: actions/upload-artifact@v2
+        if: always()
+        with:
+          name: test-results
+          path: test-results

.gitignore

@@ -9,3 +9,6 @@ node_modules
 /build
 /functions
 .env
+
+General
+test-results

.vscode/settings.json

@@ -1,6 +0,0 @@
-{
-  "cSpell.words": ["ciphertext", "cryptgeon"],
-  "i18n-ally.localesPaths": ["frontend/locales"],
-  "i18n-ally.enabledFrameworks": ["svelte"],
-  "i18n-ally.keystyle": "nested"
-}

CHANGELOG.md

@@ -5,6 +5,53 @@ 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.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

Dockerfile

@@ -2,25 +2,31 @@
 FROM node:16-alpine as client 
 WORKDIR /tmp
 RUN npm install -g pnpm@7
-COPY ./frontend ./
+COPY ./packages/frontend ./
 RUN pnpm install
 RUN pnpm exec svelte-kit sync
 RUN pnpm run build
 
 
 # BACKEND
-FROM rust:1.61-alpine as backend
+FROM rust:1.64-alpine as backend
 WORKDIR /tmp
 RUN apk add libc-dev openssl-dev alpine-sdk
-COPY ./backend ./
-RUN cargo build --release
+COPY ./packages/backend/Cargo.* ./
+# https://blog.rust-lang.org/2022/06/22/sparse-registry-testing.html
+RUN rustup update nightly
+ENV CARGO_UNSTABLE_SPARSE_REGISTRY=true
+RUN cargo +nightly fetch
+COPY ./packages/backend ./
+RUN cargo +nightly build --release
 
 
 # RUNNER
 FROM alpine
 WORKDIR /app
 COPY --from=backend /tmp/target/release/cryptgeon .
-COPY --from=client /tmp/build ./frontend/build
-ENV REDIS=redis://redis/
+COPY --from=client /tmp/build ./frontend
+ENV FRONTEND_PATH="./frontend"
+ENV REDIS="redis://redis/"
 EXPOSE 5000
 ENTRYPOINT [ "/app/cryptgeon" ]

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/). <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.                                                                                                                                |
-| `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,12 +79,16 @@ 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
@@ -93,39 +100,20 @@ 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 [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
 
@@ -165,6 +153,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>

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 下方的文本。                                                        |
 
 ## 部署
 
@@ -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,7 +148,7 @@ cargo install cargo-watch
 
 确保你的 Docker 正在运行
 
-> If you are on `macOS` you might need to disable AirPlay Receiver as it uses port 5000 (So stupid...)
+> 如果你用的是 `macOS` 的话你可能需要关闭 AirPlay 接收功能因为该功能需要占用 5000 端口...)
 > https://developer.apple.com/forums/thread/682332
 
 ```bash
@@ -161,6 +163,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> 提供

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).

cryptgeon.code-workspace

@@ -0,0 +1,16 @@
+{
+  "folders": [
+    {
+      "path": "."
+    },
+    {
+      "path": "packages/backend"
+    }
+  ],
+  "settings": {
+    "cSpell.words": ["ciphertext", "cryptgeon"],
+    "i18n-ally.enabledFrameworks": ["svelte"],
+    "i18n-ally.keystyle": "nested",
+    "i18n-ally.localesPaths": ["packages/frontend/locales"]
+  }
+}

docker-compose.dev.yaml

@@ -10,10 +10,10 @@ services:
       - 6379:6379
 
   app:
+    image: cupcakearmy/cryptgeon:test
     build: .
+    env_file: .dev.env
     depends_on:
       - redis
-    environment:
-      SIZE_LIMIT: 128 MiB
     ports:
-      - 80:5000
+      - 1234:5000

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:5000

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
+```

frontend/.dockerignore

@@ -1,5 +0,0 @@
-.DS_Store
-node_modules
-/.svelte
-/build
-/functions

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.37",
-		"@sveltejs/kit": "^1.0.0-next.377",
-		"@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.1"
-	},
-	"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"
-	}
-}

package.json

@@ -1,12 +1,17 @@
 {
   "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:packages": "pnpm --parallel run dev",
     "dev:proxy": "node proxy.mjs",
-    "dev": "run-p dev:*"
+    "dev": "run-p dev:*",
+    "test": "playwright test --project chrome firefox safari",
+    "test:local": "playwright test --project local",
+    "test:server": "docker compose -f docker-compose.dev.yaml up",
+    "test:prepare": "docker compose -f docker-compose.dev.yaml build"
   },
   "devDependencies": {
+    "@playwright/test": "^1.29.1",
+    "@types/node": "^16.18.10",
     "http-proxy": "^1.18.1",
     "npm-run-all": "^4.1.5"
   }

packages/backend/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "cryptgeon"
-version = "2.0.1"
+version = "2.0.7"
 authors = ["cupcakearmy <hi@nicco.io>"]
 edition = "2021"
 

packages/backend/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "backend",
+  "private": true,
+  "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"
+  }
+}

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)?)
 }

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:5000".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();
 }

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;
 }

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

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);
 }

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,
 }

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()
     });
 }
 

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
 

packages/frontend/locales/de.json

@@ -11,6 +11,7 @@
 		"max": "max",
 		"share_link": "Link teilen",
 		"copy_clipboard": "in die Zwischenablage kopieren",
+		"copied_to_clipboard": "in die Zwischenablage kopiert",
 		"encrypting": "verschlüsseln",
 		"decrypting": "entschlüsselt",
 		"uploading": "hochladen",
@@ -27,7 +28,9 @@
 			"max": "max: {n}",
 			"empty_content": "Notiz ist leer."
 		},
-		"copied_to_clipboard": "in die Zwischenablage kopiert 🔗"
+		"messages": {
+			"note_created": "notiz erstellt."
+		}
 	},
 	"show": {
 		"errors": {

packages/frontend/locales/en.json

@@ -11,6 +11,7 @@
 		"max": "max",
 		"share_link": "share link",
 		"copy_clipboard": "copy to clipboard",
+		"copied_to_clipboard": "copied to clipboard",
 		"encrypting": "encrypting",
 		"decrypting": "decrypting",
 		"uploading": "uploading",
@@ -27,7 +28,9 @@
 			"max": "max: {n}",
 			"empty_content": "note is empty."
 		},
-		"copied_to_clipboard": "copied to clipboard 🔗"
+		"messages": {
+			"note_created": "note created."
+		}
 	},
 	"show": {
 		"errors": {

packages/frontend/locales/es.json

@@ -11,6 +11,7 @@
 		"max": "max",
 		"share_link": "compartir enlace",
 		"copy_clipboard": "copiar al portapapeles",
+		"copied_to_clipboard": "copiado al portapapeles",
 		"encrypting": "encriptando",
 		"decrypting": "descifrando",
 		"uploading": "cargando",
@@ -27,7 +28,9 @@
 			"max": "max: {n}",
 			"empty_content": "la nota está vacía."
 		},
-		"copied_to_clipboard": "copiado al portapapeles 🔗"
+		"messages": {
+			"note_created": "nota creada."
+		}
 	},
 	"show": {
 		"errors": {

packages/frontend/locales/fr.json

@@ -11,6 +11,7 @@
 		"max": "max",
 		"share_link": "partager le lien",
 		"copy_clipboard": "copier dans le presse-papiers",
+		"copied_to_clipboard": "copié dans le presse-papiers",
 		"encrypting": "cryptage",
 		"decrypting": "déchiffrer",
 		"uploading": "téléchargement",
@@ -27,7 +28,9 @@
 			"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": {

packages/frontend/locales/it.json

@@ -11,6 +11,7 @@
 		"max": "max",
 		"share_link": "condividi link",
 		"copy_clipboard": "copia negli appunti",
+		"copied_to_clipboard": "copiato negli appunti",
 		"encrypting": "criptando",
 		"decrypting": "decifrando",
 		"uploading": "caricamento",
@@ -27,7 +28,9 @@
 			"max": "max: {n}",
 			"empty_content": "la nota è vuota."
 		},
-		"copied_to_clipboard": "copiato negli appunti 🔗"
+		"messages": {
+			"note_created": "nota creata."
+		}
 	},
 	"show": {
 		"errors": {

packages/frontend/locales/zh_CN.json

@@ -11,6 +11,7 @@
 		"max": "最大值",
 		"share_link": "分享链接",
 		"copy_clipboard": "复制到剪切版",
+		"copied_to_clipboard": "已复制到剪切板",
 		"encrypting": "加密",
 		"decrypting": "解密",
 		"uploading": "上传",
@@ -27,7 +28,9 @@
 			"max": "最大文件大小: {n}",
 			"empty_content": "密信为空！"
 		},
-		"copied_to_clipboard": "已复制到剪切板 🔗"
+		"messages": {
+			"note_created": "注释创建。"
+		}
 	},
 	"show": {
 		"errors": {

packages/frontend/package.json

@@ -0,0 +1,37 @@
+{
+	"private": true,
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview --port 3000",
+		"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.3.0",
+		"@sveltejs/adapter-static": "^1.0.0",
+		"@sveltejs/kit": "^1.0.1",
+		"@types/dompurify": "^2.4.0",
+		"@types/file-saver": "^2.0.5",
+		"@zerodevx/svelte-toast": "^0.7.2",
+		"adm-zip": "^0.5.10",
+		"dotenv": "^16.0.3",
+		"svelte": "^3.55.0",
+		"svelte-check": "^2.10.3",
+		"svelte-intl-precompile": "^0.10.1",
+		"svelte-preprocess": "^4.10.7",
+		"tslib": "^2.4.1",
+		"typescript": "^4.9.4",
+		"vite": "^4.0.3"
+	},
+	"dependencies": {
+		"@fontsource/fira-mono": "^4.5.10",
+		"copy-to-clipboard": "^3.3.3",
+		"dompurify": "^2.4.1",
+		"file-saver": "^2.0.5",
+		"pretty-bytes": "^6.0.0"
+	}
+}

packages/frontend/scripts/locale.js

@@ -1,7 +1,7 @@
-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()
 

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,

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%

packages/frontend/src/lib/crypto.ts

@@ -35,6 +35,31 @@ export class ArrayBufferUtils {
 	}
 }
 
+export class Keys {
+	public static async generateKey(size: 128 | 192 | 256 = 256): Promise<CryptoKey> {
+		const key = await window.crypto.subtle.generateKey(
+			{
+				name: 'AES-GCM',
+				length: size,
+			},
+			true,
+			['encrypt', 'decrypt']
+		)
+		return key
+	}
+
+	public static async export(key: CryptoKey): Promise<string> {
+		return Hex.encode(await window.crypto.subtle.exportKey('raw', key))
+	}
+
+	public static async import(key: string): Promise<CryptoKey> {
+		return window.crypto.subtle.importKey('raw', Hex.decode(key), { name: 'AES-GCM' }, true, [
+			'encrypt',
+			'decrypt',
+		])
+	}
+}
+
 export class Crypto {
 	private static ALG = 'AES-GCM'
 	private static DELIMITER = ':::'
@@ -43,55 +68,22 @@ export class Crypto {
 		return window.crypto.getRandomValues(new Uint8Array(size))
 	}
 
-	public static getKeyFromString(password: string) {
-		return window.crypto.subtle.importKey(
-			'raw',
-			new TextEncoder().encode(password),
-			'PBKDF2',
-			false,
-			['deriveBits', 'deriveKey']
-		)
-	}
-	public static async getDerivedForKey(key: CryptoKey, salt: ArrayBuffer) {
-		const iterations = 100_000
-		return window.crypto.subtle.deriveKey(
-			{
-				name: 'PBKDF2',
-				salt,
-				iterations,
-				hash: 'SHA-512',
-			},
-			key,
-			{ name: this.ALG, length: 256 },
-			true,
-			['encrypt', 'decrypt']
-		)
-	}
-
 	public static async encrypt(plaintext: ArrayBuffer, key: CryptoKey): Promise<string> {
-		const salt = this.getRandomBytes(16)
-		const derived = await this.getDerivedForKey(key, salt)
-		const iv = this.getRandomBytes(16)
+		const iv = this.getRandomBytes(12) // AES-GCM needs a 96bit IV
 		const encrypted: ArrayBuffer = await window.crypto.subtle.encrypt(
 			{ name: this.ALG, iv },
-			derived,
+			key,
 			plaintext
 		)
-		const data = [
-			Hex.encode(salt),
-			Hex.encode(iv),
-			await ArrayBufferUtils.toString(encrypted),
-		].join(this.DELIMITER)
+		const data = [Hex.encode(iv), await ArrayBufferUtils.toString(encrypted)].join(this.DELIMITER)
 		return data
 	}
 
 	public static async decrypt(ciphertext: string, key: CryptoKey): Promise<ArrayBuffer> {
 		const splitted = ciphertext.split(this.DELIMITER)
-		const salt = Hex.decode(splitted[0])
-		const iv = Hex.decode(splitted[1])
-		const encrypted = await ArrayBufferUtils.fromString(splitted[2])
-		const derived = await this.getDerivedForKey(key, salt)
-		const plaintext = await window.crypto.subtle.decrypt({ name: this.ALG, iv }, derived, encrypted)
+		const iv = Hex.decode(splitted[0])
+		const encrypted = await ArrayBufferUtils.fromString(splitted[1])
+		const plaintext = await window.crypto.subtle.decrypt({ name: this.ALG, iv }, key, encrypted)
 		return plaintext
 	}
 }

packages/frontend/src/lib/stores/status.ts

@@ -9,6 +9,8 @@ export type Status = {
 	allow_advanced: boolean
 	theme_image: string
 	theme_text: string
+	theme_favicon: string
+	theme_page_title: string
 }
 
 export const status = writable<null | Status>(null)

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),
+}

packages/frontend/src/lib/ui/AdvancedParameters.svelte

@@ -12,19 +12,27 @@
 
 <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) ||
+			($status && v <= $status?.max_views && v > 0) ||
 			$t('home.errors.max', { values: { n: $status?.max_views ?? 0 } })}
 	/>
 	<div class="middle-switch">
-		<Switch label={$t('common.mode')} bind:value={timeExpiration} color={false} />
+		<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}

packages/frontend/src/lib/ui/FileUpload.svelte

@@ -34,7 +34,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>

packages/frontend/src/lib/ui/NoteResult.svelte

@@ -24,6 +24,7 @@
 	label={$t('common.share_link')}
 	value="{window.location.origin}/note/{result.id}#{result.password}"
 	copy
+	data-testid="share-link"
 />
 <br />
 <p>

packages/frontend/src/lib/ui/ShowNote.svelte

@@ -3,7 +3,6 @@
 </script>
 
 <script lang="ts">
-	import copy from 'copy-to-clipboard'
 	import DOMPurify from 'dompurify'
 	import { saveAs } from 'file-saver'
 	import prettyBytes from 'pretty-bytes'
@@ -11,6 +10,7 @@
 
 	import type { FileDTO, NotePublic } from '$lib/api'
 	import Button from '$lib/ui/Button.svelte'
+	import { copy } from '$lib/utils'
 
 	export let note: DecryptedNote
 
@@ -44,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 {

packages/frontend/src/lib/ui/TextInput.svelte

@@ -1,10 +1,7 @@
 <script lang="ts">
-	import copyToClipboard from 'copy-to-clipboard'
-	import { t } from 'svelte-intl-precompile'
-	import { fade } from 'svelte/transition'
-
 	import { Crypto, Hex } from '$lib/crypto'
 	import Icon from '$lib/ui/Icon.svelte'
+	import { copy as copyFN } from '$lib/utils'
 
 	export let label: string = ''
 	export let value: any
@@ -15,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)
 
@@ -28,22 +23,8 @@
 	function toggle() {
 		hidden = !hidden
 	}
-	function copyFN() {
-		copyToClipboard(value.toString())
-		notify($t('home.copied_to_clipboard'))
-	}
 	function randomFN() {
-		value = Hex.encode(Crypto.getRandomBytes(20))
-	}
-
-	function notify(msg: string, delay: number = 2000) {
-		if (notificationTimeout) {
-			clearTimeout(notificationTimeout)
-		}
-		notificationTimeout = setTimeout(() => {
-			notification = null
-		}, delay)
-		notification = msg
+		value = Hex.encode(Crypto.getRandomBytes(32))
 	}
 </script>
 
@@ -63,12 +44,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>
@@ -118,11 +96,4 @@
 	.icons > :global(.icon:hover) {
 		border-color: var(--ui-clr-primary);
 	}
-
-	.notification {
-		text-align: right;
-		position: absolute;
-		right: 0;
-		bottom: -1.5em;
-	}
 </style>

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;

packages/frontend/src/lib/utils.ts

@@ -0,0 +1,11 @@
+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)
+}

packages/frontend/src/lib/views/Create.svelte

@@ -5,8 +5,9 @@
 	import { Adapters } from '$lib/adapters'
 	import type { FileDTO, Note } from '$lib/api'
 	import { create, PayloadToLargeError } from '$lib/api'
-	import { Crypto, Hex } from '$lib/crypto'
+	import { Keys } from '$lib/crypto'
 	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'
@@ -29,7 +30,6 @@
 	let timeExpiration = false
 	let description = ''
 	let loading: string | null = null
-	let error: string | null = null
 
 	$: if (!advanced) {
 		note.views = 1
@@ -56,11 +56,10 @@
 
 	async function submit() {
 		try {
-			error = null
 			loading = $t('common.encrypting')
 
-			const password = Hex.encode(Crypto.getRandomBytes(32))
-			const key = await Crypto.getKeyFromString(password)
+			const key = await Keys.generateKey()
+			const password = await Keys.export(key)
 
 			const data: Note = {
 				contents: '',
@@ -82,14 +81,15 @@
 				password: password,
 				id: response.id,
 			}
+			notify.success($t('home.messages.note_created'))
 		} catch (e) {
 			if (e instanceof PayloadToLargeError) {
-				error = $t('home.errors.note_to_big')
+				notify.error($t('home.errors.note_to_big'))
 			} else if (e instanceof EmptyContentError) {
-				error = $t('home.errors.empty_content')
+				notify.error($t('home.errors.empty_content'))
 			} else {
 				console.error(e)
-				error = $t('home.errors.note_error')
+				notify.error($t('home.errors.note_error'))
 			}
 		} finally {
 			loading = null
@@ -106,15 +106,29 @@
 	<form on:submit|preventDefault={submit}>
 		<fieldset disabled={loading !== null}>
 			{#if isFile}
-				<FileUpload label={$t('common.file')} bind:files />
+				<FileUpload data-testid="file-upload" label={$t('common.file')} bind:files />
 			{:else}
-				<TextArea label={$t('common.note')} bind:value={note.contents} placeholder="..." />
+				<TextArea
+					data-testid="text-field"
+					label={$t('common.note')}
+					bind:value={note.contents}
+					placeholder="..."
+				/>
 			{/if}
 
 			<div class="bottom">
-				<Switch class="file" label={$t('common.file')} bind:value={isFile} />
+				<Switch
+					data-testid="switch-file"
+					class="file"
+					label={$t('common.file')}
+					bind:value={isFile}
+				/>
 				{#if $status?.allow_advanced}
-					<Switch label={$t('common.advanced')} bind:value={advanced} />
+					<Switch
+						data-testid="switch-advanced"
+						label={$t('common.advanced')}
+						bind:value={advanced}
+					/>
 				{/if}
 				<div class="grow" />
 				<div class="tr">
@@ -124,10 +138,6 @@
 				</div>
 			</div>
 
-			{#if error}
-				<div class="error-text">{error}</div>
-			{/if}
-
 			<p>
 				<br />
 				{#if loading}
@@ -161,8 +171,4 @@
 	.grow {
 		flex: 1;
 	}
-
-	.error-text {
-		margin-top: 0.5rem;
-	}
 </style>

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>
 

packages/frontend/src/routes/+layout.svelte

@@ -1,17 +1,13 @@
-<script lang="ts" context="module">
-	import { getLocaleFromNavigator, init, waitLocale } from 'svelte-intl-precompile'
-	// @ts-ignore
-	import { registerAll } from '$locales'
-	registerAll()
-	init({ initialLocale: getLocaleFromNavigator() ?? undefined, fallbackLocale: 'en' })
-</script>
-
 <script lang="ts">
-	import { init as initStores } from '$lib/stores/status'
+	import { SvelteToast } from '@zerodevx/svelte-toast'
+	import { onMount } from 'svelte'
+	import { waitLocale } from 'svelte-intl-precompile'
+
+	import '../app.css'
+
+	import { init as initStores, status } from '$lib/stores/status'
 	import Footer from '$lib/views/Footer.svelte'
 	import Header from '$lib/views/Header.svelte'
-	import { onMount } from 'svelte'
-	import '../app.css'
 
 	onMount(() => {
 		initStores()
@@ -19,7 +15,8 @@
 </script>
 
 <svelte:head>
-	<title>cryptgeon</title>
+	<title>{$status?.theme_page_title || 'cryptgeon'}</title>
+	<link rel="icon" href={$status?.theme_favicon || '/favicon.png'} />
 </svelte:head>
 
 {#await waitLocale() then _}
@@ -28,6 +25,8 @@
 		<slot />
 	</main>
 
+	<SvelteToast />
+
 	<Footer />
 {/await}
 

packages/frontend/src/routes/+layout.ts

@@ -0,0 +1,5 @@
+import { getLocaleFromNavigator, init } from 'svelte-intl-precompile'
+// @ts-ignore
+import { registerAll } from '$locales'
+registerAll()
+init({ initialLocale: getLocaleFromNavigator() ?? undefined, fallbackLocale: 'en' })

packages/frontend/src/routes/about/+page.svelte

@@ -1,10 +1,6 @@
-<script context="module">
-	import { browser, dev } from '$app/env'
+<script lang="ts">
 	import { status } from '$lib/stores/status'
 	import AboutParagraph from '$lib/ui/AboutParagraph.svelte'
-
-	export const hydrate = dev
-	export const router = browser
 </script>
 
 <svelte:head>
@@ -43,7 +39,7 @@
 			the backend is written in rust and the frontend is svelte and typescript.
 			<br />
 			you are welcomed to check & audit the
-			<a href="https://github.com/cupcakearmy/cryptgeon" target="_blank" rel="noopener">
+			<a href="https://github.com/cupcakearmy/cryptgeon" target="_blank" rel="noopener noreferrer">
 				source code
 			</a>.
 		</span>
@@ -51,9 +47,12 @@
 
 	<AboutParagraph title="translations">
 		<span
-			>translations are managed on <a href="https://lokalise.com/" target="_blank">Lokalise</a>,
-			which granted an open source license to use the paid version. If you are interested in helping
-			translating don't hesitate to contact me!
+			>translations are managed on <a
+				href="https://lokalise.com/"
+				target="_blank"
+				rel="noopener noreferrer">Lokalise</a
+			>, which granted an open source license to use the paid version. If you are interested in
+			helping translating don't hesitate to contact me!
 		</span>
 	</AboutParagraph>
 

packages/frontend/src/routes/note/[id]/+page.svelte

@@ -1,26 +1,18 @@
-<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 { Adapters } from '$lib/adapters'
 	import { get, info } from '$lib/api'
-	import { Crypto } from '$lib/crypto'
+	import { Keys } from '$lib/crypto'
 	import Button from '$lib/ui/Button.svelte'
 	import Loader from '$lib/ui/Loader.svelte'
 	import ShowNote, { type DecryptedNote } from '$lib/ui/ShowNote.svelte'
+	import type { PageData } from './$types'
 
-	export let id: string
+	export let data: PageData
 
+	let id = data.id
 	let password: string
 	let note: DecryptedNote | null = null
 	let exists = false
@@ -51,7 +43,7 @@
 			loading = $t('common.downloading')
 			const data = await get(id)
 			loading = $t('common.decrypting')
-			const key = await Crypto.getKeyFromString(password)
+			const key = await Keys.import(password)
 			switch (data.meta.type) {
 				case 'text':
 					note = {
@@ -86,7 +78,7 @@
 		<form on:submit|preventDefault={show}>
 			<fieldset>
 				<p>{$t('show.explanation')}</p>
-				<Button type="submit">{$t('show.show_note')}</Button>
+				<Button data-testid="show-note-button" type="submit">{$t('show.show_note')}</Button>
 				{#if error}
 					<br />
 					<p class="error-text">

packages/frontend/src/routes/note/[id]/+page.ts

@@ -0,0 +1,5 @@
+import type { PageLoad } from './$types'
+
+export const load: PageLoad = async ({ params }) => {
+	return params
+}

packages/frontend/vite.config.js

@@ -3,6 +3,7 @@ import precompileIntl from 'svelte-intl-precompile/sveltekit-plugin'
 
 /** @type {import('vite').UserConfig} */
 const config = {
+	clearScreen: false,
 	server: {
 		port: 3000,
 	},

playwright.config.ts

@@ -0,0 +1,33 @@
+import { devices, type PlaywrightTestConfig } from '@playwright/test'
+
+const config: PlaywrightTestConfig = {
+  use: {
+    video: 'retain-on-failure',
+    baseURL: 'http://localhost:1234',
+    actionTimeout: 60_000,
+  },
+
+  outputDir: './test-results',
+  testDir: './test',
+  timeout: 60_000,
+  testIgnore: ['file/too-big.spec.ts'],
+
+  webServer: {
+    command: 'docker compose -f docker-compose.dev.yaml up',
+    port: 1234,
+    reuseExistingServer: true,
+  },
+
+  projects: [
+    { name: 'chrome', use: { ...devices['Desktop Chrome'] } },
+    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
+    { name: 'safari', use: { ...devices['Desktop Safari'] } },
+    {
+      name: 'local',
+      use: { ...devices['Desktop Chrome'] },
+      // testMatch: 'file/too-big.spec.ts',
+    },
+  ],
+}
+
+export default config

pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+packages:
+  - "packages/**"

test/file/files.ts

@@ -0,0 +1,5 @@
+export default {
+  PDF: 'test/assets/AES.pdf',
+  Image: 'test/assets/image.jpg',
+  Zip: 'test/assets/Pigeons.zip',
+}

test/file/multiple.spec.ts

@@ -0,0 +1,11 @@
+import { test } from '@playwright/test'
+import { checkLinkForDownload, createNote, getFileChecksum } from '../utils'
+import Files from './files'
+
+test('multiple', async ({ page }) => {
+  const files = [Files.PDF, Files.Image]
+  const checksums = await Promise.all(files.map(getFileChecksum))
+  const link = await createNote(page, { files, views: 2 })
+  await checkLinkForDownload(page, link, 'image.jpg', checksums[1])
+  await checkLinkForDownload(page, link, 'AES.pdf', checksums[0])
+})

test/file/simple.spec.ts

@@ -0,0 +1,24 @@
+import { test } from '@playwright/test'
+import { checkLinkDoesNotExist, checkLinkForDownload, checkLinkForText, createNote, getFileChecksum } from '../utils'
+import Files from './files'
+
+test('simple pdf', async ({ page }) => {
+  const files = [Files.PDF]
+  const link = await createNote(page, { files })
+  await checkLinkForText(page, link, 'AES.pdf')
+  await checkLinkDoesNotExist(page, link)
+})
+
+test('pdf content', async ({ page }) => {
+  const files = [Files.PDF]
+  const checksum = await getFileChecksum(files[0])
+  const link = await createNote(page, { files })
+  await checkLinkForDownload(page, link, 'AES.pdf', checksum)
+})
+
+test('image content', async ({ page }) => {
+  const files = [Files.Image]
+  const checksum = await getFileChecksum(files[0])
+  const link = await createNote(page, { files })
+  await checkLinkForDownload(page, link, 'image.jpg', checksum)
+})

test/file/too-big.spec.ts

@@ -0,0 +1,8 @@
+import { test } from '@playwright/test'
+import { createNote } from '../utils'
+import Files from './files'
+
+test('to big zip', async ({ page }) => {
+  const files = [Files.Zip]
+  const link = await createNote(page, { files, error: 'note is to big' })
+})