Merge branch 'login' of https://github.com/PatrickAllen1/klustr.dev into login-backend

Author: lawrencehan650

.eslintrc.json

@@ -1,20 +1,21 @@
 {
-  "env": {
-    "browser": true,
-    "es2021": true
-  },
-  "extends": ["airbnb", "prettier"],
-  "parserOptions": {
-    "ecmaFeatures": {
-      "jsx": true
+    "env": {
+      "browser": true,
+      "es2021": true
     },
-    "ecmaVersion": 12,
-    "sourceType": "module"
-  },
-  "plugins": ["react", "prettier"],
-  "rules": {
-    "prettier/prettier": ["error", { "singleQuote": true }],
-    "react/jsx-filename-extension": "off",
-    "import/extensions": "off"
+    "extends": ["airbnb", "prettier"],
+    "parserOptions": {
+      "ecmaFeatures": {
+        "jsx": true
+      },
+      "ecmaVersion": 12,
+      "sourceType": "module"
+    },
+    "plugins": ["react", "prettier"],
+    "rules": {
+      "prettier/prettier": ["error", { "singleQuote": true }],
+      "react/jsx-filename-extension": "off",
+      "import/extensions": "off"
+    }
   }
-}
+  

.gitignore

@@ -1 +1 @@
-node_modules
+node_modules

client/components/AdminPage.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import CreateTeam from './CreateTeam.jsx';
+import CreateUser from './CreateUser.jsx';
+
+
+
+
+const AdminPage = () => {
+
+
+  return (
+    <div id='adminpage'>
+    <h1>here lies the admin page</h1>
+    <CreateTeam/>
+    <CreateUser/>
+    </div>
+  )
+
+
+}
+
+export default AdminPage;

client/components/AdminSignup.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Button, TextField } from '@material-ui/core'
+
+
+const AdminSignup = () => {
+
+  return (
+    <div id='adminsignup'>
+      <TextField>First Name</TextField>
+      <TextField>Last Name</TextField>
+      <TextField>Email</TextField>
+      <TextField>Password</TextField>
+      <Button>Signup</Button>
+      </div>
+
+  )
+}
+
+
+
+export default AdminSignup;

client/components/App.jsx

@@ -1,12 +1,17 @@
 import React, { Component } from 'react';
-import Table from './Table.jsx';
+// import Table from './Table.jsx';
+import MainContainer from '../containers/MainContainer.jsx'
+import NavBar from '../containers/NavBarContainer.jsx'
+import { BrowserRouter as Router } from 'react-router-dom';
 
 class App extends Component {
   render() {
     return(
       <div className="App">
-      <h1>this is a react component</h1>
-      <Table />
+      <NavBar/>
+      <Router>
+        <MainContainer/>
+      </Router>
     </div>
     );
   };

client/components/CreateTeam.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Button, TextField } from '@material-ui/core'
+
+
+const CreateTeam = () => {
+
+  return (
+    <div id='createteam'>
+      <TextField>Team Name</TextField>
+      <Button>Create Team</Button>
+    </div>
+  )
+}
+
+
+export default CreateTeam;

client/components/CreateUser.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Button, TextField, Select } from '@material-ui/core'
+
+
+const CreateUser = () => {
+
+  return (
+    <div id='createuser'>
+      <TextField>User Email</TextField>
+      <TextField>User Password</TextField>
+      <TextField>First Name</TextField>
+      <TextField>Last Name</TextField>
+      <Select>Select Team</Select>
+      <Button>Create User</Button>
+    </div>
+
+  )
+}
+
+export default CreateUser;

client/components/LoginPage.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Button, TextField } from '@material-ui/core'
+
+const LoginPage = () => {
+
+  return (
+    <div id='LoginPage'>
+    <TextField>Email</TextField>
+    <TextField>Password</TextField>
+
+    <Button>First Time? Sign up Here</Button>
+    </div>
+    
+  )
+}
+
+export default LoginPage;

client/components/Table.jsx

@@ -1,11 +1,11 @@
 import React, { Component } from 'react';
 
-class Table extends Component {
-  render() {
-    return(
-      <div>this is table</div>
-    )
-  }
-}
+// class Table extends Component {
+//   render() {
+//     return(
+//       <div>this is table</div>
+//     )
+//   }
+// }
 
 export default Table;

client/components/UserPage.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+
+
+
+const UserPage = () => {
+
+
+  return (
+    <div id='userpage'>
+    <h3>this is ze user page</h3>
+    </div>
+  )
+}
+
+
+export default UserPage;

client/containers/AdminContainer.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import AdminPage from '../components/AdminPage.jsx'
+
+
+const AdminContainer = () => {
+
+
+  return (
+    <div id='AdminContainer'>
+    <AdminPage/>
+    </div>
+  )
+
+}
+
+export default AdminContainer;

client/containers/MainContainer.jsx

@@ -0,0 +1,26 @@
+import React, { Component } from 'react';
+import { Switch, Route } from 'react-router-dom';
+import LoginPage from '../components/LoginPage.jsx';
+import AdminSignup from '../components/AdminSignup.jsx';
+import AdminContainer from './AdminContainer.jsx';
+import UserContainer from './UserContainer.jsx';
+
+
+
+
+
+const MainContainer = () => {
+    return (
+      <div className='MainContainer'>   
+      <Switch>
+        <Route path="/" exact component={LoginPage} />
+        <Route path="/adminsignup" exact component={AdminSignup} />
+        <Route path="/admin" exact component={AdminContainer} />
+        <Route path="/user" exact component={UserContainer} />
+      </Switch>
+      </div>   
+      
+    )
+}
+
+export default MainContainer;

client/containers/NavBarContainer.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Button } from '@material-ui/core';
+
+
+
+const NavBar = () => {
+
+
+  return (
+    <div id='navbar'>
+    <h4>this is navbar</h4>
+    <Button>Spaces</Button>
+    <Button>vClusters</Button>
+    <Button>Admin</Button>
+    </div>
+
+  )
+}
+
+
+export default NavBar;

client/containers/UserContainer.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import UserPage from '../components/UserPage.jsx';
+
+
+const UserContainer = () => {
+
+
+
+
+  return (
+    <div id='UserContainer'>
+    <h1>this is ze usercontainer</h1>
+    <UserPage/>
+    </div>
+  )
+}
+
+export default UserContainer;