Signup, signin and verification ui

config-overrides.js

@@ -23,7 +23,7 @@ module.exports = override(
   addLessLoader({
     javascriptEnabled: true,
     modifyVars: {
-      '@primary-color': '#FF6700',
+      '@primary-color': '#1D66FF',
       '@label-color': "rgba(0,0,0, 0.56)"
     },
   }),

package.json

@@ -14,6 +14,7 @@
     "codemirror-graphql": "^0.11.2",
     "customize-cra": "^0.2.13",
     "dot-prop-immutable": "^1.6.0",
+    "firebase": "^8.3.0",
     "graphiql": "^0.14.2",
     "graphql": "^14.5.4",
     "graphql-prettier": "^1.0.6",
@@ -38,6 +39,7 @@
     "react-json-view": "^1.19.1",
     "react-keyboard-event-handler": "^1.5.4",
     "react-markdown": "^4.3.1",
+    "react-otp-input": "^2.3.0",
     "react-redux": "^7.1.1",
     "react-router-dom": "^5.1.2",
     "react-scripts": "^4.0.0",

src/components/authentication/content/Content.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Row, Col, Divider } from 'antd';
+import KubernetesIcon from '../../../assets/kubernetesIcon.svg';
+import dockerIcon from '../../../assets/dockerIcon.svg';
+import mongoIcon from '../../../assets/mongoIcon.svg';
+import postgresIcon from '../../../assets/postgresIcon.svg';
+import mysqlIcon from '../../../assets/mysqlIcon.svg';
+import sqlserverIcon from '../../../assets/sqlserverIcon.svg';
+import logo from '../../../assets/logo-blue.svg';
+import { CheckOutlined } from '@ant-design/icons';
+import './content.css';
+
+const Content = () => {
+    return (
+      <Row className="des-content">
+        <Col lg={{ span: 22, offset: 1 }}>
+          <img src={logo} style={{ height: '45px', width: '204px', marginTop: '80px' }}/>
+          <p>Develop, Deploy & Secure your serverless apps</p>
+          <Col lg={{ span: 24 }} xl={{ span: 18, offset: 3 }} style={{ marginBottom: "64px" }}>
+            <p className="content-tagline">Open source Firebase + Heroku on Kubernetes! ❤️ </p>
+            <div className="list-content"><CheckOutlined className="tools-icon" /> <span>Instant GraphQL APIs for databases and microservices</span></div>
+            <div className="list-content"><CheckOutlined className="tools-icon" /> <span>Secure service mesh with end to end encryption</span></div>
+            <div className="list-content"><CheckOutlined className="tools-icon" /> <span>Auto scaling, devops and canary deployments</span></div>
+            <div className="list-content"><CheckOutlined className="tools-icon" /> <span>Unified control plane for all your clusters and projects</span></div>
+          </Col>
+          <Divider style={{ marginBottom: "64px"}}>Supported integrations</Divider>
+          <div style={{ display: "flex", justifyContent: "space-evenly", marginBottom: '80px' }}>
+            <img src={KubernetesIcon} width="40px" height="40px" />
+            <img src={dockerIcon} width="40px" height="40px" />
+            <img src={mongoIcon} width="40px" height="40px" />
+            <img src={postgresIcon} width="40px" height="40px" />
+            <img src={mysqlIcon} width="40px" height="40px" />
+            <img src={sqlserverIcon} width="40px" height="40px" />
+          </div>
+        </Col>
+      </Row>
+    );
+}
+
+export default Content;

src/components/authentication/content/content.css

@@ -0,0 +1,25 @@
+.des-content {
+  background-color: #FAFAFA;
+  height: 100%;
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+  text-align: center;
+}
+
+.des-content .content-tagline{
+  margin-top: 72px;
+  margin-bottom: 16px;
+  text-align: left;
+}
+
+.des-content .tools-icon {
+  color: #15CD72;
+  margin-right: 16px;
+  margin-top: 6px;
+}
+
+.des-content .list-content{
+  display: flex;
+  margin-bottom: 16px;
+  text-align: left;
+}

src/components/authentication/signin/SigninForm.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Row, Col, Form, Input, Button, Divider } from 'antd';
+import googleIcon from '../../../assets/googleIcon.svg';
+import githubIcon from '../../../assets/githubIcon.svg';
+import twitterIcon from '../../../assets/twitter1.svg';
+import { Link } from 'react-router-dom';
+import './signin-form.css';
+
+const SigninForm = ({ handleSubmit, google, github, twitter }) => {
+
+  const [form] = Form.useForm();
+  const handleSubmitClick = () => {
+    form.validateFields().then(values => {
+      handleSubmit(values.name, values.email, values.password);
+    });
+  };
+
+    return (
+      <Row className="signin-content">
+        <Col xs={{ span: 18, offset: 3 }} lg={{ span:16, offset:4 }} >
+          <h2 className="title">Login</h2>
+            <div style={{ display: "flex", justifyContent: "space-evenly"}}>
+            <img src={googleIcon} width="48px" height="48px" onClick={google} />
+            <img src={githubIcon} width="48px" height="48px" onClick={github} />
+            <img src={twitterIcon} width="48px" height="48px" onClick={twitter} />
+          </div>
+          <Divider className="divider">OR</Divider>
+          <Form form={form} onFinish={handleSubmitClick}>
+            <Form.Item name='email' rules={[{ type: 'email', required: true, message: "Please enter your valid email" }]}>
+              <Input placeholder="Email" type='email' />
+            </Form.Item>
+            <Form.Item name='password' rules={[{ required: true, message: "Please enter your password" }]}>
+                <Input.Password placeholder="Password" type='password' />
+            </Form.Item>
+            <Button type="primary" className="signin-btn" onClick={handleSubmitClick}>Login</Button>
+          </Form>
+          <Link style={{ marginTop:"64px", marginBottom: '96px' }} to="/mission-control/signup">Don't have an account? Signup</Link>
+        </Col>
+      </Row> 
+    );
+}
+
+export default SigninForm;

