<file_sep>import React, { useEffect, useState } from 'react';
import { Link, useHistory } from 'react-router-dom';
import * as api from '../../API/api';

import './style.css';

const initialValues = { nameOfDepositor: "", recipient_account_number: "", amount: 0 };

const Deposit = ({ user, setUser, serverMessage, pathname, setPathname }) => {
    const history = useHistory();
    const [success_message, set_success_message] = useState("");
    const [data_inputs, set_data_inputs] = useState(initialValues);
    const [err_message, set_err_message] = useState(false);
    const [spinner, setSpinner] = useState(false);
    const [self, set_Self] = useState(false);

    // handle input field
    const handleInputChange = e => {
        const target = e.target;
        const name = target.name;
        const value = target.value;
        if (target.type === "number") {
            if (value < 0) {
                set_data_inputs({ ...data_inputs, [name]: 0 })
            } else {
                set_data_inputs({ ...data_inputs, [name]: value })
            }
        } else {
            set_data_inputs({ ...data_inputs, [name]: value })
        }
        set_success_message(""); //reset success message when user is typing
        set_err_message(false)
        serverMessage.set_server_success_message("")
    }

    // handleSubmit
    const handleSubmit = async (e) => {
        e.preventDefault();
        set_success_message(null) //reset warning message when user tries to submit form data
        serverMessage.set_server_success_message("")
        // set_err_message(false)
        if (!data_inputs.nameOfDepositor || data_inputs.amount <= 0 || !data_inputs.recipient_account_number) {
            return set_err_message(true);
        } else {
            set_err_message(false)
        }
        setSpinner(true);
        const { data } = await api.deposit(data_inputs);
        // check if transfer was successful
        if (data) {
            setSpinner(false);
            set_success_message(data.message);
            set_data_inputs(initialValues);
            // check if the account number input is correct to return the correct details of user
            if (data.self) {
                setUser({ ...user, balance: data.userBalance });
                set_Self(true);
                serverMessage.set_server_success_message(data.message);
            }
        }

    }

    useEffect(() => {
            // i want to check if pathname is equal to the pathname receiving and updating message from server
            if ((pathname === "/user/withdraw" || pathname === "/user/transfer") && serverMessage.server_success_message) {
                // reset the server success message to null to stop the message from displaying 
                serverMessage.set_server_success_message("");
                // update the pathname to keep track of page location to make decision on the server success message
                setPathname(history.location.pathname);
            } else  {
                setPathname(history.location.pathname);
            }
    }, []);

    return (
        <div className='container-fluid'>
            <h1>Welcome, {user ? `${user.firstname}` : "user"}!</h1>
            <form className='deposit-form' onSubmit={handleSubmit}>
                <div className="mb-3">
                    <label htmlFor="nameOfDepositor" className="form-label">Name of Depositor</label>
                    <input value={data_inputs.nameOfDepositor} type="text" name='nameOfDepositor' className="form-control" placeholder='enter depositors name' value={data_inputs.nameOfDepositor} onChange={handleInputChange} />
                </div>
                <div className="mb-3">
                    <label htmlFor="recipient_account_number" className="form-label">Recipient account number</label>
                    <input value={data_inputs.recipient_account_number} type="text" name='recipient_account_number' className="form-control" placeholder='enter recipients account number' value={data_inputs.recipient_account_number} onChange={handleInputChange} />
                </div>
                <div className="mb-3">
                    <label htmlFor="amount" className="form-label">Enter amount</label>
                    <input value={data_inputs.amount} type="number" name='amount' className="form-control" placeholder='0' value={data_inputs.amount} onChange={handleInputChange} />
                </div>
                <button type="submit" className="btn btn-primary">Deposit</button>
                {
                    err_message && (<div className="deposit-warning">Please fill the form. Amount should be greater than 0</div>)
                }
                <br /><br />
                {
                    // server success message from parent component, this is to solve problem of component rerendering
                    serverMessage.server_success_message && (<div className='text-success'>{serverMessage.server_success_message}</div>)
                }
                {
                    spinner && (<div className="spinner-border text-primary" role="status">
                        <span className="visually-hidden">Loading...</span>
                    </div>)
                }
                {
                    // success message when deposit is complete
                    (success_message) ? (<div className='deposit-transfer'>{success_message}</div>) : (<div className='deposit-transfer'>{success_message}</div>)
                }

            </form>
        </div>
    )
}

export default Deposit;<file_sep>import React, { useState, useEffect } from 'react';
import { useHistory } from 'react-router-dom';
import "./style.css";
import { transfer } from '../../API/api';

const initialValues = { amount: "", recipient_account_number: "" };

