Show warning modal only when the form was changed.

frontend/src/components/Form/CreatableSelectMenu.tsx

@@ -13,6 +13,7 @@ export interface CreatableSelectMenuProps<T extends FieldValues> {
   placeholder?: string;
   handleOptionsChange?: (option: any) => void;
   handleCreate?: (inputValue: string) => void;
+  onChange?: () => void;
 }
 
 export default function CreatableSelectMenu<T extends FieldValues>({
@@ -25,6 +26,7 @@ export default function CreatableSelectMenu<T extends FieldValues>({
   placeholder,
   handleOptionsChange,
   handleCreate,
+  onChange,
 }: CreatableSelectMenuProps<T>) {
   const customStyles: StylesConfig = {
     menu: (styles) => ({
@@ -96,6 +98,7 @@ export default function CreatableSelectMenu<T extends FieldValues>({
             isMulti={isMulti}
             styles={customStyles}
             required={required}
+            onInputChange={onChange}
           />
         )}
       />

frontend/src/components/Form/SelectMenu.tsx

@@ -15,6 +15,7 @@ export interface SelectMenuProps<T extends FieldValues> {
   required?: boolean;
   placeholder?: string;
   handleOptionsChange?: (option: any) => void;
+  onChange?: () => void;
 }
 
 export default function SelectMenu<T extends FieldValues>({
@@ -26,6 +27,7 @@ export default function SelectMenu<T extends FieldValues>({
   required = false,
   placeholder,
   handleOptionsChange,
+  onChange,
 }: SelectMenuProps<T>) {
   const customStyles: StylesConfig = {
     menu: (styles) => ({
@@ -96,6 +98,7 @@ export default function SelectMenu<T extends FieldValues>({
             isMulti={isMulti}
             styles={customStyles}
             required={required}
+            onInputChange={onChange}
           />
         )}
       />

frontend/src/components/Form/SimpleFormInput.tsx

@@ -10,6 +10,7 @@ interface SimpleFormInputProps<T extends FieldValues> {
   required?: boolean;
   type?: HTMLInputTypeAttribute;
   register?: UseFormRegister<T>;
+  onChange?: () => void;
   valueAsNumber?: boolean;
   errorTitle?: string;
 }
@@ -22,6 +23,7 @@ export default function SimpleFormInput<T extends FieldValues>({
   type = 'text',
   id,
   register,
+  onChange,
   valueAsNumber = false,
   errorTitle,
 }: SimpleFormInputProps<T>) {
@@ -33,6 +35,7 @@ export default function SimpleFormInput<T extends FieldValues>({
       </label>
       {isArea ? (
         <textarea
+          onKeyUp={onChange}
           rows={6}
           name={id}
           id={id}
@@ -43,6 +46,7 @@ export default function SimpleFormInput<T extends FieldValues>({
         />
       ) : (
         <input
+          onKeyUp={onChange}
           type={type}
           id={id}
           className="block h-11 w-full rounded-lg border border-zinc-800 bg-primary-textfield p-2.5 text-sm text-white placeholder-neutral-700 focus:border-gray-600 focus:outline-none"

frontend/src/features/seeds/components/CreateSeedForm.tsx

@@ -9,10 +9,11 @@ import { SubmitHandler, useForm } from 'react-hook-form';
 
 interface CreateSeedFormProps {
   onCancel: () => void;
+  onChange: () => void;
   onSubmit: (newSeed: NewSeedDTO) => void;
 }
 
-const CreateSeedForm = ({ onCancel, onSubmit }: CreateSeedFormProps) => {
+const CreateSeedForm = ({ onCancel, onChange, onSubmit }: CreateSeedFormProps) => {
   const quality: SelectOption[] = enumToSelectOptionArr(Quality);
   const quantity: SelectOption[] = enumToSelectOptionArr(Quantity);
 
@@ -59,13 +60,15 @@ const CreateSeedForm = ({ onCancel, onSubmit }: CreateSeedFormProps) => {
             required={true}
             id="harvest_year"
             register={register}
+            onChange={onChange}
           />
           <SimpleFormInput
             labelText="Art"
             placeHolder="Tomate"
             required={true}
             id="name"
             register={register}
+            onChange={onChange}
           />
           <CreatableSelectMenu
             id="plant_id"
@@ -88,6 +91,7 @@ const CreateSeedForm = ({ onCancel, onSubmit }: CreateSeedFormProps) => {
               else if (option !== null)
                 setValue('variety', option.value); 
             }}
+            onChange={onChange}
           />
           <SelectMenu
             id="quantity"
@@ -100,19 +104,22 @@ const CreateSeedForm = ({ onCancel, onSubmit }: CreateSeedFormProps) => {
               const mapped = temp.value as Quantity;
               setValue('quantity', mapped);
             }}
+            onChange={onChange}
           />
           <SimpleFormInput
             labelText="Herkunft"
             placeHolder="Daheim"
             id="origin"
             register={register}
+            onChange={onChange}
           />
           <SimpleFormInput
             type="date"
             labelText="Verbrauch bis"
             placeHolder="Verbrauch bis"
             id="use_by"
             register={register}
+            onChange={onChange}
           />
           <SelectMenu
             id="quality"
@@ -124,28 +131,38 @@ const CreateSeedForm = ({ onCancel, onSubmit }: CreateSeedFormProps) => {
               const mapped = temp.value as Quality;
               setValue('quality', mapped);
             }}
+            onChange={onChange}
           />
           <SimpleFormInput
             labelText="Geschmack"
             placeHolder="nussig"
             id="taste"
             register={register}
+            onChange={onChange}
           />
-          <SimpleFormInput labelText="Ertrag" placeHolder="1" id="yield_" register={register} />
+          <SimpleFormInput 
+            labelText="Ertrag"
+            placeHolder="1" 
+            id="yield_" 
+            register={register} 
+            onChange={onChange}
+            />
           <SimpleFormInput
             labelText="Preis"
             placeHolder="2,99€"
             id="price"
             register={register}
             valueAsNumber={true}
             errorTitle="Der Preis muss eine Zahl sein. z.B. 2,99"
+            onChange={onChange}
           />
           <SimpleFormInput
             type="number"
             labelText="Generation"
             placeHolder="0"
             id="generation"
             register={register}
+            onChange={onChange}
           />
         </div>
         <div className="mb-6">
@@ -155,6 +172,7 @@ const CreateSeedForm = ({ onCancel, onSubmit }: CreateSeedFormProps) => {
             placeHolder="..."
             id="notes"
             register={register}
+            onChange={onChange}
           />
         </div>
         <div className="flex flex-row justify-between space-x-4">

frontend/src/features/seeds/routes/CreateSeed.tsx

@@ -10,12 +10,20 @@ export function CreateSeed() {
   const navigate = useNavigate();
 
   const [showCancelModal, setShowCancelModal] = useState(false);
+  const [formTouched, setFormTouched] = useState(false);
   const createSeed = useCreateSeedStore((state) => state.createSeed);
   const showErrorModal = useCreateSeedStore((state) => state.showErrorModal);
   const setShowErrorModal = useCreateSeedStore((state) => state.setShowErrorModal);
   const error = useCreateSeedStore((state) => state.error);
 
   const onCancel = () => {
+    // There is no need to show the cancel warning modal if the user
+    // has not made any changes yet.
+    if (!formTouched) {
+      navigate('/seeds');
+      return;
+    }
+
     setShowCancelModal(!showCancelModal);
   };
 
@@ -26,10 +34,14 @@ export function CreateSeed() {
     }
   };
 
+  const onChange = () => {
+    setFormTouched(true);
+  }
+
   return (
     <div className="mx-auto w-full p-4 md:w-[900px]">
       <PageTitle title="Neuer Eintrag" />
-      <CreateSeedForm onCancel={onCancel} onSubmit={onSubmit} />
+      <CreateSeedForm onCancel={onCancel} onChange={onChange} onSubmit={onSubmit} />
       <SimpleModal
         title="Eintrag abbrechen"
         body="Änderungen, die Sie vorgenommen haben, werden nicht gespeichert. Wollen Sie wirklich abbrechen?"
@@ -41,7 +53,7 @@ export function CreateSeed() {
           setShowCancelModal(false);
         }}
         onSubmit={() => {
-          // TODO: redirect to previous page or another page
+          navigate('/seeds');
         }}
       />
       <SimpleModal