docs/form_persisting_architecture.md


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

# Form Persisting Architecture

Since:
 - The popup is torn down completely on every click outside of it.
 - We have forms with multiple fields (like passwords & seed phrases) that might encourage a user to leave our panel to refer to a password manager.

 We cause user friction when we lose the contents of certain forms.

 This calls for an architecture of a form component that can completely persist its values to LocalStorage on every relevant change, and restore those values on reopening.

Whenever this class is loaded, it registers an `onChange` listener. On those events, it checks the target for a special ID attribute it listens for.

Let's say we call our class `PersistentForm`. So then we might check for a `persistent-form-id` on change.

The parent element will define a special attribute, let's say `persistent-form-parent-id`.

Here's some pseudo-code for it:
```
onChange(ev) =>
  persisted = localStorage[parentKey]
  persisted[childKey] = ev.value
  localStorage[parentKey] = persisted
```

On startup, we just do the inverse:

```
onStart() =>
  el = this.getEl()
  parentKey = el.attr('persistent-form-parent-id')
  children = el.children.where('[persistent-form-id]')
  children.each(loadValue)
```