const Transfer = ({ user, setUser, serverMessage, pathname, setPathname }) => {
    const history = useHistory();
    const [data_inputs, set_data_inputs] = useState(initialValues);
    const [message, set_message] = useState("");
    const [spinner, setSpinner] = useState(false);
    const [show_dialogue_box, set_show_dialogue_box] = useState(false);
    const [active_button, set_active_button] = useState(false);
    const [err_message, set_err_message] = useState(false);


    // handle input change
    const handleInputChange = e => {
        // only allow input value for amount greater than 0
        if (e.target.type === "number") {
            if (e.target.value < 0 || !Number(e.target.value)) set_data_inputs({ ...data_inputs, [e.target.name]: '' })
        }
        set_data_inputs({ ...data_inputs, [e.target.name]: e.target.value });
        set_message("");
        serverMessage.set_server_success_message("")
    }

    // handle submit button
    const handleSubmit = async (e) => {
        e.preventDefault();
        // show dialogue box for further decision
        set_show_dialogue_box(true);
        serverMessage.set_server_success_message("")
    };

    // handle close dialogue box
    const closeDialogueBox = () => {
        set_show_dialogue_box(false);
    }

    // handle continue box
    const handleContinueButton = async () => {
        // make api call to make transfer
        setSpinner(true);
        set_message("");
        serverMessage.set_server_success_message("")
        const res = await transfer(data_inputs);
        const { data } = res;
        if (data) {
            setSpinner(false)
            set_message(data.message);
            set_show_dialogue_box(false);
            if (data.success) {
                setUser({ ...user, balance: data.userBalance })
                serverMessage.set_server_success_message(data.message)
            }
        }
    };


    // handle dialogue box
    const confirmBox = () => {
        return (
            <div className='card confirm-box'>
                <p>Dear {user && user.firstname},</p>
                <p>You are about to transfer &#8358;{data_inputs.amount} from your account</p>
                <p>to {data_inputs.recipient_account_number}</p>
                <p>Click on continue to make the transfer</p>
                <div className="btn-group">
                    <button className='btn btn-danger close-btn' disabled={spinner && true} onClick={closeDialogueBox}>Close</button>
                    <button className='btn btn-primary continue-btn' disabled={spinner && true} onClick={handleContinueButton}>Continue</button>
                </div>
            </div>
        )
    }

    // update component when user types into the input field
    useEffect(() => {
        if (data_inputs.recipient_account_number && data_inputs.amount) {
            set_err_message(false)
            return
        }
        else {
            set_err_message(true)
        }

    }, [data_inputs]);

    // clear server message if there is any when component mounts
    useEffect(() => {
        // i want to check if pathname is equal to the pathname receiving and updating message from server
        if ((pathname === "/user/withdraw" || pathname === "/user/deposit") && serverMessage.server_success_message) {
            // reset the server success message to null to stop the message from displaying 
            serverMessage.set_server_success_message("");
            // update the pathname to keep track of page location to make decision on the server success message
            setPathname(history.location.pathname);
        } else {
            setPathname(history.location.pathname);
        }
    }, []);
    return (
        <div className='container-fluid'>
            <h1>Welcome, {user ? `${user.firstname}` : "user"}!</h1>
            <form className='transfer-form' onSubmit={handleSubmit}>
                <div className="mb-3">
                    <label htmlFor="recipient_account_number" className="form-label">Recipient account number</label>
                    <input value={data_inputs.recipient_account_number} type="text" name='recipient_account_number' className="form-control" placeholder='enter recipients account number' value={data_inputs.recipient_account_number} onChange={handleInputChange} />
                </div>
                <div className="mb-3">
                    <label htmlFor="amount" className="form-label">Enter amount</label>
                    <input value={data_inputs.amount} type="number" name='amount' className="form-control" placeholder='0' value={data_inputs.amount} onChange={handleInputChange} />
                </div>
                <button type="submit" className="btn btn-primary transfer-btn" disabled={err_message || spinner && true} >Transfer</button>
                {
                    (!message && err_message || serverMessage.server_success_message) && (<div className="transfer-warning warning">Please fill the form</div>)
                }
                {
                    message && (<div className="transfer-warning warning">{message}</div>)
                }
                {
                    serverMessage.server_success_message && (<div className="text-success">{serverMessage.server_success_message}</div>)
                }
                <br /><br />
                {
                    spinner && (<div className="spinner-border text-primary" role="status">
                        <span className="visually-hidden">Loading...</span>
                    </div>)
                }
            </form>
            <div className='confirm-box-container'>
                {show_dialogue_box ? confirmBox() : null}
            </div>
        </div>
    )
}

export default Transfer;<file_sep>import React, { useEffect, useState } from 'react';

import "./style.css";
import History_action from "../general_action/action";
import History from "../general_action/History";

const Transaction_history = ({user}) => {
    const [history, setHistory] = useState([]);
    const [account_holder_name, set_acc_holder_name] = useState("");
    return (
        <div className="container-fluid transaction-history history">
            <History_action button_name="Check transactions" type="transactions" setHistory={setHistory} user={user} set_acc_holder_name={set_acc_holder_name} />
            {/* <div className="view-deposit-history">view transactions here</div> */}
            <History history={history} type="transactions" user={user} name={account_holder_name} />
        </div>
    )
}

