I am using Gatsby for my app. I have created one api from Mock api. My api looks like this. I have made one post-request for login, when user will put his/her email and password, if it does not match then it will alert "failed login" or if it is success it will alert ("successfully login") and navigate to successful page. But what ever email and password I am putting it always shows me I login successfully which is wrong logic. The email should be like my api's email: alak@gmail.com" and password: test123 . I think my logic right but still I am making the mistake. I share my code in Codesandbox.
PS: Codesandbox is based on react. but logic is same as my below code
Here is my code:
import React, { ReactElement, useState } from 'react';
import { PageProps, navigate } from 'gatsby';
import styled from 'styled-components';
import MainTemplate from '../templates/index';
import { TextInput } from '../components/textInput';
import { Button } from '../components/buttons';
import { API_URLS } from '../utilities';
interface Props extends PageProps {
}
export default function SignIn({ }: Props): ReactElement {
const [state, setState] = useState({
"email": ``,
"password": ``,
"loading": false
});
const { loading } = state;
const signInValue = (e) => {
setState({
...state,
[e.target.id]: e.target.value
});
};
const onSubmit = async (e) => {
e.preventDefault();
console.log(state);
setState({
"loading": true,
...state
});
const response = await fetch(`https://run.mocky.io/v3/beec46b8-8536-4cb1-9304-48e96d341461`, {
"method": `POST`,
"headers": {
"Accept": `application/json`,
'Content-Type': `application/json`
},
"body": { state }
});
if (response.ok) {
alert(`you have suceefully login`);
navigate(`/success`, { "state": { email } });
} else {
alert(`login failed`);
}
};
return (
<MainTemplate>
<TextInput
type="text"
value={state.email}
onChange={signInValue}
id="email"
required
/>
<TextInput
type="password"
value={state.password}
onChange={signInValue}
id="password"
required
/>
<Button
type="submit"
name="action"
onClick={onSubmit}
disabled={loading}
> {loading ? `loading...` : `save`}
</Button>
</MainTemplate>
);
}
