Implemented backend routes for signin and register endpoints

dhafer94 · Jan 2, 2022 · 286cfd1 · 286cfd1
1 parent 8308b8e
commit 286cfd1
Show file tree

Hide file tree

Showing 3 changed files with 195 additions and 95 deletions.
diff --git a/src/App.js b/src/App.js
@@ -27,9 +27,26 @@ class App extends Component {
 			box: {},
 			route: 'signin',
 			isSignedIn: false,
+			user: {
+				id: '',
+				name: '',
+				email: '',
+				entries: 0,
+				joined: '',
+			}
 		};
 	}
 
+	loadUser = (data) => {
+		this.setState({
+			id: data.is,
+			name: data.name,
+			email: data.email,
+			entries: data.entries,
+			joined: data.joined,
+		});
+	};
+
 	calculateFaceLocation = (data) => {
 		const clarifaiFace =
 			data.outputs[0].data.regions[0].region_info.bounding_box;
@@ -107,7 +124,7 @@ class App extends Component {
 				) : route === 'signin' ? (
 					<Signin onRouteChange={this.onRouteChange} />
 				) : (
-					<Register onRouteChange={this.onRouteChange} />
+					<Register loadUser={this.loadUser} onRouteChange={this.onRouteChange} />
 				)}
 			</div>
 		);

diff --git a/src/Components/Register/Register.js b/src/Components/Register/Register.js
@@ -1,58 +1,103 @@
 import React from 'react';
 
-const Register = ({ onRouteChange }) => {
-	return (
-		<article className='br3 ba b--black-10 mv4 w-100 w-50-m w-25-l mw6 shadow-5 center'>
-			<main className='pa4 black-80'>
-				<div className='measure'>
-					<fieldset id='sign_up' className='ba b--transparent ph0 mh0'>
-						<legend className='f1 fw6 ph0 mh0'>Register</legend>
-						<div className='mt3'>
-							<label className='db lh-copy f5' htmlFor='name'>
-								Name
-							</label>
-							<input
-								className='pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100'
-								type='text'
-								name='name'
-								id='name'
-							/>
-						</div>
-						<div className='mt3'>
-							<label className='db lh-copy f5' htmlFor='email-address'>
-								Email
-							</label>
-							<input
-								className='pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100'
-								type='email'
-								name='email-address'
-								id='email-address'
-							/>
-						</div>
-						<div className='mv3'>
-							<label className='db lh-copy f5' htmlFor='password'>
-								Password
-							</label>
+class Register extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			email: '',
+			password: '',
+			name: ''
+		};
+	}
+	onNameChange = (evt) => {
+		this.setState({ name: evt.target.value });
+	};
+	onEmailChange = (evt) => {
+		this.setState({ email: evt.target.value });
+	};
+	onPasswordChange = (evt) => {
+		this.setState({ password: evt.target.value });
+	};
+
+	onSubmitSignIn = () => {
+		fetch('http://localhost:3001/register', {
+			method: 'post',
+			headers: { 'content-Type': 'application/json' },
+			body: JSON.stringify({
+				email: this.state.email,
+				password: this.state.password,
+				name: this.state.name
+			})
+		})
+			.then(res => res.json())
+			.then(user => {
+				if (user) {
+					this.props.loadUser(user);
+					this.props.onRouteChange('home');
+
+				}
+			});
+	};
+
+
+	render() {
+		const { onRouteChange } = this.props;
+		return (
+			<article className='br3 ba b--black-10 mv4 w-100 w-50-m w-25-l mw6 shadow-5 center' >
+				<main className='pa4 black-80'>
+					<div className='measure'>
+						<fieldset id='sign_up' className='ba b--transparent ph0 mh0'>
+							<legend className='f1 fw6 ph0 mh0'>Register</legend>
+							<div className='mt3'>
+								<label className='db lh-copy f5' htmlFor='name'>
+									Name
+								</label>
+								<input
+									onChange={this.onNameChange}
+									className='pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100'
+									type='text'
+									name='name'
+									id='name'
+								/>
+							</div>
+							<div className='mt3'>
+								<label className='db lh-copy f5' htmlFor='email-address'>
+									Email
+								</label>
+								<input
+									onChange={this.onEmailChange}
+									className='pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100'
+									type='email'
+									name='email-address'
+									id='email-address'
+								/>
+							</div>
+							<div className='mv3'>
+								<label className='db lh-copy f5' htmlFor='password'>
+									Password
+								</label>
+								<input
+									onChange={this.onPasswordChange}
+									className='b pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100'
+									type='password'
+									name='password'
+									id='password'
+								/>
+							</div>
+						</fieldset>
+						<div>
 							<input
-								className='b pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100'
-								type='password'
-								name='password'
-								id='password'
+								className='b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib'
+								type='submit'
+								value='Sign in'
+								onClick={this.onSubmitSignIn}
 							/>
 						</div>
-					</fieldset>
-					<div>
-						<input
-							className='b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib'
-							type='submit'
-							value='Sign in'
-							onClick={() => onRouteChange('home')}
-						/>
 					</div>
-				</div>
-			</main>
-		</article>
-	);
+				</main>
+			</article>
+		);
+	}
 };
 
 export default Register;
