From 7dd13a0fa06e25290d86cc06ff267521488d67e8 Mon Sep 17 00:00:00 2001 From: Cezar Augusto Date: Mon, 3 Dec 2018 19:17:58 -0200 Subject: [PATCH 1/6] add locale resouces for sync v2 --- browser/ui/webui/brave_webui_source.cc | 107 ++++++++++------- .../resources/brave_components_strings.grd | 108 +++++++++++------- 2 files changed, 135 insertions(+), 80 deletions(-) diff --git a/browser/ui/webui/brave_webui_source.cc b/browser/ui/webui/brave_webui_source.cc index d342320b7488..63980129d88d 100644 --- a/browser/ui/webui/brave_webui_source.cc +++ b/browser/ui/webui/brave_webui_source.cc @@ -433,53 +433,78 @@ void CustomizeWebUIHTMLSource(const std::string &name, content::WebUIDataSource* } }, { std::string("sync"), { - { "sync", IDS_BRAVE_SYNC_TITLE }, - { "beta", IDS_BRAVE_SYNC_TITLE_BETA }, - { "syncInfo1", IDS_BRAVE_SYNC_INFO_1 }, - { "syncInfo2", IDS_BRAVE_SYNC_INFO_2 }, - { "done", IDS_BRAVE_SYNC_DONE }, - { "cancel", IDS_BRAVE_SYNC_CANCEL }, - { "areYouSure", IDS_BRAVE_SYNC_ARE_YOU_SURE }, - - { "iAmNewToSync", IDS_BRAVE_SYNC_I_AM_NEW_TO_SYNC }, - { "iHaveAnExistingSyncCode", IDS_BRAVE_SYNC_I_HAVE_AN_EXISTING_SYNC_CODE }, - - { "devices", IDS_BRAVE_SYNC_DEVICES }, - { "deviceName", IDS_BRAVE_SYNC_DEVICE_NAME }, - { "id", IDS_BRAVE_SYNC_ID }, - { "lastActive", IDS_BRAVE_SYNC_LAST_ACTIVE }, - { "syncANewDevice", IDS_BRAVE_SYNC_NEW_DEVICE }, - { "syncData", IDS_BRAVE_SYNC_DATA }, - { "syncDataInfo", IDS_BRAVE_SYNC_DATA_INFO }, - { "bookmarks", IDS_BRAVE_SYNC_BOOKMARKS }, - { "savedSiteSettings", IDS_BRAVE_SYNC_SAVED_SITE_SETTINGS }, - { "browsingHistory", IDS_BRAVE_SYNC_BROWSING_HISTORY }, - { "clearData", IDS_BRAVE_SYNC_CLEAR_DATA }, - { "resetSync", IDS_BRAVE_SYNC_RESET_SYNC }, - { "removeDevice", IDS_BRAVE_SYNC_REMOVE_DEVICE }, - - { "setUpSync", IDS_BRAVE_SYNC_SET_UP_SYNC }, - - { "enterYourSyncCodeWords", IDS_BRAVE_SYNC_ENTER_SYNC_CODE_WORDS }, - { "enterAnOptionalName", IDS_BRAVE_SYNC_ENTER_OPTIONAL_NAME_FOR_THIS_DEVICE }, - - { "syncANewDeviceFirstBulletText", IDS_BRAVE_SYNC_SYNC_NEW_DEVICE_FIRST_BULLET }, - { "syncANewDeviceSecondBulletText", IDS_BRAVE_SYNC_SYNC_NEW_DEVICE_SECOND_BULLET }, - { "syncANewDeviceThirdBulletText", IDS_BRAVE_SYNC_SYNC_NEW_DEVICE_THIRD_BULLET }, - { "showSecretQRCode", IDS_BRAVE_SYNC_SHOW_QR_CODE }, - { "showSecretCodeWords", IDS_BRAVE_SYNC_SHOW_SECRET_CODE_WORDS }, - - { "resetSyncFirstBullet", IDS_BRAVE_SYNC_RESET_SYNC_FIRST_BULLET }, - { "resetSyncSecondBullet", IDS_BRAVE_SYNC_RESET_SYNC_SECOND_BULLET }, - { "resetSyncThirdBullet", IDS_BRAVE_SYNC_RESET_SYNC_THIRD_BULLET }, - + { "done", IDS_BRAVE_SYNC_SHARED_DONE_BUTTON }, + { "remove", IDS_BRAVE_SYNC_SHARED_REMOVE_PARTIAL }, + { "copied", IDS_BRAVE_SYNC_SHARED_COPIED_TEXT }, + { "wordCount", IDS_BRAVE_SYNC_SHARED_WORD_COUNT_TEXT }, + { "ok", IDS_BRAVE_SYNC_SHARED_OK_BUTTON }, + { "cancel", IDS_BRAVE_SYNC_SHARED_CANCEL_BUTTON }, + { "thisSyncChain", IDS_BRAVE_SYNC_SHARED_FROM_THIS_CHAIN_PARTIAL }, + // Enabled Content + { "braveSync", IDS_BRAVE_SYNC_ENABLED_BRAVE_TITLE }, + { "syncChainDevices", IDS_BRAVE_SYNC_ENABLED_DEVICES_CHAIN_TITLE }, + { "deviceName", IDS_BRAVE_SYNC_ENABLED_TABLE_DEVICE_NAME_TITLE }, + { "mainDevice", IDS_BRAVE_SYNC_ENABLED_TABLE_MAIN_DEVICE_TEXT }, + { "addedOn", IDS_BRAVE_SYNC_ENABLED_TABLE_ADDED_ON_TITLE }, + { "addDevice", IDS_BRAVE_SYNC_ENABLED_ADD_DEVICE_BUTTON }, + { "viewSyncCode", IDS_BRAVE_SYNC_ENABLED_VIEW_CODE_BUTTON }, + { "dataToSync", IDS_BRAVE_SYNC_ENABLED_DATA_TITLE }, + { "bookmarks", IDS_BRAVE_SYNC_ENABLED_BOOKMARKS_LABEL }, + { "savedSiteSettings", IDS_BRAVE_SYNC_ENABLED_SITE_SETTINGS_LABEL }, + { "browsingHistory", IDS_BRAVE_SYNC_ENABLED_HISTORY_LABEL }, + { "leaveSyncChain", IDS_BRAVE_SYNC_ENABLED_LEAVE_CHAIN_BUTTON }, + // Disabled Content + { "syncTitle", IDS_BRAVE_SYNC_DISABLED_DESCRIPTION }, + { "syncDescription", IDS_BRAVE_SYNC_DISABLED_NEW_CHAIN_DESCRIPTION }, + { "startSyncChain", IDS_BRAVE_SYNC_DISABLED_START_NEW_CHAIN_BUTTON }, + { "enterSyncChainCode", IDS_BRAVE_SYNC_DISABLED_ENTER_CODE_BUTTON }, + { "confirmSyncCode", IDS_BRAVE_SYNC_DISABLED_CONFIRM_CODE_BUTTON }, + // [modal] Enter Sync Code + { "enterSyncCode", IDS_BRAVE_SYNC_ENTER_CODE_TITLE }, + { "enterSyncCodeDescription", IDS_BRAVE_SYNC_ENTER_CODE_DESCRIPTION }, + { "confirmCode", IDS_BRAVE_SYNC_ENTER_CODE_CONFIRM_CODE_BUTTON }, + { "invalidCode", IDS_BRAVE_SYNC_ENTER_CODE_INVALID_CODE_TEXT }, + { "tryAgain", IDS_BRAVE_SYNC_ENTER_CODE_TRY_AGAIN_TEXT }, + // [modal] Remove Main Device + { "thisDeviceRemovalDescription", IDS_BRAVE_SYNC_REMOVE_MAIN_DEVICE_DESCRIPTION }, + { "joinSyncChain", IDS_BRAVE_SYNC_REMOVE_MAIN_DEVICE_JOIN_CHAIN_INSTRUCTIONS }, + // [modal] Remove Other Device + { "otherDeviceRemovalDescription", IDS_BRAVE_SYNC_REMOVE_OTHER_DEVICE_DESCRIPTION }, + // [modal] Reset Sync + { "warning", IDS_BRAVE_SYNC_RESET_WARNING_TITLE }, + { "removing", IDS_BRAVE_SYNC_RESET_REMOVING_PARTIAL }, + { "deleteSyncChain", IDS_BRAVE_SYNC_RESET_DELETE_CHAIN_PARTIAL }, + { "deleteSyncDescription", IDS_BRAVE_SYNC_RESET_REMOVAL_INSTRUCTIONS }, + { "startSyncChainHowTo", IDS_BRAVE_SYNC_RESET_START_NEW_INSTRUCTIONS }, + { "areYouSure", IDS_BRAVE_SYNC_RESET_ARE_YOU_SURE_TITLE }, + // [modal] Add New Chain + { "scanThisCode", IDS_BRAVE_SYNC_NEW_CHAIN_MAIN_DESCRIPTION }, + { "scanThisCodeHowTo", IDS_BRAVE_SYNC_NEW_CHAIN_MAIN_INSTRUCTIONS }, + { "enterCodeWordsInstead", IDS_BRAVE_SYNC_NEW_CHAIN_MAIN_CODE_WORDS_BUTTON }, + { "previous", IDS_BRAVE_SYNC_NEW_CHAIN_MAIN_PREVIOUS_BUTTON }, + { "lookingForDevice", IDS_BRAVE_SYNC_NEW_CHAIN_MAIN_LOOKING_FOR_DEVICE_BUTTON }, + // [modal] Add New Chain (Camera Option) + // [modal] Add New Chain (no Camera) + { "enterThisCode", IDS_BRAVE_SYNC_NEW_CHAIN_DESKTOP_TITLE }, + { "mobileEnterThisCode", IDS_BRAVE_SYNC_NEW_CHAIN_MOBILE_TITLE }, + { "syncChainCodeHowTo", IDS_BRAVE_SYNC_NEW_CHAIN_DESCRIPTION }, + { "useCameraInstead", IDS_BRAVE_SYNC_NEW_CHAIN_USE_CAMERA_BUTTON }, + // [modal] Choose Device Type + { "letsSync", IDS_BRAVE_SYNC_CHOOSE_DEVICE_NEW_DEVICE_TITLE }, + { "chooseDeviceType", IDS_BRAVE_SYNC_CHOOSE_DEVICE_CHOOSE_DEVICE_TITLE }, + { "phoneTablet", IDS_BRAVE_SYNC_CHOOSE_DEVICE_MOBILE_TITLE }, + { "computer", IDS_BRAVE_SYNC_CHOOSE_DEVICE_COMPUTER_TITLE }, + // [modal] View Sync Code + { "qrCode", IDS_BRAVE_SYNC_VIEW_CODE_QR_CODE_TITLE }, + { "wordCode", IDS_BRAVE_SYNC_VIEW_CODE_WORD_CODE_TITLE }, + { "privateKey", IDS_BRAVE_SYNC_VIEW_CODE_PRIVATE_KEY_PHRASE }, + // errors { "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/resources/brave_components_strings.grd b/components/resources/brave_components_strings.grd index f56c428caebe..940eb8f0d849 100644 --- a/components/resources/brave_components_strings.grd +++ b/components/resources/brave_components_strings.grd @@ -435,53 +435,83 @@ With your old browser, you paid to browse the web by viewing ads with your valuable attention. You spent your valuable time downloading invasive ad technology that transmitted your valuable private data to advertisers — without your consent. Today, Brave welcomes you to the new Internet. One where your time is valued, your personal data is kept private, and you actually get paid for your attention. Your wallet + View Details + Creating wallet - Brave Sync - beta - Sync encrypted browser data between your devices securely and privately using Brave Sync - Note: Sync for iOS and Android is still being completed and will be released soon. - - Done - Cancel - Are you sure? - I am new to Sync - I have an existing Sync code - Devices - Device Name - ID - Last active - Sync a new device - Sync Data - Sync the following data from this device: - Bookmarks - Saved Site Settings - Browsing History - Clear Data - Reset Sync - Remove - Set up Sync - Enter your Sync code words: - Enter a name for this device: - Open Brave on your target device and go to Preferences > Sync > I have an existing synced device. - If asked to scan a QR code, click the button below and scan the code using the device's camera. - If prompted for security codes, type in the words below. - Show Sync QR Code - Show Sync Code Words - Resetting Sync clears data stored on the Sync server and resets this device's Sync settings. - You will keep any bookmarks, history and other browsing data currently on this device. - 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. + + Done + Remove + Copied! + Word Count: + Ok + Cancel + from this sync chain + + Brave Sync + Devices in your sync chain + device name + (Main Device) + added on + add device + view sync code + Data to sync from + Bookmarks + Saved Site Settings + Browsing History + Leave Sync Chain + + Brave Sync allows you to sync bookmarks data privately between your Brave Browsers on your various devices. + When you start a new sync chain, a new sync code is created. You will use this same code across your devices to link them together. + Start a new sync chain + Enter a sync chain code + Confirm Sync Code + + Enter a sync code + Go to Brave Settings > Sync > Display sync code + Confirm Sync Code + Invalid sync code. + Please try again. + + Local device data will remain intact on all devices. Other devices in this sync chain will remain synced. + To join a sync chain again, choose “Enter a sync chain code”. + + Note: Removing this device from this sync chain does not clear previously synced data from the device. + + Warning! + Removing + will delete this sync chain. + Your local data on this device will be retained but all data in Brave’s Sync cache will be deleted. + You can start a new sync chain or sync with a new device by entering its sync chain code. + Are you sure? + + Now, using Brave on your mobile device, scan this code. + Go to: Brave Settings > Sync > Scan Sync Code + Enter code words instead... + < Previous + Looking for device + + + Now, using Brave on your computer, enter this code: + Now, using Brave on your mobile device, enter this code: + Go to: Brave Settings > Sync > Enter a Sync Chain Code + Use my camera instead... + + Let’s sync a new device with + Choose a device type: + Phone/Tablet + Computer + + QR Code + Word Code + This is a private key. If you share it, your private data may be compromised. + Invalid sync code. Please try again. No internet connection. Please try again when your connection is available. Device name is required. Please add a sync code. - Ok - - - View Details - Creating wallet From 5b178d8dd203090214d394b891e0e450535b07fe Mon Sep 17 00:00:00 2001 From: Cezar Augusto Date: Tue, 4 Dec 2018 15:00:42 -0200 Subject: [PATCH 2/6] update brave-ui w/ sync v2 components --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3ea9467c15c1..e4c3c12e53b3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1237,8 +1237,8 @@ } }, "brave-ui": { - "version": "github:brave/brave-ui#cee363dd33ec3c7499b7d239384a6f2eb601f981", - "from": "github:brave/brave-ui#cee363dd33ec3c7499b7d239384a6f2eb601f981", + "version": "github:brave/brave-ui#2b8e852f5585342594bfaf29a2d392ba2fe72b81", + "from": "github:brave/brave-ui#2b8e852f5585342594bfaf29a2d392ba2fe72b81", "dev": true, "requires": { "emptykit.css": "^1.0.1", diff --git a/package.json b/package.json index fc921d52aab9..6c4b3747f93e 100644 --- a/package.json +++ b/package.json @@ -272,7 +272,7 @@ "@types/react-dom": "^16.0.7", "@types/react-redux": "6.0.4", "awesome-typescript-loader": "^5.2.0", - "brave-ui": "github:brave/brave-ui#cee363dd33ec3c7499b7d239384a6f2eb601f981", + "brave-ui": "github:brave/brave-ui#2b8e852f5585342594bfaf29a2d392ba2fe72b81", "css-loader": "^0.28.9", "csstype": "^2.5.5", "emptykit.css": "^1.0.1", From e0abc587402721368f34e3b9aae1c7fdd059e946 Mon Sep 17 00:00:00 2001 From: Cezar Augusto Date: Tue, 4 Dec 2018 15:01:47 -0200 Subject: [PATCH 3/6] sync v2 --- components/brave_sync/ui/BUILD.gn | 10 +- components/brave_sync/ui/components/app.tsx | 54 +---- .../ui/components/disabledContent.tsx | 125 ++++++---- .../ui/components/enabledContent.tsx | 226 ++++++++++-------- .../modals/addNewChainCameraOption.tsx | 124 ++++++++++ .../components/modals/addNewChainNoCamera.tsx | 83 +++++++ .../ui/components/modals/deviceType.tsx | 130 ++++++++++ .../ui/components/modals/enterSyncCode.tsx | 142 +++++++++++ .../ui/components/modals/existingSyncCode.tsx | 117 --------- .../ui/components/modals/newToSync.tsx | 87 ------- .../ui/components/modals/removeDevice.tsx | 81 +++++++ .../ui/components/modals/resetSync.tsx | 117 +++++---- .../ui/components/modals/scanCode.tsx | 113 +++++++++ .../ui/components/modals/syncNewDevice.tsx | 107 --------- .../ui/components/modals/viewSyncCode.tsx | 67 ++++++ 15 files changed, 1037 insertions(+), 546 deletions(-) create mode 100644 components/brave_sync/ui/components/modals/addNewChainCameraOption.tsx create mode 100644 components/brave_sync/ui/components/modals/addNewChainNoCamera.tsx create mode 100644 components/brave_sync/ui/components/modals/deviceType.tsx create mode 100644 components/brave_sync/ui/components/modals/enterSyncCode.tsx delete mode 100644 components/brave_sync/ui/components/modals/existingSyncCode.tsx delete mode 100644 components/brave_sync/ui/components/modals/newToSync.tsx create mode 100644 components/brave_sync/ui/components/modals/removeDevice.tsx create mode 100644 components/brave_sync/ui/components/modals/scanCode.tsx delete mode 100644 components/brave_sync/ui/components/modals/syncNewDevice.tsx create mode 100644 components/brave_sync/ui/components/modals/viewSyncCode.tsx diff --git a/components/brave_sync/ui/BUILD.gn b/components/brave_sync/ui/BUILD.gn index a6e6136b1c06..c1f015272312 100644 --- a/components/brave_sync/ui/BUILD.gn +++ b/components/brave_sync/ui/BUILD.gn @@ -3,10 +3,14 @@ import("//brave/components/common/typescript.gni") transpile_web_ui("ui") { inputs = [ "actions/sync_actions.ts", - "components/modals/existingSyncCode.tsx", - "components/modals/newToSync.tsx", + "components/modals/addNewChainCameraOption.tsx", + "components/modals/addNewChainNoCamera.tsx", + "components/modals/deviceType.tsx", + "components/modals/enterSyncCode.tsx", + "components/modals/removeDevice.tsx", "components/modals/resetSync.tsx", - "components/modals/syncNewDevice.tsx", + "components/modals/scanCode.tsx", + "components/modals/viewSyncCode.tsx", "components/app.tsx", "components/disabledContent.tsx", "components/enabledContent.tsx", diff --git a/components/brave_sync/ui/components/app.tsx b/components/brave_sync/ui/components/app.tsx index e9b19cc80214..479ec0687cb9 100644 --- a/components/brave_sync/ui/components/app.tsx +++ b/components/brave_sync/ui/components/app.tsx @@ -6,22 +6,11 @@ import * as React from 'react' import { bindActionCreators, Dispatch } from 'redux' import { connect } from 'react-redux' -// Feature-specific components -import { - Main, - Title, - EmphasisText, - SecondaryText, - Link, - SectionBlock -} from 'brave-ui/features/sync' - // Component groups import DisabledContent from './disabledContent' import EnabledContent from './enabledContent' // Utils -import { getLocale } from '../../../common/locale' import * as syncActions from '../actions/sync_actions' // Assets @@ -34,26 +23,7 @@ interface Props { actions: any } -interface State { - deviceName: string - showQRCode: boolean - showSyncWords: boolean - syncWords: string -} - -const syncLink = 'https://github.com/brave/sync/wiki/Design' - -export class SyncPage extends React.PureComponent { - constructor (props: Props) { - super(props) - this.state = { - deviceName: '', - showQRCode: false, - showSyncWords: false, - syncWords: '' - } - } - +export class SyncPage extends React.PureComponent { componentDidMount () { // Inform the back-end that Sync can be loaded syncActions.onPageLoaded() @@ -61,26 +31,18 @@ export class SyncPage extends React.PureComponent { render () { const { syncData, actions } = this.props + if (!syncData) { return null } + return (
-
- {getLocale('sync')} - - {getLocale('syncInfo1')} - ? - - {getLocale('syncInfo2')} - - { - syncData.isSyncConfigured - ? - : - } - -
+ { + syncData.isSyncConfigured && syncData.devices.length > 1 + ? + : + }
) } diff --git a/components/brave_sync/ui/components/disabledContent.tsx b/components/brave_sync/ui/components/disabledContent.tsx index 3d23f0588354..9570857c827d 100644 --- a/components/brave_sync/ui/components/disabledContent.tsx +++ b/components/brave_sync/ui/components/disabledContent.tsx @@ -8,27 +8,37 @@ import * as React from 'react' import { Button } from 'brave-ui' // Component-specific components -import { Grid } from 'brave-ui/features/sync' +import { + Main, + Title, + SectionBlock, + DisabledContentButtonGrid, + TableGrid, + Paragraph +} from 'brave-ui/features/sync' + +import { SyncStartIcon } from 'brave-ui/features/sync/images' // Modals -import NewToSyncModal from './modals/newToSync' -import ExistingSyncCodeModal from './modals/existingSyncCode' +import DeviceTypeModal from './modals/deviceType' +import EnterSyncCodeModal from './modals/enterSyncCode' // Utils import { getLocale } from '../../../common/locale' +import { getDefaultDeviceName } from '../helpers' -interface SyncDisabledContentProps { +interface Props { syncData: Sync.State actions: any } -interface SyncDisabledContentState { +interface State { newToSync: boolean existingSyncCode: boolean } -class SyncDisabledContent extends React.PureComponent { - constructor (props: SyncDisabledContentProps) { +export default class SyncDisabledContent extends React.PureComponent { + constructor (props: Props) { super(props) this.state = { newToSync: false, @@ -36,61 +46,82 @@ class SyncDisabledContent extends React.PureComponent { + componentWillMount () { + // once the screen is rendered, create a sync chain. + // this allow us to request the qr code and sync words immediately + const { thisDeviceName } = this.props.syncData + if (thisDeviceName === '') { + this.props.actions.onSetupNewToSync(getDefaultDeviceName()) + } + } + + componentDidUpdate () { + // once this screen is rendered and component is updated, + // request sync qr code and words so it can be seen immediately + // upon user request via "start a new sync chain" button. + const { seedQRImageSource, syncWords } = this.props.syncData + if (!seedQRImageSource && !syncWords) { + this.props.actions.onRequestQRCode() + this.props.actions.onRequestSyncWords() + } + } + + onClickNewSyncChainButton = () => { this.setState({ newToSync: !this.state.newToSync }) } - existingSyncCodeModal = () => { + onClickEnterSyncChainCodeButton = () => { this.setState({ existingSyncCode: !this.state.existingSyncCode }) } render () { const { actions, syncData } = this.props + const { newToSync, existingSyncCode } = this.state + + if (!syncData) { + return null + } + return ( - +
{ - this.state.newToSync - ? ( - - ) + newToSync + ? : null } { - this.state.existingSyncCode - ? ( - - ) + existingSyncCode + ? : null } -
-
-
-
- + + +
+ {getLocale('syncTitle')} + {getLocale('syncDescription')} + + +
+
+
+
+ + +
+ +
) } } - -export default SyncDisabledContent diff --git a/components/brave_sync/ui/components/enabledContent.tsx b/components/brave_sync/ui/components/enabledContent.tsx index a6d66300bf88..358b511cd090 100644 --- a/components/brave_sync/ui/components/enabledContent.tsx +++ b/components/brave_sync/ui/components/enabledContent.tsx @@ -6,41 +6,68 @@ import * as React from 'react' // Components import { Button } from 'brave-ui' -import SwitchButton from 'brave-ui/old/switchButton' import Table, { Cell, Row } from 'brave-ui/components/dataTables/table' +import { Toggle } from 'brave-ui/features/shields' // Feature-specific components import { - Grid, + Main, + Title, + SettingsToggleGrid, SwitchLabel, - Paragraph, SectionBlock, - SubTitle + SubTitle, + TableRowDevice, + TableRowRemove, + TableRowRemoveButton, + TableGrid, + TableButtonGrid } from 'brave-ui/features/sync' // Modals -import SyncANewDeviceModal from './modals/syncNewDevice' +import RemoveDeviceModal from './modals/removeDevice' +import ViewSyncCodeModal from './modals/viewSyncCode' +import DeviceTypeModal from './modals/deviceType' import ResetSyncModal from './modals/resetSync' // Utils import { getLocale } from '../../../common/locale' -interface SyncEnabledContentProps { +interface Props { syncData: Sync.State actions: any } -interface SyncEnabledContentState { - syncANewDevice: boolean +interface State { + removeDevice: boolean + viewSyncCode: boolean + addDevice: boolean resetSync: boolean + deviceToRemoveName: string | undefined + deviceToRemoveId: string | undefined } -class SyncEnabledContent extends React.PureComponent { - constructor (props: SyncEnabledContentProps) { +export default class SyncEnabledContent extends React.PureComponent { + constructor (props: Props) { super(props) this.state = { - syncANewDevice: false, - resetSync: false + removeDevice: false, + viewSyncCode: false, + addDevice: false, + resetSync: false, + deviceToRemoveName: '', + deviceToRemoveId: '' + } + } + + componentDidUpdate () { + // immediately request qr code and sync words + // in case they aren't already. this could happen if user + // had the sync word where the requests are stopped due to sync reset + const { seedQRImageSource, syncWords } = this.props.syncData + if (!seedQRImageSource && !syncWords) { + this.props.actions.onRequestQRCode() + this.props.actions.onRequestSyncWords() } } @@ -52,21 +79,23 @@ class SyncEnabledContent extends React.PureComponent { const cell: Row = { content: [ - { content: device.id }, - { content: device.name }, + { content: + + {device.name} {Number(device.id) === 0 ? getLocale('mainDevice') : null } + + }, { content: device.lastActive }, { content: ( - - × - - ), - customStyle: { 'text-align': 'center' } + × + + ) } ] } @@ -76,83 +105,111 @@ class SyncEnabledContent extends React.PureComponent{getLocale('deviceName')} }, + { content: getLocale('addedOn') }, + { content: {getLocale('remove')} } ] } - onRemoveDevice = (event: React.MouseEvent) => { - const target = event.target as HTMLSpanElement - this.props.actions.onRemoveDevice(Number(target.dataset.id), target.dataset.name) + onClickRemoveDeviceButton = (event: React.MouseEvent) => { + if (!event || !event.currentTarget || !event.currentTarget.dataset) { + return + } + const target = event.currentTarget as HTMLButtonElement + this.setState({ + deviceToRemoveName: target.dataset.name, + deviceToRemoveId: target.dataset.id, + removeDevice: !this.state.removeDevice + }) } - syncANewDeviceModal = () => { - this.setState({ syncANewDevice: !this.state.syncANewDevice }) + onClickViewSyncCodeButton = () => { + this.setState({ viewSyncCode: !this.state.viewSyncCode }) } - resetSyncModal = () => { - this.setState({ resetSync: !this.state.resetSync }) + onClickAddDeviceButton = () => { + this.setState({ addDevice: !this.state.addDevice }) } - onSyncReset = () => { - if (window.confirm(getLocale('areYouSure'))) { - this.props.actions.onSyncReset() - } + onClickResetSyncButton = () => { + this.setState({ resetSync: !this.state.resetSync }) } onSyncBookmarks = (event: React.ChangeEvent) => { this.props.actions.onSyncBookmarks(event.target.checked) } - onSyncSavedSiteSettings = (event: React.ChangeEvent) => { - this.props.actions.onSyncSavedSiteSettings(event.target.checked) - } - - onSyncBrowsingHistory = (event: React.ChangeEvent) => { - this.props.actions.onSyncBrowsingHistory(event.target.checked) - } - render () { const { actions, syncData } = this.props + const { + removeDevice, + viewSyncCode, + addDevice, + resetSync, + deviceToRemoveName, + deviceToRemoveId + } = this.state + + if (!syncData) { + return null + } + return ( - <> +
{ - this.state.syncANewDevice - ? ( - - ) : null } { - this.state.resetSync - ? + viewSyncCode + ? : null } + { + addDevice + ? + : null + } + { + resetSync + ? + : null + } + {getLocale('braveSync')} - {getLocale('devices')} - - Device list is empty -
-
) } } - -export default SyncEnabledContent diff --git a/components/brave_sync/ui/components/modals/addNewChainCameraOption.tsx b/components/brave_sync/ui/components/modals/addNewChainCameraOption.tsx new file mode 100644 index 000000000000..b88e71168233 --- /dev/null +++ b/components/brave_sync/ui/components/modals/addNewChainCameraOption.tsx @@ -0,0 +1,124 @@ +/* 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 { Button, Modal, TextAreaClipboard } from 'brave-ui' + +// Feature-specific components +import { + ModalHeader, + ModalTitle, + ModalSubTitle, + ModalContent, + ThreeColumnButtonGrid, + ThreeColumnButtonGridCol2, + ThreeColumnButtonGridCol1 +} from 'brave-ui/features/sync' + +// Modals +import ScanCodeModal from './scanCode' + +// Utils +import { getLocale } from '../../../../common/locale' + +// Images +import { SyncAddIcon } from 'brave-ui/features/sync/images' + +interface Props { + fromMobileScreen?: boolean + syncData: Sync.State + actions: any + onClose: () => void +} + +interface State { + useCameraInstead: boolean +} + +export default class AddNewChainCameraOptionModal extends React.PureComponent { + constructor (props: Props) { + super(props) + this.state = { + useCameraInstead: false + } + } + + onClickUseCameraInsteadButton = () => { + this.setState({ useCameraInstead: !this.state.useCameraInstead }) + } + + render () { + const { fromMobileScreen, onClose, syncData, actions } = this.props + const { useCameraInstead } = this.state + + if (!syncData) { + return null + } + + return ( + + { + useCameraInstead + ? + : null + } + + +
+ + { + fromMobileScreen + ? getLocale('mobileEnterThisCode') + : getLocale('enterThisCode') + } + + {getLocale('syncChainCodeHowTo')} +
+ + + + + + +