Make registration editable

public/index.css

@@ -116,7 +116,8 @@ button.primary {
 	color: var(--color-primary);
 	border-color: var(--color-primary);
 }
-button.primary:hover {
+button.primary:hover, button.primary.active {
+	color: var(--color-background);
 	background-color: var(--color-primary);
 }
 button.primary[disabled] {

src/Form.svelte

@@ -0,0 +1,71 @@
+<script context="module" lang="typescript">
+  export interface Field {
+    label: string,
+    value: string | null,
+    placeholder?: string,
+    type: string,
+    editable: boolean
+  }
+</script>
+
+<script lang="typescript">
+  export let fields: Field[];
+  export let editable = false ;
+</script>
+
+<style>
+  .fields {
+    display: grid;
+    grid-template-columns: auto auto;
+    grid-gap: 1.5rem;
+  }
+  .fields > div {
+    justify-self: start;
+    align-self: center;
+  }
+
+  input.field {
+    padding: 0;
+    margin: 0;
+    border: none;
+  }
+  input.field {
+    padding: 0.25rem 1rem;
+    border-radius: 1rem;
+    border: 1px dashed transparent;
+    width: 28rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  input.field[disabled] {
+    color: var(--color-foreground);
+    font-style: normal;
+  }
+  input.field::placeholder {
+    color: var(--color-subtle);
+    font-style: italic;
+  }
+  input.field:not([disabled])::placeholder {
+    color: transparent;
+  }
+  input.field:not([disabled]) {
+    border-color: var(--color-secondary) !important;
+  }
+
+  .label {
+    border: 1px solid transparent;
+  }
+</style>
+
+<div class="fields">
+  {#each fields as field}
+    <div class="label">
+      {field.label}
+    </div>
+    <div>
+      <input class="field" placeholder={field.placeholder}
+             disabled={!field.editable || !editable}
+             type={field.type} value={field.value} />
+    </div>
+  {/each}
+</div>

src/base/register/Registration.svelte

@@ -6,55 +6,62 @@
   import Loading from '@app/Loading.svelte';
   import Link from '@app/Link.svelte';
   import Modal from '@app/Modal.svelte';
+  import Form from '@app/Form.svelte';
+  import type { Field } from '@app/Form.svelte';
 
   export let subdomain: string;
   export let config: Config;
 
+  let editable = false;
+  let fields: Field[] = [];
+
+  const loadRegistration = getRegistration(subdomain, config)
+    .then(registration => {
+      if (registration) {
+        fields = [
+          { label: "Address", type: "text", placeholder: "Not set",
+            value: registration.address, editable: true },
+          { label: "Owner", type: "text", placeholder: "",
+            value: registration.owner, editable: false },
+        ];
+      }
+      return registration;
+    });
+
   $: isOwner = (registration: Registration): boolean => {
     return registration.owner === ($session && $session.address);
   };
 </script>
 
 <style>
-  .fields {
-    display: grid;
-    grid-template-columns: auto auto auto;
-    grid-gap: 1.5rem;
+  main > header {
+    display: flex;
+    align-items: center;
+    justify-content: left;
+    margin-bottom: 2rem;
   }
-  .fields > div {
-    justify-self: start;
-    align-self: center;
+  main > header > * {
+    margin: 0 1rem 0 0;
   }
 </style>
 
-{#await getRegistration(subdomain, config)}
+{#await loadRegistration}
   <Loading />
 {:then registration}
   {#if registration}
     <main>
-      <h1 class="bold">{subdomain}.{config.registrar.domain}</h1>
-      <div class="fields">
-        <!-- Address -->
-        <div class="label">Address</div>
-        <div>
-          {#if registration.address}
-            {registration.address}
-          {:else}
-            <span class="subtle">Not set</span>
-          {/if}
-        </div>
-        <div>
-          <button class="tiny primary" disabled={!isOwner(registration)}>
-            Set
-          </button>
-        </div>
-        <!-- Owner -->
-        <div class="label">Owner</div>
-        <div>{registration.owner}</div>
-        <div>
-          <button class="tiny secondary" disabled={!isOwner(registration)}>Transfer</button>
-        </div>
-      </div>
+      <header>
+        <h1 class="bold">{subdomain}.{config.registrar.domain}</h1>
+        <button
+          class="tiny primary" class:active={editable} disabled={!isOwner(registration)}
+          on:click={() => editable = !editable}>
+            Edit
+        </button>
+        <button class="tiny secondary" disabled={!isOwner(registration)}>
+          Transfer
+        </button>
+      </header>
+      <Form {editable} {fields} />
     </main>
   {:else}
     <Modal subtle>