Replies: 2 comments
-
maybe, like that? import React, { useState } from 'react';
import { Input, Button } from '@material-tailwind/react';
const LoginPage = () => {
const [login, setLogin] = useState('');
const [password, setPassword] = useState('');
const handleSubmit = async (e) => {
e.preventDefault();
const response = await fetch("https://site/api/auth/login", {
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
method: 'POST',
body: JSON.stringify({ 'login': login, 'password': password })
});
const data = await response.json();
console.log(data.token);
};
return (
<form onSubmit={handleSubmit}>
<Input
type="text"
placeholder="Username"
value={login}
onChange={(e) => setLogin(e.target.value)}
/>
<Input
type="password"
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<Button type="submit">Login</Button>
</form>
);
};
export default LoginPage; import React, { useState } from 'react'; const LoginPage = () => { const handleSubmit = async (e) => { return ( <Input type="text" placeholder="Username" value={login} onChange={(e) => setLogin(e.target.value)} /> <Input type="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} /> Login ); }; export default LoginPage;
|
Beta Was this translation helpful? Give feedback.
-
It is quite simple actually. Here go through this code and read my explanation if you don't understand something. Note: You must install axios by
|
Beta Was this translation helpful? Give feedback.
-
I'm a backendr myself, I use node js, c#, c++, decided to learn frontend but decided to bend to the complicated side which I kinda almost handled, React, tailwind css, Vite, I use files with the jsx extension, how do I implement a login check on the main login page?
There is a code sample of how it looks like on angular
I understand the backend in general, but I don't understand how to take data from the "@material-tailwind/react" inputs when the button is pressed
Beta Was this translation helpful? Give feedback.
All reactions