Add CIDR prefix length to the settings page

Signed-off-by: Mcat12 <newtoncat12@yahoo.com>

public/i18n/en/settings.json

@@ -27,5 +27,6 @@
     "Successfully saved settings": "Successfully saved settings",
     "Detected custom upstream server": "Detected custom upstream server",
     "DNS Options": "DNS Options",
-    "Rapid Commit": "Rapid Commit"
+    "Rapid Commit": "Rapid Commit",
+    "Prefix length (CIDR)": "Prefix length (CIDR)"
 }

src/components/settings/ConditionalForwardingSettings.tsx

@@ -59,6 +59,28 @@ const ConditionalForwardingSettings = ({
         />
       </Col>
     </FormGroup>
+    <FormGroup row>
+      <Label for="cidr" sm={5}>
+        {t("Prefix length (CIDR)")}
+      </Label>
+      <Col sm={7}>
+        <Input
+          id="cidr"
+          disabled={!settings.enabled}
+          value={settings.cidr}
+          onChange={e => {
+            const cidr = parseInt(e.target.value);
+
+            // Only allow numbers
+            if (isNaN(cidr)) {
+              return;
+            }
+
+            onUpdate({ ...settings, cidr });
+          }}
+        />
+      </Col>
+    </FormGroup>
     <FormGroup row>
       <Label for="localDomain" sm={5}>
         {t("Local Domain Name")}