feat: double confirm ID downloaded or printed (DimensionDev#5733)

dmrazzy · Feb 25, 2022 · c606ccc · c606ccc
1 parent 852ed3d
commit c606ccc
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/packages/dashboard/src/locales/en-US.json b/packages/dashboard/src/locales/en-US.json
@@ -46,8 +46,7 @@
     "create_account_identity_title": "Create an Identity for Mask Network",
     "create_account_sign_in_button": "Recovery",
     "create_account_persona_exists": "Persona already exists.",
-    "create_account_identity_warning": "Download your idendity ID to backup safely.",
-    "create_account_mnemonic_download_or_print": "I’ve downloaded it or printed it ",
+    "create_account_mnemonic_download_or_print": "I've kept my identity code safely.",
     "create_account_preview_tip": "This QR saves your identity code, please keep it safely. You can use Mask APP to scan QR to login persona.",
     "create_account_mnemonic_confirm_failed": "Incorrect identity code",
     "create_account_connect_social_media_button": "Create",

diff --git a/packages/dashboard/src/pages/SignUp/steps/MnemonicRevealForm.tsx b/packages/dashboard/src/pages/SignUp/steps/MnemonicRevealForm.tsx
@@ -1,10 +1,9 @@
 import { memo, useEffect, useState } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
-import { Button, Stack, Box, IconButton } from '@mui/material'
+import { Button, Stack, Box, IconButton, FormControlLabel, Checkbox } from '@mui/material'
 import RefreshIcon from '@mui/icons-material/Refresh'
 import { MaskColorVar, useCustomSnackbar } from '@masknet/theme'
 import { DashboardRoutes, ECKeyIdentifier } from '@masknet/shared-base'
-import { MaskAlert } from '../../../components/MaskAlert'
 import { Header } from '../../../components/RegisterFrame/ColumnContentHeader'
 import {
     Body,
@@ -42,6 +41,7 @@ export const MnemonicRevealForm = memo(() => {
     })
     const [id, setId] = useState<ECKeyIdentifier | null>(null)
     const [privateKey, setPrivateKey] = useState('')
+    const [checked, setChecked] = useState(false)
 
     const create = async () => {
         try {
@@ -118,9 +118,19 @@ export const MnemonicRevealForm = memo(() => {
                             </Button>
                         </Stack>
                         <MnemonicReveal words={words} />
+                        <FormControlLabel
+                            control={<Checkbox checked={checked} onChange={(e) => setChecked(e.target.checked)} />}
+                            label={t.create_account_mnemonic_download_or_print()}
+                            sx={{ marginTop: '8px' }}
+                        />
                         <ButtonContainer>
-                            <Button size="large" variant="rounded" color="primary" onClick={onConfirm}>
-                                {t.create_account_mnemonic_download_or_print()}
+                            <Button
+                                size="large"
+                                variant="rounded"
+                                color="primary"
+                                onClick={onConfirm}
+                                disabled={!checked}>
+                                {t.next()}
                             </Button>
                             <IconButton onClick={() => onPreview('print')}>
                                 <PrintIcon
@@ -135,10 +145,6 @@ export const MnemonicRevealForm = memo(() => {
                             </IconButton>
                         </ButtonContainer>
                     </Box>
-
-                    <Box sx={{ pt: 4, pb: 2, width: '100%' }}>
-                        <MaskAlert description={t.create_account_identity_warning()} type="info" />
-                    </Box>
                 </Body>
             </ColumnContentLayout>
             <PreviewDialog