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.",
"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}",

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

@ -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>
<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 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>
<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>