Add login flow

src/renderer/components/Nav/Sidebar.tsx

@@ -1,9 +1,6 @@
 import { useNavigate } from 'react-router-dom';
 import { useState, useEffect } from 'react';
 
-import List from '@mui/joy/List';
-import Divider from '@mui/joy/Divider';
-
 import {
   CodeIcon,
   GraduationCapIcon,
@@ -24,14 +21,21 @@ import {
   WorkflowIcon,
   UserIcon,
   LogOutIcon,
+  LogInIcon,
 } from 'lucide-react';
 
 import { RiImageAiLine } from 'react-icons/ri';
 
 import {
   Box,
   ButtonGroup,
+  Divider,
   IconButton,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemContent,
+  ListItemDecorator,
   Sheet,
   Tooltip,
   Typography,
@@ -40,10 +44,13 @@ import {
 import {
   useModelStatus,
   usePluginStatus,
+  useAPI,
+  logout,
   getFullPath,
 } from 'renderer/lib/transformerlab-api-sdk';
 
 import SelectExperimentMenu from '../Experiment/SelectExperimentMenu';
+import UserLoginModal from '../User/UserLoginModal';
 
 import SubNavItem from './SubNavItem';
 import ColorSchemeToggle from './ColorSchemeToggle';
@@ -218,10 +225,70 @@ function GlobalMenuItems({ DEV_MODE, experimentInfo, outdatedPluginsCount }) {
   );
 }
 
+function UserDetailsPanel({userDetails, mutate}) {
+  return (
+    <>
+      <UserIcon />
+      <Box
+        sx={{ minWidth: 0, flex: 1 }}
+      >
+        <Typography
+          level="title-sm"
+          sx={{
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+          }}
+        >
+          {userDetails?.name}
+        </Typography>
+        <Typography
+          level="body-xs"
+          sx={{
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+          }}
+        >
+          {userDetails?.email}
+        </Typography>
+      </Box>
+
+      <IconButton
+        size="sm"
+        variant="plain"
+        color="neutral"
+        sx={{
+          cursor: 'pointer',
+          '&:hover': {
+            backgroundColor: 'var(--joy-palette-neutral-100)',
+            borderRadius: 'sm',
+          },
+        }}
+      >
+        <LogOutIcon
+          size="18px"
+          onClick={async() => {
+            await logout();
+            mutate();
+            alert("User logged out.");
+          }}
+        />
+      </IconButton>
+    </>
+  );
+}
+
 function BottomMenuItems({ DEV_MODE, navigate, themeSetter }) {
+  const [userLoginModalOpen, setUserLoginModalOpen] = useState(false);
+  const { data: userInfo, error: userError, isLoading: userLoading, mutate: userMutate } = useAPI('users', ['me'], {});
+
+  if (userError) {
+    console.log(userError);
+  }
+
   return (
     <>
-      {' '}
       <Divider sx={{ my: 2 }} />
       <Box
         sx={{
@@ -232,37 +299,42 @@ function BottomMenuItems({ DEV_MODE, navigate, themeSetter }) {
           maxWidth: '180px',
         }}
       >
-        {/* <Avatar
-variant="outlined"
-size="sm"
-src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&w=286"
-/> */}
-        <UserIcon />
-        <Box sx={{ minWidth: 0, flex: 1 }}>
-          <Typography
-            level="title-sm"
-            sx={{
-              whiteSpace: 'nowrap',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-            }}
-          >
-            User Name
-          </Typography>
-          <Typography
-            level="body-xs"
-            sx={{
-              whiteSpace: 'nowrap',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-            }}
-          >
-            user@test.com
-          </Typography>
-        </Box>
-        <IconButton size="sm" variant="plain" color="neutral">
-          <LogOutIcon size="18px" />
-        </IconButton>
+
+      {(userInfo && userInfo.id) ? (
+        <UserDetailsPanel
+          userDetails={userInfo}
+          mutate={userMutate}
+        />
+      ) : (
+        <List
+          sx={{
+            '--ListItem-radius': '6px',
+            '--ListItem-minHeight': '32px',
+            overflowY: 'auto',
+            flex: 1,
+          }}
+        >
+          <ListItem className="FirstSidebar_Content">
+            <ListItemButton
+              variant='plain'
+              onClick={() => setUserLoginModalOpen(true)}
+            >
+              <ListItemDecorator sx={{ minInlineSize: '30px' }}>
+                <LogInIcon />
+              </ListItemDecorator>
+              <ListItemContent
+                sx={{
+                  display: 'flex',
+                  justifyContent: 'flex-start',
+                  alignContent: 'center',
+                }}
+              >
+                <Typography level="body-sm">Login</Typography>
+              </ListItemContent>
+            </ListItemButton>
+          </ListItem>
+        </List>
+      )}
       </Box>
       <ButtonGroup
         sx={{
@@ -300,6 +372,13 @@ src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fi
           </IconButton>
         </Tooltip>
       </ButtonGroup>
+      <UserLoginModal
+        open={userLoginModalOpen}
+        onClose={() => {
+          setUserLoginModalOpen(false);
+          userMutate();
+        }}
+      />
     </>
   );
 }

src/renderer/components/User/UserLoginModal.tsx

@@ -0,0 +1,184 @@
+import { useState } from 'react';
+
+import {
+  Modal,
+  ModalDialog,
+  Stack,
+  Typography,
+  Tab,
+  TabList,
+  TabPanel,
+  Tabs,
+  FormControl,
+  FormLabel,
+  Input,
+  Button,
+  Alert,
+} from '@mui/joy';
+
+import {
+  login,
+  registerUser
+} from 'renderer/lib/transformerlab-api-sdk';
+
+export default function UserLoginModal({ open, onClose }) {
+  const [loginErrorMessage, setLoginErrorMessage] = useState(null);
+
+  const commonTabPanelSx = {
+    p: 1,
+    pt: 4,
+    width: '100%',
+    maxWidth: '400px',
+    mx: 'auto'
+  };
+
+  const descriptionAlertSx = {
+    display: 'flex',
+    justifyContent: 'center',
+    mb: 2
+  };
+
+  return (
+    <Modal
+      open={open}
+      onClose={() => {
+        setLoginErrorMessage(null);
+        onClose();
+      }}
+    >
+      <ModalDialog
+        sx={{
+          top: '5vh',
+          margin: 'auto',
+          transform: 'translateX(-50%)',
+          width: '80vw',
+          maxWidth: '600px',
+          height: '90vh',
+        }}
+      >
+        <Tabs defaultValue="login">
+          <TabList tabFlex={1}>
+            <Tab value="login">Login</Tab>
+            <Tab value="register">Register New User</Tab>
+          </TabList>
+
+          <TabPanel value="login" sx={commonTabPanelSx}>
+            <Alert variant="plain" sx={descriptionAlertSx}>
+              <Typography level="body-sm" textColor="text.tertiary">
+                {loginErrorMessage ?
+                  loginErrorMessage :
+                  "Login with your existing account credentials."
+                }
+              </Typography>
+            </Alert>
+            <form
+              onSubmit={async (event) => {
+                event.preventDefault();
+
+                // Read login data from the form and submit
+                const formData = new FormData(event.currentTarget);
+                const username = formData.get('email') as string;
+                const password = formData.get('password') as string;
+                const result = await login(username, password);
+
+                // Check if login was successful. If not, stay on screen
+                if (result?.status == "success") {
+                  console.log(`Login attempt successful for user ${username}`);
+                  setLoginErrorMessage(null);
+                  onClose();
+                } else if (result?.status == "error") {
+                  setLoginErrorMessage(result?.message);
+                } else { // unauthorized - reset fields
+                  (event.target as HTMLFormElement).reset();
+                   setLoginErrorMessage(result?.message);
+                }
+              }}
+            >
+              <Stack spacing={2}>
+                <FormControl>
+                  <FormLabel>Email</FormLabel>
+                  <Input
+                    name="email"
+                    type="email"
+                    autoFocus
+                    required
+                    placeholder="user@example.com"
+                  />
+                </FormControl>
+                <FormControl>
+                  <FormLabel>Password</FormLabel>
+                  <Input
+                    name="password"
+                    type="password"
+                    required
+                    placeholder="Enter your password"
+                  />
+                </FormControl>
+                <Button type="submit">Login</Button>
+              </Stack>
+            </form>
+          </TabPanel>
+
+          <TabPanel value="register" sx={commonTabPanelSx}>
+            <Alert variant="plain" sx={descriptionAlertSx}>
+              <Typography level="body-sm" textColor="text.tertiary">
+                Create a new account to get started.
+              </Typography>
+            </Alert>
+            <form
+              onSubmit={async (event) => {
+                event.preventDefault();
+
+                // Read user data from the form and submit
+                const formData = new FormData(event.currentTarget);
+                const name = formData.get('name') as string;
+                const email = formData.get('email') as string;
+                const password = formData.get('password') as string;
+                const result = await registerUser(name, email, password);
+
+                // Check if login was successful. If not, stay on screen
+                if (result?.status == "success") {
+                  alert(`Registered new user ${email}`);
+                  onClose();
+                } else {
+                  alert(result?.message);
+                }
+              }}
+            >
+              <Stack spacing={2}>
+                <FormControl>
+                  <FormLabel>Name</FormLabel>
+                  <Input
+                    name="name"
+                    autoFocus
+                    required
+                    placeholder="Enter your name"
+                  />
+                </FormControl>
+                <FormControl>
+                  <FormLabel>Email</FormLabel>
+                  <Input
+                    name="email"
+                    type="email"
+                    required
+                    placeholder="user@example.com"
+                  />
+                </FormControl>
+                <FormControl>
+                  <FormLabel>Password</FormLabel>
+                  <Input
+                    name="password"
+                    type="password"
+                    required
+                    placeholder="Create a password"
+                  />
+                </FormControl>
+                <Button type="submit">Register</Button>
+              </Stack>
+            </form>
+          </TabPanel>
+        </Tabs>
+      </ModalDialog>
+    </Modal>
+  );
+}