I wanna get pepole to log in directly into account from drawer, but i don't have idea how to implement server side to login from drawer which come out from outside of the page when user triggered button Sign in. Drawer is from library 'react-modern-drawer`. Right now i have code like that.
<Drawer
open={isOpen}
onClose={toggleDrawer}
direction='top'
overlayOpacity={'0.7'}
style={{textAlign:'center', width: '320px', backgroundColor: 'black', height: '100%', objectPosition: 'absolute', top:'0',right: '0',bottom: '0',left: '84%'}}
className="drawer1"
>
<form onSubmit={handleSubmit}>
<H3>log into system!</H3>
<Label htmlFor="username">username</Label>
<Input
type='text'
id='username'
ref={userRef}
autoComplete="off"
onChange={(e) => setUser(e.target.value)}
value={user}
required/>
<Label htmlFor="Password">Password</Label>
<Input
type='password'
id='password'
onChange={(e) => setPwd(e.target.value)}
value={pwd}
required/>
<Span>Forgot your password? Click <a href="/forgotpassword">here</a></Span>
<Button type="submit">Log in!</Button>
</form>
</Drawer>
I have function to handleSubmit. I don't have idea what to do in this code because every web tutorial have login page on another page like /login etc. In my case we are still on main page which is right now http://localhost:3000.
const handleSubmit = async (e) => {
e.preventDefault();
}```
How about modal? position: fixed, top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.1)'