From 47653528b890fffd9e18bb5d54925c937ae3e1bc Mon Sep 17 00:00:00 2001
From: Hom Yan <yanzhihong23@qq.com>
Date: Tue, 28 Sep 2021 18:13:36 +0800
Subject: [PATCH] feat: merge and upload

---
 .../src/components/MaskAlert/index.tsx        | 15 +++-
 packages/dashboard/src/locales/en-US.json     |  8 +-
 .../Settings/components/BackupSetting.tsx     |  7 +-
 .../components/dialogs/BackupDialog.tsx       | 10 ++-
 .../dialogs/CloudBackupMergeDialog.tsx        | 76 +++++++++++++++----
 .../dialogs/CloudBackupPreviewDialog.tsx      | 38 ----------
 6 files changed, 94 insertions(+), 60 deletions(-)
 delete mode 100644 packages/dashboard/src/pages/Settings/components/dialogs/CloudBackupPreviewDialog.tsx

diff --git a/packages/dashboard/src/components/MaskAlert/index.tsx b/packages/dashboard/src/components/MaskAlert/index.tsx
index 1f2219b08145..b6359002edb8 100644
--- a/packages/dashboard/src/components/MaskAlert/index.tsx
+++ b/packages/dashboard/src/components/MaskAlert/index.tsx
@@ -41,11 +41,24 @@ const InfoAlert = styled(Alert)(({ theme }) => ({
     [`&.${alertClasses.standardError} .${alertClasses.message}`]: {
         color: `${getMaskColor(theme).redMain}`,
     },
+    // success
+    [`&.${alertClasses.standardSuccess}`]: {
+        backgroundColor: `${MaskColorVar.greenMain.alpha(0.1)}`,
+    },
+    [`&.${alertClasses.standardSuccess} .${alertClasses.icon}`]: {
+        color: `${getMaskColor(theme).greenMain}`,
+    },
+    [`&.${alertClasses.standardSuccess} .${alertClasses.action}`]: {
+        color: `${getMaskColor(theme).greenMain}`,
+    },
+    [`&.${alertClasses.standardSuccess} .${alertClasses.message}`]: {
+        color: `${getMaskColor(theme).greenMain}`,
+    },
 }))
 
 export interface MaskAlertProps {
     description: string
-    type?: 'error' | 'info'
+    type?: 'error' | 'info' | 'success'
 }
 
 export const MaskAlert = memo(({ description, type = 'info' }: MaskAlertProps) => {
diff --git a/packages/dashboard/src/locales/en-US.json b/packages/dashboard/src/locales/en-US.json
index 82ac8aa2058d..a3303604d92a 100644
--- a/packages/dashboard/src/locales/en-US.json
+++ b/packages/dashboard/src/locales/en-US.json
@@ -268,10 +268,10 @@
     "settings_dialogs_change_email_validation": "To change the Email, you need to verify your current Email address:",
     "settings_dialogs_current_phone_validation": "The current phone number for verification is",
     "settings_dialogs_change_phone_validation": "To change the phone number, you need to verify your current phone number:",
-    "settings_dialogs_merge_to_local": "Merge to local",
-    "settings_dialogs_merge_to_local_data": "Merge to local and Backup",
-    "settings_dialogs_upload_local_data": "Upload local data",
-    "settings_dialogs_backup_action_desc": "There is already a cloud backup, please merge the cloud backup to local before you back up.",
+    "settings_dialogs_backup_to_cloud": "Backup to cloud",
+    "settings_dialogs_merge_to_local_data": "Merge Cloud backup to local and backup to cloud",
+    "settings_dialogs_backup_action_desc": "There is already a cloud backup, please merge the cloud backup to local before you back up, or back up directly.",
+    "settings_dialogs_backup_merged_tip": "You already obtained the cloud backup to your local. If you want to complete your back up, please click on the backup button to update all your data to cloud.",
     "settings_label_backup_password": "Backup Password",
     "settings_label_new_backup_password": "New Backup Password",
     "settings_label_backup_password_cloud": "Backup passwords for files in the cloud",
diff --git a/packages/dashboard/src/pages/Settings/components/BackupSetting.tsx b/packages/dashboard/src/pages/Settings/components/BackupSetting.tsx
index 68a2309687b4..aab104e01246 100644
--- a/packages/dashboard/src/pages/Settings/components/BackupSetting.tsx
+++ b/packages/dashboard/src/pages/Settings/components/BackupSetting.tsx
@@ -14,6 +14,7 @@ export default function BackupSetting() {
     const t = useDashboardI18N()
     const { state } = useLocation() as { state: { open: 'setting' | null } }
     const { ensurePasswordSet } = useContext(UserContext)
+    const [merged, setMerged] = useState(false)
     const [showDialog, setShowDialog] = useState({
         backup: false,
         mode: false,
@@ -62,6 +63,7 @@ export default function BackupSetting() {
                     local={localMode}
                     params={params}
                     open={showDialog.backup}
+                    merged={merged}
                     onClose={() => setShowDialog({ ...showDialog, backup: false })}
                 />
             ) : null}
@@ -85,7 +87,10 @@ export default function BackupSetting() {
                     info={cloudFileInfo}
                     open={showDialog.merge}
                     onClose={() => setShowDialog({ ...showDialog, merge: false })}
-                    onMerged={() => setShowDialog({ ...showDialog, merge: false, backup: true })}
+                    onMerged={(merged) => {
+                        setMerged(merged)
+                        setShowDialog({ ...showDialog, merge: false, backup: true })
+                    }}
                 />
             ) : null}
         </>
diff --git a/packages/dashboard/src/pages/Settings/components/dialogs/BackupDialog.tsx b/packages/dashboard/src/pages/Settings/components/dialogs/BackupDialog.tsx
index 4853741ccd75..3e5cbb4a2afb 100644
--- a/packages/dashboard/src/pages/Settings/components/dialogs/BackupDialog.tsx
+++ b/packages/dashboard/src/pages/Settings/components/dialogs/BackupDialog.tsx
@@ -13,15 +13,17 @@ import { LoadingCard } from '../../../../components/Restore/steps/LoadingCard'
 import { encryptBackup } from '@masknet/backup-format'
 import { encode } from '@msgpack/msgpack'
 import PasswordFiled from '../../../../components/PasswordField'
+import { MaskAlert } from '../../../../components/MaskAlert'
 
 export interface BackupDialogProps {
     local?: boolean
     params?: VerifyCodeRequest
     open: boolean
+    merged?: boolean
     onClose(): void
 }
 
-export default function BackupDialog({ local = true, params, open, onClose }: BackupDialogProps) {
+export default function BackupDialog({ local = true, params, open, merged, onClose }: BackupDialogProps) {
     const snackbar = useSnackbar()
     const t = useDashboardI18N()
     const [backupPassword, setBackupPassword] = useState('')
@@ -118,6 +120,12 @@ export default function BackupDialog({ local = true, params, open, onClose }: Ba
                 </Box>
             ) : (
                 <Box sx={{ padding: '0 24px 24px' }}>
+                    {merged ? (
+                        <Box sx={{ marginBottom: '16px' }}>
+                            <MaskAlert description={t.settings_dialogs_backup_merged_tip()} type="success" />
+                        </Box>
+                    ) : null}
+
                     {previewInfo ? <BackupContentSelector json={previewInfo} onChange={handleContentChange} /> : null}
 
                     <PasswordFiled
diff --git a/packages/dashboard/src/pages/Settings/components/dialogs/CloudBackupMergeDialog.tsx b/packages/dashboard/src/pages/Settings/components/dialogs/CloudBackupMergeDialog.tsx
index 43b0537c74a5..838da94949e7 100644
--- a/packages/dashboard/src/pages/Settings/components/dialogs/CloudBackupMergeDialog.tsx
+++ b/packages/dashboard/src/pages/Settings/components/dialogs/CloudBackupMergeDialog.tsx
@@ -1,6 +1,14 @@
 import { useEffect, useState } from 'react'
-import { MaskDialog, useSnackbar } from '@masknet/theme'
-import { Box, Typography } from '@material-ui/core'
+import { MaskColorVar, MaskDialog, useSnackbar } from '@masknet/theme'
+import {
+    Box,
+    FormControlLabel,
+    formControlLabelClasses,
+    Radio,
+    RadioGroup,
+    styled,
+    Typography,
+} from '@material-ui/core'
 import LoadingButton from '@material-ui/lab/LoadingButton'
 import { BackupInfoCard } from '../../../../components/Restore/BackupInfoCard'
 import type { BackupFileInfo } from '../../type'
@@ -12,15 +20,28 @@ import { decryptBackup } from '@masknet/backup-format'
 import { decode, encode } from '@msgpack/msgpack'
 import PasswordField from '../../../../components/PasswordField'
 
+const StyledFormControlLabel = styled(FormControlLabel)({
+    [`&.${formControlLabelClasses.root}`]: {
+        background: MaskColorVar.lightBackground,
+        margin: '0 0 16px',
+        padding: '2px 0',
+        borderRadius: 8,
+    },
+    [`& .${formControlLabelClasses.label}`]: {
+        fontSize: 14,
+    },
+})
+
 export interface CloudBackupMergeDialogProps {
     account: string
     info: BackupFileInfo
     open: boolean
     onClose(): void
-    onMerged(): void
+    onMerged(merged: boolean): void
 }
 
 export function CloudBackupMergeDialog({ account, info, open, onClose, onMerged }: CloudBackupMergeDialogProps) {
+    const [mode, setMode] = useState('1')
     const [backupPassword, setBackupPassword] = useState('')
     const [incorrectBackupPassword, setIncorrectBackupPassword] = useState(false)
     const t = useDashboardI18N()
@@ -37,13 +58,21 @@ export function CloudBackupMergeDialog({ account, info, open, onClose, onMerged
                 await Services.Welcome.checkPermissionsAndRestore(data.id)
             }
 
-            onMerged()
+            onMerged(true)
             snackbar.enqueueSnackbar(t.settings_alert_merge_success(), { variant: 'success' })
         } catch (error) {
             setIncorrectBackupPassword(true)
         }
     }, [backupPassword, account, info])
 
+    const onBackup = () => {
+        if (mode === '1') {
+            onMerged(false)
+        } else {
+            handleMerge()
+        }
+    }
+
     useEffect(() => {
         setIncorrectBackupPassword(false)
     }, [backupPassword])
@@ -55,18 +84,35 @@ export function CloudBackupMergeDialog({ account, info, open, onClose, onMerged
                 <Typography sx={{ fontSize: '13px', padding: '24px 0' }}>
                     {t.settings_dialogs_backup_action_desc()}
                 </Typography>
-                <PasswordField
-                    fullWidth
-                    value={backupPassword}
-                    onChange={(event) => setBackupPassword(event.target.value)}
-                    placeholder={t.settings_label_backup_password_cloud()}
-                    sx={{ marginBottom: '24px' }}
-                    error={incorrectBackupPassword}
-                    helperText={incorrectBackupPassword ? t.settings_dialogs_incorrect_password() : ''}
-                />
 
-                <LoadingButton fullWidth onClick={handleMerge} loading={loading} disabled={incorrectBackupPassword}>
-                    {t.settings_dialogs_merge_to_local_data()}
+                <RadioGroup aria-label="mode" name="mode" value={mode} onChange={(e) => setMode(e.target.value)}>
+                    <StyledFormControlLabel
+                        value="1"
+                        control={<Radio size="small" />}
+                        label={t.settings_dialogs_backup_to_cloud()}
+                    />
+                    <StyledFormControlLabel
+                        sx={{ fontSize: 14 }}
+                        value="2"
+                        control={<Radio size="small" />}
+                        label={t.settings_dialogs_merge_to_local_data()}
+                    />
+                </RadioGroup>
+
+                {mode === '2' ? (
+                    <PasswordField
+                        fullWidth
+                        value={backupPassword}
+                        onChange={(event) => setBackupPassword(event.target.value)}
+                        placeholder={t.settings_label_backup_password_cloud()}
+                        sx={{ marginBottom: '24px' }}
+                        error={incorrectBackupPassword}
+                        helperText={incorrectBackupPassword ? t.settings_dialogs_incorrect_password() : ''}
+                    />
+                ) : null}
+
+                <LoadingButton fullWidth onClick={onBackup} loading={loading} disabled={incorrectBackupPassword}>
+                    {t.settings_button_backup()}
                 </LoadingButton>
             </Box>
         </MaskDialog>
diff --git a/packages/dashboard/src/pages/Settings/components/dialogs/CloudBackupPreviewDialog.tsx b/packages/dashboard/src/pages/Settings/components/dialogs/CloudBackupPreviewDialog.tsx
deleted file mode 100644
index a41ad6fa9f1c..000000000000
--- a/packages/dashboard/src/pages/Settings/components/dialogs/CloudBackupPreviewDialog.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { MaskDialog } from '@masknet/theme'
-import { Box, Typography, Button } from '@material-ui/core'
-import { BackupInfoCard } from '../../../../components/Restore/BackupInfoCard'
-import { useDashboardI18N } from '../../../../locales'
-import type { BackupFileInfo } from '../../type'
-
-export type Action = 'merge' | 'upload'
-
-export interface CloudBackupPreviewDialogProps {
-    info: BackupFileInfo
-    open: boolean
-    onClose(): void
-    onSelect(action: Action): void
-}
-
-export function CloudBackupPreviewDialog({ info, open, onClose, onSelect }: CloudBackupPreviewDialogProps) {
-    const t = useDashboardI18N()
-
-    return (
-        <MaskDialog maxWidth="xs" title={t.settings_cloud_backup()} open={open} onClose={onClose}>
-            <Box sx={{ padding: '0 24px 24px' }}>
-                <BackupInfoCard info={info} />
-                <Typography sx={{ fontSize: '13px', padding: '24px 0' }}>
-                    {t.settings_dialogs_backup_action_desc()}
-                </Typography>
-
-                <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
-                    <Button sx={{ width: '184px' }} onClick={() => onSelect('merge')}>
-                        {t.settings_dialogs_merge_to_local()}
-                    </Button>
-                    <Button sx={{ width: '184px' }} onClick={() => onSelect('upload')}>
-                        {t.settings_dialogs_upload_local_data()}
-                    </Button>
-                </Box>
-            </Box>
-        </MaskDialog>
-    )
-}