@campxdev/campx-web-utils 0.3.9 → 0.3.11

package/export.ts

@@ -1,3 +1,4 @@
+export * from './src/components/ChangePassword';
 export * from './src/config/axios';
 export * from './src/context/export';
 export * from './src/hooks/export';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/campx-web-utils",
-  "version": "0.3.9",
+  "version": "0.3.11",
   "main": "./export.ts",
   "private": false,
   "peerDependencies": {

package/src/components/ChangePassword.tsx

@@ -0,0 +1,169 @@
+import {
+  CircularProgress,
+  IconButton,
+  InputAdornment,
+  Stack,
+} from '@mui/material';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+
+import {
+  Button,
+  DialogButton,
+  FormControlWrapper,
+  TextField,
+} from '@campxdev/react-blueprint';
+import { StyledMenuItem } from '@campxdev/react-blueprint/src/components/Navigation/DropDownMenu/styles';
+import { Visibility, VisibilityOff } from '@mui/icons-material';
+import { toast } from 'react-toastify';
+import { axios } from '../config/axios';
+import { isDevelopment } from '../utils/export';
+
+interface PasswordVisibilityState {
+  oldPassword: boolean;
+  newPassword: boolean;
+  confirmPassword: boolean;
+}
+
+interface FormData {
+  oldPassword: string;
+  newPassword: string;
+  confirmPassword: string;
+}
+
+interface Field {
+  label: string;
+  name: keyof PasswordVisibilityState;
+}
+
+interface ChangePasswordProps {
+  close: () => void;
+}
+
+export function ChangePassword({ close }: ChangePasswordProps) {
+  const [showPassword, setShowPassword] = useState<PasswordVisibilityState>({
+    oldPassword: false,
+    newPassword: false,
+    confirmPassword: false,
+  });
+  const [isLoading, setIsLoading] = useState(false);
+
+  const { handleSubmit, control, reset } = useForm<FormData>();
+
+  const onSubmit = async (formData: any) => {
+    setIsLoading(true);
+    const { oldPassword, newPassword, confirmPassword } = formData;
+    if (newPassword === confirmPassword) {
+      try {
+        await axios.post(
+          isDevelopment
+            ? 'https://api.campx.dev/auth-server/auth/change-password'
+            : 'https://api.campx.in/auth-server/auth/change-password',
+          {
+            oldPassword,
+            newPassword,
+          },
+        );
+        toast.success('Password Changed Successfully');
+        setIsLoading(false);
+        reset();
+        close();
+      } catch (error) {
+        console.log(error, 'this is error');
+        // axiosErrorToast(error);
+        setIsLoading(false);
+      }
+    } else {
+      toast.error('New Password, Confirm Password must be same');
+      setIsLoading(false);
+    }
+  };
+
+  const fields: Field[] = [
+    { label: 'Old Password', name: 'oldPassword' },
+    { label: 'New Password', name: 'newPassword' },
+    { label: 'Confirm Password', name: 'confirmPassword' },
+  ];
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <FormControlWrapper control={control}>
+        <Stack gap={1} direction="column">
+          {fields.map((item) => {
+            return (
+              <>
+                <TextField
+                  label={item.label}
+                  name={item.name}
+                  type={showPassword[item.name] ? 'text' : 'password'}
+                  required
+                  InputProps={{
+                    endAdornment: (
+                      <InputAdornment position="end">
+                        <IconButton
+                          size="small"
+                          onClick={() =>
+                            setShowPassword((prev: any) => ({
+                              ...prev,
+                              [item.name]: !prev[item.name],
+                            }))
+                          }
+                          edge="end"
+                        >
+                          {showPassword[item.name] ? (
+                            <Visibility />
+                          ) : (
+                            <VisibilityOff />
+                          )}
+                        </IconButton>
+                      </InputAdornment>
+                    ),
+                  }}
+                />
+              </>
+            );
+          })}
+
+          <Stack direction={'row'} gap={2} sx={{ marginTop: '15px' }}>
+            <Button variant="outlined" onClick={close}>
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              variant="contained"
+              endIcon={
+                isLoading && (
+                  <CircularProgress
+                    style={{ color: 'white' }}
+                    size="30px"
+                    thickness={1.7}
+                  />
+                )
+              }
+            >
+              Submit
+            </Button>
+          </Stack>
+        </Stack>
+      </FormControlWrapper>
+    </form>
+  );
+}
+
+export const ChangePasswordDialog: React.FC = () => (
+  <>
+    <DialogButton
+      anchor={({ open }) => (
+        <StyledMenuItem
+          onClick={() => {
+            open();
+          }}
+        >
+          Change Password
+        </StyledMenuItem>
+      )}
+      content={({ close }) => <ChangePassword close={close} />}
+      title="Change Password"
+    />
+  </>
+);