feat(web): added profile + edit + autoexec changes

api/public/swagger.yaml

@@ -357,7 +357,7 @@ components:
                 autoExec:
                     type: string
                     description: 'User-specific auto-exec code'
-                    example: '<SAS code>'
+                    example: ""
             required:
                 - displayName
                 - username
@@ -543,7 +543,7 @@ paths:
                         application/json:
                             schema:
                                 properties:
-                                    user: {properties: {displayName: {type: string}, username: {type: string}}, required: [displayName, username], type: object}
+                                    user: {properties: {displayName: {type: string}, username: {type: string}, id: {type: number, format: double}}, required: [displayName, username, id], type: object}
                                     loggedIn: {type: boolean}
                                 required:
                                     - user

api/src/controllers/internal/Execution.ts

@@ -119,9 +119,9 @@ filename _webout "${weboutPath}" mod;
 /* dynamic user-provided vars */
 ${preProgramVarStatments}
 
-/* user auto exec starts */
-${otherArgs?.userAutoExec}
-/* user auto exec ends */
+/* user autoexec starts */
+${otherArgs?.userAutoExec ?? ''}
+/* user autoexec ends */
 
 /* actual job code */
 ${program}`

api/src/controllers/user.ts

@@ -177,7 +177,7 @@ const getUser = async (
     username: user.username,
     isActive: user.isActive,
     isAdmin: user.isAdmin,
-    autoExec: getAutoExec ? user.autoExec : undefined
+    autoExec: getAutoExec ? user.autoExec ?? '' : undefined
   }
 }
 

api/src/controllers/web.ts

@@ -97,6 +97,7 @@ const login = async (
   return {
     loggedIn: true,
     user: {
+      id: user.id,
       username: user.username,
       displayName: user.displayName
     }

api/src/model/User.ts

@@ -29,7 +29,7 @@ export interface UserPayload {
   isActive?: boolean
   /**
    * User-specific auto-exec code
-   * @example "<SAS code>"
+   * @example ""
    */
   autoExec?: string
 }

api/src/utils/validation.ts

@@ -36,7 +36,7 @@ export const registerUserValidation = (data: any): Joi.ValidationResult =>
     password: passwordSchema.required(),
     isAdmin: Joi.boolean(),
     isActive: Joi.boolean(),
-    autoExec: Joi.string()
+    autoExec: Joi.string().allow('')
   }).validate(data)
 
 export const deleteUserValidation = (
@@ -59,7 +59,7 @@ export const updateUserValidation = (
     displayName: Joi.string().min(6),
     username: usernameSchema,
     password: passwordSchema,
-    autoExec: Joi.string()
+    autoExec: Joi.string().allow('')
   }
   if (isAdmin) {
     validationChecks.isAdmin = Joi.boolean()

web/src/App.tsx

@@ -8,9 +8,11 @@ import Header from './components/header'
 import Home from './components/home'
 import Drive from './containers/Drive'
 import Studio from './containers/Studio'
+import Settings from './containers/Settings'
 
 import { AppContext } from './context/appContext'
 import AuthCode from './containers/AuthCode'
+import { ToastContainer } from 'react-toastify'
 
 function App() {
   const appContext = useContext(AppContext)
@@ -44,10 +46,14 @@ function App() {
           <Route exact path="/SASjsStudio">
             <Studio />
           </Route>
+          <Route exact path="/SASjsSettings">
+            <Settings />
+          </Route>
           <Route exact path="/SASjsLogon">
             <AuthCode />
           </Route>
         </Switch>
+        <ToastContainer />
       </HashRouter>
     </ThemeProvider>
   )

web/src/components/header.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useContext } from 'react'
+import React, { useState, useEffect, useContext } from 'react'
 import { Link, useHistory, useLocation } from 'react-router-dom'
 
 import {
@@ -11,6 +11,7 @@ import {
   MenuItem
 } from '@mui/material'
 import OpenInNewIcon from '@mui/icons-material/OpenInNew'
+import SettingsIcon from '@mui/icons-material/Settings'
 
 import Username from './username'
 import { AppContext } from '../context/appContext'
@@ -20,17 +21,23 @@ const PORT_API = process.env.PORT_API
 const baseUrl =
   NODE_ENV === 'development' ? `http://localhost:${PORT_API ?? 5000}` : ''
 
