fix change password service

src/components/ChangePasswordForm.tsx

@@ -5,7 +5,6 @@ import ErrorManager, { type BadRequestData } from "./ErrorManager"
 import { FloppyDiskArrowIn } from "iconoir-react"
 
 export type ChangePasswordFormPayload = {
-  currentPassword: string
   password: string
   verifyPassword: string
 }
@@ -25,16 +24,46 @@ const ChangePasswordForm: React.FC<ChangePasswordFormProps> = ({
   const [formError, setFormError] = useState<Error | null>(null)
 
   const formPayload = useRef<ChangePasswordFormPayload>({
-    currentPassword: "",
     password: "",
     verifyPassword: "",
   })
 
+  const isEmpty = () => {
+    return (
+      formPayload.current.password.length === 0 ||
+      formPayload.current.verifyPassword.length === 0
+    )
+  }
+  const validate = () => {
+    const errorsAsData: { [key: string]: BadRequestData } = {}
+    if (
+      formPayload.current.password.length === 0 ||
+      formPayload.current.password !== formPayload.current.verifyPassword
+    ) {
+      errorsAsData.verifyPassword = {
+        label: "Verify password",
+        message: "The passwords you entered don't match. Please try again.",
+      }
+    }
+    if (Object.keys(errorsAsData).length > 0) {
+      setFormError(new BadRequest("Please check your entries.", errorsAsData))
+      return false
+    }
+    return true
+  }
+
   const handleOnSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
     console.info("[ChangePasswordForm] @handleOnSubmit")
+    if (isEmpty()) {
+      setFormError(new BadRequest("Please fill in all the fields."))
+      return
+    }
     const errorsAsData: { [key: string]: BadRequestData } = {}
-    if (formPayload.current.password !== formPayload.current.verifyPassword) {
+    if (
+      formPayload.current.password.length === 0 ||
+      formPayload.current.password !== formPayload.current.verifyPassword
+    ) {
       errorsAsData.verifyPassword = {
         label: "Verify password",
         message: "The passwords you entered don't match. Please try again.",
@@ -52,7 +81,9 @@ const ChangePasswordForm: React.FC<ChangePasswordFormProps> = ({
     console.info("[RegisterForm] @updatePreview", key, value)
     // handpick the fields to preview
     delayTimerRef.current = setTimeout(() => {
-      setFormError(null)
+      if (validate()) {
+        setFormError(null)
+      }
     }, 400)
   }
 
@@ -72,18 +103,8 @@ const ChangePasswordForm: React.FC<ChangePasswordFormProps> = ({
         onSubmit={handleOnSubmit}
         className={`ChangePasswordForm ${className}`}
       >
-        <ErrorManager error={error || formError} />
+        <ErrorManager error={formError || error} />
 
-        <Form.Group
-          className="mb-3"
-          controlId="ModalChangePasswordorm.password"
-        >
-          <Form.Label className="font-weight-bold">Current Password</Form.Label>
-          <Form.Control
-            onChange={(e) => updateValue("currentPassword", e.target.value)}
-            type="password"
-          />
-        </Form.Group>
         <Form.Group className="mb-3" controlId="ModalChangePassword.password">
           <Form.Label className="font-weight-bold">New Password</Form.Label>
           <Form.Control
@@ -103,7 +124,11 @@ const ChangePasswordForm: React.FC<ChangePasswordFormProps> = ({
             type="password"
           />
         </Form.Group>
-        <button type="submit" className="btn btn-primary btn-lg px-4">
+        <button
+          type="submit"
+          disabled={formError !== null}
+          className="btn btn-primary btn-lg px-4"
+        >
           <FloppyDiskArrowIn /> <span className="ms-2">Register</span>
         </button>
       </Form>

src/components/ChangePasswordModal.tsx

@@ -1,8 +1,11 @@
 import { Col, Container, Form, Modal, Row } from "react-bootstrap"
-import { BrowserViewChangePassword } from "../constants"
+import {
+  BrowserViewChangePassword,
+  BrowserViewConfirmChangePassword,
+} from "../constants"
 import { useBrowserStore } from "../store"
 import Alert from "./Alert"
-import { useRef, useState } from "react"
+import { useEffect, useRef, useState } from "react"
 import ChangePasswordForm, {
   type ChangePasswordFormPayload,
 } from "./ChangePasswordForm"
@@ -16,24 +19,29 @@ const ChangePassword = () => {
 
   const handleOnSubmit = (payload: ChangePasswordFormPayload) => {
     console.info("[ChangePasswordModal] @handleOnSubmit", payload)
+
     changePasswordService
       .create({
         password: payload.password,
-        currentPassword: payload.currentPassword,
+        verifyPassword: payload.verifyPassword,
       })
       .then((data) => {
         console.info(
           "[ChangePasswordModal] Password changed successfully. data:",
           data
         )
-        setView(null)
+        setView(BrowserViewConfirmChangePassword)
       })
       .catch((err: FeathersError) => {
         setError(err)
         console.error("[ChangePasswordModal] create", err.message, err.data)
       })
   }
 
+  useEffect(() => {
+    setError(null)
+  }, [view])
+
   return (
     <Modal
       centered

src/components/ConfirmChangePasswordModal.tsx

@@ -0,0 +1,36 @@
+import { Col, Container, Modal, Row } from "react-bootstrap"
+import { BrowserViewConfirmChangePassword } from "../constants"
+import { useBrowserStore } from "../store"
+
+const ConfirmChangePasswordModal = () => {
+  const view = useBrowserStore((state) => state.view)
+  const setView = useBrowserStore((state) => state.setView)
+  return (
+    <Modal
+      centered
+      show={view === BrowserViewConfirmChangePassword}
+      onHide={() => setView(null)}
+    >
+      <Modal.Header closeButton>
+        <Modal.Title>Password changed successfully</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <Container>
+          <Row>
+            <Col>
+              <p>
+                You can now log in with your new password. If you have any
+                issues, please contact{" "}
+                <a href="mailto:[email protected]">
+                  [email protected]
+                </a>{" "}
+              </p>
+            </Col>
+          </Row>
+        </Container>
+      </Modal.Body>
+    </Modal>
+  )
+}
+
+export default ConfirmChangePasswordModal

src/components/Modals.tsx

@@ -4,6 +4,7 @@ import RegisterModal from "./RegisterModal"
 import ProfileModal from "./ProfileModal"
 import TermsOfUseModal from "./TermsOfUseModal"
 import ChangePasswordModal from "./ChangePasswordModal"
+import ConfirmChangePasswordModal from "./ConfirmChangePasswordModal"
 
 const Modals: React.FC<{ termsOfuseContent?: string }> = ({
   termsOfuseContent = "",
@@ -15,6 +16,7 @@ const Modals: React.FC<{ termsOfuseContent?: string }> = ({
       <ProfileModal />
       <ChangePasswordModal />
       <ConfirmRegistrationModal />
+      <ConfirmChangePasswordModal />
       <TermsOfUseModal content={termsOfuseContent} autoOpenAfterDelay={false} />
     </div>
   )

src/components/UserArea.tsx

@@ -95,6 +95,7 @@ const UserArea = () => {
               <Dropdown.Item onClick={() => setView(BrowserViewChangePassword)}>
                 Change Password
               </Dropdown.Item>
+
               <Dropdown.Item onClick={logout}>Log out</Dropdown.Item>
               {/* add separator */}
               <Dropdown.Divider />

src/constants.ts

@@ -207,6 +207,7 @@ export const BrowserViewConfirmRegistration = "confirm-registration"
 export const BrowserViewTermsOfUse = "terms-of-use"
 export const BrowserViewProfile = "profile"
 export const BrowserViewChangePassword = "change-password"
+export const BrowserViewConfirmChangePassword = "confirm-change-password"
 export const BrowserViews: string[] = [
   BrowserViewLogin,
   BrowserViewRegister,