src/components/authentication/signin/signin-form.css

@@ -0,0 +1,24 @@
+.signin-content {
+  text-align: center;
+  background-color: #ffffff;
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+.signin-content .signin-btn {
+  width: 100%;
+}
+
+.signin-content .title{
+  color: #1D66FF;
+  margin-bottom: 32px;
+  margin-top: 96px;
+  font-size: 22px;
+}
+
+.signin-content .divider{
+  margin: 32px 0 64px 0;
+}

src/components/authentication/signup/SignupForm.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Row, Col, Form, Input, Button, Divider } from 'antd';
+import googleIcon from '../../../assets/googleIcon.svg';
+import githubIcon from '../../../assets/githubIcon.svg';
+import twitterIcon from '../../../assets/twitter1.svg';
+import { Link } from 'react-router-dom';
+import './signup-form.css';
+
+const SignupForm = ({ handleSubmit, google, github, twitter }) => {
+
+  const [form] = Form.useForm();
+  const handleSubmitClick = () => {
+    form.validateFields().then(values => {
+      handleSubmit(values.name, values.email, values.password);
+    });
+  };
+
+    return (
+      <Row className="signup-content">
+        <Col xs={{ span: 18, offset: 3 }} lg={{ span:16, offset:4 }} >
+          <h2 className="title">Create an account</h2>
+            <div style={{ display: "flex", justifyContent: "space-evenly"}}>
+            <img src={googleIcon} width="48px" height="48px" onClick={google} />
+            <img src={githubIcon} width="48px" height="48px" onClick={github} />
+            <img src={twitterIcon} width="48px" height="48px" onClick={twitter} />
+          </div>
+          <Divider className="divider">OR</Divider>
+          <Form form={form} onFinish={handleSubmitClick}>
+            <Form.Item name='name' rules={[{ required: true, message: "Please enter your name" }]}>
+              <Input placeholder="Name" type='text' />
+            </Form.Item>
+            <Form.Item name='email' rules={[{ type: 'email', required: true, message: "Please enter your valid email" }]}>
+              <Input placeholder="Email" type='email' />
+            </Form.Item>
+            <Form.Item name='password' rules={[{
+              validator: (_, value, cb) => {
+                const regex = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})");
+                if (!value) {
+                  cb("Please enter your password")
+                  return
+                }
+                if (!regex.test(value)) {
+                  cb("Password should be atleast 8 characters long")
+                }
+                cb()
+              }}]}>
+                <Input.Password placeholder="Password" type='password' />
+            </Form.Item>
+            <Button type="primary" className="signup-btn" onClick={handleSubmitClick}>Signup for free</Button>
+          </Form>
+          <p style={{ marginBottom:"64px", marginTop:"8px" }}>No credit card required</p>
+          <Link style={{ marginBottom: '96px' }} to="/mission-control/signin">Already have an account? Login</Link>
+        </Col>
+      </Row> 
+    );
+}
+
+export default SignupForm;

src/components/authentication/signup/signup-form.css

