Switching Login Pages

Answered

WhyFencePost (Ping Reply) posted this in #help-forum

2024-06-12T16:52:15.860Z

I am making a login from, and it has a component for page one, and a component for page 2, and a component for a loading page. I have a div button in both page components, and i need to know how to connect that button to some way to handle the processing of stuff, so that I can have it take input, validate the input, and then either bring up a popup about missing feilds or go to loading, then when in loading send a request and wait for it, and then switch to page 2 and repete with that input. I have no idea how in nextjs.

Answered by Coffee Coke

https://react.dev/learn/responding-to-events

https://react.dev/reference/react-dom/components/form

idk about video tutorials, you can search them in YT

View full answer

44 Replies

@WhyFencePost (Ping Reply) I am making a login from, and it has a component for page one, and a component for page 2, and a component for a loading page. I have a div button in both page components, and i need to know how to connect that button to some way to handle the processing of stuff, so that I can have it take input, validate the input, and then either bring up a popup about missing feilds or go to loading, then when in loading send a request and wait for it, and then switch to page 2 and repete with that input. I have no idea how in nextjs.

Coffee Coke

2024-06-12T16:56:16.190Z

when the fields update store their values using useState, add callback prop to your button component (I would rather using forms tho) and when button is clicked handle all that stuff

WhyFencePost (Ping Reply)OP

2024-06-12T16:57:55.927Z

k, thanks

Ill prolly do a form

@Coffee Coke when the fields update store their values using useState, add callback prop to your button component (I would rather using forms tho) and when button is clicked handle all that stuff

WhyFencePost (Ping Reply)OP

2024-06-12T17:01:34.857Z

is there a way to use a div onclick as a submit in a form?

@WhyFencePost (Ping Reply) is there a way to use a div onclick as a submit in a form?

Coffee Coke

2024-06-12T17:02:53.467Z

no, you will need a button to add onSumbit prop to trigger the form submition

WhyFencePost (Ping Reply)OP

2024-06-12T17:03:20.143Z

k, ill look up a react forms tutorial, as this is all new to me LOL

and i think im doing it wrong

Coffee Coke

2024-06-12T17:04:10.054Z

good luck

WhyFencePost (Ping Reply)OP

2024-06-12T17:06:41.820Z

any good tutorials for me to watch?

im making a multi page signin, similar to google

its just a normal from component right???

@WhyFencePost (Ping Reply) any good tutorials for me to watch?

Coffee Coke

2024-06-12T17:13:22.007Z

https://react.dev/learn/responding-to-events

https://react.dev/reference/react-dom/components/form

idk about video tutorials, you can search them in YT

Answer

@Coffee Coke https://react.dev/learn/responding-to-events https://react.dev/reference/react-dom/components/form idk about video tutorials, you can search them in YT

WhyFencePost (Ping Reply)OP

2024-06-12T18:01:32.990Z

k, that kinda worked, i cant get the action to work, as i need the action function to be on the main login form, but the action is called in the child, and it fails

function Login() {
  let showStage1, showStage2, showLoading;
  let loginStage = 1;

  switch (loginStage) {
    case 0:
      showLoading = true
    case 1:
      showStage1 = true
    case 2:
      showStage2 = true;
  }

  function email(formData:any) {
    const user = formData.get("userString");
    if (user) {
      loginStage = 0;
      //validate
      //Wait as debug
      loginStage = 2;
    }    
  }

  function pw(formData:any) {
    const pw = formData.get("pwString");
    if (pw) {
      loginStage = 0;
      //validate
      //Wait as debug
      loginStage = 0;
    }
  }

  return (
    <>
      {showLoading && <LoadingPage />}
      {showStage1 && <LoginPage1 />}
      {showStage2 && <LoginPage2 />}
    </>
  );
}

