@corva/dc-platform-shared 0.0.0-2eb17ab → 0.0.0-2eb17ab-1

package/src/CLI/screens/LoginScreen/components/AuthStep.js

@@ -0,0 +1,148 @@
+import { memo, useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { styled, Button, Grid } from '@material-ui/core';
+import { showErrorNotification } from '@corva/ui/utils';
+
+import { isSSOPlatformSupported } from '@corva/ui/clients/sso';
+import { GOOGLE_RECAPTCHA_KEY, initializeRecaptcha } from '~/utils/recaptcha';
+
+import {
+  PasswordField,
+  Chip,
+  StepFooter,
+  StepContent,
+  StepHeader,
+  Step,
+  HiddenEmailField,
+  OrDivider,
+} from '~/components/Login';
+import { useAuth } from '../../../context';
+import { NEED_HELP_EXTERNAL_LINK } from '../../../constants';
+import SSOButton from './SSOButton';
+
+const PAGE_NAME = 'AuthorizationPo';
+
+const StyledGrid = styled(Grid)(({ theme }) => ({
+  marginTop: 2 * theme.spacing(1),
+  marginBottom: 2 * theme.spacing(1),
+  '&:first-of-type': { marginTop: 0 },
+  '&:last-of-type': { marginBottom: 0 },
+}));
+
+const StyledButton = styled(Button)(({ theme }) => ({
+  width: 71,
+  padding: theme.spacing(),
+  whiteSpace: 'nowrap',
+  backgroundColor: theme.status.loginButton,
+  '&:hover': { backgroundColor: `${theme.status.loginButtonHovered}` },
+}));
+
+function AuthStep({ email, schemas, onBack, onFinishLogin }) {
+  const auth = useAuth();
+  const [password, setPassword] = useState('');
+  const [isFormSubmitted, setFormSubmitted] = useState(false);
+
+  const error = isFormSubmitted ? auth.error : null;
+  useEffect(() => {
+    initializeRecaptcha();
+  }, []);
+
+  const handlePasswordChange = e => {
+    setPassword(e.target.value);
+    setFormSubmitted(false);
+  };
+
+  const handlePasswordSubmit = async e => {
+    e.preventDefault();
+    if (!window.grecaptcha) return showErrorNotification('Problem with initializing recaptcha');
+
+    return window.grecaptcha.enterprise.ready(() => {
+      // NOTE: need this try block since .execute throws an error than we can't catch
+      try {
+        window.grecaptcha.enterprise
+          .execute(GOOGLE_RECAPTCHA_KEY, { action: 'login' })
+          .then(recaptchaToken => {
+            auth
+              .login(null, { email, password, recaptcha_token: recaptchaToken }, onFinishLogin)
+              .then(() => {
+                setFormSubmitted(true);
+              });
+          })
+          .catch(e => console.error(e));
+      } catch (e) {
+        console.error(e);
+        showErrorNotification(e.message);
+      }
+    });
+  };
+
+  const passwordSchema = schemas.find(schema => schema.provider === 'password');
+  const ssoSchemas = schemas.filter(
+    schema => schema.provider !== 'password' && isSSOPlatformSupported(schema?.platform?.identifier)
+  );
+
+  return (
+    <Step>
+      <StepHeader>Sign In</StepHeader>
+      <StepContent>
+        <Grid container direction="column">
+          <Chip data-not-migrated-MuiChip label={email} onClick={onBack} />
+          {ssoSchemas.map(schema => (
+            <StyledGrid item key={schema.title}>
+              <SSOButton
+                title={schema.title}
+                provider={schema.provider}
+                connection={schema.connection}
+                platform={schema.platform}
+              />
+            </StyledGrid>
+          ))}
+          {passwordSchema && ssoSchemas.length > 0 && (
+            <Grid item>
+              <OrDivider />
+            </Grid>
+          )}
+          {passwordSchema && (
+            <StyledGrid item>
+              <form id="sign-in-form" onSubmit={handlePasswordSubmit}>
+                <HiddenEmailField email={email} />
+                <PasswordField
+                  value={password}
+                  onChange={handlePasswordChange}
+                  disabled={auth.loading}
+                  error={error}
+                />
+              </form>
+            </StyledGrid>
+          )}
+        </Grid>
+      </StepContent>
+      <StepFooter needHelpExternalLink={NEED_HELP_EXTERNAL_LINK}>
+        {passwordSchema && (
+          // NOTE: Attribute form for button tag doesnt work in IE,
+          // so need to add additional onClick handler
+          <StyledButton
+            data-testid={`${PAGE_NAME}_signInButton`}
+            form="sign-in-form"
+            type="submit"
+            variant="contained"
+            color="primary"
+            disabled={!password || auth.loading || !!error}
+            onClick={handlePasswordSubmit}
+          >
+            Sign In
+          </StyledButton>
+        )}
+      </StepFooter>
+    </Step>
+  );
+}
+
+AuthStep.propTypes = {
+  email: PropTypes.string.isRequired,
+  schemas: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  onBack: PropTypes.func.isRequired,
+  onFinishLogin: PropTypes.func.isRequired,
+};
+
+export default memo(AuthStep);

package/src/CLI/screens/LoginScreen/components/EmailStep.js

@@ -0,0 +1,82 @@
+import { memo, useState } from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import { getUserAuthSchemas } from '@corva/ui/clients/jsonApi';
+
+import { Step, StepHeader, StepContent, StepFooter, EmailField } from '~/components/Login';
+
+import { NEED_HELP_EXTERNAL_LINK } from '../../../constants';
+
+const StyledEmailButton = styled(Button)(({ theme }) => ({
+  width: 71,
+  padding: theme.spacing(),
+  backgroundColor: theme.status.loginButton,
+  '&:hover': {
+    backgroundColor: `${theme.status.loginButtonHovered}`,
+  },
+}));
+
+function EmailStep({ onNext }) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [email, setEmail] = useState('');
+
+  const handleEmailChange = e => {
+    setEmail(e.target.value);
+    setError(null);
+  };
+
+  const handleFetchSchemas = async email => {
+    setLoading(true);
+    try {
+      const response = await getUserAuthSchemas({ email, with_provider: true });
+      setLoading(false);
+      onNext(email, response.schemas);
+    } catch (err) {
+      setLoading(false);
+      setError('Invalid email');
+    }
+  };
+
+  const handleEmailSubmit = e => {
+    e.preventDefault();
+    if (email) handleFetchSchemas(email);
+    else setError('Required');
+  };
+
+  return (
+    <Step>
+      <StepHeader>Sign In</StepHeader>
+      <StepContent>
+        <form id="email-form" onSubmit={handleEmailSubmit} autoComplete="on">
+          <EmailField
+            value={email}
+            onChange={handleEmailChange}
+            disabled={!!loading}
+            error={error}
+          />
+        </form>
+      </StepContent>
+      <StepFooter needHelpExternalLink={NEED_HELP_EXTERNAL_LINK}>
+        <StyledEmailButton
+          data-testid="EmailPo_nextButton"
+          form="email-form"
+          type="submit"
+          variant="contained"
+          color="primary"
+          disabled={loading || !!error}
+          onClick={handleEmailSubmit}
+        >
+          Next
+        </StyledEmailButton>
+      </StepFooter>
+    </Step>
+  );
+}
+
+EmailStep.propTypes = {
+  onNext: PropTypes.func.isRequired,
+};
+
+export default memo(EmailStep);

