🛂 Migrate to Chakra UI v3 (#1496)

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

frontend/src/routes/signup.tsx

@@ -1,15 +1,4 @@
-import {
-  Button,
-  Container,
-  Flex,
-  FormControl,
-  FormErrorMessage,
-  FormLabel,
-  Image,
-  Input,
-  Link,
-  Text,
-} from "@chakra-ui/react"
+import { Container, Flex, Image, Input, Text } from "@chakra-ui/react"
 import {
   Link as RouterLink,
   createFileRoute,
@@ -17,8 +6,13 @@ import {
 } from "@tanstack/react-router"
 import { type SubmitHandler, useForm } from "react-hook-form"
 
+import { FiLock, FiUser } from "react-icons/fi"
 import Logo from "/assets/images/fastapi-logo.svg"
 import type { UserRegister } from "../client"
+import { Button } from "../components/ui/button"
+import { Field } from "../components/ui/field"
+import { InputGroup } from "../components/ui/input-group"
+import { PasswordInput } from "../components/ui/password-input"
 import useAuth, { isLoggedIn } from "../hooks/useAuth"
 import { confirmPasswordRules, emailPattern, passwordRules } from "../utils"
 
@@ -80,80 +74,58 @@ function SignUp() {
             alignSelf="center"
             mb={4}
           />
-          <FormControl id="full_name" isInvalid={!!errors.full_name}>
-            <FormLabel htmlFor="full_name" srOnly>
-              Full Name
-            </FormLabel>
-            <Input
-              id="full_name"
-              minLength={3}
-              {...register("full_name", { required: "Full Name is required" })}
-              placeholder="Full Name"
-              type="text"
-            />
-            {errors.full_name && (
-              <FormErrorMessage>{errors.full_name.message}</FormErrorMessage>
-            )}
-          </FormControl>
-          <FormControl id="email" isInvalid={!!errors.email}>
-            <FormLabel htmlFor="email" srOnly>
-              Email
-            </FormLabel>
-            <Input
-              id="email"
-              {...register("email", {
-                required: "Email is required",
-                pattern: emailPattern,
-              })}
-              placeholder="Email"
-              type="email"
-            />
-            {errors.email && (
-              <FormErrorMessage>{errors.email.message}</FormErrorMessage>
-            )}
-          </FormControl>
-          <FormControl id="password" isInvalid={!!errors.password}>
-            <FormLabel htmlFor="password" srOnly>
-              Password
-            </FormLabel>
-            <Input
-              id="password"
-              {...register("password", passwordRules())}
-              placeholder="Password"
-              type="password"
-            />
-            {errors.password && (
-              <FormErrorMessage>{errors.password.message}</FormErrorMessage>
-            )}
-          </FormControl>
-          <FormControl
-            id="confirm_password"
-            isInvalid={!!errors.confirm_password}
+          <Field
+            invalid={!!errors.full_name}
+            errorText={errors.full_name?.message}
           >
-            <FormLabel htmlFor="confirm_password" srOnly>
-              Confirm Password
-            </FormLabel>
+            <InputGroup w="100%" startElement={<FiUser />}>
+              <Input
+                id="full_name"
+                minLength={3}
+                {...register("full_name", {
+                  required: "Full Name is required",
+                })}
+                placeholder="Full Name"
+                type="text"
+              />
+            </InputGroup>
+          </Field>
 
-            <Input
-              id="confirm_password"
-              {...register("confirm_password", confirmPasswordRules(getValues))}
-              placeholder="Repeat Password"
-              type="password"
-            />
-            {errors.confirm_password && (
-              <FormErrorMessage>
-                {errors.confirm_password.message}
-              </FormErrorMessage>
-            )}
-          </FormControl>
-          <Button variant="primary" type="submit" isLoading={isSubmitting}>
+          <Field invalid={!!errors.email} errorText={errors.email?.message}>
+            <InputGroup w="100%" startElement={<FiUser />}>
+              <Input
+                id="email"
+                {...register("email", {
+                  required: "Email is required",
+                  pattern: emailPattern,
+                })}
+                placeholder="Email"
+                type="email"
+              />
+            </InputGroup>
+          </Field>
+          <PasswordInput
+            type="password"
+            startElement={<FiLock />}
+            {...register("password", passwordRules())}
+            placeholder="Password"
+            errors={errors}
+          />
+          <PasswordInput
+            type="confirm_password"
+            startElement={<FiLock />}
+            {...register("confirm_password", confirmPasswordRules(getValues))}
+            placeholder="Confirm Password"
+            errors={errors}
+          />
+          <Button variant="solid" type="submit" loading={isSubmitting}>
             Sign Up
           </Button>
           <Text>
             Already have an account?{" "}
-            <Link as={RouterLink} to="/login" color="blue.500">
+            <RouterLink to="/login" className="main-link">
               Log In
-            </Link>
+            </RouterLink>
           </Text>
         </Container>
       </Flex>