export default Transaction_history;<file_sep>import React from 'react';
import { Route, Redirect } from 'react-router-dom';

const PublicRoutes = ({component: Component, user, ...rest}) => {
    return (
        <Route {...rest} render={props => {
            // check if user is not authenticated yet
            if(user) {
                return <Redirect to={{pathname: "/", state: {from: props.location}}} />
            }
            // otherwise return the user to the right page for authentication
            return <Component {...props} />
        }} />
    )
}

export default PublicRoutes;<file_sep>import React, { useEffect, useState } from "react";
import { useHistory } from "react-router-dom";
import { withdraw } from '../../API/api';

import './style.css';
const initial_value = { amount: "", account_number: "" };

const Withdraw = ({ user, setUser, serverMessage, pathname, setPathname }) => {
    const history = useHistory();
    const [data_input, set_data_input] = useState(initial_value);
    const [show_dialogue_box, set_show_dialogue_box] = useState(false);
    const [activate_button, set_activate_button] = useState(false);
    const [message, setMessage] = useState(null);
    const [spinner, setSpinner] = useState(false);
    const [toggleBtn, setToggleBtn] = useState(false);

    // handle input change
    const handleInputChange = e => {
        if (e.target.type === "number") {
            if (e.target.value < 0 || !Number(e.target.value)) set_data_input({ [e.target.name]: '' })
            else {
                set_data_input({ ...data_input, [e.target.name]: e.target.value });
            }
        } else {
            set_data_input({ ...data_input, [e.target.name]: e.target.value });
        }
        serverMessage.set_server_success_message("")
    }

    // handle form submission
    const handleFormSubmission = e => {
        e.preventDefault();
        set_show_dialogue_box(true);
        serverMessage.set_server_success_message("")
    }

    // handle dialogue box continue button
    const handleContinueButton = async () => {
        setSpinner(true);
        const { data } = await withdraw(data_input);
        if (data) {
            setSpinner(false)
            setMessage(data.message);
            serverMessage.set_server_success_message("")
            set_show_dialogue_box(false);
            set_data_input(initial_value);
            if (data.success) {
                setUser({ ...user, balance: data.userBalance })
                // set message to display to user
                // set the response message from server
                serverMessage.set_server_success_message(data.message);
            }
        }
    }

    useEffect(() => {
        if (!data_input.amount) set_activate_button(false)
        else set_activate_button(true);
    }, [data_input])

    // dialogue box to confirm transaction
    const confirmBox = () => {
        return (
            <div className='card confirm-box'>
                <p>Dear {user && user.firstname},</p>
                <p>You want to withdraw &#8358;{data_input.amount} {data_input.account_number ? " from " + data_input.account_number + "." : "from your account."}</p>
                <p>Click on continue to carry on with the transaction</p>
                <div className="btn-group">
                    <button className='btn btn-danger close-btn' disabled={spinner && true} onClick={closeDialogueBox}>Close</button>
                    <button className='btn btn-primary continue-btn' disabled={spinner && true} onClick={handleContinueButton}>Continue</button>
                </div>
            </div>
        )
    }

    // handle close dialogue box
    const closeDialogueBox = () => {
        set_show_dialogue_box(false);
    }

    // toggle button handler
    const toggle = () => {
        setToggleBtn(!toggleBtn);
    }

    // clear server message if there is any when component mounts
    useEffect(() => {
        // i want to check if pathname is equal to the pathname receiving and updating message from server
        if ((pathname === "/user/transfer" || pathname === "/user/deposit") && serverMessage.server_success_message) {
            // reset the server success message to null to stop the message from displaying 
            serverMessage.set_server_success_message("");
            // update the pathname to keep track of page location to make decision on the server success message
            setPathname(history.location.pathname);
        } else {
            setPathname(history.location.pathname);
        }
    }, []);

    return (
        <div className='container'>
            <div className="admin_statement_decision">
                {/* this div enables an admin to check for account holder history, this button is disabled for non admin account holders */
                    user?.admin_user && (<div>
                        <h6>Admin, you can also withdraw for non-admin account holder.</h6>
                        <p>Click the button below to toggle right and display input field</p>
                        <p>This is where you enter users account number for withdrawal</p>
                        <div className="check_statement_of_account_toggle">
                            <div className={`toggle_btn ${toggleBtn ? "toggle" : ""}`} onClick={toggle} ></div>
                        </div>
                    </div>)
                }
            </div>

            <form className='withdrawal-form' onSubmit={handleFormSubmission}>
                {
                    // display only for admins and togglebtn is on
                    toggleBtn && (
                        <div className="mb-3">
                            <label htmlFor="amount" className="form-label">Account number</label>
                            <input value={initial_value.account_number} type="text" name='account_number' className="form-control" placeholder='users account number' value={data_input.account_number} onChange={handleInputChange} />
                        </div>
                    )
                }
                <div className="mb-3">
                    <label htmlFor="amount" className="form-label">Amount</label>
                    <input value={initial_value.amount} type="number" name='amount' className="form-control" placeholder='0' value={data_input.amount} onChange={handleInputChange} />
                </div>

                <button type="submit" className="btn btn-primary withdraw-btn" disabled={activate_button ? false : true}>Withdraw</button>
                <br />
                {
                    // success message when withdrawal is complete
                    (<div className='withdraw-amount'>{message ? message : ""}</div>)
                }
                {
                    // server success message from parent component, this is to solve problem of component rerendering
                    serverMessage.server_success_message && (<div className='text-success'>{serverMessage.server_success_message}</div>)
                }
            </form>
            <br />
            {
                spinner && (<div className="spinner-border text-success" role="status">
                    <span className="visually-hidden">Loading...</span>
                </div>)
            }
            <div className='confirm-box-container'>
                {show_dialogue_box ? confirmBox() : null}
            </div>
        </div>
    )
}