package/src/CLI/screens/LoginScreen/components/IconLogo.js

@@ -0,0 +1,80 @@
+import { memo } from 'react';
+
+function Icon() {
+  return (
+    <svg
+      width="282"
+      height="53"
+      viewBox="0 0 282 53"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M70.3217 32.8756C69.9641 32.3906 69.3682 32.027 68.7722 32.027H59.3563H58.7604H56.3766C55.8998 32.027 55.4231 32.027 55.0655 31.9057C53.2777 31.6633 51.7282 30.9359 50.4171 29.8449C50.4171 29.8449 50.4171 29.8449 50.298 29.7236C50.1788 29.6024 49.9404 29.3599 49.8212 29.2387C48.7485 28.0264 48.0334 26.4505 48.0334 24.8745C48.0334 24.8745 48.0334 23.6622 48.0334 22.0863C48.0334 21.6013 48.0334 21.1164 48.0334 20.6315C48.0334 20.1466 48.0334 19.6617 48.0334 19.1768C48.0334 17.6008 48.0334 16.3885 48.0334 16.3885C48.0334 14.8126 48.6293 13.2366 49.8212 12.0243C49.9404 11.9031 50.1788 11.6606 50.298 11.5394C50.298 11.5394 50.298 11.5394 50.4171 11.4182C51.7282 10.3271 53.2777 9.59976 55.0655 9.3573C55.5423 9.23607 55.8998 9.23607 56.3766 9.23607H58.7604H59.3563H68.7722C69.3682 9.23607 69.9641 8.99362 70.3217 8.38748L73.6589 3.65958C74.1357 3.05344 74.1357 2.20484 73.7781 1.47747C73.4206 1.11379 72.7054 0.628876 71.9903 0.628876H59.2371H56.2574C55.7806 0.628876 55.3039 0.628876 54.9463 0.628876C54.8271 0.628876 54.7079 0.628876 54.5887 0.628876C54.2312 0.628876 53.8736 0.750104 53.5161 0.750104C53.3969 0.750104 53.2777 0.750104 53.1585 0.750104C52.205 0.871332 51.3707 1.11379 50.5363 1.47747H50.4171C50.298 1.47747 50.298 1.5987 50.1788 1.5987C49.8212 1.71993 49.4636 1.84116 49.1061 2.08361C48.8677 2.20484 48.6293 2.32607 48.3909 2.4473C48.1526 2.56853 47.9142 2.68975 47.6758 2.81098C46.4839 3.41712 45.4112 4.26572 44.4577 5.11432C44.2193 5.35677 43.981 5.59923 43.7426 5.84169C41.0012 8.62993 39.571 12.0243 39.4518 15.7824C39.4518 15.9036 39.4518 16.0249 39.4518 16.1461C39.4518 16.1461 39.4518 17.4796 39.4518 19.1768C39.4518 19.6617 39.4518 20.1466 39.4518 20.6315C39.4518 21.1164 39.4518 21.6013 39.4518 22.0863C39.4518 23.7835 39.4518 25.117 39.4518 25.117C39.4518 25.2382 39.4518 25.3594 39.4518 25.4806C39.571 29.2387 41.0012 32.6331 43.7426 35.4214C43.981 35.6638 44.2193 35.9063 44.4577 36.1487C45.4112 36.9973 46.4839 37.8459 47.6758 38.4521C47.9142 38.5733 48.1526 38.6945 48.3909 38.8157C48.6293 38.937 48.8677 39.0582 49.1061 39.1794C49.4636 39.3007 49.8212 39.4219 50.1788 39.6643C50.298 39.6643 50.298 39.7856 50.4171 39.7856H50.5363C51.3707 40.028 52.3242 40.2705 53.1585 40.5129C53.2777 40.5129 53.3969 40.5129 53.5161 40.5129C53.8736 40.5129 54.2312 40.6342 54.5887 40.6342C54.7079 40.6342 54.8271 40.6342 54.9463 40.6342C55.4231 40.6342 55.8998 40.6342 56.2574 40.6342H59.2371H71.8711C72.5862 40.6342 73.3014 40.1493 73.6589 39.5431C74.0165 38.8157 74.0165 37.9671 73.5398 37.361L70.3217 32.8756Z"
+        fill="white"
+      />
+      <path
+        d="M18.951 0.628418H5.2443C3.81404 0.628418 2.50296 1.11333 1.54945 2.08316C0.595944 3.05298 0 4.38649 0 5.72V38.0879C0 38.8153 0.238377 39.4214 0.715132 40.0276C0.95351 40.1488 1.19189 40.27 1.19189 40.3912C1.54945 40.6337 2.02621 40.7549 2.50296 40.7549H4.40998C4.64836 40.7549 4.76755 40.7549 5.00593 40.7549H18.7126C28.0093 40.7549 35.5182 33.6025 35.5182 24.9953V24.0254V16.5093C35.7566 7.65965 28.2477 0.628418 18.951 0.628418ZM27.175 24.9953C27.175 26.8137 26.3407 28.6321 24.9104 29.9656C24.6721 30.2081 24.3145 30.4505 23.9569 30.693C22.5267 31.6628 20.6196 32.1477 18.8318 32.1477H11.0846H9.65429H8.70078V9.35684H18.951C21.2156 9.35684 23.2418 10.0842 24.7913 11.5389C26.3407 12.8725 27.0558 14.6909 27.0558 16.5093V24.9953H27.175Z"
+        fill="white"
+      />
+      <path
+        d="M98.4492 8.3887H85.8152C85.4576 8.3887 85.2192 8.63116 85.2192 8.99484V19.5417V21.2389V31.7857C85.2192 32.1494 85.4576 32.3919 85.8152 32.3919H98.4492C102.025 32.3919 104.885 29.6036 105.005 26.088V21.2389V19.5417V14.6926V14.5713C105.005 11.1769 102.144 8.3887 98.4492 8.3887ZM100.237 19.6629V21.2389V26.088C100.237 27.0578 99.4027 27.9064 98.4492 27.9064H90.5827C90.2252 27.9064 89.9868 27.664 89.9868 27.3003V21.2389V19.5417V13.7227C89.9868 13.3591 90.2252 13.1166 90.5827 13.1166H98.4492C99.4027 13.1166 100.237 13.844 100.237 14.935V19.6629Z"
+        fill="white"
+      />
+      <path
+        d="M207.745 47.6662C207.864 47.6662 209.056 47.1813 209.056 45.3629C209.056 44.0293 208.46 42.8171 206.434 42.8171H203.216V52.7578H206.434C208.579 52.7578 209.414 51.6667 209.414 50.0908C209.414 47.9086 207.864 47.6662 207.745 47.6662ZM203.693 43.1807H206.315C208.103 43.1807 208.579 44.0293 208.579 45.3629C208.579 46.5751 207.983 47.545 206.315 47.545H203.693V43.1807ZM206.434 52.2729H203.693V47.9086H206.315C207.983 47.9086 208.818 48.636 208.818 50.0908C208.818 51.4243 208.341 52.2729 206.434 52.2729Z"
+        fill="white"
+      />
+      <path
+        d="M217.639 42.8172L214.301 48.03L211.083 42.8172C211.083 42.8172 211.083 42.8172 210.845 42.8172C210.606 42.8172 210.487 42.8172 210.487 42.8172L214.063 48.5149V52.6367C214.063 52.6367 214.182 52.6367 214.301 52.6367C214.421 52.6367 214.54 52.6367 214.54 52.6367V48.5149L218.235 42.8172C218.235 42.8172 218.115 42.8172 217.877 42.8172C217.758 42.696 217.639 42.8172 217.639 42.8172Z"
+        fill="white"
+      />
+      <path
+        d="M228.365 44.393H232.537C232.537 44.393 232.656 44.393 232.775 44.2718L233.49 43.1807C233.49 43.1807 233.49 43.0595 233.49 42.9383C233.49 42.9383 233.371 42.8171 233.252 42.8171H228.365C225.504 42.8171 223.597 44.7567 223.597 47.6662C223.597 50.4544 225.624 52.6365 228.365 52.6365H233.252C233.371 52.6365 233.371 52.6365 233.49 52.5153C233.49 52.3941 233.49 52.3941 233.49 52.2729L232.775 51.303C232.775 51.303 232.656 51.1818 232.537 51.1818H229.08C226.577 51.1818 225.147 49.9695 225.147 47.7874C225.147 46.2115 226.22 44.393 228.365 44.393Z"
+        fill="white"
+      />
+      <path
+        d="M240.284 42.8171C236.589 42.8171 234.682 44.5143 234.682 47.9086C234.682 51.303 236.47 53.0002 240.284 53.0002C243.979 53.0002 245.886 51.303 245.886 47.9086C245.886 44.393 243.979 42.8171 240.284 42.8171ZM240.284 51.303C237.424 51.303 236.232 50.3332 236.232 47.7874C236.232 45.2416 237.305 44.2718 240.284 44.2718C243.145 44.2718 244.337 45.2416 244.337 47.7874C244.337 50.3332 243.264 51.303 240.284 51.303Z"
+        fill="white"
+      />
+      <path
+        d="M257.924 46.2116C257.924 44.8781 257.328 43.9083 256.255 43.4234C255.54 43.0597 254.586 43.0597 254.11 43.0597H247.077C246.958 43.0597 246.958 43.0597 246.839 43.1809C246.839 43.3021 246.839 43.3021 246.839 43.4234L247.554 44.5144C247.554 44.5144 247.673 44.6356 247.793 44.6356H253.514C255.421 44.6356 256.255 45.2418 256.255 46.4541C256.255 47.5451 255.182 48.2725 253.514 48.2725H247.912C247.793 48.2725 247.673 48.3937 247.673 48.5149V52.6367C247.673 52.7579 247.793 52.8792 247.912 52.8792H248.984C249.104 52.8792 249.223 52.7579 249.223 52.6367V49.7272H254.348L256.136 52.7579H256.255H257.685C257.804 52.7579 257.804 52.7579 257.924 52.6367C257.924 52.5155 257.924 52.3942 257.924 52.3942L256.017 49.1211C256.851 48.7574 257.924 47.7876 257.924 46.2116Z"
+        fill="white"
+      />
+      <path
+        d="M271.035 43.0589C271.035 43.0589 270.916 42.9377 270.796 42.9377H269.485C269.366 42.9377 269.366 42.9377 269.247 43.0589L264.837 50.6963L260.546 43.0589C260.546 43.0589 260.427 42.9377 260.308 42.9377H258.997C258.877 42.9377 258.877 42.9377 258.758 43.0589C258.758 43.0589 258.758 43.1802 258.758 43.3014L263.883 52.2723C264.003 52.5147 264.36 52.8784 264.837 52.8784C265.194 52.8784 265.552 52.636 265.79 52.2723L270.916 43.3014C271.154 43.1802 271.154 43.0589 271.035 43.0589Z"
+        fill="white"
+      />
+      <path
+        d="M282.001 52.2721L276.875 43.3012C276.637 43.18 276.399 42.6951 275.803 42.6951C275.207 42.6951 274.968 43.0588 274.849 43.3012L269.724 52.2721C269.724 52.2721 269.724 52.3934 269.724 52.5146C269.724 52.5146 269.843 52.6358 269.962 52.6358H271.274C271.393 52.6358 271.393 52.6358 271.512 52.5146L275.922 44.8772L279.498 51.1811H275.326C275.326 51.1811 275.207 51.1811 275.088 51.3023L274.372 52.3934C274.372 52.3934 274.372 52.5146 274.372 52.6358C274.372 52.6358 274.492 52.757 274.611 52.757H281.643C281.762 52.757 281.762 52.757 281.881 52.6358C282.001 52.3934 282.001 52.2721 282.001 52.2721Z"
+        fill="white"
+      />
+      <path
+        d="M261.619 32.6341H265.075C265.433 32.6341 265.79 32.3916 265.79 31.9067V13.7225C265.79 13.3588 266.029 12.9951 266.506 12.9951H274.372C275.326 12.9951 276.16 13.7225 276.16 14.8136V18.5716C276.16 19.5415 275.326 20.3901 274.372 20.3901H269.605C269.366 20.3901 269.009 20.5113 268.889 20.875L267.817 24.3906C267.698 24.8755 268.055 25.2392 268.532 25.2392H271.869L275.922 32.2704C276.041 32.5129 276.279 32.6341 276.517 32.6341H280.57C281.047 32.6341 281.404 32.028 281.166 31.6643L277.113 24.7543C279.378 23.7844 280.927 21.6023 281.047 19.0566V18.8141V14.8136V14.6923C281.047 11.1767 278.067 8.26725 274.491 8.26725H261.738C261.381 8.26725 261.023 8.50971 261.023 8.99462V32.028C261.023 32.3916 261.261 32.6341 261.619 32.6341Z"
+        fill="white"
+      />
+      <path
+        d="M142.55 8.75289L136.829 26.9371V26.8159L133.849 17.6025L131.823 11.5411L130.989 8.87412C130.869 8.63166 130.631 8.38921 130.273 8.38921H125.148H122.407H108.343C107.985 8.38921 107.747 8.63166 107.747 8.99535V15.7841V31.9075C107.747 32.2711 107.985 32.6348 108.343 32.6348H123.599H127.651C128.128 32.6348 128.486 32.2711 128.366 31.7862L127.294 28.2706C127.174 28.0282 126.936 27.7857 126.579 27.7857H125.387H113.349C112.991 27.7857 112.753 27.5432 112.753 27.1796V23.5427C112.753 23.179 112.991 22.9366 113.349 22.9366H122.049C122.407 22.9366 122.645 22.6941 122.645 22.3304V18.9361C122.645 18.5724 122.407 18.3299 122.049 18.3299H113.349C112.991 18.3299 112.753 18.0875 112.753 17.7238V16.269V14.2082C112.753 13.8445 112.991 13.602 113.349 13.602H126.698L132.776 32.6348C132.896 32.8773 133.134 33.1197 133.491 33.1197H140.047C140.285 33.1197 140.643 32.9985 140.762 32.6348L148.39 8.75289H143.265C142.907 8.26798 142.669 8.51043 142.55 8.75289Z"
+        fill="white"
+      />
+      <path
+        d="M168.056 8.26725H161.5C157.925 8.26725 155.064 11.0555 154.945 14.5711V14.6923V19.7839V20.3901V20.7537V21.2387V26.3302V26.4515C154.945 29.9671 157.925 32.7553 161.5 32.7553H168.056C171.631 32.7553 174.492 29.9671 174.611 26.4515V26.0878C174.611 25.8453 174.373 25.6029 174.134 25.6029H170.32C170.082 25.6029 169.843 25.8453 169.843 26.0878C169.843 27.0576 169.009 27.9062 168.056 27.9062H161.739C160.785 27.9062 159.951 27.1788 159.951 26.0878V21.2387V20.6325V20.2688V19.6627V14.6923C159.951 13.7225 160.785 12.8739 161.739 12.8739H168.056C169.009 12.8739 169.843 13.7225 169.843 14.6923C169.843 14.9348 170.082 15.1773 170.32 15.1773H174.134C174.373 15.1773 174.611 14.9348 174.611 14.6923V14.4499C174.492 11.1767 171.631 8.26725 168.056 8.26725Z"
+        fill="white"
+      />
+      <path
+        d="M194.754 8.38921H191.774H177.71C177.352 8.38921 177.114 8.63166 177.114 8.99535V15.7841V31.7862C177.114 32.1499 177.352 32.3924 177.71 32.3924H194.754C195.111 32.3924 195.35 32.1499 195.35 31.7862V28.2706C195.35 27.9069 195.111 27.6645 194.754 27.6645H182.835C182.477 27.6645 182.239 27.422 182.239 27.0583V23.4215C182.239 23.0578 182.477 22.8154 182.835 22.8154H191.536C191.893 22.8154 192.132 22.5729 192.132 22.2092V18.8148C192.132 18.4511 191.893 18.2087 191.536 18.2087H182.835C182.477 18.2087 182.239 17.9662 182.239 17.6025V16.1478V14.2082C182.239 13.8445 182.477 13.602 182.835 13.602H194.754C195.111 13.602 195.35 13.3596 195.35 12.9959V9.11657C195.35 8.63166 195.111 8.38921 194.754 8.38921Z"
+        fill="white"
+      />
+      <path
+        d="M240.523 32.6341H257.686C258.043 32.6341 258.401 32.3916 258.401 31.9067V28.5123C258.401 28.1487 258.162 27.785 257.686 27.785H245.528C245.171 27.785 244.813 27.5425 244.813 27.0576V23.4208C244.813 23.0571 245.052 22.6934 245.528 22.6934H254.229C254.587 22.6934 254.944 22.4509 254.944 21.966V18.5716C254.944 18.208 254.706 17.8443 254.229 17.8443H245.528C245.171 17.8443 244.813 17.6018 244.813 17.1169V15.6622V13.6013C244.813 13.2376 245.052 12.8739 245.528 12.8739H257.566C257.924 12.8739 258.282 12.6315 258.282 12.1465V8.99462C258.282 8.63093 258.043 8.26725 257.566 8.26725H254.587H240.523C240.165 8.26725 239.807 8.50971 239.807 8.99462V15.7834V31.9067C239.807 32.3916 240.046 32.6341 240.523 32.6341Z"
+        fill="white"
+      />
+      <path
+        d="M225.146 32.5136H230.033C230.152 32.5136 230.272 32.3924 230.272 32.2712V13.8445C230.272 13.602 230.51 13.3596 230.748 13.3596H236.708C236.827 13.3596 236.946 13.2383 236.946 13.1171V8.75289C236.946 8.63166 236.827 8.51043 236.708 8.51043H213.228C213.108 8.51043 212.989 8.63166 212.989 8.75289V21.1182C212.989 21.3606 212.87 21.4818 212.632 21.6031C212.393 21.7243 212.155 21.6031 212.036 21.3606L203.097 8.38921H198.21C198.091 8.38921 197.971 8.51043 197.971 8.63166V32.1499C197.971 32.2712 198.091 32.3924 198.21 32.3924H202.739C202.858 32.3924 202.977 32.2712 202.977 32.1499V19.1785C202.977 18.9361 203.097 18.8148 203.335 18.6936C203.573 18.5724 203.812 18.6936 203.931 18.9361L213.228 32.5136H217.757C217.876 32.5136 217.995 32.3924 217.995 32.2712V13.3596H224.312C224.551 13.3596 224.789 13.602 224.789 13.8445V32.1499C224.908 32.3924 225.027 32.5136 225.146 32.5136Z"
+        fill="white"
+      />
+    </svg>
+  );
+}
+
+export default memo(Icon);

