Implement anonymous login

Author: CommanderRedYT

package.json

@@ -16,6 +16,7 @@
     "ios": "react-native run-ios",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
+    "typecheck": "tsc --noEmit",
     "start": "react-native start",
     "test": "jest --passWithNoTests",
     "postinstall": "yarn run npm-license-crawler -onlyDirectDependencies -json licenses.json && patch-package",

src/api/opendtuapi.ts

@@ -69,7 +69,7 @@ class OpenDtuApi {
     this.baseUrl = baseUrl;
   }
 
-  public setUserString(userString: string): void {
+  public setUserString(userString: string | null): void {
     this.userString = userString;
   }
 
@@ -142,7 +142,7 @@ class OpenDtuApi {
     this.onDisconnectedHandler = null;
   }
 
-  private async getSystemStatusFromUrl(
+  public async getSystemStatusFromUrl(
     url: URL,
   ): Promise<GetSystemStatusReturn> {
     // GET <url>/api/system/status
@@ -288,13 +288,15 @@ class OpenDtuApi {
       return;
     }
 
-    if (this.baseUrl && this.userString) {
+    if (this.baseUrl) {
       const urlObject = new URL(this.baseUrl);
       const authString = this.getAuthString();
       const protocol = urlObject.protocol === 'https:' ? 'wss' : 'ws';
       const host = urlObject.host;
 
-      const url = `${protocol}://${authString}${host}/livedata`;
+      const url = `${protocol}://${authString ?? ''}${host}/livedata`;
+
+      console.log(`Connecting websocket to ${url}`);
 
       this.ws = new WebSocket(url);
 
@@ -466,9 +468,13 @@ class OpenDtuApi {
     );
   }
 
-  private getAuthString(): string {
+  private getAuthString(): string | null {
     let user = null;
 
+    if (!this.userString) {
+      return null;
+    }
+
     try {
       user = JSON.parse(this.userString || '');
     } catch {
@@ -492,6 +498,10 @@ class OpenDtuApi {
       'GET',
     );
 
+    if (!res) {
+      return null;
+    }
+
     if (res.status === 200) {
       return await res.json();
     }
@@ -506,6 +516,10 @@ class OpenDtuApi {
 
     const res = await this.makeAuthenticatedRequest('/api/ntp/status', 'GET');
 
+    if (!res) {
+      return null;
+    }
+
     if (res.status === 200) {
       return await res.json();
     }
@@ -520,6 +534,10 @@ class OpenDtuApi {
 
     const res = await this.makeAuthenticatedRequest('/api/mqtt/status', 'GET');
 
+    if (!res) {
+      return null;
+    }
+
     if (res.status === 200) {
       return await res.json();
     }
@@ -531,7 +549,7 @@ class OpenDtuApi {
     route: string,
     method: string,
     body: string | null = null,
-  ): Promise<Response> {
+  ): Promise<Response | null> {
     const authString = this.getAuthString();
 
     const controller = new AbortController();
@@ -546,8 +564,8 @@ class OpenDtuApi {
       signal: controller.signal,
       headers: {
         'X-Requested-With': 'XMLHttpRequest',
-        Authorization: 'Basic ' + authString,
         'Content-Type': 'application/json',
+        ...(authString ? { Authorization: 'Basic ' + authString } : {}),
       },
     };
 
@@ -558,12 +576,16 @@ class OpenDtuApi {
     const url = `${authString}${this.baseUrl}${route}`;
 
     console.log('makeAuthenticatedRequest', url, requestOptions);
-    const res = await fetch(url, requestOptions);
-    if (res.status === 200) {
+
+    try {
+      const res = await fetch(url, requestOptions);
       clearTimeout(abortTimeout);
-    }
 
-    return res;
+      return res;
+    } catch (error) {
+      console.log('makeAuthenticatedRequest error', error);
+      return null;
+    }
   }
 }
 

src/translations/translation-files

@@ -32,7 +32,7 @@ export type SetSystemStatusAction = PayloadAction<{
 }>;
 
 export type SetSetupUserStringAction = PayloadAction<{
-  userString: string;
+  userString: string | null;
 }>;
 
 export type SetSetupBaseUrlAction = PayloadAction<{

src/types/opendtu/state.ts

@@ -7,7 +7,7 @@ export type Index = number;
 export interface OpenDTUConfig {
   // Config to connect to OpenDTU. It will be possible to configure multiple
   baseUrl: string;
-  userString: string; // same as 'user' from webinterface localstorage
+  userString: string | null; // same as 'user' from webinterface localstorage (null means no auth, so read-only)
   serialNumber: string | null; // null means never connected
   hostname: string | null; // null means never connected
   customName: string | null; // null means customName is not set

src/types/settings.ts

@@ -59,7 +59,7 @@ const SetupAddOpenDTUScreen: FC<PropsWithNavigation> = ({ navigation }) => {
     try {
       url = new URL(ourAddress);
     } catch {
-      setError('Invalid address');
+      setError(t('setup.errors.invalidAddress'));
       return;
     }
 
@@ -110,7 +110,7 @@ const SetupAddOpenDTUScreen: FC<PropsWithNavigation> = ({ navigation }) => {
     navigation.navigate('SetupAuthenticateOpenDTUInstanceScreen');
 
     setLoading(false);
-  }, [address, baseUrls, dispatch, navigation, openDtuApi]);
+  }, [t, address, baseUrls, dispatch, navigation, openDtuApi]);
 
   const valid = !!address;
 

src/views/navigation/screens/SetupAddOpenDTUScreen.tsx

@@ -5,6 +5,7 @@ import { Box } from 'react-native-flex-layout';
 import { logger } from 'react-native-logs';
 import {
   Button,
+  Divider,
   HelperText,
   TextInput,
   Title,
@@ -13,6 +14,8 @@ import {
 
 import { setSetupUserString } from '@/slices/opendtu';
 
+import { DeviceState } from '@/types/opendtu/state';
+
 import StyledTextInput from '@/components/styled/StyledTextInput';
 
 import { useApi } from '@/api/ApiHandler';
@@ -57,7 +60,7 @@ const SetupAuthenticateOpenDTUInstanceScreen: FC<PropsWithNavigation> = ({
     );
 
     if (result === false) {
-      setError('Invalid credentials');
+      setError(t('setup.errors.invalidCredentials'));
       log.info('Invalid credentials');
       setLoading(false);
       return;
@@ -70,12 +73,40 @@ const SetupAuthenticateOpenDTUInstanceScreen: FC<PropsWithNavigation> = ({
 
       return;
     } else {
-      setError('Something went wrong! Please try again.');
+      setError(t('setup.errors.genericError'));
       log.info('Something went wrong! Please try again.');
     }
 
     setLoading(false);
-  }, [address, username, password, openDtuApi, dispatch, navigation]);
+  }, [t, address, username, password, openDtuApi, dispatch, navigation]);
+
+  const handleAnonymous = useCallback(async () => {
+    if (!address) return;
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const result = await openDtuApi.getSystemStatusFromUrl(new URL(address));
+
+      if (result.deviceState !== DeviceState.Reachable) {
+        setError('Invalid credentials');
+        log.info('Invalid credentials');
+        setLoading(false);
+        return;
+      }
+
+      dispatch(setSetupUserString({ userString: null }));
+      navigation.navigate('SetupOpenDTUCompleteScreen');
+      setLoading(false);
+
+      setLoading(false);
+    } catch (e) {
+      setError(t('setup.errors.genericError'));
+      log.info('Error while connecting to OpenDTU instance', e);
+      setLoading(false);
+    }
+  }, [address, openDtuApi, dispatch, navigation, t]);
 
   return (
     <StyledSafeAreaView theme={theme} style={{ justifyContent: 'center' }}>
@@ -131,6 +162,15 @@ const SetupAuthenticateOpenDTUInstanceScreen: FC<PropsWithNavigation> = ({
         >
           {t('setup.login')}
         </Button>
+        <Divider />
+        <Button
+          // anonymous button
+          mode="text"
+          onPress={handleAnonymous}
+          disabled={loading || !previousStepValid}
+        >
+          {t('setup.anonymous')}
+        </Button>
       </Box>
     </StyledSafeAreaView>
   );

src/views/navigation/screens/SetupAuthenticateOpenDTUInstanceScreen.tsx

@@ -21,7 +21,7 @@ const SetupOpenDTUCompleteScreen: FC<PropsWithNavigation> = ({
   const setupConfig = useAppSelector(state => state.opendtu.setup);
 
   const handleFinishSetup = useCallback(() => {
-    if (!setupConfig.userString || !setupConfig.baseUrl) return;
+    if (!setupConfig.baseUrl) return;
 
     dispatch(
       addDtuConfig({

src/views/navigation/screens/SetupOpenDTUCompleteScreen.tsx

@@ -2,7 +2,7 @@ import type { NavigationProp, ParamListBase } from '@react-navigation/native';
 import { useNavigation } from '@react-navigation/native';
 
 import type { FC } from 'react';
-import { useCallback, useState } from 'react';
+import { useMemo, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ScrollView } from 'react-native';
 import { Box } from 'react-native-flex-layout';
@@ -11,6 +11,7 @@ import { Badge, List, useTheme } from 'react-native-paper';
 import ChangeLanguageModal from '@/components/modals/ChangeLanguageModal';
 import ChangeThemeModal from '@/components/modals/ChangeThemeModal';
 
+import useDtuState from '@/hooks/useDtuState';
 import useHasNewAppVersion from '@/hooks/useHasNewAppVersion';
 import useIsConnected from '@/hooks/useIsConnected';
 
@@ -39,6 +40,28 @@ const MainSettingsTab: FC = () => {
     usedForIndicatorOnly: true,
   });
 
+  const hasSystemInformation = !!useDtuState(state => !!state?.systemStatus);
+  const hasNetworkInformation = !!useDtuState(state => !!state?.networkStatus);
+  const hasNtpInformation = !!useDtuState(state => !!state?.ntpStatus);
+  const hasMqttInformation = !!useDtuState(state => !!state?.mqttStatus);
+
+  const systemInformationDisabled = useMemo(
+    () => !hasSystemInformation || !websocketConnected,
+    [hasSystemInformation, websocketConnected],
+  );
+  const networkInformationDisabled = useMemo(
+    () => !hasNetworkInformation || !websocketConnected,
+    [hasNetworkInformation, websocketConnected],
+  );
+  const ntpInformationDisabled = useMemo(
+    () => !hasNtpInformation || !websocketConnected,
+    [hasNtpInformation, websocketConnected],
+  );
+  const mqttInformationDisabled = useMemo(
+    () => !hasMqttInformation || !websocketConnected,
+    [hasMqttInformation, websocketConnected],
+  );
+
   const handleAbout = useCallback(() => {
     navigation.navigate('AboutSettingsScreen');
   }, [navigation]);
@@ -74,32 +97,32 @@ const MainSettingsTab: FC = () => {
               description={t('opendtu.systemInformationDescription')}
               left={props => <List.Icon {...props} icon="information" />}
               onPress={handleAboutOpenDTU}
-              disabled={!websocketConnected}
-              style={{ opacity: websocketConnected ? 1 : 0.5 }}
+              disabled={systemInformationDisabled}
+              style={{ opacity: systemInformationDisabled ? 0.5 : 1 }}
             />
             <List.Item
               title={t('opendtu.networkInformation')}
               description={t('opendtu.networkInformationDescription')}
               left={props => <List.Icon {...props} icon="wifi" />}
               onPress={handleNetworkInformation}
-              disabled={!websocketConnected}
-              style={{ opacity: websocketConnected ? 1 : 0.5 }}
+              disabled={networkInformationDisabled}
+              style={{ opacity: networkInformationDisabled ? 0.5 : 1 }}
             />
             <List.Item
               title={t('opendtu.ntpInformation')}
               description={t('opendtu.ntpInformationDescription')}
               left={props => <List.Icon {...props} icon="clock" />}
               onPress={handleNtpInformation}
-              disabled={!websocketConnected}
-              style={{ opacity: websocketConnected ? 1 : 0.5 }}
+              disabled={ntpInformationDisabled}
+              style={{ opacity: ntpInformationDisabled ? 0.5 : 1 }}
             />
             <List.Item
               title={t('opendtu.mqttInformation')}
               description={t('opendtu.mqttInformationDescription')}
               left={props => <List.Icon {...props} icon="broadcast" />}
               onPress={handleMqttInformation}
-              disabled={!websocketConnected}
-              style={{ opacity: websocketConnected ? 1 : 0.5 }}
+              disabled={mqttInformationDisabled}
+              style={{ opacity: mqttInformationDisabled ? 0.5 : 1 }}
             />
           </List.Section>
           <List.Section>