Merge pull request #181 from cupcakearmy/dependabot/cargo/packages/backend/cargo-362f336499

Bump ring from 0.16.20 to 0.17.12 in /packages/backend in the cargo group across 1 directory

.nvmrc

@@ -1 +1 @@
-v22.7.0
+v22.14.0

Dockerfile

@@ -11,7 +11,7 @@ RUN pnpm run build
 
 
 # BACKEND
-FROM rust:1.80-alpine as backend
+FROM rust:1.85-alpine as backend
 WORKDIR /tmp
 RUN apk add --no-cache libc-dev openssl-dev alpine-sdk
 COPY ./packages/backend ./

README.md

@@ -63,6 +63,8 @@ client side with the <code>key</code> and then sent to the server. data is store
 never persisted to disk. the server never sees the encryption key and cannot decrypt the contents
 of the notes even if it tried to.
 
+> View counts are guaranteed with one running instance of cryptgeon. Multiple instances connected to the same Redis instance can run into race conditions, where a note might be retrieved more than the view count allows.
+
 ## Screenshot
 
 ![screenshot](./design/Screens.png)
@@ -84,7 +86,8 @@ of the notes even if it tried to.
 | `THEME_PAGE_TITLE`      | `""`             | Custom text the page title                                                                                                                                                                                    |
 | `THEME_FAVICON`         | `""`             | Custom url for the favicon. Must be publicly reachable                                                                                                                                                        |
 | `THEME_NEW_NOTE_NOTICE` | `true`           | Show the message about how notes are stored in the memory and may be evicted after creating a new note. Defaults to `true`.                                                                                   |
-
+| `IMPRINT_URL`           | `""`             | Custom url for an Imprint hosted somewhere else. Must be publicly reachable. Takes precedence above `IMPRINT_HTML`.                                                                                           |
+| `IMPRINT_HTML`          | `""`             | Alternative to `IMPRINT_URL`, this can be used to specify the HTML code to show on `/imprint`. Only `IMPRINT_HTML` or `IMPRINT_URL` should be specified, not both.                                            |
 ## Deployment
 
 > ℹ️ `https` is required otherwise browsers will not support the cryptographic functions.
@@ -103,9 +106,14 @@ version: '3.8'
 services:
   redis:
     image: redis:7-alpine
+    # This is required to stay in RAM only.
+    command: redis-server --save "" --appendonly no
     # 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
+    # https://redis.io/docs/latest/operate/rs/databases/memory-performance/eviction-policy/
+    # --maxmemory 1gb --maxmemory-policy allkeys-lrulpine
+    # This prevents the creation of an anonymous volume.
+    tmpfs:
+      - /data
 
   app:
     image: cupcakearmy/cryptgeon:latest

README_ES.md

@@ -91,9 +91,14 @@ version: '3.8'
 services:
   redis:
     image: redis:7-alpine
+    # This is required to stay in RAM only.
+    command: redis-server --save "" --appendonly no
     # 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
+    # https://redis.io/docs/latest/operate/rs/databases/memory-performance/eviction-policy/
+    # --maxmemory 1gb --maxmemory-policy allkeys-lrulpine
+    # This prevents the creation of an anonymous volume.
+    tmpfs:
+      - /data
 
   app:
     image: cupcakearmy/cryptgeon:latest

README_zh-CN.md

@@ -74,6 +74,14 @@ version: '3.8'
 services:
   redis:
     image: redis:7-alpine
+    # This is required to stay in RAM only.
+    command: redis-server --save "" --appendonly no
+    # Set a size limit. See link below on how to customise.
+    # https://redis.io/docs/latest/operate/rs/databases/memory-performance/eviction-policy/
+    # --maxmemory 1gb --maxmemory-policy allkeys-lrulpine
+    # This prevents the creation of an anonymous volume.
+    tmpfs:
+      - /data
 
   app:
     image: cupcakearmy/cryptgeon:latest
@@ -108,7 +116,14 @@ networks:
 services:
   redis:
     image: redis:7-alpine
-    restart: unless-stopped
+    # This is required to stay in RAM only.
+    command: redis-server --save "" --appendonly no
+    # Set a size limit. See link below on how to customise.
+    # https://redis.io/docs/latest/operate/rs/databases/memory-performance/eviction-policy/
+    # --maxmemory 1gb --maxmemory-policy allkeys-lrulpine
+    # This prevents the creation of an anonymous volume.
+    tmpfs:
+      - /data
 
   app:
     image: cupcakearmy/cryptgeon:latest

docker-compose.dev.yaml

@@ -4,6 +4,14 @@
 services:
   redis:
     image: redis:7-alpine
+    # This is required to stay in RAM only.
+    command: redis-server --save "" --appendonly no
+    # Set a size limit. See link below on how to customise.
+    # https://redis.io/docs/latest/operate/rs/databases/memory-performance/eviction-policy/
+    # --maxmemory 1gb --maxmemory-policy allkeys-lrulpine
+    # This prevents the creation of an anonymous volume.
+    tmpfs:
+      - /data
     ports:
       - 6379:6379
 

docker-compose.yaml

@@ -1,9 +1,14 @@
 services:
   redis:
     image: redis:7-alpine
+    # This is required to stay in RAM only.
+    command: redis-server --save "" --appendonly no
     # 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
+    # https://redis.io/docs/latest/operate/rs/databases/memory-performance/eviction-policy/
+    # --maxmemory 1gb --maxmemory-policy allkeys-lrulpine
+    # This prevents the creation of an anonymous volume.
+    tmpfs:
+      - /data
 
   app:
     image: cupcakearmy/cryptgeon:latest

examples/nginx/docker-compose.yaml

