CNAME Overrides #patch (#377)

## v1.0.2
**Improvements**
- Introduces CNAME Support for DNS Overrides
**Fixes**
- dns:family policy fix in UI

Author: lts-rad

RELEASE-NOTES.md

@@ -1,5 +1,11 @@
 # Secure Programmable Router (SPR) Release Notes
 
+## v1.0.2
+**Improvements**
+- Introduces CNAME Support for DNS Overrides
+**Fixes**
+- dns:family policy fix in UI
+
 ## v1.0.1
 **Improvements**
 - Emoji support for ssids in wifi uplink, dashboard

frontend/src/__tests__/DNS.js

@@ -60,12 +60,12 @@ describe('DNS Blocklist', () => {
     expect(screen.getByText('New Tag...')).toBeTruthy()
     expect(screen.getByText('Set Category...')).toBeTruthy()
 
-    let numEnabled = screen.getAllByText('Enabled').length
+    let numEnabled = screen.getAllByText('Block Enabled').length
 
     fireEvent.press(screen.getByText('Disable'))
 
     await waitFor(() =>
-      expect(screen.getAllByText('Enabled').length).toBeLessThan(numEnabled)
+      expect(screen.getAllByText('Block Enabled').length).toBeLessThan(numEnabled)
     )
   })
 })

frontend/src/components/DNS/DNSAddOverride.js

