Improve registration form

* Support both handles and URLs in twitter/github fields.

src/Form.svelte

@@ -62,12 +62,9 @@
     border-color: var(--color-secondary) !important;
   }
   input.field::placeholder {
-    color: var(--color-subtle);
+    color: var(--color-secondary);
     font-style: italic;
   }
-  input.field::placeholder {
-    color: transparent;
-  }
   input.field[disabled] {
     color: var(--color-secondary);
   }
@@ -111,7 +108,7 @@
               {field.value}
             {/if}
           {:else}
-            <span class="subtle">{field.placeholder}</span>
+            <span class="subtle">Not set</span>
           {/if}
         </span>
       {/if}

src/base/orgs/View.svelte

@@ -139,12 +139,12 @@
               </a>
             {/if}
             {#if profile.twitter}
-              <a class="url" href={profile.twitter}>
+              <a class="url" href="https://twitter.com/{profile.twitter}">
                 <Icon name="twitter" />
               </a>
             {/if}
             {#if profile.github}
-              <a class="url" href={profile.github}>
+              <a class="url" href="https://github.com/{profile.github}">
                 <Icon name="github" />
               </a>
             {/if}

src/base/registrations/View.svelte

@@ -46,18 +46,18 @@
           fields = [
             { name: "owner", placeholder: "",
               value: r.owner, resolve: true, editable: false },
-            { name: "address", placeholder: "Not set",
+            { name: "address", placeholder: "Ethereum address, eg. 0x4a9cf21...bc91",
               value: r.address, editable: true },
-            { name: "seed", placeholder: "Not set",
-              value: r.seed, editable: true },
-            { name: "url", label: "URL", placeholder: "Not set",
+            { name: "url", label: "URL", placeholder: "https://acme.org",
               value: r.url,editable: true },
-            { name: "avatar", placeholder: "Not set",
+            { name: "avatar", placeholder: "https://acme.org/avatar.png",
               value: r.avatar, editable: true },
-            { name: "twitter", placeholder: "Not set",
+            { name: "twitter", placeholder: "Twitter username, eg. 'acme'",
               value: r.twitter, editable: true },
-            { name: "github", placeholder: "Not set",
+            { name: "github", label: "GitHub", placeholder: "GitHub username, eg. 'acme'",
               value: r.github, editable: true },
+            { name: "seed", placeholder: "https://seed.acme.org:8888",
+              value: r.seed, editable: true },
           ];
           state = { status: Status.Found, registration: r };
         } else {

src/base/users/View.svelte

@@ -54,7 +54,7 @@
     <header>
       <div class="avatar">
         <Avatar source={profile.avatar ?? address} />
-      </div> 
+      </div>
       <div class="info">
         <span class="title bold"><Address compact noAvatar {address} {config} resolve/></span>
         <div class="links">
@@ -62,17 +62,17 @@
             <a class="url" href={profile.url}>{profile.url}</a>
           {/if}
           {#if profile.twitter}
-            <a class="url" href={profile.twitter}>
+            <a class="url" href="https://twitter.com/{profile.twitter}">
               <Icon name="twitter" />
             </a>
           {/if}
           {#if profile.github}
-            <a class="url" href={profile.github}>
+            <a class="url" href="https://github.com/{profile.github}">
               <Icon name="github" />
             </a>
           {/if}
         </div>
       </div>
-    </header> 
+    </header>
   </main>
 {/await}

src/config.json

@@ -66,7 +66,7 @@
     "tokens": []
   },
   "ceramic": { "api": "https://ceramic-clay.3boxlabs.com" },
-  "radicle": { "api": "" },
+  "radicle": { "api": "http://0.0.0.0:8888" },
   "ipfs": { "gateway": "https://ipfs.io/ipfs/" },
   "abi": {
     "registrar": [

src/profile.ts

@@ -1,6 +1,8 @@
 import type { Registration } from "@app/base/registrations/registrar";
 import type { BasicProfile } from "@ceramicstudio/idx-constants";
-import { formatCAIP10Address, formatIpfsFile, resolveEnsProfile, resolveIdxProfile } from "@app/utils";
+import {
+  formatCAIP10Address, formatIpfsFile, resolveEnsProfile, resolveIdxProfile, parseUsername,
+} from "@app/utils";
 import type { Config } from "./config";
 
 export interface IProfile {
@@ -19,14 +21,14 @@ export class Profile {
 
   // Using undefined as return type if nothing to be returned since it works better with <a href> links
   get github(): string | undefined {
-    if (this.profile?.ens?.github) return this.profile.ens.github;
+    if (this.profile?.ens?.github) return parseUsername(this.profile.ens.github);
     else if (this.profile?.idx?.affiliations) return this.profile.idx?.affiliations.find(item => item === "github");
     else return undefined;
   }
 
   // Using undefined as return type if nothing to be returned since it works better with <a href> links
   get twitter(): string | undefined {
-    if (this.profile?.ens?.twitter) return this.profile.ens.twitter;
+    if (this.profile?.ens?.twitter) return parseUsername(this.profile.ens.twitter);
     else if (this.profile?.idx?.affiliations) return this.profile.idx.affiliations.find(item => item === "twitter");
     else return undefined;
   }

src/utils.ts

@@ -74,6 +74,13 @@ export function parseEnsLabel(name: string | undefined, config: Config): string
   }
 }
 
+// Takes a URL, eg. "https://twitter.com/cloudhead", and return "cloudhead".
+// Returns the original string if it was unable to extract the username.
+export function parseUsername(input: string): string {
+  const parts = input.split("/");
+  return parts[parts.length - 1];
+}
+
 // Return the current unix time.
 export function unixTime(): number {
   return Math.floor(Date.now() / 1000);