Login

client/public/index.html

@@ -10,6 +10,11 @@
       homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
+    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css?family=Bowlby+One+SC|Merriweather" rel="stylesheet">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

client/src/App.css

@@ -1,13 +1,79 @@
+/* MAIN APP */
+
 .App {
   text-align: center;
 }
 
-.App-logo {
+.main-container{
+  display: grid;
+  grid-template-areas:
+    "nav"
+    "body"
+}
+
+/* NAV */
+.nav-container{
+  grid-area: nav;
+  display: grid;
+  grid-template-columns: repeat(2, min-content);
+  grid-template-rows: max-content;
+  grid-template-areas:
+    "logo . icons"
+}
+
+.navbar-brand{
+  grid-area: logo;
+  padding-left: .6em;
+}
+
+.icon-div{
+  grid-area: icons;
+  justify-self: right;
+
+}
+
+.icon-ul{
+  display: inline-flex;
+}
+
+li{
+  list-style-type: none;
+}
+
+.icon{
+  color: black;
+  font-size: 1.8em;
+}
+.nav-text{
+  color: black;
+  font-size: 1.2em;
+}
+
+/* BODY */
+.main-photo-div{
+  width: 100%;
+}
+
+.main-photo{
+  width: 100%;
+}
+
+.click-link{
+  text-decoration: underline;
+  cursor: pointer;
+  color: #0082DF;
+  font-weight: bold;
+}
+
+
+
+
+/* .App-logo {
   animation: App-logo-spin infinite 20s linear;
   height: 40vmin;
-}
+} */
 
-.App-header {
+/* .App-header {
   background-color: #282c34;
   min-height: 100vh;
   display: flex;
@@ -16,17 +82,17 @@
   justify-content: center;
   font-size: calc(10px + 2vmin);
   color: white;
-}
+} */
 
-.App-link {
+/* .App-link {
   color: #61dafb;
-}
+} */
 
-@keyframes App-logo-spin {
+/* @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);
   }
   to {
     transform: rotate(360deg);
   }
-}
+} */

client/src/App.js

@@ -1,17 +1,28 @@
 import React from 'react';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
-import Navbar from './components/Navbar';
 import Main from './containers/Main';
-import Login from './containers/Login'
+import Login from './containers/Login';
+import Logout from "./containers/Logout";
+import Signup from './containers/Signup';
+import User from './containers/User';
+import Events from './containers/Events';
+import Navbar from './components/Navbar';
 import './App.css';
 
 const App = () => (
   <Router>
-    <div className="container">
+    <div className="main-container">
       <Navbar/>
       <Switch>
         <Route exact path="/" component={Main} />
         <Route exact path="/login" component={Login} />
+        <Route path="/events/:event" component={Events} />
+        <Route path="/events" component={Events} />
+        <Route path="/signup/:event" component={Signup} />
+        <Route path="/signup" component={Signup} />
+        <Route path="/user/:event" component={User} />
+        <Route path="/user" component={User} />
+        <Route path="/logout" component={Logout} />
         <Route component={Main} />
       </Switch>
     </div>

client/src/components/Card/Card.css

@@ -0,0 +1,73 @@
+.main-card-div{
+  display: contents;
+}
+
+.card {
+  display: inline-block;
+  margin: 0 5px 10px 5px;
+}
+
+.links {
+  color: black;
+}
+
+.links:hover {
+  color: var(--info);
+}
+
+.social-div {
+  display: grid;
+  grid-template-columns: min-content 1fr min-content;
+  grid-template-rows: min-content;
+  grid-template-areas: "twitter . button" "fb . button" "linkedin . button" "github . button"
+}
+
+.social-inner {
+  display: grid;
+  grid-template-columns: min-content max-content;
+}
+
+.twitter {
+  grid-area: twitter;
+}
+
+.fb {
+  grid-area: fb;
+}
+
+.linkedin {
+  grid-area: linkedin;
+}
+
+.github {
+  grid-area: github;
+}
+
+.header-div {
+  display: grid;
+  grid-template-columns: max-content max-content;
+  grid-template-rows: repeat(4, min-content);
+  margin-bottom: 10px;
+}
+
+.user-photo {
+  height: 114px;
+  width: 114px;
+  margin-right: 10px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.user-photo-div {
+  align-self: center;
+}
+
+.header-info {
+  margin-top: 10px;
+}
+
+.export-button {
+  grid-area: button;
+  height: min-content;
+  align-self: center;
+}

client/src/components/Card/Card.js

@@ -0,0 +1,61 @@
+import React from "react";
+import "../Card/Card.css";
+
+const Card = props => (
+  <div className="main-card-div">
+    {props.eventUsers.map(user => (
+      <div key={user.id}>
+        <div className="card">
+          <div className="card-header bg-info"></div>
+          <div className="card-body">
+            <div className="header-div">
+              <div className="user-photo-div">
+                <img src={user.photo} className="user-photo" alt="Card"/>
+              </div>
+              <div className="header-info">
+                <h3>{user.name}</h3>
+                {/* <h5>{user.email}</h5> */}
+                <a href={`mailto:${user.email}`} 
+                  rel="noopener noreferrer" 
+                  className="links"
+                  >{user.email}</a>
+                <p>{user.phone}</p>
+              </div>
+            </div>
+            <div className="social-div">
+              <div className="social-inner twitter">
+                <div className="contact-image mr-2">
+                  <i className="fab fa-twitter"></i>
+                </div>
+                <a href={`http://www.twitter.com/${user.twitter}`} target="_blank" rel="noopener noreferrer" className="links">{user.twitter ? user.twitter : ""}</a>
+              </div>
+              <div className="social-inner fb">
+                <div className="contact-image mr-2">
+                  <i className="fab fa-facebook"></i>
+                </div>
+                <a href={`http://www.facebook.com/${user.fb}`} target="_blank" rel="noopener noreferrer" className="links">{user.fb}</a>
+              </div>
+              <div className="social-inner linkedin">
+                <div className="contact-image mr-2">
+                  <i className="fab fa-linkedin"></i>
+                </div>
+                <a href={`http://www.linkedin.com/in/${user.link}`} target="_blank" rel="noopener noreferrer" className="links">{user.link}</a>
+              </div>
+              <div className="social-inner github">
+                <div className="contact-image mr-2">
+                  <i className="fab fa-github"></i>
+                </div>
+                <a href={`http://www.github.com/${user.git}`} target="_blank" rel="noopener noreferrer" className="links">{user.git}</a>
+              </div>
+              <button className="btn btn-danger export-button">Export
+                <i className="fas fa-download"></i>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    ))}
+  </div>
+);
+
+  export default Card;

client/src/components/Card/index.js

@@ -0,0 +1 @@
+export { default } from "./Card";

client/src/components/Navbar/Navbar.js

@@ -1,29 +1,60 @@
-import React from "react";
-import { Link, NavLink } from "react-router-dom";
+import React, { Component } from "react";
+import { NavLink } from "react-router-dom";
+import API from '../../utils/API'
 
-const Navbar = () => (
-  <nav className="navbar navbar-expand-lg navbar-light bg-light">
-    <Link className="navbar-brand" to="/">React-Network-Tool</Link>
-    <div className="collapse navbar-collapse">
-      <div className="navbar-nav">
-        {/* <li className="nav-item active">
-          <NavLink className="nav-item nav-link" to="/">Home</NavLink>
-        </li> */}
-        {/* <li className="nav-item">
-          <NavLink className="nav-link" to="/signup">Profile</NavLink>
-        </li> */}
-        {/* <li className="nav-item">
-          <NavLink className="nav-link" to="/login">Login</NavLink>
-        </li> */}
-        {/* <li>
-          <NavLink className="nav-link" to="/events">Events</NavLink>
-        </li> */}
-        <li>
-          <NavLink className="nav-link" to="/login">Login</NavLink>
-        </li>
-      </div>
-    </div>
-  </nav>
-);
 
-export default Navbar;
+class Navbar extends Component {
+  state = {
+    isLoggedIn: true,
+    username: " "
+  }
+
+  componentDidMount(){
+    this.loginCheck();
+  }
+
+  loginCheck = () => {
+    API
+      .loginCheck()
+      .then(res => this.setState({
+        isLoggedIn: res.data.isLoggedIn, username: res.data.username
+      }))
+      .catch(err => {
+        console.log(err);
+        this.setState({isLoggedIn: false})
+      })
+  }
+
+  render () {
+    return (
+      <nav className="nav-bar navbar-light bg-light nav-container">
+        <NavLink className="navbar-brand" to="/">React-Network-Tool</NavLink>
+        <div className="icon-div">
+          <ul className="icon-ul">
+            <li className="icon-item">
+              <NavLink className="nav-link" to="/user">
+                {
+                  this.state.isLoggedIn 
+                  ? <span title="Settings"><i className="fas fa-cog icon" alt="Settings"></i></span>
+                  : <span title="Settings"></span>
+                }
+              </NavLink>
+            </li>
+            <li className="icon-item">
+              <NavLink className="nav-link" to={this.state.isLoggedIn ? "/logout" : "/login"}>
+                {
+                  this.state.isLoggedIn 
+                  ? <span title="Logout"><i className="fas fa-sign-out-alt icon" alt="logout"></i></span>
+                  : <span title="Login" className="nav-text">Login</span>
+                }
+              </NavLink>
+            </li>
+          </ul>
+        </div>
+      </nav>
+    )
+  }
+}
+
+export default Navbar;
+