From d228ea0e31c2ae193269bb28a70d755e8303f35b Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Fri, 27 Aug 2021 17:19:56 +0700
Subject: [PATCH] :art: styles: form authen

:%s
---
 .../ModalAuthenticate.module.scss             |  4 ++
 .../ModalAuthenticate/ModalAuthenticate.tsx   | 16 +++++--
 .../components/FormAuthen.module.scss         | 35 +++++++++++++++
 .../FormLogin/FormLogin.module.scss           | 45 +++++--------------
 .../components/FormLogin/FormLogin.tsx        | 16 ++++---
 .../FormRegister/FormRegister.module.scss     | 21 +++++++++
 .../components/FormRegister/FormRegister.tsx  | 41 +++++++++++++++++
 src/styles/_base.scss                         |  2 +-
 8 files changed, 135 insertions(+), 45 deletions(-)
 create mode 100644 src/components/common/ModalAuthenticate/components/FormAuthen.module.scss
 create mode 100644 src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.module.scss
 create mode 100644 src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx

diff --git a/src/components/common/ModalAuthenticate/ModalAuthenticate.module.scss b/src/components/common/ModalAuthenticate/ModalAuthenticate.module.scss
index e69de29bb..040e74bd2 100644
--- a/src/components/common/ModalAuthenticate/ModalAuthenticate.module.scss
+++ b/src/components/common/ModalAuthenticate/ModalAuthenticate.module.scss
@@ -0,0 +1,4 @@
+.formAuthenticate {
+    @apply grid grid-cols-2 overflow-hidden;
+    width: 200%;
+}
diff --git a/src/components/common/ModalAuthenticate/ModalAuthenticate.tsx b/src/components/common/ModalAuthenticate/ModalAuthenticate.tsx
index c5bd94939..1486b2adf 100644
--- a/src/components/common/ModalAuthenticate/ModalAuthenticate.tsx
+++ b/src/components/common/ModalAuthenticate/ModalAuthenticate.tsx
@@ -1,11 +1,19 @@
-import React from 'react'
+import React, { useState } from 'react'
 import FormLogin from './components/FormLogin/FormLogin'
