Option to clear Sync data and browser state

Fix #7275

app/extensions/brave/locales/en-US/app.properties

@@ -9,6 +9,7 @@ forward=Forward
 forwardButton.title=Go forward
 back=Back
 backButton.title=Go back
+areYouSure=Are you sure?
 ok=OK
 cancel=Cancel
 submit=Submit

app/extensions/brave/locales/en-US/preferences.properties

@@ -37,6 +37,13 @@ syncBookmarks=Bookmarks
 syncHistory=Browsing history
 syncSiteSettings=Saved site settings
 syncNewDevice=Sync a new device...
+syncClearProfile=Sync a new device...
+syncClearData=Clear Data
+syncResetData=Reset Sync data…
+syncReset=Reset Sync
+syncResetMessageWhat=Resetting Sync clears data stored on the Sync server and resets this device's Sync settings.
+syncResetMessageWhatNot=You will keep any bookmarks, history and other browsing data currently on this device.
+syncResetMessageOtherDevices=If you've synced other devices, they will continue to sync their future browsing data. If you don't want that, you should reset Sync on those devices as well.
 syncStart=I am new to sync
 syncAdd=I have an existing sync code
 syncNewDevice1=Open Brave on your new device and go to Preferences > Sync > 'I have an existing synced device'.

app/locale.js

@@ -212,6 +212,7 @@ var rendererIdentifiers = function () {
     'notificationTryPayments',
     'notificationTryPaymentsYes',
     'prefsRestart',
+    'areYouSure',
     'dismiss',
     'yes',
     'no',

app/renderer/components/preferences/syncTab.js

@@ -22,6 +22,7 @@ class SyncTab extends ImmutableComponent {
     super()
     this.toggleSync = this.toggleSync.bind(this)
     this.onSetup = this.setupSyncProfile.bind(this, false)
+    this.onReset = this.reset.bind(this)
     this.onRestore = this.restoreSyncProfile.bind(this)
     this.enableRestore = this.enableRestore.bind(this)
   }
@@ -147,6 +148,23 @@ class SyncTab extends ImmutableComponent {
       disabled={this.props.syncRestoreEnabled === false} />
   }
 
+  get resetOverlayContent () {
+    return <div className='syncOverlay'>
+      <ul>
+        <li data-l10n-id='syncResetMessageWhat' />
+        <li data-l10n-id='syncResetMessageWhatNot' />
+        <li data-l10n-id='syncResetMessageOtherDevices' />
+      </ul>
+    </div>
+  }
+
+  get resetOverlayFooter () {
+    return <div className='panel'>
+      <Button l10nId='syncReset' className='primaryButton' onClick={this.onReset} />
+      <Button l10nId='cancel' className='whiteButton' onClick={this.props.hideOverlay.bind(this, 'syncReset')} />
+    </div>
+  }
+
   get startOverlayContent () {
     return <div className='syncOverlay'>
       <SettingsList>
@@ -169,6 +187,15 @@ class SyncTab extends ImmutableComponent {
     }
   }
 
+  reset () {
+    const locale = require('../../../../js/l10n')
+    const msg = locale.translation('areYouSure')
+    if (window.confirm(msg)) {
+      aboutActions.resetSync()
+      this.props.hideOverlay('syncReset')
+    }
+  }
+
   setupSyncProfile (isRestoring) {
     this.props.onChangeSetting(settings.SYNC_DEVICE_NAME,
       this.deviceNameInput.value || this.defaultDeviceName)
@@ -219,6 +246,11 @@ class SyncTab extends ImmutableComponent {
         ? <ModalOverlay title={'syncAdd'} content={this.addOverlayContent} footer={this.addOverlayFooter} onHide={this.props.hideOverlay.bind(this, 'syncAdd')} />
         : null
       }
+      {
+      this.isSetup && this.props.syncResetOverlayVisible
+        ? <ModalOverlay title={'syncReset'} content={this.resetOverlayContent} footer={this.resetOverlayFooter} onHide={this.props.hideOverlay.bind(this, 'syncReset')} />
+        : null
+      }
       <div className='sectionTitle' data-l10n-id='syncTitle' />
       <div className='settingsListContainer'>
         <span className='settingsListTitle syncTitleMessage' data-l10n-id='syncTitleMessage' />
@@ -242,6 +274,14 @@ class SyncTab extends ImmutableComponent {
           </div>
           : null
       }
+      {
+        this.isSetup
+          ? <div class='syncClearData'>
+            <div className='sectionTitle' data-l10n-id='syncClearData' />
+            <button data-l10n-id='syncResetData' className='linkButton' onClick={this.props.showOverlay.bind(this, 'syncReset')} />
+          </div>
+          : null
+      }
     </div>
   }
 }

app/sync.js

