-
Notifications
You must be signed in to change notification settings - Fork 15
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #167 from codefordenver/152-add-auth-state-handlin…
…g-to-frontend 152 add auth state handling to frontend
- Loading branch information
Showing
10 changed files
with
327 additions
and
120 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| import React from 'react'; | ||
|
|
||
| const AuthContext = React.createContext({ authenticated: false, token: null }); | ||
|
|
||
| export default AuthContext; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,52 +1,101 @@ | ||
| import React, { useState } from 'react'; | ||
| import Dropdown from '../globalStyles/Dropdown'; | ||
| import BasicInput from '../BasicInput'; | ||
| import RequestService from '../../util/RequestService'; | ||
| import AuthContext from '../../AuthContext'; | ||
| import './LoginManager.css'; | ||
|
|
||
| import ideaLABlogo from './../../ideaLABlogo.png'; | ||
|
|
||
| const LoginManager = () => { | ||
| const [email, setEmail] = useState(''); | ||
| const [password, setPassword] = useState(''); | ||
| const locations = [ | ||
| 'Denver Central Library', | ||
| 'Blair-Caldwell', | ||
| 'Ford-Warren', | ||
| 'Ross-Cherry', | ||
| 'Park Hill' | ||
| ] | ||
| const [location, setLocation] = useState(locations[0]); | ||
|
|
||
| const onSubmit = e => { | ||
| e.preventDefault(); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className='container'> | ||
| <img src={ideaLABlogo} alt='ideaLABLogo' /> | ||
| <h4>3D Printing and Upload Queue</h4> | ||
| <h2>Sign In</h2> | ||
| <form onSubmit={e => onSubmit(e)}> | ||
| <input | ||
| name='email' | ||
| placeholder='email' | ||
| autoComplete='off' | ||
| autoFocus | ||
| value={email} | ||
| onChange={e => setEmail(e.target.value)} | ||
| /> | ||
| <Dropdown options={locations} optionsName={'locations'} currentValue={location} /> | ||
| <input | ||
| name='password' | ||
| placeholder='password' | ||
| type='password' | ||
| autoComplete='off' | ||
| value={password} | ||
| onChange={e => setPassword(e.target.value)} | ||
| /> | ||
| <button type='submit'>SIGN IN</button> | ||
| </form> | ||
| </div> | ||
| ); | ||
| const LoginManager = props => { | ||
| const [errors, setErrors] = useState({}); | ||
| const [username, setUsername] = useState(''); | ||
| const [password, setPassword] = useState(''); | ||
| const locations = [ | ||
| 'Denver Central Library', | ||
| 'Blair-Caldwell', | ||
| 'Ford-Warren', | ||
| 'Ross-Cherry', | ||
| 'Park Hill', | ||
| ]; | ||
| const [location, setLocation] = useState(locations[0]); | ||
|
|
||
| function thenCallback(callbacks) { | ||
| return function actualCallback(response) { | ||
| const token = response.headers ? response.headers.authorization : ''; | ||
| if (token) { | ||
| callbacks.setToken(token); | ||
| callbacks.setAuthenticated(true); | ||
| RequestService.requestState.token = token; | ||
| } else { | ||
| // Something should happen | ||
| callbacks.setAuthenticated(false); | ||
| setErrors({ | ||
| form: 'Unable to log in with the information provided', | ||
| }); | ||
| } | ||
| }; | ||
| } | ||
|
|
||
| const onSubmit = (e, callbacks) => { | ||
| e.preventDefault(); | ||
|
|
||
| const payload = { | ||
| username: username, | ||
| password: password, | ||
| }; | ||
|
|
||
| RequestService.login( | ||
| payload, | ||
| thenCallback(callbacks), | ||
| thenCallback(callbacks), | ||
| ); | ||
| }; | ||
|
|
||
| return ( | ||
| <AuthContext.Consumer> | ||
| {context => { | ||
| return ( | ||
| <div className="container"> | ||
| {context.authenticated} | ||
| <img src={ideaLABlogo} alt="ideaLABLogo" /> | ||
| <h4>3D Printing and Upload Queue</h4> | ||
| <h2>Sign In</h2> | ||
| <form | ||
| onSubmit={e => { | ||
| const callbacks = { | ||
| setToken: context.setToken, | ||
| setAuthenticated: context.setAuthenticated, | ||
| }; | ||
| onSubmit(e, callbacks); | ||
| }} | ||
| > | ||
| <span>{errors.form ? errors.form : null}</span> | ||
| <BasicInput | ||
| name="username" | ||
| placeHolder="username" | ||
| changeHandler={setUsername} | ||
| error={errors.username} | ||
| /> | ||
| <Dropdown | ||
| options={locations} | ||
| optionsName={'locations'} | ||
| currentValue={location} | ||
| /> | ||
| <BasicInput | ||
| name="password" | ||
| placeHolder="password" | ||
| type="password" | ||
| changeHandler={setPassword} | ||
| error={errors.password} | ||
| /> | ||
| <button type="submit">SIGN IN</button> | ||
| </form> | ||
| </div> | ||
| ); | ||
| }} | ||
| </AuthContext.Consumer> | ||
| ); | ||
| }; | ||
|
|
||
| export default LoginManager; |
Oops, something went wrong.