nt_web_template/full-stack-fastapi-template
2
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

✨ Add form validation to Admin, Items and Login (#616)

Browse Source
This commit is contained in:
Alejandra
2024-02-28 18:30:59 -05:00
committed by GitHub
parent 08395759fe
commit e4a4bed5b6
9 changed files with 136 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/new-frontend/src/components/Admin/AddUser.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react';
import { Button, Checkbox, Flex, FormControl, FormLabel, Input, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay } from '@chakra-ui/react';
import { Button, Checkbox, Flex, FormControl, FormErrorMessage, FormLabel, Input, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay } from '@chakra-ui/react';
import { SubmitHandler, useForm } from 'react-hook-form';
import { UserCreate } from '../../client';
@@ -14,17 +14,27 @@ interface AddUserProps {
}
interface UserCreateForm extends UserCreate {
confirmPassword: string;
confirm_password: string;
}
const AddUser: React.FC<AddUserProps> = ({ isOpen, onClose }) => {
const showToast = useCustomToast();
const { register, handleSubmit, reset, formState: { isSubmitting } } = useForm<UserCreateForm>();
const { register, handleSubmit, reset, getValues, formState: { errors, isSubmitting } } = useForm<UserCreateForm>({
mode: 'onBlur',
criteriaMode: 'all',
defaultValues: {
email: '',
full_name: '',
password: '',
confirm_password: '',
is_superuser: false,
is_active: false
}
});
const { addUser } = useUsersStore();
const onSubmit: SubmitHandler<UserCreateForm> = async (data) => {
if (data.password === data.confirmPassword) {
try {
await addUser(data);
showToast('Success!', 'User created successfully.', 'success');
@@ -34,10 +44,6 @@ const AddUser: React.FC<AddUserProps> = ({ isOpen, onClose }) => {
const errDetail = (err as ApiError).body.detail;
showToast('Something went wrong.', `${errDetail}`, 'error');
}
} else {
// TODO: Complete when form validation is implemented
console.log("Passwords don't match")
}
}
return (
@@ -53,21 +59,28 @@ const AddUser: React.FC<AddUserProps> = ({ isOpen, onClose }) => {
<ModalHeader>Add User</ModalHeader>
<ModalCloseButton />
<ModalBody pb={6} >
<FormControl>
<FormControl isRequired isInvalid={!!errors.email}>
<FormLabel htmlFor='email'>Email</FormLabel>
<Input id='email' {...register('email')} placeholder='Email' type='email' />
<Input id='email' {...register('email', { required: 'Email is required', pattern: { value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i, message: 'Invalid email address' } })} placeholder='Email' type='email' />
{errors.email && <FormErrorMessage>{errors.email.message}</FormErrorMessage>}
</FormControl>
<FormControl mt={4}>
<FormControl mt={4} isInvalid={!!errors.full_name}>
<FormLabel htmlFor='name'>Full name</FormLabel>
<Input id='name' {...register('full_name')} placeholder='Full name' type='text' />
{errors.full_name && <FormErrorMessage>{errors.full_name.message}</FormErrorMessage>}
</FormControl>
<FormControl mt={4}>
<FormControl mt={4} isRequired isInvalid={!!errors.password}>
<FormLabel htmlFor='password'>Set Password</FormLabel>
<Input id='password' {...register('password')} placeholder='Password' type='password' />
<Input id='password' {...register('password', { required: 'Password is required', minLength: { value: 8, message: 'Password must be at least 8 characters' } })} placeholder='Password' type='password' />
{errors.password && <FormErrorMessage>{errors.password.message}</FormErrorMessage>}
</FormControl>
<FormControl mt={4}>
<FormLabel htmlFor='confirmPassword'>Confirm Password</FormLabel>
<Input id='confirmPassword' {...register('confirmPassword')} placeholder='Password' type='password' />
<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().password || 'The passwords do not match'
})} placeholder='Password' type='password' />
{errors.confirm_password && <FormErrorMessage>{errors.confirm_password.message}</FormErrorMessage>}
</FormControl>
<Flex mt={4}>
<FormControl>
@@ -79,7 +92,7 @@ const AddUser: React.FC<AddUserProps> = ({ isOpen, onClose }) => {
</Flex>
</ModalBody>
<ModalFooter gap={3}>
<Button bg='ui.main' color='white' type='submit' isLoading={isSubmitting}>
<Button bg='ui.main' color='white' _hover={{ opacity: 0.8 }} type='submit' isLoading={isSubmitting}>
Save
</Button>
<Button onClick={onClose}>Cancel</Button>

52
src/new-frontend/src/components/Admin/EditUser.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react';
import { Button, Checkbox, Flex, FormControl, FormLabel, Input, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay } from '@chakra-ui/react';
import { Button, Checkbox, Flex, FormControl, FormErrorMessage, FormLabel, Input, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay } from '@chakra-ui/react';
import { SubmitHandler, useForm } from 'react-hook-form';
import { ApiError, UserUpdate } from '../../client';
@@ -19,14 +19,27 @@ interface UserUpdateForm extends UserUpdate {
const EditUser: React.FC<EditUserProps> = ({ user_id, isOpen, onClose }) => {
const showToast = useCustomToast();
const { register, handleSubmit, reset, formState: { isSubmitting } } = useForm<UserUpdateForm>();
const { editUser, users } = useUsersStore();
const currentUser = users.find((user) => user.id === user_id);
const { register, handleSubmit, reset, getValues, formState: { errors, isSubmitting } } = useForm<UserUpdateForm>({
mode: 'onBlur',
criteriaMode: 'all',
defaultValues: {
email: currentUser?.email,
full_name: currentUser?.full_name,
password: '',
confirm_password: '',
is_superuser: currentUser?.is_superuser,
is_active: currentUser?.is_active
}
});
const onSubmit: SubmitHandler<UserUpdateForm> = async (data) => {
if (data.password === data.confirm_password) {
try {
if (data.password === '') {
delete data.password;
}
await editUser(user_id, data);
showToast('Success!', 'User updated successfully.', 'success');
reset();
@@ -35,10 +48,6 @@ const EditUser: React.FC<EditUserProps> = ({ user_id, isOpen, onClose }) => {
const errDetail = (err as ApiError).body.detail;
showToast('Something went wrong.', `${errDetail}`, 'error');
}
} else {
// TODO: Complete when form validation is implemented
console.log("Passwords don't match")
}
}
const onCancel = () => {
@@ -59,28 +68,33 @@ const EditUser: React.FC<EditUserProps> = ({ user_id, isOpen, onClose }) => {
<ModalHeader>Edit User</ModalHeader>
<ModalCloseButton />
<ModalBody pb={6}>
<FormControl>
<FormControl isInvalid={!!errors.email}>
<FormLabel htmlFor='email'>Email</FormLabel>
<Input id="email" {...register('email')} defaultValue={currentUser?.email} type='email' />
<Input id='email' {...register('email', { pattern: { value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i, message: 'Invalid email address' } })} placeholder='Email' type='email' />
{errors.email && <FormErrorMessage>{errors.email.message}</FormErrorMessage>}
</FormControl>
<FormControl mt={4}>
<FormLabel htmlFor='name'>Full name</FormLabel>
<Input id="name" {...register('full_name')} defaultValue={currentUser?.full_name} type='text' />
<Input id="name" {...register('full_name')} type='text' />
</FormControl>
<FormControl mt={4}>
<FormLabel htmlFor='password'>Password</FormLabel>
<Input id="password" {...register('password')} placeholder='••••••••' type='password' />
<FormControl mt={4} isInvalid={!!errors.password}>
<FormLabel htmlFor='password'>Set Password</FormLabel>
<Input id='password' {...register('password', { minLength: { value: 8, message: 'Password must be at least 8 characters' } })} placeholder='••••••••' type='password' />
{errors.password && <FormErrorMessage>{errors.password.message}</FormErrorMessage>}
</FormControl>
<FormControl mt={4}>
<FormLabel htmlFor='confirmPassword'>Confirmation Password</FormLabel>
<Input id='confirmPassword' {...register('confirm_password')} placeholder='••••••••' type='password' />
<FormControl mt={4} isInvalid={!!errors.confirm_password}>
<FormLabel htmlFor='confirm_password'>Confirm Password</FormLabel>
<Input id='confirm_password' {...register('confirm_password', {
validate: value => value === getValues().password || 'The passwords do not match'
})} placeholder='••••••••' type='password' />
{errors.confirm_password && <FormErrorMessage>{errors.confirm_password.message}</FormErrorMessage>}
</FormControl>
<Flex>
<FormControl mt={4}>
<Checkbox {...register('is_superuser')} defaultChecked={currentUser?.is_superuser} colorScheme='teal'>Is superuser?</Checkbox>
<Checkbox {...register('is_superuser')} colorScheme='teal'>Is superuser?</Checkbox>
</FormControl>
<FormControl mt={4}>
<Checkbox {...register('is_active')} defaultChecked={currentUser?.is_active} colorScheme='teal'>Is active?</Checkbox>
<Checkbox {...register('is_active')} colorScheme='teal'>Is active?</Checkbox>
</FormControl>
</Flex>
</ModalBody>

10
src/new-frontend/src/components/Common/DeleteAlert.tsx
View File

@@ -17,21 +17,17 @@ interface DeleteProps {
const Delete: React.FC<DeleteProps> = ({ type, id, isOpen, onClose }) => {
const showToast = useCustomToast();
const cancelRef = React.useRef<HTMLButtonElement | null>(null);
const [isLoading, setIsLoading] = useState(false);
const { handleSubmit } = useForm();
const { handleSubmit, formState: {isSubmitting} } = useForm();
const { deleteItem } = useItemsStore();
const { deleteUser } = useUsersStore();
const onSubmit = async () => {
setIsLoading(true);
try {
type === 'Item' ? await deleteItem(id) : await deleteUser(id);
showToast('Success', `The ${type.toLowerCase()} was deleted successfully.`, 'success');
onClose();
} catch (err) {
showToast('An error occurred.', `An error occurred while deleting the ${type.toLowerCase()}.`, 'error');
} finally {
setIsLoading(false);
}
}
@@ -56,10 +52,10 @@ const Delete: React.FC<DeleteProps> = ({ type, id, isOpen, onClose }) => {
</AlertDialogBody>
<AlertDialogFooter gap={3}>
<Button bg="ui.danger" color="white" _hover={{ opacity: 0.8 }} type="submit" isLoading={isLoading}>
<Button bg="ui.danger" color="white" _hover={{ opacity: 0.8 }} type="submit" isLoading={isSubmitting}>
Delete
</Button>
<Button ref={cancelRef} onClick={onClose} isDisabled={isLoading}>
<Button ref={cancelRef} onClick={onClose} isDisabled={isSubmitting}>
Cancel
</Button>
</AlertDialogFooter>

26
src/new-frontend/src/components/Items/AddItem.tsx
View File

@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import React from 'react';
import { Button, FormControl, FormLabel, Input, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay } from '@chakra-ui/react';
import { Button, FormControl, FormErrorMessage, FormLabel, Input, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay } from '@chakra-ui/react';
import { SubmitHandler, useForm } from 'react-hook-form';
import { ApiError, ItemCreate } from '../../client';
@@ -14,12 +14,17 @@ interface AddItemProps {
const AddItem: React.FC<AddItemProps> = ({ isOpen, onClose }) => {
const showToast = useCustomToast();
const [isLoading, setIsLoading] = useState(false);
const { register, handleSubmit, reset } = useForm<ItemCreate>();
const { register, handleSubmit, reset, formState: { errors, isSubmitting } } = useForm<ItemCreate>({
mode: 'onBlur',
criteriaMode: 'all',
defaultValues: {
title: '',
description: '',
},
});
const { addItem } = useItemsStore();
const onSubmit: SubmitHandler<ItemCreate> = async (data) => {
setIsLoading(true);
try {
await addItem(data);
showToast('Success!', 'Item created successfully.', 'success');
@@ -28,8 +33,6 @@ const AddItem: React.FC<AddItemProps> = ({ isOpen, onClose }) => {
} catch (err) {
const errDetail = (err as ApiError).body.detail;
showToast('Something went wrong.', `${errDetail}`, 'error');
} finally {
setIsLoading(false);
}
};
@@ -46,14 +49,15 @@ const AddItem: React.FC<AddItemProps> = ({ isOpen, onClose }) => {
<ModalHeader>Add Item</ModalHeader>
<ModalCloseButton />
<ModalBody pb={6}>
<FormControl>
<FormControl isRequired isInvalid={!!errors.title}>
<FormLabel htmlFor='title'>Title</FormLabel>
<Input
id='title'
{...register('title')}
{...register('title', { required: 'Title is required.' })}
placeholder='Title'
type='text'
/>
{errors.title && <FormErrorMessage>{errors.title.message}</FormErrorMessage>}
</FormControl>
<FormControl mt={4}>
<FormLabel htmlFor='description'>Description</FormLabel>
@@ -67,10 +71,10 @@ const AddItem: React.FC<AddItemProps> = ({ isOpen, onClose }) => {
</ModalBody>
<ModalFooter gap={3}>
<Button bg='ui.main' color='white' _hover={{ opacity: 0.8 }} type='submit' isLoading={isLoading}>
<Button bg='ui.main' color='white' _hover={{ opacity: 0.8 }} type='submit' isLoading={isSubmitting}>
Save
</Button>
<Button onClick={onClose} isDisabled={isLoading}>
<Button onClick={onClose}>
Cancel
</Button>
</ModalFooter>

7
src/new-frontend/src/components/Items/EditItem.tsx
View File

@@ -15,10 +15,9 @@ interface EditItemProps {
const EditItem: React.FC<EditItemProps> = ({ id, isOpen, onClose }) => {
const showToast = useCustomToast();
const { register, handleSubmit, reset, formState: { isSubmitting }, } = useForm<ItemUpdate>();
const { editItem, items } = useItemsStore();
const currentItem = items.find((item) => item.id === id);
const { register, handleSubmit, reset, formState: { isSubmitting }, } = useForm<ItemUpdate>({ defaultValues: { title: currentItem?.title, description: currentItem?.description } });
const onSubmit: SubmitHandler<ItemUpdate> = async (data) => {
try {
@@ -52,11 +51,11 @@ const EditItem: React.FC<EditItemProps> = ({ id, isOpen, onClose }) => {
<ModalBody pb={6}>
<FormControl>
<FormLabel htmlFor='title'>Title</FormLabel>
<Input id='title' {...register('title')} defaultValue={currentItem?.title} type='text' />
<Input id='title' {...register('title')} type='text' />
</FormControl>
<FormControl mt={4}>
<FormLabel htmlFor='description'>Description</FormLabel>
<Input id='description' {...register('description')} defaultValue={currentItem?.description} placeholder='Description' type='text' />
<Input id='description' {...register('description')} placeholder='Description' type='text' />
</FormControl>
</ModalBody>
<ModalFooter gap={3}>

4
src/new-frontend/src/components/UserSettings/Appearance.tsx
View File

@@ -15,10 +15,10 @@ const Appearance: React.FC = () => {
<Stack>
{/* TODO: Add system default option */}
<Radio value='light' colorScheme='teal'>
Light Mode<Badge ml='1' colorScheme='teal'>Default</Badge>
Light mode<Badge ml='1' colorScheme='teal'>Default</Badge>
</Radio>
<Radio value='dark' colorScheme='teal'>
Dark Mode
Dark mode
</Radio>
</Stack>
</RadioGroup>

4
src/new-frontend/src/components/UserSettings/DeleteConfirmation.tsx
View File

@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React from 'react';
import { AlertDialog, AlertDialogBody, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, Button } from '@chakra-ui/react';
import { useForm } from 'react-hook-form';
@@ -54,7 +54,7 @@ const DeleteConfirmation: React.FC<DeleteProps> = ({ isOpen, onClose }) => {
<Button bg='ui.danger' color='white' _hover={{ opacity: 0.8 }} type='submit' isLoading={isSubmitting}>
Confirm
</Button>
<Button ref={cancelRef} onClick={onClose} isDisabled={isLoading}>
<Button ref={cancelRef} onClick={onClose} isDisabled={isSubmitting}>
Cancel
</Button>
</AlertDialogFooter>

2
src/new-frontend/src/components/UserSettings/UserInformation.tsx
View File

@@ -75,7 +75,7 @@ const UserInformation: React.FC = () => {
{editMode ? 'Save' : 'Edit'}
</Button>
{editMode &&
<Button onClick={onCancel}>
<Button onClick={onCancel} isDisabled={isSubmitting}>
Cancel
</Button>}
</Flex>

40
src/new-frontend/src/pages/Login.tsx
View File

@@ -1,23 +1,35 @@
import React from 'react';
import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons';
import { Button, Center, Container, FormControl, Icon, Image, Input, InputGroup, InputRightElement, Link, useBoolean } from '@chakra-ui/react';
import { Button, Center, Container, FormControl, FormErrorMessage, Icon, Image, Input, InputGroup, InputRightElement, Link, useBoolean } from '@chakra-ui/react';
import { SubmitHandler, useForm } from 'react-hook-form';
import { Link as ReactRouterLink, useNavigate } from 'react-router-dom';
import { Link as ReactRouterLink } from 'react-router-dom';
import Logo from '../assets/images/fastapi-logo.svg';
import { ApiError } from '../client';
import { Body_login_login_access_token as AccessToken } from '../client/models/Body_login_login_access_token';
import useAuth from '../hooks/useAuth';
const Login: React.FC = () => {
const [show, setShow] = useBoolean();
const navigate = useNavigate();
const { register, handleSubmit } = useForm<AccessToken>();
const [error, setError] = React.useState<string | null>(null);
const { register, handleSubmit, formState: { errors, isSubmitting } } = useForm<AccessToken>({
mode: 'onBlur',
criteriaMode: 'all',
defaultValues: {
username: '',
password: ''
}
});
const { login } = useAuth();
const onSubmit: SubmitHandler<AccessToken> = async (data) => {
try {
await login(data);
navigate('/');
} catch (err) {
const errDetail = (err as ApiError).body.detail;
setError(errDetail)
}
};
return (
@@ -32,11 +44,12 @@ const Login: React.FC = () => {
gap={4}
centerContent
>
<Image src={Logo} alt='FastAPI logo' height='auto' maxW='2xs' alignSelf='center' />
<FormControl id='email'>
<Input {...register('username')} placeholder='Email' type='text' />
<Image src={Logo} alt='FastAPI logo' height='auto' maxW='2xs' alignSelf='center' mb={4} />
<FormControl id='username' isInvalid={!!errors.username || !!error}>
<Input id='username' {...register('username', { pattern: { value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i, message: 'Invalid email address' } })} placeholder='Email' type='text' />
{errors.username && <FormErrorMessage>{errors.username.message}</FormErrorMessage>}
</FormControl>
<FormControl id='password'>
<FormControl id='password' isInvalid={!!error}>
<InputGroup>
<Input
{...register('password')}
@@ -55,13 +68,16 @@ const Login: React.FC = () => {
</Icon>
</InputRightElement>
</InputGroup>
{error && <FormErrorMessage>
{error}
</FormErrorMessage>}
</FormControl>
<Center>
<Link as={ReactRouterLink} to='/recover-password' color='blue.500' mt={2}>
<Link as={ReactRouterLink} to='/recover-password' color='blue.500'>
Forgot password?
</Link>
</Center>
</FormControl>
<Button bg='ui.main' color='white' _hover={{ opacity: 0.8 }} type='submit'>
<Button bg='ui.main' color='white' _hover={{ opacity: 0.8 }} type='submit' isLoading={isSubmitting}>
Log In
</Button>
</Container>