package/src/CLI/screens/LoginScreen/components/SSOButton.js

@@ -0,0 +1,113 @@
+/* eslint-disable react/prop-types */
+import { useState } from 'react';
+
+import {
+  Avatar,
+  ButtonBase,
+  CircularProgress,
+  Grid,
+  Typography,
+  withStyles,
+} from '@material-ui/core';
+import { getSSOProvider } from '@corva/ui/clients/sso';
+
+import googleLogoSrc from '~/components/Login/assets/images/google_logo.svg';
+import microsoftLogoSrc from '~/components/Login/assets/images/microsoft_logo.svg';
+
+const muiStyles = theme => ({
+  button: {
+    width: '100%',
+    height: 56,
+    fontSize: 16,
+    fontWeight: 400,
+    color: '#fff',
+    display: 'inline-flex',
+    padding: 0,
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    whiteSpace: 'nowrap',
+    borderRadius: 4,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: '#616161',
+    textDecoration: 'none',
+    '&:hover': {
+      borderColor: theme.status.loginButton,
+    },
+  },
+  logo: {
+    height: 30,
+    width: 30,
+    margin: 12,
+  },
+  avatar: {
+    height: 30,
+    width: 30,
+    margin: 12,
+    color: '#ffffff',
+    backgroundColor: theme.status.loginButton,
+  },
+  progressRoot: {
+    margin: '12px 24px',
+  },
+  progressColor: {
+    color: theme.status.loginButton,
+  },
+});
+
+const PROVIDER_TO_LOGO = {
+  google: googleLogoSrc,
+  microsoft: microsoftLogoSrc,
+};
+
+function SSOButton({ platform, connection, title, provider, classes }) {
+  const [clicked, setClicked] = useState(false);
+
+  const handleClick = e => {
+    e.preventDefault();
+    if (!clicked) {
+      setClicked(true);
+      localStorage.setItem('ssoPlatform', platform.identifier);
+      const ssoProvider = getSSOProvider(platform.identifier);
+      ssoProvider.configure(platform.options);
+      ssoProvider.authorize(connection);
+    }
+  };
+
+  const logoSrc = PROVIDER_TO_LOGO[provider];
+
+  return (
+    <ButtonBase className={classes.button} onClick={handleClick}>
+      <Grid container justify="space-between" alignItems="center">
+        <Grid item>
+          <Grid container justify="flex-start" alignItems="center">
+            <Grid item>
+              {logoSrc ? (
+                <img className={classes.logo} src={logoSrc} alt={title} />
+              ) : (
+                <Avatar className={classes.avatar}>{title && title[0].toUpperCase()}</Avatar>
+              )}
+            </Grid>
+            <Grid item>
+              <Typography variant="body2">{title}</Typography>
+            </Grid>
+          </Grid>
+        </Grid>
+        <Grid item>
+          {clicked && (
+            <CircularProgress
+              classes={{
+                root: classes.progressRoot,
+                colorPrimary: classes.progressColor,
+              }}
+              color="primary"
+              size={30}
+            />
+          )}
+        </Grid>
+      </Grid>
+    </ButtonBase>
+  );
+}
+
+export default withStyles(muiStyles)(SSOButton);

