dec0dOS/zero-ui
1
1
Fork 0
mirror of https://github.com/dec0dOS/zero-ui.git synced 2024-09-20 06:56:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge a4d3b069c5 into 94581a8999

Browse source
This commit is contained in:
Noob Tsai 2024-07-11 14:48:06 +02:00 committed by GitHub
parent 94581a8999 a4d3b069c5
commit 852c373fca
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 127 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
frontend/src/components/NetworkSettings/NetworkSettings.jsx
View file

@ -13,6 +13,7 @@ import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import ManagedRoutes from "./components/ManagedRoutes";
import IPv4AutoAssign from "./components/IPv4AutoAssign";
import IPv6AutoAssign from "./components/IPv6AutoAssign";
import API from "utils/API";
import { parseValue, replaceValue, setValue } from "utils/ChangeHelper";
@ -107,10 +108,13 @@ function NetworkSettings({ network, setNetwork }) {
handleChange={handleChange}
/>
</Grid>
{/* TODO: */}
{/* <Grid item>
<Typography>IPv6 Auto-Assign</Typography>
</Grid> */}
<Grid item>
<IPv6AutoAssign
id={network["id"]}
v6AssignMode={network["config"]["v6AssignMode"]}
handleChange={handleChange}
/>
</Grid>
<Divider />
<Grid item>
<TextField

118
frontend/src/components/NetworkSettings/components/IPv6AutoAssign/IPv6AutoAssign.jsx Normal file
View file

@ -0,0 +1,118 @@
import React from 'react';
import {
Checkbox,
Grid,
Typography,
} from "@material-ui/core";
function IPv6AutoAssign({ id, v6AssignMode, handleChange }) {
return (
<>
<Typography>IPv6 Auto-Assign</Typography>
<Grid container direction="column">
<Grid item>
<Checkbox
checked={v6AssignMode["rfc4193"]}
color="primary"
onChange={(e) => {
handleChange("config", "v6AssignMode", "custom", {
"rfc4193": e.target.checked,
"6plane": v6AssignMode["6plane"],
"zt": v6AssignMode["zt"],
})(null)
}}
/>
<span>ZeroTier RFC4193 (/128 for each device)</span>
{v6AssignMode["rfc4193"] && (
<div style={{ marginLeft: '4rem', letterSpacing: '1px' }}>
<code>
fd
<span style={{ backgroundColor: '#ffffcc' }}>{id.slice(0, 2)}</span>
:
<span style={{ backgroundColor: '#ffffcc' }}>{id.slice(2, 6)}</span>
:
<span style={{ backgroundColor: '#ffffcc' }}>{id.slice(6, 10)}</span>
:
<span style={{ backgroundColor: '#ffffcc' }}>{id.slice(10, 14)}</span>
:
<span style={{ backgroundColor: '#ffffcc' }}>{id.slice(14, 16)}</span>
99:93
<span style={{ backgroundColor: '#ccffff' }}>__</span>
:
<span style={{ backgroundColor: '#ccffff' }}>____</span>
:
<span style={{ backgroundColor: '#ccffff' }}>____</span>
</code>
</div>
)}
</Grid>
<Grid item>
<Checkbox
checked={v6AssignMode["6plane"]}
color="primary"
onChange={(e) => {
handleChange("config", "v6AssignMode", "custom", {
"rfc4193": v6AssignMode["rfc4193"],
"6plane": e.target.checked,
"zt": v6AssignMode["zt"],
})(null)
}}
/>
<span>ZeroTier 6PLANE (/80 routable for each device)</span>
{v6AssignMode["6plane"] && (
<div style={{ marginLeft: '4rem', letterSpacing: '1px' }}>
<code>
fc
{
(() => {
const sixPlaneID = id.match(/.{1,2}/g)
.map((substr, idx, arr) => parseInt(substr, 16) ^ parseInt(arr[idx + 4], 16))
.map((byte) => byte.toString(16).toLowerCase())
.map((byte) => (byte.length === 2) ? byte : '0' + byte)
.slice(0, 4)
.join('')
return (
<>
<span style={{ backgroundColor: '#ffffcc' }}>{sixPlaneID.slice(0, 2)}</span>
:
<span style={{ backgroundColor: '#ffffcc' }}>{sixPlaneID.slice(2, 6)}</span>
:
<span style={{ backgroundColor: '#ffffcc' }}>{sixPlaneID.slice(6, 8)}</span>
</>
)
})()
}
<span style={{ backgroundColor: '#ccffff' }}>__</span>
:
<span style={{ backgroundColor: '#ccffff' }}>____</span>
:
<span style={{ backgroundColor: '#ccffff' }}>____</span>
:0000:0000:0001
</code>
</div>
)}
</Grid>
{/* TODO: Implement v6 ipAssignmentPools, might break ipv4 pool settings */}
{/* <Grid>
<Checkbox
checked={v6AssignMode["zt"]}
color="primary"
onChange={(e) => {
handleChange("config", "v6AssignMode", "custom", {
"rfc4193": v6AssignMode["rfc4193"],
"6plane": v6AssignMode["6plane"],
"zt": e.target.checked,
})(null)
}}
/>
<span>Auto-Assign from Range</span>
</Grid> */}
</Grid>
</>
);
}
export default IPv6AutoAssign;

1
frontend/src/components/NetworkSettings/components/IPv6AutoAssign/index.jsx Normal file
View file

@ -0,0 +1 @@
export { default } from "./IPv6AutoAssign";