From 0dffd2e82b6eea10e6ffdf21924a79026c453617 Mon Sep 17 00:00:00 2001 From: jinoosss Date: Tue, 30 Jan 2024 15:30:24 +0900 Subject: [PATCH] fix: [ADN-386] Fix Create Password --- .../src/assets/web/confirm-check.svg | 6 + .../src/components/atoms/web-input/index.tsx | 3 +- .../molecules/terms-checkbox/index.tsx | 3 +- .../web/common/use-create-password-screen.ts | 17 ++- .../web/create-password-screen/index.tsx | 139 +++++++++++------- 5 files changed, 114 insertions(+), 54 deletions(-) create mode 100644 packages/adena-extension/src/assets/web/confirm-check.svg diff --git a/packages/adena-extension/src/assets/web/confirm-check.svg b/packages/adena-extension/src/assets/web/confirm-check.svg new file mode 100644 index 00000000..da9b1a9f --- /dev/null +++ b/packages/adena-extension/src/assets/web/confirm-check.svg @@ -0,0 +1,6 @@ + + + diff --git a/packages/adena-extension/src/components/atoms/web-input/index.tsx b/packages/adena-extension/src/components/atoms/web-input/index.tsx index acc852bb..0a92fd4c 100644 --- a/packages/adena-extension/src/components/atoms/web-input/index.tsx +++ b/packages/adena-extension/src/components/atoms/web-input/index.tsx @@ -15,12 +15,13 @@ export const WebInput = styled.input` border: 1px solid; padding: 12px 16px; border-color: ${({ error, theme }): string => (error ? theme.webError._200 : theme.webNeutral._800)}; - background-color: ${({ error, theme }): string => (error ? theme.webError._300 : 'transparent')}; + background-color: ${({ error, theme }): string => (error ? theme.webError._300 : theme.webNeutral._900)}; ::placeholder { color: ${getTheme('webNeutral', '_700')}; } :focus { + background-color: ${({ error, theme }): string => (error ? theme.webError._300 : theme.webInput._100)}; box-shadow: 0px 0px 0px 3px rgba(255, 255, 255, 0.04), 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06); } diff --git a/packages/adena-extension/src/components/molecules/terms-checkbox/index.tsx b/packages/adena-extension/src/components/molecules/terms-checkbox/index.tsx index 39d33fd4..905f470a 100644 --- a/packages/adena-extension/src/components/molecules/terms-checkbox/index.tsx +++ b/packages/adena-extension/src/components/molecules/terms-checkbox/index.tsx @@ -29,7 +29,7 @@ const Wrapper = styled.div<{ margin?: string }>` const Label = styled.label<{ checkboxPos: CheckboxPos }>` ${mixins.flex({ direction: 'row', justify: 'flex-start' })}; position: relative; - padding-left: 32px; + padding-left: 28px; cursor: pointer; &:before { ${({ checkboxPos }): CSSProp => @@ -54,6 +54,7 @@ const Label = styled.label<{ checkboxPos: CheckboxPos }>` `; const Input = styled.input` + display: none; &[type='checkbox'] { width: 0px; height: 0px; diff --git a/packages/adena-extension/src/hooks/web/common/use-create-password-screen.ts b/packages/adena-extension/src/hooks/web/common/use-create-password-screen.ts index 156e4621..4740783a 100644 --- a/packages/adena-extension/src/hooks/web/common/use-create-password-screen.ts +++ b/packages/adena-extension/src/hooks/web/common/use-create-password-screen.ts @@ -14,12 +14,15 @@ import { useAdenaContext } from '@hooks/use-context'; export type UseCreatePasswordScreenReturn = { passwordState: { value: string; + confirm: boolean; onChange: (e: React.ChangeEvent) => void; + errorMessage: string; error: boolean; ref: React.RefObject; }; confirmPasswordState: { value: string; + confirm: boolean; onChange: (e: React.ChangeEvent) => void; error: boolean; }; @@ -48,11 +51,19 @@ export const useCreatePasswordScreen = (): UseCreatePasswordScreenReturn => { const [isConfirmPasswordError, setIsConfirmPasswordError] = useState(false); const { password, confirmPassword } = inputs; const [errorMessage, setErrorMessage] = useState(''); + const [passwordErrorMessage, setPasswordErrorMessage] = useState(''); const disabledCreateButton = useMemo(() => { return !terms || !password || !confirmPassword; }, [terms, password, confirmPassword]); + const confirmPasswordLength = (password: string): boolean => { + if (password.length < 8 || password.length > 256) { + return false; + } + return true; + }; + const _validateConfirmPassword = (validationPassword?: boolean): boolean => { try { if (validateNotMatchConfirmPassword(password, confirmPassword)) return true; @@ -82,7 +93,7 @@ export const useCreatePasswordScreen = (): UseCreatePasswordScreenReturn => { console.log(error); setIsPasswordError(true); if (error instanceof PasswordValidationError) { - setErrorMessage(error.message); + setPasswordErrorMessage(error.message); } } return false; @@ -148,6 +159,7 @@ export const useCreatePasswordScreen = (): UseCreatePasswordScreenReturn => { setIsPasswordError(false); setIsConfirmPasswordError(false); setErrorMessage(''); + setPasswordErrorMessage(''); }, [password, confirmPassword]); useEffect(() => { @@ -159,12 +171,15 @@ export const useCreatePasswordScreen = (): UseCreatePasswordScreenReturn => { return { passwordState: { value: password, + confirm: confirmPasswordLength(password), onChange: onChangePassword, error: isPasswordError, + errorMessage: passwordErrorMessage, ref: inputRef, }, confirmPasswordState: { value: confirmPassword, + confirm: confirmPasswordLength(confirmPassword), onChange: onChangePassword, error: isConfirmPasswordError, }, diff --git a/packages/adena-extension/src/pages/web/create-password-screen/index.tsx b/packages/adena-extension/src/pages/web/create-password-screen/index.tsx index 33b1139c..363bac5d 100644 --- a/packages/adena-extension/src/pages/web/create-password-screen/index.tsx +++ b/packages/adena-extension/src/pages/web/create-password-screen/index.tsx @@ -3,12 +3,14 @@ import styled, { useTheme } from 'styled-components'; import { WebInput, - ErrorText, WebMain, View, WebText, Pressable, WebButton, + Row, + WebImg, + WebErrorText, } from '@components/atoms'; import { TermsCheckbox } from '@components/molecules'; import { WebMainHeader } from '@components/pages/web/main-header'; @@ -18,13 +20,32 @@ import useLink from '@hooks/use-link'; import useAppNavigate from '@hooks/use-app-navigate'; import { RoutePath } from '@types'; +import IconConfirm from '@assets/web/confirm-check.svg'; + +const StyledContainer = styled(View)` + height: 330px; + row-gap: 24px; + align-items: flex-start; +`; + const StyledMessageBox = styled(View)` + width: 100%; row-gap: 16px; `; -const StyledInputBox = styled(View)` +const StyledInputContainer = styled(View)` row-gap: 16px; - width: 384px; + width: 100%; +`; + +const StyledInputBox = styled(View)` + row-gap: 12px; + width: 100%; +`; + +const StyledInputWrapper = styled(Row)` + width: 416px; + gap: 12px; `; const CreatePasswordScreen = (): JSX.Element => { @@ -39,61 +60,77 @@ const CreatePasswordScreen = (): JSX.Element => { }, [openLink]); return ( - + - - Create a password - - This will be used to unlock your wallet. - - - - - - + + Create a password + + This will be used to unlock your wallet. + + + + + + + + {passwordState.confirm && ()} + + {passwordState.errorMessage && } + + + + + + {confirmPasswordState.confirm && ()} + + {errorMessage && } + + + + + + Terms of Use. + + + + - {errorMessage && } - - - - - Terms of Use. - - - - + ); };