all

Downloads/Voltaserve/ui/src/components/account/account-change-password.tsx

@@ -0,0 +1,171 @@
+import { useCallback, useEffect, useState } from 'react'
+import {
+  Button,
+  FormControl,
+  FormErrorMessage,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+} from '@chakra-ui/react'
+import { useSWRConfig } from 'swr'
+import {
+  Field,
+  FieldAttributes,
+  FieldProps,
+  Form,
+  Formik,
+  FormikHelpers,
+} from 'formik'
+import * as Yup from 'yup'
+import cx from 'classnames'
+import UserAPI, { User } from '@/client/idp/user'
+
+export type AccountChangePasswordProps = {
+  open: boolean
+  user: User
+  onClose?: () => void
+}
+
+type FormValues = {
+  currentPassword: string
+  newPassword: string
+}
+
+const AccountChangePassword = ({
+  open,
+  onClose,
+}: AccountChangePasswordProps) => {
+  const { mutate } = useSWRConfig()
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const initialValues: FormValues = { currentPassword: '', newPassword: '' }
+  const formSchema = Yup.object().shape({
+    currentPassword: Yup.string().required('Current password is required'),
+    newPassword: Yup.string().required('New password is required'),
+  })
+
+  useEffect(() => {
+    setIsModalOpen(open)
+  }, [open])
+
+  const handleSubmit = useCallback(
+    async (
+      { currentPassword, newPassword }: FormValues,
+      { setSubmitting }: FormikHelpers<FormValues>,
+    ) => {
+      setSubmitting(true)
+      try {
+        const result = await UserAPI.updatePassword({
+          currentPassword,
+          newPassword,
+        })
+        mutate(`/user`, result)
+        setSubmitting(false)
+        onClose?.()
+      } finally {
+        setSubmitting(false)
+      }
+    },
+    [onClose, mutate],
+  )
+
+  return (
+    <Modal
+      isOpen={isModalOpen}
+      onClose={() => onClose?.()}
+      closeOnOverlayClick={false}
+    >
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Change Password</ModalHeader>
+        <ModalCloseButton />
+        <Formik
+          initialValues={initialValues}
+          validationSchema={formSchema}
+          validateOnBlur={false}
+          onSubmit={handleSubmit}
+        >
+          {({ errors, touched, isSubmitting }) => (
+            <Form>
+              <ModalBody>
+                <div className={cx('flex', 'flex-col', 'gap-1.5')}>
+                  <Field name="currentPassword">
+                    {({ field }: FieldAttributes<FieldProps>) => (
+                      <FormControl
+                        isInvalid={
+                          errors.currentPassword && touched.currentPassword
+                            ? true
+                            : false
+                        }
+                      >
+                        <Input
+                          {...field}
+                          type="password"
+                          placeholder="Current password"
+                          disabled={isSubmitting}
+                        />
+                        <FormErrorMessage>
+                          {errors.currentPassword}
+                        </FormErrorMessage>
+                      </FormControl>
+                    )}
+                  </Field>
+                  <Field name="newPassword">
+                    {({ field }: FieldAttributes<FieldProps>) => (
+                      <FormControl
+                        isInvalid={
+                          errors.newPassword && touched.newPassword
+                            ? true
+                            : false
+                        }
+                      >
+                        <Input
+                          {...field}
+                          type="password"
+                          placeholder="New password"
+                          disabled={isSubmitting}
+                        />
+                        <FormErrorMessage>
+                          {errors.newPassword}
+                        </FormErrorMessage>
+                      </FormControl>
+                    )}
+                  </Field>
+                </div>
+              </ModalBody>
+              <ModalFooter>
+                <div
+                  className={cx('flex', 'flex-row', 'items-center', 'gap-1')}
+                >
+                  <Button
+                    type="button"
+                    variant="outline"
+                    colorScheme="blue"
+                    disabled={isSubmitting}
+                    onClick={() => onClose?.()}
+                  >
+                    Cancel
+                  </Button>
+                  <Button
+                    type="submit"
+                    variant="solid"
+                    colorScheme="blue"
+                    isLoading={isSubmitting}
+                  >
+                    Save
+                  </Button>
+                </div>
+              </ModalFooter>
+            </Form>
+          )}
+        </Formik>
+      </ModalContent>
+    </Modal>
+  )
+}
+
+export default AccountChangePassword