From 75ccac422e6ecbc05191e1b5e24ada9680a53bd6 Mon Sep 17 00:00:00 2001
From: Sebastian Martinez <sebastinez@me.com>
Date: Fri, 4 Feb 2022 22:04:08 +0100
Subject: [PATCH] Add link to seed node from registration page

Signed-off-by: Sebastian Martinez <sebastinez@me.com>
Signed-off-by: Alexis Sellier <self@cloudhead.io>
---
 src/Form.svelte                    | 19 +++++++++++++------
 src/base/registrations/View.svelte |  1 +
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/Form.svelte b/src/Form.svelte
index 59d41bcee..09ee748b9 100644
--- a/src/Form.svelte
+++ b/src/Form.svelte
@@ -10,6 +10,7 @@
     editable: boolean;
     error?: string;
     example?: string;
+    url?: string;
   }
 
   const validationExamples: Record<string, string> = {
@@ -41,12 +42,12 @@
 </script>
 
 <script lang="ts">
+  import { link } from "svelte-routing";
   import { createEventDispatcher } from 'svelte';
   import { marked } from 'marked';
   import { capitalize, isUrl, isAddress, formatSeedId } from '@app/utils';
   import Address from '@app/Address.svelte';
   import type { Config } from '@app/config';
-  import Icon from "@app/Icon.svelte";
 
   export let fields: Field[];
   export let editable = false;
@@ -113,6 +114,11 @@
     margin: 0;
     white-space: nowrap;
   }
+  .ellipsis {
+    width: 28rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 
   .description {
     padding-left: 1rem;
@@ -178,12 +184,9 @@
         <span class="field">
           {#if field.value}
             {#if isUrl(field.value)}
-              <span class="desktop">
+              <span class="ellipsis">
                 <a class="link" href="{field.value}" target="_blank">{field.value}</a>
               </span>
-              <span class="mobile" title={field.value}>
-                <Icon name="url" />
-              </span>
             {:else if isAddress(field.value)}
               <div class="desktop">
                 <Address resolve={field.resolve ?? false} address={field.value} {config} />
@@ -191,7 +194,11 @@
               <div class="mobile">
                 <Address compact resolve={field.resolve ?? false} address={field.value} {config} />
               </div>
-            {:else if (field.label === "Seed ID")}
+            {:else if (field.url)}
+              <div>
+                <a class="link" use:link href="{field.url}">{field.value}</a>
+              </div>
+            {:else if (field.validate === "id")}
               <div class="mobile">
                 {formatSeedId(field.value)}
               </div>
diff --git a/src/base/registrations/View.svelte b/src/base/registrations/View.svelte
index 2dad1d02b..8a536a28c 100644
--- a/src/base/registrations/View.svelte
+++ b/src/base/registrations/View.svelte
@@ -79,6 +79,7 @@
           description: "The GitHub username associated with this name.",
           value: r.profile.github, editable: true },
         { name: "seed.host", label: "Seed Host", validate: "domain", placeholder: "seed.acme.org",
+          url: r.profile.seed && `/seeds/${r.profile.seed.host}`,
           description: "The seed host address. " +
             "Only domain names with TLS are supported. " +
             `HTTP(S) API requests use port ${config.seed.api.port}.`,