package/src/CLI/screens/LoginScreen/components/index.js

@@ -0,0 +1,2 @@
+export { default as Auth } from './Auth';
+export { default as IconLogo } from './IconLogo';

package/src/CLI/screens/LoginScreen/index.js

@@ -0,0 +1 @@
+export { default } from './LoginScreen';

package/src/CLI/screens/OAuthCallbackScreen/index.js

@@ -0,0 +1,51 @@
+import { useEffect } from 'react';
+import { LoadingIndicator } from '@corva/ui/components';
+import { showErrorNotification } from '@corva/ui/utils';
+import { getUserAuthPlatform } from '@corva/ui/clients/jsonApi';
+import { getSSOProvider } from '@corva/ui/clients/sso';
+
+import { useAuth } from '../../context';
+
+const ERROR_MESSAGE =
+  'Sorry, but we couldn’t log you in. Please contact Corva support if you need assistance';
+
+function OAuthScreen({ router }) {
+  const { login } = useAuth();
+
+  const handleSuccess = (platform, accessToken) => {
+    login(platform, { token: accessToken }, () => router.push('/'));
+  };
+
+  const handleFailure = error => {
+    console.error(error);
+    showErrorNotification(ERROR_MESSAGE);
+    router.push('/login');
+  };
+
+  const configureAuthenticationPlatform = async () => {
+    const identifier = localStorage.getItem('ssoPlatform');
+    localStorage.removeItem('ssoPlatform');
+    const { platform } = await getUserAuthPlatform(identifier);
+    const ssoProvider = getSSOProvider(platform.identifier);
+
+    if (!ssoProvider) {
+      return handleFailure(`No authentication platform found for ${platform.identifier}`);
+    }
+
+    try {
+      ssoProvider.configure(platform.options);
+      const accessToken = await ssoProvider.authenticate();
+      return handleSuccess(platform.identifier, accessToken);
+    } catch (error) {
+      return handleFailure(error);
+    }
+  };
+
+  useEffect(() => {
+    configureAuthenticationPlatform();
+  }, []);
+
+  return <LoadingIndicator fullscreen={false} />;
+}
+
+export default OAuthScreen;

