Skip to content

Commit 24bae5e

Browse files
CommanderRedYTCommanderRedYT
authored
Merge pull request #177 from OpenDTU-App/174-hide-settings-when-no-password-was-provided
2 parents fa00fa7 + eb85127 commit 24bae5e

File tree

3 files changed

+104
-58
lines changed

3 files changed

+104
-58
lines changed

‎src/translations/translation-files‎

‎src/views/navigation/screens/DeviceGroup/DeviceSettingsScreen.tsx‎

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,32 @@ const DeviceSettingsScreen: FC<PropsWithNavigation> = ({
2727
route,
2828
}) => {
2929
const { params } = route;
30-
const { index } = params as { index: number };
30+
const { index, highlightAuth } = params as {
31+
index: number;
32+
highlightAuth?: boolean;
33+
};
3134
const theme = useTheme();
3235
const dispatch = useAppDispatch();
3336
const { t } = useTranslation();
3437

38+
const [isHighlighted, setIsHighlighted] = useState<boolean>(false);
39+
40+
useEffect(() => {
41+
let timeout: NodeJS.Timeout | null = null;
42+
43+
if (highlightAuth) {
44+
setIsHighlighted(true);
45+
timeout = setTimeout(() => setIsHighlighted(false), 2500);
46+
}
47+
48+
return () => {
49+
if (timeout) {
50+
clearTimeout(timeout);
51+
setIsHighlighted(false);
52+
}
53+
};
54+
}, [highlightAuth]);
55+
3556
const hasConfigs = useAppSelector(
3657
state => state.settings.dtuConfigs.length > 0,
3758
);
@@ -231,7 +252,12 @@ const DeviceSettingsScreen: FC<PropsWithNavigation> = ({
231252
description={hasPassword ? '********' : t('notConfigured')}
232253
left={props => <List.Icon {...props} icon="lock" />}
233254
borderless
234-
style={{ borderRadius: 8 }}
255+
style={{
256+
borderRadius: 8,
257+
backgroundColor: isHighlighted
258+
? theme.colors.elevation.level3
259+
: undefined,
260+
}}
235261
onPress={() => setOpenCredentialsModal(true)}
236262
/>
237263
<List.Item

‎src/views/navigation/tabs/MainSettingsTab.tsx‎

Lines changed: 75 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@ import { setDebugEnabled } from '@/slices/settings';
1212
import ChangeLanguageModal from '@/components/modals/ChangeLanguageModal';
1313
import ChangeThemeModal from '@/components/modals/ChangeThemeModal';
1414

15+
import useDeviceIndex from '@/hooks/useDeviceIndex';
1516
import useDtuState from '@/hooks/useDtuState';
17+
import useHasAuthConfigured from '@/hooks/useHasAuthConfigured';
1618
import useHasNewAppVersion from '@/hooks/useHasNewAppVersion';
1719
import useHasNewOpenDtuVersion from '@/hooks/useHasNewOpenDtuVersion';
1820
import useIsConnected from '@/hooks/useIsConnected';
@@ -30,9 +32,12 @@ const MainSettingsTab: FC = () => {
3032
const navigation = useNavigation() as NavigationProp<ParamListBase>;
3133
const { t } = useTranslation();
3234
const dispatch = useDispatch();
35+
const index = useDeviceIndex();
3336

3437
const theme = useTheme();
3538

39+
const hasAuthConfigured = useHasAuthConfigured();
40+
3641
const [showChangeThemeModal, setShowChangeThemeModal] =
3742
useState<boolean>(false);
3843

@@ -124,67 +129,82 @@ const MainSettingsTab: FC = () => {
124129

125130
const handleUnlockDebug = useRequireMultiplePresses(enableDebugMode);
126131

132+
const handleNavigateToAuth = useCallback((): void => {
133+
navigation.navigate('DeviceSettingsScreen', { index, highlightAuth: true });
134+
}, [index, navigation]);
135+
127136
return (
128137
<StyledView theme={theme}>
129138
<Box style={{ width: '100%', flex: 1 }}>
130139
<ScrollView>
131140
<List.Section>
132141
<List.Subheader>{t('settings.title')}</List.Subheader>
133-
<List.Item
134-
title={t('settings.networkSettings.title')}
135-
description={t('settings.networkSettings.description')}
136-
left={props => <List.Icon {...props} icon="wifi" />}
137-
onPress={handleNetworkSettings}
138-
/>
139-
<List.Item
140-
title={t('settings.ntpSettings.title')}
141-
description={t('settings.ntpSettings.description')}
142-
left={props => <List.Icon {...props} icon="clock" />}
143-
disabled
144-
style={{ opacity: 0.5 }}
145-
/>
146-
<List.Item
147-
title={t('settings.mqttSettings.title')}
148-
description={t('settings.mqttSettings.description')}
149-
left={props => <List.Icon {...props} icon="broadcast" />}
150-
disabled
151-
style={{ opacity: 0.5 }}
152-
/>
153-
<List.Item
154-
title={t('settings.inverterSettings.title')}
155-
description={t('settings.inverterSettings.description')}
156-
left={props => <List.Icon {...props} icon="solar-panel" />}
157-
disabled
158-
style={{ opacity: 0.5 }}
159-
/>
160-
<List.Item
161-
title={t('settings.securitySettings.title')}
162-
description={t('settings.securitySettings.description')}
163-
left={props => <List.Icon {...props} icon="lock" />}
164-
disabled
165-
style={{ opacity: 0.5 }}
166-
/>
167-
<List.Item
168-
title={t('settings.dtuSettings.title')}
169-
description={t('settings.dtuSettings.description')}
170-
left={props => <List.Icon {...props} icon="cog" />}
171-
disabled
172-
style={{ opacity: 0.5 }}
173-
/>
174-
<List.Item
175-
title={t('settings.hardwareSettings.title')}
176-
description={t('settings.hardwareSettings.description')}
177-
left={props => <List.Icon {...props} icon="chip" />}
178-
disabled
179-
style={{ opacity: 0.5 }}
180-
/>
181-
<List.Item
182-
title={t('settings.configManagement.title')}
183-
description={t('settings.configManagement.description')}
184-
left={props => <List.Icon {...props} icon="file" />}
185-
disabled
186-
style={{ opacity: 0.5 }}
187-
/>
142+
{hasAuthConfigured ? (
143+
<>
144+
<List.Item
145+
title={t('settings.networkSettings.title')}
146+
description={t('settings.networkSettings.description')}
147+
left={props => <List.Icon {...props} icon="wifi" />}
148+
onPress={handleNetworkSettings}
149+
/>
150+
<List.Item
151+
title={t('settings.ntpSettings.title')}
152+
description={t('settings.ntpSettings.description')}
153+
left={props => <List.Icon {...props} icon="clock" />}
154+
disabled
155+
style={{ opacity: 0.5 }}
156+
/>
157+
<List.Item
158+
title={t('settings.mqttSettings.title')}
159+
description={t('settings.mqttSettings.description')}
160+
left={props => <List.Icon {...props} icon="broadcast" />}
161+
disabled
162+
style={{ opacity: 0.5 }}
163+
/>
164+
<List.Item
165+
title={t('settings.inverterSettings.title')}
166+
description={t('settings.inverterSettings.description')}
167+
left={props => <List.Icon {...props} icon="solar-panel" />}
168+
disabled
169+
style={{ opacity: 0.5 }}
170+
/>
171+
<List.Item
172+
title={t('settings.securitySettings.title')}
173+
description={t('settings.securitySettings.description')}
174+
left={props => <List.Icon {...props} icon="lock" />}
175+
disabled
176+
style={{ opacity: 0.5 }}
177+
/>
178+
<List.Item
179+
title={t('settings.dtuSettings.title')}
180+
description={t('settings.dtuSettings.description')}
181+
left={props => <List.Icon {...props} icon="cog" />}
182+
disabled
183+
style={{ opacity: 0.5 }}
184+
/>
185+
<List.Item
186+
title={t('settings.hardwareSettings.title')}
187+
description={t('settings.hardwareSettings.description')}
188+
left={props => <List.Icon {...props} icon="chip" />}
189+
disabled
190+
style={{ opacity: 0.5 }}
191+
/>
192+
<List.Item
193+
title={t('settings.configManagement.title')}
194+
description={t('settings.configManagement.description')}
195+
left={props => <List.Icon {...props} icon="file" />}
196+
disabled
197+
style={{ opacity: 0.5 }}
198+
/>
199+
</>
200+
) : (
201+
<List.Item
202+
title={t('settings.configureAuth.title')}
203+
description={t('settings.configureAuth.description')}
204+
left={props => <List.Icon {...props} icon="key" />}
205+
onPress={() => handleNavigateToAuth()}
206+
/>
207+
)}
188208
</List.Section>
189209
<List.Section>
190210
<List.Subheader>{t('opendtu.information')}</List.Subheader>

0 commit comments

Comments
 (0)