From 9f7b903901acb0cd6ec9cb2146406a92ebf79cab Mon Sep 17 00:00:00 2001 From: Vika Date: Fri, 7 Oct 2022 19:53:04 +0300 Subject: templates: move static assets to the templates crate It makes more sense to keep CSS near the templates, and the client-side JavaScript code too, since it depends on the DOM structure to work. Additionally, the overhead of `include_dir!()` is almost completely mitigated by the fact that this is a separate crate that isn't recompiled often. The linking stage, however, is still expected to take a little bit long. But I doubt it'd be longer than what it was before, since it's the same exact files that get linked into the app. --- kittybox-rs/Cargo.lock | 63 +++++-- kittybox-rs/Cargo.toml | 2 +- kittybox-rs/build.rs | 14 -- kittybox-rs/javascript/jslicense.html | 31 ---- kittybox-rs/javascript/src/indieauth.ts | 150 --------------- kittybox-rs/javascript/src/lib.ts | 3 - kittybox-rs/javascript/src/onboarding.ts | 120 ------------ kittybox-rs/javascript/tsconfig.json | 104 ----------- kittybox-rs/src/frontend/login.rs | 2 +- kittybox-rs/src/frontend/mod.rs | 47 +---- kittybox-rs/src/frontend/onboarding.css | 33 ---- kittybox-rs/src/frontend/onboarding.rs | 2 +- kittybox-rs/src/frontend/style.css | 201 --------------------- kittybox-rs/src/indieauth/mod.rs | 4 +- kittybox-rs/templates/Cargo.toml | 12 +- kittybox-rs/templates/assets/jslicense.html | 31 ++++ kittybox-rs/templates/assets/onboarding.css | 33 ++++ kittybox-rs/templates/assets/style.css | 201 +++++++++++++++++++++ kittybox-rs/templates/build.rs | 26 +++ kittybox-rs/templates/javascript/dist/indieauth.js | 118 ++++++++++++ .../templates/javascript/dist/webauthn/register.js | 1 + kittybox-rs/templates/javascript/src/indieauth.ts | 150 +++++++++++++++ kittybox-rs/templates/javascript/src/lib.ts | 3 + kittybox-rs/templates/javascript/src/onboarding.ts | 120 ++++++++++++ .../templates/javascript/src/webauthn/register.ts | 0 kittybox-rs/templates/javascript/tsconfig.json | 104 +++++++++++ kittybox-rs/templates/src/lib.rs | 31 ++++ 27 files changed, 879 insertions(+), 727 deletions(-) delete mode 100644 kittybox-rs/javascript/jslicense.html delete mode 100644 kittybox-rs/javascript/src/indieauth.ts delete mode 100644 kittybox-rs/javascript/src/lib.ts delete mode 100644 kittybox-rs/javascript/src/onboarding.ts delete mode 100644 kittybox-rs/javascript/tsconfig.json delete mode 100644 kittybox-rs/src/frontend/onboarding.css delete mode 100644 kittybox-rs/src/frontend/style.css create mode 100644 kittybox-rs/templates/assets/jslicense.html create mode 100644 kittybox-rs/templates/assets/onboarding.css create mode 100644 kittybox-rs/templates/assets/style.css create mode 100644 kittybox-rs/templates/build.rs create mode 100644 kittybox-rs/templates/javascript/dist/indieauth.js create mode 100644 kittybox-rs/templates/javascript/dist/webauthn/register.js create mode 100644 kittybox-rs/templates/javascript/src/indieauth.ts create mode 100644 kittybox-rs/templates/javascript/src/lib.ts create mode 100644 kittybox-rs/templates/javascript/src/onboarding.ts create mode 100644 kittybox-rs/templates/javascript/src/webauthn/register.ts create mode 100644 kittybox-rs/templates/javascript/tsconfig.json (limited to 'kittybox-rs') diff --git a/kittybox-rs/Cargo.lock b/kittybox-rs/Cargo.lock index 8815b41..e8e0bf3 100644 --- a/kittybox-rs/Cargo.lock +++ b/kittybox-rs/Cargo.lock @@ -171,9 +171,9 @@ checksum = "d468802bab17cbc0cc575e9b053f41e72aa36bfa6b7f55e3529ffa43161b97fa" [[package]] name = "axum" -version = "0.5.15" +version = "0.5.16" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "9de18bc5f2e9df8f52da03856bf40e29b747de5a84e43aefff90e3dc4a21529b" +checksum = "c9e3356844c4d6a6d6467b8da2cffb4a2820be256f50a3a386c9d152bab31043" dependencies = [ "async-trait", "axum-core", @@ -204,9 +204,9 @@ dependencies = [ [[package]] name = "axum-core" -version = "0.2.7" +version = "0.2.8" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "e4f44a0e6200e9d11a1cdc989e4b358f6e3d354fbf48478f345a17f4e43f8635" +checksum = "d9f0c0a60006f2a293d82d571f635042a72edf927539b7685bd62d361963839b" dependencies = [ "async-trait", "bytes", @@ -214,6 +214,8 @@ dependencies = [ "http", "http-body", "mime", + "tower-layer", + "tower-service", ] [[package]] @@ -1157,6 +1159,25 @@ dependencies = [ "unicode-normalization", ] +[[package]] +name = "include_dir" +version = "0.7.2" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "482a2e29200b7eed25d7fdbd14423326760b7f6658d21a4cf12d55a50713c69f" +dependencies = [ + "include_dir_macros", +] + +[[package]] +name = "include_dir_macros" +version = "0.7.2" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "5e074c19deab2501407c91ba1860fa3d6820bfde307db6d8cb851b55a10be89b" +dependencies = [ + "proc-macro2 1.0.38", + "quote 1.0.18", +] + [[package]] name = "indexmap" version = "1.8.1" @@ -1229,8 +1250,8 @@ dependencies = [ "futures-util", "hex", "hyper", + "kittybox-frontend-renderer", "kittybox-indieauth", - "kittybox-templates", "kittybox-util", "lazy_static", "listenfd", @@ -1265,34 +1286,36 @@ dependencies = [ ] [[package]] -name = "kittybox-indieauth" +name = "kittybox-frontend-renderer" version = "0.1.0" dependencies = [ - "axum-core", - "data-encoding", + "axum", + "chrono", + "ellipse", + "faker_rand", "http", + "include_dir", + "kittybox-indieauth", + "kittybox-util", + "markup", + "microformats", "rand 0.8.5", - "serde", "serde_json", - "serde_urlencoded", - "sha2", - "url", ] [[package]] -name = "kittybox-templates" +name = "kittybox-indieauth" version = "0.1.0" dependencies = [ - "chrono", - "ellipse", - "faker_rand", + "axum-core", + "data-encoding", "http", - "kittybox-indieauth", - "kittybox-util", - "markup", - "microformats", "rand 0.8.5", + "serde", "serde_json", + "serde_urlencoded", + "sha2", + "url", ] [[package]] diff --git a/kittybox-rs/Cargo.toml b/kittybox-rs/Cargo.toml index 6b0057f..cf16896 100644 --- a/kittybox-rs/Cargo.toml +++ b/kittybox-rs/Cargo.toml @@ -42,7 +42,7 @@ default-members = [".", "./util", "./templates", "./indieauth"] version = "0.1.0" path = "./util" features = ["fs"] -[dependencies.kittybox-templates] +[dependencies.kittybox-frontend-renderer] version = "0.1.0" path = "./templates" [dependencies.kittybox-indieauth] diff --git a/kittybox-rs/build.rs b/kittybox-rs/build.rs index 3d4c62b..c639cf8 100644 --- a/kittybox-rs/build.rs +++ b/kittybox-rs/build.rs @@ -1,20 +1,6 @@ fn main() { use std::env; let out_dir = env::var("OUT_DIR").unwrap(); - println!("cargo:rerun-if-changed=javascript/"); - - if let Ok(exit) = std::process::Command::new("tsc") - .arg("--outDir") - .arg(std::path::Path::new(&out_dir).join("kittybox_js")) - .current_dir("javascript") - .spawn() - .unwrap() - .wait() - { - if !exit.success() { - std::process::exit(exit.code().unwrap_or(1)) - } - } println!("cargo:rerun-if-changed=companion-lite/"); let companion_out = std::path::Path::new(&out_dir).join("companion"); diff --git a/kittybox-rs/javascript/jslicense.html b/kittybox-rs/javascript/jslicense.html deleted file mode 100644 index 90c681c..0000000 --- a/kittybox-rs/javascript/jslicense.html +++ /dev/null @@ -1,31 +0,0 @@ - - - - JavaScript licensing information for Kittybox - - -