diff --git a/src/Components/Signin/Signin.js b/src/Components/Signin/Signin.js
@@ -1,54 +1,92 @@
 import React from 'react';
 
-const SignIn = ({ onRouteChange }) => {
-	return (
-		<article className='br3 ba b--black-10 mv4 w-100 w-50-m w-25-l mw6 shadow-5 center'>
-			<main className='pa4 black-80'>
-				<div className='measure'>
-					<fieldset id='sign_up' className='ba b--transparent ph0 mh0'>
-						<legend className='f1 fw6 ph0 mh0'>Sign In</legend>
-						<div className='mt3'>
-							<label className='db lh-copy f5' htmlFor='email-address'>
-								Email
-							</label>
+class Signin extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			signInEmail: '',
+			signInPassword: '',
+		};
+	}
+
+	onEmailChange = (evt) => {
+		this.setState({ signInEmail: evt.target.value });
+	};
+	onPasswordChange = (evt) => {
+		this.setState({ signInPassword: evt.target.value });
+	};
+
+	onSubmitSignIn = () => {
+		fetch('http://localhost:3001/signin', {
+			method: 'post',
+			headers: { 'content-Type': 'application/json' },
+			body: JSON.stringify({
+				email: this.state.signInEmail,
+				password: this.state.signInPassword,
+			})
+		})
+			.then(res => res.json())
+			.then(data => {
+				if (data === 'success') {
+					this.props.onRouteChange('home');
+				}
+			});
+	};
+
+	render() {
+		const { onRouteChange } = this.props;
+		return (
+			<article className='br3 ba b--black-10 mv4 w-100 w-50-m w-25-l mw6 shadow-5 center' >
+				<main className='pa4 black-80'>
+					<div className='measure'>
+						<fieldset id='sign_up' className='ba b--transparent ph0 mh0'>
+							<legend className='f1 fw6 ph0 mh0'>Sign In</legend>
+							<div className='mt3'>
+								<label className='db lh-copy f5' htmlFor='email-address'>
+									Email
+								</label>
+								<input
+									onChange={this.onEmailChange}
+									className='pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100'
+									type='email'
+									name='email-address'
+									id='email-address'
+								/>
+							</div>
+							<div className='mv3'>
+								<label className='db lh-copy f5' htmlFor='password'>
+									Password
+								</label>
+								<input
+									onChange={this.onPasswordChange}
+									className='b pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100'
+									type='password'
+									name='password'
+									id='password'
+								/>
+							</div>
+						</fieldset>
+						<div>
 							<input
-								className='pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100'
-								type='email'
-								name='email-address'
-								id='email-address'
+								className='b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib'
+								type='submit'
+								value='Sign in'
+								onClick={this.onSubmitSignIn}
 							/>
 						</div>
-						<div className='mv3'>
-							<label className='db lh-copy f5' htmlFor='password'>
-								Password
-							</label>
-							<input
-								className='b pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100'
-								type='password'
-								name='password'
-								id='password'
-							/>
+						<div className='lh-copy mt3'>
+							<p
+								onClick={() => onRouteChange('register')}
+								className='b f6 link dim black db pointer'>
+								Register
+							</p>
 						</div>
-					</fieldset>
-					<div>
-						<input
-							className='b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib'
-							type='submit'
-							value='Sign in'
-							onClick={() => onRouteChange('home')}
-						/>
-					</div>
-					<div className='lh-copy mt3'>
-						<p
-							onClick={() => onRouteChange('register')}
-							className='b f6 link dim black db pointer'>
-							Register
-						</p>
 					</div>
-				</div>
-			</main>
-		</article>
-	);
+				</main>
+			</article>
+		);
+
+	}
 };
 
-export default SignIn;
+export default Signin;