package/src/CLI/screens/index.js

@@ -0,0 +1,2 @@
+export { default as LoginScreen } from './LoginScreen';
+export { default as OAuthCallbackScreen } from './OAuthCallbackScreen';

package/src/cjs/devcenter/index.js

@@ -0,0 +1 @@
+export * from './webpack';

package/src/cjs/devcenter/webpack/DevServerEntryPoint.js

@@ -0,0 +1,16 @@
+import ReactDOM from 'react-dom';
+import withCorvaMagicHOC from '../../../CLI/hocs/withCorvaMagicHOC';
+
+Promise.all([
+  import(/* webpackMode: "lazy" */ `${process.env.DEV_CENTER_APP_PATH}/src/index.js`),
+  import(/* webpackMode: "lazy" */ `${process.env.DEV_CENTER_APP_PATH}/manifest.json`),
+  import(/* webpackMode: "lazy" */ `${process.env.DEV_CENTER_APP_PATH}/package.json`),
+]).then(([index, manifest, packageJson]) => {
+  const AppComponent = withCorvaMagicHOC({
+    component: index.default.component,
+    settings: index.default.settings,
+    manifest: manifest.default,
+    packageJson: packageJson.default,
+  });
+  ReactDOM.render(<AppComponent />, document.getElementById('root'));
+});

