Device manager - add verify current session button (PSG-527)

src/components/views/settings/devices/CurrentDeviceSection.tsx

@@ -28,10 +28,11 @@ import { DeviceWithVerification } from './types';
 interface Props {
  device?: DeviceWithVerification;
  isLoading: boolean;
+ onVerifyCurrentDevice: () => void;
 }
 
 const CurrentDeviceSection: React.FC<Props> = ({
- device, isLoading,
+ device, isLoading, onVerifyCurrentDevice,
 }) => {
  const [isExpanded, setIsExpanded] = useState(false);
 
@@ -52,7 +53,7 @@ const CurrentDeviceSection: React.FC<Props> = ({
  </DeviceTile>
  { isExpanded && <DeviceDetails device={device} /> }
  <br />
- <DeviceVerificationStatusCard device={device} />
+ <DeviceVerificationStatusCard device={device} onVerifyDevice={onVerifyCurrentDevice} />
  </>
  }
  </SettingsSubsection>;

src/components/views/settings/devices/DeviceVerificationStatusCard.tsx

@@ -17,6 +17,7 @@ limitations under the License.
 import React from 'react';
 
 import { _t } from '../../../../languageHandler';
+import AccessibleButton from '../../elements/AccessibleButton';
 import DeviceSecurityCard from './DeviceSecurityCard';
 import {
  DeviceSecurityVariation,
@@ -25,12 +26,14 @@ import {
 
 interface Props {
  device: DeviceWithVerification;
+ onVerifyDevice?: () => void;
 }
 
 export const DeviceVerificationStatusCard: React.FC<Props> = ({
  device,
+ onVerifyDevice,
 }) => {
- const securityCardProps = device?.isVerified ? {
+ const securityCardProps = device.isVerified ? {
  variation: DeviceSecurityVariation.Verified,
  heading: _t('Verified session'),
  description: _t('This session is ready for secure messaging.'),
@@ -41,5 +44,15 @@ export const DeviceVerificationStatusCard: React.FC<Props> = ({
  };
  return <DeviceSecurityCard
  {...securityCardProps}
- />;
+ >
+ { !device.isVerified && !!onVerifyDevice &&
+ <AccessibleButton
+ kind='primary'
+ onClick={onVerifyDevice}
+ data-testid={`verification-status-button-${device.device_id}`}
+ >
+ { _t('Verify session') }
+ </AccessibleButton>
+ }
+ </DeviceSecurityCard>;
 };

src/components/views/settings/devices/useOwnDevices.ts

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { useContext, useEffect, useState } from "react";
+import { useCallback, useContext, useEffect, useState } from "react";
 import { IMyDevice, MatrixClient } from "matrix-js-sdk/src/matrix";
 import { CrossSigningInfo } from "matrix-js-sdk/src/crypto/CrossSigning";
 import { logger } from "matrix-js-sdk/src/logger";
@@ -64,6 +64,7 @@ type DevicesState = {
  devices: DevicesDictionary;
  currentDeviceId: string;
  isLoading: boolean;
+ refreshDevices: () => Promise<void>;
  error?: OwnDevicesError;
 };
 export const useOwnDevices = (): DevicesState => {
@@ -75,30 +76,32 @@ export const useOwnDevices = (): DevicesState => {
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<OwnDevicesError>();
 
- useEffect(() => {
- const getDevicesAsync = async () => {
- setIsLoading(true);
- try {
- const devices = await fetchDevicesWithVerification(matrixClient);
- setDevices(devices);
- setIsLoading(false);
- } catch (error) {
- if (error.httpStatus == 404) {
- // 404 probably means the HS doesn't yet support the API.
- setError(OwnDevicesError.Unsupported);
- } else {
- logger.error("Error loading sessions:", error);
- setError(OwnDevicesError.Default);
- }
- setIsLoading(false);
+ const refreshDevices = useCallback(async () => {
+ setIsLoading(true);
+ try {
+ const devices = await fetchDevicesWithVerification(matrixClient);
+ setDevices(devices);
+ setIsLoading(false);
+ } catch (error) {
+ if (error.httpStatus == 404) {
+ // 404 probably means the HS doesn't yet support the API.
+ setError(OwnDevicesError.Unsupported);
+ } else {
+ logger.error("Error loading sessions:", error);
+ setError(OwnDevicesError.Default);
  }
- };
- getDevicesAsync();
+  setIsLoading(false);
+ }
  }, [matrixClient]);
 
+ useEffect(() => {
+ refreshDevices();
+ }, [refreshDevices]);
+
  return {
  devices,
  currentDeviceId,
+ refreshDevices,
  isLoading,
  error,
  };

src/components/views/settings/tabs/user/SessionManagerTab.tsx

@@ -24,9 +24,16 @@ import CurrentDeviceSection from '../../devices/CurrentDeviceSection';
 import SecurityRecommendations from '../../devices/SecurityRecommendations';
 import { DeviceSecurityVariation, DeviceWithVerification } from '../../devices/types';
 import SettingsTab from '../SettingsTab';
+import Modal from '../../../../../Modal';
+import SetupEncryptionDialog from '../../../dialogs/security/SetupEncryptionDialog';
 
 const SessionManagerTab: React.FC = () => {
- const { devices, currentDeviceId, isLoading } = useOwnDevices();
+ const {
+ devices,
+ currentDeviceId,
+ isLoading,
+ refreshDevices,
+ } = useOwnDevices();
  const [filter, setFilter] = useState<DeviceSecurityVariation>();
  const [expandedDeviceIds, setExpandedDeviceIds] = useState<DeviceWithVerification['device_id'][]>([]);
  const filteredDeviceListRef = useRef<HTMLDivElement>(null);
@@ -57,6 +64,16 @@ const SessionManagerTab: React.FC = () => {
  const { [currentDeviceId]: currentDevice, ...otherDevices } = devices;
  const shouldShowOtherSessions = Object.keys(otherDevices).length > 0;
 
+ const onVerifyCurrentDevice = () => {
+ if (!currentDevice) {
+ return;
+ }
+ Modal.createDialog(
+ SetupEncryptionDialog as unknown as React.ComponentType,
+ { onFinished: refreshDevices },
+ );
+ };
+
  useEffect(() => () => {
  clearTimeout(scrollIntoViewTimeoutRef.current);
  }, [scrollIntoViewTimeoutRef]);
@@ -70,6 +87,7 @@ const SessionManagerTab: React.FC = () => {
  <CurrentDeviceSection
  device={currentDevice}
  isLoading={isLoading}
+ onVerifyCurrentDevice={onVerifyCurrentDevice}
  />
  {
  shouldShowOtherSessions &&

src/i18n/strings/en_EN.json

@@ -1719,6 +1719,7 @@
  "This session is ready for secure messaging.": "This session is ready for secure messaging.",
  "Unverified session": "Unverified session",
  "Verify or sign out from this session for best security and reliability.": "Verify or sign out from this session for best security and reliability.",
+ "Verify session": "Verify session",
  "Verified sessions": "Verified sessions",
  "For best security, sign out from any session that you don't recognize or use anymore.": "For best security, sign out from any session that you don't recognize or use anymore.",
  "Unverified sessions": "Unverified sessions",
@@ -2765,7 +2766,6 @@
  "Session name": "Session name",
  "Session key": "Session key",
  "If they don't match, the security of your communication may be compromised.": "If they don't match, the security of your communication may be compromised.",
- "Verify session": "Verify session",
  "Your homeserver doesn't seem to support this feature.": "Your homeserver doesn't seem to support this feature.",
  "Message edits": "Message edits",
  "Modal Widget": "Modal Widget",

test/components/views/settings/devices/CurrentDeviceSection-test.tsx

@@ -34,6 +34,7 @@ describe('<CurrentDeviceSection />', () => {
 
  const defaultProps = {
  device: alicesVerifiedDevice,
+ onVerifyCurrentDevice: jest.fn(),
  isLoading: false,
  };
  const getComponent = (props = {}): React.ReactElement =>

test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap

@@ -216,6 +216,18 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
  >
  Verify or sign out from this session for best security and reliability.
  </p>
+ <div
+ class="mx_DeviceSecurityCard_actions"
+ >
+ <div
+ class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
+ data-testid="verification-status-button-alices_device"
+ role="button"
+ tabindex="0"
+ >
+ Verify session
+ </div>
+ </div>
  </div>
  </div>
  </div>
@@ -316,6 +328,18 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
  >
  Verify or sign out from this session for best security and reliability.
  </p>
+ <div
+ class="mx_DeviceSecurityCard_actions"
+ >
+ <div
+ class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
+ data-testid="verification-status-button-alices_device"
+ role="button"
+ tabindex="0"
+ >
+ Verify session
+ </div>
+ </div>
  </div>
  </div>
  </div>

test/components/views/settings/tabs/user/SessionManagerTab-test.tsx

@@ -28,6 +28,7 @@ import {
  getMockClientWithEventEmitter,
  mockClientMethodsUser,
 } from '../../../../../test-utils';
+import Modal from '../../../../../../src/Modal';
 
 jest.useFakeTimers();
 
@@ -154,6 +155,21 @@ describe('<SessionManagerTab />', () => {
  expect(getByTestId('current-session-section')).toMatchSnapshot();
  });
 
+ it('opens encryption setup dialog when verifiying current session', async () => {
+ mockClient.getDevices.mockResolvedValue({ devices: [alicesDevice, alicesMobileDevice] });
+ const { getByTestId } = render(getComponent());
+ const modalSpy = jest.spyOn(Modal, 'createDialog');
+
+ await act(async () => {
+ await flushPromisesWithFakeTimers();
+ });
+
+ // click verify button from current session section
+ fireEvent.click(getByTestId(`verification-status-button-${alicesDevice.device_id}`));
+
+ expect(modalSpy).toHaveBeenCalled();
+ });
+
  it('renders current session section with a verified session', async () => {
  mockClient.getDevices.mockResolvedValue({ devices: [alicesDevice, alicesMobileDevice] });
  mockClient.getStoredDevice.mockImplementation(() => new DeviceInfo(alicesDevice.device_id));

test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap

@@ -226,6 +226,18 @@ exports[`<SessionManagerTab /> renders current session section with an unverifie
  >
  Verify or sign out from this session for best security and reliability.
  </p>
+ <div
+ class="mx_DeviceSecurityCard_actions"
+ >
+ <div
+ class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
+ data-testid="verification-status-button-alices_device"
+ role="button"
+ tabindex="0"
+ >
+ Verify session
+ </div>
+ </div>
  </div>
  </div>
  </div>