🎨 Format with Biome (#1097)

frontend/src/components/UserSettings/ChangePassword.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {
   Box,
   Button,
@@ -9,19 +8,20 @@ import {
   Heading,
   Input,
   useColorModeValue,
-} from '@chakra-ui/react'
-import { SubmitHandler, useForm } from 'react-hook-form'
-import { useMutation } from 'react-query'
+} from "@chakra-ui/react"
+import type React from "react"
+import { type SubmitHandler, useForm } from "react-hook-form"
+import { useMutation } from "react-query"
 
-import { ApiError, UpdatePassword, UsersService } from '../../client'
-import useCustomToast from '../../hooks/useCustomToast'
+import { type ApiError, type UpdatePassword, UsersService } from "../../client"
+import useCustomToast from "../../hooks/useCustomToast"
 
 interface UpdatePasswordForm extends UpdatePassword {
   confirm_password: string
 }
 
 const ChangePassword: React.FC = () => {
-  const color = useColorModeValue('inherit', 'ui.white')
+  const color = useColorModeValue("inherit", "ui.white")
   const showToast = useCustomToast()
   const {
     register,
@@ -30,8 +30,8 @@ const ChangePassword: React.FC = () => {
     getValues,
     formState: { errors, isSubmitting },
   } = useForm<UpdatePasswordForm>({
-    mode: 'onBlur',
-    criteriaMode: 'all',
+    mode: "onBlur",
+    criteriaMode: "all",
   })
 
   const UpdatePassword = async (data: UpdatePassword) => {
@@ -40,12 +40,12 @@ const ChangePassword: React.FC = () => {
 
   const mutation = useMutation(UpdatePassword, {
     onSuccess: () => {
-      showToast('Success!', 'Password updated.', 'success')
+      showToast("Success!", "Password updated.", "success")
       reset()
     },
     onError: (err: ApiError) => {
       const errDetail = err.body?.detail
-      showToast('Something went wrong.', `${errDetail}`, 'error')
+      showToast("Something went wrong.", `${errDetail}`, "error")
     },
   })
 
@@ -59,14 +59,14 @@ const ChangePassword: React.FC = () => {
         <Heading size="sm" py={4}>
           Change Password
         </Heading>
-        <Box w={{ sm: 'full', md: '50%' }}>
+        <Box w={{ sm: "full", md: "50%" }}>
           <FormControl isRequired isInvalid={!!errors.current_password}>
             <FormLabel color={color} htmlFor="current_password">
               Current password
             </FormLabel>
             <Input
               id="current_password"
-              {...register('current_password')}
+              {...register("current_password")}
               placeholder="Password"
               type="password"
             />
@@ -80,11 +80,11 @@ const ChangePassword: React.FC = () => {
             <FormLabel htmlFor="password">Set Password</FormLabel>
             <Input
               id="password"
-              {...register('new_password', {
-                required: 'Password is required',
+              {...register("new_password", {
+                required: "Password is required",
                 minLength: {
                   value: 8,
-                  message: 'Password must be at least 8 characters',
+                  message: "Password must be at least 8 characters",
                 },
               })}
               placeholder="Password"
@@ -98,11 +98,11 @@ const ChangePassword: React.FC = () => {
             <FormLabel htmlFor="confirm_password">Confirm Password</FormLabel>
             <Input
               id="confirm_password"
-              {...register('confirm_password', {
-                required: 'Please confirm your password',
+              {...register("confirm_password", {
+                required: "Please confirm your password",
                 validate: (value) =>
                   value === getValues().new_password ||
-                  'The passwords do not match',
+                  "The passwords do not match",
               })}
               placeholder="Password"
               type="password"