Created registration page. Fixed up login page.

active-allocator/ClientApp/src/AppRoutes.js

@@ -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 />

active-allocator/ClientApp/src/components/auth/Login.js

@@ -1,60 +1,46 @@
-import { Component } from "react";
+import { useNavigate } from "react-router-dom";
-//import { toast, ToastContainer } from "react-toastify";
+import { useEffect } from "react";
-//import 'react-toastify/dist/ReactToastify.css';
+import { useState } from 'react';
-import { Container } from "reactstrap";
-//import LoginMenu from "../LoginMenu";
 import { postDataForLogin } from "../services/AccessAPI";
 import SessionManager from "./SessionManager";
 
 
-export class Login extends Component {
+export default function Login() {
-    constructor() {
-        super();
-        this.state = {
-            userName: "",
-            password: "",
-            loading: false,
-            failed: false,
-            error: ''
-        };
 
-        this.login = this.login.bind(this);
+    useEffect(() => {
-        this.onChange = this.onChange.bind(this);
+    }, []);
-    }
 
+    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) {
+    let navigate = useNavigate();
-        this.setState({ [e.target.name]: e.target.value });
-    }
 
-    onKeyDown = (e) => {
+    function onKeyDown(e) {
         if (e.key === 'Enter') {
-            this.login();
+            login();
         }
     }
 
-    login() {
+    function login() {
-        let userInfo = this.state;
+        setLoading(true);
-        this.setState({
+
-            loading: 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({
+                    setLoading(false);
-                        loading: false
+                    navigate('/home');
-                    });
-
-                    // <LoginMenu menuText = 'Logout' menuURL = '/logout' />
-
-                    // If login successful and get token
-                    // redirect to dashboard
-                    window.location.href = "/home";
                 }
             }
 
@@ -76,23 +62,23 @@ export class Login extends Component {
                     draggable: true
                 });*/
 
-                this.setState({
+                setError("Login failed!")
-                    errors: "Login failed!",
+                setLoading(false)
-                    loading: false
-                });
             }
 
         });
     }
 
-    registration(){
+    function registration() {
-        window.location.href = "/admin/user/register";
+        navigate('/register');
     }
 
-    render() {
+    
     let content;
-        if (this.state.loading) {
+    if (loading) {
         content = <div>Loading...</div>;
+    } else if (error !== '') {
+        content = <div>ERROR: {error}</div>
     }
 
     return (
@@ -110,25 +96,25 @@ export class Login extends Component {
                             className="form-control"
                             placeholder="Please Enter Username"
                             name="userName"
-                                onChange={this.onChange}
+                            onChange={(e) => setUsername(e.target.value)}
-                                onKeyDown={this.onKeyDown}
+                            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={this.onChange} onKeyDown={this.onKeyDown}
+                            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={this.login}>
+                            <button className="btn btn-primary btn-block" onClick={login}>
                                 Sign In
                             </button>
                         </div>
                         <div className="col-md-6">
-                                <button className="btn btn-primary btn-block" onClick={this.registration}>
+                            <button className="btn btn-primary btn-block" onClick={registration}>
                                 Create an account
                             </button>
                         </div>
@@ -138,7 +124,7 @@ export class Login extends Component {
                     </div>
                     <div className="row">
                         <div className="col-md-8">
-                                <strong className="has-error">{this.state.errorMsg}</strong>
+                            <strong className="has-error">{error}</strong>
                         </div>
                         <div className="col-md-4">
                             {/*<ToastContainer></ToastContainer>*/}
@@ -148,5 +134,4 @@ export class Login extends Component {
             </div>
         </div>
     );
-    }
 }

active-allocator/ClientApp/src/components/auth/Register.js

@@ -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>
+    );
+}

active-allocator/appsettings.json

@@ -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": {