iOS UI updates #patch (spr-networks#183)

* [ui] add useSwipe component for swipe left and right * [ui] mobile view * [ui] show device name if available * [ui] new edit device view * [ui] mac address * [ui] helper text for trailing dot on domain names, issue spr-networks#166 * [ui] bugfix multiple modal popups * [ui] add swipe up/down * [ui] swipe to refresh on mobile. also show time ago for query * [ui] skip useSwipe for now * [ui] dns override in separate view. fix mobile layout * [ui] dns override in separate view. fix mobile layout * [api] Save dhcp login time, publish scrubbed devices on udpate * [api] Update dhcp last time * [bolt] Switch to bbolt * [db] Rewrite sweep routine * [db] Add compaction routine * [db] Bump to go1.20 * [db] fix pointer dereference * [ui] Remove shrink notification, since compaction is in * [db] Fix inverted logic * [api] Formatting * [api] Add preliminary vlan trunking support * [api] Manage vlan trunk interface in lan_interfaces list * [ui] new edit device view * [api] Dont apply vlan tag if empty * [api] Refresh vlan trunks on startup * [api] Fix vlan command typo * [api] Create vlan trunk interface if not found and enabling * [api] Refresh VLAN Trunks when a VLANTag is updated * [api] fix vlan support typos * [ui] Add VLAN Tag support. Delay IP assignment update * [api] Update VLANs when creating a new device and removing one also * [ui] Add VLAN Tag support, DHCP Tooltip, database view to Events view * [ui] Add lan_upstream to defaults for edit device tags * [api] Do not clear out VLAN when assigning other items * [ui] add more icons for devices * [ui] add icon and color picker components * [ui] align group and tags * [ui] vlantag for mobile * [api] update ppp, wifi_uplink on startup * [api] Ensure built in plugins, plus plugins are updated during update routine * [api] Move link config to /link * [ui] Add LAN view * [ui] Fix LANIF note typo * [ui] Update VLAN Trunk Port Label * [api] sprloop owns Supernet IPs * [ui] Simplify VLAN subtype logic * [ui] Add some mega defaults for event db * [ui] support golang utc date format * [ui] use prettyDate * [dhcp] Do not need feature branch any longer * [ui] update device styling * [ui] icons * [ui] IconItem * [api] add device styling, icon and color * [ui] device icon * [ui] show and edit device icons * [ui] fix spacing for mobile * [ui] catch if no mesh * [ui] keys, only one uplink ip for now * [ui] keys for lists * [ui] cleanup warnings * [ui] cleanup * [ui] fix lists for mobile * [ui] add db for dns logs, fix wlan1 vs. wlan0, change devices * [ui] update mobile styling * [ui] add svg support for ios * [ui] add svg support for ios * [ui] use react-native-svg for icons * [ui] icon picker for ios * [ui] icon picker for ios * [ui] icons for ios * [ui] cleanup. catch if not enabled * [ui] add msg if mesh plugin is not enabled * [build] update auth configs location * [build] cleanup output * [ui] handle wifi check if not enabled --------- Co-authored-by: lts-po <[email protected]> Co-authored-by: Alex Rad <[email protected]> Co-authored-by: ltsrad <[email protected]>
jefferyq2 · Aug 2, 2023 · 99d7281 · 99d7281
1 parent 1d7e979
commit 99d7281
Show file tree

Hide file tree

Showing 25 changed files with 639 additions and 557 deletions.
diff --git a/frontend/ios/Podfile.lock b/frontend/ios/Podfile.lock
@@ -363,7 +363,7 @@ PODS:
     - React-Core
   - RNFlashList (1.4.0):
     - React-Core
-  - RNSVG (12.5.1):
+  - RNSVG (13.10.0):
     - React-Core
   - SocketRocket (0.6.0)
   - Yoga (1.14.0)
@@ -580,7 +580,7 @@ SPEC CHECKSUMS:
   RNCClipboard: 3f0451a8100393908bea5c5c5b16f96d45f30bfc
   RNCPushNotificationIOS: 87b8d16d3ede4532745e05b03c42cff33a36cc45
   RNFlashList: 399bf6a0db68f594ad2c86aaff3ea39564f39f8a
