From 4a0cdacc05036cbdc9410b064ebb8ac5b9fcded7 Mon Sep 17 00:00:00 2001
From: NoobTW <noob@noob.tw>
Date: Sun, 16 Apr 2023 14:58:19 +0800
Subject: [PATCH 1/2] feat: add ipv6 assignment

---
 .../NetworkSettings/NetworkSettings.jsx       | 12 ++-
 .../IPv6AutoAssign/IPv6AutoAssign.jsx         | 86 +++++++++++++++++++
 .../components/IPv6AutoAssign/index.jsx       |  1 +
 3 files changed, 95 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/components/NetworkSettings/components/IPv6AutoAssign/IPv6AutoAssign.jsx
 create mode 100644 frontend/src/components/NetworkSettings/components/IPv6AutoAssign/index.jsx

diff --git a/frontend/src/components/NetworkSettings/NetworkSettings.jsx b/frontend/src/components/NetworkSettings/NetworkSettings.jsx
index c45a6e8..9077795 100644
--- a/frontend/src/components/NetworkSettings/NetworkSettings.jsx
+++ b/frontend/src/components/NetworkSettings/NetworkSettings.jsx
@@ -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";
@@ -104,10 +105,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
diff --git a/frontend/src/components/NetworkSettings/components/IPv6AutoAssign/IPv6AutoAssign.jsx b/frontend/src/components/NetworkSettings/components/IPv6AutoAssign/IPv6AutoAssign.jsx
new file mode 100644
index 0000000..885644b
--- /dev/null
+++ b/frontend/src/components/NetworkSettings/components/IPv6AutoAssign/IPv6AutoAssign.jsx
@@ -0,0 +1,86 @@
+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>
+              <small style={{ marginLeft: '2rem', 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, 12)}</span>
+                  99:93
+                  <span style={{ backgroundColor: '#ccffff' }}>__</span>
+                  :
+                  <span style={{ backgroundColor: '#ccffff' }}>____</span>
+                  :
+                  <span style={{ backgroundColor: '#ccffff' }}>____</span>
+                </code>
+              </small>
+            </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>
+        </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;
diff --git a/frontend/src/components/NetworkSettings/components/IPv6AutoAssign/index.jsx b/frontend/src/components/NetworkSettings/components/IPv6AutoAssign/index.jsx
new file mode 100644
index 0000000..0ae1ee0
--- /dev/null
+++ b/frontend/src/components/NetworkSettings/components/IPv6AutoAssign/index.jsx
@@ -0,0 +1 @@
+export { default } from "./IPv6AutoAssign";

From a4d3b069c5976b3a60c539c7a7ccbf83368213a1 Mon Sep 17 00:00:00 2001
From: NoobTW <noob@noob.tw>
Date: Tue, 10 Oct 2023 11:40:15 +0800
Subject: [PATCH 2/2] feat: fix ipv6 hint

---
 .../IPv6AutoAssign/IPv6AutoAssign.jsx         | 70 ++++++++++++++-----
 1 file changed, 51 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/NetworkSettings/components/IPv6AutoAssign/IPv6AutoAssign.jsx b/frontend/src/components/NetworkSettings/components/IPv6AutoAssign/IPv6AutoAssign.jsx
index 885644b..24cba46 100644
--- a/frontend/src/components/NetworkSettings/components/IPv6AutoAssign/IPv6AutoAssign.jsx
+++ b/frontend/src/components/NetworkSettings/components/IPv6AutoAssign/IPv6AutoAssign.jsx
@@ -24,25 +24,25 @@ function IPv6AutoAssign({ id, v6AssignMode, handleChange }) {
           />
           <span>ZeroTier RFC4193 (/128 for each device)</span>
           {v6AssignMode["rfc4193"] && (
-            <div>
-              <small style={{ marginLeft: '2rem', 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, 12)}</span>
-                  99:93
-                  <span style={{ backgroundColor: '#ccffff' }}>__</span>
-                  :
-                  <span style={{ backgroundColor: '#ccffff' }}>____</span>
-                  :
-                  <span style={{ backgroundColor: '#ccffff' }}>____</span>
-                </code>
-              </small>
+            <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>
@@ -61,6 +61,38 @@ function IPv6AutoAssign({ id, v6AssignMode, handleChange }) {
             }}
           />
           <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 */}