crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-22 04:14:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

✨ feat: open modal login/ registe in page account (without login)

Browse Source 
:%s
This commit is contained in:
lytrankieio123 2021-09-14 17:21:49 +07:00
parent 9987eda297
commit af93b0ab06
3 changed files with 28 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/common/ModalAuthenticate/ModalAuthenticate.tsx
View File

@ -1,5 +1,5 @@
import classNames from 'classnames'
import React, { useState } from 'react'
import React, { useEffect, useState } from 'react'
import ModalCommon from '../ModalCommon/ModalCommon'
import FormLogin from './components/FormLogin/FormLogin'
import FormRegister from './components/FormRegister/FormRegister'
@ -8,11 +8,20 @@ import s from './ModalAuthenticate.module.scss'
interface Props {
visible: boolean,
closeModal: () => void,
mode?: '' | 'register'
}
const ModalAuthenticate = ({ visible, closeModal }: Props) => {
const ModalAuthenticate = ({ visible, mode, closeModal }: Props) => {
const [isLogin, setIsLogin] = useState<boolean>(true)
useEffect(() => {
if (mode === 'register') {
setIsLogin(false)
} else {
setIsLogin(true)
}
}, [mode])
const onSwitch = () => {
setIsLogin(!isLogin)
}

10
src/components/modules/account/AccountSignIn/AccountSignIn.module.scss
View File

@ -22,11 +22,13 @@
}
.dontHaveAccount{
@apply flex justify-center font-bold;
div{
color:var(--text-active);
}
span{
button {
all: unset;
color:var(--primary);
cursor: pointer;
&:focus-visible {
outline: 2px solid var(--text-active);
}
}
}

20
src/components/modules/account/AccountSignIn/AccountSignIn.tsx
View File

@ -1,10 +1,11 @@
import React,{memo} from "react"
import React,{memo, useState} from "react"
import { ButtonCommon, StaticImage } from "src/components/common";
import s from './AccountSignIn.module.scss';
import {LANGUAGE} from 'src/utils/language.utils';
import AccountSignInImg from '../../../../../public/assets/images/accountsignin.png'
import Link from 'next/link';
import { useRouter } from 'next/router';
import ModalAuthenticate from "src/components/common/ModalAuthenticate/ModalAuthenticate";
import { useModalCommon } from "src/components/hooks";
interface AccountSignIn {
@ -12,12 +13,12 @@ interface AccountSignIn {
const AccountSignIn = memo(({ } : AccountSignIn) => {
const router = useRouter();
const { visible: visibleModalAuthen, closeModal: closeModalAuthen, openModal: openModalAuthen } = useModalCommon({ initialValue: false })
const [isModeAuthenSignup, setIsModeAuthenSignup] = useState<boolean>(false)
function openLogin(){
router.push({
pathname: `${router.pathname}/query`,
search: '?openLogin=true'
});
const openModalSignup = () => {
setIsModeAuthenSignup(true)
openModalAuthen()
}
return (
@ -31,13 +32,14 @@ const AccountSignIn = memo(({ } : AccountSignIn) => {
Sign in to get more interesting <br/> features
</div>
<div className={s.btn}>
<ButtonCommon size="default" type = 'primary' onClick={openLogin}>{LANGUAGE.BUTTON_LABEL.SIGNIN}</ButtonCommon>
<ButtonCommon size="default" type = 'primary' onClick={openModalAuthen}>{LANGUAGE.BUTTON_LABEL.SIGNIN}</ButtonCommon>
</div>
<div className={s.dontHaveAccount}>
<div>Don't have an account? &nbsp;</div> <span><a><Link href="/"> Create Account</Link></a></span>
<div>Don't have an account? &nbsp;</div> <span><button onClick={openModalSignup}>Create Account</button></span>
</div>
</div>
</div>
<ModalAuthenticate visible={visibleModalAuthen} closeModal={closeModalAuthen} mode={isModeAuthenSignup ? 'register' : ''} />
</>
)
});