package/src/cjs/devcenter/webpack/DevServerIsolatedAppEntryPoint.js

@@ -0,0 +1,49 @@
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/core';
+import * as corvaUI from '@corva/ui';
+import { DevCenterIsolatedAppPage } from '@corva/ui/components';
+
+// NOTE: All @corva/ui imports inside the app in LTF are treated as externals to make it work as on Corva Dashboards
+window['@corva/ui'] = corvaUI;
+
+const useStyles = makeStyles(() => ({
+  reportsContainer: {
+    zoom: '0.5',
+  },
+}));
+
+function DevServerIsolatedAppPageEntry({ CLIAppComponent, CLIAppSettings }) {
+  const classes = useStyles();
+
+  return (
+    <DevCenterIsolatedAppPage
+      CLIAppComponent={CLIAppComponent}
+      CLIAppSettings={CLIAppSettings}
+      containerReportClassName={classes.reportsContainer}
+    />
+  );
+}
+
+DevServerIsolatedAppPageEntry.propTypes = {
+  CLIAppComponent: PropTypes.node,
+  CLIAppSettings: PropTypes.node,
+};
+
+DevServerIsolatedAppPageEntry.defaultProps = {
+  CLIAppComponent: null,
+  CLIAppSettings: null,
+};
+
+import(/* webpackMode: "lazy" */ `${process.env.DEV_CENTER_APP_PATH}/src/index.js`).then(index => {
+  const CLIAppComponent = index.default.component;
+  const CLIAppSettings = index.default.settings;
+
+  ReactDOM.render(
+    <DevServerIsolatedAppPageEntry
+      CLIAppComponent={CLIAppComponent}
+      CLIAppSettings={CLIAppSettings}
+    />,
+    document.getElementById('root')
+  );
+});

