summaryrefslogtreecommitdiff
path: root/ui/routes/(swatch)/.swatch
Commit message (Collapse)AuthorAge
* Remove remnant `html` class from swatch textinputs.Owen Jacobson2025-07-18
| | | | This was a leftover from the idea that different swatches might have different input notations - and they do, but we turned out not to need to style them differently. And, in any event, this class was applied (only) to inputs that _aren't HTML_, because of 01ed82ac4f89810161fbc3aa1cb8e4691fb8938b.
* Do not support users entering bare HTML in swatches.Owen Jacobson2025-07-09
| | | | | | | | You can inject Javascript into a swatch that uses `{@html <expr>}` fairly easily. `<script>foo()</script>` doesn't appear to work, but `<img src="x" onerror="foo()">` does, for example. That code then runs with the same access to cookies, and the same access to local data, as the Pilcrow client. This change removes that capability, by replacing the two swatches that exposed it with more limited examples. I love the generality and flexibility of generic HTML entry here, and I think it might have been useful for swatching components that are generic DOM containers (which both `Message` and `MessageRun` are today), but swatches are a user interface and are exposed to _all_ users. A user who is unfamiliar with HTML and Javascript, but who is persuaded to open a swatch and enter some code into it (think about an attacker who tells their victim "hey check out this funny thing that happens," preying on curiousity, while providing a lightly-obfuscated payload) can then impersonate that user, exfiltrate anything saved locally, or potentially install persistent code using JS' various background-processing APIs. Gnarly stuff. We're not up to mitigating that in place. Anyone who knows JS can likely learn to build the client from source, and can experiment with arbitrary input that way, taking responsibility for the results in the process, while anyone who doesn't is unlikely to be persuaded to set up an entire Node toolchain just for an exploit.
*-----------------. Implement swatches for the existing component inventory.Owen Jacobson2025-07-08
|\ \ \ \ \ \ \ \ \ \
| | | | | | | | | | * Create swatch for the `Message` component.Owen Jacobson2025-07-08
| | | | | | | | | | |
| | | | | | | | | * | Create swatch for the `MessageInput` component.Owen Jacobson2025-07-08
| | | | | | | | | |/
| | | | | | | | * / Create swatch for the `MessageRun` component.Owen Jacobson2025-07-08
| | | | | | | | |/
| | | | | | | * / Create swatch for the `LogOut` component.Owen Jacobson2025-07-08
| | | | | | | |/
| | | | | | * / Create swatch for the `LogIn` component.Owen Jacobson2025-07-08
| | | | | | |/
| | | | | * / Create swatch for the `Invites` component.Owen Jacobson2025-07-08
| | | | | |/
| | | | * / Create swatch for the `Invite` component.Owen Jacobson2025-07-08
| | | | |/
| | | * / Create swatch for the `CreateConversationForm` component.Owen Jacobson2025-07-08
| | | |/
| | * / Create a swatch for the `ConversationList` component.Owen Jacobson2025-07-08
| | |/
| * / Create a swatch for the `Conversation` component.Owen Jacobson2025-07-08
| |/
* / Add a swatch for the `ChangePassword` component.Owen Jacobson2025-07-08
|/
* Event capture and display tools.Owen Jacobson2025-07-08
| | | | | | This is meant to be used in swatches, to display the events and callbacks generated by a component as part of the swatch. The usage pattern is described in the comments (in both places). Naturally, this has its own swatch.
* Set up a skeleton for swatches.Owen Jacobson2025-07-08
A swatch is a live, and ideally editable, example of an element of the service. They serve as: * Documentation: what is this element, how do you use it, what does it do? * Demonstration: what does this element look like? * Manual test scaffolding: when I change this element like _so_, what happens? Swatches are collectively available under `/.swatch/` on a running instance, and are set up in a separate [group] from the rest of the UI. They do not require setup or login for simplicity's sake and because they don't _do_ anything that requires either of those things. [group]: https://svelte.dev/docs/kit/advanced-routing#Advanced-layouts-(group) Swatches are manually curated, for a couple of reasons: * We lack the technical infrastructure needed to do this based on static analysis; and * Manual curation lets us include affordances like "recommended values," that would be tricky to express as part of the type or schema for the component. The tradeoff, however, is that swatches may fall out of step with the components they depic, if not reviewed regularly. I hope that, by making them part of the development process, this risk will be mitigated through regular use.