Standalone Private Sandbox/Container Auth

.yarnclean

@@ -9,7 +9,6 @@ docs
 doc
 website
 images
-assets
 
 # examples
 example

package.json

@@ -60,7 +60,7 @@
     "test:ci": "lerna run test --ignore codesandbox-browserfs -- --ci --testResultsProcessor=\"jest-junit\" ",
     "test:integrations": "lerna exec --scope app --stream -- yarn test:integrations",
     "test:jest-lite": "lerna exec --scope app --stream -- yarn run test jest-lite --watch --coverage",
-    "typecheck": "lerna run typecheck --scope app"
+    "typecheck": "lerna run typecheck"
   },
   "dependencies": {
     "@typescript-eslint/eslint-plugin": "^1.13.0",

packages/app/scripts/start.js

@@ -229,7 +229,7 @@ function addMiddleware(devServer, index) {
     devServer.use(
       '/api',
       proxy({
-        target: 'https://codesandbox.io',
+        target: 'https://codesandbox.stream',
         changeOrigin: true,
       })
     );

packages/app/src/app/overmind/actions.ts

@@ -19,6 +19,8 @@ export const searchMounted: AsyncAction = withLoadApp();
 
 export const codesadboxMounted: AsyncAction = withLoadApp();
 
+export const genericPageMounted: AsyncAction = withLoadApp();
+
 export const cliMounted: AsyncAction = withLoadApp(
   async ({ state, actions }) => {
     if (state.user) {

packages/app/src/app/overmind/effects/api/index.ts

@@ -411,7 +411,10 @@ export default {
       },
     });
   },
-  updatePrivacy(sandboxId: string, privacy: 0 | 1 | 2): Promise<void> {
+  updatePrivacy(
+    sandboxId: string,
+    privacy: 0 | 1 | 2
+  ): Promise<SandboxAPIResponse> {
     return api.patch(`/sandboxes/${sandboxId}/privacy`, {
       sandbox: {
         privacy,

packages/app/src/app/overmind/namespaces/workspace/actions.ts

@@ -180,19 +180,22 @@ export const sandboxDeleted: AsyncAction = async ({
 export const sandboxPrivacyChanged: AsyncAction<{
   privacy: 0 | 1 | 2;
 }> = async ({ state, effects, actions }, { privacy }) => {
+  const oldPrivacy = state.editor.currentSandbox.privacy;
+  const sandbox = await effects.api.updatePrivacy(
+    state.editor.currentId,
+    privacy
+  );
+  state.editor.currentSandbox.privacy = privacy;
+  state.editor.currentSandbox.previewSecret = sandbox.previewSecret;
+
   if (
     getTemplate(state.editor.currentSandbox.template).isServer &&
-    privacy === 2
+    ((oldPrivacy !== 2 && privacy === 2) || (oldPrivacy === 2 && privacy !== 2))
   ) {
-    actions.modalOpened({
-      modal: 'privacyServerWarning',
-      message: null,
-    });
+    // Privacy changed from private to unlisted/public or other way around, restart
+    // the sandbox to notify containers
+    actions.server.restartContainer();
   }
-
-  await effects.api.updatePrivacy(state.editor.currentId, privacy);
-
-  state.editor.currentSandbox.privacy = privacy;
 };
 
 export const setWorkspaceItem: Action<{

packages/app/src/app/pages/Dashboard/elements.ts

@@ -1,5 +1,4 @@
 import styled, { css } from 'styled-components';
-import Logo from '@codesandbox/common/lib/components/Logo';
 
 export const Container = styled.div`
   height: 100%;
@@ -8,64 +7,6 @@ export const Container = styled.div`
   color: rgba(255, 255, 255, 0.8);
 `;
 
-export const Centered = styled.div`
-  display: flex;
-  height: 100vh;
-  width: 100vw;
-  align-items: center;
-  justify-content: center;
-`;
-
-export const OffsettedLogo = styled(Logo)`
-  margin-top: -110px;
-  margin-bottom: 30px;
-  color: white;
-
-  background-color: ${props => props.theme.background4};
-  width: 75px;
-  height: 75px;
-
-  padding: 1rem;
-  border-radius: 8px;
-`;
-
-export const LoggedInContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-
-  width: 300px;
-  margin: 0 auto;
-
-  padding: 4rem;
-  border-radius: 4px;
-  background-color: ${props => props.theme.background};
-`;
-
-export const LoggedInTitle = styled.div`
-  font-size: 1.5rem;
-  color: ${props => props.theme.new.title};
-  font-weight: 600;
-  margin-bottom: 2rem;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
-    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-`;
-
-export const LoggedInSubTitle = styled.div`
-  font-weight: 500;
-  font-size: 1.5rem;
-  margin-bottom: 2rem;
-`;
-
-export const NavigationContainer = styled.div`
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  padding: 1rem;
-`;
-
 export const ShowSidebarButton = styled.button`
   display: none;
   transition: opacity 200ms ease;

packages/app/src/app/pages/Dashboard/index.tsx

@@ -2,23 +2,18 @@ import React, { useState, useEffect } from 'react';
 import { useOvermind } from 'app/overmind';
 import RightIcon from 'react-icons/lib/md/keyboard-arrow-right';
 import LeftIcon from 'react-icons/lib/md/keyboard-arrow-left';
-import { withRouter } from 'react-router-dom';
+import { withRouter, Redirect } from 'react-router-dom';
 import { Navigation } from 'app/pages/common/Navigation';
-import { SignInButton } from 'app/pages/common/SignInButton';
+import { signInPageUrl } from '@codesandbox/common/lib/utils/url-generator';
 import { client } from 'app/graphql/client';
 
 import SidebarContents from './Sidebar';
 import Content from './Content';
 import {
   Container,
-  Centered,
   Content as ContentContainer,
-  LoggedInContainer,
-  LoggedInTitle,
   Sidebar,
-  NavigationContainer,
   ShowSidebarButton,
-  OffsettedLogo,
 } from './elements';
 
 const Dashboard = props => {
@@ -55,7 +50,7 @@ const Dashboard = props => {
     onRouteChange();
   });
 
-  let DashboardContent = (
+  const DashboardContent = (
     <>
       <Sidebar active={showSidebar}>
         <SidebarContents />
@@ -75,25 +70,12 @@ const Dashboard = props => {
   );
 
   if (!hasLogIn) {
-    DashboardContent = (
-      <Container>
-        <Centered>
-          <LoggedInContainer>
-            <OffsettedLogo />
-            <LoggedInTitle>Sign in to CodeSandbox</LoggedInTitle>
-
-            <SignInButton big style={{ fontSize: '1rem' }} />
-          </LoggedInContainer>
-        </Centered>
-      </Container>
-    );
+    return <Redirect to={signInPageUrl()} />;
   }
 
   return (
     <Container>
-      <NavigationContainer>
-        <Navigation searchNoInput title="Dashboard" />
-      </NavigationContainer>
+      <Navigation float searchNoInput title="Dashboard" />
 
       <div style={{ display: 'flex', overflow: 'hidden' }}>
         {DashboardContent}

packages/app/src/app/pages/PreviewAuth/index.tsx

@@ -0,0 +1,81 @@
+import React, { useEffect } from 'react';
+import { useOvermind } from 'app/overmind';
+import { Redirect, RouteComponentProps, withRouter } from 'react-router-dom';
+import Centered from '@codesandbox/common/lib/components/flex/Centered';
+import Fullscreen from '@codesandbox/common/lib/components/flex/Fullscreen';
+
+import {
+  signInPageUrl,
+  frameUrl,
+} from '@codesandbox/common/lib/utils/url-generator';
+
+import { Title } from 'app/components/Title';
+
+// This route is supposed to be opened in a new window.
+// It is called from a sandbox so that we can try to retrieve
+// a sandbox from the root domain and return the preview secret.
+// This is purely used to auth a sandbox. It should return a postMessage
+// with the previewSecret to the parent
+const PreviewAuth = (props: RouteComponentProps<{ id: string }>) => {
+  const {
+    state,
+    actions: { genericPageMounted },
+    effects,
+  } = useOvermind();
+
+  const [error, setError] = React.useState<string>();
+
+  useEffect(() => {
+    genericPageMounted();
+  }, [genericPageMounted]);
+
+  useEffect(() => {
+    if (state.hasLogIn) {
+      setError(null);
+      // eslint-disable-next-line
+      const [id, port] = props.match.params.id.split('-');
+
+      effects.api
+        .getSandbox(id)
+        .then(sandbox => {
+          const sandboxUrl = frameUrl(sandbox, '', {
+            port: port ? Number.parseInt(port, 10) : undefined,
+          });
+          // Only send domains to urls from this sandbox
+          const trustedDomain = new URL(sandboxUrl).origin;
+
+          const listener = (e: MessageEvent) => {
+            if (e.data && e.data.$type === 'request-preview-secret') {
+              (e.source as WindowProxy).postMessage(
+                {
+                  $type: 'preview-secret',
+                  previewSecret: sandbox.previewSecret,
+                },
+                trustedDomain
+              );
+
+              window.removeEventListener('message', listener);
+            }
+          };
+
+          window.addEventListener('message', listener);
+        })
+        .catch(e => {
+          setError("We couldn't find the sandbox");
+        });
+    }
+  }, [effects.api, props.match.params.id, state.hasLogIn]);
+
+  return state.hasLogIn ? (
+    <Fullscreen style={{ height: '100vh' }}>
+      <Centered horizontal vertical>
+        <Title>{error ? 'Error: ' + error : 'Fetching Sandbox'}</Title>
+      </Centered>
+    </Fullscreen>
+  ) : (
+    <Redirect to={signInPageUrl(location.pathname)} />
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default withRouter(PreviewAuth);

packages/app/src/app/pages/Sandbox/Editor/Content/Preview/index.tsx

@@ -180,6 +180,8 @@ class PreviewComponent extends Component<Props, State> {
       <BasePreview
         onInitialized={this.onPreviewInitialized}
         sandbox={store.editor.currentSandbox}
+        privacy={store.editor.currentSandbox.privacy}
+        previewSecret={store.editor.currentSandbox.previewSecret}
         currentModule={store.editor.currentModule}
         settings={store.preferences.settings}
         initialPath={store.editor.initialPath}

packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Project.tsx

@@ -54,7 +54,6 @@ export const Project: React.FunctionComponent<IProjectProps> = ({
   } = useOvermind();
 
   const template = getTemplateDefinition(sandbox.template);
-  const { isServer } = template;
 
   return (
     <Container>
@@ -115,9 +114,7 @@ export const Project: React.FunctionComponent<IProjectProps> = ({
                         Unlisted (only available by url)
                       </option>
                     )}
-                    {!isServer && isPatron && (
-                      <option value={2}>Private</option>
-                    )}
+                    {isPatron && <option value={2}>Private</option>}
                   </PrivacySelect>
                 </>
               ) : (

packages/app/src/app/pages/SignIn/elements.ts

@@ -0,0 +1,53 @@
+import styled from 'styled-components';
+import Logo from '@codesandbox/common/lib/components/Logo';
+
+export const Container = styled.div`
+  height: 100%;
+  width: 100%;
+
+  color: rgba(255, 255, 255, 0.8);
+`;
+
+export const Centered = styled.div`
+  display: flex;
+  height: 100vh;
+  width: 100vw;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const OffsettedLogo = styled(Logo)`
+  margin-top: -110px;
+  margin-bottom: 30px;
+  color: white;
+
+  background-color: ${props => props.theme.background4};
+  width: 75px;
+  height: 75px;
+
+  padding: 1rem;
+  border-radius: 8px;
+`;
+
+export const LoggedInContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+  width: 300px;
+  margin: 0 auto;
+
+  padding: 4rem;
+  border-radius: 4px;
+  background-color: ${props => props.theme.background};
+`;
+
+export const LoggedInTitle = styled.div`
+  font-size: 1.5rem;
+  color: ${props => props.theme.new.title};
+  font-weight: 600;
+  margin-bottom: 2rem;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+`;