React: две формы на одной странице, одна из форм не работает
Для логина и регистрации на сайт сделал одну страницу - в ней две формы, которые переключаются в TAB. Во всем приложении нет никаких ошибок. Логин работает без ошибок. Регистрация не работает - я попадаю в стрелочную функцию onSubmitRegister - отрабатывает console.log в котором видно, что данные из формы корректно собраны и переданы. Но дальше ничего не происходит: проверка соответствия паролей не срабатывает, функция signup не вызывается
Все названия аргументов и функций двух форм разведены, конфликтов нет, ошибок никаких не выдается. Просто не отрабатывает импортированная функция signup.
Это код страницы Логин-Регистрация:
import PropTypes from "prop-types"
import React, {Fragment, useState} from "react"
import MetaTags from "react-meta-tags"
import {Redirect, Link} from "react-router-dom"
import {BreadcrumbsItem} from "react-breadcrumbs-dynamic"
import Tab from "react-bootstrap/Tab"
import Nav from "react-bootstrap/Nav"
import Breadcrumb from "./Layout/Breadcrumb"
import {login, signup} from "../../redux/actions/authActions"
import {setAlert} from "../../redux/actions/alertActions"
import {connect} from "react-redux"
import {multilanguage} from "redux-multilanguage"
const LoginRegister = ({strings, location, login, isAuthenticated}) => {
const {pathname} = location
const [accountCreated, setAccountCreated] = useState(false)
// LOGIN HANDLING
const [loginFormData, setLoginFormData] = useState({
logemail: '',
logpassword: ''
})
const {logemail, logpassword} = loginFormData
const onChangeLogin = e => setLoginFormData({...loginFormData, [e.target.name]: e.target.value})
const onSubmitLogin = e => {
e.preventDefault()
login(logemail, logpassword)
}
// REGISTER HANDLING
const [formData, setFormData] = useState({
email: '',
name: '',
password: '',
re_password: ''
})
const {email, name, password, re_password} = formData
const onChangeRegister = e => setFormData({...formData, [e.target.name]: e.target.value})
const onSubmitRegister = e => {
console.log('Submit: ', email, name, password, re_password)
e.preventDefault()
if (password !== re_password)
setAlert('Passwords do not match', 'error')
else
signup({name, email, password, re_password})
setAccountCreated(true)
}
if (isAuthenticated || accountCreated)
return <Redirect to="/about"/>
return (
<Fragment>
<MetaTags>
<title> | Login - Register</title>
<meta
name="description"
content={strings['description']}
/>
</MetaTags>
<BreadcrumbsItem to={process.env.PUBLIC_URL + "/"}>{strings["home"]}</BreadcrumbsItem>
<BreadcrumbsItem to={process.env.PUBLIC_URL + pathname}>{strings["login_register"]}</BreadcrumbsItem>
<Breadcrumb/>
<div className="login-register-area pt-100 pb-100">
<div className="container">
<div className="row">
<div className="col-lg-7 col-md-12 ml-auto mr-auto">
<div className="login-register-wrapper">
<Tab.Container defaultActiveKey="login">
<Nav variant="pills" className="login-register-tab-list">
<Nav.Item>
<Nav.Link eventKey="login">
<h4>{strings["login"]}</h4>
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="register">
<h4>{strings["register"]}</h4>
</Nav.Link>
</Nav.Item>
</Nav>
<Tab.Content>
<Tab.Pane eventKey="login">
<div className="login-form-container">
<div className="login-register-form">
<form onSubmit={e => onSubmitLogin(e)}>
<input
placeholder={strings["email"]}
name="logemail"
value={logemail}
type="email"
onChange={e => onChangeLogin(e)}
required
/>
<input
placeholder={strings["password"]}
name="logpassword"
value={logpassword}
type="password"
onChange={e => onChangeLogin(e)}
required
minLength="6"
/>
<div className="button-box">
<div className="login-toggle-btn">
<input type="checkbox"/>
<label className="ml-10">{strings["remember_me"]}</label>
<Link to={process.env.PUBLIC_URL + "/"}>{strings["forgot_password"]}</Link>
</div>
<button type="submit">
<span>{strings["login"]}</span>
</button>
</div>
</form>
</div>
</div>
</Tab.Pane>
<Tab.Pane eventKey="register">
<div className="login-form-container">
<div className="login-register-form">
<form onSubmit={e => onSubmitRegister(e)}>
<input
placeholder={strings["name"]}
name="name"
value={name}
type="text"
onChange={e => onChangeRegister(e)}
required
/>
<input
placeholder={strings["email"]}
name="email"
value={email}
type="email"
onChange={e => onChangeRegister(e)}
required
/>
<input
placeholder={strings["password"] + " - " + strings["minimum_6_characters"]}
type="password"
name="password"
value={password}
onChange={e => onChangeRegister(e)}
required
/>
<input
placeholder={strings["retype_the_password"]}
type="password"
name="re_password"
value={re_password}
onChange={e => onChangeRegister(e)}
required
/>
<div className="button-box">
<button type="submit">
<span>{strings["register"]}</span>
</button>
</div>
</form>
</div>
</div>
</Tab.Pane>
</Tab.Content>
</Tab.Container>
</div>
</div>
</div>
</div>
</div>
</Fragment>
)
}
LoginRegister.propTypes = {
location: PropTypes.object,
strings: PropTypes.object
}
const mapStateToProps = state => ({
isAuthenticated: state.authReducer.isAuthenticated
})
export default multilanguage(connect(mapStateToProps, {login, signup, setAlert})(LoginRegister))
Это импортируемая функция signup:
export const signup = ({email, name, password, re_password}) => async dispatch => {
console.log(`signup job: ${email}`, name, password, re_password)
const config = {
headers: {
'Content-Type': 'application/json'
}
}
const body = JSON.stringify({ email, name, password, re_password })
try {
const res = await axios.post(`https://some-domain.com/auth/users/`, body, config)
dispatch({
type: SIGNUP_SUCCESS,
payload: res.data
});
dispatch(setAlert('Successful registration', 'success'))
} catch (err) {
dispatch({
type: SIGNUP_FAIL
})
dispatch(setAlert(`Error during registration ${err}`, 'error'))
}
}
Это login такой же как signup - только работает нормально:
export const login = (email, password) => async dispatch => {
console.log(email, password)
const config = {
headers: {
'Content-Type': 'application/json'
}
};
const body = JSON.stringify({ email, password });
console.log(config, body)
try {
const res = await axios.post(`https://some-domain/auth/jwt/create/`, body, config);
console.log(JSON.stringify(res))
dispatch({
type: LOGIN_SUCCESS,
payload: res.data
});
dispatch(load_user());
dispatch(setAlert('Successful authorization', 'success'));
} catch (err) {
dispatch({
type: LOGIN_FAIL
});
dispatch(setAlert('Invalid email or password', 'error'));
}
}
Явно не вижу чего-то простого и важного... помогите разобраться)