handle multiple error cases for sync

browser/ui/webui/brave_webui_source.cc

@@ -458,7 +458,15 @@ void CustomizeWebUIHTMLSource(const std::string &name, content::WebUIDataSource*
 
         { "resetSyncFirstBullet", IDS_BRAVE_SYNC_RESET_SYNC_FIRST_BULLET },
         { "resetSyncSecondBullet", IDS_BRAVE_SYNC_RESET_SYNC_SECOND_BULLET },
-        { "resetSyncThirdBullet", IDS_BRAVE_SYNC_RESET_SYNC_THIRD_BULLET }
+        { "resetSyncThirdBullet", IDS_BRAVE_SYNC_RESET_SYNC_THIRD_BULLET },
+
+        { "errorWrongCodeTitle", IDS_BRAVE_SYNC_ERROR_WRONG_CODE_TITLE },
+        { "errorWrongCodeDescription", IDS_BRAVE_SYNC_ERROR_WRONG_CODE_DESCRIPTION },
+        { "errorNoInternetTitle", IDS_BRAVE_SYNC_ERROR_NO_INTERNET_TITLE },
+        { "errorNoInternetDescription", IDS_BRAVE_SYNC_ERROR_NO_INTERNET_DESCRIPTION },
+        { "errorMissingDeviceNameTitle", IDS_BRAVE_SYNC_ERROR_MISSING_DEVICE_NAME_TITLE },
+        { "errorMissingCodeTitle", IDS_BRAVE_SYNC_ERROR_MISSING_SYNC_CODE_TITLE },
+        { "ok", IDS_BRAVE_SYNC_OK_BUTTON },
       }
     }, {
       std::string("adblock"), {

components/brave_sync/brave_sync_service_impl.cc

@@ -133,8 +133,7 @@ void BraveSyncServiceImpl::OnConnectionChanged(
   DCHECK_CURRENTLY_ON(content::BrowserThread::UI);
   if (type == network::mojom::ConnectionType::CONNECTION_NONE) {
     if (initializing_) {
-      // TODO(cezaraugusto): ERR_SYNC_NO_INTERNET in #971
-      OnSyncSetupError("network connection is currently unavailable");
+      OnSyncSetupError("ERR_SYNC_NO_INTERNET");
     }
   }
 }
@@ -158,13 +157,17 @@ void BraveSyncServiceImpl::OnSetupSyncHaveCode(const std::string& sync_words,
     const std::string& device_name) {
   DCHECK_CURRENTLY_ON(content::BrowserThread::UI);
   if (content::GetNetworkConnectionTracker()->IsOffline()) {
-    // TODO(cezaraugusto): ERR_SYNC_NO_INTERNET in #971
-    OnSyncSetupError("network connection is currently unavailable");
+    OnSyncSetupError("ERR_SYNC_NO_INTERNET");
     return;
   }
 
-  if (sync_words.empty() || device_name.empty()) {
-    OnSyncSetupError("missing sync words or device name");
+  if (sync_words.empty()) {
+    OnSyncSetupError("ERR_SYNC_WRONG_WORDS");
+    return;
+  }
+
+  if (device_name.empty()) {
+    OnSyncSetupError("ERR_SYNC_NO_DEVICE_NAME");
     return;
   }
 
@@ -189,13 +192,12 @@ void BraveSyncServiceImpl::OnSetupSyncNewToSync(
     const std::string& device_name) {
   DCHECK_CURRENTLY_ON(content::BrowserThread::UI);
   if (content::GetNetworkConnectionTracker()->IsOffline()) {
-    // TODO(cezaraugusto): ERR_SYNC_NO_INTERNET in #971
-    OnSyncSetupError("network connection is currently unavailable");
+    OnSyncSetupError("ERR_SYNC_NO_INTERNET");
     return;
   }
 
   if (device_name.empty()) {
-    OnSyncSetupError("missing device name");
+    OnSyncSetupError("ERR_SYNC_NO_DEVICE_NAME");
     return;
   }
 

components/brave_sync/extension/background.js

@@ -9,7 +9,7 @@ chrome.braveSync.onGotInitData.addListener(function(seed, device_id, config, syn
       seed = module.exports.passphrase.toBytes32(sync_words)
     } catch(err) {
       console.log(`"onGotInitData" sync_words=${JSON.stringify(sync_words)} err.message=${err.message}`);
-      chrome.braveSync.syncSetupError('wrong code words')
+      chrome.braveSync.syncSetupError('ERR_SYNC_WRONG_WORDS')
       return;
     }
   }

components/brave_sync/ui/actions/sync_actions.ts

@@ -117,6 +117,21 @@ export const onSetupSyncHaveCode = (syncWords: string, deviceName: string) => {
   return action(types.SYNC_SETUP_SYNC_HAVE_CODE, { syncWords, deviceName })
 }
 
+/**
+ * Dispatched by the back-end when Sync encountered an error
+ * @param {SetupErrorType} error - the error message
+ */
+export const onSyncSetupError = (error: Sync.SetupErrorType) => {
+  return action(types.SYNC_SETUP_ERROR, { error })
+}
+
+/**
+ * Reset the Sync Error
+ */
+export const resetSyncSetupError = () => {
+  return action(types.SYNC_RESET_SETUP_ERROR)
+}
+
 /**
  * Dispatched by the back-end to inform useful log messages for debugging purposes
  * @param {string} message - the log message

components/brave_sync/ui/brave_sync.tsx

@@ -60,8 +60,8 @@ window.cr.define('sync_ui_exports', function () {
     getActions().onLogMessage(message)
   }
 
-  function syncSetupError (error: string) {
-    alert('Sync setup error: ' + error)
+  function syncSetupError (error: Sync.SetupErrorType) {
+    getActions().onSyncSetupError(error)
   }
 
   return {

components/brave_sync/ui/components/disabledContent.tsx

@@ -45,7 +45,7 @@ class SyncDisabledContent extends React.PureComponent<SyncDisabledContentProps,
   }
 
   render () {
-    const { actions } = this.props
+    const { actions, syncData } = this.props
     return (
       <Grid columns='auto 1fr'>
         {
@@ -54,6 +54,7 @@ class SyncDisabledContent extends React.PureComponent<SyncDisabledContentProps,
               <NewToSyncModal
                 actions={actions}
                 onClose={this.newToSyncModal}
+                onError={syncData.error}
               />
             )
             : null
@@ -64,6 +65,7 @@ class SyncDisabledContent extends React.PureComponent<SyncDisabledContentProps,
               <ExistingSyncCodeModal
                 actions={actions}
                 onClose={this.existingSyncCodeModal}
+                onError={syncData.error}
               />
             )
             : null

components/brave_sync/ui/components/modals/existingSyncCode.tsx

@@ -5,10 +5,10 @@
 import * as React from 'react'
 
 // Components
-import { Button, Input, Modal, TextArea } from 'brave-ui'
+import { Button, Input, Modal, TextArea, AlertBox } from 'brave-ui'
 
 // Feature-specific components
-import { Title, Label, SectionBlock, FlexColumn } from 'brave-ui/features/sync'
+import { Title, SubTitle, Label, SectionBlock, FlexColumn } from 'brave-ui/features/sync'
 
 // Utils
 import { getLocale } from '../../../../common/locale'
@@ -17,6 +17,7 @@ import { getDefaultDeviceName } from '../../helpers'
 interface ExistingSyncCodeModalProps {
   onClose: () => void
   actions: any
+  onError: Sync.SetupErrorType
 }
 
 interface ExistingSyncCodeModalState {
@@ -49,10 +50,44 @@ class ExistingSyncCodeModal extends React.PureComponent<ExistingSyncCodeModalPro
     this.props.actions.onSetupSyncHaveCode(syncWords, deviceName)
   }
 
+  onUserNoticedError = () => {
+    this.props.actions.resetSyncSetupError()
+  }
+
   render () {
-    const { onClose } = this.props
+    const { onClose, onError } = this.props
     return (
       <Modal id='showIAmExistingSyncCodeModal' onClose={onClose} size='small'>
+        {
+          onError === 'ERR_SYNC_WRONG_WORDS'
+          ? <AlertBox okString={getLocale('ok')} onClickOk={this.onUserNoticedError}>
+              <Title>{getLocale('errorWrongCodeTitle')}</Title>
+              <SubTitle>{getLocale('errorWrongCodeDescription')}</SubTitle>
+          </AlertBox>
+          : null
+        }
+        {
+          onError === 'ERR_SYNC_MISSING_WORDS'
+          ? <AlertBox okString={getLocale('ok')} onClickOk={this.onUserNoticedError}>
+              <Title>{getLocale('errorMissingCodeTitle')}</Title>
+          </AlertBox>
+          : null
+        }
+        {
+          onError === 'ERR_SYNC_NO_INTERNET'
+          ? <AlertBox okString={getLocale('ok')} onClickOk={this.onUserNoticedError}>
+              <Title>{getLocale('errorNoInternetTitle')}</Title>
+              <SubTitle>{getLocale('errorNoInternetDescription')}</SubTitle>
+            </AlertBox>
+          : null
+        }
+        {
+          onError === 'ERR_SYNC_NO_DEVICE_NAME'
+          ? <AlertBox okString={getLocale('ok')} onClickOk={this.onUserNoticedError}>
+              <Title>{getLocale('errorMissingDeviceNameTitle')}</Title>
+            </AlertBox>
+          : null
+        }
         <Title level={1}>{getLocale('iHaveAnExistingSyncCode')}</Title>
         <Label>{getLocale('enterYourSyncCodeWords')}</Label>
         <SectionBlock>

components/brave_sync/ui/components/modals/newToSync.tsx

@@ -5,10 +5,10 @@
 import * as React from 'react'
 
 // Components
-import { Button, Input, Modal } from 'brave-ui'
+import { Button, Input, Modal, AlertBox } from 'brave-ui'
 
 // Feature-specific components
-import { Title, Label, SectionBlock, FlexColumn } from 'brave-ui/features/sync'
+import { Title, SubTitle, Label, SectionBlock, FlexColumn } from 'brave-ui/features/sync'
 
 // Utils
 import { getLocale } from '../../../../common/locale'
@@ -17,6 +17,7 @@ import { getDefaultDeviceName } from '../../helpers'
 interface NewToSyncModalProps {
   onClose: () => void
   actions: any
+  onError: Sync.SetupErrorType
 }
 
 interface NewToSyncModalState {
@@ -43,11 +44,23 @@ class NewToSyncModal extends React.PureComponent<NewToSyncModalProps, NewToSyncM
     this.props.actions.onSetupNewToSync(this.deviceName)
   }
 
+  onUserNoticedError = () => {
+    this.props.actions.resetSyncSetupError()
+  }
+
   render () {
-    const { onClose } = this.props
+    const { onClose, onError } = this.props
     const { deviceName } = this.state
     return (
       <Modal id='showIAmNewToSyncModal' onClose={onClose} size='small'>
+        {
+          onError === 'ERR_SYNC_NO_INTERNET'
+          ? <AlertBox okString={getLocale('ok')} onClickOk={this.onUserNoticedError}>
+              <Title>{getLocale('errorNoInternetTitle')}</Title>
+              <SubTitle>{getLocale('errorNoInternetDescription')}</SubTitle>
+            </AlertBox>
+          : null
+        }
         <Title level={1}>{getLocale('iAmNewToSync')}</Title>
         <Label>{getLocale('enterAnOptionalName')}</Label>
         <SectionBlock>

components/brave_sync/ui/constants/sync_types.ts

@@ -17,5 +17,7 @@ export const enum types {
   SYNC_SAVED_SITE_SETTINGS = '@@sync/SYNC_SAVED_SITE_SETTINGS',
   SYNC_BROWSING_HISTORY = '@@sync/SYNC_BROWSING_HISTORY',
   SYNC_SETUP_SYNC_HAVE_CODE = '@@sync/SYNC_SETUP_SYNC_HAVE_CODE',
+  SYNC_SETUP_ERROR = '@@sync/SYNC_SETUP_ERROR',
+  SYNC_RESET_SETUP_ERROR = '@@sync/SYNC_RESET_SETUP_ERROR',
   SYNC_ON_LOG_MESSAGE = '@@sync/SYNC_ON_LOG_MESSAGE'
 }

components/brave_sync/ui/reducers/sync_reducer.ts

@@ -122,17 +122,17 @@ const syncReducer: Reducer<Sync.State | undefined> = (state: Sync.State | undefi
       break
 
     case types.SYNC_SETUP_SYNC_HAVE_CODE:
-      const wordsAsArray = payload.syncWords.split(' ')
-      if (payload.deviceName.length === 0) {
-        window.alert('device name is required')
-      }
-      if (wordsAsArray.length !== 24) {
-        window.alert('Invalid input code')
-        break
-      }
       chrome.send('setupSyncHaveCode', [payload.syncWords, payload.deviceName])
       break
 
+    case types.SYNC_SETUP_ERROR:
+      state = { ...state, error: payload.error }
+      break
+
+    case types.SYNC_RESET_SETUP_ERROR:
+      state = { ...state, error: undefined }
+      break
+
     case types.SYNC_ON_LOG_MESSAGE:
       if (process.env.TARGET_GEN_DIR !== 'prod') {
         console.info('[SYNC] log message received from sync:', payload.message)

components/brave_sync/ui/storage.ts

@@ -15,7 +15,8 @@ export const defaultState = {
   syncWords: '',
   syncBookmarks: true,
   syncSavedSiteSettings: true,
-  syncBrowsingHistory: true
+  syncBrowsingHistory: true,
+  error: undefined
 }
 
 const cleanData = (state: Sync.State) => {

components/definitions/sync.d.ts

@@ -21,6 +21,15 @@ declare namespace Sync {
     id: number
     lastActive: number
   }
+
+export type SetupErrorType =
+  'ERR_SYNC_NO_INTERNET' |
+  'ERR_SYNC_MISSING_WORDS' |
+  'ERR_SYNC_WRONG_WORDS' |
+  'ERR_SYNC_NO_DEVICE_NAME' |
+  'ERR_SYNC_INIT_FAILED' |
+  undefined
+
   export interface State {
     thisDeviceName: string
     devices: Devices[]
@@ -30,5 +39,6 @@ declare namespace Sync {
     syncBookmarks: boolean
     syncSavedSiteSettings: boolean
     syncBrowsingHistory: boolean
+    error: SetupErrorType
   }
 }

components/resources/brave_components_strings.grd

@@ -451,6 +451,15 @@
       <message name="IDS_BRAVE_SYNC_RESET_SYNC_FIRST_BULLET" desc="The Brave Sync first bullet of the Reset Sync Modal">Resetting Sync clears data stored on the Sync server and resets this device's Sync settings.</message>
       <message name="IDS_BRAVE_SYNC_RESET_SYNC_SECOND_BULLET" desc="The Brave Sync second bullet of the Reset Sync Modal">You will keep any bookmarks, history and other browsing data currently on this device.</message>
       <message name="IDS_BRAVE_SYNC_RESET_SYNC_THIRD_BULLET" desc="The Brave Sync third bullet of the Reset Sync Modal">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.</message>
+      <message name="IDS_BRAVE_SYNC_ERROR_WRONG_CODE_TITLE" desc="Error message in dialog for when sync words are invalid (title)">Invalid sync code.</message>
+      <message name="IDS_BRAVE_SYNC_ERROR_WRONG_CODE_DESCRIPTION" desc="Error message in dialog for when sync words are invalid (description)">Please try again.</message>
+      <message name="IDS_BRAVE_SYNC_ERROR_NO_INTERNET_TITLE" desc="Error message in dialog for when user is offline (title)">No internet connection.</message>
+      <message name="IDS_BRAVE_SYNC_ERROR_NO_INTERNET_DESCRIPTION" desc="Error message in dialog for when user is offline (description)">Please try again when your connection is available.</message>
+      <message name="IDS_BRAVE_SYNC_ERROR_MISSING_DEVICE_NAME_TITLE" desc="Error message in dialog for when device name is missing (title)">Device name is required.</message>
+      <message name="IDS_BRAVE_SYNC_ERROR_MISSING_SYNC_CODE_TITLE" desc="Error message in dialog for when device name is missing (description)">Please add a sync code.</message>
+      <message name="IDS_BRAVE_SYNC_OK_BUTTON" desc="The OK button">Ok</message>
+
+      <!-- other -->
       <message name="IDS_BRAVE_UI_VIEW_DETAILS" desc="">View Details</message>
       <message name="IDS_BRAVE_UI_REWARDS_CREATING_TEXT" desc="">Creating wallet</message>
     </messages>