export default Withdraw;<file_sep>import React, { useContext, useEffect, useState } from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom'
// import { AuthContext } from "./Context/AuthContext";
import Navbar from './components/navbar/Navbar';
import Home from './components/home/Home';
import Footer from './components/footer/Footer';
import Signup from './components/signup/Signup';
import Signin from './components/signin/Signin';
import Deposit from './components/deposit/Deposit';
import Withdraw from './components/withdraw/Withdraw';
import Deposit_history from './components/history/deposit_history/Deposit_history';
import Transaction_history from './components/history/transaction_history/Transaction_history';
import Withdrawal_history from './components/history/withdrawal_history/Withdrawal_history';
import Transfer_history from "./components/history/transfer_history/Transfer_history";
import Transfer from "./components/transfer/Transfer";
import Manage_users from './components/manage_users/Manage_users';
import { Not_Found } from './components/not_found/Not_Found';
import * as api from "./API/api";

import PrivateRoutes from './HOC/PrivateRoutes';
import PublicRoutes from './HOC/PublicRoutes';


const App = () => {
  // set user from props if user token still persist
  const [user, setUser] = useState(null);
  const [server_success_message, set_server_success_message] = useState(null);
  const [pathname, setPathname] = useState(null);

  // component did mount to fetch user if user is signed in with token key;
  useEffect(async () => {
    const response_payload = await api.authenticatedUser();
    // check if meet was unable to get response payload
    if(!response_payload) {
      // meaning that the request payload is undefined, exit the function
      return
    } else {
      // there is a response payload from server
      const { data } = response_payload;
      if (data) {
        // set the user object with data from response payload
        setUser(data.user);
      }
    }
  }, []);

  return (
    <BrowserRouter>
      <div className='container-fluid'>
        <Navbar userProp={user} setUser={setUser} />
        <Switch>
          <Route path="/" exact component={() => <Home props={{ user }} />} />
          <PublicRoutes path="/signup" user={user} component={Signup} />
          {/* <Route path="/signup" component={Signup} /> */}
          <PublicRoutes path="/signin" user={user} component={() => <Signin setUser={setUser} />} />
          {/* <Route path="/signin" component={() => <Signin setUser={setUser} />} /> */}
          
          <PrivateRoutes path="/user/deposit" user={user} role={[true]} component={() => <Deposit pathname={pathname} setPathname={setPathname} user={user} setUser={setUser} serverMessage={{server_success_message, set_server_success_message}} />} />
          {/* <Route path='/user/deposit' component={() => <Deposit user={user} setUser={setUser} serverMessage={{server_success_message, set_server_success_message}} />} /> */}
          <PrivateRoutes path='/user/withdraw' user={user} role={[true, false]} component={() => <Withdraw pathname={pathname} setPathname={setPathname} user={user} setUser={setUser} serverMessage={{server_success_message, set_server_success_message}} />} />
          {/* <Route path='/user/withdraw' component={() => <Withdraw user={user} setUser={setUser} serverMessage={{server_success_message, set_server_success_message}} />} /> */}
          <PrivateRoutes path='/user/transfer' user={user} role={[true, false]} component={() => <Transfer pathname={pathname} setPathname={setPathname} user={user} setUser={setUser} serverMessage={{server_success_message, set_server_success_message}} />} />
          {/* <Route path='/user/Transfer' component={() => <Transfer user={user} setUser={setUser} serverMessage={{server_success_message, set_server_success_message}} />} /> */}
          <PrivateRoutes path='/history/deposits' user={user} role={[true, false]} component={() => <Deposit_history user={user} />} />
          {/* <Route path='/history/deposits' component={() => <Deposit_history user={user} />} /> */}
          <PrivateRoutes path='/history/transactions' user={user} role={[true, false]} component={() => <Transaction_history user={user} />} />
          {/* <Route path='/history/transactions' component={() => <Transaction_history user={user} />} /> */}
          <PrivateRoutes path="/history/withdrawals" user={user} role={[true, false]} component={() => <Withdrawal_history user={user} />} />
          {/* <Route path="/history/withdrawals" component={() => <Withdrawal_history user={user} />} /> */}
          <PrivateRoutes path="/history/transfers" user={user} role={[true, false]} component={() => <Transfer_history user={user} /> } />
          {/* <Route path="/history/transfers" component={() => <Transfer_history user={user} /> } /> */}
          {/* <Route path="/admin/users/manage" component={() => <Manage_users admin={user} />} /> */}
          <PrivateRoutes path="/admin/users/manage" user={user} role={[true]} component={() => <Manage_users admin={user} />} />
          {/* not found routes */}
          <Route path='*' component={Not_Found} />
        </Switch>
        <Footer />
      </div>
    </BrowserRouter>
  );
}