-  RNSVG: d7d7bc8229af3842c9cfc3a723c815a52cdd1105
+  RNSVG: 80584470ff1ffc7994923ea135a3e5ad825546b9
   SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
   Yoga: 99652481fcd320aefa4a7ef90095b95acd181952
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a

diff --git a/frontend/package.json b/frontend/package.json
@@ -65,7 +65,7 @@
     "react-native-macos": "^0.68.45",
     "react-native-pager-view": "^5.4.15",
     "react-native-safe-area-context": "^4.2.5",
-    "react-native-svg": "^12.4.3",
+    "react-native-svg": "^13.10.0",
     "react-native-swipe-list-view": "^3.2.9",
     "react-native-tab-view": "^3.1.1",
     "react-native-web": "^0.17.7",

diff --git a/frontend/src/FontAwesomeUtils.js b/frontend/src/FontAwesomeUtils.js
diff --git a/frontend/src/api/MockAPI.js b/frontend/src/api/MockAPI.js
@@ -48,7 +48,7 @@ export default function MockAPI() {
       })
 
       server.create('device', {
-        Name: 'rpi23',
+        Name: 'laptop',
         MAC: '22:22:22:22:22:22',
         WGPubKey: 'pubkey',
         VLANTag: 'vlantag',
@@ -63,10 +63,17 @@ export default function MockAPI() {
 
       for (let i = 3; i < 10; i++) {
         server.create('device', {
-          Name: `device-${i}`,
+          Name: `${rpick([
+            'phone',
+            'laptop',
+            'tv',
+            'desktop',
+            'iphone',
+            'android'
+          ])}`,
           MAC: Array(6).fill(`${i}${i}`).join(':'),
           WGPubKey: 'pubkey',
-          VLANTag: 'vlantag',
+          //VLANTag: 'vlantag',
           RecentIP: `192.168.2.10${i}`,
           PSKEntry: {
             Type: rpick(['wpa2', 'sae']),
@@ -1195,7 +1202,7 @@ export default function MockAPI() {
       })
 
       this.get('/version', () => {
-        return '"v0.1.0-beta.0"'
+        return '"v0.2.16"'
       })
 
       this.get('/info/hostname', () => {
@@ -1260,7 +1267,7 @@ export default function MockAPI() {
 
       this.get('/iw/dev', (schema) => {
         return {
-          phy0: {
+          phy1: {
             'wlan1.4103': {
               ifindex: '62',
               wdev: '0x9',
@@ -1273,7 +1280,7 @@ export default function MockAPI() {
               ifindex: '4',
               wdev: '0x1',
               addr: '44:a5:6e:63:c5:f2',
-              ssid: 'Ziggy',
+              ssid: 'TestAP',
               type: 'AP',
               channel: '36 (5180 MHz), width: 80 MHz, center1: 5210 MHz',
               txpower: '18.00 dBm',
@@ -1290,7 +1297,7 @@ export default function MockAPI() {
               }
             }
           },
-          phy1: {
+          phy0: {
             wlan0: {
               ifindex: '3',
               wdev: '0x100000001',
@@ -1582,12 +1589,12 @@ export default function MockAPI() {
 
       this.get('/hostapd/wlan1/all_stations', (schema) => {
         return {
-          '11:22:33:44:55:61': {
+          '11:11:11:11:11:11': {
             AKMSuiteSelector: '00-0f-ac-2',
             aid: '3',
             capability: '0x11',
             connected_time: '4946',
-            dot11RSNAStatsSTAAddress: '11:22:33:44:55:61',
+            dot11RSNAStatsSTAAddress: '11:11:11:11:11:11',
             dot11RSNAStatsSelectedPairwiseCipher: '00-0f-ac-4',
             dot11RSNAStatsTKIPLocalMICFailures: '0',
             dot11RSNAStatsTKIPRemoteMICFailures: '0',
@@ -1611,12 +1618,12 @@ export default function MockAPI() {
             vlan_id: '4247',
             wpa: '2'
           },
-          '11:22:33:44:55:62': {
+          '22:22:22:22:22:22': {
             AKMSuiteSelector: '00-0f-ac-2',
             aid: '3',
             capability: '0x11',
             connected_time: '4946',
-            dot11RSNAStatsSTAAddress: '11:22:33:44:55:61',
+            dot11RSNAStatsSTAAddress: '22:22:22:22:22:22',
             dot11RSNAStatsSelectedPairwiseCipher: '00-0f-ac-4',
             dot11RSNAStatsTKIPLocalMICFailures: '0',
             dot11RSNAStatsTKIPRemoteMICFailures: '0',
@@ -2360,7 +2367,7 @@ export default function MockAPI() {
           Size: 13344768,
           Topics: [
             'nft:wan:in',
-            'dns:serve:event',
+            'dns:serve:192.168.2.102',
             'nft:wan:out',
             'log:www:access',
             'www:auth:token:success',
@@ -2369,6 +2376,98 @@ export default function MockAPI() {
         }
       })
 
+      this.get('/plugins/db/stats/:bucket', (schema, request) => {
+        return {
+          BranchPageN: 1,
+          BranchOverflowN: 0,
+          LeafPageN: 55,
+          LeafOverflowN: 0,
+          KeyN: 383,
+          Depth: 2,
+          BranchAlloc: 4096,
+          BranchInuse: 1336,
+          LeafAlloc: 225280,
+          LeafInuse: 205673,
+          BucketN: 1,
+          InlineBucketN: 0,
+          InlineBucketInuse: 0
+        }
+      })
+
+      this.get('/plugins/db/items/:ip', (schema, request) => {
+        if (!authOK(request)) {
+          return new Response(401, {}, { error: 'invalid auth' })
+        }
+
+        let types = ['NOERROR', 'NODATA', 'OTHERERROR', 'BLOCKED']
+        let ip = request.params.ip
+        let revip = ip.split('').reverse().join('')
+        let day = 1 + parseInt(Math.random() * 28)
+        day = day.toString().padStart(2, '0')
+
+        return [
+          {
+            Q: [
+              {
+                Name: `${revip}.in-addr.arpa.`,
+                Qtype: 12,
+                Qclass: 1
+              }
+            ],
+            A: [
+              {
+                Hdr: {
+                  Name: `${revip}.in-addr.arpa.`,
+                  Rrtype: 12,
+                  Class: 1,
+                  Ttl: 30,
+                  Rdlength: 0
+                },
+                Ptr: 'rpi4.lan.'
+              }
+            ],
+            Type: 'NOERROR',
+            FirstName: `${revip}.in-addr.arpa.`,
+            FirstAnswer: 'rpi4.lan.',
+            Local: '[::]:53',
+            Remote: `${ip}:50862`,
+            Timestamp: `2022-03-${day}T08:05:34.983138386Z`
+          },
+          {
+            Q: [
+              {
+                Name: 'caldav.fe.apple-dns.net.',
+                Qtype: 65,
+                Qclass: 1
+              }
+            ],
+            A: [],
+            Type: 'NODATA',
+            FirstName: 'caldav.fe.apple-dns.net.',
+            FirstAnswer: '',
+            Local: '[::]:53',
+            Remote: `${ip}:50216`,
+            Timestamp: `2022-03-${day}T08:05:34.01579228Z`
+          },
+          {
+            Q: [
+              {
+                Name: `lb._dns-sd._udp.${revip}.in-addr.arpa.`,
+                Qtype: 12,
+                Qclass: 1
+              }
+            ],
+            A: [],
+            Type: 'OTHERERROR',
+            FirstName: `lb._dns-sd._udp.${revip}.in-addr.arpa.`,
+            FirstAnswer: '',
+            Local: '[::]:53',
+            Remote: `${ip}:64151`,
+            Timestamp: `2022-03-${day}T08:05:29.976935196Z`
+          }
+        ]
+      })
+
       this.get('/uplink/wifi', (schema, request) => {
         return {
           WPAs: [

diff --git a/frontend/src/components/DNS/DNSBlocklist.js b/frontend/src/components/DNS/DNSBlocklist.js
@@ -260,7 +260,7 @@ export default class DNSBlocklist extends React.Component {
           ) : null}
         </HStack>
 
-        <Box px={4} mb={4}>
+        <Box px={{ md: 4 }} mb={4}>
           <FlatList
             data={[...this.state.list, ...this.state.recommendedList]}
             renderItem={({ item }) => (
@@ -275,7 +275,7 @@ export default class DNSBlocklist extends React.Component {
                 p={4}
               >
                 <HStack
-                  space={3}
+                  space={2}
                   justifyContent="space-between"
                   alignItems="center"
                 >
@@ -294,13 +294,17 @@ export default class DNSBlocklist extends React.Component {
 
                   <Stack
                     flex={2}
-                    space={{ base: 2, md: 1 }}
+                    space={{ base: 1, md: 1 }}
                     alignSelf="center"
-                    alignItems="center"
+                    alignItems={{ base: 'flex-end', md: 'center' }}
                     direction={{ base: 'column', md: 'row' }}
                   >
                     {item.Enabled ? (
-                      <Badge colorScheme="success" color="success.500">
+                      <Badge
+                        variant="outline"
+                        colorScheme="success"
+                        color="success.500"
+                      >
                         Enabled
                       </Badge>
                     ) : null}

diff --git a/frontend/src/components/DNS/DNSLogHistoryList.js b/frontend/src/components/DNS/DNSLogHistoryList.js
@@ -97,6 +97,7 @@ const ListItem = ({ item, handleClickDomain, hideClient, triggerAlert }) => {
         borderLeftColor={colorByType(item.Type) + '.500'}
         py={2}
         pl={2}
+        pr={4}
       >
         <Box display={{ base: 'none', md: 'flex' }} w="20">
           <Badge variant="outline" colorScheme={colorByType(item.Type)}>

diff --git a/frontend/src/components/Dashboard/WifiWidgets.js b/frontend/src/components/Dashboard/WifiWidgets.js
@@ -42,6 +42,7 @@ export class WifiClientCount extends Component {
               numberOfWifiClients: count + connectMACsList.length
             })
           })
+          .catch((err) => {})
       })
       .catch((err) => {})
   }

diff --git a/frontend/src/components/Devices/AddDevice.js b/frontend/src/components/Devices/AddDevice.js
@@ -289,7 +289,7 @@ const AddDevice = (props) => {
             variant="underlined"
             type="password"
             autoComplete="new-password"
-            autoCorrect="off"
+            autoCorrect={false}
             onChangeText={(value) => handleChange('psk', value)}
           />
           {'psk' in errors ? (

diff --git a/frontend/src/components/Devices/Device.js b/frontend/src/components/Devices/Device.js
@@ -462,7 +462,7 @@ const Device = React.memo(({ device, showMenu, notifyChange, ...props }) => {
 
               <Text color="muted.500">{device.MAC || ' '}</Text>
 
-              {device.VLANTag != '' ? (
+              {device.VLANTag?.length ? (
                 <HStack space={1}>
                   <Text>VLAN</Text>
                   <Text bold>{device.VLANTag}</Text>

diff --git a/frontend/src/components/Devices/EditDevice.js b/frontend/src/components/Devices/EditDevice.js
@@ -444,28 +444,23 @@ const EditDevice = ({ device, notifyChange, ...props }) => {
           </HStack>
         </FormControl>
 
-        {Platform.OS == 'web' ? (
-          <Stack direction="column">
-            <FormControl flex={1}>
-              <FormControl.Label>Icon</FormControl.Label>
-              {icon ? (
-                <IconPicker
-                  value={icon}
-                  color={color}
-                  onChange={(icon) => setIcon(icon)}
-                />
-              ) : null}
-            </FormControl>
-            <FormControl>
-              <FormControl.Label>Color</FormControl.Label>
-
-              <ColorPicker
-                value={color}
-                onChange={(color) => setColor(color)}
+        <Stack direction="column">
+          <FormControl flex={1}>
+            <FormControl.Label>Icon</FormControl.Label>
+            {icon ? (
+              <IconPicker
+                value={icon}
+                color={color}
+                onChange={(icon) => setIcon(icon)}
               />
-            </FormControl>
-          </Stack>
-        ) : null}
+            ) : null}
+          </FormControl>
+          <FormControl>
+            <FormControl.Label>Color</FormControl.Label>
+
+            <ColorPicker value={color} onChange={(color) => setColor(color)} />
+          </FormControl>
+        </Stack>
 
         <ModalConfirm
           type={modalType}
-Original file line number
+Diff line change
@@ Expand Up @@
             borderLeftColor={colorByType(item.Type) + '.500'}
             py={2}
             pl={2}
+            pr={4}
           >
             <Box display={{ base: 'none', md: 'flex' }} w="20">
               <Badge variant="outline" colorScheme={colorByType(item.Type)}>
@@ Expand Down @@