@@ -3,12 +3,20 @@ version: '3.8'
 services:
   redis:
     image: redis:7-alpine
+    # This is required to stay in RAM only.
+    command: redis-server --save "" --appendonly no
+    # Set a size limit. See link below on how to customise.
+    # https://redis.io/docs/latest/operate/rs/databases/memory-performance/eviction-policy/
+    # --maxmemory 1gb --maxmemory-policy allkeys-lrulpine
+    # This prevents the creation of an anonymous volume.
+    tmpfs:
+      - /data
 
   app:
     image: cupcakearmy/cryptgeon:latest
     depends_on:
       - redis
-    
+
   proxy:
     image: nginx:alpine
     depends_on:

examples/scratch/README.md

@@ -109,7 +109,14 @@ networks:
 services:
   redis:
     image: redis:7-alpine
-    restart: unless-stopped
+    # This is required to stay in RAM only.
+    command: redis-server --save "" --appendonly no
+    # Set a size limit. See link below on how to customise.
+    # https://redis.io/docs/latest/operate/rs/databases/memory-performance/eviction-policy/
+    # --maxmemory 1gb --maxmemory-policy allkeys-lrulpine
+    # This prevents the creation of an anonymous volume.
+    tmpfs:
+      - /data
 
   app:
     image: cupcakearmy/cryptgeon:latest

examples/traefik/README.md

@@ -2,7 +2,7 @@
 
 Assumptions:
 
-- Traefik 2 installed.
+- Traefik 2/3 installed.
 - External proxy docker network `proxy`.
 - A certificate resolver `le`.
 - A https entrypoint `secure`.
@@ -18,7 +18,14 @@ networks:
 services:
   redis:
     image: redis:7-alpine
-    restart: unless-stopped
+    # This is required to stay in RAM only.
+    command: redis-server --save "" --appendonly no
+    # Set a size limit. See link below on how to customise.
+    # https://redis.io/docs/latest/operate/rs/databases/memory-performance/eviction-policy/
+    # --maxmemory 1gb --maxmemory-policy allkeys-lrulpine
+    # This prevents the creation of an anonymous volume.
+    tmpfs:
+      - /data
 
   app:
     image: cupcakearmy/cryptgeon:latest
