I have the following code in signin.js and I am using Axios API to integrate it with the code so that it redirects to the dashboard. I have the following URL for API (https://9d6e-110-44-127-177.ngrok.io/auth/login/) and email that is verified is "[email protected]" and password is admin@123 but I don't know how to integrate with the code. The code for signin.jsx is as below: signin.jsx
import React, {useState} from 'react'
import styled from 'styled-components'
import StyledInput from './StyledInput'
import StyledButton from './StyledButton'
import { Link } from 'react-router-dom'
import './Signin.css'
import axios from 'axios'
const Container = styled.div`
display: flex;
flex-direction: column;
justify-content:center;
align-items: center;
height: 80vh;
width: 30vw;
background: #E8E8E8;
`;
const Welcome = styled.h2`
margin: 3rem 0 2rem 0;
box-sizing: border-box;
background-color: #00009c;
border: 2px solid #00009c;
border-radius: 2rem;
padding: 15px;
text-transform: uppercase;
color: white;
letter-spacing: 0.4rem;
`;
const Form = styled.form`
width: 100%;
height: 100vh;
justify-content: center;
align-items: flex-start;
`;
const Input = styled.div`
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
height:20%;
width: 100%;
` ;
const Button = styled.div`
margin: 1rem 0 2rem 0;
width: 90%;
display: flex;
align-items: center;
justify-content: center;
`;
const Paragraph = styled.p`
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
`;
const Check = styled.input`
font-size: 15px;
margin-left: -400px;
box-sizing: border-box;
`;
const Label = styled.label`
margin-top: -120px;
margin-left: -270px;
`;
const Signin = () => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const handleSubmit = (e) => {
e.preventDefault()
axios.post("https://9d6e-110-44-127-177.ngrok.io/auth/login/", {
email: "[email protected]",
password: "admin@123"
})
.await((response) => {
console.log(response)
})
.catch((err) => {
console.log(err)
alert(err.response.data.error.message)
})
}
const handleEmail = (e) => {
setEmail(e.target.value)
}
const handlePassword = (e) => {
setPassword(e.target.value)
}
return (
<Container>
<Welcome>
Welcome
</Welcome>
<Form onSubmit= {handleSubmit}>
<Input>
<StyledInput type="email"
placeholder="Email"
required
value={email}
onChange = {handleEmail}
/>
</Input>
<Input>
<StyledInput type="password"
placeholder="Password"
required
value={password}
onChange = {handlePassword} />
</Input>
<Input>
<Check type="checkbox" />
<Label>Remember me</Label>
</Input>
<Link to = "dashboard">
<Button onLink = {handleSubmit}>
<StyledButton content = "Log in" />
</Button>
</Link>
<Paragraph>
Don't have an account?
<Link to = "register">Sign up</Link>
</Paragraph>
</Form>
</Container>
);
}
export default Signin
I also want to use async await in the sign in. How can that be done?
CodePudding user response:
.await((response) => { // not await, it should be then
console.log(response)
})
should be "then" instead
.then((response) => {
console.log(response)
})
CodePudding user response:
Here is how you use async
await
which is more readable.
const handleSubmit = async (e) => {
e.preventDefault()
try {
let response = await axios.post(
"https://9d6e-110-44-127-177.ngrok.io/auth/login/",
{
email: "[email protected]",
password: "admin@123",
}
);
console.log(response);
} catch (error) {
console.error(error);
}
};
CodePudding user response:
import React, {useState} from 'react'
import styled from 'styled-components'
import StyledInput from './StyledInput'
import StyledButton from './StyledButton'
import { Link } from 'react-router-dom'
import './Signin.css'
import axios from 'axios'
const Signin = () => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const handleSubmit = async () => {
e.preventDefault()
await axios.post("https://9d6e-110-44-127-177.ngrok.io/auth/login/", {
email : email,
password : password
}).then((res) => {
if(res.data.email === "[email protected]" && res.data.password === "admin@123")
}).catch((err) => {
console.log(err) ;
})
}
const handleEmail = (e) => {
setEmail(e.target.value)
}
const handlePassword = (e) => {
setPassword(e.target.value)
}
return (
<Container>
<Welcome>
Welcome
</Welcome>
<Form onSubmit= {handleSubmit}>
<Input>
<StyledInput type="email"
placeholder="Email"
required
value={email}
onChange = {handleEmail}
/>
</Input>
<Input>
<StyledInput type="password"
placeholder="Password"
required
value={password}
onChange = {handlePassword} />
</Input>
<Input>
<Check type="checkbox" />
<Label>Remember me</Label>
</Input>
<Link to = "dashboard">
<Button onLink = {handleSubmit}>
<StyledButton content = "Log in" />
</Button>
</Link>
<Paragraph>
Don't have an account?
<Link to = "register">Sign up</Link>
</Paragraph>
</Form>
</Container>
);
}
export default Signin