Merge pull request #65 from zenml-io/talha/feedback-fixes

configuration for demo

Author: danialraza03

src/App.tsx

@@ -11,6 +11,15 @@ import './App.css';
 import './ui/default.css';
 
 const { store, persistor } = configureStore();
+if (
+  process.env.REACT_APP_DEMO_SETUP === 'true' &&
+  (process.env.REACT_APP_USERNAME === undefined ||
+    process.env.REACT_APP_PASSWORD === undefined)
+) {
+  console.warn(
+    'You need to add process.env.REACT_APP_USERNAME and process.env.REACT_APP_PASSWORD in .env file.',
+  );
+}
 
 const App: React.FC = () => {
   return (

src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedHeader.tsx

@@ -87,24 +87,26 @@ export const AuthenticatedHeader: React.FC<{
                         <Paragraph size="small">Settings</Paragraph>
                       </FlexBox>
                     </LinkBox>
-                    <LinkBox onClick={logout}>
-                      <FlexBox
-                        className={styles.popupItem}
-                        paddingHorizontal="md"
-                        paddingVertical="sm"
-                        alignItems="center"
-                      >
-                        <Box paddingRight="sm">
-                          <icons.signOut
-                            size={iconSizes.sm}
-                            color={iconColors.red}
-                          />
-                        </Box>
-                        <Paragraph color="red" size="small">
-                          Logout
-                        </Paragraph>
-                      </FlexBox>
-                    </LinkBox>
+                    {process.env.REACT_APP_DEMO_SETUP === 'true' ? null : (
+                      <LinkBox onClick={logout}>
+                        <FlexBox
+                          className={styles.popupItem}
+                          paddingHorizontal="md"
+                          paddingVertical="sm"
+                          alignItems="center"
+                        >
+                          <Box paddingRight="sm">
+                            <icons.signOut
+                              size={iconSizes.sm}
+                              color={iconColors.red}
+                            />
+                          </Box>
+                          <Paragraph color="red" size="small">
+                            Logout
+                          </Paragraph>
+                        </FlexBox>
+                      </LinkBox>
+                    )}
                   </Box>
                 </OutsideClickHandler>
               )}

src/ui/layouts/session/Login/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 import {
   H2,
@@ -8,6 +8,7 @@ import {
   Box,
   Image,
   EaseInBox,
+  FullWidthSpinner,
 } from '../../../components';
 
 import { Form } from './Form';
@@ -18,8 +19,63 @@ import image from '../imageNew.png';
 import { translate } from './translate';
 import { routePaths } from '../../../../routes/routePaths';
 import { Link } from 'react-router-dom';
+import { useDispatch, usePushRoute } from '../../../hooks';
 
+import { loginAction } from '../../../../redux/actions/session/loginAction';
+import { showToasterAction, userActions } from '../../../../redux/actions';
+import { toasterTypes } from '../../../../constants';
 const Login: React.FC = () => {
+  const [loading, setLoading] = useState(false);
+  const dispatch = useDispatch();
+  const password = process.env.REACT_APP_PASSWORD;
+  const username = process.env.REACT_APP_USERNAME;
+  const { push } = usePushRoute();
+  const login = async () => {
+    setLoading(true);
+
+    await dispatch(
+      loginAction({
+        password,
+        username,
+        onFailure: (errorText) => {
+          dispatch(
+            showToasterAction({
+              description: errorText,
+              type: toasterTypes.failure,
+            }),
+          );
+          setLoading(false);
+        },
+        onSuccess: async () => {
+          dispatch(
+            showToasterAction({
+              description: translate('toasts.successfulLogin.text'),
+              type: toasterTypes.success,
+            }),
+          );
+          setLoading(false);
+
+          await dispatch(userActions.getMy({}));
+          await push(routePaths.userEmail);
+        },
+      }),
+    );
+  };
+  useEffect(() => {
+    if (process.env.REACT_APP_DEMO_SETUP === 'true') {
+      setLoading(true);
+      login();
+    }
+    return () => {
+      setLoading(false);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  if (loading) {
+    return <FullWidthSpinner color="black" size="md" />;
+  }
+
   return (
     <EaseInBox>
       <Container