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

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

web/src/containers/Settings/profile.tsx

@@ -0,0 +1,148 @@
+import React, { useState, useEffect, useContext } from 'react'
+import axios from 'axios'
+import {
+  Grid,
+  CircularProgress,
+  Card,
+  CardHeader,
+  Divider,
+  CardContent,
+  TextField,
+  CardActions,
+  Button,
+  FormGroup,
+  FormControlLabel,
+  Checkbox
+} from '@mui/material'
+
+import { AppContext } from '../../context/appContext'
+import { toast } from 'react-toastify'
+
+const Profile = () => {
+  const [isLoading, setIsLoading] = useState(false)
+  const appContext = useContext(AppContext)
+  const [user, setUser] = useState({} as any)
+
+  useEffect(() => {
+    setIsLoading(true)
+    axios
+      .get(`/SASjsApi/user/${appContext.userId}`)
+      .then((res: any) => {
+        setUser(res.data)
+      })
+      .catch((err) => {
+        console.log(err)
+      })
+      .finally(() => {
+        setIsLoading(false)
+      })
+  }, [])
+
+  const handleChange = (event: any) => {
+    const { name, value } = event.target
+
+    setUser({ ...user, [name]: value })
+  }
+  const handleSubmit = () => {
+    setIsLoading(true)
+    axios
+      .patch(`/SASjsApi/user/${appContext.userId}`, {
+        username: user.username,
+        displayName: user.displayName,
+        autoExec: user.autoExec
+      })
+      .then((res: any) => {
+        toast.success('User information updated', {
+          theme: 'dark',
+          position: toast.POSITION.BOTTOM_RIGHT
+        })
+      })
+      .catch((err) => {
+        toast.error('Failed: ' + err.response?.data || err.text, {
+          theme: 'dark',
+          position: toast.POSITION.BOTTOM_RIGHT
+        })
+      })
+      .finally(() => {
+        setIsLoading(false)
+      })
+  }
+
+  return isLoading ? (
+    <CircularProgress
+      style={{ position: 'absolute', left: '50%', top: '50%' }}
+    />
+  ) : (
+    <Card>
+      <CardHeader title="Profile Information" />
+      <Divider />
+      <CardContent>
+        <Grid container spacing={4}>
+          <Grid item md={6} xs={12}>
+            <TextField
+              fullWidth
+              error={user.displayName?.length === 0}
+              helperText="Please specify display name"
+              label="Display Name"
+              name="displayName"
+              onChange={handleChange}
+              required
+              value={user.displayName}
+              variant="outlined"
+            />
+          </Grid>
+
+          <Grid item md={6} xs={12}>
+            <TextField
+              fullWidth
+              error={user.username?.length === 0}
+              helperText="Please specify username"
+              label="Username"
+              name="username"
+              onChange={handleChange}
+              required
+              value={user.username}
+              variant="outlined"
+            />
+          </Grid>
+
+          <Grid item xs={6}>
+            <FormGroup row>
+              <FormControlLabel
+                disabled
+                control={<Checkbox checked={user.isActive} />}
+                label="isActive"
+              />
+              <FormControlLabel
+                disabled
+                control={<Checkbox checked={user.isAdmin} />}
+                label="isAdmin"
+              />
+            </FormGroup>
+          </Grid>
+
+          <Grid item xs={12}>
+            <TextField
+              fullWidth
+              label="autoExec"
+              name="autoExec"
+              onChange={handleChange}
+              multiline
+              rows="4"
+              value={user.autoExec}
+              variant="outlined"
+            />
+          </Grid>
+        </Grid>
+      </CardContent>
+      <Divider />
+      <CardActions>
+        <Button type="submit" variant="contained" onClick={handleSubmit}>
+          Save Changes
+        </Button>
+      </CardActions>
+    </Card>
+  )
+}
+
+export default Profile