Created registration page. Fixed up login page.
This commit is contained in:
parent
2a18d51019
commit
f13e611621
@ -1,8 +1,9 @@
|
||||
import { Counter } from "./components/Counter";
|
||||
import { FetchData } from "./components/FetchData";
|
||||
import { Home } from "./components/Home";
|
||||
import { Login } from "./components/auth/Login";
|
||||
import Login from "./components/auth/Login";
|
||||
import { Logout } from "./components/auth/Logout";
|
||||
import Register from "./components/auth/Register";
|
||||
import CreateUser from "./components/users/CreateUser";
|
||||
import DeleteUser from "./components/users/DeleteUser";
|
||||
import UpdateUser from "./components/users/UpdateUser";
|
||||
@ -33,6 +34,10 @@ const AppRoutes = [
|
||||
path: '/logout',
|
||||
element: <Logout />
|
||||
},
|
||||
{
|
||||
path: '/register',
|
||||
element: <Register />
|
||||
},
|
||||
{
|
||||
path: '/admin/users',
|
||||
element: <Users />
|
||||
|
||||
@ -1,60 +1,46 @@
|
||||
import { Component } from "react";
|
||||
//import { toast, ToastContainer } from "react-toastify";
|
||||
//import 'react-toastify/dist/ReactToastify.css';
|
||||
import { Container } from "reactstrap";
|
||||
//import LoginMenu from "../LoginMenu";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useEffect } from "react";
|
||||
import { useState } from 'react';
|
||||
import { postDataForLogin } from "../services/AccessAPI";
|
||||
import SessionManager from "./SessionManager";
|
||||
|
||||
|
||||
export class Login extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
userName: "",
|
||||
password: "",
|
||||
loading: false,
|
||||
failed: false,
|
||||
error: ''
|
||||
};
|
||||
export default function Login() {
|
||||
|
||||
this.login = this.login.bind(this);
|
||||
this.onChange = this.onChange.bind(this);
|
||||
}
|
||||
useEffect(() => {
|
||||
}, []);
|
||||
|
||||
const [username, setUsername] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [failed, setFailed] = useState(false);
|
||||
const [error, setError] = useState(false);
|
||||
|
||||
onChange(e) {
|
||||
this.setState({ [e.target.name]: e.target.value });
|
||||
}
|
||||
let navigate = useNavigate();
|
||||
|
||||
onKeyDown = (e) => {
|
||||
function onKeyDown(e) {
|
||||
if (e.key === 'Enter') {
|
||||
this.login();
|
||||
login();
|
||||
}
|
||||
}
|
||||
|
||||
login() {
|
||||
let userInfo = this.state;
|
||||
this.setState({
|
||||
loading: true
|
||||
});
|
||||
function login() {
|
||||
setLoading(true);
|
||||
|
||||
let userObj = {
|
||||
username: username,
|
||||
password: password,
|
||||
}
|
||||
|
||||
//console.log("login info: " + userInfo.password);
|
||||
postDataForLogin('Users/authenticate', userInfo).then((result) => {
|
||||
postDataForLogin('Users/authenticate', userObj).then((result) => {
|
||||
if (result?.token) {
|
||||
|
||||
SessionManager.setUserSession(result.username, result.token, result.id, result.firstName, result.lastName)
|
||||
|
||||
if (SessionManager.getToken()) {
|
||||
this.setState({
|
||||
loading: false
|
||||
});
|
||||
|
||||
// <LoginMenu menuText = 'Logout' menuURL = '/logout' />
|
||||
|
||||
// If login successful and get token
|
||||
// redirect to dashboard
|
||||
window.location.href = "/home";
|
||||
setLoading(false);
|
||||
navigate('/home');
|
||||
}
|
||||
}
|
||||
|
||||
@ -76,77 +62,76 @@ export class Login extends Component {
|
||||
draggable: true
|
||||
});*/
|
||||
|
||||
this.setState({
|
||||
errors: "Login failed!",
|
||||
loading: false
|
||||
});
|
||||
setError("Login failed!")
|
||||
setLoading(false)
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
registration(){
|
||||
window.location.href = "/admin/user/register";
|
||||
function registration() {
|
||||
navigate('/register');
|
||||
}
|
||||
|
||||
render() {
|
||||
let content;
|
||||
if (this.state.loading) {
|
||||
content = <div>Loading...</div>;
|
||||
}
|
||||
|
||||
let content;
|
||||
if (loading) {
|
||||
content = <div>Loading...</div>;
|
||||
} else if (error !== '') {
|
||||
content = <div>ERROR: {error}</div>
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="row">
|
||||
<div className="login-box col-md-4">
|
||||
<div className="login-logo">
|
||||
<a href="/"><b>ECommerce</b></a>
|
||||
return (
|
||||
<div className="row">
|
||||
<div className="login-box col-md-4">
|
||||
<div className="login-logo">
|
||||
<a href="/"><b>ECommerce</b></a>
|
||||
</div>
|
||||
<div className="login-box-body">
|
||||
<p className="login-box-msg">Sign in to access the application</p>
|
||||
|
||||
<div className="form-group has-feedback">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Please Enter Username"
|
||||
name="userName"
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
onKeyDown={onKeyDown}
|
||||
/>
|
||||
<span className="glyphicon glyphicon-user form-control-feedback" />
|
||||
</div>
|
||||
<div className="login-box-body">
|
||||
<p className="login-box-msg">Sign in to access the application</p>
|
||||
|
||||
<div className="form-group has-feedback">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Please Enter Username"
|
||||
name="userName"
|
||||
onChange={this.onChange}
|
||||
onKeyDown={this.onKeyDown}
|
||||
/>
|
||||
<span className="glyphicon glyphicon-user form-control-feedback" />
|
||||
<div className="form-group has-feedback">
|
||||
<input type="password" className="form-control" placeholder="Please Enter Password" name="password"
|
||||
onChange={(e) => setPassword(e.target.value)} onKeyDown={onKeyDown}
|
||||
/>
|
||||
<span className="glyphicon glyphicon-lock form-control-feedback" />
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-md-4">
|
||||
<button className="btn btn-primary btn-block" onClick={login}>
|
||||
Sign In
|
||||
</button>
|
||||
</div>
|
||||
<div className="form-group has-feedback">
|
||||
<input type="password" className="form-control" placeholder="Please Enter Password" name="password"
|
||||
onChange={this.onChange} onKeyDown={this.onKeyDown}
|
||||
/>
|
||||
<span className="glyphicon glyphicon-lock form-control-feedback" />
|
||||
<div className="col-md-6">
|
||||
<button className="btn btn-primary btn-block" onClick={registration}>
|
||||
Create an account
|
||||
</button>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-md-4">
|
||||
<button className="btn btn-primary btn-block" onClick={this.login}>
|
||||
Sign In
|
||||
</button>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<button className="btn btn-primary btn-block" onClick={this.registration}>
|
||||
Create an account
|
||||
</button>
|
||||
</div>
|
||||
<div className="col-md-2">
|
||||
{content}
|
||||
</div>
|
||||
<div className="col-md-2">
|
||||
{content}
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-md-8">
|
||||
<strong className="has-error">{this.state.errorMsg}</strong>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
{/*<ToastContainer></ToastContainer>*/}
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-md-8">
|
||||
<strong className="has-error">{error}</strong>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
{/*<ToastContainer></ToastContainer>*/}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
181
active-allocator/ClientApp/src/components/auth/Register.js
Normal file
181
active-allocator/ClientApp/src/components/auth/Register.js
Normal file
@ -0,0 +1,181 @@
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useEffect } from "react";
|
||||
import { useState } from 'react';
|
||||
import { postData } from "../services/AccessAPI";
|
||||
|
||||
|
||||
export default function Register() {
|
||||
|
||||
useEffect(() => {
|
||||
}, []);
|
||||
|
||||
const [firstName, setFirstName] = useState("");
|
||||
const [lastName, setLastName] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [username, setUsername] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [confirmationPassword, setConfirmationPassword] = useState("");
|
||||
const [role, setRole] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState(false);
|
||||
|
||||
let navigate = useNavigate();
|
||||
|
||||
function onKeyDown(e) {
|
||||
if (e.key === 'Enter') {
|
||||
register();
|
||||
}
|
||||
}
|
||||
|
||||
function register() {
|
||||
setLoading(true)
|
||||
|
||||
if (password !== confirmationPassword) {
|
||||
setError("Password and confirm password are not same");
|
||||
return;
|
||||
}
|
||||
|
||||
let userObj = {
|
||||
firstName: firstName,
|
||||
lastName: lastName,
|
||||
email: email,
|
||||
username: username,
|
||||
password: password,
|
||||
role: role,
|
||||
}
|
||||
|
||||
postData('Users/register', userObj).then((result) => {
|
||||
if (result) {
|
||||
navigate('/login');
|
||||
} else {
|
||||
let errors = '';
|
||||
for (const key in result?.errors) {
|
||||
if (Object.hasOwnProperty.call(result.errors, key)) {
|
||||
errors += result.errors[key];
|
||||
|
||||
}
|
||||
}
|
||||
errors = errors === '' ? 'Registration was unsuccessfull!' : errors;
|
||||
/*toast.error(errors, {
|
||||
position: "top-right",
|
||||
autoClose: 5000,
|
||||
hideProgressBar: true,
|
||||
closeOnClick: true,
|
||||
pauseOnHover: true,
|
||||
draggable: true
|
||||
});*/
|
||||
|
||||
setError("Registration failed!")
|
||||
setLoading(false)
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
let content;
|
||||
if (loading) {
|
||||
content = <div>Loading...</div>;
|
||||
} else if (error !== '') {
|
||||
content = <div>ERROR: {error}</div>
|
||||
} else {
|
||||
content = ""
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="row">
|
||||
<div className="login-box col-md-4">
|
||||
<div className="login-logo">
|
||||
<a href="/"><b>ECommerce</b></a>
|
||||
</div>
|
||||
<div className="login-box-body">
|
||||
<p className="login-box-msg">Register user account</p>
|
||||
<div className="form-group has-feedback">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Please Enter First Name"
|
||||
name="firstName"
|
||||
onChange={(e) => setFirstName(e.target.value)}
|
||||
onKeyDown={onKeyDown}
|
||||
/>
|
||||
<span className="glyphicon glyphicon-user form-control-feedback" />
|
||||
</div>
|
||||
<div className="form-group has-feedback">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Please Enter Last Name"
|
||||
name="lastName"
|
||||
onChange={(e) => setLastName(e.target.value)}
|
||||
onKeyDown={onKeyDown}
|
||||
/>
|
||||
<span className="glyphicon glyphicon-user form-control-feedback" />
|
||||
</div>
|
||||
<div className="form-group has-feedback">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Please Enter Username"
|
||||
name="userName"
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
onKeyDown={onKeyDown}
|
||||
/>
|
||||
<span className="glyphicon glyphicon-user form-control-feedback" />
|
||||
</div>
|
||||
<div className="form-group has-feedback">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Please Enter Email"
|
||||
name="email"
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
onKeyDown={onKeyDown}
|
||||
/>
|
||||
<span className="glyphicon glyphicon-user form-control-feedback" />
|
||||
</div>
|
||||
<div className="form-group has-feedback">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Please Enter Role"
|
||||
name="role"
|
||||
onChange={(e) => setRole(e.target.value)}
|
||||
onKeyDown={onKeyDown}
|
||||
/>
|
||||
<span className="glyphicon glyphicon-user form-control-feedback" />
|
||||
</div>
|
||||
<div className="form-group has-feedback">
|
||||
<input type="password" className="form-control" placeholder="Please Enter Password" name="password"
|
||||
onChange={(e) => setPassword(e.target.value)} onKeyDown={onKeyDown}
|
||||
/>
|
||||
<span className="glyphicon glyphicon-lock form-control-feedback" />
|
||||
</div>
|
||||
<div className="form-group has-feedback">
|
||||
<input type="password" className="form-control" placeholder="Please Confirm Password" name="passwordConfirm"
|
||||
onChange={(e) => setConfirmationPassword(e.target.value)} onKeyDown={onKeyDown}
|
||||
/>
|
||||
<span className="glyphicon glyphicon-lock form-control-feedback" />
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-md-4">
|
||||
<button className="btn btn-primary btn-block" onClick={register}>
|
||||
Register
|
||||
</button>
|
||||
</div>
|
||||
<div className="col-md-2">
|
||||
{content}
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-md-8">
|
||||
<strong className="has-error">{error}</strong>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
{/*<ToastContainer></ToastContainer>*/}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"ConnectionStrings": {
|
||||
"PSQLConnection": "Server=localhost;Port=15432;Database=aadb;User Id=postgres;Password=nqA3UV3CliLLHpLL"
|
||||
"PSQLConnection": "Server=localhost;Port=15432;Database=AADB;User Id=postgres;Password=nqA3UV3CliLLHpLL"
|
||||
},
|
||||
"Logging": {
|
||||
"LogLevel": {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user