merging dashboard into app

app/mobile/__tests__/Access.test.js

@@ -89,8 +89,6 @@ beforeEach(() => {
   React.useContext = mockUseContext;
 
   const mockFetch = jest.fn().mockImplementation((url, options) => {
-console.log(url);
-
     return Promise.resolve({
       json: () => Promise.resolve({
         guid: '123',

app/mobile/ios/Databag.xcodeproj/project.pbxproj

@@ -567,7 +567,7 @@
 			buildSettings = {
 				ALWAYS_SEARCH_USER_PATHS = NO;
 				CLANG_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES;
-				CLANG_CXX_LANGUAGE_STANDARD = "c++17";
+				CLANG_CXX_LANGUAGE_STANDARD = "c++14";
 				CLANG_CXX_LIBRARY = "libc++";
 				CLANG_ENABLE_MODULES = YES;
 				CLANG_ENABLE_OBJC_ARC = YES;
@@ -639,7 +639,7 @@
 			buildSettings = {
 				ALWAYS_SEARCH_USER_PATHS = NO;
 				CLANG_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES;
-				CLANG_CXX_LANGUAGE_STANDARD = "c++17";
+				CLANG_CXX_LANGUAGE_STANDARD = "c++14";
 				CLANG_CXX_LIBRARY = "libc++";
 				CLANG_ENABLE_MODULES = YES;
 				CLANG_ENABLE_OBJC_ARC = YES;

app/mobile/ios/Podfile.lock

@@ -414,6 +414,8 @@ PODS:
     - React-jsi (= 0.71.3)
     - React-logger (= 0.71.3)
     - React-perflogger (= 0.71.3)
+  - RNCClipboard (1.11.1):
+    - React-Core
   - RNDeviceInfo (10.4.0):
     - React-Core
   - RNFBApp (17.2.0):
@@ -496,6 +498,7 @@ DEPENDENCIES:
   - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
   - React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
+  - "RNCClipboard (from `../node_modules/@react-native-clipboard/clipboard`)"
   - RNDeviceInfo (from `../node_modules/react-native-device-info`)
   - "RNFBApp (from `../node_modules/@react-native-firebase/app`)"
   - "RNFBMessaging (from `../node_modules/@react-native-firebase/messaging`)"
@@ -592,6 +595,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/runtimeexecutor"
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
+  RNCClipboard:
+    :path: "../node_modules/@react-native-clipboard/clipboard"
   RNDeviceInfo:
     :path: "../node_modules/react-native-device-info"
   RNFBApp:
@@ -656,6 +661,7 @@ SPEC CHECKSUMS:
   React-RCTVibration: 5199a180d04873366a83855de55ac33ce60fe4d5
   React-runtimeexecutor: 7bf0dafc7b727d93c8cb94eb00a9d3753c446c3e
   ReactCommon: 5f9a24e64c1c3e2b719014f07cb2acf628983000
+  RNCClipboard: 2834e1c4af68697089cdd455ee4a4cdd198fa7dd
   RNDeviceInfo: 749f2e049dcd79e2e44f134f66b73a06951b5066
   RNFBApp: 4f8ea53443d52c7db793234d2398a357fc6cfbf1
   RNFBMessaging: c686471358d20d54f716a8b7b7f10f8944c966ec

app/mobile/package.json

@@ -10,6 +10,7 @@
     "test": "jest"
   },
   "dependencies": {
+    "@react-native-clipboard/clipboard": "^1.11.1",
     "@react-native-firebase/app": "^17.2.0",
     "@react-native-firebase/messaging": "^17.2.0",
     "@react-navigation/bottom-tabs": "^6.5.5",

app/mobile/src/api/getNodeStatus.js

@@ -1,7 +1,7 @@
 import { checkResponse, fetchWithTimeout } from './fetchUtil';
 
 export async function getNodeStatus(server) {
-  let status = await fetchWithTimeout(`http://${server}/admin/status`, { method: 'GET' });
+  let status = await fetchWithTimeout(`https://${server}/admin/status`, { method: 'GET' });
   checkResponse(status);
   return await status.json();
 }

app/mobile/src/api/setNodeStatus.js

@@ -1,7 +1,7 @@
 import { checkResponse, fetchWithTimeout } from './fetchUtil';
 
 export async function setNodeStatus(server, token) {
-  let status = await fetchWithTimeout(`http://${server}/admin/status?token=${token}`, { method: 'PUT' });
+  let status = await fetchWithTimeout(`https://${server}/admin/status?token=${token}`, { method: 'PUT' });
   checkResponse(status);
 }
 

app/mobile/src/context/useStoreContext.hook.js

@@ -1,7 +1,7 @@
 import { useEffect, useState, useRef, useContext } from 'react';
 import SQLite from "react-native-sqlite-storage";
 
-const DATABAG_DB = 'db_v_101.db';
+const DATABAG_DB = 'db_v_102.db';
 
 export function useStoreContext() {
   const [state, setState] = useState({});

app/mobile/src/dashboard/Dashboard.jsx

@@ -1,11 +1,284 @@
-import { Text } from 'react-native';
+import { TextInput, Alert, Switch, TouchableOpacity, View, Text, Modal, FlatList, KeyboardAvoidingView } from 'react-native';
+import Clipboard from '@react-native-clipboard/clipboard';
+import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
+import AntIcon from 'react-native-vector-icons/AntDesign';
+import MatIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { styles } from './Dashboard.styled';
+import { useLocation } from 'react-router-dom';
 import { useDashboard } from './useDashboard.hook';
+import { Logo } from 'utils/Logo';
 
 export function Dashboard(props) {
 
+  const location = useLocation();
+  const { config, server, token } = location.state;
   const { state, actions } = useDashboard(config, server, token); 
 
-  return <Text>DASHBOARD</Text>;
+  const saveConfig = async () => {
+    try {
+      await actions.saveConfig();
+      actions.hideEditConfig();
+    }
+    catch (err) {
+      console.log(err);
+      Alert.alert(
+        'Failed to Save Settings',
+        'Please try again.',
+      );
+    }
+  }
+
+  const addUser = async () => {
+    try {
+      await actions.addUser();
+    }
+    catch (err) {
+      console.log(err);
+      Alert.alert(
+        'Failed to Generate Access Token',
+        'Please try again.',
+      );
+    }
+  }
+
+  const accessUser = async (accountId) => {
+    try {
+      await actions.accessUser(accountId);
+    }
+    catch (err) {
+      console.log(err);
+      Alert.alert(
+        'Failed to Generate Access Token',
+        'Please try again.',
+      );
+    }
+  }
+
+  const removeUser = (accountId) => {
+    Alert.alert(
+      "Deleting Account",
+      "Confirm?",
+      [
+        { text: "Cancel", onPress: () => {}, },
+        { text: "Delete", onPress: async() => {
+          try {
+            await actions.removeUser(accountId);
+          }
+          catch (err) {
+            console.log(err);
+            Alert.alert(
+              "Failed to Delete Account",
+              "Please try again.",
+            );
+          }
+        }}
+      ]
+    )
+  }
+
+  const enableUser = async (accountId, enabled) => {
+    try {
+      await actions.enableUser(accountId, enabled);
+    }
+    catch (err) {
+      console.log(err);
+      Alert.alert(
+        'Failed to Update Account',
+        'Please try again.',
+      );
+    }
+  }
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.header}>
+        <Text style={styles.headerLabel}>Accounts</Text>
+        <TouchableOpacity onPress={actions.refresh}>
+          <AntIcon style={styles.icon} name={'reload1'} size={20} />
+        </TouchableOpacity>
+        <TouchableOpacity onPress={actions.showEditConfig}>
+          <AntIcon style={styles.icon} name={'setting'} size={20} />
+        </TouchableOpacity>
+        <TouchableOpacity onPress={actions.logout}>
+          <AntIcon style={styles.icon} name={'logout'} size={20} /> 
+        </TouchableOpacity>
+        <View style={styles.end}>
+          <TouchableOpacity onPress={addUser}>
+            <AntIcon style={styles.icon} name={'adduser'} size={24} /> 
+          </TouchableOpacity>
+        </View>       
+      </View>
+      <View style={styles.accounts}>
+        <FlatList style={styles.lit} 
+          data={state.accounts}
+          keyExtractor={item => item.accountId}
+          renderItem={({ item }) => (
+            <View style={styles.account}>
+              <Logo src={item.logo} width={32} height={32} radius={4} />
+              <View style={styles.details}>
+                <Text style={styles.name}>{ item.name }</Text>
+                <Text style={styles.handle}>{ item.handle }</Text>
+              </View>
+              <View style={styles.control}>
+                <TouchableOpacity onPress={() => accessUser(item.accountId)}>
+                  <AntIcon style={styles.icon} name={'unlock'} size={20} /> 
+                </TouchableOpacity>
+                { item.disabled && (
+                  <TouchableOpacity onPress={() => enableUser(item.accountId, true)}>
+                    <AntIcon style={styles.disable} name={'playcircleo'} size={20} />
+                  </TouchableOpacity>
+                )}
+                { !item.disabled && (
+                  <TouchableOpacity onPress={() => enableUser(item.accountId, false)}>
+                    <MatIcon style={styles.disable} name={'block-helper'} size={20} />
+                  </TouchableOpacity>
+                )}
+                <TouchableOpacity onPress={() => removeUser(item.accountId)}>
+                  <AntIcon style={styles.delete} name={'deleteuser'} size={20} />
+                </TouchableOpacity> 
+              </View>
+            </View>
+          )}
+        />
+      </View>
+
+      <Modal
+        animationType="fade"
+        transparent={true}
+        visible={state.editConfig}
+        supportedOrientations={['portrait', 'landscape']}
+        onRequestClose={actions.hideEditConfig}
+      >
+        <KeyboardAvoidingView behavior="height" style={styles.modalBackground}>
+          <View style={styles.modalContainer}>
+            <View style={styles.modalHeader}>
+              <Text style={styles.modalHeaderText}>Settings:</Text>
+            </View>
+            <View style={styles.modalBody}>
+              <TextInput style={styles.input} value={state.domain} onChangeText={actions.setDomain}
+                  autoCorrect={false} autoCapitalize="none" placeholder="Federated Host" />
+              <TextInput style={styles.input} value={state.storage}
+                  onChangeText={actions.setStorage}
+                  keyboardType='numeric' placeholder="Storage Limit (GB) / Account" />
+              <Text style={styles.modalLabel}>Account Key Type:</Text>
+              <View style={styles.keyType}>
+                <TouchableOpacity style={styles.optionLeft} activeOpacity={1}
+                    onPress={() => actions.setKeyType('RSA2048')}>
+                  { state.keyType === 'RSA2048' && (
+                    <View style={styles.selected} />
+                  )}
+                  { state.keyType === 'RSA4096' && (
+                    <View style={styles.radio} />
+                  )}
+                  <Text style={styles.option}>RSA 2048</Text>
+                </TouchableOpacity>
+                <TouchableOpacity style={styles.optionRight} activeOpacity={1}
+                    onPress={() => actions.setKeyType('RSA4096')}>
+                  { state.keyType === 'RSA2048' && (
+                    <View style={styles.radio} />
+                  )}
+                  { state.keyType === 'RSA4096' && (
+                    <View style={styles.selected} />
+                  )}
+                  <Text style={styles.option}>RSA 4096</Text>
+                </TouchableOpacity>
+              </View>
+
+              <TouchableOpacity style={styles.media} activeOpacity={1}
+                  onPress={() => actions.setPushSupported(!state.pushSupported)}>
+                <Text style={styles.modalLabel}>Enable Push Notifications: </Text>
+                <Switch style={styles.switch} value={state.pushSupported}
+                  onValueChange={actions.setPushSupported} trackColor={styles.track}/>
+              </TouchableOpacity>
+
+              <TouchableOpacity style={styles.media} activeOpacity={1}
+                  onPress={() => actions.setEnableImage(!state.enableImage)}>
+                <Text style={styles.modalLabel}>Enable Image Queue: </Text>
+                <Switch style={styles.switch} value={state.enableImage}
+                  onValueChange={actions.setEnableImage} trackColor={styles.track}/>
+              </TouchableOpacity>
+              <TouchableOpacity style={styles.media} activeOpacity={1}
+                  onPress={() => actions.setEnableAudio(!state.enableAudio)}>
+                <Text style={styles.modalLabel}>Enable Audio Queue: </Text>
+                <Switch style={styles.switch} value={state.enableAudio}
+                  onValueChange={actions.setEnableAudio} trackColor={styles.track}/>
+              </TouchableOpacity>
+              <TouchableOpacity style={styles.media} activeOpacity={1}
+                  onPress={() => actions.setEnableVideo(!state.enableVideo)}>
+                <Text style={styles.modalLabel}>Enable Video Queue: </Text>
+                <Switch style={styles.switch} value={state.enableVideo}
+                  onValueChange={actions.setEnableVideo} trackColor={styles.track}/>
+              </TouchableOpacity>
+            </View>
+            <View style={styles.modalControls}>
+              <TouchableOpacity style={styles.cancel} onPress={actions.hideEditConfig}>
+                <Text>Cancel</Text>
+              </TouchableOpacity>
+              <TouchableOpacity style={styles.save} onPress={saveConfig}>
+                <Text style={styles.saveText}>Save</Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </KeyboardAvoidingView>
+      </Modal>
+
+      <Modal
+        animationType="fade"
+        transparent={true}
+        visible={state.addUser}
+        supportedOrientations={['portrait', 'landscape']}
+        onRequestClose={actions.hideAddUser}
+      >
+        <KeyboardAvoidingView behavior="height" style={styles.modalBackground}>
+          <View style={styles.modalContainer}>
+            <View style={styles.modalHeader}>
+              <Text style={styles.modalHeaderText}>Create Account:</Text>
+            </View>
+            <View style={styles.accessToken}>
+              <Text style={styles.tokenLabel}>Token:</Text>
+              <TouchableOpacity style={styles.copy} onPress={() => Clipboard.setString(state.createToken)}>
+                <Text style={styles.token}>{ state.createToken }</Text>
+                <AntIcon style={styles.icon} name={'copy1'} size={20} /> 
+              </TouchableOpacity>
+            </View>
+            <View style={styles.modalControls}>
+              <TouchableOpacity style={styles.cancel} onPress={actions.hideAddUser}>
+                <Text>Done</Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </KeyboardAvoidingView>
+      </Modal>
+
+      <Modal
+        animationType="fade"
+        transparent={true}
+        visible={state.accessUser}
+        supportedOrientations={['portrait', 'landscape']}
+        onRequestClose={actions.hideAccessUser}
+      >
+        <KeyboardAvoidingView behavior="height" style={styles.modalBackground}>
+          <View style={styles.modalContainer}>
+            <View style={styles.modalHeader}>
+              <Text style={styles.modalHeaderText}>Access Account:</Text>
+            </View>
+            <View style={styles.accessToken}>
+              <Text style={styles.tokenLabel}>Token:</Text>
+              <TouchableOpacity style={styles.copy} onPress={() => Clipboard.setString(state.accessToken)}>
+                <Text style={styles.token}>{ state.accessToken }</Text>
+                <AntIcon style={styles.icon} name={'copy1'} size={20} />  
+              </TouchableOpacity>
+            </View>
+            <View style={styles.modalControls}>
+              <TouchableOpacity style={styles.cancel} onPress={actions.hideAccessUser}>
+                <Text>Done</Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </KeyboardAvoidingView>
+      </Modal>
+
+    </SafeAreaView>
+  )
 }
 

app/mobile/yarn.lock

@@ -1492,6 +1492,11 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@react-native-clipboard/clipboard@^1.11.1":
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/@react-native-clipboard/clipboard/-/clipboard-1.11.1.tgz#d3a9e685ce2383b1e92b89a334896c5575cc103d"
+  integrity sha512-nvSIIHzybVWqYxcJE5hpT17ekxAAg383Ggzw5WrYHtkKX61N1AwaKSNmXs5xHV7pmKSOe/yWjtSwxIzfW51I5Q==
+
 "@react-native-community/cli-clean@^10.1.1":
   version "10.1.1"
   resolved "https://registry.npmjs.org/@react-native-community/cli-clean/-/cli-clean-10.1.1.tgz"