export default App;
<file_sep>import React, { useState } from 'react';

import './style.css';
import History_action from '../general_action/action';
import History from "../general_action/History";

const Deposit_history = ({user}) => {
    const [history, setHistory] = useState([]);
    const [account_holder_name, set_acc_holder_name] = useState("");
    return (
        <div className="container-fluid deposit-history history">
            <History_action button_name="Check Deposits" type="deposits" setHistory={setHistory} user={user} set_acc_holder_name={set_acc_holder_name} />
            {/* <div className="view-deposit-history">view result here</div> */}
            <History history={history} type="deposits" user={user} name={account_holder_name} />
        </div>
    )
}

export default Deposit_history;<file_sep>import React, { useEffect, useState } from 'react';
import { history } from "../../../API/api"

import "./style.css";

const History_action = (props) => {
    const initialValues = { starting_date: "", ending_date: "", user_account_number: "", type: props.type }
    // set values for transactions
    const [data_inputs, set_data_inputs] = useState(initialValues);
    const [activate_button, set_activate_button] = useState(false);
    const [message, set_message] = useState(null);
    const [spinner, setSpinner] = useState(false);
    const [toggleBtn, setToggleBtn] = useState(false);

    // handle input values
    const handleDataInput = e => {
        const target = e.target;
        const name = target.name;
        const value = target.value;
        set_data_inputs({ ...data_inputs, [name]: value });
    };

    // handle form submission
    const handleFormSubmission = async (e) => {
        e.preventDefault();
        setSpinner(true)
        set_message(null);
        // clear input account number from previous input for a user account statement
        if (!toggleBtn) {
            data_inputs.user_account_number = "";
        }
        const { data } = await history(data_inputs);
        if (data) {
            setSpinner(false);
            // check if there was no history delivered in case for a user with no transaction records yet
            if (data.message || !data.historySuccess) return set_message(data.message);
            // otherwise pass the history data to the component
            const { transactions, name } = data;
            props.setHistory(transactions);
            props.set_acc_holder_name(name);
        }
    }

    // toggle button handler
    const toggle = () => {
        setToggleBtn(!toggleBtn)
        if (!toggleBtn) {
            set_data_inputs({ ...data_inputs, user_account_number: "" });
        }
    }

    return (
        <div className="card action_card">
            <div className="admin_statement_decision">
                {/* this div enables an admin to check for account holder history, this button is disabled for non admin account holders */
                    props.user?.admin_user && (<div>
                        <h6>Admin can also check for a non-admin account holder.</h6>
                        <div className="check_statement_of_account_toggle">
                            <div className={`toggle_btn ${toggleBtn ? "toggle" : ""}`} onClick={toggle} ></div>
                        </div>
                    </div>)
                }
            </div>
            <form onSubmit={handleFormSubmission}>
                {
                    // admin to enter account number of the user he wants to check the statements
                    toggleBtn && (<div>
                        <label htmlFor="user_account_number">User account number:</label><br />
                        <input type="text" name="user_account_number" value={data_inputs.user_account_number} onChange={handleDataInput} placeholder='enter account number' />
                    </div>)
                }
                <label htmlFor="date">From:</label> <br />
                <input type="date" id="from_date" name="starting_date" value={data_inputs.starting_date} onChange={handleDataInput} /> <br />

                <label htmlFor="date">To:</label> <br />
                <input type="date" id="to_date" name="ending_date" value={data_inputs.ending_date} onChange={handleDataInput} /><br />
                <button className='btn btn-primary history-btn' >{props.button_name}</button>
            </form>
            {
                spinner && (<div className="spinner-border text-primary" role="status">
                    <span className="visually-hidden">Loading...</span>
                </div>)
            }
            {
                // display error messages
                message && (<div className='text-danger'>{message}</div>)
            }

        </div>
    )
}

export default History_action;<file_sep>import React, { useState, useEffect } from 'react';
import { Link, useHistory } from 'react-router-dom';
import * as api from '../../API/api';

import './style.css';

