Implement modal for changing credentials

CommanderRedYT · CommanderRedYT · commit 42b4843b61a1 · 2024-04-22T00:22:28.000+02:00
diff --git a/src/api/opendtuapi.ts b/src/api/opendtuapi.ts
@@ -274,12 +274,21 @@ class OpenDtuApi {
     };
   }
 
-  public async checkCredentials(
-    baseUrl: string,
-    username: string,
-    password: string,
-  ): Promise<false | OpenDTUAuthenticateResponse> {
+  public async checkCredentials({
+    username,
+    password,
+    baseUrl = this.baseUrl as string,
+  }: {
+    username: string;
+    password: string;
+    baseUrl?: string;
+  }): Promise<false | OpenDTUAuthenticateResponse> {
     // GET <url>/api/security/authenticate
+    if (!baseUrl) {
+      log.warn('checkCredentials', 'baseUrl is null');
+      return false;
+    }
+
     const authData = this.encodeCredentials(username, password);
 
     const requestOptions = {
diff --git a/src/components/modals/ChangeOpendtuCredentialsModal.tsx b/src/components/modals/ChangeOpendtuCredentialsModal.tsx
@@ -0,0 +1,175 @@
+import type { FC } from 'react';
+import { useMemo, useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Box } from 'react-native-flex-layout';
+import { logger } from 'react-native-logs';
+import type { ModalProps } from 'react-native-paper';
+import { Button, Portal, Text, useTheme } from 'react-native-paper';
+
+import { updateDtuUserString } from '@/slices/settings';
+
+import BaseModal from '@/components/BaseModal';
+import StyledTextInput from '@/components/styled/StyledTextInput';
+
+import { useApi } from '@/api/ApiHandler';
+import { defaultUser } from '@/constants';
+import { useAppDispatch, useAppSelector } from '@/store';
+
+export interface ChangeOpendtuCredentialsModalProps
+  extends Omit<ModalProps, 'children'> {
+  index: number;
+}
+
+const log = logger.createLogger();
+
+const ChangeOpendtuCredentialsModal: FC<
+  ChangeOpendtuCredentialsModalProps
+> = props => {
+  const { onDismiss, index } = props;
+  const dispatch = useAppDispatch();
+  const theme = useTheme();
+  const { t } = useTranslation();
+
+  const currentUserString = useAppSelector(
+    state => state.settings.dtuConfigs[index].userString,
+  );
+
+  const currentUsername = useMemo(() => {
+    if (!currentUserString) return null;
+
+    return atob(currentUserString).split(':')[0];
+  }, [currentUserString]);
+
+  const [username, setUsername] = useState<string>(
+    currentUsername ?? defaultUser,
+  );
+  const [password, setPassword] = useState<string>('');
+
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const openDtuApi = useApi();
+
+  useEffect(() => {
+    if (currentUsername) {
+      setUsername(currentUsername);
+    }
+  }, [currentUsername]);
+
+  const handleAbort = useCallback(() => {
+    onDismiss?.();
+  }, [onDismiss]);
+
+  const handleSave = useCallback(async () => {
+    if (!username || !password) return;
+
+    setLoading(true);
+    setError(null);
+
+    const result = await openDtuApi.checkCredentials({
+      username,
+      password,
+    });
+
+    if (result === false) {
+      setError(t('setup.errors.invalidCredentials'));
+      log.info('Invalid credentials');
+      setLoading(false);
+      return;
+    }
+
+    if (result?.authdata) {
+      onDismiss?.();
+      setPassword('');
+      setLoading(false);
+
+      dispatch(updateDtuUserString({ userString: result.authdata, index }));
+
+      return;
+    } else {
+      setError(t('setup.errors.genericError'));
+      log.info('Something went wrong! Please try again.');
+    }
+
+    setLoading(false);
+
+    onDismiss?.();
+  }, [openDtuApi, username, password, dispatch, index, onDismiss, t]);
+
+  const handleClearCredentials = useCallback(() => {
+    dispatch(updateDtuUserString({ userString: null, index }));
+    onDismiss?.();
+  }, [dispatch, index, onDismiss]);
+
+  return (
+    <Portal>
+      <BaseModal {...props}>
+        <Box p={16}>
+          <Box mb={8}>
+            <Text variant="bodyLarge">
+              {t('settings.changeOpendtuCredentials')}
+            </Text>
+          </Box>
+          <StyledTextInput
+            label={t('setup.username')}
+            mode="outlined"
+            value={username}
+            onChangeText={setUsername}
+            textContentType="username"
+            style={{ backgroundColor: theme.colors.elevation.level3 }}
+          />
+          <StyledTextInput
+            label={t('setup.password')}
+            mode="outlined"
+            value={password}
+            onChangeText={setPassword}
+            textContentType="password"
+            style={{ backgroundColor: theme.colors.elevation.level3 }}
+          />
+          {error ? (
+            <Box mt={8}>
+              <Text variant="bodySmall" style={{ color: theme.colors.error }}>
+                {error}
+              </Text>
+            </Box>
+          ) : null}
+        </Box>
+        <Box
+          style={{
+            flexDirection: 'row',
+            justifyContent: 'flex-end',
+            alignItems: 'center',
+            padding: 8,
+          }}
+        >
+          <Button
+            mode="text"
+            onPress={handleClearCredentials}
+            style={{ marginRight: 8 }}
+            disabled={loading}
+          >
+            {t('clear')}
+          </Button>
+          <Button
+            mode="text"
+            onPress={handleAbort}
+            style={{ marginRight: 8 }}
+            disabled={loading}
+          >
+            {t('cancel')}
+          </Button>
+          <Button
+            mode="text"
+            onPress={handleSave}
+            disabled={loading}
+            loading={loading}
+          >
+            {t('change')}
+          </Button>
+        </Box>
+      </BaseModal>
+    </Portal>
+  );
+};
+
+export default ChangeOpendtuCredentialsModal;
diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -2,3 +2,5 @@ export const colors = {
   success: '#4caf50',
   error: '#f44336',
 };
+
+export const defaultUser = 'admin';
diff --git a/src/slices/settings.ts b/src/slices/settings.ts
@@ -21,6 +21,7 @@ import type {
   EnableAppUpdatesAction,
   DebugEnabledAction,
   EnableFetchOpenDTUReleasesAction,
+  UpdateDtuUserStringAction,
 } from '@/types/settings';
 import { DidNotAskYet } from '@/types/settings';
 
@@ -174,6 +175,22 @@ const settingsSlice = createSlice({
 
       state.dtuConfigs[action.payload.index].baseUrl = action.payload.baseUrl;
     },
+    updateDtuUserString: (state, action: UpdateDtuUserStringAction) => {
+      if (state.dtuConfigs.length === 0) {
+        log.warn('updateDtuUserString: dtuConfigs.length === 0');
+        return;
+      }
+
+      if (state.dtuConfigs[action.payload.index] === undefined) {
+        log.warn(
+          `updateDtuUserString: dtuConfigs[${action.payload.index}] === undefined`,
+        );
+        return;
+      }
+
+      state.dtuConfigs[action.payload.index].userString =
+        action.payload.userString;
+    },
     clearSettings: () => initialState,
     setSelectedDtuToFirstOrNull: state => {
       if (state.dtuConfigs.length > 0) {
@@ -249,6 +266,7 @@ export const {
   updateDtuCustomName,
   updateDtuCustomNameIfEmpty,
   updateDtuBaseUrl,
+  updateDtuUserString,
   clearSettings,
   setSelectedDtuToFirstOrNull,
   addDatabaseConfig,
diff --git a/src/translations/translation-files b/src/translations/translation-files
@@ -1 +1 @@
-Subproject commit ceffd8a45368441694d7af333d212e3cb8f69083
+Subproject commit bc449b46b12e94ab917d0aa6184aaa4f044c8f1f
diff --git a/src/types/settings.ts b/src/types/settings.ts
@@ -89,6 +89,11 @@ export type UpdateDtuBaseURLAction = PayloadAction<{
   baseUrl: string;
 }>;
 
+export type UpdateDtuUserStringAction = PayloadAction<{
+  index: Index;
+  userString: string | null;
+}>;
+
 export type AddDatabaseConfigAction = PayloadAction<{
   config: DatabaseConfig;
 }>;
diff --git a/src/views/navigation/screens/DeviceSettingsScreen.tsx b/src/views/navigation/screens/DeviceSettingsScreen.tsx
@@ -9,6 +9,7 @@ import { setSelectedDtuConfig } from '@/slices/settings';
 import { DeviceState } from '@/types/opendtu/state';
 
 import ChangeCustomNameModal from '@/components/modals/ChangeCustomNameModal';
+import ChangeOpendtuCredentialsModal from '@/components/modals/ChangeOpendtuCredentialsModal';
 import ChangeServerUrlModal from '@/components/modals/ChangeServerUrlModal';
 import ConfirmDeleteDeviceModal from '@/components/modals/ConfirmDeleteDeviceModal';
 
@@ -43,6 +44,9 @@ const DeviceSettingsScreen: FC<PropsWithNavigation> = ({
 
   const [openServerUrlModal, setOpenServerUrlModal] = useState<boolean>(false);
 
+  const [openCredentialsModal, setOpenCredentialsModal] =
+    useState<boolean>(false);
+
   const [openDeleteModal, setOpenDeleteModal] = useState<boolean>(false);
 
   useEffect(() => {
@@ -69,6 +73,11 @@ const DeviceSettingsScreen: FC<PropsWithNavigation> = ({
     return atob(config.userString).split(':')[0];
   }, [config.userString]);
 
+  const hasPassword = useMemo(() => {
+    if (!config.userString) return false;
+    return atob(config.userString).split(':')[1] !== '';
+  }, [config.userString]);
+
   const deviceState = useAppSelector(state => state.opendtu.deviceState[index]);
 
   const hints = useLivedata(state => state?.hints);
@@ -197,6 +206,14 @@ const DeviceSettingsScreen: FC<PropsWithNavigation> = ({
               style={{ borderRadius: 8 }}
               onPress={() => setOpenServerUrlModal(true)}
             />
+            <List.Item
+              title={t('deviceSettings.opendtuCredentials')}
+              description={hasPassword ? '********' : t('deviceSettings.none')}
+              left={props => <List.Icon {...props} icon="lock" />}
+              borderless
+              style={{ borderRadius: 8 }}
+              onPress={() => setOpenCredentialsModal(true)}
+            />
             <List.Item
               title={t('deviceSettings.configureDatabase')}
               description={databaseName ?? 'Not configured'}
@@ -244,6 +261,11 @@ const DeviceSettingsScreen: FC<PropsWithNavigation> = ({
           onDismiss={() => setOpenServerUrlModal(false)}
           index={index}
         />
+        <ChangeOpendtuCredentialsModal
+          visible={openCredentialsModal}
+          onDismiss={() => setOpenCredentialsModal(false)}
+          index={index}
+        />
         <ConfirmDeleteDeviceModal
           visible={openDeleteModal}
           onDismiss={() => setOpenDeleteModal(false)}
diff --git a/src/views/navigation/screens/SetupAuthenticateOpenDTUInstanceScreen.tsx b/src/views/navigation/screens/SetupAuthenticateOpenDTUInstanceScreen.tsx
@@ -19,6 +19,7 @@ import { DeviceState } from '@/types/opendtu/state';
 import StyledTextInput from '@/components/styled/StyledTextInput';
 
 import { useApi } from '@/api/ApiHandler';
+import { defaultUser } from '@/constants';
 import { useAppDispatch, useAppSelector } from '@/store';
 import { StyledSafeAreaView } from '@/style';
 import type { PropsWithNavigation } from '@/views/navigation/NavigationStack';
@@ -38,7 +39,7 @@ const SetupAuthenticateOpenDTUInstanceScreen: FC<PropsWithNavigation> = ({
 
   const previousStepValid = address !== null;
 
-  const [username, setUsername] = useState<string | null>('admin');
+  const [username, setUsername] = useState<string | null>(defaultUser);
   const [password, setPassword] = useState<string | null>(null);
   const [visible, setVisible] = useState<boolean>(false);
 
@@ -53,11 +54,11 @@ const SetupAuthenticateOpenDTUInstanceScreen: FC<PropsWithNavigation> = ({
     setLoading(true);
     setError(null);
 
-    const result = await openDtuApi.checkCredentials(
-      address,
+    const result = await openDtuApi.checkCredentials({
+      baseUrl: address,
       username,
       password,
-    );
+    });
 
     if (result === false) {
       setError(t('setup.errors.invalidCredentials'));