@@ -0,0 +1,24 @@
+.signup-content {
+  text-align: center;
+  background-color: #ffffff;
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+.signup-content .signup-btn {
+  width: 100%;
+}
+
+.signup-content .title{
+  color: #1D66FF;
+  margin-bottom: 32px;
+  margin-top: 96px;
+  font-size: 22px;
+}
+
+.signup-content .divider{
+  margin: 32px 0;
+}

src/components/authentication/verify/VerifyForm.jsx

@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+import { Button, Form } from 'antd';
+import locksvg from '../../../assets/lock.svg';
+import OtpInput from 'react-otp-input';
+
+const VerifyForm = () => {
+
+  const [code, setCode] = useState('');
+  const [form] = Form.useForm();
+
+  return(
+    <div style={{ textAlign: 'center' }}>
+      <img src={locksvg} style={{ height: '48px', width: '48px', marginTop: '32px', marginBottom: '8px'  }} />
+      <p style={{ marginBottom: '8px' }}>Verification pending</p>
+      <p>We have sent a 6 digit verification code to your email. Please enter it to verify.</p>
+      <Form form={form}>
+        <Form.Item name='code' rules={[{ required: true, message: 'Please enter six digit verification code' }]}>
+          <OtpInput
+            value={code}
+            onChange={(code) => setCode(code)}
+            numInputs={6}
+            isInputNum={true}
+            shouldAutoFocus={true}
+            containerStyle={{ textAlign: 'center', display: 'flex', justifyContent: 'center' }}
+            inputStyle={window.screen.width >= '992px' ? 
+              { width: '50px', marginRight: '16px', borderTop: 'none transparent', borderLeft: 'none transparent', borderRight: 'none transparent', borderBottom: '1px solid #666666' } :
+              { width: '30px', marginRight: '8px', borderTop: 'none transparent', borderLeft: 'none transparent', borderRight: 'none transparent', borderBottom: '1px solid #666666' }}
+            focusStyle={{ outline: 'none', borderBottom: '1px solid #1D66FF' }}
+          />
+        </Form.Item>
+        <Button type='primary' ghost style={{ marginTop: '16px', minWidth: '147px', width: '10%' }}>Verify</Button>
+      </Form>
+      <p style={{ margin: '24px 0' }}>Did not receive an OTP?  <a>Resend</a></p>
+    </div>
+  );
+}
+
+export default VerifyForm;

src/pages/authentication/authentication/Authentication.jsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { Row, Col, Card } from 'antd';
+import './authentication.css';
+import Content from '../../../components/authentication/content/Content';
+import SignupForm from '../../../components/authentication/signup/SignupForm';
+import SigninForm from '../../../components/authentication/signin/SigninForm';
+import { incrementPendingRequests, decrementPendingRequests, notify } from '../../../utils';
+import firebase from 'firebase/app';
+import 'firebase/auth';
+
+const Authentication = ({ mode }) => {
+
+  const googleProvider = new firebase.auth.GoogleAuthProvider();
+  const twitterProvider = new firebase.auth.TwitterAuthProvider();
+  const githubProvider = new firebase.auth.GithubAuthProvider();
+
+  const enterpriseSignin = () => {
+
+  }
+
+  const handleGoogleSignin = () => {
+    incrementPendingRequests();
+    firebase.auth().signInWithPopup(googleProvider).then((res) => {
+      res.user.getIdToken().then(token => {
+        enterpriseSignin(token).then(() => {
+          notify("success", "Success", "Signin successful")
+        }).catch(ex => notify("error", "Signin failed", ex.toString()))
+      }).catch(ex => notify("error", "Signin failed", ex.toString()))
+    }).catch((error) => {
+      notify("error", "Signin failed", error.toString())
+    }).finally(() => decrementPendingRequests());
+  }
+
+  const handleGithubSignin = () => {
+    incrementPendingRequests();
+    firebase.auth().signInWithPopup(githubProvider).then((res) => {
+      res.user.getIdToken().then(token => {
+        enterpriseSignin(token).then(() => {
+          notify("success", "Success", "Signin successful")
+        }).catch(ex => notify("error", "Signin failed", ex.toString()))
+      }).catch(ex => notify("error", "Signin failed", ex.toString()))
+    }).catch((error) => {
+      notify("error", "Signin failed", error.toString())
+    }).finally(() => decrementPendingRequests());
+  }
+
+  const handleTwitterSignin = () => {
+    incrementPendingRequests();
+    firebase.auth().signInWithPopup(twitterProvider).then((res) => {
+      res.user.getIdToken().then(token => {
+        enterpriseSignin(token).then(() => {
+          notify("success", "Success", "Signin successful")
+        }).catch(ex => notify("error", "Signin failed", ex.toString()))
+      }).catch(ex => notify("error", "Signin failed", ex.toString()))
+    }).catch((error) => {
+      notify("error", "Signin failed", error.toString())
+    }).finally(() => decrementPendingRequests());
+  }
+
+  const handleSignup = () => {
+
+  }
+  const handleSignin = () => {
+
+  }
+  return(
+    <Row className="dark-background">
+      <Col xs={{ span: 22, offset: 1 }} lg={{ span: 20, offset: 2 }}>
+        <Card className="card-content">
+          <Row type="flex" align="middle">
+            <Col xs={{ span: 0 }} lg={{ span: 12, offset: 0 }} style={{ alignSelf: "stretch" }}>
+              <Content />
+            </Col>
+            <Col xs={{ span: 24 }} lg={{ span: 12, offset: 0 }} style={{ alignSelf: "stretch", width: '100%' }}>
+              {mode === 'signup' && <SignupForm handleSubmit={handleSignup}
+                google={handleGoogleSignin}
+                twitter={handleTwitterSignin}
+                github={handleGithubSignin} />}
+              {mode === 'signin' && <SigninForm handleSubmit={handleSignin}
+                google={handleGoogleSignin}
+                twitter={handleTwitterSignin}
+                github={handleGithubSignin} />}
+            </Col>
+          </Row>
+        </Card>
+      </Col>
+    </Row>
+  );
+}
+
+export default Authentication;