+import FormRegister from './components/FormRegister/FormRegister'
 import s from './ModalAuthenticate.module.scss'
 
 const ModalAuthenticate = () => {
-    return(
-        <section >
-           <FormLogin/>
+    const [isLogin, setIsLogin] = useState<boolean>(true)
+
+    const onSwitch = () => {
+        setIsLogin(!isLogin)
+    }
+
+    return (
+        <section className={s.formAuthenticate}>
+            <FormLogin isHide={!isLogin} onSwitch={onSwitch} />
+            <FormRegister isHide={isLogin} onSwitch={onSwitch} />
         </section>
     )
 }
diff --git a/src/components/common/ModalAuthenticate/components/FormAuthen.module.scss b/src/components/common/ModalAuthenticate/components/FormAuthen.module.scss
new file mode 100644
index 000000000..6b5b01dc4
--- /dev/null
+++ b/src/components/common/ModalAuthenticate/components/FormAuthen.module.scss
@@ -0,0 +1,35 @@
+.formAuthen {
+    @apply transition-all duration-200 bg-white w-full;
+    .inner {
+        @screen md {
+            max-width: 52rem;
+            margin: auto;
+        }
+        .body {
+            > div {
+                &:not(:last-child) {
+                    margin-bottom: 1.6rem;
+                }
+            }
+        }
+        .others {
+            @apply font-bold text-center;
+            margin-top: 4rem;
+
+            span {
+                @apply text-active;
+                margin-right: 0.8rem;
+            }
+            button {
+                all: unset;
+                @apply text-primary cursor-pointer;
+                &:focus-visible {
+                    outline: 2px solid #000;
+                }
+                &:focus {
+                    outline: none;
+                }
+            }
+        }
+    }
+}
diff --git a/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.module.scss b/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.module.scss
index 9d5cf2f12..52415a6a3 100644
--- a/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.module.scss
+++ b/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.module.scss
@@ -1,38 +1,13 @@
-.login {
-    margin: auto;
-    @screen md {
-        max-width: 52rem;
-    }
-    .inner {
-        max-width: 100%;
-        overflow: hidden;
-        .body {
-            > div {
-                &:not(:last-child) {
-                    margin-bottom: 1.6rem;
-                }
-            }
-        }
-        .bottom {
-            @apply flex justify-between items-center;
-            margin: 4rem auto;
-            .forgotPassword {
-                @apply font-bold;
-                color: var(--primary);
-            }
-        }
-        .others {
-            @apply font-bold text-center;
-            margin-top: 4rem;
+.hide {
+    transform: translateX(-200%);
+}
 
-            span {
-                @apply text-active;
-                margin-right: 0.8rem;
-            }
-            button {
-                all: unset;
-                @apply text-primary;
-            }
-        }
+.bottom {
+    @apply flex justify-between items-center;
+    margin: 4rem auto;
+    .forgotPassword {
+        @apply font-bold;
+        color: var(--primary);
     }
 }
+
diff --git a/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx b/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx
index 889ad3ce0..cca8c75a1 100644
--- a/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx
+++ b/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx
@@ -3,23 +3,29 @@ import React from 'react'
 import { Inputcommon, ButtonCommon } from 'src/components/common'
 import { ROUTE } from 'src/utils/constanst.utils'
 import SocialAuthen from '../SocialAuthen/SocialAuthen'
-import s from './FormLogin.module.scss'
+import s from '../FormAuthen.module.scss'
+import styles from './FormLogin.module.scss'
+import classNames from 'classnames'
 
 interface Props {
+    isHide: boolean,
     onSwitch: () => void
 }
 
-const FormLogin = ({ onSwitch }: Props) => {
+const FormLogin = ({ onSwitch, isHide }: Props) => {
     return (
-        <section className={s.login}>
+        <section className={classNames({
+            [s.formAuthen]: true,
+            [styles.hide]: isHide
+        })}>
             <div className={s.inner}>
                 <div className={s.body}>
                     <Inputcommon placeholder='Email Address' type='email' />
                     <Inputcommon placeholder='Password' type='password' />
                 </div>
-                <div className={s.bottom}>
+                <div className={styles.bottom}>
                     <Link href={ROUTE.FORGOT_PASSWORD}>
-                        <a href="" className={s.forgotPassword}>
+                        <a href="" className={styles.forgotPassword}>
                             Forgot Password?
                         </a>
                     </Link>
diff --git a/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.module.scss b/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.module.scss
new file mode 100644
index 000000000..2201cc01c
--- /dev/null
+++ b/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.module.scss
@@ -0,0 +1,21 @@
+@import '../../../../../styles/utilities';
+
+.formRegister {
+    transform: translateX(-100%);
+    &.hide {
+        transform: none;
+    }
+    .passwordNote {
+        @apply text-center caption;
+        margin-top: 0.8rem;
+    }
+    
+    .bottom {
+        @apply flex justify-between items-center w-full;
+        margin: 4rem auto;
+        button {
+            @apply w-full;
+        }
+    }
+}
+
diff --git a/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx b/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx
new file mode 100644
index 000000000..608ffc0b6
--- /dev/null
+++ b/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx
@@ -0,0 +1,41 @@
+import React 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'
+
+interface Props {
+    isHide: boolean,
+    onSwitch: () => void
+}
+
+const FormRegister = ({ onSwitch, isHide }: Props) => {
+    return (
+        <section className={classNames({
+            [s.formAuthen]: true,
+            [styles.formRegister]: true,
+            [styles.hide]: isHide
+        })}>
+            <div className={s.inner}>
+                <div className={s.body}>
+                    <Inputcommon placeholder='Email Address' type='email' />
+                    <Inputcommon placeholder='Password' type='password' />
+                    <div className={styles.passwordNote}>
+                        Must contain 8 characters with at least 1 uppercase and 1 lowercase letter and either 1 number or 1 special character.
+                    </div>
+                </div>
+                <div className={styles.bottom}>
+                    <ButtonCommon size='large'>Create Account</ButtonCommon>
+                </div>
+                <SocialAuthen />
+                <div className={s.others}>
+                    <span>Already an account?</span>
+                    <button onClick={onSwitch}>Sign In</button>
+                </div>
+            </div>
+        </section>
+    )
+}
+
+export default FormRegister
\ No newline at end of file
diff --git a/src/styles/_base.scss b/src/styles/_base.scss
index 5d0cd8322..67eb96726 100644
--- a/src/styles/_base.scss
+++ b/src/styles/_base.scss
@@ -34,7 +34,7 @@
   --border-line: #ebebeb;
   --background: #fff;
   --gray: #f8f8f8;
-  --white: #fbfbfb;
+  --white: #fff;
   --background-arrow:rgba(20, 20, 20, 0.05);
   --font-size: 1.6rem;
   --line-height: 2.4rem;