User auth in ReactJS, problem with implemetion

Viewed 28

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();
       
        

    }```
1 Answers

How about modal? position: fixed, top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.1)'

Related