Merge pull request #3059 from Bilb/fix-dont-password-protect-settings

feat: dont password protect the settings except the seed one

ts/components/settings/SessionNotificationGroupSettings.tsx

@@ -25,13 +25,9 @@ const StyledButtonContainer = styled.div`
   padding-inline-start: var(--margins-lg);
 `;
 
-export const SessionNotificationGroupSettings = (props: { hasPassword: boolean | null }) => {
+export const SessionNotificationGroupSettings = () => {
   const forceUpdate = useUpdate();
 
-  if (props.hasPassword === null) {
-    return null;
-  }
-
   const initialNotificationEnabled =
     window.getSettingValue(SettingsKey.settingsNotification) || NOTIFICATION.MESSAGE;
 

ts/components/settings/SessionSettings.tsx

@@ -1,23 +1,24 @@
 import { shell } from 'electron';
-import React from 'react';
-import autoBind from 'auto-bind';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 
+import { useDispatch } from 'react-redux';
+import useMount from 'react-use/lib/useMount';
 import { SettingsHeader } from './SessionSettingsHeader';
 
 import { SessionIconButton } from '../icon';
 
 import { SessionNotificationGroupSettings } from './SessionNotificationGroupSettings';
 
-import { CategoryConversations } from './section/CategoryConversations';
-import { SettingsCategoryPrivacy } from './section/CategoryPrivacy';
-import { SettingsCategoryAppearance } from './section/CategoryAppearance';
 import { Data } from '../../data/data';
-import { SettingsCategoryPermissions } from './section/CategoryPermissions';
-import { SettingsCategoryHelp } from './section/CategoryHelp';
 import { sessionPassword } from '../../state/ducks/modalDialog';
-import { PasswordAction } from '../dialog/SessionPasswordDialog';
 import { SectionType, showLeftPaneSection } from '../../state/ducks/section';
+import { PasswordAction } from '../dialog/SessionPasswordDialog';
+import { SettingsCategoryAppearance } from './section/CategoryAppearance';
+import { CategoryConversations } from './section/CategoryConversations';
+import { SettingsCategoryHelp } from './section/CategoryHelp';
+import { SettingsCategoryPermissions } from './section/CategoryPermissions';
+import { SettingsCategoryPrivacy } from './section/CategoryPrivacy';
 
 export function displayPasswordModal(
   passwordAction: PasswordAction,
@@ -57,11 +58,6 @@ export interface SettingsViewProps {
   category: SessionSettingCategory;
 }
 
-interface State {
-  hasPassword: boolean | null;
-  shouldLockSettings: boolean | null;
-}
-
 const StyledVersionInfo = styled.div`
   display: flex;
   justify-content: space-between;
@@ -110,30 +106,27 @@ const SessionInfo = () => {
 
 const SettingInCategory = (props: {
   category: SessionSettingCategory;
-  hasPassword: boolean;
   onPasswordUpdated: (action: string) => void;
+  hasPassword: boolean;
 }) => {
-  const { category, hasPassword, onPasswordUpdated } = props;
+  const { category, onPasswordUpdated, hasPassword } = props;
 
-  if (hasPassword === null) {
-    return null;
-  }
   switch (category) {
     // special case for blocked user
     case SessionSettingCategory.Conversations:
       return <CategoryConversations />;
     case SessionSettingCategory.Appearance:
-      return <SettingsCategoryAppearance hasPassword={hasPassword} />;
+      return <SettingsCategoryAppearance />;
     case SessionSettingCategory.Notifications:
-      return <SessionNotificationGroupSettings hasPassword={hasPassword} />;
+      return <SessionNotificationGroupSettings />;
     case SessionSettingCategory.Privacy:
       return (
         <SettingsCategoryPrivacy onPasswordUpdated={onPasswordUpdated} hasPassword={hasPassword} />
       );
     case SessionSettingCategory.Help:
-      return <SettingsCategoryHelp hasPassword={hasPassword} />;
+      return <SettingsCategoryHelp />;
     case SessionSettingCategory.Permissions:
-      return <SettingsCategoryPermissions hasPassword={hasPassword} />;
+      return <SettingsCategoryPermissions />;
 
     // these three down there have no options, they are just a button
     case SessionSettingCategory.ClearData:
@@ -159,87 +152,48 @@ const StyledSettingsList = styled.div`
   flex-direction: column;
 `;
 
-export class SessionSettingsView extends React.Component<SettingsViewProps, State> {
-  public settingsViewRef: React.RefObject<HTMLDivElement>;
-
-  public constructor(props: any) {
-    super(props);
-
-    this.state = {
-      hasPassword: null,
-      shouldLockSettings: true,
-    };
-
-    this.settingsViewRef = React.createRef();
-    autoBind(this);
+export const SessionSettingsView = (props: SettingsViewProps) => {
+  const { category } = props;
+  const dispatch = useDispatch();
 
+  const [hasPassword, setHasPassword] = useState(true);
+  useMount(() => {
+    let isMounted = true;
     // eslint-disable-next-line more/no-then
     void Data.getPasswordHash().then(hash => {
-      this.setState({
-        hasPassword: !!hash,
+      if (isMounted) {
+        setHasPassword(!!hash);
+      }
     });
+    return () => {
+      isMounted = false;
+    };
   });
-  }
-
-  public componentDidUpdate(_: SettingsViewProps, _prevState: State) {
-    const oldShouldRenderPasswordLock = _prevState.shouldLockSettings && _prevState.hasPassword;
-    const newShouldRenderPasswordLock = this.state.shouldLockSettings && this.state.hasPassword;
 
-    if (
-      newShouldRenderPasswordLock &&
-      newShouldRenderPasswordLock !== oldShouldRenderPasswordLock
-    ) {
-      displayPasswordModal('enter', action => {
-        if (action === 'enter') {
-          // Unlocked settings
-          this.setState({
-            shouldLockSettings: false,
-          });
+  function onPasswordUpdated(action: string) {
+    if (action === 'set' || action === 'change') {
+      setHasPassword(true);
+      dispatch(showLeftPaneSection(SectionType.Message));
     }
-      });
+
+    if (action === 'remove') {
+      setHasPassword(false);
     }
   }
 
-  public render() {
-    const { category } = this.props;
-    const shouldRenderPasswordLock = this.state.shouldLockSettings && this.state.hasPassword;
-
   return (
     <div className="session-settings">
-        {shouldRenderPasswordLock ? (
-          <></>
-        ) : (
-          <>
       <SettingsHeader category={category} />
       <StyledSettingsView>
-              <StyledSettingsList ref={this.settingsViewRef}>
+        <StyledSettingsList>
           <SettingInCategory
             category={category}
-                  onPasswordUpdated={this.onPasswordUpdated}
-                  hasPassword={Boolean(this.state.hasPassword)}
+            onPasswordUpdated={onPasswordUpdated}
+            hasPassword={hasPassword}
           />
         </StyledSettingsList>
         <SessionInfo />
       </StyledSettingsView>
-          </>
-        )}
     </div>
   );
-  }
-
-  public onPasswordUpdated(action: string) {
-    if (action === 'set' || action === 'change') {
-      this.setState({
-        hasPassword: true,
-        shouldLockSettings: true,
-      });
-      window.inboxStore?.dispatch(showLeftPaneSection(SectionType.Message));
-    }
-
-    if (action === 'remove') {
-      this.setState({
-        hasPassword: false,
-      });
-    }
-  }
-}
+};

ts/components/settings/section/CategoryAppearance.tsx

@@ -2,18 +2,17 @@ import React from 'react';
 
 import useUpdate from 'react-use/lib/useUpdate';
 import { SettingsKey } from '../../../data/settings-key';
-import { isHideMenuBarSupported } from '../../../types/Settings';
 import { useHasFollowSystemThemeEnabled } from '../../../state/selectors/settings';
 import { ensureThemeConsistency } from '../../../themes/SessionTheme';
+import { isHideMenuBarSupported } from '../../../types/Settings';
 import { SessionToggleWithDescription } from '../SessionSettingListItem';
 import { SettingsThemeSwitcher } from '../SettingsThemeSwitcher';
 import { ZoomingSessionSlider } from '../ZoomingSessionSlider';
 
-export const SettingsCategoryAppearance = (props: { hasPassword: boolean | null }) => {
+export const SettingsCategoryAppearance = () => {
   const forceUpdate = useUpdate();
   const isFollowSystemThemeEnabled = useHasFollowSystemThemeEnabled();
 
-  if (props.hasPassword !== null) {
   const isHideMenuBarActive =
     window.getSettingValue(SettingsKey.settingsMenuBar) === undefined
       ? true
@@ -50,6 +49,4 @@ export const SettingsCategoryAppearance = (props: { hasPassword: boolean | null
       />
     </>
   );
-  }
-  return null;
 };

ts/components/settings/section/CategoryHelp.tsx

@@ -4,8 +4,7 @@ import { SessionButtonShape, SessionButtonType } from '../../basic/SessionButton
 
 import { SessionSettingButtonItem, SessionSettingsTitleWithLink } from '../SessionSettingListItem';
 
-export const SettingsCategoryHelp = (props: { hasPassword: boolean | null }) => {
-  if (props.hasPassword !== null) {
+export const SettingsCategoryHelp = () => {
   return (
     <>
       <SessionSettingButtonItem
@@ -36,6 +35,4 @@ export const SettingsCategoryHelp = (props: { hasPassword: boolean | null }) =>
       />
     </>
   );
-  }
-  return null;
 };

ts/components/settings/section/CategoryPermissions.tsx

@@ -53,11 +53,10 @@ async function toggleStartInTray() {
   }
 }
 
-export const SettingsCategoryPermissions = (props: { hasPassword: boolean | null }) => {
+export const SettingsCategoryPermissions = () => {
   const forceUpdate = useUpdate();
   const isStartInTrayActive = Boolean(window.getSettingValue(SettingsKey.settingsStartInTray));
 
-  if (props.hasPassword !== null) {
   return (
     <>
       <SessionToggleWithDescription
@@ -101,6 +100,4 @@ export const SettingsCategoryPermissions = (props: { hasPassword: boolean | null
       />
     </>
   );
-  }
-  return null;
 };

ts/components/settings/section/CategoryPrivacy.tsx

@@ -61,7 +61,6 @@ export const SettingsCategoryPrivacy = (props: {
   const isLinkPreviewsOn = useHasLinkPreviewEnabled();
   const areBlindedRequestsEnabled = useHasBlindedMsgRequestsEnabled();
 
-  if (props.hasPassword !== null) {
   return (
     <>
       <SessionToggleWithDescription
@@ -109,7 +108,7 @@ export const SettingsCategoryPrivacy = (props: {
         active={areBlindedRequestsEnabled}
       />
 
-        {!props.hasPassword && (
+      {!props.hasPassword ? (
         <SessionSettingButtonItem
           title={window.i18n('setAccountPasswordTitle')}
           description={window.i18n('setAccountPasswordDescription')}
@@ -119,8 +118,9 @@ export const SettingsCategoryPrivacy = (props: {
           buttonText={window.i18n('setPassword')}
           dataTestId={'set-password-button'}
         />
-        )}
-        {props.hasPassword && (
+      ) : (
+        <>
+          {/* We have a password, let's show the 'change' and 'remove' password buttons */}
           <SessionSettingButtonItem
             title={window.i18n('changeAccountPasswordTitle')}
             description={window.i18n('changeAccountPasswordDescription')}
@@ -130,8 +130,6 @@ export const SettingsCategoryPrivacy = (props: {
             buttonText={window.i18n('changePassword')}
             dataTestId="change-password-settings-button"
           />
-        )}
-        {props.hasPassword && (
           <SessionSettingButtonItem
             title={window.i18n('removeAccountPasswordTitle')}
             description={window.i18n('removeAccountPasswordDescription')}
@@ -142,9 +140,8 @@ export const SettingsCategoryPrivacy = (props: {
             buttonText={window.i18n('removePassword')}
             dataTestId="remove-password-settings-button"
           />
+        </>
       )}
     </>
   );
-  }
-  return null;
 };