feat(web): add the UI for updating user password

web/src/containers/Settings/profile.tsx

@@ -17,11 +17,13 @@ import {
 import { toast } from 'react-toastify'
 
 import { AppContext, ModeType } from '../../context/appContext'
+import UpdatePasswordModal from '../../components/passwordModal'
 
 const Profile = () => {
   const [isLoading, setIsLoading] = useState(false)
   const appContext = useContext(AppContext)
   const [user, setUser] = useState({} as any)
+  const [isPasswordModalOpen, setIsPasswordModalOpen] = useState(false)
 
   useEffect(() => {
     setIsLoading(true)
@@ -36,7 +38,7 @@ const Profile = () => {
       .finally(() => {
         setIsLoading(false)
       })
-  }, [])
+  }, [appContext.userId])
 
   const handleChange = (event: any) => {
     const { name, value } = event.target
@@ -68,82 +70,124 @@ const Profile = () => {
       })
   }
 
+  const updatePassword = (currentPassword: string, newPassword: string) => {
+    setIsLoading(true)
+    setIsPasswordModalOpen(false)
+    axios
+      .patch(`/SASjsApi/auth/updatePassword`, {
+        currentPassword,
+        newPassword
+      })
+      .then((res: any) => {
+        toast.success('Password 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"
-              disabled={appContext.mode === ModeType.Desktop}
-            />
-          </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"
-              disabled={appContext.mode === ModeType.Desktop}
-            />
-          </Grid>
-
-          <Grid item lg={6} md={8} sm={12} xs={12}>
-            <TextField
-              fullWidth
-              label="autoExec"
-              name="autoExec"
-              onChange={handleChange}
-              multiline
-              rows="10"
-              value={user.autoExec}
-              variant="outlined"
-            />
-          </Grid>
-
-          <Grid item xs={6}>
-            <FormGroup row>
-              <FormControlLabel
-                disabled
-                control={<Checkbox checked={user.isActive} />}
-                label="isActive"
+    <>
+      <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"
+                disabled={appContext.mode === ModeType.Desktop}
               />
-              <FormControlLabel
-                disabled
-                control={<Checkbox checked={user.isAdmin} />}
-                label="isAdmin"
+            </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"
+                disabled={appContext.mode === ModeType.Desktop}
               />
-            </FormGroup>
+            </Grid>
+
+            <Grid item lg={6} md={8} sm={12} xs={12}>
+              <TextField
+                fullWidth
+                label="autoExec"
+                name="autoExec"
+                onChange={handleChange}
+                multiline
+                rows="10"
+                value={user.autoExec}
+                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}>
+              <Button
+                variant="contained"
+                onClick={() => setIsPasswordModalOpen(true)}
+              >
+                Update Password
+              </Button>
+            </Grid>
           </Grid>
-        </Grid>
-      </CardContent>
-      <Divider />
-      <CardActions>
-        <Button type="submit" variant="contained" onClick={handleSubmit}>
-          Save Changes
-        </Button>
-      </CardActions>
-    </Card>
+        </CardContent>
+        <Divider />
+        <CardActions>
+          <Button type="submit" variant="contained" onClick={handleSubmit}>
+            Save Changes
+          </Button>
+        </CardActions>
+      </Card>
+      <UpdatePasswordModal
+        open={isPasswordModalOpen}
+        setOpen={setIsPasswordModalOpen}
+        title="Update Password"
+        updatePassword={updatePassword}
+      />
+    </>
   )
 }