From 074b3466b174fd52a73e62b743bac57ee0bdf970 Mon Sep 17 00:00:00 2001
From: Cezar Augusto <boss@cezaraugusto.net>
Date: Fri, 30 Nov 2018 20:02:43 -0200
Subject: [PATCH] handle multiple error cases for sync fix
 brave/brave-browser#2103 - error states added:

- no internet
- wrong sync words
- empty sync words
- missing device name
---
 browser/ui/webui/brave_webui_source.cc        | 10 ++++-
 .../brave_sync/brave_sync_service_impl.cc     | 20 +++++----
 components/brave_sync/extension/background.js |  2 +-
 .../brave_sync/ui/actions/sync_actions.ts     | 15 +++++++
 components/brave_sync/ui/brave_sync.tsx       |  4 +-
 .../ui/components/disabledContent.tsx         |  4 +-
 .../ui/components/modals/existingSyncCode.tsx | 41 +++++++++++++++++--
 .../ui/components/modals/newToSync.tsx        | 19 +++++++--
 .../brave_sync/ui/constants/sync_types.ts     |  2 +
 .../brave_sync/ui/reducers/sync_reducer.ts    | 16 ++++----
 components/brave_sync/ui/storage.ts           |  3 +-
 components/definitions/sync.d.ts              | 10 +++++
 .../resources/brave_components_strings.grd    |  9 ++++
 13 files changed, 126 insertions(+), 29 deletions(-)

diff --git a/browser/ui/webui/brave_webui_source.cc b/browser/ui/webui/brave_webui_source.cc
index 7a4ef6e16407..571c31bb68cf 100644
--- a/browser/ui/webui/brave_webui_source.cc
+++ b/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"), {
diff --git a/components/brave_sync/brave_sync_service_impl.cc b/components/brave_sync/brave_sync_service_impl.cc
index 5802acf00119..697f251a19f5 100644
--- a/components/brave_sync/brave_sync_service_impl.cc
+++ b/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;
   }
 
diff --git a/components/brave_sync/extension/background.js b/components/brave_sync/extension/background.js
index 0b974e8b822e..d16432dfb4db 100644
--- a/components/brave_sync/extension/background.js
+++ b/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;
     }
   }
diff --git a/components/brave_sync/ui/actions/sync_actions.ts b/components/brave_sync/ui/actions/sync_actions.ts
index f35d16fdbbc6..4640c625513f 100644
--- a/components/brave_sync/ui/actions/sync_actions.ts
+++ b/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
diff --git a/components/brave_sync/ui/brave_sync.tsx b/components/brave_sync/ui/brave_sync.tsx
index b03f7900703f..4c49efa5019e 100644
--- a/components/brave_sync/ui/brave_sync.tsx
+++ b/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 {
diff --git a/components/brave_sync/ui/components/disabledContent.tsx b/components/brave_sync/ui/components/disabledContent.tsx
index 3d04787c8fee..3d23f0588354 100644
--- a/components/brave_sync/ui/components/disabledContent.tsx
+++ b/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
diff --git a/components/brave_sync/ui/components/modals/existingSyncCode.tsx b/components/brave_sync/ui/components/modals/existingSyncCode.tsx
index 5df9c125cab6..e5da250a50cd 100644
--- a/components/brave_sync/ui/components/modals/existingSyncCode.tsx
+++ b/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>
diff --git a/components/brave_sync/ui/components/modals/newToSync.tsx b/components/brave_sync/ui/components/modals/newToSync.tsx
index cb12ee61f944..865ee9dc09c9 100644
--- a/components/brave_sync/ui/components/modals/newToSync.tsx
+++ b/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>
diff --git a/components/brave_sync/ui/constants/sync_types.ts b/components/brave_sync/ui/constants/sync_types.ts
index c2d8c5f749c3..3570e8835810 100644
--- a/components/brave_sync/ui/constants/sync_types.ts
+++ b/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'
 }
diff --git a/components/brave_sync/ui/reducers/sync_reducer.ts b/components/brave_sync/ui/reducers/sync_reducer.ts
index 7d7268cf7897..e602bfcac314 100644
--- a/components/brave_sync/ui/reducers/sync_reducer.ts
+++ b/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)
diff --git a/components/brave_sync/ui/storage.ts b/components/brave_sync/ui/storage.ts
index 95f6b89b9fb5..ae482f72e968 100644
--- a/components/brave_sync/ui/storage.ts
+++ b/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) => {
diff --git a/components/definitions/sync.d.ts b/components/definitions/sync.d.ts
index 8f06a5bc0140..9afbeaf01a26 100644
--- a/components/definitions/sync.d.ts
+++ b/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
   }
 }
diff --git a/components/resources/brave_components_strings.grd b/components/resources/brave_components_strings.grd
index ab72c01f3539..354fecba4afb 100644
--- a/components/resources/brave_components_strings.grd
+++ b/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>