-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add new designed FirstTimeSetPassword.tsx (#1694)
* feat: add lock gif * refactor: add new FirstTimeSetPassword design to Loading.tsx * feat: redesign FirstTimeSetPassword.tsx * feat: create DecisionButtons.tsx * feat: create MatchPasswordField.tsx * chore: add new components * refactor: update GradientButton.tsx * fix: remove unused prop * refactor: enhance PasswordInput.tsx * fix: wrong support Email address * fix: image color issue * fix: ci build issue
- Loading branch information
1 parent
f0a36a3
commit 3558cf3
Showing
13 changed files
with
246 additions
and
78 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
44 changes: 44 additions & 0 deletions
44
packages/extension-polkagate/src/components/DecisionButtons.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| // Copyright 2019-2025 @polkadot/extension-polkagate authors & contributors | ||
| // SPDX-License-Identifier: Apache-2.0 | ||
|
|
||
| /* eslint-disable react/jsx-max-props-per-line */ | ||
| import { ArrowForwardIosRounded as ArrowForwardIosRoundedIcon } from '@mui/icons-material'; | ||
| import { Container, useTheme } from '@mui/material'; | ||
| import React from 'react'; | ||
|
|
||
| import { GradientButton, NeonButton } from '.'; | ||
|
|
||
| interface Props { | ||
| arrow?: boolean; | ||
| onPrimaryClick: () => void; | ||
| onSecondaryClick: () => void; | ||
| primaryBtnText: string; | ||
| secondaryBtnText: string; | ||
| disabled?: boolean; | ||
| } | ||
|
|
||
| function DecisionButtons ({ arrow = false, disabled, onPrimaryClick, onSecondaryClick, primaryBtnText, secondaryBtnText }: Props): React.ReactElement { | ||
| const theme = useTheme(); | ||
|
|
||
| return ( | ||
| <Container disableGutters sx={{ alignItems: 'center', columnGap: '5px', display: 'flex', justifyContent: 'space-between' }}> | ||
| <NeonButton | ||
| contentPlacement='center' | ||
| onClick={onSecondaryClick} | ||
| style={{ height: '44px', width: '30%' }} | ||
| text={secondaryBtnText} | ||
| /> | ||
| <GradientButton | ||
| disabled={disabled} | ||
| endIconNode={arrow | ||
| ? <ArrowForwardIosRoundedIcon sx={{ color: 'text.primary', fontSize: '13px', stroke: `${theme.palette.text.primary}`, strokeWidth: 1.1, zIndex: 10 }} /> | ||
| : undefined} | ||
| onClick={onPrimaryClick} | ||
| style={{ height: '48px', width: '70%' }} | ||
| text={primaryBtnText} | ||
| /> | ||
| </Container> | ||
| ); | ||
| } | ||
|
|
||
| export default DecisionButtons; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
116 changes: 116 additions & 0 deletions
116
packages/extension-polkagate/src/components/MatchPasswordField.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,116 @@ | ||
| // Copyright 2019-2025 @polkadot/extension-polkagate authors & contributors | ||
| // SPDX-License-Identifier: Apache-2.0 | ||
|
|
||
| /* eslint-disable react/jsx-max-props-per-line */ | ||
|
|
||
| import { Container } from '@mui/material'; | ||
| import React, { useCallback, useEffect, useMemo, useState } from 'react'; | ||
|
|
||
| import { blake2AsHex } from '@polkadot/util-crypto'; | ||
|
|
||
| import { useTranslation } from '../hooks'; | ||
| import { PasswordInput } from '.'; | ||
|
|
||
| interface Props { | ||
| onSetPassword?: () => Promise<void>; | ||
| statusSetter?: React.Dispatch<React.SetStateAction<PASSWORD_STATUS | undefined>>; | ||
| hashPassword?: boolean; | ||
| setConfirmedPassword: React.Dispatch<React.SetStateAction<string | undefined>>; | ||
| style?: React.CSSProperties; | ||
| focused?: boolean; | ||
| } | ||
|
|
||
| export enum PASSWORD_STATUS { | ||
| EMPTY_PASS, | ||
| EMPTY_REPEATED, | ||
| NOT_MATCHED, | ||
| WEEK_PASS, | ||
| MATCHED | ||
| } | ||
|
|
||
| const MIN_LENGTH = 6; | ||
|
|
||
| function MatchPasswordField ({ focused = false, hashPassword = false, onSetPassword, setConfirmedPassword, statusSetter, style }: Props): React.ReactElement { | ||
| const { t } = useTranslation(); | ||
|
|
||
| const [password, setPassword] = useState<string>(); | ||
| const [repeatPassword, setRepeatPassword] = useState<string>(); | ||
|
|
||
| const passwordStatus = useMemo(() => { | ||
| if (!password) { | ||
| return PASSWORD_STATUS.EMPTY_PASS; | ||
| } | ||
|
|
||
| if (password.length < MIN_LENGTH) { | ||
| return PASSWORD_STATUS.WEEK_PASS; | ||
| } | ||
|
|
||
| if (!repeatPassword) { | ||
| return PASSWORD_STATUS.EMPTY_REPEATED; | ||
| } | ||
|
|
||
| if (password === repeatPassword) { | ||
| return PASSWORD_STATUS.MATCHED; | ||
| } | ||
|
|
||
| return PASSWORD_STATUS.NOT_MATCHED; | ||
| }, [password, repeatPassword]); | ||
|
|
||
| useEffect(() => { | ||
| statusSetter?.(passwordStatus); | ||
|
|
||
| if (passwordStatus === PASSWORD_STATUS.MATCHED && password) { | ||
| const finalPassword = hashPassword | ||
| ? blake2AsHex(password, 256) // Hash the string with a 256-bit output | ||
| : password; | ||
|
|
||
| setConfirmedPassword(finalPassword); | ||
| } else { | ||
| setConfirmedPassword(undefined); | ||
| } | ||
| }, [hashPassword, password, passwordStatus, setConfirmedPassword, statusSetter]); | ||
|
|
||
| const handlePasswordChange = useCallback((pass: string | null): void => { | ||
| if (!pass) { | ||
| return setPassword(undefined); | ||
| } | ||
|
|
||
| setPassword(pass); | ||
| }, []); | ||
|
|
||
| const handleRepeatPasswordChange = useCallback((pass: string | null): void => { | ||
| if (!pass) { | ||
| return setRepeatPassword(undefined); | ||
| } | ||
|
|
||
| setRepeatPassword(pass); | ||
| }, []); | ||
|
|
||
| const handleConfirm = useCallback(() => { | ||
| if (passwordStatus === PASSWORD_STATUS.MATCHED && onSetPassword) { | ||
| try { | ||
| onSetPassword().catch(console.error); | ||
| } catch (error) { | ||
| console.error('Error setting password:', error); | ||
| } | ||
| } | ||
| }, [onSetPassword, passwordStatus]); | ||
|
|
||
| return ( | ||
| <Container disableGutters sx={style}> | ||
| <PasswordInput | ||
| focused={focused} | ||
| onPassChange={handlePasswordChange} | ||
| style={{ marginBottom: '18px' }} | ||
| title={t('Password')} | ||
| /> | ||
| <PasswordInput | ||
| onEnterPress={handleConfirm} | ||
| onPassChange={handleRepeatPasswordChange} | ||
| title={t('Repeat the password')} | ||
| /> | ||
| </Container> | ||
| ); | ||
| } | ||
|
|
||
| export default MatchPasswordField; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.