From a3170ee04dad64c7e7419bccb941eef0ae34af2c Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Fri, 27 Aug 2021 18:01:44 +0700
Subject: [PATCH] :sparkles: feat: auto focus input in form login/ register

:%s
---
 src/components/common/Header/Header.tsx             |  1 -
 .../components/FormLogin/FormLogin.tsx              | 13 +++++++++++--
 .../FormRegister/FormRegister.module.scss           |  3 +--
 .../components/FormRegister/FormRegister.tsx        | 11 ++++++++++-
 .../common/ModalCommon/ModalCommon.module.scss      |  8 ++++++--
 5 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx
index 7e6978d03..5cafab930 100644
--- a/src/components/common/Header/Header.tsx
+++ b/src/components/common/Header/Header.tsx
@@ -40,7 +40,6 @@ const Header = memo(() => {
                 </div>
             </header>
             <HeaderSubMenuMobile />
-            visible = {visibleModalAuthen.toString()}
             <ModalAuthenticate visible={visibleModalAuthen} closeModal={closeModalAuthen} />
         </>
     )
diff --git a/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx b/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx
index cca8c75a1..d09cd85d5 100644
--- a/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx
+++ b/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx
@@ -1,11 +1,12 @@
 import Link from 'next/link'
-import React from 'react'
+import React, { useRef, useEffect } from 'react'
 import { Inputcommon, ButtonCommon } from 'src/components/common'
 import { ROUTE } from 'src/utils/constanst.utils'
 import SocialAuthen from '../SocialAuthen/SocialAuthen'
 import s from '../FormAuthen.module.scss'
 import styles from './FormLogin.module.scss'
 import classNames from 'classnames'
+import { CustomInputCommon } from 'src/utils/type.utils'
 
 interface Props {
     isHide: boolean,
@@ -13,6 +14,14 @@ interface Props {
 }
 
 const FormLogin = ({ onSwitch, isHide }: Props) => {
+    const emailRef = useRef<CustomInputCommon>(null)
+
+    useEffect(() => {
+        if (!isHide) {
+            emailRef.current?.focus()
+        }
+    }, [isHide])
+
     return (
         <section className={classNames({
             [s.formAuthen]: true,
@@ -20,7 +29,7 @@ const FormLogin = ({ onSwitch, isHide }: Props) => {
         })}>
             <div className={s.inner}>
                 <div className={s.body}>
-                    <Inputcommon placeholder='Email Address' type='email' />
+                    <Inputcommon placeholder='Email Address' type='email' ref={emailRef} />
                     <Inputcommon placeholder='Password' type='password' />
                 </div>
                 <div className={styles.bottom}>
diff --git a/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.module.scss b/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.module.scss
index 2201cc01c..ed18090d6 100644
--- a/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.module.scss
+++ b/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.module.scss
@@ -6,10 +6,9 @@
         transform: none;
     }
     .passwordNote {
-        @apply text-center caption;
+    @apply text-center caption text-label;
         margin-top: 0.8rem;
     }
-    
     .bottom {
         @apply flex justify-between items-center w-full;
         margin: 4rem auto;
diff --git a/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx b/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx
index 608ffc0b6..8b66449b1 100644
--- a/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx
+++ b/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx
@@ -1,9 +1,10 @@
-import React from 'react'
+import React, { useEffect, useRef } from 'react'
 import { ButtonCommon, Inputcommon } from 'src/components/common'
 import s from '../FormAuthen.module.scss'
 import styles from './FormRegister.module.scss'
 import SocialAuthen from '../SocialAuthen/SocialAuthen'
 import classNames from 'classnames'
+import { CustomInputCommon } from 'src/utils/type.utils'
 
 interface Props {
     isHide: boolean,
@@ -11,6 +12,14 @@ interface Props {
 }
 
 const FormRegister = ({ onSwitch, isHide }: Props) => {
+    const emailRef = useRef<CustomInputCommon>(null)
+
+    useEffect(() => {
+        if (!isHide) {
+            emailRef.current?.focus()
+        }
+    }, [isHide])
+
     return (
         <section className={classNames({
             [s.formAuthen]: true,
diff --git a/src/components/common/ModalCommon/ModalCommon.module.scss b/src/components/common/ModalCommon/ModalCommon.module.scss
index de47d0293..d4967b04e 100644
--- a/src/components/common/ModalCommon/ModalCommon.module.scss
+++ b/src/components/common/ModalCommon/ModalCommon.module.scss
@@ -1,3 +1,5 @@
+@import '../../../styles/utilities';
+
 .background{
     @apply fixed inset-0 overflow-y-auto;
     background: rgba(20, 20, 20, 0.65);
@@ -10,10 +12,12 @@
             padding: 3.2rem;
             box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.24);
             border-radius: 1.2rem;
+            .top {
+                margin-bottom: 4rem;
+            }
             .title{
+                @apply font-heading heading-3;
                 padding: 0 0.8rem 0 0.8rem;
-                font-size: 3.2rem;
-                line-height: 4rem;
             }
             .close{
                 @apply absolute;