Let there be a landing page that enables the login.
This landing page has:
- Text field for user ID: LoginUserIDInput
- Text field for password: LoginPasswordInput
- Button to start the login process: LoginButton
If the login process is successful, I am redirected to a private page.
If the login process is not successful, I remain on the landing page.
Now the following error message appears in the console output:
`controlId` is ignored on `<FormControl>` when `id` is specified.
How can I successfully implement the login process ?
AuthenticationAction.js
export const SHOW_LOGIN_DIALOG ='SHOW_LOGIN_DIALOG';
export const HIDE_LOGIN_DIALOG ='HIDE_LOGIN_DIALOG';
export const AUTHENTICATION_PENDING = 'AUTHENTICATION_PENDING'
export const AUTHENTICATION_SUCCESS = 'AUTHENTICATION_SUCCESS'
export const AUTHENTICATION_ERROR = 'AUTHENTICATION_ERROR'
export function getShowLoginDialogAction(){
return {
type: SHOW_LOGIN_DIALOG
}
}
export function getHideLoginDialogAction(){
return{
type: HIDE_LOGIN_DIALOG
}
}
export function getAuthenticateUserPendingAction(){
return{
type: AUTHENTICATION_PENDING
}
}
export function getAuthenticationSuccessAction(userSession) {
return {
type: AUTHENTICATION_SUCCESS,
user: userSession.user,
accessToken: userSession.accessToken
}
}
export function getAuthenticationErrorAction(error){
return {
type: AUTHENTICATION_ERROR,
error: error
}
}
export function authenticateUser(userID, password){
console.log("Authenticate")
return dispatch => {
dispatch(getAuthenticateUserPendingAction());
login(userID,password).then(userSession => { const action= getAuthenticationSuccessAction(userSession);
dispatch(action);}, error => {dispatch(getAuthenticationErrorAction(error));}).catch(error=> {dispatch(getAuthenticationErrorAction(error));})
}
}
function login(userID,password){
const requestOptions={
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({userID, password})
};
return fetch('http://localhost:8080/login',requestOptions).then(handleResponse).then(userSession => {return userSession});
};
function handleResponse(response){
const authorizationHeader = response.headers.get('Authorization');
return response.text().then(text => {
console.log('Receive result: '+authorizationHeader)
const data= text && JSON.parse(text);
var token
if(authorizationHeader){
token = authorizationHeader.split(" ")[1];
}
if(!response.ok){
if(response.status ===401){
logout();
}
const error =(data && data.message) || response.statusText;
return Promise.reject(error);
}
else{
let userSession = {
user: data,
accessToken: token
}
return userSession;
}
});
}
function logout(){
console.error("Should logout user")
}
RootReducer.js
import * as authenticationActions from '../actions/AuthenticationAction'
const initialState = {
user: null,
loginPending: false,
showLoginDialog: false
};
function rootReducer(state = initialState, action) {
console.log("Bin im Reducer" + action.type)
switch(action.type){
case authenticationActions.SHOW_LOGIN_DIALOG:
return {
...state,
showLoginDialog: true,
error: null
}
case authenticationActions.HIDE_LOGIN_DIALOG:
return {
...state,
showLoginDialog: false,
error: null
}
case authenticationActions.AUTHENTICATION_SUCCESS:
{
return {
...state,
showLoginDialog: false,
pending: false,
user: action.user,
accessToken: action.accessToken
}
}
case authenticationActions.AUTHENTICATION_ERROR:
{
return {
...state,
pending: false,
error: "Authentication failed"
}
}
case authenticationActions.AUTHENTICATION_PENDING:
{
return {
...state,
pending: true,
error: null
}
}
default:
return state;
}
};
export default rootReducer;
UserSessionWidget.js
import React, {Component} from "react"
import {connect} from "react-redux";
import { bindActionCreators } from 'redux'
import Button from "react-bootstrap/Button"
import Modal from "react-bootstrap/Modal"
import Form from "react-bootstrap/Form"
import * as authenticationActions from '../actions/AuthenticationAction'
const mapStateToProps = state => {
return state;
}
class UserSessionWidget extends Component {
constructor(props){
super(props)
this.state={username: '', password: ''};
this.handleShow=this.handleShow.bind(this);
this.handleClose=this.handleClose.bind(this);
this.handleChange=this.handleChange.bind(this);
this.handleSubmit=this.handleSubmit.bind(this);
}
handleShow(e){
e.preventDefault();
/* this.setState({show: true}) */
const {showLoginDialogAction} =this.props;
showLoginDialogAction();
}
handleClose(e){
e.preventDefault();
this.setState({show: false})
const {hideLoginDialogAction} =this.props;
hideLoginDialogAction();
}
handleChange(e){
const {name,value} = e.target;
this.setState({[name]: value})
console.log(JSON.stringify(this.state))
}
handleSubmit(e){
e.preventDefault();
const {username, password} =this.state;
const {authenticateUserAction}=this.props;
authenticateUserAction(username, password);
console.log("Pushed submit")
}
render(){
var showDialog=this.props.showLoginDialog;
if(showDialog==undefined){
showDialog=false;
}
return (
<div>
<Button variant="primary" onClick={this.handleShow}>Login</Button>
<Modal show={showDialog} onHide={this.handleClose}>
<Modal.Body>
<Form>
<Form.Group className="mb-3" controlId="userID">
<Form.Label>UserID</Form.Label>
<Form.Control id="LoginUserIDInput" type="text" placeholder="User ID" name="userID"
onChange={this.handleChange} />
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicPassword">
<Form.Label>Password</Form.Label>
<Form.Control id=" LoginPasswordInput" type="password" placeholder="Password" name="password" onChange={this.handleChange} />
</Form.Group>
<Button variant="primary" type="submit" onClick={this.handleSubmit}>
Submit
</Button>
</Form>
</Modal.Body>
<Modal.Footer>
<Button variant="primary" onClick={this.handleClose}>Close</Button>
</Modal.Footer>
</Modal>
</div>
)
}
}
const mapDisaptchToProps = dispatch => bindActionCreators({showLoginDialogAction: authenticationActions.getShowLoginDialogAction,hideLoginDialogAction: authenticationActions.getHideLoginDialogAction, authenticateUserAction: authenticationActions.authenticateUser},dispatch)
const ConnectedUserSessionsWidget =connect(mapStateToProps,mapDisaptchToProps)(UserSessionWidget)
export default ConnectedUserSessionsWidget;