@WhyFencePost (Ping Reply) tsx function Login() { let showStage1, showStage2, showLoading; let loginStage = 1; switch (loginStage) { case 0: showLoading = true case 1: showStage1 = true case 2: showStage2 = true; } function email(formData:any) { const user = formData.get("userString"); if (user) { loginStage = 0; //validate //Wait as debug loginStage = 2; } } function pw(formData:any) { const pw = formData.get("pwString"); if (pw) { loginStage = 0; //validate //Wait as debug loginStage = 0; } } return ( <> {showLoading && <LoadingPage />} {showStage1 && <LoginPage1 />} {showStage2 && <LoginPage2 />} </> ); }

Coffee Coke

2024-06-12T18:02:26.227Z

use useState hook

WhyFencePost (Ping Reply)OP

2024-06-12T18:02:30.181Z

and email and pw are called as:

function LoginPage1() {
  return (
    <>
      <div className="w-full h-full flex justify-center items-center md:hidden">
        <form className="w-56" action={email}>
          <div className="w-56 h-24"></div>
          <FormHeader subheader="Your gateway to bookings">Jericho Account</FormHeader>
          <div className="w-56 h-32"></div>
          <MenuInput id="userString">Username or Email</MenuInput>
          <div className="w-56 h-6"></div>
          <MenuButton size="lg" variant="main" sub="true">Next</MenuButton>
          <div className="w-56 h-6"></div>
          <FormMinorText>Or</FormMinorText>
          <div className="w-56 h-2"></div>
          <MenuButton size="lg">I forgot my login</MenuButton>
        </form>
      </div>
    </>
  );
}

Coffee Coke

2024-06-12T18:02:42.836Z

use react hooks

WhyFencePost (Ping Reply)OP

2024-06-12T18:03:34.968Z

k, but idk how to set it up, i just looked into it, but i dont see what my flow of data would be here, im sry'

@WhyFencePost (Ping Reply) k, but idk how to set it up, i just looked into it, but i dont see what my flow of data would be here, im sry'

Coffee Coke

2024-06-12T18:12:32.437Z

start by learning and mastering basics before jumping into projects, read the react.dev documentation and watch a few tutorials if you want it

WhyFencePost (Ping Reply)OP

2024-06-12T18:12:34.209Z

i got smtn

sry

but also now i have a bug:

function setData(formData:any) {
    const userStringData = formData.get("userString");
    if (userStringData){
      setUserString(userStringData);
    }
    alert(userString);
  }

this works, but it alerts the previos value of userString, not the new one

so what do i do here?

ah i saw the pitfall, is there a solution?

as in forcing a rerender?

or smtn else

Coffee Coke

2024-06-12T18:15:33.931Z

const [userString, setUserString] = useState();

useEffect(() => {
setUserString("my string");
alert(userString);
}, [])

WhyFencePost (Ping Reply)OP

2024-06-12T18:16:01.895Z

what is useEffect? ill go look it up

ah, makes sense, forces an update

Coffee Coke

2024-06-12T18:17:23.309Z

learn React before touching Next.js

WhyFencePost (Ping Reply)OP

2024-06-12T18:18:26.744Z

i am kinda, i like learning by doing, so thats why. Also i get that its frustrating for you

@Coffee Coke const [userString, setUserString] = useState(); useEffect(() => { setUserString("my string"); alert(userString); }, [])

WhyFencePost (Ping Reply)OP

2024-06-12T18:18:31.817Z

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

how do i fix that?

function LoginPage1() {
  const [userString, setUserString] = useState();

  function setData(formData:any) {
    const userStringData = formData.get("userString");
      if (userStringData){
      useEffect(() => {
        setUserString(userStringData); 
        alert(userString);
      }, []);
    }
  }

  return (
    <>
      <div className="w-full h-full flex justify-center items-center md:hidden">
        <form className="w-56" action={setData}>
          <div className="w-56 h-24"></div>
          <FormHeader subheader="Your gateway to bookings">Jericho Account</FormHeader>
          <div className="w-56 h-32"></div>
          <MenuInput id="userString">Username or Email</MenuInput>
          <div className="w-56 h-6"></div>
          <MenuButton size="lg" variant="main" sub="true">Next</MenuButton>
          <div className="w-56 h-6"></div>
          <FormMinorText>Or</FormMinorText>
          <div className="w-56 h-2"></div>
          <MenuButton size="lg">I forgot my login</MenuButton>
        </form>
      </div>
    </>
  );
}