Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: dont password protect the settings except the seed one #3059

Merged
merged 2 commits into from
Mar 27, 2024
Merged

feat: dont password protect the settings except the seed one #3059

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
452d48b
feat: dont password protect the settings except the seed one
Bilb Mar 26, 2024
f5deb69
chore: make SessionSettingsView a functional component
Bilb Mar 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 1 addition & 5 deletions ts/components/settings/SessionNotificationGroupSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
144 changes: 49 additions & 95 deletions ts/components/settings/SessionSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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:
Expand All @@ -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);
}
});
}

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,
});
}
});
}
}

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}>
<SettingInCategory
category={category}
onPasswordUpdated={this.onPasswordUpdated}
hasPassword={Boolean(this.state.hasPassword)}
/>
</StyledSettingsList>
<SessionInfo />
</StyledSettingsView>
</>
)}
</div>
);
}
return () => {
isMounted = false;
};
});

public onPasswordUpdated(action: string) {
function onPasswordUpdated(action: string) {
if (action === 'set' || action === 'change') {
this.setState({
hasPassword: true,
shouldLockSettings: true,
});
window.inboxStore?.dispatch(showLeftPaneSection(SectionType.Message));
setHasPassword(true);
dispatch(showLeftPaneSection(SectionType.Message));
}

if (action === 'remove') {
this.setState({
hasPassword: false,
});
setHasPassword(false);
}
}
}

return (
<div className="session-settings">
<SettingsHeader category={category} />
<StyledSettingsView>
<StyledSettingsList>
<SettingInCategory
category={category}
onPasswordUpdated={onPasswordUpdated}
hasPassword={hasPassword}
/>
</StyledSettingsList>
<SessionInfo />
</StyledSettingsView>
</div>
);
};
71 changes: 34 additions & 37 deletions ts/components/settings/section/CategoryAppearance.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,54 +2,51 @@ 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
: window.getSettingValue(SettingsKey.settingsMenuBar);
const isHideMenuBarActive =
window.getSettingValue(SettingsKey.settingsMenuBar) === undefined
? true
: window.getSettingValue(SettingsKey.settingsMenuBar);

return (
<>
<SettingsThemeSwitcher />
<ZoomingSessionSlider />
{isHideMenuBarSupported() && (
<SessionToggleWithDescription
onClickToggle={() => {
window.toggleMenuBar();
forceUpdate();
}}
title={window.i18n('hideMenuBarTitle')}
description={window.i18n('hideMenuBarDescription')}
active={isHideMenuBarActive}
/>
)}
return (
<>
<SettingsThemeSwitcher />
<ZoomingSessionSlider />
{isHideMenuBarSupported() && (
<SessionToggleWithDescription
// eslint-disable-next-line @typescript-eslint/no-misused-promises
onClickToggle={async () => {
const toggledValue = !isFollowSystemThemeEnabled;
await window.setSettingValue(SettingsKey.hasFollowSystemThemeEnabled, toggledValue);
if (!isFollowSystemThemeEnabled) {
await ensureThemeConsistency();
}
onClickToggle={() => {
window.toggleMenuBar();
forceUpdate();
}}
title={window.i18n('matchThemeSystemSettingTitle')}
description={window.i18n('matchThemeSystemSettingDescription')}
active={isFollowSystemThemeEnabled}
dataTestId="enable-follow-system-theme"
title={window.i18n('hideMenuBarTitle')}
description={window.i18n('hideMenuBarDescription')}
active={isHideMenuBarActive}
/>
</>
);
}
return null;
)}
<SessionToggleWithDescription
// eslint-disable-next-line @typescript-eslint/no-misused-promises
onClickToggle={async () => {
const toggledValue = !isFollowSystemThemeEnabled;
await window.setSettingValue(SettingsKey.hasFollowSystemThemeEnabled, toggledValue);
if (!isFollowSystemThemeEnabled) {
await ensureThemeConsistency();
}
}}
title={window.i18n('matchThemeSystemSettingTitle')}
description={window.i18n('matchThemeSystemSettingDescription')}
active={isFollowSystemThemeEnabled}
dataTestId="enable-follow-system-theme"
/>
</>
);
};
65 changes: 31 additions & 34 deletions ts/components/settings/section/CategoryHelp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,38 +4,35 @@ import { SessionButtonShape, SessionButtonType } from '../../basic/SessionButton

import { SessionSettingButtonItem, SessionSettingsTitleWithLink } from '../SessionSettingListItem';

export const SettingsCategoryHelp = (props: { hasPassword: boolean | null }) => {
if (props.hasPassword !== null) {
return (
<>
<SessionSettingButtonItem
onClick={() => {
ipcRenderer.send('show-debug-log');
}}
buttonShape={SessionButtonShape.Square}
buttonType={SessionButtonType.Solid}
buttonText={window.i18n('showDebugLog')}
title={window.i18n('reportIssue')}
description={window.i18n('shareBugDetails')}
/>
<SessionSettingsTitleWithLink
title={window.i18n('surveyTitle')}
onClick={() => void shell.openExternal('https://getsession.org/survey')}
/>
<SessionSettingsTitleWithLink
title={window.i18n('helpUsTranslateSession')}
onClick={() => void shell.openExternal('https://crowdin.com/project/session-desktop/')}
/>
<SessionSettingsTitleWithLink
title={window.i18n('faq')}
onClick={() => void shell.openExternal('https://getsession.org/faq')}
/>
<SessionSettingsTitleWithLink
title={window.i18n('support')}
onClick={() => void shell.openExternal('https://sessionapp.zendesk.com/hc/en-us')}
/>
</>
);
}
return null;
export const SettingsCategoryHelp = () => {
return (
<>
<SessionSettingButtonItem
onClick={() => {
ipcRenderer.send('show-debug-log');
}}
buttonShape={SessionButtonShape.Square}
buttonType={SessionButtonType.Solid}
buttonText={window.i18n('showDebugLog')}
title={window.i18n('reportIssue')}
description={window.i18n('shareBugDetails')}
/>
<SessionSettingsTitleWithLink
title={window.i18n('surveyTitle')}
onClick={() => void shell.openExternal('https://getsession.org/survey')}
/>
<SessionSettingsTitleWithLink
title={window.i18n('helpUsTranslateSession')}
onClick={() => void shell.openExternal('https://crowdin.com/project/session-desktop/')}
/>
<SessionSettingsTitleWithLink
title={window.i18n('faq')}
onClick={() => void shell.openExternal('https://getsession.org/faq')}
/>
<SessionSettingsTitleWithLink
title={window.i18n('support')}
onClick={() => void shell.openExternal('https://sessionapp.zendesk.com/hc/en-us')}
/>
</>
);
};
Loading
Loading