updates

app.js

@@ -4,6 +4,8 @@ var path = require('path');
 var cookieParser = require('cookie-parser');
 var logger = require('morgan');
 
+const { getUsers } = require('./lib/getUsers')
+
 var indexRouter = require('./routes/index');
 var streamsRouter = require('./routes/getStreams');
 var getUserAccounts = require('./routes/getUserAccounts')
@@ -24,12 +26,11 @@ app.use(express.json());
 app.use(express.urlencoded({ extended: false }));
 app.use(cookieParser('82e4e438a0705fabf61f9854e3b575af'));
 app.use(express.static(path.join(__dirname, 'public')));
+
+let usersList = getUsers()
+
 const users = {
-  users: {
+  users: usersList,
-    'Karl': 'TEST',
-    'Darren': 'TEST',
-    'Duly': 'TEST',
-  },
   challenge: true,
   realm: 'foo',
 }
@@ -39,7 +40,7 @@ app.use('/login', basicAuth(users), login)
 app.use('/getStreams', streamsRouter);
 app.use('/getUserAccounts', getUserAccounts);
 app.use('/singleCheck', basicAuth(users), singleUserCheck)
-app.use('/addAccount', basicAuth(users), addAccount)
+app.use('/addAccount', addAccount)
 app.use('/readCookie', readCookie)
 
 

