Помогите не могу найти ошибку код дает 404
import React, { useState } from 'react';
import loginstyle from './loginpage.module.css';
import { Navigate } from 'react-router-dom';
import { useAuthContext } from '../../contexts/AuthContext';
import { BASE_URL } from '../../utils/const';
const LoginPage = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [showPass, setShowPass] = useState(false);
const handleSubmit = async (e) => {
e.preventDefault();
const data = {
login: email,
password: password,
};
try {
const response = await fetch(
'https://vm4506017.43ssd.had.wf/api/users/',
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
}
);
if (response.ok) {
console.log('Регистрация прошла успешно');
} else {
console.error('Ошибка регистрации');
}
} catch (error) {
console.error('Ошибка соединения', error);
}
};
return (
<div className={loginstyle.container}>
<div className={loginstyle.login}>
<span>Регистрация</span>
<form onSubmit={handleSubmit}>
<div className={loginstyle.inp_login}>
<input
placeholder="Почта/Email"
type="email"
value={email}
autoComplete="username"
onChange={(e) => setEmail(e.target.value)}
/>
<input
placeholder="Пароль"
type={showPass ? 'text' : 'password'}
required
value={password}
autoComplete="current-password"
onChange={(e) => setPassword(e.target.value)}
/>
</div>
<div className={loginstyle.btn}>
<button type="button" onClick={() => setShowPass(!showPass)}>
{showPass ? 'Скрыть' : 'Показать'}
</button>
<button type="submit">Зарегистрироваться</button>
</div>
<div>
<a href="#">Забыли пароль?</a>
<a href="#">Уже зарегистрированы?</a>
</div>
</form>
</div>
</div>
);
};
export default LoginPage;
Ответы (1 шт):
Автор решения: DIGMEN_GG
→ Ссылка
import React, { useState } from 'react';
import axios from 'axios';
import styles from './loginpag.css';
import { Navigate } from 'react-router-dom';
const LoginPage = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [showPass, setShowPass] = useState(false);
const [registrationSuccess, setRegistrationSuccess] = useState(false);
const handleSubmit = async (e) => {
e.preventDefault();
const data = {
login: email,
password: password,
};
try {
const response = await axios.post(
'https://vm4506017.43ssd.had.wf/api/users/',
data
);
if (response.status >= 200 && response.status < 300) {
console.log('Регистрация прошла успешно');
setRegistrationSuccess(true);
} else {
console.error('Ошибка регистрации');
}
} catch (error) {
console.error('Ошибка соединения', error);
}
};
if (registrationSuccess) {
return <Navigate to="/" />;
}
return (
<div style={{ marginTop: '80px' }}>
<div className="lmain">
<input type="checkbox" id="chk" aria-hidden="true" />
<div className="llogin">
<form className="lform">
<label for="chk" aria-hidden="true">
Log in
</label>
<input
className="linput"
type="email"
name="email"
placeholder="Имя"
required=""
/>
<input
className="linput"
type="password"
name="pswd"
placeholder="Пароль"
required=""
/>
<button>Войти</button>
</form>
</div>
<div className="lregister">
<form onSubmit={handleSubmit} className="lform">
<label for="chk" aria-hidden="true">
Регистрации
</label>
<input
className="linput"
placeholder="Имя"
value={email}
autoComplete="username"
onChange={(e) => setEmail(e.target.value)}
required=""
/>
<input
className="linput"
placeholder="Пароль"
type={showPass ? 'text' : 'password'}
required
value={password}
autoComplete="current-password"
onChange={(e) => setPassword(e.target.value)}
/>
<button>Зарегистрироваться</button>
</form>
</div>
</div>
</div>
);
};
export default LoginPage;
я решил так