@@ -34,3 +41,51 @@ services:
       - traefik.http.routers.cryptgeon.entrypoints=secure
       - traefik.http.routers.cryptgeon.tls.certresolver=le
 ```
+
+## With basic auth
+
+Some times it's useful to hide the service behind auth. This is easily achieved with traefik middleware. Many reverse proxies support similar features, so while traefik is used in this example, other reverse proxies can do the same.
+
+```yaml
+services:
+  traefik:
+    image: traefik:v3.0
+    command:
+      - "--api.insecure=true"
+      - "--providers.docker=true"
+      - "--providers.docker.exposedbydefault=false"
+      - "--entrypoints.web.address=:80"
+    ports:
+      - "80:80"
+    volumes:
+      - "/var/run/docker.sock:/var/run/docker.sock:ro"
+
+  redis:
+    image: redis:7-alpine
+    # This is required to stay in RAM only.
+    command: redis-server --save "" --appendonly no
+    # Set a size limit. See link below on how to customise.
+    # https://redis.io/docs/latest/operate/rs/databases/memory-performance/eviction-policy/
+    # --maxmemory 1gb --maxmemory-policy allkeys-lrulpine
+    # This prevents the creation of an anonymous volume.
+    tmpfs:
+      - /data
+
+  cryptgeon:
+    image: cupcakearmy/cryptgeon
+    depends_on:
+      - redis
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.cryptgeon.rule=Host(`cryptgeon.localhost`)"
+      - "traefik.http.routers.cryptgeon.entrypoints=web"
+      - "traefik.http.routers.cryptgeon.middlewares=cryptgeon-auth"
+      - "traefik.http.middlewares.cryptgeon-auth.basicauth.users=user:$$2y$$05$$juUw0zgc5ebvJ00MFPVVLujF6P.rcEMbGZ99Jfq6ZWEa1dgetacEq"
+```
+
+```bash
+docker compose up -d
+```
+
+1. Open http://cryptgeon.localhost
+2. Log in with `user` and `secret`

package.json

@@ -17,5 +17,5 @@
     "npm-run-all": "^4.1.5",
     "shelljs": "^0.8.5"
   },
-  "packageManager": "pnpm@9.11.0"
+  "packageManager": "pnpm@10.3.0"
 }

packages/backend/Cargo.toml

@@ -1,9 +1,9 @@
 [package]
 name = "cryptgeon"
-version = "2.8.2"
+version = "2.9.1"
 authors = ["cupcakearmy <hi@nicco.io>"]
 edition = "2021"
-rust-version = "1.80"
+rust-version = "1.85"
 
 [[bin]]
 name = "cryptgeon"
@@ -21,7 +21,7 @@ redis = { version = "0.25.2", features = ["tls-native-tls"] }
 # Utility
 serde_json = "1"
 lazy_static = "1"
-ring = "0.16"
+ring = "0.17"
 bs62 = "0.1"
 byte-unit = "4"
 dotenv = "0.15"

packages/backend/src/config.rs

@@ -38,6 +38,14 @@ pub static ref ALLOW_FILES: bool = std::env::var("ALLOW_FILES")
   .unwrap_or("true".to_string())
   .parse()
   .unwrap();
+pub static ref IMPRINT_URL: String = std::env::var("IMPRINT_URL")
+  .unwrap_or("".to_string())
+  .parse()
+  .unwrap();
+pub static ref IMPRINT_HTML: String = std::env::var("IMPRINT_HTML")
+  .unwrap_or("".to_string())
+  .parse()
+  .unwrap();
 }
 
 // THEME

packages/backend/src/csp.rs

@@ -0,0 +1,16 @@
+use axum::{body::Body, extract::Request, http::HeaderValue, middleware::Next, response::Response};
+
+const CUSTOM_HEADER_NAME: &str = "Content-Security-Policy";
+const CUSTOM_HEADER_VALUE: &str = "default-src 'self'; script-src 'report-sample' 'self'; style-src 'report-sample' 'self'; object-src 'none'; base-uri 'self'; connect-src 'self' data:; font-src 'self'; frame-src 'self'; img-src 'self'; manifest-src 'self'; media-src 'self'; worker-src 'none';";
+
+lazy_static! {
+    static ref HEADER_VALUE: HeaderValue = HeaderValue::from_static(CUSTOM_HEADER_VALUE);
+}
+
+pub async fn add_csp_header(request: Request<Body>, next: Next) -> Response {
+    let mut response = next.run(request).await;
+    response
+        .headers_mut()
+        .append(CUSTOM_HEADER_NAME, HEADER_VALUE.clone());
+    response
+}

packages/backend/src/lock.rs

@@ -0,0 +1,10 @@
+use std::collections::HashMap;
+use std::sync::Arc;
+use tokio::sync::Mutex;
+
+#[derive(Clone)]
+pub struct SharedState {
+    pub locks: LockMap,
+}
+
+pub type LockMap = Arc<Mutex<HashMap<String, Arc<Mutex<()>>>>>;

packages/backend/src/main.rs

@@ -1,9 +1,13 @@
+use std::{collections::HashMap, sync::Arc};
+
 use axum::{
     extract::{DefaultBodyLimit, Request},
     routing::{delete, get, post},
     Router, ServiceExt,
 };
 use dotenv::dotenv;
+use lock::SharedState;
+use tokio::sync::Mutex;
 use tower::Layer;
 use tower_http::{
     compression::CompressionLayer,
@@ -15,7 +19,9 @@ use tower_http::{
 extern crate lazy_static;
 
 mod config;
+mod csp;
 mod health;
+mod lock;
 mod note;
 mod status;
 mod store;
@@ -24,9 +30,13 @@ mod store;
 async fn main() {
     dotenv().ok();
 
+    let shared_state = SharedState {
+        locks: Arc::new(Mutex::new(HashMap::new())),
+    };
+
     if !store::can_reach_redis() {
         println!("cannot reach redis");
-        panic!("canont reach redis");
+        panic!("cannot reach redis");
     }
 
     let notes_routes = Router::new()
@@ -46,6 +56,8 @@ async fn main() {
     let app = Router::new()
         .nest("/api", api_routes)
         .fallback_service(serve_dir)
+        // Disabled for now, as svelte inlines scripts
+        // .layer(middleware::from_fn(csp::add_csp_header))
         .layer(DefaultBodyLimit::max(*config::LIMIT))
         .layer(
             CompressionLayer::new()
@@ -53,7 +65,8 @@ async fn main() {
                 .deflate(true)
                 .gzip(true)
                 .zstd(true),
-        );
+        )
+        .with_state(shared_state);
 
     let app = NormalizePathLayer::trim_trailing_slash().layer(app);
 

packages/backend/src/note/routes.rs

@@ -5,11 +5,12 @@ use axum::{
     Json,
 };
 use serde::{Deserialize, Serialize};
-use std::time::SystemTime;
+use std::{sync::Arc, time::SystemTime};
+use tokio::sync::Mutex;
 
-use crate::config;
 use crate::note::{generate_id, Note, NoteInfo};
 use crate::store;
+use crate::{config, lock::SharedState};
 
 use super::NotePublic;
 
@@ -80,11 +81,20 @@ pub async fn create(Json(mut n): Json<Note>) -> Response {
     }
 }
 
-pub async fn delete(Path(OneNoteParams { id }): Path<OneNoteParams>) -> Response {
+pub async fn delete(
+    Path(OneNoteParams { id }): Path<OneNoteParams>,
+    state: axum::extract::State<SharedState>,
+) -> Response {
+    let mut locks_map = state.locks.lock().await;
+    let lock = locks_map
+        .entry(id.clone())
+        .or_insert_with(|| Arc::new(Mutex::new(())))
+        .clone();
+    drop(locks_map);
+    let _guard = lock.lock().await;
+
     let note = store::get(&id);
     match note {
-        // Err(e) => HttpResponse::InternalServerError().body(e.to_string()),
-        // Ok(None) => return HttpResponse::NotFound().finish(),
         Err(e) => (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()).into_response(),
         Ok(None) => (StatusCode::NOT_FOUND).into_response(),
         Ok(Some(note)) => {

packages/backend/src/status/mod.rs

@@ -12,6 +12,8 @@ pub struct Status {
     pub max_expiration: u32,
     pub allow_advanced: bool,
     pub allow_files: bool,
+    pub imprint_url: String,
+    pub imprint_html: String,
     // Theme
     pub theme_image: String,
     pub theme_text: String,
@@ -28,6 +30,8 @@ pub async fn get_status() -> (StatusCode, Json<Status>) {
         max_expiration: *config::MAX_EXPIRATION,
         allow_advanced: *config::ALLOW_ADVANCED,
         allow_files: *config::ALLOW_FILES,
+        imprint_url: config::IMPRINT_URL.to_string(),
+        imprint_html: config::IMPRINT_HTML.to_string(),
         theme_new_note_notice: *config::THEME_NEW_NOTE_NOTICE,
         theme_image: config::THEME_IMAGE.to_string(),
         theme_text: config::THEME_TEXT.to_string(),

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cryptgeon",
-  "version": "2.8.2",
+  "version": "2.9.1",
   "homepage": "https://github.com/cupcakearmy/cryptgeon",
   "repository": {
     "type": "git",

packages/cli/src/shared/api.ts

@@ -113,6 +113,8 @@ export type Status = {
   max_expiration: number
   allow_advanced: boolean
   allow_files: boolean
+  imprint_url: string
+  imprint_html: string
   theme_image: string
   theme_text: string
   theme_favicon: string

packages/frontend/locales/zh-TW.json

@@ -0,0 +1,58 @@
+{
+	"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 碼",
+		"password": "密碼"
+	},
+	"home": {
+		"intro": "輕鬆地以一鍵傳送<i>完全加密</i>的安全筆記或檔案。只需創建筆記並分享連結。",
+		"explanation": "筆記將在 {type} 後過期並被銷毀。",
+		"new_note": "新筆記",
+		"new_note_notice": "<b>可用性：</b><br />筆記不保證被儲存，因為所有內容都保留在 RAM 中，如果 RAM 填滿，最舊的筆記將被移除。<br />(您可能會沒事，只是提醒一下。)",
+		"errors": {
+			"note_to_big": "無法創建筆記。筆記過大",
+			"note_error": "無法創建筆記。請再試一次。",
+			"max": "最大值：{n}",
+			"empty_content": "筆記內容為空。"
+		},
+		"messages": {
+			"note_created": "筆記已創建。"
+		},
+		"advanced": {
+			"explanation": "預設情況下，每個筆記都會使用安全生成的密碼。您也可以選擇自己的密碼，該密碼不會包含在連結中。",
+			"custom_password": "自定義密碼"
+		}
+	},
+	"show": {
+		"errors": {
+			"not_found": "筆記未找到或已被刪除。",
+			"decryption_failed": "密碼錯誤。無法解密。可能是連結已損壞。筆記已被銷毀。",
+			"unsupported_type": "不支持的筆記類型。"
+		},
+		"explanation": "如果計數器達到限制，請點擊下方以顯示並刪除筆記",
+		"show_note": "顯示筆記",
+		"warning_will_not_see_again": "您將<b>無法</b>再次查看筆記。",
+		"download_all": "全部下載",
+		"links_found": "在筆記中找到的連結："
+	},
+	"file_upload": {
+		"selected_files": "已選擇的檔案",
+		"no_files_selected": "未選擇檔案",
+		"clear": "重置"
+	}
+}

packages/frontend/package.json

@@ -13,23 +13,23 @@
 	},
 	"type": "module",
 	"devDependencies": {
-		"@lokalise/node-api": "^12.1.0",
-		"@sveltejs/adapter-static": "^3.0.1",
-		"@sveltejs/kit": "^2.5.2",
-		"@sveltejs/vite-plugin-svelte": "^3.0.2",
-		"@zerodevx/svelte-toast": "^0.9.5",
-		"adm-zip": "^0.5.10",
-		"dotenv": "^16.4.5",
-		"svelte": "^4.2.12",
-		"svelte-check": "^3.6.6",
+		"@lokalise/node-api": "^13.2.1",
+		"@sveltejs/adapter-static": "^3.0.8",
+		"@sveltejs/kit": "^2.17.3",
+		"@sveltejs/vite-plugin-svelte": "^5.0.3",
+		"@zerodevx/svelte-toast": "^0.9.6",
+		"adm-zip": "^0.5.16",
+		"dotenv": "^16.4.7",
+		"svelte": "^5.20.5",
+		"svelte-check": "^4.1.4",
 		"svelte-intl-precompile": "^0.12.3",
-		"tslib": "^2.6.2",
-		"typescript": "^5.3.3",
-		"vite": "^5.1.7"
+		"tslib": "^2.8.1",
+		"typescript": "^5.7.3",
+		"vite": "^6.2.0"
 	},
 	"dependencies": {
+		"@fontsource/fira-mono": "^5.1.1",
 		"cryptgeon": "workspace:*",
-		"@fontsource/fira-mono": "^5.0.8",
 		"occulto": "^2.0.6",
 		"pretty-bytes": "^6.1.1",
 		"qrious": "^4.0.2"

packages/frontend/src/lib/icons/IconContrast.svelte

@@ -1,3 +1,5 @@
+<script lang="ts"></script>
+
 <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"
 	><title>Contrast</title><path
 		d="M256 32C132.29 32 32 132.29 32 256s100.29 224 224 224 224-100.29 224-224S379.71 32 256 32zM128.72 383.28A180 180 0 01256 76v360a178.82 178.82 0 01-127.28-52.72z"

packages/frontend/src/lib/icons/IconCopy.svelte

@@ -1,3 +1,5 @@
+<script lang="ts"></script>
+
 <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"
 	><title>Copy</title><path
 		d="M456 480H136a24 24 0 01-24-24V128a16 16 0 0116-16h328a24 24 0 0124 24v320a24 24 0 01-24 24z"

packages/frontend/src/lib/icons/IconDice.svelte

@@ -1,3 +1,5 @@
+<script lang="ts"></script>
+
 <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"
 	><title>Dice</title><path
 		d="M48 366.92L240 480V284L48 170zM192 288c8.84 0 16 10.75 16 24s-7.16 24-16 24-16-10.75-16-24 7.16-24 16-24zm-96 32c8.84 0 16 10.75 16 24s-7.16 24-16 24-16-10.75-16-24 7.16-24 16-24zM272 284v196l192-113.08V170zm48 140c-8.84 0-16-10.75-16-24s7.16-24 16-24 16 10.75 16 24-7.16 24-16 24zm0-88c-8.84 0-16-10.75-16-24s7.16-24 16-24 16 10.75 16 24-7.16 24-16 24zm96 32c-8.84 0-16-10.75-16-24s7.16-24 16-24 16 10.75 16 24-7.16 24-16 24zm0-88c-8.84 0-16-10.75-16-24s7.16-24 16-24 16 10.75 16 24-7.16 24-16 24zm32 77.64zM256 32L64 144l192 112 192-112zm0 120c-13.25 0-24-7.16-24-16s10.75-16 24-16 24 7.16 24 16-10.75 16-24 16z"

packages/frontend/src/lib/icons/IconEye.svelte

@@ -1,3 +1,5 @@
+<script lang="ts"></script>
+
 <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"
 	><title>Eye</title><circle cx="256" cy="256" r="64" /><path
 		d="M394.82 141.18C351.1 111.2 304.31 96 255.76 96c-43.69 0-86.28 13-126.59 38.48C88.52 160.23 48.67 207 16 256c26.42 44 62.56 89.24 100.2 115.18C159.38 400.92 206.33 416 255.76 416c49 0 95.85-15.07 139.3-44.79C433.31 345 469.71 299.82 496 256c-26.38-43.43-62.9-88.56-101.18-114.82zM256 352a96 96 0 1196-96 96.11 96.11 0 01-96 96z"

packages/frontend/src/lib/icons/IconEyeOff.svelte

@@ -1,3 +1,5 @@
+<script lang="ts"></script>
+
 <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"
 	><title>Eye Off</title><path
 		d="M63.998 86.004l21.998-21.998L448 426.01l-21.998 21.998zM259.34 192.09l60.57 60.57a64.07 64.07 0 00-60.57-60.57zM252.66 319.91l-60.57-60.57a64.07 64.07 0 0060.57 60.57z"

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

@@ -1,10 +1,17 @@
 <script lang="ts">
-	export let title: string
+	import type { Snippet } from 'svelte'
+
+	interface Props {
+		title: string
+		children?: Snippet
+	}
+
+	let { title, children }: Props = $props()
 </script>
 
 <p>
 	<b>▶ {title}</b>
-	<slot />
+	{@render children?.()}
 </p>
 
 <style>

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

@@ -6,13 +6,23 @@
 	import TextInput from '$lib/ui/TextInput.svelte'
 	import type { Note } from 'cryptgeon/shared'
 
-	export let note: Note
-	export let timeExpiration = false
-	export let customPassword: string | null = null
+	interface Props {
+		note: Note
+		timeExpiration?: boolean
+		customPassword?: string | null
+	}
 
-	let hasCustomPassword = false
+	let {
+		note = $bindable(),
+		timeExpiration = $bindable(false),
+		customPassword = $bindable(null),
+	}: Props = $props()
 
-	$: if (!hasCustomPassword) customPassword = null
+	let hasCustomPassword = $state(false)
+
+	$effect(() => {
+		if (!hasCustomPassword) customPassword = null
+	})
 </script>
 
 <div class="flex col">

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

@@ -1,4 +1,14 @@
-<button {...$$restProps} on:click><slot /></button>
+<script lang="ts">
+	import type { HTMLButtonAttributes } from 'svelte/elements'
+
+	interface Props {
+		children?: import('svelte').Snippet
+	}
+
+	let { children, ...rest }: HTMLButtonAttributes & Props = $props()
+</script>
+
+<button {...rest}>{@render children?.()}</button>
 
 <style>
 	button {

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

@@ -5,11 +5,15 @@
 
 	import { getCSSVariable } from '$lib/utils'
 
-	export let value: string
+	interface Props {
+		value: string
+	}
 
-	let canvas: HTMLCanvasElement
+	let { value }: Props = $props()
 
-	$: {
+	let canvas: HTMLCanvasElement | null = $state(null)
+
+	$effect(() => {
 		new QR({
 			value,
 			level: 'Q',
@@ -18,12 +22,12 @@
 			foreground: getCSSVariable('--ui-text-0'),
 			element: canvas,
 		})
-	}
+	})
 </script>
 
 <small>{$t('common.qr_code')}</small>
 <div>
-	<canvas bind:this={canvas} />
+	<canvas bind:this={canvas}></canvas>
 </div>
 
 <style>

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

@@ -5,8 +5,13 @@
 	import MaxSize from '$lib/ui/MaxSize.svelte'
 	import type { FileDTO } from 'cryptgeon/shared'
 
-	export let label: string = ''
-	export let files: FileDTO[] = []
+	interface Props {
+		label?: string
+		files?: FileDTO[]
+		[key: string]: any
+	}
+
+	let { label = '', files = $bindable([]), ...rest }: Props = $props()
 
 	async function fileToDTO(file: File): Promise<FileDTO> {
 		return {
@@ -35,7 +40,7 @@
 	<small>
 		{label}
 	</small>
-	<input {...$$restProps} type="file" on:change={onInput} multiple />
+	<input {...rest} type="file" onchange={onInput} multiple />
 	<div class="box">
 		{#if files.length}
 			<div>
@@ -45,8 +50,8 @@
 						{file.name}
 					</div>
 				{/each}
-				<div class="spacer" />
-				<Button on:click={clear}>{$t('file_upload.clear')}</Button>
+				<div class="spacer"></div>
+				<Button onclick={clear}>{$t('file_upload.clear')}</Button>
 			</div>
 		{:else}
 			<div>

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

@@ -1,9 +1,10 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
 	import IconContrast from '$lib/icons/IconContrast.svelte'
 	import IconCopy from '$lib/icons/IconCopy.svelte'
 	import IconDice from '$lib/icons/IconDice.svelte'
 	import IconEye from '$lib/icons/IconEye.svelte'
 	import IconEyeOff from '$lib/icons/IconEyeOff.svelte'
+	import type { HTMLButtonAttributes } from 'svelte/elements'
 
 	const map = {
 		contrast: IconContrast,
@@ -15,12 +16,17 @@
 </script>
 
 <script lang="ts">
-	export let icon: keyof typeof map
+	interface Props {
+		icon: keyof typeof map
+	}
+
+	let { icon, ...rest }: HTMLButtonAttributes & Props = $props()
 </script>
 
-<button type="button" on:click {...$$restProps}>
+<button type="button" {...rest}>
 	{#if map[icon]}
-		<svelte:component this={map[icon]} />
+		{@const SvelteComponent = map[icon]}
+		<SvelteComponent />
 	{/if}
 </button>
 

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

@@ -1,3 +1,5 @@
+<script lang="ts"></script>
+
 <svg
 	version="1.1"
 	xmlns="http://www.w3.org/2000/svg"

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

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
 	export type NoteResult = {
 		id: string
 		password?: string
@@ -12,9 +12,13 @@
 	import TextInput from '$lib/ui/TextInput.svelte'
 	import Canvas from './Canvas.svelte'
 
-	export let result: NoteResult
+	interface Props {
+		result: NoteResult
+	}
 
-	let url = `${window.location.origin}/note/${result.id}`
+	let { result }: Props = $props()
+
+	let url = $state(`${window.location.origin}/note/${result.id}`)
 	if (result.password) url += `#${result.password}`
 
 	function reset() {
@@ -41,7 +45,7 @@
 	</p>
 {/if}
 <br />
-<Button on:click={reset}>{$t('home.new_note')}</Button>
+<Button onclick={reset}>{$t('home.new_note')}</Button>
 
 <style>
 	div {

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

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
 	export type DecryptedNote = Omit<NotePublic, 'contents'> & { contents: any }
 
 	function saveAs(file: File) {
@@ -22,20 +22,14 @@
 	import { copy } from '$lib/utils'
 	import type { FileDTO, NotePublic } from 'cryptgeon/shared'
 
-	export let note: DecryptedNote
+	interface Props {
+		note: DecryptedNote
+	}
+
+	let { note }: Props = $props()
 
 	const RE_URL = /[A-Za-z]+:\/\/([A-Z a-z0-9\-._~:\/?#\[\]@!$&'()*+,;%=])+/g
-	let files: FileDTO[] = []
-
-	$: if (note.meta.type === 'file') {
-		files = note.contents
-	}
-
-	$: download = () => {
-		for (const file of files) {
-			downloadFile(file)
-		}
-	}
+	let files: FileDTO[] = $state([])
 
 	async function downloadFile(file: FileDTO) {
 		const f = new File([file.contents], file.name, {
@@ -44,7 +38,17 @@
 		saveAs(f)
 	}
 
-	$: links = typeof note.contents === 'string' ? note.contents.match(RE_URL) : []
+	$effect(() => {
+		if (note.meta.type === 'file') {
+			files = note.contents
+		}
+	})
+	let download = $derived(() => {
+		for (const file of files) {
+			downloadFile(file)
+		}
+	})
+	let links = $derived(typeof note.contents === 'string' ? note.contents.match(RE_URL) : [])
 </script>
 
 <p class="error-text">{@html $t('show.warning_will_not_see_again')}</p>
@@ -53,7 +57,7 @@
 		<div class="note">
 			{note.contents}
 		</div>
-		<Button on:click={() => copy(note.contents)}>{$t('common.copy_clipboard')}</Button>
+		<Button onclick={() => copy(note.contents)}>{$t('common.copy_clipboard')}</Button>
 
 		{#if links && links.length}
 			<div class="links">
@@ -70,13 +74,13 @@
 	{:else}
 		{#each files as file}
 			<div class="note file">
-				<button on:click={() => downloadFile(file)}>
+				<button onclick={() => 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>
+		<Button onclick={download}>{$t('show.download_all')}</Button>
 	{/if}
 </div>
 

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

@@ -1,13 +1,18 @@
 <script lang="ts">
-	export let label: string = ''
-	export let value: boolean
-	export let color = true
+	interface Props {
+		label?: string
+		value: boolean
+		color?: boolean
+		[key: string]: any
+	}
+
+	let { label = '', value = $bindable(), color = true, ...rest }: Props = $props()
 </script>
 
-<label {...$$restProps}>
+<label {...rest}>
 	<small>{label}</small>
 	<input type="checkbox" bind:checked={value} />
-	<span class:color class="slider" />
+	<span class:color class="slider"></span>
 </label>
 
 <style>

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

@@ -1,11 +1,16 @@
 <script lang="ts">
-	export let label: string = ''
-	export let value: string
+	interface Props {
+		label?: string
+		value: string
+		[key: string]: any
+	}
+
+	let { label = '', value = $bindable(), ...rest }: Props = $props()
 </script>
 
 <label>
 	<small>
 		{label}
 	</small>
-	<textarea class="box" {...$$restProps} bind:value />
+	<textarea class="box" {...rest} bind:value></textarea>
 </label>

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

@@ -2,25 +2,34 @@
 	import Icon from '$lib/ui/Icon.svelte'
 	import { copy as copyFN } from '$lib/utils'
 	import { getRandomBytes, Hex } from 'occulto'
+	import type { HTMLInputAttributes } from 'svelte/elements'
 
-	export let label: string = ''
-	export let value: any
-	export let validate: (value: any) => boolean | string = () => true
-	export let copy: boolean = false
-	export let random: boolean = false
-
-	const initialType = $$restProps.type
-	const isPassword = initialType === 'password'
-	let hidden = true
-
-	$: valid = validate(value)
-
-	$: if (isPassword) {
-		value
-		$$restProps.type = hidden ? initialType : 'text'
+	interface Props {
+		label?: string
+		value: any
+		validate?: (value: any) => boolean | string
+		copy?: boolean
+		random?: boolean
 	}
 
+	let {
+		label = '',
+		value = $bindable(),
+		validate = () => true,
+		copy = false,
+		random = false,
+		...rest
+	}: HTMLInputAttributes & Props = $props()
+
+	const initialType = $state(rest.type)
+	const isPassword = initialType === 'password'
+	let hidden = $state(true)
+
+	let valid = $derived(validate(value))
+	let type = $derived(isPassword ? (hidden ? 'password' : 'text') : rest.type)
+
 	function toggle() {
+		console.debug('toggle')
 		hidden = !hidden
 	}
 
@@ -30,31 +39,31 @@
 </script>
 
 <label>
-	<small class:disabled={$$restProps.disabled}>
+	<small class:disabled={rest.disabled}>
 		{label}
 		{#if valid !== true}
 			<span class="error-text">{valid}</span>
 		{/if}
 	</small>
-	<input bind:value {...$$restProps} class:valid={valid === true} />
+	<input bind:value {...rest} {type} autocomplete="off" class:valid={valid === true} />
 	<div class="icons">
 		{#if isPassword}
 			<Icon
-				disabled={$$restProps.disabled}
+				disabled={rest.disabled}
 				class="icon"
 				icon={hidden ? 'eye' : 'eye-off'}
-				on:click={toggle}
+				onclick={toggle}
 			/>
 		{/if}
 		{#if random}
-			<Icon disabled={$$restProps.disabled} class="icon" icon="dice" on:click={randomFN} />
+			<Icon disabled={rest.disabled} class="icon" icon="dice" onclick={randomFN} />
 		{/if}
 		{#if copy}
 			<Icon
-				disabled={$$restProps.disabled}
+				disabled={rest.disabled}
 				class="icon"
 				icon="copy"
-				on:click={() => copyFN(value.toString())}
+				onclick={() => copyFN(value.toString())}
 			/>
 		{/if}
 	</div>

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

@@ -1,24 +1,21 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
 	import { writable } from 'svelte/store'
 
-	enum Theme {
-		Dark = 'dark',
-		Light = 'light',
-		Auto = 'auto',
-	}
+	const themes = ['dark', 'light', 'auto'] as const
+	type Theme = (typeof themes)[number]
 
-	const NextTheme = {
-		[Theme.Auto]: Theme.Light,
-		[Theme.Light]: Theme.Dark,
-		[Theme.Dark]: Theme.Auto,
+	const NextTheme: Record<Theme, Theme> = {
+		auto: 'light',
+		light: 'dark',
+		dark: 'auto',
 	}
 
 	function init(): Theme {
 		if (typeof window !== 'undefined') {
 			const saved = window.localStorage.getItem('theme') as Theme
-			if (Object.values(Theme).includes(saved)) return saved
+			if (themes.includes(saved)) return saved
 		}
-		return Theme.Auto
+		return 'auto'
 	}
 
 	export const theme = writable<Theme>(init())
@@ -40,7 +37,7 @@
 	}
 </script>
 
-<button on:click={change}>
+<button onclick={change}>
 	<Icon class="icon" icon="contrast" />
 	{$theme}
 </button>

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

@@ -15,27 +15,29 @@
 	import TextArea from '$lib/ui/TextArea.svelte'
 	import { Adapters, API, PayloadToLargeError, type FileDTO, type Note } from 'cryptgeon/shared'
 
-	let note: Note = {
+	let note: Note = $state({
 		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 customPassword: string | null = null
-	let description = ''
-	let loading: string | null = null
+	})
+	let files: FileDTO[] = $state([])
+	let result: NoteResult | null = $state(null)
+	let advanced = $state(false)
+	let isFile = $state(false)
+	let timeExpiration = $state(false)
+	let customPassword: string | null = $state(null)
+	let description = $state('')
+	let loading: string | null = $state(null)
 
-	$: if (!advanced) {
-		note.views = 1
-		timeExpiration = false
-	}
+	$effect(() => {
+		if (!advanced) {
+			note.views = 1
+			timeExpiration = false
+		}
+	})
 
-	$: {
+	$effect(() => {
 		description = $t('home.explanation', {
 			values: {
 				type: $t(timeExpiration ? 'common.minutes' : 'common.views', {
@@ -43,17 +45,22 @@
 				}),
 			},
 		})
-	}
+	})
 
-	$: note.meta.type = isFile ? 'file' : 'text'
+	$effect(() => {
+		note.meta.type = isFile ? 'file' : 'text'
+	})
 
-	$: if (!isFile) {
-		note.contents = ''
-	}
+	$effect(() => {
+		if (!isFile) {
+			note.contents = ''
+		}
+	})
 
 	class EmptyContentError extends Error {}
 
-	async function submit() {
+	async function submit(e: SubmitEvent) {
+		e.preventDefault()
 		try {
 			loading = $t('common.encrypting')
 
@@ -103,7 +110,7 @@
 	<p>
 		{@html $status?.theme_text || $t('home.intro')}
 	</p>
-	<form on:submit|preventDefault={submit}>
+	<form onsubmit={submit}>
 		<fieldset disabled={loading !== null}>
 			{#if isFile}
 				<FileUpload data-testid="file-upload" label={$t('common.file')} bind:files />
@@ -132,7 +139,7 @@
 						bind:value={advanced}
 					/>
 				{/if}
-				<div class="grow" />
+				<div class="grow"></div>
 				<div class="tr">
 					<small>{$t('common.max')}: <MaxSize /> </small>
 					<br />

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

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import ThemeToggle from '$lib/ui/ThemeToggle.svelte'
+        import { status } from '$lib/stores/status'
 </script>
 
 <footer>
@@ -7,6 +8,11 @@
 	<nav>
 		<a href="/">/home</a>
 		<a href="/about">/about</a>
+		{#if $status?.imprint_url}
+			<a href={$status.imprint_url} target="_blank" rel="noopener noreferrer">/imprint</a>
+		{:else if $status?.imprint_html}
+			<a href="/imprint">/imprint</a>
+		{/if}
 		<a href="https://github.com/cupcakearmy/cryptgeon" target="_blank" rel="noopener noreferrer">
 			code
 		</a>

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

@@ -7,7 +7,7 @@
 </script>
 
 <header>
-	<a on:click={reset} href="/">
+	<a onclick={reset} href="/">
 		{#if $status?.theme_image}
 			<img alt="logo" src={$status.theme_image} />
 		{:else}

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

@@ -8,6 +8,11 @@
 	import { init as initStores, status } from '$lib/stores/status'
 	import Footer from '$lib/views/Footer.svelte'
 	import Header from '$lib/views/Header.svelte'
+	interface Props {
+		children?: import('svelte').Snippet
+	}
+
+	let { children }: Props = $props()
 
 	onMount(() => {
 		initStores()
@@ -22,7 +27,7 @@
 {#await waitLocale() then _}
 	<main>
 		<Header />
-		<slot />
+		{@render children?.()}
 	</main>
 
 	<SvelteToast />

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

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { goto } from '$app/navigation'
+	import { status } from '$lib/stores/status'
+
+	status.subscribe((config) => {
+		if (config != null) {
+			if (config.imprint_url) {
+				window.location.href = config.imprint_url
+			} else if (config.imprint_html == '') {
+				goto('/about')
+			}
+		}
+	})
+</script>
+
+<svelte:head>
+	<title>Imprint</title>
+</svelte:head>
+
+<section class="content">
+	{#if $status?.imprint_html}
+		{@html $status.imprint_html}
+	{/if}
+</section>
+
+<style>
+	section {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		gap: 2rem;
+	}
+</style>

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

@@ -10,18 +10,22 @@
 	import { Adapters, API, type NoteMeta } from 'cryptgeon/shared'
 	import type { PageData } from './$types'
 
-	export let data: PageData
+	interface Props {
+		data: PageData
+	}
+
+	let { data }: Props = $props()
 
 	let id = data.id
-	let password: string | null = null
-	let note: DecryptedNote | null = null
-	let exists = false
-	let meta: NoteMeta | null = null
+	let password: string | null = $state<string | null>(null)
+	let note: DecryptedNote | null = $state(null)
+	let exists = $state(false)
+	let meta: NoteMeta | null = $state(null)
 
-	let loading: string | null = null
-	let error: string | null = null
+	let loading: string | null = $state(null)
+	let error: string | null = $state(null)
 
-	$: valid = !!password?.length
+	let valid = $derived(!!password?.length)
 
 	onMount(async () => {
 		// Check if note exists
@@ -41,7 +45,8 @@
 	/**
 	 * Get the actual contents of the note and decrypt it.
 	 */
-	async function show() {
+	async function show(e: SubmitEvent) {
+		e.preventDefault()
 		try {
 			if (!valid) {
 				error = $t('show.errors.no_password')
@@ -86,7 +91,7 @@
 	{:else if note && !error}
 		<ShowNote {note} />
 	{:else}
-		<form on:submit|preventDefault={show}>
+		<form onsubmit={show}>
 			<fieldset>
 				<p>{$t('show.explanation')}</p>
 				{#if meta?.derivation}

packages/frontend/vite.config.js

@@ -1,12 +1,17 @@
 import { sveltekit } from '@sveltejs/kit/vite'
 import precompileIntl from 'svelte-intl-precompile/sveltekit-plugin'
 
-const port = 8001
+const port = 3000
 
 /** @type {import('vite').UserConfig} */
 const config = {
 	clearScreen: false,
-	server: { port },
+	server: {
+		port,
+		proxy: {
+			'/api': 'http://localhost:8000',
+		},
+	},
 	preview: { port },
 	plugins: [sveltekit(), precompileIntl('locales')],
 }

packages/proxy/package.json

@@ -1,12 +0,0 @@
-{
-  "private": true,
-  "name": "@cryptgeon/proxy",
-  "type": "module",
-  "main": "./proxy.js",
-  "scripts": {
-    "dev": "node ."
-  },
-  "dependencies": {
-    "http-proxy": "^1.18.1"
-  }
-}

packages/proxy/proxy.js

@@ -1,16 +0,0 @@
-import http from 'http'
-import httpProxy from 'http-proxy'
-
-const proxy = httpProxy.createProxyServer()
-proxy.on('error', function (err, req, res) {
-  console.error(err)
-  res.writeHead(500, { 'Content-Type': 'text/plain' })
-  res.end('500 Internal Server Error')
-})
-
-const server = http.createServer(function (req, res) {
-  const target = req.url.startsWith('/api/') ? 'http://127.0.0.1:8000' : 'http://localhost:8001'
-  proxy.web(req, res, { target, proxyTimeout: 250, timeout: 250 })
-})
-server.listen(3000)
-console.log('Proxy on http://localhost:3000')