core
/
trifid
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects 7 Releases Wiki Activity

networkcreate retheme

This commit is contained in:
core 2023-09-25 22:38:49 -04:00
parent f2b9e05591
commit 918a3ad1ea
Signed by: core
GPG Key ID: FDBF740DADDCEECF
2 changed files with 32 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
tfweb/src/lib/i18n/locales/en.json
View File

@ -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.", "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", "label": "Network range",
"button": "Create network", "button": "Create network",
"valid": "Valid - {numIps} addresses from {start} to {end}", "valid": "Valid - {numIps} addresses ({start} to {end})",
"invalid": "Invalid", "invalid": "Invalid",
"error": { "error": {
"generic": "Unable to create network: {err}", "generic": "Unable to create network: {err}",

41
tfweb/src/routes/networkcreate/+page.svelte
View File

@ -12,7 +12,7 @@
let loading = true; let loading = true;
let isError = false; let isError = false;
let error = ''; let error = '';
$: currentlyLoading = $isLoading || loading; $: currentlyLoading = $isLoading;
logSetup(); logSetup();
let logger = new Logger("networkcreate/+page.svelte"); let logger = new Logger("networkcreate/+page.svelte");
@ -62,6 +62,7 @@
}) })
let cidr = "100.100.0.0/22"; 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"}}) 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); 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); logger.info(cidr);
if (!regex.test(cidr)) { if (!regex.test(cidr)) {
sub = $t("networkcreate.invalid"); sub = $t("networkcreate.invalid");
valid = false;
logger.info("error: regex"); logger.info("error: regex");
console.log(regex.exec(cidr)); console.log(regex.exec(cidr));
return; return;
} }
if (!cidr.includes("/")) { if (!cidr.includes("/")) {
sub = $t("networkcreate.invalid"); sub = $t("networkcreate.invalid");
valid = false;
logger.info("error: noslash"); logger.info("error: noslash");
return; return;
} }
@ -119,6 +122,7 @@
if (!isInPrivateRange(address_numerical, parseInt(netmask))) { if (!isInPrivateRange(address_numerical, parseInt(netmask))) {
sub = $t("networkcreate.invalid"); sub = $t("networkcreate.invalid");
logger.info("not in private range"); logger.info("not in private range");
valid = false;
return; return;
} }
@ -134,7 +138,8 @@
let first = [first_num >>> 24 & 0xFF, first_num >>> 16 & 0xFF, first_num >>> 8 & 0xFF, first_num & 0xFF].join("."); 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("."); 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() { async function onSubmit() {
@ -172,12 +177,28 @@
</svelte:head> </svelte:head>
<LoadingWrapper isLoading={currentlyLoading} isError={isError} error={error}> <LoadingWrapper isLoading={currentlyLoading} isError={isError} error={error}>
<h1>{$t("networkcreate.title")}</h1> <div class="h-100 d-flex align-items-center justify-content-center">
<p>{$t("networkcreate.explain")}</p> <div class="card w-25">
<form on:submit|preventDefault={onSubmit}> <div class="card-body">
<label for="cidr">{$t("networkcreate.label")}</label> <h4 class="card-title">{$t("networkcreate.title")}</h4>
<input bind:value={cidr} on:input={recalculateSub} type="text" id="cidr" /> <p class="card-text">{$t("networkcreate.explain")}</p>
<button>{$t("networkcreate.button")}</button> <form on:submit|preventDefault={onSubmit}>
<span>{sub}</span> <label class="form-label" for="cidr">{$t("networkcreate.label")}</label>
</form> <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> </LoadingWrapper>