Authorizing ZEIT

Author: Ives van Hoorne

src/app/containers/Preferences/Integrations/Integration.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import CrossIcon from 'react-icons/lib/md/clear';
 import ChevronIcon from 'react-icons/lib/md/keyboard-arrow-right';
@@ -10,6 +10,8 @@ const Container = styled.div`
   display: inline-flex;
   border-radius: 4px;
   overflow: hidden;
+
+  ${props => props.loading && css`opacity: 0.5;`};
 `;
 
 const IntegrationBlock = styled.div`
@@ -112,23 +114,39 @@ type Props = {
   name: string,
   color: string,
   description: string,
-  loggedIn: boolean,
+  signOut: Function,
+  signIn: Function,
+  userInfo: ?{
+    token: string,
+    email: string,
+    [key: string]: string,
+  },
+  loading: boolean,
 };
 
-export default ({ Icon, name, description, color, loggedIn }: Props) => (
-  <Container>
+export default ({
+  Icon,
+  name,
+  signOut,
+  signIn,
+  description,
+  color,
+  userInfo,
+  loading,
+}: Props) => (
+  <Container loading={loading}>
     <IntegrationBlock bgColor={color}>
       <Icon />
       <Name>{name}</Name>
     </IntegrationBlock>
-    {!loggedIn ? (
+    {userInfo ? (
       <DetailInfo
-        signOut={() => {}}
+        signOut={signOut}
         heading="Signed in as"
-        info="[email protected]"
+        info={userInfo.email || 'Loading...'}
       />
     ) : (
-      <DetailInfo signIn={() => {}} heading="Enables" info={description} />
+      <DetailInfo signIn={signIn} heading="Enables" info={description} />
     )}
   </Container>
 );

src/app/containers/Preferences/Integrations/Integrations.js

@@ -1,16 +1,89 @@
 import React from 'react';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+
+import type { CurrentUser } from 'common/types';
+import { currentUserSelector } from 'app/store/user/selectors';
+import userActionCreators from 'app/store/user/actions';
 
 import ZeitLogo from 'app/components/ZeitLogo';
 
 import Integration from './Integration';
 
-export default () => (
-  <div>
-    <Integration
-      name="ZEIT"
-      color="black"
-      description="Deployments"
-      Icon={ZeitLogo}
-    />
-  </div>
-);
+type Props = {
+  user: CurrentUser,
+  userActions: typeof userActionCreators,
+};
+type State = {
+  loading: {
+    zeit: boolean,
+  },
+};
+
+const mapDispatchToProps = dispatch => ({
+  userActions: bindActionCreators(userActionCreators, dispatch),
+});
+const mapStateToProps = state => ({
+  user: currentUserSelector(state),
+});
+
+class Integrations extends React.PureComponent<Props, State> {
+  state = {
+    loading: {
+      zeit: false,
+    },
+  };
+
+  componentDidMount() {
+    if (this.props.user.integrations.zeit) {
+      this.props.userActions.fetchZeitUserDetails();
+    }
+  }
+
+  addLoading = func => async () => {
+    this.setState({
+      loading: {
+        ...this.state.loading,
+        zeit: true,
+      },
+    });
+
+    try {
+      await func();
+    } catch (e) {
+      this.setState({
+        loading: {
+          ...this.state.loading,
+          zeit: false,
+        },
+      });
+    }
+
+    this.setState({
+      loading: {
+        ...this.state.loading,
+        zeit: false,
+      },
+    });
+  };
+
+  render() {
+    const { user, userActions } = this.props;
+    return (
+      <div>
+        <Integration
+          name="ZEIT"
+          color="black"
+          description="Deployments"
+          Icon={ZeitLogo}
+          userInfo={user.integrations.zeit}
+          signOut={this.addLoading(userActions.signOutFromZeit)}
+          signIn={this.addLoading(userActions.signInZeit)}
+          loading={this.state.loading.zeit}
+        />
+      </div>
+    );
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Integrations);

src/app/pages/auth/Zeit.js

@@ -0,0 +1,79 @@
+import React from 'react';
+
+import Centered from 'app/components/flex/Centered';
+import Title from 'app/components/text/Title';
+
+import {
+  protocolAndHost,
+  signInUrl,
+  newSandboxUrl,
+} from 'app/utils/url-generator';
+
+type State = {
+  code: ?string,
+  redirect: ?string,
+};
+
+export default class ZeitSignIn extends React.PureComponent<State> {
+  constructor(props) {
+    super(props);
+
+    // eslint-disable-next-line no-unused-vars
+    const [_, code] = document.location.search.match(/\?code=(.*)/);
+    console.log('code', code);
+    if (code) {
+      if (window.opener) {
+        this.state = {
+          code,
+        };
+        if (window.opener.location.origin === window.location.origin) {
+          window.opener.postMessage(
+            {
+              type: 'signin',
+              data: {
+                code,
+              },
+            },
+            protocolAndHost()
+          );
+        }
+        return;
+      }
+      this.state = {
+        redirect: '/',
+      };
+      return;
+    }
+
+    this.state = {
+      error: 'no message received',
+    };
+  }
+
+  getMessage = () => {
+    if (this.state.redirect) {
+      document.location.href = newSandboxUrl();
+      return 'Redirecting to sandbox page';
+    }
+    if (this.state.error) {
+      return `Something went wrong while signing in: ${this.state.error}`;
+    }
+    if (this.state.jwt) return 'Signing in...';
+    if (this.state.jwt == null) {
+      setTimeout(() => {
+        document.location.href = signInUrl();
+      }, 2000);
+      return 'Redirecting to sign in page...';
+    }
+
+    return 'Hey';
+  };
+
+  render() {
+    return (
+      <Centered horizontal vertical>
+        <Title>{this.getMessage()}</Title>
+      </Centered>
+    );
+  }
+}

src/app/pages/index.js

@@ -37,6 +37,10 @@ const SignIn = Loadable({
   loader: () => import('./SignIn'),
   LoadingComponent: Loading,
 });
+const ZeitSignIn = Loadable({
+  loader: () => import('./auth/Zeit'),
+  LoadingComponent: Loading,
+});
 const NotFound = Loadable({
   loader: () => import('./NotFound'),
   LoadingComponent: Loading,
@@ -134,6 +138,7 @@ class Routes extends React.PureComponent<Props> {
             <Route path="/patron" component={Patron} />
             <Route path="/cli/login" component={CLI} />
             <Route path="/legal" component={Terms} />
+            <Route path="/auth/zeit" component={ZeitSignIn} />
             <Route component={NotFound} />
           </Switch>
         </Content>

src/app/store/entities/sandboxes/actions/index.js

@@ -13,6 +13,8 @@ import { directoriesSelector } from '../directories/selectors';
 
 import { maybeForkSandbox, forkSandbox } from './fork';
 import fileActions from './files';
+import { currentUserSelector } from '../../../user/selectors';
+import { resolve } from 'babel-standalone';
 
 export const SINGLE_SANDBOX_API_ACTIONS = createAPIActions('SANDBOX', 'SINGLE');
 export const CREATE_SANDBOX_API_ACTIONS = createAPIActions('SANDBOX', 'CREATE');
@@ -337,11 +339,32 @@ export default {
 
     const deploy = await import('../utils/deploy');
 
-    deploy.default(
+    const apiData = await deploy.default(
       sandbox,
       sandbox.modules.map(x => modules[x]),
       sandbox.directories.map(x => directories[x])
     );
+
+    const user = currentUserSelector(getState());
+
+    const token = user.integrations.zeit.token;
+
+    const res = await fetch('https://api.zeit.co/now/deployments', {
+      method: 'POST',
+      body: JSON.stringify(apiData),
+      headers: {
+        Authorization: `bearer ${token}`,
+      },
+    });
+
+    const data = await res.json();
+
+    if (!res.ok) {
+      dispatch(notificationActions.addNotification(data.err.mesage, 'error'));
+      return;
+    }
+
+    console.log(data);
   },
 
   deleteSandbox: (id: string) => async (dispatch: Function) => {

src/app/store/entities/sandboxes/utils/deploy/index.js

@@ -2,6 +2,8 @@ import JSZip from 'jszip';
 
 import type { Sandbox, Module, Directory } from 'common/types';
 
+import getTemplate from 'common/templates';
+
 import { createZip } from '../create-zip';
 
 export default async function deploy(
@@ -14,12 +16,12 @@ export default async function deploy(
   const zipFile = await createZip(sandbox, modules, directories);
 
   if (!zipFile) {
-    return;
+    return null;
   }
 
   const contents = await JSZip.loadAsync(zipFile);
 
-  const apiData = {};
+  let apiData = {};
   const filePaths = Object.keys(contents.files);
   for (let i = 0; i < filePaths.length; i += 1) {
     const filePath = filePaths[i];
@@ -31,6 +33,13 @@ export default async function deploy(
   }
 
   apiData.package = JSON.parse(apiData['package.json']);
+  apiData['package.json'] = null;
+
+  const template = getTemplate(sandbox.template);
+
+  if (template.alterDeploymentData) {
+    apiData = template.alterDeploymentData(apiData);
+  }
 
-  console.log(apiData);
+  return apiData;
 }