|
| 1 | +import React, { useEffect } from 'react'; |
| 2 | +import { useOvermind } from 'app/overmind'; |
| 3 | +import { Redirect, RouteComponentProps, withRouter } from 'react-router-dom'; |
| 4 | +import Centered from '@codesandbox/common/lib/components/flex/Centered'; |
| 5 | +import Fullscreen from '@codesandbox/common/lib/components/flex/Fullscreen'; |
| 6 | + |
| 7 | +import { |
| 8 | + signInPageUrl, |
| 9 | + frameUrl, |
| 10 | +} from '@codesandbox/common/lib/utils/url-generator'; |
| 11 | + |
| 12 | +import { Title } from 'app/components/Title'; |
| 13 | + |
| 14 | +// This route is supposed to be opened in a new window. |
| 15 | +// It is called from a sandbox so that we can try to retrieve |
| 16 | +// a sandbox from the root domain and return the preview secret. |
| 17 | +// This is purely used to auth a sandbox. It should return a postMessage |
| 18 | +// with the previewSecret to the parent |
| 19 | +const PreviewAuth = (props: RouteComponentProps<{ id: string }>) => { |
| 20 | + const { |
| 21 | + state, |
| 22 | + actions: { genericPageMounted }, |
| 23 | + effects, |
| 24 | + } = useOvermind(); |
| 25 | + |
| 26 | + const [error, setError] = React.useState<string>(); |
| 27 | + |
| 28 | + useEffect(() => { |
| 29 | + genericPageMounted(); |
| 30 | + }, [genericPageMounted]); |
| 31 | + |
| 32 | + useEffect(() => { |
| 33 | + if (state.hasLogIn) { |
| 34 | + setError(null); |
| 35 | + // eslint-disable-next-line |
| 36 | + const [id, port] = props.match.params.id.split('-'); |
| 37 | + |
| 38 | + effects.api |
| 39 | + .getSandbox(id) |
| 40 | + .then(sandbox => { |
| 41 | + const sandboxUrl = frameUrl(sandbox, '', { |
| 42 | + port: port ? Number.parseInt(port, 10) : undefined, |
| 43 | + }); |
| 44 | + // Only send domains to urls from this sandbox |
| 45 | + const trustedDomain = new URL(sandboxUrl).origin; |
| 46 | + |
| 47 | + const listener = (e: MessageEvent) => { |
| 48 | + if (e.data && e.data.$type === 'request-preview-secret') { |
| 49 | + (e.source as WindowProxy).postMessage( |
| 50 | + { |
| 51 | + $type: 'preview-secret', |
| 52 | + previewSecret: sandbox.previewSecret, |
| 53 | + }, |
| 54 | + trustedDomain |
| 55 | + ); |
| 56 | + |
| 57 | + window.removeEventListener('message', listener); |
| 58 | + } |
| 59 | + }; |
| 60 | + |
| 61 | + window.addEventListener('message', listener); |
| 62 | + }) |
| 63 | + .catch(e => { |
| 64 | + setError("We couldn't find the sandbox"); |
| 65 | + }); |
| 66 | + } |
| 67 | + }, [effects.api, props.match.params.id, state.hasLogIn]); |
| 68 | + |
| 69 | + return state.hasLogIn ? ( |
| 70 | + <Fullscreen style={{ height: '100vh' }}> |
| 71 | + <Centered horizontal vertical> |
| 72 | + <Title>{error ? 'Error: ' + error : 'Fetching Sandbox'}</Title> |
| 73 | + </Centered> |
| 74 | + </Fullscreen> |
| 75 | + ) : ( |
| 76 | + <Redirect to={signInPageUrl(location.pathname)} /> |
| 77 | + ); |
| 78 | +}; |
| 79 | + |
| 80 | +// eslint-disable-next-line import/no-default-export |
| 81 | +export default withRouter(PreviewAuth); |
0 commit comments