fix: [ADN-386] Fix Create Password

onbloc · Jan 30, 2024 · 0dffd2e · 0dffd2e
1 parent 7774f3c
commit 0dffd2e
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 54 deletions.
diff --git a/packages/adena-extension/src/assets/web/confirm-check.svg b/packages/adena-extension/src/assets/web/confirm-check.svg
diff --git 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<InputProps>`
   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
@@ -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
@@ -14,12 +14,15 @@ import { useAdenaContext } from '@hooks/use-context';
 export type UseCreatePasswordScreenReturn = {
   passwordState: {
     value: string;
+    confirm: boolean;
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    errorMessage: string;
     error: boolean;
     ref: React.RefObject<HTMLInputElement>;
   };
   confirmPasswordState: {
     value: string;
+    confirm: boolean;
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => 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
@@ -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 (
-    <WebMain>
+    <WebMain style={{ width: 552 }}>
       <WebMainHeader
         stepLength={params.stepLength}
         currentStep={params.stepLength - 1}
         onClickGoBack={goBack}
       />
 
-      <StyledMessageBox>
-        <WebText type='headline3'>Create a password</WebText>
-        <WebText type='body4' color={theme.webNeutral._500}>
-          This will be used to unlock your wallet.
-        </WebText>
-      </StyledMessageBox>
-
-      <StyledInputBox>
-        <WebInput
-          type='password'
-          name='password'
-          placeholder='Password'
-          onChange={passwordState.onChange}
-          onKeyDown={onKeyDown}
-          error={passwordState.error}
-          ref={passwordState.ref}
-        />
-        <WebInput
-          type='password'
-          name='confirmPassword'
-          placeholder='Confirm Password'
-          onChange={confirmPasswordState.onChange}
-          onKeyDown={onKeyDown}
-          error={confirmPasswordState.error}
+      <StyledContainer>
+        <StyledMessageBox>
+          <WebText type='headline3'>Create a password</WebText>
+          <WebText type='body4' color={theme.webNeutral._500}>
+            This will be used to unlock your wallet.
+          </WebText>
+        </StyledMessageBox>
+
+        <StyledInputContainer>
+          <StyledInputBox>
+            <StyledInputWrapper>
+              <WebInput
+                type='password'
+                name='password'
+                placeholder='Password'
+                style={{ width: 384 }}
+                onChange={passwordState.onChange}
+                onKeyDown={onKeyDown}
+                error={passwordState.error}
+                ref={passwordState.ref}
+              />
+              {passwordState.confirm && (<WebImg src={IconConfirm} size={20} />)}
+            </StyledInputWrapper>
+            {passwordState.errorMessage && <WebErrorText text={passwordState.errorMessage} />}
+          </StyledInputBox>
+
+          <StyledInputBox>
+            <StyledInputWrapper>
+              <WebInput
+                type='password'
+                name='confirmPassword'
+                placeholder='Confirm Password'
+                style={{ width: 384 }}
+                onChange={confirmPasswordState.onChange}
+                onKeyDown={onKeyDown}
+                error={confirmPasswordState.error}
+              />
+              {confirmPasswordState.confirm && (<WebImg src={IconConfirm} size={20} />)}
+            </StyledInputWrapper>
+            {errorMessage && <WebErrorText text={errorMessage} />}
+          </StyledInputBox>
+        </StyledInputContainer>
+
+        <TermsCheckbox
+          checked={termsState.value}
+          onChange={termsState.onChange}
+          text='I agree to the&nbsp;'
+          tabIndex={3}
+        >
+          <Pressable onClick={moveAdenaTermsPage} tabIndex={4}>
+            Terms of Use.
+          </Pressable>
+        </TermsCheckbox>
+
+        <WebButton
+          figure='primary'
+          size='small'
+          disabled={buttonState.disabled}
+          onClick={buttonState.onClick}
+          tabIndex={5}
+          text='Save'
+          rightIcon='chevronRight'
         />
-        {errorMessage && <ErrorText text={errorMessage} />}
-      </StyledInputBox>
-
-      <TermsCheckbox
-        checked={termsState.value}
-        onChange={termsState.onChange}
-        text='I agree to the&nbsp;'
-        tabIndex={3}
-      >
-        <Pressable onClick={moveAdenaTermsPage} tabIndex={4}>
-          Terms of Use.
-        </Pressable>
-      </TermsCheckbox>
-
-      <WebButton
-        figure='primary'
-        size='small'
-        disabled={buttonState.disabled}
-        onClick={buttonState.onClick}
-        tabIndex={5}
-        text='Save'
-        rightIcon='chevronRight'
-      />
+      </StyledContainer>
     </WebMain>
   );
 };