feat(dashboard, js-sdk): reset password UI (medusajs#9451)

**What** - add password reset flow on Admin --- https://github.com/user-attachments/assets/3438ace2-c661-4121-a580-794a69ad4518 --- CLOSES CC-568 Co-authored-by: Oli Juhl <[email protected]>
vennyx-org · Oct 7, 2024 · 58f9b2e · 58f9b2e
1 parent 73d31ef
commit 58f9b2e
Show file tree

Hide file tree

Showing 7 changed files with 401 additions and 5 deletions.
diff --git a/packages/admin/dashboard/src/hooks/api/auth.tsx b/packages/admin/dashboard/src/hooks/api/auth.tsx
@@ -3,7 +3,7 @@ import { FetchError } from "@medusajs/js-sdk"
 import { sdk } from "../../lib/client"
 import { HttpTypes } from "@medusajs/types"
 
-export const useSignInWithEmailPassword = (
+export const useSignInWithEmailPass = (
   options?: UseMutationOptions<
     string,
     FetchError,
@@ -35,9 +35,37 @@ export const useSignUpWithEmailPass = (
   })
 }
 
+export const useResetPasswordForEmailPass = (
+  options?: UseMutationOptions<void, FetchError, { email: string }>
+) => {
+  return useMutation({
+    mutationFn: (payload) =>
+      sdk.auth.resetPassword("user", "emailpass", {
+        identifier: payload.email,
+      }),
+    onSuccess: async (data, variables, context) => {
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}
+
 export const useLogout = (options?: UseMutationOptions<void, FetchError>) => {
   return useMutation({
     mutationFn: () => sdk.auth.logout(),
     ...options,
   })
 }
+
+export const useUpdateProviderForEmailPass = (
+  options?: UseMutationOptions<void, FetchError, { password: string }>
+) => {
+  return useMutation({
+    mutationFn: (payload) =>
+      sdk.auth.updateProvider("user", "emailpass", payload),
+    onSuccess: async (data, variables, context) => {
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}
diff --git a/packages/admin/dashboard/src/i18n/translations/en.json b/packages/admin/dashboard/src/i18n/translations/en.json
@@ -2373,15 +2373,23 @@
     "hint": "Enter your email below, and we will send you instructions on how to reset your password.",
     "email": "Email",
     "sendResetInstructions": "Send reset instructions",
-    "backToLogin": "You can always go back - <0>Log in</0>",
+    "backToLogin": "<0>Back to login</0>",
     "newPasswordHint": "Choose a new password below.",
     "invalidTokenTitle": "Your reset token is invalid",
     "invalidTokenHint": "Try requesting a new reset link.",
     "expiredTokenTitle": "Your reset token has expired",
     "goToResetPassword": "Go to Reset Password",
     "resetPassword": "Reset password",
+    "newPassword": "New password",
+    "repeatNewPassword": "Repeat new password",
     "tokenExpiresIn": "Token expires in <0>{{time}}</0> minutes",
-    "successfulRequest": "We have sent you an email with instructions on how to reset your password. If you don't receive an email, please check your spam folder or try again."
+    "successfulRequestTitle": "Successfully sent you an email",
+    "successfulRequest": "We've sent you an email which you can use to reset your password. Check your spam folder if you haven't received it after a few minutes.",
+    "successfulResetTitle": "Password reset successful",
+    "successfulReset": "Please login in on the login page.",
+    "passwordMismatch": "Passwords do no match",
+    "invalidLinkTitle": "Your reset link is invalid",
+    "invalidLinkHint": "Try resetting your password again."
   },
   "workflowExecutions": {
     "domain": "Workflows",

diff --git a/packages/admin/dashboard/src/providers/router-provider/route-map.tsx b/packages/admin/dashboard/src/providers/router-provider/route-map.tsx
@@ -26,6 +26,10 @@ export const RouteMap: RouteObject[] = [
     path: "/login",
     lazy: () => import("../../routes/login"),
   },
+  {
+    path: "/reset-password",
+    lazy: () => import("../../routes/reset-password"),
+  },
   {
     path: "*",
     lazy: () => import("../../routes/no-match"),

diff --git a/packages/admin/dashboard/src/routes/login/login.tsx b/packages/admin/dashboard/src/routes/login/login.tsx
@@ -6,7 +6,8 @@ import { Link, useLocation, useNavigate } from "react-router-dom"
 import * as z from "zod"
 
 import { Form } from "../../components/common/form"
-
+import { LogoBox } from "../../components/common/logo-box"
+import { useSignInWithEmailPass } from "../../hooks/api/auth"
 import { useSignInWithEmailPassword } from "../../hooks/api/auth"
 
 import after from "virtual:medusa/widgets/login/after"
@@ -34,7 +35,7 @@ export const Login = () => {
     },
   })
 
-  const { mutateAsync, isPending } = useSignInWithEmailPassword()
+  const { mutateAsync, isPending } = useSignInWithEmailPass()
 
   const handleSubmit = form.handleSubmit(async ({ email, password }) => {
     try {

diff --git a/packages/admin/dashboard/src/routes/reset-password/index.ts b/packages/admin/dashboard/src/routes/reset-password/index.ts
@@ -0,0 +1,2 @@
+export { ResetPassword as Component } from "./reset-password";
+