🛂 Migrate to Chakra UI v3 (#1496)

Co-authored-by: github-actions <github-actions@github.com>

frontend/src/routes/recover-password.tsx

@@ -1,17 +1,13 @@
-import {
-  Button,
-  Container,
-  FormControl,
-  FormErrorMessage,
-  Heading,
-  Input,
-  Text,
-} from "@chakra-ui/react"
+import { Container, Heading, Input, Text } from "@chakra-ui/react"
 import { useMutation } from "@tanstack/react-query"
 import { createFileRoute, redirect } from "@tanstack/react-router"
 import { type SubmitHandler, useForm } from "react-hook-form"
 
+import { FiMail } from "react-icons/fi"
 import { type ApiError, LoginService } from "../client"
+import { Button } from "../components/ui/button"
+import { Field } from "../components/ui/field"
+import { InputGroup } from "../components/ui/input-group"
 import { isLoggedIn } from "../hooks/useAuth"
 import useCustomToast from "../hooks/useCustomToast"
 import { emailPattern, handleError } from "../utils"
@@ -38,7 +34,7 @@ function RecoverPassword() {
     reset,
     formState: { errors, isSubmitting },
   } = useForm<FormData>()
-  const showToast = useCustomToast()
+  const { showSuccessToast } = useCustomToast()
 
   const recoverPassword = async (data: FormData) => {
     await LoginService.recoverPassword({
@@ -49,15 +45,11 @@ function RecoverPassword() {
   const mutation = useMutation({
     mutationFn: recoverPassword,
     onSuccess: () => {
-      showToast(
-        "Email sent.",
-        "We sent an email with a link to get back into your account.",
-        "success",
-      )
+      showSuccessToast("Password recovery email sent successfully.")
       reset()
     },
     onError: (err: ApiError) => {
-      handleError(err, showToast)
+      handleError(err)
     },
   })
 
@@ -79,24 +71,23 @@ function RecoverPassword() {
       <Heading size="xl" color="ui.main" textAlign="center" mb={2}>
         Password Recovery
       </Heading>
-      <Text align="center">
+      <Text textAlign="center">
         A password recovery email will be sent to the registered account.
       </Text>
-      <FormControl isInvalid={!!errors.email}>
-        <Input
-          id="email"
-          {...register("email", {
-            required: "Email is required",
-            pattern: emailPattern,
-          })}
-          placeholder="Email"
-          type="email"
-        />
-        {errors.email && (
-          <FormErrorMessage>{errors.email.message}</FormErrorMessage>
-        )}
-      </FormControl>
-      <Button variant="primary" type="submit" isLoading={isSubmitting}>
+      <Field invalid={!!errors.email} errorText={errors.email?.message}>
+        <InputGroup w="100%" startElement={<FiMail />}>
+          <Input
+            id="email"
+            {...register("email", {
+              required: "Email is required",
+              pattern: emailPattern,
+            })}
+            placeholder="Email"
+            type="email"
+          />
+        </InputGroup>
+      </Field>
+      <Button variant="solid" type="submit" loading={isSubmitting}>
         Continue
       </Button>
     </Container>