Skip to content

Commit

Permalink
Fixed bug in tokens and uploading files
Browse files Browse the repository at this point in the history 
* Token management replaced with typical session storage
* Ensure that file display on change handler is seperate to uploading files

Signed-off-by: Morgan Davies <[email protected]>
  • Loading branch information
Morgan Davies committed May 14, 2021
1 parent af85bfa commit 459a59e
Show file tree
Hide file tree
Showing 9 changed files with 100 additions and 170 deletions.
22 changes: 2 additions & 20 deletions src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import DashboardComponent from './components/views/dashboard'
import EditComponent from './components/views/edit'
import LogoutComponent from './components/views/logout'
import ForgotComponent from './components/views/forgot'
import { UsernameToken, UserExistsToken, AuthenticatedToken } from './components/token'
import { UsernameToken } from './components/token'

import './styles/App.css'

Expand All @@ -15,68 +15,50 @@ import { BrowserRouter, Route, Switch } from 'react-router-dom'

export default function App() {
const { username, setUsername } = UsernameToken()
const { userExists, setUserExists } = UserExistsToken()
const { authenticated, setAuthenticated } = AuthenticatedToken()

return (
<BrowserRouter>
<div className="app">
<div className="nav-container">
<NavbarComponent username={username} authenticated={authenticated}/>
<NavbarComponent username={username} />
</div>
<div className="main-container">
<Switch>
<Route exact path="/">
<UserComponent
setUsername={setUsername}
setUserExists={setUserExists}
authenticated={authenticated}
/>
</Route>
<Route path="/register">
<AuthenticateComponent
username={username}
userExists={userExists}
setUserExists={setUserExists}
authenticated={authenticated}
setAuthenticated={setAuthenticated}
registering={true}
/>
</Route>
<Route path="/login">
<AuthenticateComponent
username={username}
userExists={userExists}
setUserExists={setUserExists}
authenticated={authenticated}
setAuthenticated={setAuthenticated}
registering={false}
/>
</Route>
<Route path="/dashboard">
<DashboardComponent
username={username}
authenticated={authenticated}
/>
</Route>
<Route path="/edit">
<EditComponent
username={username}
authenticated={authenticated}
/>
</Route>
<Route path="/logout">
<LogoutComponent
username={username}
authenticated={authenticated}
setAuthenticated={setAuthenticated}
/>
</Route>
<Route path="/forgot">
<ForgotComponent
username={username}
authenticated={authenticated}
setAuthenticated={setAuthenticated}
/>
</Route>
</Switch>
Expand Down
38 changes: 0 additions & 38 deletions src/components/token.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,44 +19,6 @@ export function UsernameToken() {
}
}

export function UserExistsToken() {
const getUserExists = () => {
const existsToken = JSON.parse(localStorage.getItem('exists'))
return existsToken
}

const [exists, setUserExists] = useState(getUserExists())

const saveUserExists = existsToken => {
localStorage.setItem('exists', JSON.stringify(existsToken))
setUserExists(existsToken)
}

return {
setUserExists: saveUserExists,
exists
}
}

export function AuthenticatedToken() {
const getAuthenticated = () => {
const authToken = JSON.parse(localStorage.getItem('authenticated'))
return authToken
}

const [authenticated, setAuthenticated] = useState(getAuthenticated())

const saveAuthenticated = authToken => {
localStorage.setItem('authenticated', JSON.stringify(authToken))
setAuthenticated(authToken)
}

return {
setAuthenticated: saveAuthenticated,
authenticated
}
}

export function ClearToken(tokenName) {
localStorage.removeItem(tokenName)
}
Expand Down
69 changes: 30 additions & 39 deletions src/components/views/authenticate.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,6 @@ import "../../styles/authenticate.css"

export default function AuthenticateComponent({
username,
userExists,
setUserExists,
authenticated,
setAuthenticated,
registering
}) {
const [loading, setLoading] = useState(false)
Expand Down Expand Up @@ -155,14 +151,14 @@ export default function AuthenticateComponent({
})
}

const handleLockChange = async (files) => {
const handleLockChange = (files) => {
setLockFiles(files)
await generateFileList(files, null)
generateFileList(files, null)
}

const handleUnlockChange = async (files) => {
const handleUnlockChange = (files) => {
setUnlockFiles(files)
await generateFileList(null, files)
generateFileList(null, files)
}

const handleSubmit = async e => {
Expand All @@ -174,10 +170,10 @@ export default function AuthenticateComponent({
const userCreateRes = await createUser()
setLoading(false)

// If successful at creating user, move to login
// If successful at creating user, move to dashboard
if (userCreateRes === true) {
setUserExists(userCreateRes)
setAuthenticated(true)
localStorage.setItem('exists', true)
localStorage.setItem('authenticated', true)
window.location.href = "/dashboard"
} else {
// If unsuccessful, return to default registration with error alert
Expand All @@ -195,10 +191,9 @@ export default function AuthenticateComponent({

// If successful at logging in user, move to dashboard
if (userLoginRes === true) {
setAuthenticated(true)
localStorage.setItem('authenticated', true)
window.location.href = "/dashboard"
} else if (userLoginRes.CODE === 10) {
setAuthenticated(false)
alert(`Failed to login with given face or unlock credentials\n${userLoginRes.MESSAGE}`)
window.location.href = "/login"
} else {
Expand Down Expand Up @@ -263,13 +258,13 @@ export default function AuthenticateComponent({
<Form.File.Label>Chose at least 4 gestures as your lock gesture combination (OPTIONAL)</Form.File.Label>
<Form.File.Input multiple/>
</Form.File>
<Form.Check
type="checkbox"
label="Show Lock Combination"
defaultChecked={showLockDisplay}
onChange={() => setShowLockDisplay(!showLockDisplay)}
/>
</Form.Group>
<Form.Check
type="checkbox"
label="Show Lock Combination"
defaultChecked={showLockDisplay}
onChange={() => setShowLockDisplay(!showLockDisplay)}
/>
<Form.Group onChange={(e) => handleUnlockChange(e.target.files)}>
<Form.File
id="unlock_gesture_form"
Expand All @@ -278,13 +273,13 @@ export default function AuthenticateComponent({
<Form.File.Label>Chose at least 4 other gestures as your unlock gesture combination</Form.File.Label>
<Form.File.Input multiple/>
</Form.File>
<Form.Check
type="checkbox"
label="Show Unlock Combination"
defaultChecked={showUnlockDisplay}
onChange={() => setShowUnlockDisplay(!showUnlockDisplay)}
/>
</Form.Group>
<Form.Check
type="checkbox"
label="Show Unlock Combination"
defaultChecked={showUnlockDisplay}
onChange={() => setShowUnlockDisplay(!showUnlockDisplay)}
/>
</div>
)
} else {
Expand All @@ -310,13 +305,13 @@ export default function AuthenticateComponent({
<Form.File.Label>Please enter your unlock combination</Form.File.Label>
<Form.File.Input multiple/>
</Form.File>
<Form.Check
type="checkbox"
label="Show Unlock Combination"
defaultChecked={showUnlockDisplay}
onChange={() => setShowUnlockDisplay(!showUnlockDisplay)}
/>
</Form.Group>
<Form.Check
type="checkbox"
label="Show Unlock Combination"
defaultChecked={showUnlockDisplay}
onChange={() => setShowUnlockDisplay(!showUnlockDisplay)}
/>
<Button variant="danger" href="/forgot">Forgotten Unlock Combination</Button>
</div>
)
Expand Down Expand Up @@ -345,13 +340,13 @@ export default function AuthenticateComponent({
}
}

if (authenticated) {
if (localStorage.getItem('authenticated')) {
window.location.href = "/dashboard"
} else if (!username || !localStorage.getItem("exists")) {
} else if (!username) {
window.location.href = "/"
} else if (localStorage.getItem("exists") === 'true' && window.location.pathname === "/register") {
} else if (localStorage.getItem('exists') === 'true' && window.location.pathname === "/register" && !localStorage.getItem('authenticated')) {
window.location.href = "/login"
} else if (localStorage.getItem("exists") === 'false' && window.location.pathname === "/login") {
} else if (localStorage.getItem('exists') === 'false' && window.location.pathname === "/login" && !localStorage.getItem('authenticated')) {
window.location.href = "/register"
} else {
if (navigator.mediaDevices.getUserMedia !== null) {
Expand Down Expand Up @@ -392,9 +387,5 @@ export default function AuthenticateComponent({

AuthenticateComponent.propTypes = {
username: PropTypes.string,
userExists: PropTypes.bool,
setUserExists: PropTypes.func,
authenticated: PropTypes.bool,
setAuthenticated: PropTypes.func,
registering: PropTypes.bool.isRequired
}
4 changes: 2 additions & 2 deletions src/components/views/dashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import '../../styles/dashboard.css'

import { ClearTokens } from '../token'

export default function DashboardComponent({ username, authenticated }) {
export default function DashboardComponent({ username }) {
const [deleting, setDeleting] = useState(false)

const handleDeleteClick = async e => {
Expand Down Expand Up @@ -51,7 +51,7 @@ export default function DashboardComponent({ username, authenticated }) {
}
}

if (!authenticated) {
if (!localStorage.getItem('authenticated')) {
window.location.href = "/"
} else {
if (deleting) {
Expand Down
51 changes: 26 additions & 25 deletions src/components/views/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import Webcam from 'react-webcam'

import { uploadFiles, uploadEncoded, checkCombination } from '../middleware'

export default function EditComponent({ username, authenticated }) {
export default function EditComponent({ username }) {
const [loading, setLoading] = useState(false)
const [streaming, setStreaming] = useState(false)
const [editFace, setEditFace] = useState(false)
Expand Down Expand Up @@ -171,32 +171,34 @@ export default function EditComponent({ username, authenticated }) {
<Form.File.Label>Lock Gesture Combination</Form.File.Label>
<Form.File.Input multiple/>
</Form.File>
<Form.Check
type="checkbox"
label="Show Lock Combination"
defaultChecked={false}
onChange={() => setShowLockDisplay(!showLockDisplay)}
/>
</Form.Group>
<Form.Check
type="checkbox"
label="Show Lock Combination"
defaultChecked={false}
onChange={() => setShowLockDisplay(!showLockDisplay)}
/>
</fieldset>
)
} else {
return (
<Form.Group onChange={(e) => handleLockChange(e.target.files)}>
<Form.File
id="lock_gesture_form"
type="file"
>
<Form.File.Label>Lock Gesture Combination</Form.File.Label>
<Form.File.Input multiple/>
</Form.File>
<div>
<Form.Group onChange={(e) => handleLockChange(e.target.files)}>
<Form.File
id="lock_gesture_form"
type="file"
>
<Form.File.Label>Lock Gesture Combination</Form.File.Label>
<Form.File.Input multiple/>
</Form.File>
</Form.Group>
<Form.Check
type="checkbox"
label="Show Lock Combination"
defaultChecked={showLockDisplay}
onChange={() => setShowLockDisplay(!showLockDisplay)}
/>
</Form.Group>
</div>
)
}
}
Expand Down Expand Up @@ -232,7 +234,7 @@ export default function EditComponent({ username, authenticated }) {
}
}

if (!authenticated) {
if (!localStorage.getItem('authenticated')) {
window.location.href = "/"
} else {
if (navigator.mediaDevices.getUserMedia !== null && editFace === true) {
Expand Down Expand Up @@ -286,13 +288,13 @@ export default function EditComponent({ username, authenticated }) {
<Form.File.Label>Unlock Gesture Combination</Form.File.Label>
<Form.File.Input multiple/>
</Form.File>
<Form.Check
type="checkbox"
label="Show Unlock Combination"
defaultChecked={showUnlockDisplay}
onChange={() => setShowUnlockDisplay(!showUnlockDisplay)}
/>
</Form.Group>
<Form.Check
type="checkbox"
label="Show Unlock Combination"
defaultChecked={showUnlockDisplay}
onChange={() => setShowUnlockDisplay(!showUnlockDisplay)}
/>
{getButton()}
</Form>
<ListGroup className="lock-display" hidden={!showLockDisplay}>
Expand All @@ -307,6 +309,5 @@ export default function EditComponent({ username, authenticated }) {
}

EditComponent.propTypes = {
username: PropTypes.string,
authenticated: PropTypes.bool
username: PropTypes.string
}
Loading

0 comments on commit 459a59e

Please sign in to comment.