🎨 Format with Prettier (#646)

new-frontend/src/components/UserSettings/ChangePassword.tsx

@@ -1,74 +1,137 @@
-import React from 'react';
+import React from 'react'
+import {
+  Box,
+  Button,
+  Container,
+  FormControl,
+  FormErrorMessage,
+  FormLabel,
+  Heading,
+  Input,
+  useColorModeValue,
+} from '@chakra-ui/react'
+import { SubmitHandler, useForm } from 'react-hook-form'
+import { useMutation } from 'react-query'
 
-import { Box, Button, Container, FormControl, FormErrorMessage, FormLabel, Heading, Input, useColorModeValue } from '@chakra-ui/react';
-import { SubmitHandler, useForm } from 'react-hook-form';
-import { useMutation } from 'react-query';
-
-import { ApiError, UpdatePassword, UsersService } from '../../client';
-import useCustomToast from '../../hooks/useCustomToast';
+import { ApiError, UpdatePassword, UsersService } from '../../client'
+import useCustomToast from '../../hooks/useCustomToast'
 
 interface UpdatePasswordForm extends UpdatePassword {
-    confirm_password: string;
+  confirm_password: string
 }
 
 const ChangePassword: React.FC = () => {
-    const color = useColorModeValue('gray.700', 'white');
-    const showToast = useCustomToast();
-    const { register, handleSubmit, reset, getValues, formState: { errors, isSubmitting } } = useForm<UpdatePasswordForm>({
-        mode: 'onBlur',
-        criteriaMode: 'all'
-    });
+  const color = useColorModeValue('gray.700', 'white')
+  const showToast = useCustomToast()
+  const {
+    register,
+    handleSubmit,
+    reset,
+    getValues,
+    formState: { errors, isSubmitting },
+  } = useForm<UpdatePasswordForm>({
+    mode: 'onBlur',
+    criteriaMode: 'all',
+  })
 
-    const UpdatePassword = async (data: UpdatePassword) => {
-        await UsersService.updatePasswordMe({ requestBody: data })
-    }
+  const UpdatePassword = async (data: UpdatePassword) => {
+    await UsersService.updatePasswordMe({ requestBody: data })
+  }
 
-    const mutation = useMutation(UpdatePassword, {
-        onSuccess: () => {
-            showToast('Success!', 'Password updated.', 'success');
-            reset();
-        },
-        onError: (err: ApiError) => {
-            const errDetail = err.body.detail;
-            showToast('Something went wrong.', `${errDetail}`, 'error');
-        }
-    })
+  const mutation = useMutation(UpdatePassword, {
+    onSuccess: () => {
+      showToast('Success!', 'Password updated.', 'success')
+      reset()
+    },
+    onError: (err: ApiError) => {
+      const errDetail = err.body.detail
+      showToast('Something went wrong.', `${errDetail}`, 'error')
+    },
+  })
 
-    const onSubmit: SubmitHandler<UpdatePasswordForm> = async (data) => {
-        mutation.mutate(data);
-    }
+  const onSubmit: SubmitHandler<UpdatePasswordForm> = async (data) => {
+    mutation.mutate(data)
+  }
 
-    return (
-        <>
-            <Container maxW='full' as='form' onSubmit={handleSubmit(onSubmit)}>
-                <Heading size='sm' py={4}>
-                    Change Password
-                </Heading>
-                <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', { required: 'Password is required', minLength: { value: 8, message: 'Password must be at least 8 characters' } })} placeholder='Password' type='password' />
-                        {errors.current_password && <FormErrorMessage>{errors.current_password.message}</FormErrorMessage>}
-                    </FormControl>
-                    <FormControl mt={4} isRequired isInvalid={!!errors.new_password}>
-                        <FormLabel htmlFor='password'>Set Password</FormLabel>
-                        <Input id='password' {...register('new_password', { required: 'Password is required', minLength: { value: 8, message: 'Password must be at least 8 characters' } })} placeholder='Password' type='password' />
-                        {errors.new_password && <FormErrorMessage>{errors.new_password.message}</FormErrorMessage>}
-                    </FormControl>
-                    <FormControl mt={4} isRequired isInvalid={!!errors.confirm_password}>
-                        <FormLabel htmlFor='confirm_password'>Confirm Password</FormLabel>
-                        <Input id='confirm_password' {...register('confirm_password', {
-                            required: 'Please confirm your password',
-                            validate: value => value === getValues().new_password || 'The passwords do not match'
-                        })} placeholder='Password' type='password' />
-                        {errors.confirm_password && <FormErrorMessage>{errors.confirm_password.message}</FormErrorMessage>}
-                    </FormControl>
-                    <Button bg='ui.main' color='white' _hover={{ opacity: 0.8 }} mt={4} type='submit' isLoading={isSubmitting}>
-                        Save
-                    </Button>
-                </Box>
-            </ Container>
-        </>
-    );
+  return (
+    <>
+      <Container maxW="full" as="form" onSubmit={handleSubmit(onSubmit)}>
+        <Heading size="sm" py={4}>
+          Change Password
+        </Heading>
+        <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', {
+                required: 'Password is required',
+                minLength: {
+                  value: 8,
+                  message: 'Password must be at least 8 characters',
+                },
+              })}
+              placeholder="Password"
+              type="password"
+            />
+            {errors.current_password && (
+              <FormErrorMessage>
+                {errors.current_password.message}
+              </FormErrorMessage>
+            )}
+          </FormControl>
+          <FormControl mt={4} isRequired isInvalid={!!errors.new_password}>
+            <FormLabel htmlFor="password">Set Password</FormLabel>
+            <Input
+              id="password"
+              {...register('new_password', {
+                required: 'Password is required',
+                minLength: {
+                  value: 8,
+                  message: 'Password must be at least 8 characters',
+                },
+              })}
+              placeholder="Password"
+              type="password"
+            />
+            {errors.new_password && (
+              <FormErrorMessage>{errors.new_password.message}</FormErrorMessage>
+            )}
+          </FormControl>
+          <FormControl mt={4} isRequired isInvalid={!!errors.confirm_password}>
+            <FormLabel htmlFor="confirm_password">Confirm Password</FormLabel>
+            <Input
+              id="confirm_password"
+              {...register('confirm_password', {
+                required: 'Please confirm your password',
+                validate: (value) =>
+                  value === getValues().new_password ||
+                  'The passwords do not match',
+              })}
+              placeholder="Password"
+              type="password"
+            />
+            {errors.confirm_password && (
+              <FormErrorMessage>
+                {errors.confirm_password.message}
+              </FormErrorMessage>
+            )}
+          </FormControl>
+          <Button
+            bg="ui.main"
+            color="white"
+            _hover={{ opacity: 0.8 }}
+            mt={4}
+            type="submit"
+            isLoading={isSubmitting}
+          >
+            Save
+          </Button>
+        </Box>
+      </Container>
+    </>
+  )
 }
-export default ChangePassword;
+export default ChangePassword