Skip to content

Commit 710e6ec

Browse files
TheBrockstarTheBrockstar
committed
Updated Navbar style
1 parent 3ac37ab commit 710e6ec

File tree

3 files changed

+249
-4
lines changed

3 files changed

+249
-4
lines changed

‎client/src/components/LandingPage/MapWindowStyle.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,8 @@ export const MapWindow = styled.div`
4949
.mapboxgl-control-container {
5050
width: 100%;
5151
.mapboxgl-ctrl-top-right {
52-
margin-left: Calc(10% + 10px);
53-
margin-top: 4px;
52+
margin-left: Calc(3% + 10px);
53+
margin-top: 5px;
5454
right: initial;
5555
top: initial;
5656
left: initial;

‎client/src/components/NavBar/NavBarStyles.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import styled from 'styled-components';
22

33
export const Nav = styled.div`
4-
width: 75%;
4+
width: 94%;
55
height: 50px;
66
background-color: rgba(109, 7, 26, 0.95);
77
z-index: 1;
88
position: absolute;
99
border-radius: 25px;
1010
display: flex;
1111
top: 6px;
12-
right: 15%;
12+
right: 3%;
1313
justify-content: flex-end;
1414
align-items: center;
1515
@@ -40,6 +40,7 @@ export const Icons = styled.div`
4040
margin-right: 10px;
4141
justify-content: space-between;
4242
width: 100px;
43+
cursor: pointer;
4344
.signout {
4445
img {
4546
border-radius: 50%;

‎client/src/components/SignUp/SignUp.js.orig‎

Lines changed: 244 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,244 @@
1+
import React from 'react';
2+
import firebase from 'firebase';
3+
import axios from 'axios';
4+
import { ModalContainer } from '../../styles/ModalGlobalStyle.js';
5+
import { SignModalMain } from '../../styles/SignIn_UpStyle';
6+
import { Route } from 'react-router-dom';
7+
import SignUpTypes from './Types/SignUpTypes';
8+
import SignUpUserTypes from './Types/SignUpUserTypes';
9+
import SeekerSignUp from './Forms/SeekerSignUp';
10+
import EmployerSignUp from './Forms/EmployerSignUp';
11+
12+
// axios.defaults.withCredentials = true;
13+
14+
class SignUp extends React.Component {
15+
state = {
16+
userType: '',
17+
email: '',
18+
};
19+
20+
/// ---- Auth Methods ----
21+
/// --- Firebase Auth Signup Method
22+
authorizeNewUser = (email, password, provider) => {
23+
if (provider === 'email') {
24+
firebase
25+
.auth()
26+
.createUserWithEmailAndPassword(email, password)
27+
.then(() => {
28+
console.log('User Authorized');
29+
})
30+
.catch(error => {
31+
const errorCode = error.code;
32+
const errorMessage = error.message;
33+
console.log({ errorCode, errorMessage });
34+
alert(error);
35+
});
36+
}
37+
38+
if (provider === 'google') {
39+
const provider = new firebase.auth.GoogleAuthProvider();
40+
firebase
41+
.auth()
42+
.signInWithPopup(provider)
43+
.then(() => {
44+
if (this.state.role === 'company') {
45+
this.props.history.push('/signup/employer');
46+
} else if (this.state.role === 'seeker') {
47+
this.props.history.push('/signup/seeker');
48+
} else {
49+
this.props.history.push('/signup');
50+
}
51+
})
52+
.catch(error => {
53+
const errorCode = error.code;
54+
const errorMessage = error.message;
55+
console.log({ errorCode, errorMessage });
56+
alert(error);
57+
<<<<<<< HEAD
58+
})
59+
}
60+
61+
if (provider === 'github') {
62+
const provider = new firebase.auth.GithubAuthProvider();
63+
firebase
64+
.auth()
65+
.signInWithPopup(provider)
66+
.then(() => {
67+
if (this.state.role === 'company') {
68+
this.props.history.push('/signup/employer')
69+
} else if (this.state.role === 'seeker') {
70+
this.props.history.push('/signup/seeker')
71+
} else {
72+
this.props.history.push('/signup')
73+
}
74+
})
75+
.catch(error => {
76+
const errorCode = error.code;
77+
const errorMessage = error.message;
78+
console.log({ errorCode, errorMessage });
79+
alert(error);
80+
})
81+
}
82+
}
83+
=======
84+
});
85+
}
86+
};
87+
>>>>>>> 105c239076c45eadee654c468036112a06eae76c
88+
89+
/// ---- Add New User To Database ----
90+
signUpNewUser = (
91+
e,
92+
type,
93+
email,
94+
phoneNumber,
95+
identifier1,
96+
identifier2,
97+
jobTitle,
98+
street,
99+
city,
100+
state,
101+
zipCode
102+
) => {
103+
// Get idToken of Authorized User
104+
firebase
105+
.auth()
106+
.currentUser.getIdToken(true)
107+
.then(idToken => {
108+
const headers = { authorization: idToken };
109+
// Construct Location Object
110+
let location = {};
111+
let accessToken =
112+
'pk.eyJ1IjoibG5kdWJvc2UiLCJhIjoiY2pvNmF1ZnowMGo3MDNrbmw4ZTVmb2txMyJ9.UpxjYyEOBnCJjw_qE_N8Kw';
113+
let addressString = street.concat(' ', city, ' ', state, ' ', zipCode);
114+
let mapboxGeocodingAPIURL = `https://api.mapbox.com/geocoding/v5/mapbox.places/${addressString}.json?access_token=${accessToken}`;
115+
116+
// Get Location Coordinates and Return Promise
117+
axios
118+
.get(mapboxGeocodingAPIURL)
119+
.then(response => {
120+
location = {
121+
street: street,
122+
city: city,
123+
state: state,
124+
zip: zipCode,
125+
coordinates: response.data.features[0].geometry.coordinates,
126+
};
127+
console.log({ location });
128+
129+
// --- Determine User Type ---
130+
let user = {
131+
email,
132+
phoneNumber,
133+
location,
134+
};
135+
136+
// Construct Object for Seeker Type Users
137+
if (type === 'seekers') {
138+
user = {
139+
...user,
140+
firstName: identifier1,
141+
lastName: identifier2,
142+
jobTitle,
143+
};
144+
145+
// Construct Object for Employer Type Users
146+
} else if (type === 'companies') {
147+
user = {
148+
...user,
149+
companyName: identifier1,
150+
companyWebsite: identifier2,
151+
};
152+
} else {
153+
return console.log('Invalid user type!');
154+
}
155+
// Create User In Database
156+
axios
157+
.post(
158+
`https://intense-stream-29923.herokuapp.com/api/database/${type}/addUser`,
159+
{ ...user },
160+
{ headers }
161+
)
162+
.then(response => {
163+
alert('Your Account Has Been Created');
164+
firebase
165+
.auth()
166+
.signInWithCustomToken(response.data.customToken)
167+
.then(() => this.props.history.push('/'))
168+
.catch(error => {
169+
const errorCode = error.code;
170+
const errorMessage = error.message;
171+
console.log({ errorCode, errorMessage });
172+
alert(error);
173+
});
174+
})
175+
.catch(error => console.log(error));
176+
})
177+
.catch(error => console.log(error));
178+
})
179+
.catch(error => console.log(error));
180+
};
181+
182+
// Sets the user type so that the correct user type form is navigated to after signing up with Google Auth/3rd Party Auth.
183+
setUserType = type => {
184+
this.setState({ userType: type });
185+
this.props.history.push({
186+
pathname: '/signup/method',
187+
state: { userType: type },
188+
});
189+
};
190+
191+
componentDidMount() {
192+
this.setState({ ...this.props.location.state });
193+
}
194+
195+
render() {
196+
// console.log('%cstate', 'color: blue', this.state);
197+
return (
198+
<ModalContainer data-type="modal-container">
199+
<SignModalMain width="21%">
200+
{/*'User Types' Component: User selects whether they are an employer or a seeker.*/}
201+
<Route
202+
exact
203+
path="/signup"
204+
render={props => (
205+
<SignUpUserTypes {...props} setUserType={this.setUserType} />
206+
)}
207+
/>
208+
209+
{/*'Sign Up Types' Component: User selects the method that they would like to use for authentication (email + password, google auth, etc.).*/}
210+
<Route
211+
exact
212+
path="/signup/method"
213+
render={props => (
214+
<SignUpTypes
215+
{...props}
216+
userType={this.state.userType}
217+
currentSignedInUser={this.props.currentSignedInUser}
218+
authorizeNewUser={this.authorizeNewUser}
219+
/>
220+
)}
221+
/>
222+
223+
{/*'Seeker Signup Form' Component: Creates a seeker in the database for the user.*/}
224+
<Route
225+
path="/signup/seeker"
226+
render={props => (
227+
<SeekerSignUp {...props} signUpNewUser={this.signUpNewUser} />
228+
)}
229+
/>
230+
231+
{/*'Employer Signup Form' Component: Creates a seeker in the database for the user.*/}
232+
<Route
233+
path="/signup/employer"
234+
render={props => (
235+
<EmployerSignUp {...props} signUpNewUser={this.signUpNewUser} />
236+
)}
237+
/>
238+
</SignModalMain>
239+
</ModalContainer>
240+
);
241+
}
242+
}
243+
244+
export default SignUp;

0 commit comments

Comments
 (0)