Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

some frontend love #167

Merged
merged 5 commits into from
Jan 18, 2025
Merged

some frontend love #167

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
808d846
remove proxy
cupcakearmy Jan 17, 2025
e440e4b
update to svelte 5
cupcakearmy Jan 17, 2025
e20f462
Merge remote-tracking branch 'origin/main' into svelte-5
cupcakearmy Jan 17, 2025
82862f0
version bump
cupcakearmy Jan 17, 2025
c13e534
add csp draft
cupcakearmy Jan 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,5 +17,5 @@
"npm-run-all": "^4.1.5",
"shelljs": "^0.8.5"
},
"packageManager": "pnpm@9.11.0"
"packageManager": "pnpm@9.15.4"
}
2 changes: 1 addition & 1 deletion packages/backend/Cargo.lock
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion packages/backend/Cargo.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
[package]
name = "cryptgeon"
version = "2.8.4"
version = "2.9.0"
authors = ["cupcakearmy <hi@nicco.io>"]
edition = "2021"
rust-version = "1.80"
Expand Down
16 changes: 16 additions & 0 deletions packages/backend/src/csp.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
}
7 changes: 7 additions & 0 deletions packages/backend/src/main.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
use std::{collections::HashMap, sync::Arc};

use axum::{
body::Body,
extract::{DefaultBodyLimit, Request},
http::HeaderValue,
middleware::{self, Next},
response::Response,
routing::{delete, get, post},
Router, ServiceExt,
};
Expand All @@ -19,6 +23,7 @@ use tower_http::{
extern crate lazy_static;

mod config;
mod csp;
mod health;
mod lock;
mod note;
Expand Down Expand Up @@ -55,6 +60,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()
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "cryptgeon",
"version": "2.8.4",
"version": "2.9.0",
"homepage": "https://github.com/cupcakearmy/cryptgeon",
"repository": {
"type": "git",
Expand Down
26 changes: 13 additions & 13 deletions packages/frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.0.0",
"@sveltejs/adapter-static": "^3.0.8",
"@sveltejs/kit": "^2.16.0",
"@sveltejs/vite-plugin-svelte": "^5.0.3",
"@zerodevx/svelte-toast": "^0.9.6",
"adm-zip": "^0.5.16",
"dotenv": "^16.4.7",
"svelte": "^5.19.0",
"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.0.7"
},
"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"
Expand Down
2 changes: 2 additions & 0 deletions packages/frontend/src/lib/icons/IconContrast.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Expand Down
2 changes: 2 additions & 0 deletions packages/frontend/src/lib/icons/IconCopy.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Expand Down
2 changes: 2 additions & 0 deletions packages/frontend/src/lib/icons/IconDice.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Expand Down
2 changes: 2 additions & 0 deletions packages/frontend/src/lib/icons/IconEye.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Expand Down
2 changes: 2 additions & 0 deletions packages/frontend/src/lib/icons/IconEyeOff.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Expand Down
11 changes: 9 additions & 2 deletions packages/frontend/src/lib/ui/AboutParagraph.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
20 changes: 15 additions & 5 deletions packages/frontend/src/lib/ui/AdvancedParameters.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
note = $bindable(),
timeExpiration = $bindable(false),
customPassword = $bindable(null),
}: Props = $props()

let hasCustomPassword = false
let hasCustomPassword = $state(false)

$: if (!hasCustomPassword) customPassword = null
$effect(() => {
if (!hasCustomPassword) customPassword = null
})
</script>

<div class="flex col">
Expand Down
12 changes: 11 additions & 1 deletion packages/frontend/src/lib/ui/Button.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down
14 changes: 9 additions & 5 deletions packages/frontend/src/lib/ui/Canvas.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,15 @@

import { getCSSVariable } from '$lib/utils'

export let value: string
interface Props {
value: string
}

let { value }: Props = $props()

let canvas: HTMLCanvasElement
let canvas: HTMLCanvasElement | null = $state(null)

$: {
$effect(() => {
new QR({
value,
level: 'Q',
Expand All @@ -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>
Expand Down
15 changes: 10 additions & 5 deletions packages/frontend/src/lib/ui/FileUpload.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down
14 changes: 10 additions & 4 deletions packages/frontend/src/lib/ui/Icon.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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>

Expand Down
2 changes: 2 additions & 0 deletions packages/frontend/src/lib/ui/Loader.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
<script lang="ts"></script>

<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
Expand Down
12 changes: 8 additions & 4 deletions packages/frontend/src/lib/ui/NoteResult.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<script lang="ts" context="module">
<script lang="ts" module>
export type NoteResult = {
id: string
password?: string
Expand All @@ -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 { result }: Props = $props()

let url = `${window.location.origin}/note/${result.id}`
let url = $state(`${window.location.origin}/note/${result.id}`)
if (result.password) url += `#${result.password}`

function reset() {
Expand All @@ -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 {
Expand Down
Loading
Loading