All JavaScript included with Kittybox is licensed as free software, most of it under AGPL-3.0.

- - - - - - - - - - - - - - - - - - - - - -
onboarding.jsAGPL-3.0onboarding.ts (Kittybox source code)
indieauth.jsAGPL-3.0indieauth.ts (Kittybox source code)
lib.jsAGPL-3.0lib.ts (Kittybox source code)
indieauth.jsAGPL-3.0indieauth.ts (Kittybox source code)
- - diff --git a/kittybox-rs/javascript/src/indieauth.ts b/kittybox-rs/javascript/src/indieauth.ts deleted file mode 100644 index 01732b7..0000000 --- a/kittybox-rs/javascript/src/indieauth.ts +++ /dev/null @@ -1,150 +0,0 @@ -import { unreachable } from "./lib.js"; - -const WEBAUTHN_TIMEOUT = 60 * 1000; - -interface KittyboxWebauthnPreRegistrationData { - challenge: string, - rp: PublicKeyCredentialRpEntity, - user: { - cred_id: string, - name: string, - displayName: string - } -} - -async function webauthn_create_credential() { - const response = await fetch("/.kittybox/webauthn/pre_register"); - const { challenge, rp, user }: KittyboxWebauthnPreRegistrationData = await response.json(); - - return await navigator.credentials.create({ - publicKey: { - challenge: Uint8Array.from(challenge, (c) => c.charCodeAt(0)), - rp: rp, - user: { - id: Uint8Array.from(user.cred_id, (c) => c.charCodeAt(0)), - name: user.name, - displayName: user.displayName - }, - pubKeyCredParams: [{alg: -7, type: "public-key"}], - authenticatorSelection: {}, - timeout: WEBAUTHN_TIMEOUT, - attestation: "none" - } - }); -} - -interface KittyboxWebauthnCredential { - id: string, - type: "public-key" -} - -interface KittyboxWebauthnPreAuthenticationData { - challenge: string, - credentials: KittyboxWebauthnCredential[] -} - -async function webauthn_authenticate() { - const response = await fetch("/.kittybox/webauthn/pre_auth"); - const { challenge, credentials } = await response.json() as unknown as KittyboxWebauthnPreAuthenticationData; - - try { - return await navigator.credentials.get({ - publicKey: { - challenge: Uint8Array.from(challenge, (c) => c.charCodeAt(0)), - allowCredentials: credentials.map(cred => ({ - id: Uint8Array.from(cred.id, c => c.charCodeAt(0)), - type: cred.type - })), - timeout: WEBAUTHN_TIMEOUT - } - }) - } catch (e) { - console.error("WebAuthn authentication failed:", e); - alert("Using your authenticator failed. (Check the DevTools for details)"); - throw e; - } -} - -export async function submit_handler(e: SubmitEvent) { - e.preventDefault(); - if (e.target != null && e.target instanceof HTMLFormElement) { - const form = e.target as HTMLFormElement; - - let scopes: Array; - let scope_elem = form.elements.namedItem("scope"); - if (scope_elem == null) { - scopes = [] - } else if (scope_elem instanceof Element) { - scopes = ([scope_elem] as Array) - .filter((e: HTMLInputElement) => e.checked) - .map((e: HTMLInputElement) => e.value); - } else if (scope_elem instanceof RadioNodeList) { - scopes = (Array.from(scope_elem) as Array) - .filter((e: HTMLInputElement) => e.checked) - .map((e: HTMLInputElement) => e.value); - } else { - unreachable("HTMLFormControlsCollection returned something that's not null, Element or RadioNodeList") - } - - const authorization_request = { - response_type: (form.elements.namedItem("response_type") as HTMLInputElement).value, - client_id: (form.elements.namedItem("client_id") as HTMLInputElement).value, - redirect_uri: (form.elements.namedItem("redirect_uri") as HTMLInputElement).value, - state: (form.elements.namedItem("state") as HTMLInputElement).value, - code_challenge: (form.elements.namedItem("code_challenge") as HTMLInputElement).value, - code_challenge_method: (form.elements.namedItem("code_challenge_method") as HTMLInputElement).value, - // I would love to leave that as a list, but such is the form of - // IndieAuth. application/x-www-form-urlencoded doesn't have - // lists, so scopes are space-separated instead. It is annoying. - scope: scopes.length > 0 ? scopes.join(" ") : undefined, - }; - - let credential = null; - switch ((form.elements.namedItem("auth_method") as HTMLInputElement).value) { - case "password": - credential = (form.elements.namedItem("user_password") as HTMLInputElement).value; - if (credential.length == 0) { - alert("Please enter a password.") - return - } - break; - case "webauthn": - // credential = await webauthn_authenticate(); - alert("WebAuthn isn't implemented yet!") - return - break - default: - alert("Please choose an authentication method.") - return - } - - console.log("Authorization request:", authorization_request); - console.log("Authentication method:", credential); - - const body = JSON.stringify({ - request: authorization_request, - authorization_method: credential - }); - console.log(body); - - const response = await fetch(form.action, { - method: form.method, - body: body, - headers: { - "Content-Type": "application/json" - } - }); - - if (response.ok) { - let location = response.headers.get("Location"); - if (location != null) { - window.location.href = location - } else { - throw "Error: didn't return a location" - } - } - } else { - return - } - -} diff --git a/kittybox-rs/javascript/src/lib.ts b/kittybox-rs/javascript/src/lib.ts deleted file mode 100644 index 38ba65b..0000000 --- a/kittybox-rs/javascript/src/lib.ts +++ /dev/null @@ -1,3 +0,0 @@ -export function unreachable(msg: string): never { - throw new Error(msg); -} diff --git a/kittybox-rs/javascript/src/onboarding.ts b/kittybox-rs/javascript/src/onboarding.ts deleted file mode 100644 index 0b455eb..0000000 --- a/kittybox-rs/javascript/src/onboarding.ts +++ /dev/null @@ -1,120 +0,0 @@ -const firstOnboardingCard = "intro"; - -function switchOnboardingCard(card: string) { - (Array.from(document.querySelectorAll("form.onboarding > fieldset")) as HTMLElement[]) - .map((node: HTMLElement) => { - if (node.id == card) { - node.style.display = "block"; - } else { - node.style.display = "none"; - } - }); - - (Array.from(document.querySelectorAll("form.onboarding > ul#progressbar > li")) as HTMLElement[]) - .map(node => { - if (node.id == card) { - node.classList.add("active") - } else { - node.classList.remove("active") - } - }); -}; - -interface Window { - kittybox_onboarding: { - switchOnboardingCard: (card: string) => void - } -} - -window.kittybox_onboarding = { - switchOnboardingCard -}; - -(document.querySelector("form.onboarding > ul#progressbar") as HTMLElement).style.display = ""; -switchOnboardingCard(firstOnboardingCard); - -function switchCardOnClick(event: MouseEvent) { - if (event.target instanceof HTMLElement) { - if (event.target.dataset.card !== undefined) { - switchOnboardingCard(event.target.dataset.card) - } - } -} - -function multiInputAddMore(event: (MouseEvent | { target: HTMLElement })) { - if (event.target instanceof HTMLElement) { - let parent = event.target.parentElement; - if (parent !== null) { - let template = (parent.querySelector("template") as HTMLTemplateElement).content.cloneNode(true); - parent.prepend(template); - } - } -} - -(Array.from( - document.querySelectorAll( - "form.onboarding > fieldset button.switch_card" - ) -) as HTMLButtonElement[]) - .map(button => { - button.addEventListener("click", switchCardOnClick) - }); - -(Array.from( - document.querySelectorAll( - "form.onboarding > fieldset div.multi_input > button.add_more" - ) -) as HTMLButtonElement[]) - .map(button => { - button.addEventListener("click", multiInputAddMore) - multiInputAddMore({ target: button }); - }); - -const form = document.querySelector("form.onboarding") as HTMLFormElement; -console.log(form); -form.onsubmit = async (event: SubmitEvent) => { - console.log(event); - event.preventDefault(); - const form = event.target as HTMLFormElement; - const json = { - user: { - type: ["h-card"], - properties: { - name: [(form.querySelector("#hcard_name") as HTMLInputElement).value], - pronoun: (Array.from( - form.querySelectorAll("#hcard_pronouns") - ) as HTMLInputElement[]) - .map(input => input.value).filter(i => i != ""), - url: (Array.from(form.querySelectorAll("#hcard_url")) as HTMLInputElement[]) - .map(input => input.value).filter(i => i != ""), - note: [(form.querySelector("#hcard_note") as HTMLInputElement).value] - } - }, - first_post: { - type: ["h-entry"], - properties: { - content: [(form.querySelector("#first_post_content") as HTMLTextAreaElement).value] - } - }, - blog_name: (form.querySelector("#blog_name") as HTMLInputElement).value, - feeds: (Array.from( - form.querySelectorAll(".multi_input#custom_feeds > fieldset.feed") - ) as HTMLElement[]) - .map(form => { - return { - name: (form.querySelector("#feed_name") as HTMLInputElement).value, - slug: (form.querySelector("#feed_slug") as HTMLInputElement).value - } - }).filter(feed => feed.name == "" || feed.slug == "") - }; - - await fetch("/.kittybox/onboarding", { - method: "POST", - body: JSON.stringify(json), - headers: { "Content-Type": "application/json" } - }).then(response => { - if (response.status == 201) { - window.location.href = window.location.href; - } - }) -} diff --git a/kittybox-rs/javascript/tsconfig.json b/kittybox-rs/javascript/tsconfig.json deleted file mode 100644 index 18b94c7..0000000 --- a/kittybox-rs/javascript/tsconfig.json +++ /dev/null @@ -1,104 +0,0 @@ -{ - "compilerOptions": { - /* Visit https://aka.ms/tsconfig to read more about this file */ - - /* Projects */ - // "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */ - // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */ - // "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */ - // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */ - // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */ - // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */ - - /* Language and Environment */ - "target": "es2022", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ - // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ - // "jsx": "preserve", /* Specify what JSX code is generated. */ - // "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */ - // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ - // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */ - // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */ - // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */ - // "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */ - // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */ - // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */ - // "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */ - - /* Modules */ - "module": "es2022", /* Specify what module code is generated. */ - // "rootDir": "./", /* Specify the root folder within your source files. */ - // "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */ - // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ - // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */ - // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */ - // "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */ - // "types": [], /* Specify type package names to be included without being referenced in a source file. */ - // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ - // "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */ - // "resolveJsonModule": true, /* Enable importing .json files. */ - // "noResolve": true, /* Disallow 'import's, 'require's or ''s from expanding the number of files TypeScript should add to a project. */ - - /* JavaScript Support */ - // "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */ - // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */ - // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */ - - /* Emit */ - // "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */ - // "declarationMap": true, /* Create sourcemaps for d.ts files. */ - // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */ - // "sourceMap": true, /* Create source map files for emitted JavaScript files. */ - // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */ - "outDir": "./dist", /* Specify an output folder for all emitted files. */ - // "removeComments": true, /* Disable emitting comments. */ - // "noEmit": true, /* Disable emitting files from a compilation. */ - // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */ - // "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types. */ - // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */ - // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */ - // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ - // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */ - // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */ - // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */ - // "newLine": "crlf", /* Set the newline character for emitting files. */ - // "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */ - // "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */ - // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */ - // "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */ - // "declarationDir": "./", /* Specify the output directory for generated declaration files. */ - // "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */ - - /* Interop Constraints */ - // "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */ - // "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */ - "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */ - // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */ - "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */ - - /* Type Checking */ - "strict": true, /* Enable all strict type-checking options. */ - // "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */ - // "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */ - // "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */ - // "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */ - // "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */ - // "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */ - // "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */ - // "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */ - // "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */ - // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */ - // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */ - // "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */ - // "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */ - // "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */ - // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */ - // "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */ - // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */ - // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */ - - /* Completeness */ - // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ - "skipLibCheck": true /* Skip type checking all .d.ts files. */ - }, - "include": ["src/**/*"] -} diff --git a/kittybox-rs/src/frontend/login.rs b/kittybox-rs/src/frontend/login.rs index 9665ce7..c693899 100644 --- a/kittybox-rs/src/frontend/login.rs +++ b/kittybox-rs/src/frontend/login.rs @@ -9,7 +9,7 @@ use std::str::FromStr; use crate::frontend::templates::Template; use crate::frontend::{FrontendError, IndiewebEndpoints}; use crate::{database::Storage, ApplicationState}; -use kittybox_templates::LoginPage; +use kittybox_frontend_renderer::LoginPage; pub async fn form(req: Request>) -> Result { let owner = req.url().origin().ascii_serialization() + "/"; diff --git a/kittybox-rs/src/frontend/mod.rs b/kittybox-rs/src/frontend/mod.rs index 58de39d..f0f4e5a 100644 --- a/kittybox-rs/src/frontend/mod.rs +++ b/kittybox-rs/src/frontend/mod.rs @@ -12,7 +12,12 @@ use tracing::{debug, error}; //pub mod login; pub mod onboarding; -use kittybox_templates::{Entry, ErrorPage, Feed, MainPage, Template, VCard, POSTS_PER_PAGE}; +use kittybox_frontend_renderer::{ + Entry, Feed, VCard, + ErrorPage, Template, MainPage, + POSTS_PER_PAGE +}; +pub use kittybox_frontend_renderer::assets::statics; #[derive(Debug, Deserialize)] pub struct QueryParams { @@ -266,43 +271,3 @@ pub async fn catchall( } } } - -const STYLE_CSS: &[u8] = include_bytes!("./style.css"); -// XXX const path handling is ugly, and concat!() doesn't take -// constants, only literals... how annoying! -// -// This might break compiling on inferior operating systems that use -// backslashes as their path separator -const ONBOARDING_JS: &[u8] = include_bytes!(concat!( - env!("OUT_DIR"), "/", "kittybox_js", "/", "onboarding.js" -)); -const ONBOARDING_CSS: &[u8] = include_bytes!("./onboarding.css"); -const INDIEAUTH_JS: &[u8] = include_bytes!(concat!( - env!("OUT_DIR"), "/", "kittybox_js", "/", "indieauth.js" -)); -const LIB_JS: &[u8] = include_bytes!(concat!( - env!("OUT_DIR"), "/", "kittybox_js", "/", "lib.js" -)); -const JSLABELS_HTML: &[u8] = include_bytes!("../../javascript/jslicense.html"); -const MIME_JS: &str = "application/javascript"; -const MIME_CSS: &str = "text/css"; -const MIME_PLAIN: &str = "text/plain"; -const MIME_HTML: &str = "text/html; charset=utf-8"; - -pub async fn statics(Path(name): Path) -> impl IntoResponse { - use axum::http::header::CONTENT_TYPE; - - match name.as_str() { - "style.css" => (StatusCode::OK, [(CONTENT_TYPE, MIME_CSS)], STYLE_CSS), - "onboarding.js" => (StatusCode::OK, [(CONTENT_TYPE, MIME_JS)], ONBOARDING_JS), - "onboarding.css" => (StatusCode::OK, [(CONTENT_TYPE, MIME_CSS)], ONBOARDING_CSS), - "indieauth.js" => (StatusCode::OK, [(CONTENT_TYPE, MIME_JS)], INDIEAUTH_JS), - "lib.js" => (StatusCode::OK, [(CONTENT_TYPE, MIME_JS)], LIB_JS), - "jslicense.html" => (StatusCode::OK, [(CONTENT_TYPE, MIME_HTML)], JSLABELS_HTML), - _ => ( - StatusCode::NOT_FOUND, - [(CONTENT_TYPE, MIME_PLAIN)], - "not found".as_bytes(), - ), - } -} diff --git a/kittybox-rs/src/frontend/onboarding.css b/kittybox-rs/src/frontend/onboarding.css deleted file mode 100644 index 6f191b9..0000000 --- a/kittybox-rs/src/frontend/onboarding.css +++ /dev/null @@ -1,33 +0,0 @@ -form.onboarding > ul#progressbar > li.active { - font-weight: bold; -} -form.onboarding > ul#progressbar { - display: flex; list-style: none; justify-content: space-around; -} - -form.onboarding > fieldset > div.switch_card_buttons { - display: flex; - justify-content: space-between; - width: 100%; -} -form.onboarding > fieldset > div.switch_card_buttons button:last-child { - margin-left: auto; -} -.form_group, .multi_input { - display: flex; - flex-direction: column; -} -.multi_input { - align-items: start; -} -.multi_input > input { - width: 100%; - align-self: stretch; -} -form.onboarding > fieldset > .form_group + * { - margin-top: .75rem; -} -form.onboarding textarea { - width: 100%; - resize: vertical; -} diff --git a/kittybox-rs/src/frontend/onboarding.rs b/kittybox-rs/src/frontend/onboarding.rs index b460e6a..b4bae8e 100644 --- a/kittybox-rs/src/frontend/onboarding.rs +++ b/kittybox-rs/src/frontend/onboarding.rs @@ -5,7 +5,7 @@ use axum::{ response::{Html, IntoResponse}, Json, }; -use kittybox_templates::{ErrorPage, OnboardingPage, Template}; +use kittybox_frontend_renderer::{ErrorPage, OnboardingPage, Template}; use serde::Deserialize; use tracing::{debug, error}; diff --git a/kittybox-rs/src/frontend/style.css b/kittybox-rs/src/frontend/style.css deleted file mode 100644 index a8ef6e4..0000000 --- a/kittybox-rs/src/frontend/style.css +++ /dev/null @@ -1,201 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500&family=Lato&display=swap'); - -:root { - font-family: var(--font-normal); - --font-normal: 'Lato', sans-serif; - --font-accent: 'Caveat', cursive; - --type-scale: 1.250; - - --primary-accent: purple; - --secondary-accent: gold; -} -* { - box-sizing: border-box; -} -body { - margin: 0; -} -h1, h2, h3, h4, h5, h6 { - font-family: var(--font-accent); -} -.titanic { - font-size: 3.815rem -} -h1, .xxxlarge { - margin-top: 0; - margin-bottom: 0; - font-size: 3.052rem; -} -h2, .xxlarge {font-size: 2.441rem;} -h3, .xlarge {font-size: 1.953rem;} -h4, .larger {font-size: 1.563rem;} -h5, .large {font-size: 1.25rem;} -h6, .normal {font-size: 1rem;} -small, .small { font-size: 0.8em; } - -nav#headerbar { - background: var(--primary-accent); - color: whitesmoke; - border-bottom: .75rem solid var(--secondary-accent); - padding: .3rem; - vertical-align: center; - position: sticky; - top: 0; -} -nav#headerbar a#homepage { - font-weight: bolder; - font-family: var(--font-accent); - font-size: 2rem; -} -nav#headerbar > ul { - display: flex; - padding: inherit; - margin: inherit; - gap: .75em; -} -nav#headerbar > ul > li { - display: inline-flex; - flex-direction: column; - marker: none; - padding: inherit; - margin: inherit; - justify-content: center; -} -nav#headerbar > ul > li.shiftright { - margin-left: auto; -} -nav#headerbar a { - color: white; -} -body > main { - max-width: 60rem; - margin: auto; - padding: .75rem; -} -body > footer { - text-align: center; -} -.sidebyside { - display: flex; - flex-wrap: wrap; - gap: .75rem; - margin-top: .75rem; - margin-bottom: .75rem; -} -.sidebyside > * { - width: 100%; - margin-top: 0; - margin-bottom: 0; - border: .125rem solid black; - border-radius: .75rem; - padding: .75rem; - margin-top: 0 !important; - margin-bottom: 0 !important; - flex-basis: 28rem; - flex-grow: 1; -} -article > * + * { - margin-top: .75rem; -} -article > header { - padding-bottom: .75rem; - border-bottom: 1px solid gray; -} -article > footer { - border-top: 1px solid gray; -} -article.h-entry, article.h-feed, article.h-card, article.h-event { - border: 2px solid black; - border-radius: .75rem; - padding: .75rem; - margin-top: .75rem; - margin-bottom: .75rem; -} -.webinteractions > ul.counters { - display: inline-flex; - padding: inherit; - margin: inherit; - gap: .75em; - flex-wrap: wrap; -} -.webinteractions > ul.counters > li > .icon { - font-size: 1.5em; -} -.webinteractions > ul.counters > li { - display: inline-flex; - align-items: center; - gap: .5em; -} -article.h-entry > header.metadata ul { - padding-inline-start: unset; - margin: unset; -} -article.h-entry > header.metadata ul.categories { - flex-wrap: wrap; - display: inline-flex; - list-style-type: none; -} -article.h-entry > header.metadata ul.categories li { - display: inline; - margin-inline-start: unset; -} -article.h-entry > header.metadata ul li { - margin-inline-start: 2.5em; -} -article.h-entry .e-content pre { - border: 1px solid gray; - border-radius: 0.5em; - overflow-y: auto; - padding: 0.5em; -} -article.h-entry img.u-photo { - max-width: 80%; - max-height: 90vh; - display: block; - margin: auto; -} -article.h-entry img.u-photo + * { - margin-top: .75rem; -} -article.h-entry > header.metadata span + span::before { - content: " | " -} -li.p-category::before { - content: " #"; -} - -article.h-entry ul.categories { - gap: .2em; -} -article.h-card img.u-photo { - border-radius: 100%; - float: left; - height: 8rem; - border: 1px solid gray; - margin-right: .75em; - object-fit: cover; - aspect-ratio: 1; -} - -.mini-h-card img, #indieauth_page img { - height: 2em; - display: inline-block; - border: 2px solid gray; - border-radius: 100%; - margin-right: 0.5rem; -} - -.mini-h-card * { - vertical-align: middle; -} - -.mini-h-card a { - text-decoration: none; -} - -#indieauth_page > #introduction { - border: .125rem solid gray; - border-radius: .75rem; - margin: 1.25rem; - padding: .75rem; -} diff --git a/kittybox-rs/src/indieauth/mod.rs b/kittybox-rs/src/indieauth/mod.rs index 6dc9ec6..aaa3301 100644 --- a/kittybox-rs/src/indieauth/mod.rs +++ b/kittybox-rs/src/indieauth/mod.rs @@ -150,12 +150,12 @@ async fn authorization_endpoint_get( let me = format!("https://{}/", host).parse().unwrap(); // TODO fetch h-app from client_id // TODO verify redirect_uri registration - Html(kittybox_templates::Template { + Html(kittybox_frontend_renderer::Template { title: "Confirm sign-in via IndieAuth", blog_name: "Kittybox", feeds: vec![], user: None, - content: kittybox_templates::AuthorizationRequestPage { + content: kittybox_frontend_renderer::AuthorizationRequestPage { request, credentials: auth.list_user_credential_types(&me).await.unwrap(), user: db.get_post(me.as_str()).await.unwrap().unwrap(), diff --git a/kittybox-rs/templates/Cargo.toml b/kittybox-rs/templates/Cargo.toml index a32a3a2..ffdfc25 100644 --- a/kittybox-rs/templates/Cargo.toml +++ b/kittybox-rs/templates/Cargo.toml @@ -1,5 +1,5 @@ [package] -name = "kittybox-templates" +name = "kittybox-frontend-renderer" version = "0.1.0" edition = "2021" @@ -12,10 +12,12 @@ rand = "^0.8.5" version="^0.2.0" [dependencies] -ellipse = "^0.2.0" # Truncate and ellipsize strings in a human-friendly way -http = "^0.2.7" # Hyper's strong HTTP types -markup = "^0.12.0" # HTML templating engine -serde_json = "^1.0.64" # A JSON serialization file format +ellipse = "^0.2.0" +http = "^0.2.7" +markup = "^0.12.0" +serde_json = "^1.0.64" +include_dir = "^0.7.2" +axum = "^0.5.16" [dependencies.chrono] version = "^0.4.19" features = ["serde"] diff --git a/kittybox-rs/templates/assets/jslicense.html b/kittybox-rs/templates/assets/jslicense.html new file mode 100644 index 0000000..90c681c --- /dev/null +++ b/kittybox-rs/templates/assets/jslicense.html @@ -0,0 +1,31 @@ + + + + JavaScript licensing information for Kittybox + + +

All JavaScript included with Kittybox is licensed as free software, most of it under AGPL-3.0.

+ + + + + + + + + + + + + + + + + + + + + +
onboarding.jsAGPL-3.0onboarding.ts (Kittybox source code)
indieauth.jsAGPL-3.0indieauth.ts (Kittybox source code)
lib.jsAGPL-3.0lib.ts (Kittybox source code)
indieauth.jsAGPL-3.0indieauth.ts (Kittybox source code)
+ + diff --git a/kittybox-rs/templates/assets/onboarding.css b/kittybox-rs/templates/assets/onboarding.css new file mode 100644 index 0000000..6f191b9 --- /dev/null +++ b/kittybox-rs/templates/assets/onboarding.css @@ -0,0 +1,33 @@ +form.onboarding > ul#progressbar > li.active { + font-weight: bold; +} +form.onboarding > ul#progressbar { + display: flex; list-style: none; justify-content: space-around; +} + +form.onboarding > fieldset > div.switch_card_buttons { + display: flex; + justify-content: space-between; + width: 100%; +} +form.onboarding > fieldset > div.switch_card_buttons button:last-child { + margin-left: auto; +} +.form_group, .multi_input { + display: flex; + flex-direction: column; +} +.multi_input { + align-items: start; +} +.multi_input > input { + width: 100%; + align-self: stretch; +} +form.onboarding > fieldset > .form_group + * { + margin-top: .75rem; +} +form.onboarding textarea { + width: 100%; + resize: vertical; +} diff --git a/kittybox-rs/templates/assets/style.css b/kittybox-rs/templates/assets/style.css new file mode 100644 index 0000000..a8ef6e4 --- /dev/null +++ b/kittybox-rs/templates/assets/style.css @@ -0,0 +1,201 @@ +@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500&family=Lato&display=swap'); + +:root { + font-family: var(--font-normal); + --font-normal: 'Lato', sans-serif; + --font-accent: 'Caveat', cursive; + --type-scale: 1.250; + + --primary-accent: purple; + --secondary-accent: gold; +} +* { + box-sizing: border-box; +} +body { + margin: 0; +} +h1, h2, h3, h4, h5, h6 { + font-family: var(--font-accent); +} +.titanic { + font-size: 3.815rem +} +h1, .xxxlarge { + margin-top: 0; + margin-bottom: 0; + font-size: 3.052rem; +} +h2, .xxlarge {font-size: 2.441rem;} +h3, .xlarge {font-size: 1.953rem;} +h4, .larger {font-size: 1.563rem;} +h5, .large {font-size: 1.25rem;} +h6, .normal {font-size: 1rem;} +small, .small { font-size: 0.8em; } + +nav#headerbar { + background: var(--primary-accent); + color: whitesmoke; + border-bottom: .75rem solid var(--secondary-accent); + padding: .3rem; + vertical-align: center; + position: sticky; + top: 0; +} +nav#headerbar a#homepage { + font-weight: bolder; + font-family: var(--font-accent); + font-size: 2rem; +} +nav#headerbar > ul { + display: flex; + padding: inherit; + margin: inherit; + gap: .75em; +} +nav#headerbar > ul > li { + display: inline-flex; + flex-direction: column; + marker: none; + padding: inherit; + margin: inherit; + justify-content: center; +} +nav#headerbar > ul > li.shiftright { + margin-left: auto; +} +nav#headerbar a { + color: white; +} +body > main { + max-width: 60rem; + margin: auto; + padding: .75rem; +} +body > footer { + text-align: center; +} +.sidebyside { + display: flex; + flex-wrap: wrap; + gap: .75rem; + margin-top: .75rem; + margin-bottom: .75rem; +} +.sidebyside > * { + width: 100%; + margin-top: 0; + margin-bottom: 0; + border: .125rem solid black; + border-radius: .75rem; + padding: .75rem; + margin-top: 0 !important; + margin-bottom: 0 !important; + flex-basis: 28rem; + flex-grow: 1; +} +article > * + * { + margin-top: .75rem; +} +article > header { + padding-bottom: .75rem; + border-bottom: 1px solid gray; +} +article > footer { + border-top: 1px solid gray; +} +article.h-entry, article.h-feed, article.h-card, article.h-event { + border: 2px solid black; + border-radius: .75rem; + padding: .75rem; + margin-top: .75rem; + margin-bottom: .75rem; +} +.webinteractions > ul.counters { + display: inline-flex; + padding: inherit; + margin: inherit; + gap: .75em; + flex-wrap: wrap; +} +.webinteractions > ul.counters > li > .icon { + font-size: 1.5em; +} +.webinteractions > ul.counters > li { + display: inline-flex; + align-items: center; + gap: .5em; +} +article.h-entry > header.metadata ul { + padding-inline-start: unset; + margin: unset; +} +article.h-entry > header.metadata ul.categories { + flex-wrap: wrap; + display: inline-flex; + list-style-type: none; +} +article.h-entry > header.metadata ul.categories li { + display: inline; + margin-inline-start: unset; +} +article.h-entry > header.metadata ul li { + margin-inline-start: 2.5em; +} +article.h-entry .e-content pre { + border: 1px solid gray; + border-radius: 0.5em; + overflow-y: auto; + padding: 0.5em; +} +article.h-entry img.u-photo { + max-width: 80%; + max-height: 90vh; + display: block; + margin: auto; +} +article.h-entry img.u-photo + * { + margin-top: .75rem; +} +article.h-entry > header.metadata span + span::before { + content: " | " +} +li.p-category::before { + content: " #"; +} + +article.h-entry ul.categories { + gap: .2em; +} +article.h-card img.u-photo { + border-radius: 100%; + float: left; + height: 8rem; + border: 1px solid gray; + margin-right: .75em; + object-fit: cover; + aspect-ratio: 1; +} + +.mini-h-card img, #indieauth_page img { + height: 2em; + display: inline-block; + border: 2px solid gray; + border-radius: 100%; + margin-right: 0.5rem; +} + +.mini-h-card * { + vertical-align: middle; +} + +.mini-h-card a { + text-decoration: none; +} + +#indieauth_page > #introduction { + border: .125rem solid gray; + border-radius: .75rem; + margin: 1.25rem; + padding: .75rem; +} diff --git a/kittybox-rs/templates/build.rs b/kittybox-rs/templates/build.rs new file mode 100644 index 0000000..1140060 --- /dev/null +++ b/kittybox-rs/templates/build.rs @@ -0,0 +1,26 @@ +fn main() { + use std::env; + let out_dir = std::path::PathBuf::from(env::var("OUT_DIR").unwrap()); + println!("cargo:rerun-if-changed=assets/"); + let assets = std::fs::read_dir("assets").unwrap(); + for file in assets.map(|a| a.unwrap()) { + std::fs::copy( + file.path(), + out_dir.join(file.file_name()) + ) + .unwrap(); + } + println!("cargo::rerun-if-changed=javascript/"); + if let Ok(exit) = std::process::Command::new("tsc") + .arg("--outDir") + .arg(&out_dir) + .current_dir("javascript") + .spawn() + .unwrap() + .wait() + { + if !exit.success() { + std::process::exit(exit.code().unwrap_or(1)) + } + } +} diff --git a/kittybox-rs/templates/javascript/dist/indieauth.js b/kittybox-rs/templates/javascript/dist/indieauth.js new file mode 100644 index 0000000..297b4b5 --- /dev/null +++ b/kittybox-rs/templates/javascript/dist/indieauth.js @@ -0,0 +1,118 @@ +"use strict"; +const WEBAUTHN_TIMEOUT = 60 * 1000; +async function webauthn_create_credential() { + const response = await fetch("/.kittybox/webauthn/pre_register"); + const { challenge, rp, user } = await response.json(); + return await navigator.credentials.create({ + publicKey: { + challenge: Uint8Array.from(challenge, (c) => c.charCodeAt(0)), + rp: rp, + user: { + id: Uint8Array.from(user.cred_id, (c) => c.charCodeAt(0)), + name: user.name, + displayName: user.displayName + }, + pubKeyCredParams: [{ alg: -7, type: "public-key" }], + authenticatorSelection: {}, + timeout: WEBAUTHN_TIMEOUT, + attestation: "none" + } + }); +} +async function webauthn_authenticate() { + const response = await fetch("/.kittybox/webauthn/pre_auth"); + const { challenge, credentials } = await response.json(); + try { + return await navigator.credentials.get({ + publicKey: { + challenge: Uint8Array.from(challenge, (c) => c.charCodeAt(0)), + allowCredentials: credentials.map(cred => ({ + id: Uint8Array.from(cred.id, c => c.charCodeAt(0)), + type: cred.type + })), + timeout: WEBAUTHN_TIMEOUT + } + }); + } + catch (e) { + console.error("WebAuthn authentication failed:", e); + alert("Using your authenticator failed. (Check the DevTools for details)"); + throw e; + } +} +async function submit_handler(e) { + e.preventDefault(); + if (e.target != null && e.target instanceof HTMLFormElement) { + const form = e.target; + let scopes; + if (form.elements.namedItem("scope") === undefined) { + scopes = []; + } + else if (form.elements.namedItem("scope") instanceof Node) { + scopes = [form.elements.namedItem("scope")] + .filter((e) => e.checked) + .map((e) => e.value); + } + else { + scopes = Array.from(form.elements.namedItem("scope")) + .filter((e) => e.checked) + .map((e) => e.value); + } + const authorization_request = { + response_type: form.elements.namedItem("response_type").value, + client_id: form.elements.namedItem("client_id").value, + redirect_uri: form.elements.namedItem("redirect_uri").value, + state: form.elements.namedItem("state").value, + code_challenge: form.elements.namedItem("code_challenge").value, + code_challenge_method: form.elements.namedItem("code_challenge_method").value, + // I would love to leave that as a list, but such is the form of + // IndieAuth. application/x-www-form-urlencoded doesn't have + // lists, so scopes are space-separated instead. It is annoying. + scope: scopes.length > 0 ? scopes.join(" ") : undefined, + }; + let credential = null; + switch (form.elements.namedItem("auth_method").value) { + case "password": + credential = form.elements.namedItem("user_password").value; + if (credential.length == 0) { + alert("Please enter a password."); + return; + } + break; + case "webauthn": + // credential = await webauthn_authenticate(); + alert("WebAuthn isn't implemented yet!"); + return; + break; + default: + alert("Please choose an authentication method."); + return; + } + console.log("Authorization request:", authorization_request); + console.log("Authentication method:", credential); + const body = JSON.stringify({ + request: authorization_request, + authorization_method: credential + }); + console.log(body); + const response = await fetch(form.action, { + method: form.method, + body: body, + headers: { + "Content-Type": "application/json" + } + }); + if (response.ok) { + let location = response.headers.get("Location"); + if (location != null) { + window.location.href = location; + } + else { + throw "Error: didn't return a location"; + } + } + } + else { + return; + } +} diff --git a/kittybox-rs/templates/javascript/dist/webauthn/register.js b/kittybox-rs/templates/javascript/dist/webauthn/register.js new file mode 100644 index 0000000..3918c74 --- /dev/null +++ b/kittybox-rs/templates/javascript/dist/webauthn/register.js @@ -0,0 +1 @@ +"use strict"; diff --git a/kittybox-rs/templates/javascript/src/indieauth.ts b/kittybox-rs/templates/javascript/src/indieauth.ts new file mode 100644 index 0000000..01732b7 --- /dev/null +++ b/kittybox-rs/templates/javascript/src/indieauth.ts @@ -0,0 +1,150 @@ +import { unreachable } from "./lib.js"; + +const WEBAUTHN_TIMEOUT = 60 * 1000; + +interface KittyboxWebauthnPreRegistrationData { + challenge: string, + rp: PublicKeyCredentialRpEntity, + user: { + cred_id: string, + name: string, + displayName: string + } +} + +async function webauthn_create_credential() { + const response = await fetch("/.kittybox/webauthn/pre_register"); + const { challenge, rp, user }: KittyboxWebauthnPreRegistrationData = await response.json(); + + return await navigator.credentials.create({ + publicKey: { + challenge: Uint8Array.from(challenge, (c) => c.charCodeAt(0)), + rp: rp, + user: { + id: Uint8Array.from(user.cred_id, (c) => c.charCodeAt(0)), + name: user.name, + displayName: user.displayName + }, + pubKeyCredParams: [{alg: -7, type: "public-key"}], + authenticatorSelection: {}, + timeout: WEBAUTHN_TIMEOUT, + attestation: "none" + } + }); +} + +interface KittyboxWebauthnCredential { + id: string, + type: "public-key" +} + +interface KittyboxWebauthnPreAuthenticationData { + challenge: string, + credentials: KittyboxWebauthnCredential[] +} + +async function webauthn_authenticate() { + const response = await fetch("/.kittybox/webauthn/pre_auth"); + const { challenge, credentials } = await response.json() as unknown as KittyboxWebauthnPreAuthenticationData; + + try { + return await navigator.credentials.get({ + publicKey: { + challenge: Uint8Array.from(challenge, (c) => c.charCodeAt(0)), + allowCredentials: credentials.map(cred => ({ + id: Uint8Array.from(cred.id, c => c.charCodeAt(0)), + type: cred.type + })), + timeout: WEBAUTHN_TIMEOUT + } + }) + } catch (e) { + console.error("WebAuthn authentication failed:", e); + alert("Using your authenticator failed. (Check the DevTools for details)"); + throw e; + } +} + +export async function submit_handler(e: SubmitEvent) { + e.preventDefault(); + if (e.target != null && e.target instanceof HTMLFormElement) { + const form = e.target as HTMLFormElement; + + let scopes: Array; + let scope_elem = form.elements.namedItem("scope"); + if (scope_elem == null) { + scopes = [] + } else if (scope_elem instanceof Element) { + scopes = ([scope_elem] as Array) + .filter((e: HTMLInputElement) => e.checked) + .map((e: HTMLInputElement) => e.value); + } else if (scope_elem instanceof RadioNodeList) { + scopes = (Array.from(scope_elem) as Array) + .filter((e: HTMLInputElement) => e.checked) + .map((e: HTMLInputElement) => e.value); + } else { + unreachable("HTMLFormControlsCollection returned something that's not null, Element or RadioNodeList") + } + + const authorization_request = { + response_type: (form.elements.namedItem("response_type") as HTMLInputElement).value, + client_id: (form.elements.namedItem("client_id") as HTMLInputElement).value, + redirect_uri: (form.elements.namedItem("redirect_uri") as HTMLInputElement).value, + state: (form.elements.namedItem("state") as HTMLInputElement).value, + code_challenge: (form.elements.namedItem("code_challenge") as HTMLInputElement).value, + code_challenge_method: (form.elements.namedItem("code_challenge_method") as HTMLInputElement).value, + // I would love to leave that as a list, but such is the form of + // IndieAuth. application/x-www-form-urlencoded doesn't have + // lists, so scopes are space-separated instead. It is annoying. + scope: scopes.length > 0 ? scopes.join(" ") : undefined, + }; + + let credential = null; + switch ((form.elements.namedItem("auth_method") as HTMLInputElement).value) { + case "password": + credential = (form.elements.namedItem("user_password") as HTMLInputElement).value; + if (credential.length == 0) { + alert("Please enter a password.") + return + } + break; + case "webauthn": + // credential = await webauthn_authenticate(); + alert("WebAuthn isn't implemented yet!") + return + break + default: + alert("Please choose an authentication method.") + return + } + + console.log("Authorization request:", authorization_request); + console.log("Authentication method:", credential); + + const body = JSON.stringify({ + request: authorization_request, + authorization_method: credential + }); + console.log(body); + + const response = await fetch(form.action, { + method: form.method, + body: body, + headers: { + "Content-Type": "application/json" + } + }); + + if (response.ok) { + let location = response.headers.get("Location"); + if (location != null) { + window.location.href = location + } else { + throw "Error: didn't return a location" + } + } + } else { + return + } + +} diff --git a/kittybox-rs/templates/javascript/src/lib.ts b/kittybox-rs/templates/javascript/src/lib.ts new file mode 100644 index 0000000..38ba65b --- /dev/null +++ b/kittybox-rs/templates/javascript/src/lib.ts @@ -0,0 +1,3 @@ +export function unreachable(msg: string): never { + throw new Error(msg); +} diff --git a/kittybox-rs/templates/javascript/src/onboarding.ts b/kittybox-rs/templates/javascript/src/onboarding.ts new file mode 100644 index 0000000..0b455eb --- /dev/null +++ b/kittybox-rs/templates/javascript/src/onboarding.ts @@ -0,0 +1,120 @@ +const firstOnboardingCard = "intro"; + +function switchOnboardingCard(card: string) { + (Array.from(document.querySelectorAll("form.onboarding > fieldset")) as HTMLElement[]) + .map((node: HTMLElement) => { + if (node.id == card) { + node.style.display = "block"; + } else { + node.style.display = "none"; + } + }); + + (Array.from(document.querySelectorAll("form.onboarding > ul#progressbar > li")) as HTMLElement[]) + .map(node => { + if (node.id == card) { + node.classList.add("active") + } else { + node.classList.remove("active") + } + }); +}; + +interface Window { + kittybox_onboarding: { + switchOnboardingCard: (card: string) => void + } +} + +window.kittybox_onboarding = { + switchOnboardingCard +}; + +(document.querySelector("form.onboarding > ul#progressbar") as HTMLElement).style.display = ""; +switchOnboardingCard(firstOnboardingCard); + +function switchCardOnClick(event: MouseEvent) { + if (event.target instanceof HTMLElement) { + if (event.target.dataset.card !== undefined) { + switchOnboardingCard(event.target.dataset.card) + } + } +} + +function multiInputAddMore(event: (MouseEvent | { target: HTMLElement })) { + if (event.target instanceof HTMLElement) { + let parent = event.target.parentElement; + if (parent !== null) { + let template = (parent.querySelector("template") as HTMLTemplateElement).content.cloneNode(true); + parent.prepend(template); + } + } +} + +(Array.from( + document.querySelectorAll( + "form.onboarding > fieldset button.switch_card" + ) +) as HTMLButtonElement[]) + .map(button => { + button.addEventListener("click", switchCardOnClick) + }); + +(Array.from( + document.querySelectorAll( + "form.onboarding > fieldset div.multi_input > button.add_more" + ) +) as HTMLButtonElement[]) + .map(button => { + button.addEventListener("click", multiInputAddMore) + multiInputAddMore({ target: button }); + }); + +const form = document.querySelector("form.onboarding") as HTMLFormElement; +console.log(form); +form.onsubmit = async (event: SubmitEvent) => { + console.log(event); + event.preventDefault(); + const form = event.target as HTMLFormElement; + const json = { + user: { + type: ["h-card"], + properties: { + name: [(form.querySelector("#hcard_name") as HTMLInputElement).value], + pronoun: (Array.from( + form.querySelectorAll("#hcard_pronouns") + ) as HTMLInputElement[]) + .map(input => input.value).filter(i => i != ""), + url: (Array.from(form.querySelectorAll("#hcard_url")) as HTMLInputElement[]) + .map(input => input.value).filter(i => i != ""), + note: [(form.querySelector("#hcard_note") as HTMLInputElement).value] + } + }, + first_post: { + type: ["h-entry"], + properties: { + content: [(form.querySelector("#first_post_content") as HTMLTextAreaElement).value] + } + }, + blog_name: (form.querySelector("#blog_name") as HTMLInputElement).value, + feeds: (Array.from( + form.querySelectorAll(".multi_input#custom_feeds > fieldset.feed") + ) as HTMLElement[]) + .map(form => { + return { + name: (form.querySelector("#feed_name") as HTMLInputElement).value, + slug: (form.querySelector("#feed_slug") as HTMLInputElement).value + } + }).filter(feed => feed.name == "" || feed.slug == "") + }; + + await fetch("/.kittybox/onboarding", { + method: "POST", + body: JSON.stringify(json), + headers: { "Content-Type": "application/json" } + }).then(response => { + if (response.status == 201) { + window.location.href = window.location.href; + } + }) +} diff --git a/kittybox-rs/templates/javascript/src/webauthn/register.ts b/kittybox-rs/templates/javascript/src/webauthn/register.ts new file mode 100644 index 0000000..e69de29 diff --git a/kittybox-rs/templates/javascript/tsconfig.json b/kittybox-rs/templates/javascript/tsconfig.json new file mode 100644 index 0000000..18b94c7 --- /dev/null +++ b/kittybox-rs/templates/javascript/tsconfig.json @@ -0,0 +1,104 @@ +{ + "compilerOptions": { + /* Visit https://aka.ms/tsconfig to read more about this file */ + + /* Projects */ + // "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */ + // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */ + // "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */ + // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */ + // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */ + // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */ + + /* Language and Environment */ + "target": "es2022", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ + // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ + // "jsx": "preserve", /* Specify what JSX code is generated. */ + // "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */ + // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ + // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */ + // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */ + // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */ + // "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */ + // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */ + // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */ + // "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */ + + /* Modules */ + "module": "es2022", /* Specify what module code is generated. */ + // "rootDir": "./", /* Specify the root folder within your source files. */ + // "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */ + // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ + // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */ + // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */ + // "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */ + // "types": [], /* Specify type package names to be included without being referenced in a source file. */ + // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ + // "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */ + // "resolveJsonModule": true, /* Enable importing .json files. */ + // "noResolve": true, /* Disallow 'import's, 'require's or ''s from expanding the number of files TypeScript should add to a project. */ + + /* JavaScript Support */ + // "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */ + // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */ + // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */ + + /* Emit */ + // "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */ + // "declarationMap": true, /* Create sourcemaps for d.ts files. */ + // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */ + // "sourceMap": true, /* Create source map files for emitted JavaScript files. */ + // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */ + "outDir": "./dist", /* Specify an output folder for all emitted files. */ + // "removeComments": true, /* Disable emitting comments. */ + // "noEmit": true, /* Disable emitting files from a compilation. */ + // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */ + // "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types. */ + // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */ + // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */ + // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ + // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */ + // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */ + // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */ + // "newLine": "crlf", /* Set the newline character for emitting files. */ + // "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */ + // "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */ + // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */ + // "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */ + // "declarationDir": "./", /* Specify the output directory for generated declaration files. */ + // "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */ + + /* Interop Constraints */ + // "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */ + // "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */ + "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */ + // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */ + "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */ + + /* Type Checking */ + "strict": true, /* Enable all strict type-checking options. */ + // "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */ + // "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */ + // "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */ + // "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */ + // "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */ + // "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */ + // "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */ + // "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */ + // "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */ + // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */ + // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */ + // "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */ + // "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */ + // "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */ + // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */ + // "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */ + // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */ + // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */ + + /* Completeness */ + // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ + "skipLibCheck": true /* Skip type checking all .d.ts files. */ + }, + "include": ["src/**/*"] +} diff --git a/kittybox-rs/templates/src/lib.rs b/kittybox-rs/templates/src/lib.rs index d58e831..5b3a8df 100644 --- a/kittybox-rs/templates/src/lib.rs +++ b/kittybox-rs/templates/src/lib.rs @@ -9,6 +9,37 @@ pub use login::LoginPage; mod mf2; pub use mf2::{Entry, VCard, Feed, Food, POSTS_PER_PAGE}; +pub mod assets { + use axum::response::{IntoResponse, Response}; + use axum::extract::Path; + use axum::http::StatusCode; + use axum::http::header::{CONTENT_TYPE, CACHE_CONTROL}; + + const ASSETS: include_dir::Dir<'static> = include_dir::include_dir!("$OUT_DIR"); + const CACHE_FOR_A_DAY: &str = "max-age=86400"; + + pub async fn statics(Path(path): Path) -> Response { + + let content_type: &'static str = if path.ends_with(".js") { + "application/javascript" + } else if path.ends_with(".css") { + "text/css" + } else if path.ends_with(".html") { + "text/html; charset=\"utf-8\"" + } else { + "application/octet-stream" + }; + + match ASSETS.get_file(path) { + Some(file) => (StatusCode::OK, + [(CONTENT_TYPE, content_type), + (CACHE_CONTROL, CACHE_FOR_A_DAY)], + file.contents()).into_response(), + None => StatusCode::NOT_FOUND.into_response() + } + } +} + #[cfg(test)] mod tests { use faker_rand::en_us::internet::Domain; -- cgit 1.4.1