New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
room name and user name as GET parameters #95
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -42,7 +42,14 @@ const useStyles = makeStyles((theme: Theme) => | |
|
||
export default function MenuBar() { | ||
const classes = useStyles(); | ||
const { URLRoomName } = useParams(); | ||
let { URLRoomName } = useParams(); | ||
|
||
if (!URLRoomName) { | ||
URLRoomName = window.sessionStorage.getItem('room') || ''; | ||
} | ||
|
||
const URLUserName = window.sessionStorage.getItem('user') || ''; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. should this come from |
||
|
||
const { user, getToken } = useAppState(); | ||
const { isConnecting, connect } = useVideoContext(); | ||
const roomState = useRoomState(); | ||
|
@@ -54,7 +61,15 @@ export default function MenuBar() { | |
if (URLRoomName) { | ||
setRoomName(URLRoomName); | ||
} | ||
}, [URLRoomName]); | ||
|
||
if (URLUserName) { | ||
setName(URLUserName); | ||
} | ||
|
||
if (URLRoomName && URLUserName) { | ||
getToken(URLUserName, URLRoomName).then(token => connect(token)); | ||
} | ||
}, [URLRoomName, URLUserName]); | ||
|
||
const handleNameChange = (event: ChangeEvent<HTMLInputElement>) => { | ||
setName(event.target.value); | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,9 +1,22 @@ | ||
import { useCallback, useEffect, useState } from 'react'; | ||
import { useHistory } from 'react-router-dom'; | ||
const queryString = require('query-string'); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Can we use |
||
|
||
export function getRoomName() { | ||
const parsed = queryString.parse(window.location.search); | ||
const room = parsed.room ? parsed.room : window.sessionStorage.getItem('room'); | ||
return room; | ||
} | ||
|
||
export function getUserName() { | ||
const parsed = queryString.parse(window.location.search); | ||
const user = parsed.user ? parsed.user : window.sessionStorage.getItem('user'); | ||
return user; | ||
} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. If we are sharing this url, I would expect we want the user to enter their own username. Why are we setting it in the url? Can you please provide the use case for this? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @charliesantos there are a few use-cases where prefilling a user's name could be useful. For example, I click a button to send an SMS link to the video room. The button trigger's a controller that queries by DB based on the phone entered and pulls the first name based on the phone number. Then, the controller adds that param to the link and sends an SMS -> user has a one-click join experience. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. That's a good use case @cweems. In that case, I think we can keep this feature in this PR. |
||
|
||
export function getPasscode() { | ||
const match = window.location.search.match(/passcode=(.*)&?/); | ||
const passcode = match ? match[1] : window.sessionStorage.getItem('passcode'); | ||
const parsed = queryString.parse(window.location.search); | ||
const passcode = parsed.passcode ? parsed.passcode : window.sessionStorage.getItem('passcode'); | ||
return passcode; | ||
} | ||
|
||
|
@@ -58,13 +71,24 @@ export default function usePasscodeAuth() { | |
|
||
useEffect(() => { | ||
const passcode = getPasscode(); | ||
const room = getRoomName(); | ||
const user = getUserName(); | ||
|
||
if (passcode) { | ||
verifyPasscode(passcode) | ||
.then(verification => { | ||
if (verification?.isValid) { | ||
setUser({ passcode } as any); | ||
window.sessionStorage.setItem('passcode', passcode); | ||
|
||
if (user) { | ||
window.sessionStorage.setItem('user', user); | ||
} | ||
|
||
if (room) { | ||
window.sessionStorage.setItem('room', room); | ||
} | ||
|
||
history.replace(window.location.pathname); | ||
} | ||
}) | ||
|
@@ -79,6 +103,17 @@ export default function usePasscodeAuth() { | |
if (verification?.isValid) { | ||
setUser({ passcode } as any); | ||
window.sessionStorage.setItem('passcode', passcode); | ||
|
||
const room = getRoomName(); | ||
const user = getUserName(); | ||
|
||
if (user) { | ||
window.sessionStorage.setItem('user', user); | ||
} | ||
|
||
if (room) { | ||
window.sessionStorage.setItem('room', room); | ||
} | ||
} else { | ||
throw new Error(getErrorMessage(verification?.error)); | ||
} | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This should've updated the
package-lock.json
. Can you please push up the changes?