👯‍♀️ Account followup fixes (#4394)

* Fix scroll to error * Possibly fix StudioEntrypoint.tsx * Fix padding on CreateChannelModal.tsx * Unify hide password UI and logic
Joystream · Jul 5, 2023 · 585b1a8 · 585b1a8
1 parent 1e83f5e
commit 585b1a8
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 82 deletions.
diff --git a/packages/atlas/src/components/StudioEntrypoint/StudioEntrypoint.tsx b/packages/atlas/src/components/StudioEntrypoint/StudioEntrypoint.tsx
@@ -26,7 +26,7 @@ export const StudioEntrypoint: FC<StudioEntrypointProps> = ({ enterLocation }) =
     if (!activeMembership?.channels.length) {
       return <Navigate to={absoluteRoutes.studio.signIn()} replace />
     }
-    return <Navigate to={enterLocation} replace />
+    return <Navigate to={enterLocation || DEFAULT_ROUTE} replace />
   }
 
   if (channelSet) {

diff --git a/packages/atlas/src/components/_auth/ForgotPasswordModal/steps/NewPasswordStep.tsx b/packages/atlas/src/components/_auth/ForgotPasswordModal/steps/NewPasswordStep.tsx
@@ -1,51 +1,37 @@
-import { useCallback, useState } from 'react'
 import { useFormContext } from 'react-hook-form'
 
-import { SvgActionHide, SvgActionShow } from '@/assets/icons'
 import { AuthenticationModalStepTemplate } from '@/components/_auth/AuthenticationModalStepTemplate'
 import {
   ForgotPasswordModalForm,
   ForgotPasswordStep,
 } from '@/components/_auth/ForgotPasswordModal/ForgotPasswordModal.types'
 import { FormField } from '@/components/_inputs/FormField'
-import { Input, InputProps } from '@/components/_inputs/Input'
+import { Input } from '@/components/_inputs/Input'
+import { useHidePasswordInInput } from '@/hooks/useHidePasswordInInput'
 
 import { PasswordCriterias } from '../../PasswordCriterias'
 import { GapContainer } from '../ForgotPasswordModal.styles'
 
 export const NewPasswordStep = () => {
   const { register, formState } = useFormContext<ForgotPasswordModalForm>()
-  const [isFieldVisible, setIsFieldVisible] = useState<Record<string, boolean>>({
-    password: false,
-    confirmPassword: false,
-  })
-
-  const getInputProps = useCallback(
-    (name: string): Partial<InputProps> => {
-      return {
-        ...register(name as keyof ForgotPasswordModalForm),
-        type: isFieldVisible[name] ? 'text' : 'password',
-        actionButton: {
-          children: isFieldVisible[name] ? 'Hide' : 'Show',
-          dontFocusOnClick: true,
-          icon: isFieldVisible[name] ? <SvgActionHide /> : <SvgActionShow />,
-          onClick: () => setIsFieldVisible((fields) => ({ ...fields, [name]: !fields[name] })),
-        },
-      }
-    },
-    [isFieldVisible, register]
-  )
+  const [hidePasswordProps] = useHidePasswordInInput()
+  const [hideConfirmPasswordProps] = useHidePasswordInInput()
 
   return (
     <AuthenticationModalStepTemplate hasNavigatedBack={false} title="Change password" subtitle="Set your new password.">
       <GapContainer>
         <FormField label="New password" error={formState.errors.NewPasswordStep?.password?.message}>
-          <Input placeholder="Password" {...getInputProps(`${ForgotPasswordStep.NewPasswordStep}.password`)} />
+          <Input
+            placeholder="Password"
+            {...register(`${ForgotPasswordStep.NewPasswordStep}.password`)}
+            {...hidePasswordProps}
+          />
         </FormField>
         <FormField label="Repeat password" error={formState.errors.NewPasswordStep?.confirmPassword?.message}>
           <Input
             placeholder="Confirm password"
-            {...getInputProps(`${ForgotPasswordStep.NewPasswordStep}.confirmPassword`)}
+            {...register(`${ForgotPasswordStep.NewPasswordStep}.confirmPassword`)}
+            {...hideConfirmPasswordProps}
           />
         </FormField>
         <PasswordCriterias path={`${ForgotPasswordStep.NewPasswordStep}.password`} />

diff --git a/packages/atlas/src/components/_auth/LogInModal/LogInModal.tsx b/packages/atlas/src/components/_auth/LogInModal/LogInModal.tsx
@@ -4,12 +4,12 @@ import { useForm } from 'react-hook-form'
 import { z } from 'zod'
 import shallow from 'zustand/shallow'
 
-import { SvgActionHide, SvgActionShow } from '@/assets/icons'
 import { Button } from '@/components/_buttons/Button'
 import { FormField } from '@/components/_inputs/FormField'
 import { Input } from '@/components/_inputs/Input'
 import { DialogModal } from '@/components/_overlays/DialogModal'
 import { atlasConfig } from '@/config'
+import { useHidePasswordInInput } from '@/hooks/useHidePasswordInInput'
 import { useAuth } from '@/providers/auth/auth.hooks'
 import { useAuthStore } from '@/providers/auth/auth.store'
 import { LogInErrors } from '@/providers/auth/auth.types'
@@ -22,9 +22,9 @@ import { AuthenticationModalStepTemplate } from '../AuthenticationModalStepTempl
 
 export const LogInModal = () => {
   const [isLoading, setIsLoading] = useState(false)
-  const [isPasswordShown, setPasswordShown] = useState(false)
   const { handleLogin, refetchCurrentUser } = useAuth()
   const { displaySnackbar } = useSnackbar()
+  const [hidePasswordProps] = useHidePasswordInInput()
 
   const setYppModalOpenName = useYppStore((state) => state.actions.setYppModalOpenName)
 
@@ -114,26 +114,26 @@ export const LogInModal = () => {
         >
           <Container>
             <FormField label="Email" error={errors.email?.message}>
-              <Input {...register('email')} placeholder="Email" />
+              <Input
+                {...register('email')}
+                placeholder="Email"
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                    handleSubmit()
+                  }
+                }}
+              />
             </FormField>
             <FormField label="Password" error={errors.password?.message}>
               <Input
                 {...register('password')}
                 placeholder="Password"
-                type={isPasswordShown ? 'text' : 'password'}
+                {...hidePasswordProps}
                 onKeyDown={(e) => {
                   if (e.key === 'Enter') {
                     handleSubmit()
                   }
                 }}
-                actionButton={{
-                  tooltipText: isPasswordShown ? 'Hide' : 'Show',
-                  dontFocusOnClick: true,
-                  icon: isPasswordShown ? <SvgActionHide /> : <SvgActionShow />,
-                  onClick: () => {
-                    setPasswordShown((prev) => !prev)
-                  },
-                }}
               />
             </FormField>
             <ForgotPasswordButton onClick={() => setAuthModalOpenName('forgotPassword')}>

diff --git a/...rc/components/_auth/SignUpModal/SignUpSteps/SignUpMembershipStep/SignUpMembershipStep.tsx b/...rc/components/_auth/SignUpModal/SignUpSteps/SignUpMembershipStep/SignUpMembershipStep.tsx
@@ -44,8 +44,8 @@ export const SignUpMembershipStep: FC<SignInModalMembershipStepProps> = ({
       handle,
     },
   })
-
   const handleInputRef = useRef<HTMLInputElement | null>(null)
+  const captchaInputRef = useRef<HTMLDivElement | null>(null)
   const avatarDialogRef = useRef<ImageCropModalImperativeHandle>(null)
 
   const [isHandleValidating, setIsHandleValidating] = useState(false)
@@ -101,7 +101,11 @@ export const SignUpMembershipStep: FC<SignInModalMembershipStepProps> = ({
     if (errors.handle) {
       handleInputRef.current?.scrollIntoView({ behavior: 'smooth' })
     }
-  }, [errors.handle])
+
+    if (errors.captchaToken) {
+      captchaInputRef.current?.scrollIntoView({ behavior: 'smooth' })
+    }
+  }, [errors.captchaToken, errors.handle])
 
   return (
     <AuthenticationModalStepTemplate
@@ -184,7 +188,7 @@ export const SignUpMembershipStep: FC<SignInModalMembershipStepProps> = ({
               control={control}
               name="captchaToken"
               render={({ field: { onChange }, fieldState: { error } }) => (
-                <FormField error={error?.message}>
+                <FormField error={error?.message} ref={captchaInputRef}>
                   <HCaptcha
                     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                     sitekey={atlasConfig.features.members.hcaptchaSiteKey!}

diff --git a/...as/src/components/_auth/SignUpModal/SignUpSteps/SignUpPasswordStep/SignUpPasswordStep.tsx b/...as/src/components/_auth/SignUpModal/SignUpSteps/SignUpPasswordStep/SignUpPasswordStep.tsx
@@ -1,13 +1,13 @@
 import { zodResolver } from '@hookform/resolvers/zod'
-import { FC, RefObject, useCallback, useEffect, useRef, useState } from 'react'
+import { FC, RefObject, useCallback, useEffect, useRef } from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
 
-import { SvgActionHide, SvgActionShow } from '@/assets/icons'
 import { AuthenticationModalStepTemplate } from '@/components/_auth/AuthenticationModalStepTemplate'
 import { PasswordCriterias } from '@/components/_auth/PasswordCriterias'
 import { FormField } from '@/components/_inputs/FormField'
-import { Input, InputProps } from '@/components/_inputs/Input'
+import { Input } from '@/components/_inputs/Input'
 import { AccountFormData } from '@/hooks/useCreateMember'
+import { useHidePasswordInInput } from '@/hooks/useHidePasswordInInput'
 import { passwordAndRepeatPasswordSchema } from '@/utils/formValidationOptions'
 
 import { StyledSignUpForm } from '../SignUpSteps.styles'
@@ -17,7 +17,6 @@ type PasswordStepForm = {
   password: string
   confirmPassword: string
 }
-type PasswordInputNames = keyof PasswordStepForm
 
 type SignUpPasswordStepProps = {
   onPasswordSubmit: (password: string) => void
@@ -46,10 +45,8 @@ export const SignUpPasswordStep: FC<SignUpPasswordStepProps> = ({
     register,
     formState: { errors },
   } = form
-  const [isFieldVisible, setIsFieldVisible] = useState<Record<PasswordInputNames, boolean>>({
-    password: false,
-    confirmPassword: false,
-  })
+  const [hidePasswordProps] = useHidePasswordInInput()
+  const [hideConfirmPasswordProps] = useHidePasswordInInput()
 
   const handleGoToNextStep = useCallback(() => {
     handleSubmit((data) => {
@@ -67,26 +64,6 @@ export const SignUpPasswordStep: FC<SignUpPasswordStepProps> = ({
   // used to scroll the form to the bottom upon first handle field focus - this is done to let the user see password requirements
   const hasDoneInitialScroll = useRef(false)
 
-  const handleTogglePassword = (name: PasswordInputNames) => {
-    setIsFieldVisible((fields) => ({ ...fields, [name]: !fields[name] }))
-  }
-
-  const getInputProps = useCallback(
-    (name: PasswordInputNames): InputProps => {
-      return {
-        ...register(name),
-        type: isFieldVisible[name] ? 'text' : 'password',
-        actionButton: {
-          children: isFieldVisible[name] ? 'Hide' : 'Show',
-          dontFocusOnClick: true,
-          icon: isFieldVisible[name] ? <SvgActionHide /> : <SvgActionShow />,
-          onClick: () => handleTogglePassword(name),
-        },
-      }
-    },
-    [isFieldVisible, register]
-  )
-
   return (
     <FormProvider {...form}>
       <AuthenticationModalStepTemplate
@@ -98,7 +75,8 @@ export const SignUpPasswordStep: FC<SignUpPasswordStepProps> = ({
           <FormField label="Password" error={errors.password?.message}>
             <Input
               placeholder="Password"
-              {...getInputProps('password')}
+              {...register('password')}
+              {...hidePasswordProps}
               autoComplete="off"
               onClick={() => {
                 if (hasDoneInitialScroll.current || !dialogContentRef?.current) return
@@ -108,7 +86,12 @@ export const SignUpPasswordStep: FC<SignUpPasswordStepProps> = ({
             />
           </FormField>
           <FormField label="Repeat Password" error={errors.confirmPassword?.message}>
-            <Input placeholder="Repeat password" {...getInputProps('confirmPassword')} autoComplete="off" />
+            <Input
+              placeholder="Repeat password"
+              {...register('confirmPassword')}
+              {...hideConfirmPasswordProps}
+              autoComplete="off"
+            />
           </FormField>
           <PasswordCriterias />
         </StyledSignUpForm>

diff --git a/packages/atlas/src/components/_channel/CreateChannelModal/CreateChannelModal.tsx b/packages/atlas/src/components/_channel/CreateChannelModal/CreateChannelModal.tsx
@@ -130,5 +130,5 @@ const StyledAvatar = styled(Avatar)`
   top: 0;
 `
 const PaddingBox = styled.div`
-  padding: ${sizes(6)} ${sizes(6)} 0 ${sizes(6)};
+  padding: ${sizes(6)};
 `
diff --git a/packages/atlas/src/hooks/useHidePasswordInInput.tsx b/packages/atlas/src/hooks/useHidePasswordInInput.tsx
@@ -10,7 +10,6 @@ export const useHidePasswordInInput = (): [InputProps, () => void] => {
     {
       type: isPasswordVisible ? 'text' : 'password',
       actionButton: {
-        children: isPasswordVisible ? 'Hide' : 'Show',
         icon: isPasswordVisible ? <SvgActionHide /> : <SvgActionShow />,
         onClick: () => setIsPasswordVisible((isPasswordVisible) => !isPasswordVisible),
       },

diff --git a/packages/atlas/src/views/viewer/MembershipSettingsView/ChangePasswordDialog.tsx b/packages/atlas/src/views/viewer/MembershipSettingsView/ChangePasswordDialog.tsx
@@ -68,24 +68,24 @@ export const ChangePasswordDialog: FC<ChangePasswordDialogProps> = ({ onClose, s
     resolver: zodResolver(passwordAndRepeatPasswordSchema),
   })
 
-  const [hideOldPasswordProps, resethideOldPassword] = useHidePasswordInInput()
-  const [hidePasswordProps, resethidePassword] = useHidePasswordInInput()
-  const [hideConfirmPasswordProps, resethideConfirmPassword] = useHidePasswordInInput()
+  const [hideOldPasswordProps, resetHideOldPassword] = useHidePasswordInInput()
+  const [hidePasswordProps, resetHidePassword] = useHidePasswordInInput()
+  const [hideConfirmPasswordProps, resetHideConfirmPassword] = useHidePasswordInInput()
 
   const handleClose = useCallback(() => {
     verifyPasswordForm.reset({ oldPassword: '' })
     changePasswordForm.reset({ password: '', confirmPassword: '' })
-    resethideOldPassword()
-    resethidePassword()
-    resethideConfirmPassword()
+    resetHideOldPassword()
+    resetHidePassword()
+    resetHideConfirmPassword()
     setMnemonic(null)
     onClose()
   }, [
     changePasswordForm,
     onClose,
-    resethideConfirmPassword,
-    resethideOldPassword,
-    resethidePassword,
+    resetHideConfirmPassword,
+    resetHideOldPassword,
+    resetHidePassword,
     verifyPasswordForm,
   ])