diff --git a/src/Form.svelte b/src/Form.svelte index 57aae97ed..4938fc9f0 100644 --- a/src/Form.svelte +++ b/src/Form.svelte @@ -3,11 +3,28 @@ name: string; value: string | null; label?: string; + validate?: string; placeholder?: string; description: string; resolve?: boolean; editable: boolean; + error?: string; } + + const validationTypes: { [index: string]: RegExp } = { + url: /^(https:\/\/|http:\/\/|ipfs:\/\/)\S+/, + // Github + // Username may only contain alphanumeric characters or hyphens. + // Username cannot have multiple consecutive hyphens. + // Username cannot begin or end with a hyphen. + // Maximum is 39 characters. + // Twitter + // Username may only contain alphanumeric characters or underscores. + // Maximum is 15 characters. + // For simplification of the regex pattern we use a combined version of both requirements. + handle: /^[a-zA-Z0-9-_]{1,39}$/, + address: /^0x[a-zA-Z0-9]{40}$/ + };
- {#each fields as field} + {#each formFields as field}
{field.label || capitalize(field.name)}
{#if field.editable && editable} + on:keyup={validate} value={field.value} type="text" {disabled} /> {:else} {#if field.value} @@ -126,9 +169,15 @@ {/if} {/if} -
- {@html marked(field.description)} -
+ {#if field.error} +
+ {field.error} +
+ {:else} +
+ {@html marked(field.description)} +
+ {/if}
{/each}
@@ -137,7 +186,7 @@ - diff --git a/src/base/registrations/View.svelte b/src/base/registrations/View.svelte index 5bf006a92..08424972b 100644 --- a/src/base/registrations/View.svelte +++ b/src/base/registrations/View.svelte @@ -51,10 +51,10 @@ } fields = [ - { name: "owner", placeholder: "", + { name: "owner", validate: "address", placeholder: "", description: "The owner and controller of this name.", value: r.owner, resolve: true, editable: false }, - { name: "address", placeholder: "Ethereum address, eg. 0x4a9cf21...bc91", + { name: "address", validate: "address", placeholder: "Ethereum address, eg. 0x4a9cf21...bc91", description: "The address this name resolves to. " + ( reverseRecord ? `The reverse record for this address is set to **${name}**` @@ -63,22 +63,22 @@ + "a reverse record should be set." ), value: r.address, editable: true }, - { name: "url", label: "URL", placeholder: "https://acme.org", + { name: "url", label: "URL", validate: "url", placeholder: "https://acme.org", description: "A homepage or other URL associated with this name.", value: r.url,editable: true }, - { name: "avatar", placeholder: "https://acme.org/avatar.png", + { name: "avatar", validate: "url", placeholder: "https://acme.org/avatar.png", description: "An avatar or square image associated with this name.", value: r.avatar, editable: true }, - { name: "twitter", placeholder: "Twitter username, eg. 'acme'", + { name: "twitter", validate: "handle", placeholder: "Twitter username, eg. 'acme'", description: "The Twitter handle associated with this name.", value: r.twitter, editable: true }, - { name: "github", label: "GitHub", placeholder: "GitHub username, eg. 'acme'", + { name: "github", validate: "handle", label: "GitHub", placeholder: "GitHub username, eg. 'acme'", description: "The GitHub username associated with this name.", value: r.github, editable: true }, { name: "seed.id", label: "Seed ID", placeholder: "hynkyn...3nrzc@seed.acme.org:8887", description: "The ID of a Radicle Link node that hosts entities associated with this name.", value: r.seedId, editable: true }, - { name: "seed.api", label: "Seed API", placeholder: "https://seed.acme.org:8888", + { name: "seed.api", label: "Seed API", validate: "url", placeholder: "https://seed.acme.org:8888", description: "The HTTP address of a node that serves Radicle entities over HTTP.", value: r.seedApi, editable: true }, ];