feat(auth): add useChangePassword hook

dzangolab · Feb 16, 2024 · 9cefb1b · 9cefb1b
1 parent 16f10fc
commit 9cefb1b
Show file tree

Hide file tree

Showing 14 changed files with 183 additions and 162 deletions.
diff --git a/packages/i18n/src/locales/en/user.json b/packages/i18n/src/locales/en/user.json
@@ -15,6 +15,7 @@
       }
     },
     "messages": {
+      "error": "Could not change your password.",
       "success": "Your password was successfully changed.",
       "validation": {
         "oldPassword": "Old password is required",

diff --git a/packages/i18n/src/locales/fr/user.json b/packages/i18n/src/locales/fr/user.json
@@ -15,6 +15,7 @@
       }
     },
     "messages": {
+      "error": "Could not change your password. (fr)",
       "success": "Your password was successfully changed. (fr)",
       "validation": {
         "oldPassword": "Old password is required (fr)",

diff --git a/packages/user/src/api/user/index.ts b/packages/user/src/api/user/index.ts
@@ -1,11 +1,31 @@
 import client from "../axios";
 
 import type {
+  ChangePasswordInputType,
   LoginCredentials,
   UpdateProfileInputType,
   UserType,
 } from "@/types";
 
+export const changePassword = async (
+  { newPassword, oldPassword }: ChangePasswordInputType,
+  apiBaseUrl: string,
+) => {
+  const response = await client(apiBaseUrl).post(
+    "/change_password",
+    { oldPassword, newPassword },
+    {
+      withCredentials: true,
+    },
+  );
+
+  if (response.data.status === "ERROR") {
+    throw new Error(response.data.message);
+  } else {
+    return response;
+  }
+};
+
 export const getIsFirstUser = async (
   apiBaseUrl: string,
 ): Promise<{

diff --git a/packages/user/src/components/Login/LoginWrapper.tsx b/packages/user/src/components/Login/LoginWrapper.tsx
@@ -29,8 +29,8 @@ export const LoginWrapper: FC<IProperties> = ({
   const { user: userConfig } = useConfig();
 
   const [loginUser, { isLoading: loginLoading }] = useLogin({
-    onLoginFailed,
-    onLoginSuccess,
+    onSuccess: onLoginFailed,
+    onFailed: onLoginSuccess,
   });
 
   const handleLoginSubmit = async (credentials: LoginCredentials) => {

diff --git a/packages/user/src/hooks/index.ts b/packages/user/src/hooks/index.ts
@@ -1,4 +1,5 @@
 export * from "./useAcceptInvitation";
+export * from "./useChangePassword";
 export * from "./useConfig";
 export * from "./useEmailVerification";
 export * from "./useFirstUserSignup";

diff --git a/packages/user/src/hooks/useAcceptInvitation.ts b/packages/user/src/hooks/useAcceptInvitation.ts
@@ -14,8 +14,11 @@ import { useLogin } from "./useLogin";
 import type { Invitation, LoginCredentials } from "../types";
 
 type UseAcceptInvitationConfig = {
+  autoLogin?: boolean;
   showToasts?: boolean;
   tokenParamKey?: string;
+  onSuccess?: (user: any) => Promise<void> | void;
+  onFailed?: (error?: any) => Promise<void> | void;
 };
 
 type UseAcceptInvitationMeta = {
@@ -26,8 +29,13 @@ type UseAcceptInvitationMeta = {
 };
 
 export function useAcceptInvitation(config?: UseAcceptInvitationConfig) {
-  const { showToasts = true, tokenParamKey: tokenParameterKey = "token" } =
-    config || {};
+  const {
+    autoLogin = true,
+    showToasts = true,
+    tokenParamKey: tokenParameterKey = "token",
+    onSuccess,
+    onFailed,
+  } = config || {};
 
   const { t } = useTranslation("invitations");
   const appConfig: any = useConfig();
@@ -77,15 +85,25 @@ export function useAcceptInvitation(config?: UseAcceptInvitationConfig) {
         if ("data" in response && response.data.status === "ERROR") {
           // TODO better handle errors
           setIsError(true);
+
+          onFailed && (await onFailed(response));
+
           showToasts && toast.error(response.data.message);
         } else {
-          // TODO acceptInvitation should return authenticated user from api
-          await loginUser(credentials);
+          onSuccess && (await onSuccess(response));
+
+          if (autoLogin) {
+            // TODO acceptInvitation should return authenticated user from api
+            await loginUser(credentials);
+          }
         }
       })
-      .catch(() => {
+      .catch(async (error) => {
         setIsError(true);
         setIsLoading(false);
+
+        onFailed && (await onFailed(error));
+
         showToasts &&
           toast.error(`${t("invitations.messages.errorAcceptingInvitation")}`);
       });

diff --git a/packages/user/src/hooks/useChangePassword.ts b/packages/user/src/hooks/useChangePassword.ts
@@ -0,0 +1,64 @@
+import { useTranslation } from "@dzangolab/react-i18n";
+import { useState } from "react";
+import { toast } from "react-toastify";
+
+import { useConfig } from "./useConfig";
+import { changePassword as changePasswordApi } from "../api/user";
+
+import type { ChangePasswordInputType } from "../types";
+
+type UseChangePasswordConfig = {
+  showToasts?: boolean;
+  onSuccess?: (user: any) => Promise<void> | void;
+  onFailed?: (error: any) => Promise<void> | void;
+};
+
+type UseChangePasswordMeta = {
+  isError: boolean;
+  isLoading: boolean;
+};
+
+export function useChangePassword(config?: UseChangePasswordConfig) {
+  const { showToasts = true, onFailed, onSuccess } = config || {};
+
+  const { t } = useTranslation(["user", "errors"]);
+  const appConfig = useConfig();
+
+  const [isError, setIsError] = useState(false);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const changePassword = (passwords: ChangePasswordInputType) => {
+    setIsLoading(true);
+
+    return changePasswordApi(passwords, appConfig?.apiBaseUrl || "")
+      .then(async (response) => {
+        setIsLoading(false);
+
+        if ("data" in response && response.data.status === "OK") {
+          onSuccess && (await onSuccess(response));
+
+          showToasts && toast.success(t("changePassword.messages.success"));
+        } else {
+          // TODO better handle errors
+          setIsError(true);
+
+          onFailed && (await onFailed(response));
+
+          showToasts && toast.error(response.data.message);
+        }
+      })
+      .catch(async (error) => {
+        setIsError(true);
+        setIsLoading(false);
+
+        onFailed && (await onFailed(error));
+
+        showToasts && toast.error(`${t("changePassword.messages.error")}`);
+      });
+  };
+
+  return [changePassword, { isError, isLoading }] as [
+    (passwords: ChangePasswordInputType) => Promise<any>,
+    UseChangePasswordMeta,
+  ];
+}
diff --git a/packages/user/src/hooks/useLogin.ts b/packages/user/src/hooks/useLogin.ts
@@ -11,8 +11,8 @@ import type { LoginCredentials } from "../types";
 
 type UseLoginConfig = {
   showToasts?: boolean;
-  onLoginSuccess?: (user: any) => Promise<void> | void;
-  onLoginFailed?: (error: any) => Promise<void> | void;
+  onSuccess?: (user: any) => Promise<void> | void;
+  onFailed?: (error?: any) => Promise<void> | void;
 };
 
 type UseLoginMeta = {
@@ -21,7 +21,7 @@ type UseLoginMeta = {
 };
 
 export function useLogin(config?: UseLoginConfig) {
-  const { showToasts = true, onLoginFailed, onLoginSuccess } = config || {};
+  const { showToasts = true, onFailed, onSuccess } = config || {};
 
   const { t } = useTranslation(["user", "errors"]);
   const { setUser } = useUser();
@@ -34,26 +34,28 @@ export function useLogin(config?: UseLoginConfig) {
     setIsLoading(true);
 
     return login(credentials)
-      .then(async (result) => {
-        if (result?.user) {
+      .then(async (response) => {
+        if (response?.user) {
           if (
             userConfig &&
             (await verifySessionRoles(userConfig.supportedRoles))
           ) {
-            setUser(result.user);
+            setUser(response.user);
 
-            onLoginSuccess && (await onLoginSuccess(result));
+            onSuccess && (await onSuccess(response));
 
             showToasts && toast.success(t("login.messages.success"));
           } else {
             setIsError(true);
+            onFailed && (await onFailed(response));
+
             showToasts && toast.error(t("login.messages.permissionDenied"));
           }
         }
       })
       .catch(async (error) => {
         setIsError(true);
-        onLoginFailed && (await onLoginFailed(error));
+        onFailed && (await onFailed(error));
 
         if (showToasts) {
           let errorMessage = "errors.otherErrors";

diff --git a/packages/user/src/index.ts b/packages/user/src/index.ts
@@ -1,3 +1,18 @@
+import {
+  acceptInvitation,
+  addInvitation,
+  getInvitationByToken,
+  resendInvitation,
+  revokeInvitation,
+} from "./api/invitation";
+import {
+  changePassword,
+  disableUser,
+  enableUser,
+  getIsFirstUser,
+  signUpFirstUser,
+  updateUserProfile,
+} from "./api/user";
 import AuthGoogleCallback from "./components/AuthGoogleCallback";
 import DropdownUserMenu from "./components/DropdownUserMenu";
 import {
@@ -18,6 +33,8 @@ import {
 import UserProvider, { userContext } from "./context/UserProvider";
 import { getUserData, removeUserData, setUserData } from "./helpers";
 import {
+  useAcceptInvitation,
+  useChangePassword,
   useEmailVerification,
   useFirstUserSignup,
   useLogin,
@@ -29,7 +46,6 @@ import {
   UserEnabledSidebarOnlyLayout,
 } from "./layouts";
 import superTokens from "./supertokens";
-import changePassword from "./supertokens/change-password";
 import { forgotPassword } from "./supertokens/forgot-password";
 import googleLogin from "./supertokens/google-login";
 import { verifySessionRoles } from "./supertokens/helpers";
@@ -81,9 +97,12 @@ export {
   SignupWrapper,
   TermsAndConditions,
   UserMenu,
-  UserProvider,
   UsersTable,
 
+  // context
+  userContext,
+  UserProvider,
+
   // layouts
   UserEnabledBasicLayout,
   UserEnabledSidebarLayout,
@@ -101,8 +120,7 @@ export {
   Signup,
   VerifyEmail,
 
-  // utilities
-  changePassword,
+  // supertoken utilities
   forgotPassword,
   getUserData,
   googleLogin,
@@ -113,15 +131,29 @@ export {
   setUserData,
   signup,
   superTokens,
-  userContext,
   verifyEmail,
   verifySessionRoles,
 
   // hooks
+  useAcceptInvitation,
+  useChangePassword,
   useEmailVerification,
   useFirstUserSignup,
   useLogin,
   useUser,
+
+  // apis
+  changePassword,
+  disableUser,
+  enableUser,
+  getIsFirstUser,
+  signUpFirstUser,
+  updateUserProfile,
+  acceptInvitation,
+  addInvitation,
+  getInvitationByToken,
+  resendInvitation,
+  revokeInvitation,
 };
 
 export type {

diff --git a/packages/user/src/supertokens/change-password.ts b/packages/user/src/supertokens/change-password.ts
diff --git a/packages/user/src/types/index.ts b/packages/user/src/types/index.ts
@@ -13,6 +13,7 @@ import {
 } from "./invitation";
 import {
   AuthState,
+  ChangePasswordInputType,
   ErrorResponse,
   ExtendedUser,
   LoginCredentials,
@@ -27,6 +28,7 @@ export type {
   AccpetInvitationResponse,
   AddInvitationResponse,
   AuthState,
+  ChangePasswordInputType,
   DzangolabReactUserConfig,
   ErrorResponse,
   ExtendedUser,

diff --git a/packages/user/src/types/types.ts b/packages/user/src/types/types.ts
@@ -55,3 +55,8 @@ export type UpdateProfileInputType = {
   givenName: string;
   surname: string;
 };
+
+export type ChangePasswordInputType = {
+  newPassword: string;
+  oldPassword: string;
+};