🌟 disabled btn when stusLogin be invalid

Author: LuciLua

src/components/Form/Buttons/Buttons.module.scss

@@ -30,20 +30,19 @@
 
  outline: none;
 
- a {
-  color: var(--grayDarkPrimary90opacity);
-  text-decoration: none;
-  font-weight: 600;
-  font-family: Poppins;
-  width: 100%;
-  height: 100%;
- padding: 8px;
-
-  cursor: default;
-  user-select: none;
- pointer-events: none;
+ color: var(--grayDarkPrimary90opacity);
+ text-decoration: none;
+ font-weight: 600;
+ font-family: Poppins;
+ width: 100%;
+ height: 100%;
+ padding: 8px;
+
+ cursor: default;
+ user-select: none;
+ pointer-events: none;
+
 
- }
 
  &.active {
  background-color: var(--yellowPrimary);

src/components/Form/Buttons/Buttons.tsx

@@ -2,7 +2,7 @@ import Link from "next/link"
 import { useEffect, useRef, useState } from "react"
 import styles from "./Buttons.module.scss"
 
-function Buttons({ statusLogin }) {
+function Buttons({ statusLogin, typeForm, setTypeForm }) {
 
  const c_btn = useRef<any>(null)
 
@@ -11,22 +11,31 @@ function Buttons({ statusLogin }) {
 
  const [hrefLinkByStateLogin, setHrefLinkByStateLogin] = useState<string>('/')
 
+
  useEffect(() => {
  changeBtn()
  verifyLoginStateByPathname()
  })
 
+ console.log(typeForm)
 
  function verifyLoginStateByPathname() {
  const pathname = window.location.pathname
  if (pathname == '/signUp') {
  c_btn_span.current.innerText = 'Create now'
  c_btn_create_span.current.innerText = 'Login here'
  setHrefLinkByStateLogin('/')
+ setTypeForm('signUp')
  } else {
  c_btn_span.current.innerText = 'Login'
  c_btn_create_span.current.innerText = 'Create your account here'
  setHrefLinkByStateLogin('/signUp')
+ setTypeForm('/signIn')
+
+ if (statusLogin) {
+ } else {
+ c_btn.current.disable
+ }
  }
  }
 
@@ -40,11 +49,14 @@ function Buttons({ statusLogin }) {
 
  return (
  <div className={styles.c_buttons}>
- <button className={`${styles.c_btn}`} ref={c_btn}>
- <Link href={'/logged'}>
- <span ref={c_btn_span} />
- </Link>
+
+ <button
+ ref={c_btn}
+ className={`${styles.c_btn}`}
+ disabled={!statusLogin}>
+ <span ref={c_btn_span} />
  </button>
+
  <button className={styles.c_btn_create}>
  <span>
  <Link href={hrefLinkByStateLogin}>

src/components/Form/Form.tsx

@@ -11,12 +11,23 @@ function Form({ state }) {
  const [statusLogin, setStatusLogin] = useState<Boolean>(false)
  const [path, setPath] = useState<String>('/')
 
- function verifyIfCanSubmit(e){
- if(statusLogin){
- setPath('/logged')
- }
- else {
- setPath('/')
+ const [typeForm, setTypeForm] = useState<String>('/')
+
+ console.log(typeForm)
+
+ function verifyIfCanSubmit(e) {
+ // se dados estiverem ok
+ if (statusLogin) {
+ console.log('ok')
+ if (typeForm == 'signUp') {
+ // se o formulario for do tipo cadastro, va para o login
+ setPath('/')
+ } else {
+ // se o formulario for do tipo login, va para home
+ setPath('/logged')
+ }
+ } else {
+ console.log('Not yet')
  e.preventDefault()
  }
  }
@@ -29,7 +40,7 @@ function Form({ state }) {
  <SignIn setStatusLogin={setStatusLogin} />
  :
  <SignUp setStatusLogin={setStatusLogin} />}
- <Buttons statusLogin={statusLogin} />
+ <Buttons statusLogin={statusLogin} typeForm={typeForm} setTypeForm={setTypeForm} />
  <Footer />
  </form>
  )