@@ -248,10 +248,18 @@ module.exports.onSyncReady = (isFirstRun, e) => {
  */
 module.exports.init = function (initialState) {
   const RELOAD_MESSAGE = 'reload-sync-extension'
+  const RESET_SYNC = 'reset-sync'
   // sent by about:preferences when sync should be reloaded
   ipcMain.on(RELOAD_MESSAGE, () => {
     process.emit(RELOAD_MESSAGE)
   })
+  // sent by about:preferences when resetting sync
+  ipcMain.on(RESET_SYNC, (e) => {
+    // TODO: First ask lib to clear data
+    appActions.changeSetting(settings.SYNC_ENABLED, false)
+    appActions.changeSetting(settings.SYNC_DEVICE_NAME, undefined)
+    appActions.resetSyncData()
+  })
   // GET_INIT_DATA is the first message sent by the sync-client when it starts
   ipcMain.on(messages.GET_INIT_DATA, (e) => {
     // Unregister the previous dispatcher cb

docs/appActions.md

@@ -700,6 +700,12 @@ Dispatches a message when sync init data needs to be saved
 
 
 
+### resetSyncData() 
+
+Dispatches a message to delete sync data.
+
+
+
 
 * * *
 

js/about/aboutActions.js

@@ -90,6 +90,13 @@ const aboutActions = {
     ipc.send(messages.RELOAD_SYNC_EXTENSION)
   },
 
+  /**
+   * Dispatches a message to reset Sync data on this device and the cloud.
+   */
+  resetSync: function () {
+    ipc.send(messages.RESET_SYNC)
+  },
+
   /**
    * Loads a URL in a new frame in a safe way.
    * It is important that it is not a simple anchor because it should not

js/about/preferences.js

@@ -1203,6 +1203,7 @@ class AboutPreferences extends React.Component {
       syncNewDeviceOverlayVisible: false,
       syncQRVisible: false,
       syncPassphraseVisible: false,
+      syncResetOverlayVisible: false,
       syncRestoreEnabled: false,
       preferenceTab: this.tabFromCurrentHash,
       hintNumber: this.getNextHintNumber(),
@@ -1399,6 +1400,7 @@ class AboutPreferences extends React.Component {
               syncPassphraseVisible: false
             })
           }}
+          syncResetOverlayVisible={this.state.syncResetOverlayVisible}
         />
         break
       case preferenceTabs.SHIELDS:

js/actions/appActions.js

@@ -856,6 +856,15 @@ const appActions = {
       lastFetchTimestamp,
       seedQr
     })
+  },
+
+  /**
+   * Dispatches a message to delete sync data.
+   */
+  resetSyncData: function () {
+    AppDispatcher.dispatch({
+      actionType: appConstants.APP_RESET_SYNC_DATA
+    })
   }
 }
 

js/constants/appConstants.js

@@ -88,7 +88,8 @@ const appConstants = {
   APP_TAB_TOGGLE_DEV_TOOLS: _,
   APP_TAB_CLONED: _,
   APP_SET_OBJECT_ID: _,
-  APP_SAVE_SYNC_INIT_DATA: _
+  APP_SAVE_SYNC_INIT_DATA: _,
+  APP_RESET_SYNC_DATA: _
 }
 
 module.exports = mapValuesByKeys(appConstants)

js/constants/messages.js

@@ -152,6 +152,7 @@ const messages = {
   SYNC_UPDATED: _,
   SAVE_INIT_DATA: _,
   RELOAD_SYNC_EXTENSION: _,
+  RESET_SYNC: _,
   // Torrent
   TORRENT_MESSAGE: _
 }

js/stores/appStore.js

@@ -885,6 +885,19 @@ const handleAppAction = (action) => {
         appState = appState.setIn(['sync', 'seedQr'], action.seedQr)
       }
       break
+    case appConstants.APP_RESET_SYNC_DATA:
+      const sessionStore = require('../../app/sessionStore')
+      const syncDefault = Immutable.fromJS(sessionStore.defaultAppState().sync)
+      appState = appState.set('sync', syncDefault)
+      appState.get('sites').forEach((site, key) => {
+        if (!site.has('objectId')) { return }
+        appState = appState.setIn(['sites', key], site.delete('objectId'))
+      })
+      appState.get('siteSettings').forEach((site, key) => {
+        if (!site.has('objectId')) { return }
+        appState = appState.setIn(['siteSettings', key], site.delete('objectId'))
+      })
+      break
     case appConstants.APP_SHOW_DOWNLOAD_DELETE_CONFIRMATION:
       appState = appState.set('deleteConfirmationVisible', true)
       break

less/button.less

@@ -140,12 +140,22 @@ span.buttonSeparator {
   }
 }
 
+.linkButton {
+  color: @braveOrange;
+  cursor: pointer;
+  font-size: 0.9rem;
+
+  &:not([disabled]):hover {
+    color: black;
+  }
+}
+
 // for about:preferences
 .prefBody {
   .settingsList > .settingItem + button,
   .settingItem > span + button,
   .paymentsContainer button:not(.close),
-  .syncContainer button {
+  .syncContainer .browserButton {
     font-size: 0.9rem;
     padding: 8px 20px;
   }