package/src/cjs/devcenter/webpack/constants.js

@@ -0,0 +1,71 @@
+export const CORVA_GLOBAL_DEPENDENCIES = {
+  '@corva/ui': '', // NOTE: Any version is allowed
+  '@material-ui/core': '4.11.2',
+  '@material-ui/icons': '4.9.1',
+  '@material-ui/lab': '4.0.0-alpha.57',
+  '@material-ui/pickers': '3.2.10',
+  '@rollbar/react': '0.11.1',
+  classnames: '2.2.6',
+  'corva-convert-units': '1.10.33',
+  highcharts: '8.1.2',
+  'highcharts-react-official': '2.2.2',
+  html2canvas: '1.0.0-alpha.12',
+  '@icon-park/react': '1.4.2',
+  jsona: '1.5.1',
+  lodash: '^4.17.4',
+  'mapbox.js': '3.2.1',
+  moment: '2.29.4',
+  'moment-timezone': '0.5.43',
+  react: '17.0.1',
+  'react-dom': '17.0.1',
+  'react-grid-layout': '1.3.4',
+  'react-sortable-hoc': '0.6.8',
+  'react-sizeme': '2.5.2',
+  'react-redux': '5.1.1',
+  'react-virtualized': '9.21.2',
+  redux: '3.7.2',
+  'redux-thunk': '2.3.0',
+  reselect: '2.5.4',
+  rollbar: '2.5.1',
+  'prop-types': '^15.6.1',
+  uuid: '3.4.0',
+};
+
+export const UNSUPPORTED_DEPENDENCIES = [
+  { dependency: 'date-fns', alternative: 'moment' },
+  { dependency: 'date-fns-tz', alternative: 'moment-timezone' },
+  { dependency: 'date-fns-timezone', alternative: 'moment-timezone' },
+];
+
+export const CORVA_API_ENVS = {
+  qa: 'qa',
+  staging: 'staging',
+  production: 'production',
+};
+
+const REACT_APP_AUTH0_ENV_VARIABLES = {
+  REACT_APP_AUTH0_REDIRECT_URI: 'http://app.local.corva.ai:8080/login/oauth-callback',
+  REACT_APP_AUTH0_DOMAIN: 'corva.auth0.com',
+  REACT_APP_AUTH0_CLIENT_ID: 'L1B0xGD5AuXwuTDFdFA9czDTM7Vvw464',
+};
+
+export const CORVA_API_ENV_VARIABLES = {
+  [CORVA_API_ENVS.qa]: {
+    ...REACT_APP_AUTH0_ENV_VARIABLES,
+    REACT_APP_API_URL: 'https://api.qa.corva.ai',
+    REACT_APP_SUBSCRIPTIONS_URL: 'https://subscriptions.qa.corva.ai',
+    REACT_APP_AUTH0_AUDIENCE: 'https://api.qa.corva.ai/v1',
+  },
+  [CORVA_API_ENVS.staging]: {
+    ...REACT_APP_AUTH0_ENV_VARIABLES,
+    REACT_APP_API_URL: 'https://api.staging.corva.ai',
+    REACT_APP_SUBSCRIPTIONS_URL: 'https://subscriptions.staging.corva.ai',
+    REACT_APP_AUTH0_AUDIENCE: 'https://api.staging.corva.ai/v1',
+  },
+  [CORVA_API_ENVS.production]: {
+    ...REACT_APP_AUTH0_ENV_VARIABLES,
+    REACT_APP_API_URL: 'https://api.corva.ai',
+    REACT_APP_SUBSCRIPTIONS_URL: 'https://subscriptions.corva.ai',
+    REACT_APP_AUTH0_AUDIENCE: 'https://api.corva.ai/v1',
+  },
+};

package/src/cjs/devcenter/webpack/index.js

@@ -0,0 +1,7 @@
+import getDevConfig from './webpack.config.dev';
+import getProdConfig from './webpack.config.prod';
+
+export function getWebpackConfig(env, argv) {
+  if (argv.mode === 'development') return getDevConfig(env, argv);
+  return getProdConfig(env, argv);
+}