My login page has 3 different roles for logging in: Admin, Student, and Company. Instead of redesigning the entire page, I just want to update the login component for each specific role.
Login Page
export default function Authpage(){
return(
<div className="authpagemain">
<div className="authsection">
<div className="logo">
<img src="https://res.cloudinary.com/dxi9wcchp/image/upload/v1661091025/quantum_olddxf.png" alt="" />
</div>
<div className="form-route">
<Studentlogin />
<span>
<Link
href="/">Admin</Link>
<Link href="/">Student</Link>
<Link href="/">Company</Link>
</span>
</div>
</div>
</div>
)
}
Student Login Component
export function Studentlogin(){
const [stemail, setStemail] = useState(String);
const [stpassword, setStpassword] = useState(String);
async function Login(e){
e.preventDefault();
const student = await pb.collection('users').authWithPassword(stemail, stpassword);
console.log(student)
}
return(
<form className="login-form">
<h3>Student Login</h3>
<input
className="login-email"
type="email"
placeholder="Enter Student Email"
onChange={(e)=> setStemail(e.target.value)}/>
<input
className="login-password"
type="password"
placeholder="Enter Student Password"
onChange={(e)=> setStpassword(e.target.value)}/>
<button
onClick={Login}
className="login-btn">Login</button>
</form>
)
}
I also have Admin and Company components. Is there a way to set up routing without having to modify the entire page layout?