client/src/App.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
-import { Navigation, Footer, Home, Accounts, ServerList } from "./components";
+import { Navigation, Footer, Home, Accounts, ServerList, AddAccount } from "./components";
 function App() {
   return (
     <div className="App">
@@ -10,6 +10,7 @@ function App() {
           <Route path="/" exact component={() => <Home />} />
           <Route path="/Accounts" exact component={() => <Accounts />} />
           <Route path="/ServerList" exact component={() => <ServerList />} />
+          <Route path="/AddAccount" exact component={() => <AddAccount />} />
         </Switch>
         <Footer />
       </Router>

client/src/components/AddAccount.jsx

@@ -0,0 +1,95 @@
+import React, { Component } from "react";
+import axios from "axios";
+
+class AddAccount extends Component {
+  constructor() {
+    super();
+    this.state = {
+      username: "",
+      password: "",
+      stream: "",
+    };
+  }
+
+  componentDidMount() {
+    // fetch("/getStreams")
+    //   .then((res) => res.json())
+    //   .then((streams) => this.setState({ streams }));
+  }
+
+  onChange = (e) => {
+    /*
+      Because we named the inputs to match their
+      corresponding values in state, it's
+      super easy to update the state
+    */
+    this.setState({ [e.target.name]: e.target.value });
+  };
+
+  onSubmit = (e) => {
+    e.preventDefault();
+    // get our form data out of state
+    const { username, password, stream } = this.state;
+
+    console.log({ username, password, stream });
+
+    axios
+      .post(`/addAccount`, {
+        username,
+        password,
+        stream,
+      })
+      .then((res) => {
+        console.log(res);
+        console.log(res.data);
+      });
+  };
+
+  render() {
+    const { username, password, stream } = this.state;
+
+    return (
+      <section class="container">
+        <div class="left-half">
+          <article>
+            <h1>Add An Account</h1>
+            <p>
+              <form onSubmit={this.onSubmit}>
+                <p>
+                  UserName -
+                  <input
+                    type="text"
+                    name="username"
+                    value={username}
+                    onChange={this.onChange}
+                  />
+                </p>
+                <p>
+                  Password - 
+                  <input
+                    type="text"
+                    name="password"
+                    value={password}
+                    onChange={this.onChange}
+                  />
+                </p>
+                <p>
+                  Stream Name - 
+                  <input
+                    type="text"
+                    name="stream"
+                    value={stream}
+                    onChange={this.onChange}
+                  />
+                </p>
+                <br />
+                <button type="submit">Add Account</button>
+              </form>
+            </p>
+          </article>
+        </div>
+      </section>
+    );
+  }
+}
+export default AddAccount;

client/src/components/Home.jsx

@@ -38,8 +38,7 @@ function View(props) {
 }
 
 function App() {
-  const [screen, setScreen] = useState("auth");
+    const [username, setUsername] = useState();
-  const [username, setUsername] = useState();
   const [password, setPassword] = useState();
 
   const auth = async () => {
@@ -48,8 +47,8 @@ function App() {
         auth: { username, password },
       });
 
-      if (res.data.screen !== undefined) {
+      if (res.data !== undefined) {
-        setScreen('/about');
+        // setScreen('/about');
       }
     } catch (e) {
       console.log(e);
@@ -60,11 +59,12 @@ function App() {
     try {
       const res = await axios.get("/readCookie");
 
-      if (res.data.screen !== undefined) {
+      if (res.data !== "No Cookie Set") {
-        setScreen(res.data.screen);
+        // document.location = "/accounts"
+        // this.props.history.push('/accounts');
       }
     } catch (e) {
-      setScreen("auth");
+      // setScreen("auth");
       console.log(e);
     }
   };
@@ -75,7 +75,6 @@ function App() {
 
   return (
     <div className="App">
-      {screen === "auth" ? (
         <div>
           <label>Username: </label>
           <br />
@@ -90,9 +89,6 @@ function App() {
           <br />
           <button onClick={auth}>Login</button>
         </div>
-      ) : (
-        <View screen={screen} setScreen={setScreen} />
-      )}
     </div>
   );
 }

client/src/components/Navigation.jsx

@@ -31,7 +31,7 @@ function Navigation(props) {
                 Accounts
                 </Link>
               </li>
-              <li
+              {/* <li
                 class={`nav-item  ${
                   props.location.pathname === "/ServerList" ? "active" : ""
                 }`}
@@ -39,6 +39,15 @@ function Navigation(props) {
                 <Link class="nav-link" to="/ServerList">
                 Server List
                 </Link>
+              </li> */}
+              <li
+                class={`nav-item  ${
+                  props.location.pathname === "/AddAccount" ? "active" : ""
+                }`}
+              >
+                <Link class="nav-link" to="/AddAccount">
+                Add Account
+                </Link>
               </li>
             </ul>
           </div>

client/src/components/accountTable.jsx

@@ -39,11 +39,13 @@ export default class MatDataTable extends Component {
       this.setState({ person: results.data });
 
       var newArr = results.data.map(function (val) {
+        let date = new Date(val.expiaryDate * 1000);
+        let d = date.toGMTString();
         return {
           username: val.username,
           streamName: val.streamName,
           streamURL: val.streamURL,
-          expiaryDate: val.expiaryDate
+          expiaryDate: d,
         };
       });
       console.log(results.data.results);
@@ -61,7 +63,9 @@ export default class MatDataTable extends Component {
 
   render() {
     return (
-      <div style={{ maxWidth: "100%", marginLeft: "50px", marginRight: "50px" }}>
+      <div
+        style={{ maxWidth: "100%", marginLeft: "50px", marginRight: "50px" }}
+      >
         <MaterialTable
           icons={tableIcons}
           options={{
@@ -69,14 +73,14 @@ export default class MatDataTable extends Component {
           }}
           columns={[
             {
-              title: "userName",
+              title: "Username",
               field: "username",
               type: "numeric",
               align: "left",
             },
-            { title: "streamName", field: "streamName" },
+            { title: "Stream Name", field: "streamName" },
-            { title: "streamURL", field: "streamURL" },
+            { title: "Stream URL", field: "streamURL" },
-            { title: "Expires", field: "expiaryDate", type: "numeric" },
+            { title: "Expiry Date", field: "expiaryDate", type: "numeric" },
           ]}
           data={this.state.tableArray}
           title="Stream Details"

client/src/components/index.js

@@ -3,3 +3,4 @@ export { default as Footer } from "./Footer";
 export { default as Home } from "./Home";
 export { default as Accounts } from "./Accounts";
 export { default as ServerList } from "./ServerList";
+export { default as AddAccount } from "./AddAccount"

lib/getUser.js

@@ -11,7 +11,7 @@ function getUserAccounts(user) {
         ON users.idusers = userAccounts.userID
       INNER JOIN streams
         ON userAccounts.stream = streams.streamName
-        WHERE users.username = '${user}'`)
+        WHERE users.idusers = '${user}'`)
     // console.log(data)
     if (data.length == 0) {
         return 'User Not Found'

lib/getUsers.js

@@ -0,0 +1,37 @@
+const sql = require('./mysql')
+
+function getUsers() {
+  let data = sql.query(`SELECT
+      userName,
+      password
+    FROM users
+      `)
+  // console.log(data)
+  if (data.length == 0) {
+    return 'User Not Found'
+  } else {
+    var object = data.reduce(
+      (obj, item) => Object.assign(obj, { [item.userName]: item.password }), {});
+
+    return object
+  }
+}
+
+function getUserName(userId) {
+  let data = sql.query(`SELECT
+    userName
+  FROM users
+  WHERE idusers = ${userId}
+    `)
+  // console.log(data)
+  if (data.length == 0) {
+    return 'User Not Found'
+  } else {
+    return data[0].userName
+  }
+}
+
+module.exports = {
+  getUsers, getUserName
+}
+

routes/addAccount.js

@@ -2,17 +2,19 @@ var express = require('express');
 var router = express.Router();
 
 const { storeAccountToDB } = require('../lib/addAccounts')
-
+const { getUserName } = require('../lib/getUsers')
 
 /* POST postUser page. */
 router.post('/', async function (req, res, next) {
   let postData = req.body
+  postData.userId = Number(req.signedCookies.user)
+  let userName = await getUserName(req.signedCookies.user)
   let result = await storeAccountToDB(postData)
   console.log(result)
   if (result.affectedRows < 1) {
     res.send('Adding account failed')
   } else {
-    res.send('Account ' + postData.username + ' Added successfully')
+    res.send('Account ' + postData.username + ' Added successfully to ' + userName)
   }
 });
 

routes/login.js

@@ -9,13 +9,13 @@ router.get('/', function (req, res, next) {
   }
   try {
     if (req.auth.user === 'Karl') {
-      res.cookie('user', 'Karl', options)
+      res.cookie('user', 1, options)
     }
     else if (req.auth.user === 'Darren') {
-      res.cookie('user', 'Darren', options)
+      res.cookie('user', 2, options)
     }
     else if (req.auth.user === 'Duly') {
-      res.cookie('user', 'Duly', options)
+      res.cookie('user', 3, options)
     }
   } catch (error) {
     res.render('index', { title: 'No Auth' });

routes/readCookie.js

@@ -3,17 +3,15 @@ var router = express.Router();
 
 /* POST postUser page. */
 router.get('/', async function (req, res, next) {
-    if (req.signedCookies.user === 'Karl') {
+    if (req.signedCookies.user === undefined) {
-        res.send(req.signedCookies);
-    } else if (req.signedCookies.name === 'user') {
-        res.send({ screen: 'user' });
-    } else {
         res.send('No Cookie Set');
+    } else {
+        res.send(req.signedCookies);
     }
 });
 
 router.get('/clear', (req, res) => {
     res.clearCookie('user').end();
-  });
+});
 
 module.exports = router;