+const validTabs = ['/', '/SASjsDrive', '/SASjsStudio']
+
 const Header = (props: any) => {
   const history = useHistory()
   const { pathname } = useLocation()
   const appContext = useContext(AppContext)
   const [tabValue, setTabValue] = useState(
-    pathname === '/SASjsLogon' ? '/' : pathname
+    validTabs.includes(pathname) ? pathname : '/'
   )
   const [anchorEl, setAnchorEl] = useState<
     (EventTarget & HTMLButtonElement) | null
   >(null)
 
+  useEffect(() => {
+    setTabValue(validTabs.includes(pathname) ? pathname : '/')
+  }, [pathname])
+
   const handleMenu = (
     event: React.MouseEvent<HTMLButtonElement, MouseEvent>
   ) => {
@@ -46,7 +53,10 @@ const Header = (props: any) => {
   }
 
   const handleLogout = () => {
-    if (appContext.logout) appContext.logout()
+    if (appContext.logout) {
+      handleClose()
+      appContext.logout()
+    }
   }
   return (
     <AppBar
@@ -134,6 +144,18 @@ const Header = (props: any) => {
             open={!!anchorEl}
             onClose={handleClose}
           >
+            <MenuItem sx={{ justifyContent: 'center' }}>
+              <Button
+                component={Link}
+                to="/SASjsSettings"
+                onClick={handleClose}
+                variant="contained"
+                color="primary"
+                startIcon={<SettingsIcon />}
+              >
+                Setting
+              </Button>
+            </MenuItem>
             <MenuItem onClick={handleLogout} sx={{ justifyContent: 'center' }}>
               <Button variant="contained" color="primary">
                 Logout

web/src/components/login.tsx

@@ -27,9 +27,10 @@ const Login = () => {
     })
 
     if (loggedIn) {
-      appContext.setLoggedIn?.(loggedIn)
+      appContext.setUserId?.(user.id)
       appContext.setUsername?.(user.username)
       appContext.setDisplayName?.(user.displayName)
+      appContext.setLoggedIn?.(loggedIn)
     }
   }
 

web/src/containers/AuthCode/index.tsx

@@ -1,7 +1,7 @@
 import axios from 'axios'
 import { CopyToClipboard } from 'react-copy-to-clipboard'
 import React, { useEffect, useState } from 'react'
-import { ToastContainer, toast } from 'react-toastify'
+import { toast } from 'react-toastify'
 import 'react-toastify/dist/ReactToastify.css'
 import { useLocation } from 'react-router-dom'
 
@@ -71,8 +71,6 @@ const AuthCode = () => {
       >
         <Button variant="contained">Copy to Clipboard</Button>
       </CopyToClipboard>
-
-      <ToastContainer />
     </Box>
   )
 }

web/src/containers/Settings/index.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react'
+
+import { Box, Paper, Tab, styled } from '@mui/material'
+import TabContext from '@mui/lab/TabContext'
+import TabList from '@mui/lab/TabList'
+import TabPanel from '@mui/lab/TabPanel'
+
+import Profile from './profile'
+
+const StyledTab = styled(Tab)({
+  background: 'black',
+  margin: '0 5px 5px 0'
+})
+
+const StyledTabpanel = styled(TabPanel)({
+  flexGrow: 1
+})
+
+const Settings = () => {
+  const [value, setValue] = React.useState('profile')
+
+  const handleChange = (event: React.SyntheticEvent, newValue: string) => {
+    setValue(newValue)
+  }
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        marginTop: '65px'
+      }}
+    >
+      <TabContext value={value}>
+        <Box component={Paper} sx={{ margin: '0 5px', height: '92vh' }}>
+          <TabList
+            TabIndicatorProps={{
+              style: {
+                display: 'none'
+              }
+            }}
+            orientation="vertical"
+            onChange={handleChange}
+          >
+            <StyledTab label="Profile" value="profile" />
+          </TabList>
+        </Box>
+        <StyledTabpanel value="profile">
+          <Profile />
+        </StyledTabpanel>
+      </TabContext>
+    </Box>
+  )
+}
+
+export default Settings