Merge branch 'master' into refactor-Modals-FeedbackModal

Author: christianalfoni

.github/PULL_REQUEST_TEMPLATE.md

@@ -18,7 +18,7 @@ merge of your pull request!
 
 <!-- if this is a feature change -->
 
-## What steps did you take to test this? This is required before we can merge.
+## What steps did you take to test this? This is required before we can merge, make sure to test the flow you've updated.
 
 1. Step A
 2. Step B

package.json

@@ -56,6 +56,7 @@
     "start:test": "lerna run start:test --scope app --stream",
     "start:vscode": "cross-env VSCODE=1 yarn start:fast & cd standalone-packages/monaco-editor && yarn simpleserver & cd standalone-packages/vscode && yarn watch",
     "test": "lerna run test --ignore codesandbox-browserfs",
+    "test:pr": "node testpr-script",
     "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",
@@ -86,7 +87,8 @@
     "lint-staged": "^9.2.5",
     "prettier": "1.17.0",
     "pretty-quick": "^1.10.0",
-    "typescript": "3.6.3"
+    "typescript": "3.6.3",
+    "username": "^5.1.0"
   },
   "husky": {
     "hooks": {

packages/app/src/app/overmind/internalActions.ts

@@ -98,10 +98,12 @@ export const signInGithub: Action<
   { useExtraScopes: boolean },
   Promise<string>
 > = ({ effects }, options) => {
-  const popup = effects.browser.openPopup(
-    `/auth/github${options.useExtraScopes ? '?scope=user:email,repo' : ''}`,
-    'sign in'
-  );
+  const authPath =
+    process.env.LOCAL_SERVER || 'STAGING_BRANCH' in process.env
+      ? '/auth/dev'
+      : `/auth/github${options.useExtraScopes ? '?scope=user:email,repo' : ''}`;
+
+  const popup = effects.browser.openPopup(authPath, 'sign in');
 
   return effects.browser
     .waitForMessage<{ jwt: string }>('signin')

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

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  height: 100%;
+  width: 100%;
+  margin: 1rem;
+  margin-top: 10%;
+`;

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

@@ -0,0 +1,87 @@
+import React from 'react';
+
+import { Title } from 'app/components/Title';
+import { SubTitle } from 'app/components/SubTitle';
+import Input from '@codesandbox/common/lib/components/Input';
+import { Button } from '@codesandbox/common/lib/components/Button';
+import { protocolAndHost } from '@codesandbox/common/lib/utils/url-generator';
+
+import { Container } from './elements';
+
+export const DevAuthPage = () => {
+  const [authCode, setAuthCode] = React.useState('');
+  const [error, setError] = React.useState<string | null>(null);
+
+  const getJWTToken = () => {
+    setError(null);
+    let ok = true;
+    fetch(`/api/v1/auth/verify/${authCode}`)
+      .then(res => {
+        ok = res.ok;
+        return res.json();
+      })
+      .then(res => {
+        if (!ok) {
+          throw new Error(res.errors.detail[0]);
+        }
+        if (
+          window.opener &&
+          window.opener.location.origin === window.location.origin
+        ) {
+          window.opener.postMessage(
+            {
+              type: 'signin',
+              data: {
+                jwt: res.data.token,
+              },
+            },
+            protocolAndHost()
+          );
+        }
+      })
+      .catch(e => {
+        setError(e.message);
+      });
+  };
+
+  return (
+    <Container>
+      <Title>Developer Sign In</Title>
+      <SubTitle style={{ width: 800 }}>
+        Please enter the token you get from{' '}
+        <a
+          href="https://codesandbox.io/cli/login"
+          target="popup"
+          rel="noreferrer noopener"
+          onClick={e => {
+            e.preventDefault();
+            window.open(
+              'https://codesandbox.io/cli/login',
+              'popup',
+              'width=600,height=600'
+            );
+            return false;
+          }}
+        >
+          here
+        </a>
+        . This token will sign you in with your account from codesandbox.io.
+      </SubTitle>
+      <div
+        style={{ display: 'flex', justifyContent: 'center', marginTop: '2rem' }}
+      >
+        <Input
+          style={{ width: 600, fontSize: '1.5rem' }}
+          placeholder="Auth Code"
+          value={authCode}
+          onChange={e => {
+            setAuthCode(e.target.value);
+          }}
+        />
+        <Button onClick={getJWTToken}>Submit</Button>
+      </div>
+
+      {error && <div style={{ marginTop: '1rem' }}>Error: {error}</div>}
+    </Container>
+  );
+};

packages/app/src/app/pages/common/Modals/ForkServerModal/index.js

@@ -0,0 +1,48 @@
+import React, { useEffect } from 'react';
+import { useOvermind } from 'app/overmind';
+import getTemplateDefinition from '@codesandbox/common/lib/templates';
+import { SignInButton } from 'app/pages/common/SignInButton';
+
+import { Container, Heading, Explanation } from '../elements';
+
+export const ForkServerModal: React.FC = () => {
+  const {
+    state: {
+      isLoggedIn,
+      editor: { currentSandbox },
+    },
+    actions: {
+      modalClosed,
+      editor: { forkSandboxClicked },
+    },
+  } = useOvermind();
+
+  useEffect(() => {
+    // Which means that the user signed in in the meantime with the intention to
+    // fork
+    if (isLoggedIn) {
+      forkSandboxClicked();
+      modalClosed();
+    }
+  }, [forkSandboxClicked, isLoggedIn, modalClosed]);
+
+  const templateDefinition = getTemplateDefinition(currentSandbox.template);
+  const niceName = (
+    <span style={{ color: templateDefinition.color(), fontWeight: 500 }}>
+      {templateDefinition.niceName}
+    </span>
+  );
+
+  return (
+    <Container>
+      <Heading>Fork {niceName} Sandbox</Heading>
+      <Explanation>
+        We execute {niceName} sandboxes in a server container. This is still in
+        beta, so we require you to sign in before you can fork a {niceName}{' '}
+        sandbox.
+      </Explanation>
+
+      <SignInButton style={{ marginTop: 12 }} />
+    </Container>
+  );
+};

packages/app/src/app/pages/common/Modals/ForkServerModal/index.tsx

@@ -0,0 +1,60 @@
+import React, { useEffect } from 'react';
+import { SubscribeForm } from 'app/components/SubscribeForm';
+import { useOvermind } from 'app/overmind';
+import { Card } from './Card';
+import { Title, Subheading } from '../elements';
+import { Container, CustomSubHeading } from './elements';
+
+export const PaymentInfo: React.FunctionComponent = () => {
+  const {
+    state: {
+      preferences: {
+        paymentDetailError,
+        paymentDetails: paymentDetailsFromHooks,
+        isLoadingPaymentDetails,
+      },
+    },
+    actions: {
+      preferences: { paymentDetailsRequested, paymentDetailsUpdated },
+    },
+  } = useOvermind();
+  useEffect(() => {
+    paymentDetailsRequested();
+  }, [paymentDetailsRequested]);
+
+  const updatePaymentDetails = ({ token }) => {
+    paymentDetailsUpdated({ token });
+  };
+
+  const paymentDetails = () => {
+    const { last4, name, brand } = paymentDetailsFromHooks;
+    if (paymentDetailError)
+      return <div>An error occurred: {paymentDetailError}</div>;
+
+    return (
+      <div>
+        <Subheading>Current card</Subheading>
+        <Card last4={last4} name={name} brand={brand} />
+
+        <CustomSubHeading>Update card info</CustomSubHeading>
+        <SubscribeForm
+          buttonName="Update"
+          loadingText="Updating Card Info..."
+          name={name}
+          subscribe={updatePaymentDetails}
+        />
+      </div>
+    );
+  };
+
+  return (
+    <Container>
+      <Title>Payment Info</Title>
+      {isLoadingPaymentDetails ? (
+        <div>Loading payment details...</div>
+      ) : (
+        paymentDetails()
+      )}
+    </Container>
+  );
+};

packages/app/src/app/pages/common/Modals/PreferencesModal/PaymentInfo/PaymentInfo.tsx

@@ -1,6 +1,11 @@
 import styled from 'styled-components';
+import { Subheading } from '../elements';
 
 export const Container = styled.div`
   font-weight: 400;
   color: rgba(255, 255, 255, 0.6);
 `;
+
+export const CustomSubHeading = styled(Subheading)`
+  margin-top: 2rem;
+`;

packages/app/src/app/pages/common/Modals/PreferencesModal/PaymentInfo/elements.ts

@@ -0,0 +1,3 @@
+import { PaymentInfo } from './PaymentInfo';
+
+export default PaymentInfo;