add extra dialog to prevent user from aborting a new sync chain

fix brave/brave-browser#2564

browser/ui/webui/brave_webui_source.cc

@@ -445,6 +445,7 @@ void CustomizeWebUIHTMLSource(const std::string &name, content::WebUIDataSource*
  { "wordCount", IDS_BRAVE_SYNC_SHARED_WORD_COUNT_TEXT },
  { "ok", IDS_BRAVE_SYNC_SHARED_OK_BUTTON },
  { "cancel", IDS_BRAVE_SYNC_SHARED_CANCEL_BUTTON },
+ { "cancelDeviceSyncing", IDS_BRAVE_SYNC_SHARED_CANCEL_SYNCING },
  { "thisSyncChain", IDS_BRAVE_SYNC_SHARED_FROM_THIS_CHAIN_PARTIAL },
  { "lookingForDevice", IDS_BRAVE_SYNC_SCAN_CODE_LOOKING_FOR_DEVICE_BUTTON },
  { "viewSyncCode", IDS_BRAVE_SYNC_ENABLED_VIEW_CODE_BUTTON },

components/brave_sync/ui/components/commonDialogs/cancelDeviceSyncing.tsx

@@ -0,0 +1,36 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import * as React from 'react'
+
+// Components
+import { AlertBox } from 'brave-ui'
+
+// Feature-specific components
+import { Title, Paragraph } from 'brave-ui/features/sync'
+
+// Utils
+import { getLocale } from '../../../../common/locale'
+
+interface Props {
+ onClickOk: () => void
+ onClickCancel: () => void
+}
+
+export default class AreYouSure extends React.PureComponent<Props, {}> {
+ render () {
+ const { onClickOk, onClickCancel } = this.props
+ return (
+ <AlertBox
+ okString={getLocale('ok')}
+ onClickOk={onClickOk}
+ cancelString={getLocale('cancel')}
+ onClickCancel={onClickCancel}
+ >
+ <Title level={1}>{getLocale('areYouSure')}</Title>
+ <Paragraph>{getLocale('cancelDeviceSyncing')}</Paragraph>
+ </AlertBox>
+ )
+ }
+}

components/brave_sync/ui/components/modals/scanCode.tsx

@@ -19,6 +19,9 @@ import {
  Link
 } from 'brave-ui/features/sync'
 
+// Dialogs
+import CancelDeviceSyncingDialog from '../commonDialogs/cancelDeviceSyncing'
+
 // Utils
 import { getLocale } from '../../../../common/locale'
 
@@ -30,7 +33,16 @@ interface Props {
  actions: any
 }
 
-export default class ScanCodeModal extends React.PureComponent<Props, {}> {
+interface State {
+ willCancelScanCode: boolean
+}
+
+export default class ScanCodeModal extends React.PureComponent<Props, State> {
+ constructor (props: Props) {
+ super(props)
+ this.state = { willCancelScanCode: false }
+ }
+
  componentDidMount () {
  const { scanCode, deviceType } = this.props.syncData.modalsOpen
  if (scanCode) {
@@ -46,6 +58,19 @@ export default class ScanCodeModal extends React.PureComponent<Props, {}> {
  }
 
  onDismissModal = () => {
+ const { devices, isSyncConfigured } = this.props.syncData
+ // if user is still trying to build a sync chain,
+ // open the confirmation modal. otherwise close it
+ isSyncConfigured && devices.length < 2
+ ? this.setState({ willCancelScanCode: true })
+ : this.props.actions.maybeOpenSyncModal('scanCode', false)
+ }
+
+ onDismissDialog = () => {
+ this.setState({ willCancelScanCode: false })
+ }
+
+ onConfirmDismissModal = () => {
  const { devices, isSyncConfigured } = this.props.syncData
  // sync is enabled when at least 2 devices are in the chain.
  // this modal works both with sync enabled and disabled states.
@@ -54,14 +79,20 @@ export default class ScanCodeModal extends React.PureComponent<Props, {}> {
  if (isSyncConfigured && devices.length < 2) {
  this.props.actions.onSyncReset()
  }
+ this.setState({ willCancelScanCode: false })
  this.props.actions.maybeOpenSyncModal('scanCode', false)
  }
 
  render () {
  const { syncData } = this.props
+ const { willCancelScanCode } = this.state
 
  return (
  <Modal id='scanCodeModal' displayCloseButton={false} size='small'>
+ {
+ willCancelScanCode &&
+ <CancelDeviceSyncingDialog onClickCancel={this.onDismissDialog} onClickOk={this.onConfirmDismissModal} />
+ }
  <ModalHeader>
  <div>
  <Title level={1}>{getLocale('scanThisCode')}</Title>

components/brave_sync/ui/components/modals/viewSyncCode.tsx

@@ -18,6 +18,9 @@ import {
  Link
 } from 'brave-ui/features/sync'
 
+// Dialogs
+import CancelDeviceSyncingDialog from '../commonDialogs/cancelDeviceSyncing'
+
 // Utils
 import { getLocale } from '../../../../common/locale'
 
@@ -26,7 +29,16 @@ interface Props {
  actions: any
 }
 
-export default class ViewSyncCodeModal extends React.PureComponent<Props, {}> {
+interface State {
+ willCancelViewCode: boolean
+}
+
+export default class ViewSyncCodeModal extends React.PureComponent<Props, State> {
+ constructor (props: Props) {
+ super(props)
+ this.state = { willCancelViewCode: false }
+ }
+
  componentDidMount () {
  const { scanCode, deviceType } = this.props.syncData.modalsOpen
  if (scanCode) {
@@ -42,6 +54,19 @@ export default class ViewSyncCodeModal extends React.PureComponent<Props, {}> {
  }
 
  onDismissModal = () => {
+ const { devices, isSyncConfigured } = this.props.syncData
+ // if user is still trying to build a sync chain,
+ // open the confirmation modal. otherwise close it
+ isSyncConfigured && devices.length < 2
+ ? this.setState({ willCancelViewCode: true })
+ : this.props.actions.maybeOpenSyncModal('viewSyncCode', false)
+ }
+
+ onDismissDialog = () => {
+ this.setState({ willCancelViewCode: false })
+ }
+
+ onConfirmDismissModal = () => {
  const { devices, isSyncConfigured } = this.props.syncData
  // sync is enabled when at least 2 devices are in the chain.
  // this modal works both with sync enabled and disabled states.
@@ -50,14 +75,20 @@ export default class ViewSyncCodeModal extends React.PureComponent<Props, {}> {
  if (isSyncConfigured && devices.length < 2) {
  this.props.actions.onSyncReset()
  }
+ this.setState({ willCancelViewCode: false })
  this.props.actions.maybeOpenSyncModal('viewSyncCode', false)
  }
 
  render () {
  const { syncData } = this.props
+ const { willCancelViewCode } = this.state
 
  return (
  <Modal id='viewSyncCodeModal' displayCloseButton={false} size='small'>
+ {
+ willCancelViewCode &&
+ <CancelDeviceSyncingDialog onClickCancel={this.onDismissDialog} onClickOk={this.onConfirmDismissModal} />
+ }
  <ModalHeader>
  <div>
  <Title level={1}>{getLocale('chainCode')}</Title>

components/resources/brave_components_strings.grd

@@ -454,6 +454,7 @@
  <message name="IDS_BRAVE_SYNC_SHARED_WORD_COUNT_TEXT" desc="The Sync `word count` phrase that shows how many words are in a textarea field">Word Count:</message>
  <message name="IDS_BRAVE_SYNC_SHARED_OK_BUTTON" desc="The Sync `ok` button that indicates user is aware of what is being written">Ok</message>
  <message name="IDS_BRAVE_SYNC_SHARED_CANCEL_BUTTON" desc="The Sync `cancel` button that closes the current modal">Cancel</message>
+ <message name="IDS_BRAVE_SYNC_SHARED_CANCEL_SYNCING" desc="The Sync phrase for when the user is about to reset sync by closing the `view code` or `scan code` modal">Cancelling this modal will reset the current chain and the devices looking for this code would not be able to sync with this computer.</message>
  <message name="IDS_BRAVE_SYNC_SHARED_FROM_THIS_CHAIN_PARTIAL" desc="The Sync partial phrase included in `remove X from this sync chain` where X is the user's device name">from this sync chain</message>
  <message name="IDS_BRAVE_SYNC_SHARED_VIEW_CODE_BUTTON" desc="The Sync button to enter code words instead of scanning the current code">View Code Words</message>
  <message name="IDS_BRAVE_SYNC_SCAN_CODE_LOOKING_FOR_DEVICE_BUTTON" desc="The Sync temporary button that holds while a device is not found yet">Looking for device</message>