diff --git a/client/src/component/Navigation-Bar/index.jsx b/client/src/component/Navigation-Bar/index.jsx index 1e47f21..683b312 100644 --- a/client/src/component/Navigation-Bar/index.jsx +++ b/client/src/component/Navigation-Bar/index.jsx @@ -1,5 +1,5 @@ import React from "react"; -//import { Link } from "react-router-dom"; +import { Link } from "react-router-dom"; import "./navigation-bar.scss"; @@ -7,9 +7,8 @@ class NavigationBar extends React.Component { render() { const isMobile = window.innerWidth <= 500; if (isMobile) { - return (null); - } - else { + return null; + } else { return ( ); diff --git a/client/src/component/Navigation-Bar/navigation-bar.scss b/client/src/component/Navigation-Bar/navigation-bar.scss index d495661..dd04e32 100644 --- a/client/src/component/Navigation-Bar/navigation-bar.scss +++ b/client/src/component/Navigation-Bar/navigation-bar.scss @@ -25,6 +25,7 @@ $btn-colors: ( width: 12%; font-size: 2%; float: right; + .link { /* This adjusts the React Router links */ @@ -33,7 +34,8 @@ $btn-colors: ( text-decoration: none; /* removes underscores of the links */ /* Extra small devices (phones, 600px and down) */ @media only screen and (max-width: 600px) { - display: none; + display: none; + } } } @@ -55,31 +57,33 @@ $btn-colors: ( @media only screen and (max-width: 600px) { /* Adjusting position of the banner to the top left corner */ width: 80px; - right: 10px; + right: 10px; } /* Small devices (portrait tablets and large phones, 600px and up) */ @media only screen and (min-width: 600px) { /* Adjusting position of the banner to the top left corner */ - width: 100px; + width: 100px; + } /* Medium devices (landscape tablets, 768px and up) */ @media only screen and (min-width: 768px) { /* Adjusting position of the banner to the top left corner */ - width: 130px; + width: 130px; } /* Large devices (laptops/desktops, 992px and up) */ @media only screen and (min-width: 992px) { /* Adjusting position of the banner to the top left corner */ - width: 150px; + width: 150px; } /* Extra large devices (large laptops and desktops, 1200px and up) */ @media only screen and (min-width: 1200px) { /* Adjusting position of the banner to the top left corner */ - width: 150px; + width: 150px; + } } @@ -100,6 +104,7 @@ $btn-colors: ( opacity: .999; border-radius: 3px; @extend .animate; + } .btn-border-o { @@ -113,6 +118,8 @@ $btn-colors: ( border-radius: 16px; height: 40px; padding: 5px; + overflow: hidden; + } &:before, diff --git a/client/src/pages/CheckIn/checkin.scss b/client/src/pages/CheckIn/checkin.scss new file mode 100644 index 0000000..aea0a5a --- /dev/null +++ b/client/src/pages/CheckIn/checkin.scss @@ -0,0 +1,89 @@ +#CheckIn{ + background-image: linear-gradient(#8d78a1, #b69087, #d15f2a); + overflow: hidden; + padding-top: 80px; + padding-bottom: 80px; + display: flex; + flex-direction: column; + align-items: center; + + +#body { + background-image: linear-gradient(#8d78a1, #b69087, #d15f2a); + color: white; + padding: 10%; + font-family: "Moon", bold; +} + + +#CheckIn-title{ + color: #D15F2A; + font-size: 20px; + position: relative; + } + + #CheckIn-container { + display: block; + border-radius: 5%; + background-color: white; // for debugging + width: 80vh; + position: relative; + text-align: center; + padding-bottom: 10px; + margin: 5% 0% 0% 0%; + + + } + #CheckIn-logo { + margin-top: 5%; + max-width: 40%; + position: relative; + bottom: 20%; + left: 30%; + } + #email{ + position: relative; + right: 10%; + } + + input[type=email] { + width: 80%; + padding: 15px; + font-size: 15px; + margin: 15px 0 22px 0; + display: inline-block; + background: rgb(204, 203, 203); + cursor: auto; + border-style: inset; + border-radius: 5px; + position: relative; + overflow:hidden; + border-width: 10px; + border-color: black; + background: transparent; + text-align: left; + } + + button { + width: 270px; + background-color: #9a544c; + padding: 10px; + color: white; + border-radius: 5px; + cursor: pointer; + font-size: 24px; + transition-duration: 0.25s; + } + +#CheckIn-text{ + padding-top: 10px; /* brings sign-up lower and shrinks down text */ + font-size: 55px; + font-weight: bold; + +} + +.CheckIn-link{ + margin-left: 5px; /* Adds a space between link and text */ +} + +} diff --git a/client/src/pages/CheckIn/index.jsx b/client/src/pages/CheckIn/index.jsx new file mode 100644 index 0000000..823022d --- /dev/null +++ b/client/src/pages/CheckIn/index.jsx @@ -0,0 +1,93 @@ +import React, { Component } from "react"; +import axios from "axios"; +import { ToastContainer, toast } from "react-toastify"; +import "react-toastify/dist/ReactToastify.css"; + +import LOGO from "../../assets/Images/logo.png"; +import "./checkin.scss"; + +class CheckIn extends Component { + constructor(props) { + super(props); + this.state = { + email: "" + }; + + this.handleSubmit = this.handleSubmit.bind(this); + } + + successToast = () => { + toast("Successfully Checked In!", { + position: toast.POSITION.TOP_CENTER, + className: "toast-success", + autoClose: 8000, + draggable: false + }); + }; + + errorToast = () => { + toast.error( + "You have not signed up before, please go to the other table and sign up before checking in!", + { + position: toast.POSITION_TOP_CENTER, + className: "toast-error", + draggable: false + } + ); + }; + + handleSubmit = event => { + event.preventDefault(); + + axios + .get("http://localhost:3852/api/attendees", { + params: { + email: this.state.email + } + }) + .then(async response => { + if (response.data.status === "Application Found!") { + await this.successToast(); + await axios.patch("http://localhost:3852/api/attendees", { + ...response.data.user, + status: "checked in" + }) + } else { + this.errorToast(); + } + }) + .catch(this.errorToast); + }; + + render() { + return ( +
+
+
+ +
Check-In!
+
+
+
+ { + this.setState({ email: event.target.value }); + }} + /> +
+ +
+
+ +
+ ); + } +} + +export default CheckIn; diff --git a/client/src/pages/SignUp/index.jsx b/client/src/pages/SignUp/index.jsx index 50b973e..1c03d92 100644 --- a/client/src/pages/SignUp/index.jsx +++ b/client/src/pages/SignUp/index.jsx @@ -23,7 +23,7 @@ class SignUp extends Component { major: "", year: "", schoolStanding: "", - graduationYear: 2020, + graduationYear: 2021, dietaryRestrictions: "", specialNeeds: "", firstHackathon: true, @@ -331,14 +331,12 @@ class SignUp extends Component { const user = this.createUser(this.state); - console.log("before posting to DB: ", user); - this.setState({ loader: "" }); axios - .post("http://hackmerced.io/api/attendees", user) + .post("http://localhost:3852/api/attendees", user) .then(response => { if (response.data.submitted === "Application successfully submitted!") { this.successToast(); @@ -350,8 +348,6 @@ class SignUp extends Component { } }) .catch(this.errorToast); - - // window.location.replace("http://hackmerced.io"); }; render() { @@ -415,6 +411,7 @@ class SignUp extends Component { min={17} max={100} onChange={this.handleAgeChange} + defaultValue={18} >
@@ -475,6 +472,7 @@ class SignUp extends Component {