const Navbar = ({userProp, setUser}) => {
    const history = useHistory();
    // handle user unauthentication
    const signOut = async () => {
        const { data } = await api.logoutUser();
        if(data.success) {
            setUser(null)
            history.push("/signin");
            const windowLocation = window.location.reload();  //forces reload on browser to clear cache and store values
        }
    }
    return (
        <header>
            <div className='top-header'>
                <a className="navbar-brand brand" href="/">Veegil Inc.</a>
                <div className='header-contents'>
                    <div className='left-nav'>
                        <Link className="home-link" to="/">Home</Link>
                        {
                            // only display balance when a user is authenticated and logged in
                            (userProp && userProp.balance) && (<span> Balance: &#8358;{userProp.balance}</span>)
                        }
                    </div>
                    {
                        // check if a user exist to disable sign in button
                        (!userProp) ? (<button className='btn btn-primary'><Link to='/signin'>Sign in</Link></button>) : (
                            <div className='user-settings'>
                                <div className='action-area'>
                                    <span>{userProp?.firstname[0]}</span>
                                    <button className='btn btn-light' onClick={signOut}>Sign out</button>
                                </div>
                            </div>
                        )
                    }
                </div>
            </div>
            {
                // check if a user exists before displaying the action nav links
                (userProp && userProp._id) && (
                    <nav className="navbar navbar-expand-lg navbar-light bg-light nav-color">
                        <div className="container-fluid">
                            <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                                <span className="navbar-toggler-icon"></span>
                            </button>
                            <div className="collapse navbar-collapse" id="navbarNavAltMarkup">
                                <div className="navbar-nav">
                                    {
                                        // only admins can make deposits to users according to users cash at hand
                                        (userProp && userProp.admin_user) && (<Link className="nav-link active" to="/user/deposit">Deposit</Link>)
                                    }
                                    <Link className="nav-link active" to="/user/withdraw" >Withdraw</Link>
                                    <Link className="nav-link active" to="/user/transfer" >Transfer</Link>
                                    <div className="nav-item dropdown">
                                        <Link className="nav-link active dropdown-toggle" to="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                            History
                                        </Link>
                                        <ul className="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
                                            <li><Link className="dropdown-item" to="/history/transactions">All transactions History</Link></li>
                                            <li><Link className="dropdown-item" to="/history/deposits">Deposits History</Link></li>
                                            <li><Link className="dropdown-item" to="/history/withdrawals">Withdrawals History</Link></li>
                                            <li><Link className="dropdown-item" to="/history/transfers">Transfers History</Link></li>
                                        </ul>
                                    </div>
                                    {
                                        /* check if the user is an admin to display the manage users link */
                                        (userProp && userProp.admin_user) && (<Link className='nav-link active' to='/admin/users/manage'>Manage users</Link>)
                                    }

                                </div>
                            </div>
                        </div>
                    </nav>
                )
            }
        </header>
    )
}

export default Navbar;<file_sep>import React, {useState, useEffect} from 'react';

import './style.css';

const Footer = () => {
    return (
        <footer>
            &copy; <NAME> 2021
        </footer>
    )
}

export default Footer;<file_sep>import React, {useState} from "react";

import "./style.css";
import History_action from "../general_action/action";
import History from "../general_action/History";

const Withdrawal_history = ({user}) => {
    const [history, setHistory] = useState([]);
    const [account_holder_name, set_acc_holder_name] = useState("");
    return (
        <div className="container-fluid withdrawal-history history">
            <History_action button_name="Check withdrawals" type="withdrawals" setHistory={setHistory} user={user} set_acc_holder_name={set_acc_holder_name} />
            {/* <div className="view-deposit-history"><></div> */}
            <History history={history} type="withdrawals" user={user} name={account_holder_name} />
        </div>
    )
}

export default Withdrawal_history;<file_sep>import axios from 'axios';

// "proxy": "http://localhost:5000"
// create an API instance to make calls to the base url
// production
const API = axios.create({ baseURL: "https://veegil-b.herokuapp.com/user", withCredentials: true });
// development
// const API = axios.create({ baseURL: "http://localhost:5000/user", withCredentials: true, });

// axios interceptor when a user tampers his token or the token expires
API.interceptors.response.use(
  (response) => 
    new Promise((resolve, reject)=>{
      resolve(response);
    }),
  (error) => {
    // check if error is coming from front end and not server
    if(!error.response) {
      return new Promise((resolve, reject)=>{
        reject(error);
      });
    }
    // otherwise check if the response is forbidden or unauthentication
    if (error.response.status === 401 || error.response.status === 403) {
      // check if window location is on auth to terminate browser refresh
      if(window.location.pathname == "/signin") {
        return
      } else {
        // redirect user to sign in screen
          return window.location='/signin';
        }
    } else {
      return new Promise((resolve, reject)=>{
        reject(error);
      });
    }
  }
);

// export const logoutUser = () => API.get('/signout'); dev
export const logoutUser = () => API.get('/signout', {credentials: "include"}); //production
export const signInUser = (formData) => API.post('/signin', formData);
export const createUser = (formData) => API.post('/signup', formData);
export const deposit = (formData) => API.post('/deposit', formData);
export const withdraw = (formData) => API.post('/withdraw', formData);
export const transfer = (formData) => API.post('/transfer', formData);
export const history = (date) => API.post("/history", date);
export const authenticatedUser = () => API.get('/authenticated');
export const getUsers = () => API.get('/admin/manage');
export const delete_a_user = (id) => API.delete(`/admin/manage/${id}`);
<file_sep>import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import * as api from '../../API/api';

import './style.css'

// initial values before input
const initialValues = { firstname: "", lastname: "", email: "", confirm_email: "", phone_number: "", password: "", confirm_password: "", admin_user: false, pledge_accuracy: "" };
const Signup = () => {
    const [inputData, setInputData] = useState(initialValues); //set initial values of input
    const [activate_submit_button, set_activate_submit_button] = useState(false); // keeps the submission button active or inactive
    const [password_check, set_password_check] = useState(false); // to confirm input passwords
    const [email_check, set_email_check] = useState(false);  // to compare input emails
    const [warning_message, set_warning_messsage] = useState(null);  //activates or deactivates warning messages
    const [spinner, setSpinner] = useState(false);
    const [signup_success, setSignup_success] = useState(false);

    const handleInputChange = e => {
        const target = e.target;
        const value = target.type === "checkbox" ? target.checked : target.value; // get input values or check values
        const name = target.name;
        setInputData({ ...inputData, [name]: value });
        setSignup_success(false);
    };

    // check box uncheck handler
    const checkProps = ["pledge_accuracy", "admin_user"]
    const uncheck = (checkedProps) => {
        let i = 0;
        while (i < checkedProps.length) {
            if (document.getElementById(checkedProps[i]).checked) {
                document.getElementById(checkedProps[i]).checked = false;
            }
            ++i
        }
    }

    // handle form data submission
    const handleSubmit = async (e) => {
        e.preventDefault();
        // activate warning message if fields are not correct
        if (email_check || password_check) return set_warning_messsage("Please make sure your entries are matching!")
        else {
            setSpinner(true);
            set_warning_messsage(null);
            setSignup_success(false);
            const { data } = await api.createUser(inputData);
            if (data) {
                setSpinner(false)
                set_warning_messsage(data.message);
                // check the message received if sign up was successful
                if (data.message === "Signed up successfully") {
                    setInputData(initialValues);
                    set_activate_submit_button(false);
                    setSignup_success(true);
                    uncheck(checkProps);
                }
            }
        }

    }

    useEffect(() => {
        // check if the fileds have been properly supplied with values
        const dataKeys = Object.keys(inputData).filter(value => value !== "admin_user");
        const length_of_value = dataKeys.length;
        let count = 0;
        for (let i = 0; i < dataKeys.length; ++i) {
            if (inputData[dataKeys[i]]) count++
        }
        // check if the count is equal to the input fields containing actual values, set the activate button
        if (count === length_of_value) set_activate_submit_button(true)
        else set_activate_submit_button(false);

        // check if the password inputs are thesame
        if (inputData.password && inputData.confirm_password)
            if (inputData.confirm_password !== inputData.password) set_password_check(true)
            else set_password_check(false);

        // check if email inputs are the same
        if (inputData.email && inputData.confirm_email)
            if (inputData.email !== inputData.confirm_email) set_email_check(true)
            else set_email_check(false);
    }, [inputData])
    return (
        <div className='sign-up container-fluid'>
            <form className='sign-up-form' onSubmit={handleSubmit}>
                <div className="mb-3">
                    <label htmlFor="firstname" className="form-label">First name</label>
                    <input value={inputData.firstname} type="text" name='firstname' className="form-control" placeholder='enter your first name' onChange={handleInputChange} required />
                </div>
                <div className="mb-3">
                    <label htmlFor="lastname" className="form-label">Last name</label>
                    <input value={inputData.lastname} type="text" name='lastname' className="form-control" placeholder='enter your last name' onChange={handleInputChange} required />
                </div>
                <div className="mb-3">
                    <label htmlFor="inputEmail1" className="form-label">Email address</label>
                    <input value={inputData.email} type="email" name='email' className="form-control" placeholder='enter email' onChange={handleInputChange} required />
                    <div id="emailHelp" className="form-text">We'll never share your email with anyone else.</div>
                </div>
                <div className="mb-3">
                    <label htmlFor="inputEmail1" className="form-label">Confirm Email address</label>
                    <input value={inputData.confirm_email} type="email" name='confirm_email' className="form-control" placeholder='confirm email' onChange={handleInputChange} required />
                    {
                        // check if email are thesame
                        email_check && (<div id='email_match'>Email do not match</div>)
                    }
                </div>
                <div className="mb-3">
                    <label htmlFor="phone_number" className="form-label">Phone number</label>
                    <input value={inputData.phone_number} type="text" className="form-control" name="phone_number" placeholder='enter phone number' onChange={handleInputChange} required />
                </div>
                <div className="mb-3">
                    <label htmlFor="lastname" className="form-label">Password</label>
                    <input value={inputData.password} type="<PASSWORD>" name='password' className="form-control" placeholder='enter password' onChange={handleInputChange} required />
                </div>
                <div className="mb-3">
                    <label htmlFor="lastname" className="form-label">Confirm Password</label>
                    <input value={inputData.confirm_password} type="password" name='confirm_password' className="form-control" placeholder='confirm password' onChange={handleInputChange} required />
                    {
                        // check if passwords match
                        password_check && (<div id="password_match" className="form-text">Password do not match</div>)
                    }

                </div>
                <div className="mb-3 form-check">
                    <input value={inputData.admin_user} type="checkbox" className="form-check-input" id='admin_user' name="admin_user" onChange={handleInputChange} />
                    <label className="form-check-label" htmlFor="admin_user">Admin user? This is not compulsory, only for admin accounts</label>
                </div>
                <div className="mb-3 form-check">
                    <input value={inputData.pledge_accuracy} type="checkbox" className="form-check-input" id='pledge_accuracy' name="pledge_accuracy" onChange={handleInputChange} />
                    <label className="form-check-label" htmlFor="pledge_acuracy">Pledge accuracy</label>
                </div>
                <button type="submit" disabled={activate_submit_button ? false : true} className="btn btn-success btn-signup">Sign up</button>
                {
                    // display error or success messages
                    warning_message && (<div className={signup_success ? "text-success" : "warning"}>{signup_success ? (<span>{warning_message}. <Link to='/signin'>Please sign in </Link> to continue</span>) : warning_message}</div>)
                }
                <br />
                {
                    spinner && (<div className="spinner-border text-success" role="status">
                        <span className="visually-hidden">Loading...</span>
                    </div>)
                }
                <div className='signup_div'>
                    <span className='decoration_line'></span>
                    <span className='decoration_text'>or</span>
                    <span className='decoration_line'></span>
                </div>
                <div>Have an account? <Link to='/signin'>Sign in</Link></div>
            </form>
            <div className='brand-description sign-up-container'>
                <h1>Veegil.</h1>
                <p>Banking with Better Experience!</p>
            </div>
        </div>
    )
}

export default Signup;<file_sep>import React, { useState, useEffect } from 'react';

import "./style.css"

const History = ({ history, type, user, name }) => {

    const displayHistory = history.length ? history.map((item, index) => {
        const hour = Number(item.time.split("T")[1].split(".")[0].split(":")[0]) + 1;
        const min_sec = item.time.split("T")[1].split(".")[0].split(":");
        const time_format = hour < 10 ? "0" + hour + ":" + min_sec.slice(1).join(":") : hour+ ":" + min_sec.slice(1).join(":") 
        return (
            <tbody key={item._id}>
                <tr className='table-data'>
                    <th scope="row">{index + 1}</th>
                    <td>{item.time.split("T")[0]}</td>
                    <td>{time_format}</td>
                    <td>{item.transaction}</td>
                    <td>{item.type}</td>
                    <td>&#8358;{item.amount}</td>
                    {(type === "transactions" || type === "deposits") && <td>{item.nameOfDepositor ? item.nameOfDepositor : "--"}</td>}
                    {(type === "transactions" || type === "transfers") && <td>{item.recipient_account_number ? item.recipient_account_number : "--"}</td>}
                    {(type === "transactions" || type === "transfers") && <td>{item.account_holder_name ? item.account_holder_name : "--"}</td>}
                </tr>
            </tbody>
        )
    }) : null;
    
    return (
        <div className="view-deposit-history">
            {history.length ? <h5 className='text-success'>Statement of account for {history.length && name}!</h5> : null }
            {history.length ? <p className='history-warning-text text-danger'>This statement is best viewed in a large screen</p> : null}
            {history.length ? <div className="table-data">
                <table className="table table-dark table-striped">
                    <thead>
                        <tr>
                            <th scope="col">S/n</th>
                            <th scope="col">Date</th>
                            <th scope="col">Time</th>
                            <th scope="col">Transaction</th>
                            <th scope="col">Type</th>
                            <th scope="col">Amount</th>
                            {(type === "transactions" || type === "deposits") && (<th scope="col">Depositor Name</th>)}
                            {(type === "transactions" || type === "transfers") && (<th scope="col">Receivers acc num.</th>)}
                            {(type === "transactions" || type === "transfers") && (<th scope="col">Receivers acc name</th>)}
                        </tr>
                    </thead>
                    {displayHistory}
                </table>
            </div> : null }
        </div>
    )
}

export default History;