'React login .net web api
I am trying to make a simple login page with React and.net web API SQlite as backend. I think my backend works as intended, it returns status 200 when using Swagger with a saved admin, and 404 when sending wrong password/admin-name. If I replace my Fetch URL with a hard coded URL i get status 200: "..api/Admins/login?adminName=admin&adminPass=password"
On submiting I get this error : "Uncaught TypeError: this is undefined"
On the line where theese states are: "adminName: this.state.adminName" and "adminPassword: this.state.adminPass"
Thanks in advance.
Backend:
[HttpPost("login")]
public async Task<ActionResult<IEnumerable<Admin>>> GetLogin(string adminName, string adminPass)
{
//var getAdmin = from m in _context.Admins select m;
var getAdmin = _context.Admins.Where(s => s.Admin_Name!.Equals(adminName) && s.Admin_Password!.Equals(adminPass)).FirstOrDefault();
if (getAdmin == null)
{
return NotFound();
}
else
{
return Ok();
}
}
Front-end React:
import { EndPoints } from "./EndPoints";
import React, { useState, useEffect, Component } from "react";
import { Link } from "react-router-dom";
import { useNavigate } from "react-router-dom";
export class Admin extends Component {
constructor(props) {
super(props);
this.state = {
adminId: 0,
adminName: "",
adminPass: "",
admin: "",
};
}
login(e) {
e.preventDefault();
fetch(EndPoints.API_URL + "Admins/login?", {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
Response: "response",
},
body: JSON.stringify({
adminName: this.state.adminName,
adminPassword: this.state.adminPass,
}),
}).then((response) => {
if (response === 200) {
console.log("logged in");
}
if (response === 404) {
console.log("wrong");
}
});
}
onChange_Name = (e) => {
this.setState({ adminName: e.target.value });
};
onChange_Pass = (e) => {
this.setState({ adminPass: e.target.value });
};
render() {
const { adminName, adminPass } = this.state;
return (
<div className="App">
<div>
<h3>Inloggning</h3>
<div className="col-md-8 col-lg-6 col-xl-4 offset-xl-1">
<form onSubmit={this.login}>
<div className="input-group mb-3">
<span className="input-group-text">Admin:</span>
<input
value={adminName}
type="text"
name=""
id=""
className="form-control"
onChange={this.onChange_Name}
></input>
</div>
<div className="input-group mb-3">
<span className="input-group-text">Lösenord:</span>
<input
value={adminPass}
onChange={this.onChange_Pass}
type="password"
className="form-control"
></input>
</div>
<div className="text-center text-lg-start mt-4 pt-2">
<button className="btn btn-primary btn-lg">Logga in</button>
</div>
</form>
</div>
</div>
</div>
);
}
}```
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