@@ -31,8 +31,10 @@ import {
 export default class DNSAddOverride extends React.Component {
   state = {
     Type: '',
+    ReturnType: 'IP',
     Domain: '',
-    ResultIP: '0.0.0.0',
+    ResultIP: '',
+    ResultCNAME: '',
     ClientIP: '*',
     Expiration: 0,
     check: {}
@@ -53,11 +55,13 @@ export default class DNSAddOverride extends React.Component {
     this.state.Type = props.type
     this.state.Domain = props.domain || ''
     this.state.ResultIP = props.ResultIP || ''
+    this.state.ResultCNAME = props.ResultCNAME || ''
     this.state.ClientIP = props.clientip || '*'
     this.state.check = {
       Type: '',
       Domain: '',
       ResultIP: '',
+      ResultCNAME: '',
       ClientIP: ''
     }
 
@@ -67,7 +71,7 @@ export default class DNSAddOverride extends React.Component {
   }
 
   validateField(name, value) {
-    let check = { Type: '', Domain: '', ResultIP: '', ClientIP: '' }
+    let check = { Type: '', Domain: '', ResultIP: '', ResultCNAME: '', ClientIP: '' }
 
     if (name == 'Type' && !['block', 'permit'].includes(value)) {
       check.Type = 'has-danger'
@@ -103,10 +107,21 @@ export default class DNSAddOverride extends React.Component {
       return
     }
 
+    if (this.state.ReturnType == 'CNAME') {
+      if (this.state.ResultCNAME != '' && !this.state.ResultCNAME.endsWith('.')) {
+        this.state.ResultCNAME += '.'
+      }
+      this.state.ResultIP = ''
+    } else if (this.state.ReturnType == 'IP') {
+      this.state.ResultCNAME = ''
+    }
+
+
     let override = {
       Type: this.state.Type,
       Domain: this.state.Domain,
       ResultIP: this.state.ResultIP,
+      ResultCNAME: this.state.ResultCNAME,
       ClientIP: this.state.ClientIP,
       Expiration: this.state.Expiration
     }
@@ -203,36 +218,66 @@ export default class DNSAddOverride extends React.Component {
           )}
         </FormControl>
 
-        <FormControl isInvalid={this.state.check.ResultIP == 'has-danger'}>
+
+        <FormControl
+          isInvalid={this.state.check.ResultIP == 'has-danger' || this.state.check.ReturnCNAME == 'has-danger'}
+        >
           <FormControlLabel>
-            <FormControlLabelText>Result IP</FormControlLabelText>
+            <FormControlLabelText>Result Type</FormControlLabelText>
           </FormControlLabel>
 
-          <Input>
+          <RadioGroup
+            flex={1}
+            defaultValue={this.state.ReturnType}
+            accessibilityLabel="Select Return Type"
+            onChange={(type) => {
+              this.handleChange('ReturnType', type)
+            }}
+          >
+            <HStack py="1" space="md">
+              <Radio key="block" value="IP" size="md">
+                <RadioIndicator mr="$2">
+                  <RadioIcon as={CircleIcon} strokeWidth={1} />
+                </RadioIndicator>
+                <RadioLabel>IP</RadioLabel>
+              </Radio>
+
+              <Radio key="permit" value="CNAME" size="md">
+                <RadioIndicator mr="$2">
+                  <RadioIcon as={CircleIcon} strokeWidth={1} />
+                </RadioIndicator>
+                <RadioLabel>CNAME</RadioLabel>
+              </Radio>
+            </HStack>
+          </RadioGroup>
+
+
+          <Input py="1">
             <InputField
               type="text"
               name="ResultIP"
-              value={this.state.ResultIP}
-              onChangeText={(value) => this.handleChange('ResultIP', value)}
+              value={this.state.ReturnType == 'IP' ? this.state.ResultIP : this.state.ResultCNAME}
+              onChangeText={(value) => this.handleChange('Result' + this.state.ReturnType, value)}
             />
           </Input>
 
-          {this.state.check.ResultIP == 'has-danger' ? (
+          {(this.state.check.ResultIP == 'has-danger' || this.state.check.ResultCNAME == 'has-danger') ? (
             <FormControlError>
               <FormControlErrorText>
-                Please enter a valid IP or leave empty
+                Please enter a valid {this.state.ReturnType} or leave empty
               </FormControlErrorText>
             </FormControlError>
           ) : (
             <FormControlHelper>
               <FormControlHelperText>
-                Optional. Set a custom IP address to return for domain name
+                Optional. Set a custom {this.state.ReturnType} address to return for domain name
                 lookup
               </FormControlHelperText>
             </FormControlHelper>
           )}
         </FormControl>
 
+
         <FormControl isInvalid={this.state.check.ClientIP == 'has-danger'}>
           <FormControlLabel>
             <FormControlLabelText>Client IP</FormControlLabelText>

frontend/src/components/DNS/DNSOverrideListItem.js

@@ -36,7 +36,7 @@ const DNSOverrideListItem = ({ item, deleteListItem, ...props }) => {
             >
               =
             </Text>
-            <Text>{item.ResultIP || '0.0.0.0'}</Text>
+            <Text>{item.ResultIP || item.ResultCNAME || '0.0.0.0'}</Text>
           </HStack>
         </VStack>
 

frontend/src/components/Devices/EditDevice.js

@@ -71,7 +71,7 @@ const EditDevice = ({ device, notifyChange, ...props }) => {
   const [modalType, setModalType] = useState('')
 
   // for adding
-  let defaultPolicies = ['wan', 'dns', 'dns_family', 'lan']
+  let defaultPolicies = ['wan', 'dns', 'dns:family', 'lan']
 
   if (!isSimpleMode) {
     defaultPolicies.push(...['lan_upstream', 'disabled', 'quarantine'])
@@ -84,7 +84,7 @@ const EditDevice = ({ device, notifyChange, ...props }) => {
     lan_upstream: 'Upstream Private Networks',
     quarantine: 'Quarantine',
     disabled: 'Disabled',
-    dns_family: "Use Family DNS"
+    "dns:family": "Use Family DNS"
   }
   const policyTips = {
     wan: 'Allow Internet Access',
@@ -93,7 +93,7 @@ const EditDevice = ({ device, notifyChange, ...props }) => {
     lan_upstream: 'Allow device to reach private LANs upstream',
     quarantine: 'Send all Traffic, DNS, to Quarantine Host if set else drop traffic',
     disabled: 'Override all policies and groups, to disconnect device',
-    dns_family: 'Use family friendly DNS resolver'
+    "dns:family": 'Use family friendly DNS resolver'
   }
   const defaultGroups = props.groups || []
   const defaultTags = props.tags || []