Skip to content

Feat/endpoints #66

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
adriandarian merged 5 commits into from
Oct 9, 2018
Merged

Feat/endpoints #66

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8c3b5b6
fixed errors that were in master such as not proper imports
jsanchez254 Sep 30, 2018
556fb77
added axios and semantic UI. Made endpoint for signUpHacker form
jsanchez254 Sep 30, 2018
e347b22
navbar and footer made with semantic UI. Deleted Bulma jsx
kechuarceus Oct 8, 2018
46be01d
log in form made with semantic UI. Endpoints created for logIn form
kechuarceus Oct 8, 2018
49479b7
fixed warnings
kechuarceus Oct 9, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions client/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"@fortawesome/fontawesome-svg-core": "^1.2.0-14",
"@fortawesome/free-solid-svg-icons": "^5.1.0-11",
"@fortawesome/react-fontawesome": "^0.1.0-11",
"axios": "^0.18.0",
"font-awesome": "^4.7.0",
"node-sass-chokidar": "^1.3.3",
"npm-run-all": "^4.1.3",
Expand All @@ -16,6 +17,8 @@
"react-parallax": "^1.8.0",
"react-router-dom": "^4.3.1",
"react-scripts": "1.1.4",
"semantic-ui-css": "^2.4.0",
"semantic-ui-react": "^0.82.5",
"styled-components": "^3.3.3"
},
"scripts": {
Expand Down
18 changes: 10 additions & 8 deletions client/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,17 @@ import {
Route
} from 'react-router-dom';

import Header from './components/Design/Header';
import Footer from './components/Design/Footer';
import Header from './Components/Design/Header';
import Footer from './Components/Design/Footer';
import Main from './main';
import ContactUs from './components/Design/ContactUs';
import FAQ from './components/Design/Faqs';
import Hacker from './components/Design/SignUpHacker';
import Volunteer from './components/Design/SignUpVolunteer';
import AboutUs from './components/Design/AboutUs';
import ContactUs from './Components/Design/ContactUs';
import FAQ from './Components/Design/Faqs';
import Hacker from './Components/Design/SignUpHacker';
import Volunteer from './Components/Design/SignUpVolunteer';
import AboutUs from './Components/Design/AboutUs';
import LogIn from './Components/Design/LogIn';

import './assets/css/main.css';
import './assets/css/home.css';
import "./assets/css/team.css";

class App extends Component {
Expand All @@ -28,6 +29,7 @@ class App extends Component {
<Route path='/faqs' component={FAQ}/>
<Route path='/volunteer' component={Volunteer} />
<Route path='/aboutus' component={AboutUs} />
<Route path='/logIn' component={LogIn} />
<Footer/>
</div>
</Router>
Expand Down
45 changes: 28 additions & 17 deletions client/src/Components/Design/Footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import React, { Component } from 'react';
import { Link } from 'react-router-dom';

//IMPORT SEMANTIC UI
import { Container, Grid} from "semantic-ui-react";

//IMPORT OF REACT COMPONENT FONTAWESOME
import { library } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
Expand All @@ -11,23 +14,31 @@ library.add(faEnvelope, faQuestion, faStop);
class Footer extends Component {
render() {
return (
<section className="hero is-primary is-bold">
<div className="hero-head">
<nav className="navbar is-bold">
<div className="navbar-end">
<div className="navbar-item">
<FontAwesomeIcon icon="envelope" size="2x"/><Link id="underline" to="/contactus">Contact Us</Link>
</div>
<div className="navbar-item">
<FontAwesomeIcon icon="question" size="2x"/><Link id="underline" to="/faqs">FAQs</Link>
</div>
<div className="navbar-item">
<FontAwesomeIcon icon="stop" size="2x"/><Link id="underline" to="/Volunteer">Volunteers</Link>
</div>
</div>
</nav>
</div>
</section>
<footer className = "footer">
<Container>
<Grid columns = "equal" position = "center">
<Grid.Column>
<FontAwesomeIcon icon="envelope" size="2x"/>
<Link id="underline" to="/contactus">
<span className = "footerText">Contact Us</span>
</Link>
</Grid.Column>
<Grid.Column>
<FontAwesomeIcon icon="question" size="2x"/>
<Link id="underline" to="/faqs">
<span className = "footerText">FAQs</span>
</Link>
</Grid.Column>
<Grid.Column>
<FontAwesomeIcon icon="stop" size="2x"/>
<Link id="underline" to="/Volunteer">
<span className = "footerText">Volunteers</span>
</Link>
</Grid.Column>
</Grid>
</Container>
</footer>

);
}
}
Expand Down
54 changes: 32 additions & 22 deletions client/src/Components/Design/Header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,48 @@
import React, { Component } from 'react';
import { Link } from 'react-router-dom';

//IMPORT SEMANTIC UI
import {Menu} from "semantic-ui-react";

//IMPORT OF REACT COMPONENT FONTAWESOME
import { library } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faHome, faUser, faUsers, faClock } from "@fortawesome/free-solid-svg-icons";

library.add(faHome, faUser, faUsers, faClock);



class Header extends Component {
render() {
return (
<div className="position">
<section className="hero is-primary is-bold">
<div className="hero-head">
<nav className="navbar">
<div className="navbar-end">
<div className="navbar-item">
<FontAwesomeIcon icon="home" size="2x"/><Link id="underline" style={ this.styles } to="/" className="Home">Home</Link>
</div>
<div className="navbar-item">
<FontAwesomeIcon icon="user" size="2x"/><Link id="underline" style={ this.styles } to="/logIn" className="Home">Log In</Link>
</div>
<div className="navbar-item">
<FontAwesomeIcon icon="users" size="2x"/><Link id="underline" to="/aboutus">About Us</Link>
</div>
<div className="navbar-item">
<FontAwesomeIcon icon="clock" size="2x"/><Link id="underline" style={ this.styles } to="/timeline" className="Timeline">Timeline</Link>
</div>
</div>
</nav>
</div>
</section>
</div>
<Menu inverted>
<Menu.Menu position = "right">
<Link id="underline" to="/">
<Menu.Item name = "home">
<FontAwesomeIcon icon="home" size="2x"/><span className = "navFont">Home</span>
</Menu.Item>
</Link>

<Link id="underline" to="/logIn">
<Menu.Item>
<FontAwesomeIcon icon="user" size="2x"/><span className = "navFont">Log In</span>
</Menu.Item>
</Link>

<Link id="underline" to="/aboutus">
<Menu.Item>
<FontAwesomeIcon icon="users" size="2x"/><span className = "navFont">About Us</span>
</Menu.Item>
</Link>

<Link id="underline" to="/timeline" className="Timeline">
<Menu.Item>
<FontAwesomeIcon icon="clock" size="2x"/><span className = "navFont">Timeline</span>
</Menu.Item>
</Link>
</Menu.Menu>
</Menu>
);
}
}
Expand Down
54 changes: 28 additions & 26 deletions client/src/Components/Design/LogIn.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
import React, { Component } from 'react';
import logo from "../../assets/img/logo.png";

//IMPORT AXIOS
import axios from "axios";

//IMPORT SEMANTIC-UI
import {Container, Form} from "semantic-ui-react";

var FontAwesome = require('react-fontawesome');

Expand All @@ -21,46 +26,43 @@ class LogIn extends Component {
handleSubmit(EventTarget) {
alert('LOGGED IN!!!');
EventTarget.preventDefault();

const log = {
email: this.state.email,
password: this.state.password
}

axios.post("http://localhost:3000/", {log})
.then(res =>{
console.log(res.data);
})
}

render() {
return (
<section className="hero is-primary is-fullheight">
<div className="hero-body">
<div className="container">
<div className="columns is-centered">
<div className="column is-4">
<form className="box" onSubmit={ this.handleSubmit }>
<div className="field has-text-centered">
<img src={ logo } alt="" style={{ height: 200, width: 200 }}/>
</div>
<div className="field">
<Container text>
<center><h2>Log In</h2></center>
<Form onSubmit={ this.handleSubmit }>
<Form.Field>
<label>Email</label>
<div className="control has-icons-left">
<input name="myEmail" className="input" type="email" placeholder="Enter Email"/>
<span className="icon is-small is-left">
<FontAwesome className="fa-envelope"/>
</span>
</div>
</div>
<div className="field">
</Form.Field>
<Form.Field>
<label>Password</label>
<div className="control has-icons-left">
<input name="myPassword" className="input" type="password" placeholder="Enter Password"/>
<span className="icon is-small is-left">
<FontAwesome className="fa-lock"/>
</span>
</div>
</div>
<div className="field">
</Form.Field>
<Form.Field>
<button className="button is-info is-outlined" type="submit" value="Submit">Login</button>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
</Form.Field>
</Form>
<br/>
</Container>
);
}
}
Expand Down
Loading