From 918a3ad1ea3b404811284a28621546546b2f9494 Mon Sep 17 00:00:00 2001
From: core <core@coredoes.dev>
Date: Mon, 25 Sep 2023 22:38:49 -0400
Subject: [PATCH] networkcreate retheme

---
 tfweb/src/lib/i18n/locales/en.json          |  2 +-
 tfweb/src/routes/networkcreate/+page.svelte | 41 ++++++++++++++++-----
 2 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/tfweb/src/lib/i18n/locales/en.json b/tfweb/src/lib/i18n/locales/en.json
index 29d97da..d0f5a85 100644
--- a/tfweb/src/lib/i18n/locales/en.json
+++ b/tfweb/src/lib/i18n/locales/en.json
@@ -76,7 +76,7 @@
     "explain": "This defines what IP addresses will be assigned to your devices. The range you enter below must fall within either the RFC 1918 Private Address Space or the RFC 6598 Shared Address Space. Enter your network via CIDR notation.",
     "label": "Network range",
     "button": "Create network",
-    "valid": "Valid - {numIps} addresses from {start} to {end}",
+    "valid": "Valid - {numIps} addresses ({start} to {end})",
     "invalid": "Invalid",
     "error": {
       "generic": "Unable to create network: {err}",
diff --git a/tfweb/src/routes/networkcreate/+page.svelte b/tfweb/src/routes/networkcreate/+page.svelte
index 4a7fded..c151e12 100644
--- a/tfweb/src/routes/networkcreate/+page.svelte
+++ b/tfweb/src/routes/networkcreate/+page.svelte
@@ -12,7 +12,7 @@
     let loading = true;
     let isError = false;
     let error = '';
-    $: currentlyLoading = $isLoading || loading;
+    $: currentlyLoading = $isLoading;
 
     logSetup();
     let logger = new Logger("networkcreate/+page.svelte");
@@ -62,6 +62,7 @@
     })
 
     let cidr = "100.100.0.0/22";
+    let valid = true;
     let sub = $t("networkcreate.valid", {values:{numIps:$number(1024), start: "100.64.0.0", end: "100.127.255.255"}})
 
     const regex = new RegExp(/^([0-9]{1,3}\.){3}[0-9]{1,3}(\/([0-9]|[1-2][0-9]|3[0-2]))?$/im);
@@ -71,12 +72,14 @@
         logger.info(cidr);
         if (!regex.test(cidr)) {
             sub = $t("networkcreate.invalid");
+            valid = false;
             logger.info("error: regex");
             console.log(regex.exec(cidr));
             return;
         }
         if (!cidr.includes("/")) {
             sub = $t("networkcreate.invalid");
+            valid = false;
             logger.info("error: noslash");
             return;
         }
@@ -119,6 +122,7 @@
         if (!isInPrivateRange(address_numerical, parseInt(netmask))) {
             sub = $t("networkcreate.invalid");
             logger.info("not in private range");
+            valid = false;
             return;
         }
 
@@ -134,7 +138,8 @@
         let first = [first_num >>> 24 & 0xFF, first_num >>> 16 & 0xFF, first_num >>> 8 & 0xFF, first_num & 0xFF].join(".");
         let last = [last_num >>> 24 & 0xFF, last_num >>> 16 & 0xFF, last_num >>> 8 & 0xFF, last_num & 0xFF].join(".");
 
-        sub = $t("networkcreate.valid", {values:{numIps:$number(addressCount), start: first, end: last}})
+        sub = $t("networkcreate.valid", {values:{numIps:$number(addressCount), start: first, end: last}});
+        valid = true;
     }
 
     async function onSubmit() {
@@ -172,12 +177,28 @@
 </svelte:head>
 
 <LoadingWrapper isLoading={currentlyLoading} isError={isError} error={error}>
-    <h1>{$t("networkcreate.title")}</h1>
-    <p>{$t("networkcreate.explain")}</p>
-    <form on:submit|preventDefault={onSubmit}>
-        <label for="cidr">{$t("networkcreate.label")}</label>
-        <input bind:value={cidr} on:input={recalculateSub} type="text" id="cidr" />
-        <button>{$t("networkcreate.button")}</button>
-        <span>{sub}</span>
-    </form>
+    <div class="h-100 d-flex align-items-center justify-content-center">
+        <div class="card w-25">
+            <div class="card-body">
+                <h4 class="card-title">{$t("networkcreate.title")}</h4>
+                <p class="card-text">{$t("networkcreate.explain")}</p>
+                <form on:submit|preventDefault={onSubmit}>
+                    <label class="form-label" for="cidr">{$t("networkcreate.label")}</label>
+                    <input class="form-control" bind:value={cidr} on:input={recalculateSub} type="text" id="cidr" />
+
+                    {#if valid}
+                        <span class="text-success"><i class="fas fa-check mr-2"></i>   {sub}</span>
+                    {:else}
+                        <span class="text-danger"><i class="fas fa-x mr-2"></i>   {sub}</span>
+                    {/if}
+
+                    {#if loading}
+                        <button disabled class="btn mt-2 btn-primary w-100"><i class="fas fa-gear fa-spin"></i></button>
+                    {:else}
+                        <button disabled={!valid} class="btn mt-2 btn-primary w-100">{$t("networkcreate.button")}</button>
+                    {/if}
+                </form>
+            </div>
+        </div>
+    </div>
 </LoadingWrapper>