fix clearing password fields on React auth forms (#395)

* fix clearing password fields on post * fix formatting
laravel · Jul 17, 2024 · 1446994 · 1446994
1 parent 8a60327
commit 1446994
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 64 deletions.
diff --git a/stubs/inertia-react-ts/resources/js/Pages/Auth/ConfirmPassword.tsx b/stubs/inertia-react-ts/resources/js/Pages/Auth/ConfirmPassword.tsx
@@ -1,4 +1,4 @@
-import { useEffect, FormEventHandler } from 'react';
+import { FormEventHandler } from 'react';
 import GuestLayout from '@/Layouts/GuestLayout';
 import InputError from '@/Components/InputError';
 import InputLabel from '@/Components/InputLabel';
@@ -11,16 +11,12 @@ export default function ConfirmPassword() {
         password: '',
     });
 
-    useEffect(() => {
-        return () => {
-            reset('password');
-        };
-    }, []);
-
     const submit: FormEventHandler = (e) => {
         e.preventDefault();
 
-        post(route('password.confirm'));
+        post(route('password.confirm'), {
+            onFinish: () => reset('password'),
+        });
     };
 
     return (

diff --git a/stubs/inertia-react-ts/resources/js/Pages/Auth/Login.tsx b/stubs/inertia-react-ts/resources/js/Pages/Auth/Login.tsx
@@ -1,4 +1,4 @@
-import { useEffect, FormEventHandler } from 'react';
+import { FormEventHandler } from 'react';
 import Checkbox from '@/Components/Checkbox';
 import GuestLayout from '@/Layouts/GuestLayout';
 import InputError from '@/Components/InputError';
@@ -14,16 +14,12 @@ export default function Login({ status, canResetPassword }: { status?: string, c
         remember: false,
     });
 
-    useEffect(() => {
-        return () => {
-            reset('password');
-        };
-    }, []);
-
     const submit: FormEventHandler = (e) => {
         e.preventDefault();
 
-        post(route('login'));
+        post(route('login'), {
+            onFinish: () => reset('password'),
+        });
     };
 
     return (

diff --git a/stubs/inertia-react-ts/resources/js/Pages/Auth/Register.tsx b/stubs/inertia-react-ts/resources/js/Pages/Auth/Register.tsx
@@ -1,4 +1,4 @@
-import { useEffect, FormEventHandler } from 'react';
+import { FormEventHandler } from 'react';
 import GuestLayout from '@/Layouts/GuestLayout';
 import InputError from '@/Components/InputError';
 import InputLabel from '@/Components/InputLabel';
@@ -14,16 +14,12 @@ export default function Register() {
         password_confirmation: '',
     });
 
-    useEffect(() => {
-        return () => {
-            reset('password', 'password_confirmation');
-        };
-    }, []);
-
     const submit: FormEventHandler = (e) => {
         e.preventDefault();
 
-        post(route('register'));
+        post(route('register'), {
+            onFinish: () => reset('password', 'password_confirmation'),
+        });
     };
 
     return (

diff --git a/stubs/inertia-react-ts/resources/js/Pages/Auth/ResetPassword.tsx b/stubs/inertia-react-ts/resources/js/Pages/Auth/ResetPassword.tsx
@@ -1,4 +1,4 @@
-import { useEffect, FormEventHandler } from 'react';
+import { FormEventHandler } from 'react';
 import GuestLayout from '@/Layouts/GuestLayout';
 import InputError from '@/Components/InputError';
 import InputLabel from '@/Components/InputLabel';
@@ -14,16 +14,12 @@ export default function ResetPassword({ token, email }: { token: string, email:
         password_confirmation: '',
     });
 
-    useEffect(() => {
-        return () => {
-            reset('password', 'password_confirmation');
-        };
-    }, []);
-
     const submit: FormEventHandler = (e) => {
         e.preventDefault();
 
-        post(route('password.store'));
+        post(route('password.store'), {
+            onFinish: () => reset('password', 'password_confirmation'),
+        });
     };
 
     return (

diff --git a/stubs/inertia-react/resources/js/Pages/Auth/ConfirmPassword.jsx b/stubs/inertia-react/resources/js/Pages/Auth/ConfirmPassword.jsx
@@ -1,4 +1,3 @@
-import { useEffect } from 'react';
 import GuestLayout from '@/Layouts/GuestLayout';
 import InputError from '@/Components/InputError';
 import InputLabel from '@/Components/InputLabel';
@@ -11,16 +10,12 @@ export default function ConfirmPassword() {
         password: '',
     });
 
-    useEffect(() => {
-        return () => {
-            reset('password');
-        };
-    }, []);
-
     const submit = (e) => {
         e.preventDefault();
 
-        post(route('password.confirm'));
+        post(route('password.confirm'), {
+            onFinish: () => reset('password'),
+        });
     };
 
     return (

diff --git a/stubs/inertia-react/resources/js/Pages/Auth/Login.jsx b/stubs/inertia-react/resources/js/Pages/Auth/Login.jsx
@@ -1,4 +1,3 @@
-import { useEffect } from 'react';
 import Checkbox from '@/Components/Checkbox';
 import GuestLayout from '@/Layouts/GuestLayout';
 import InputError from '@/Components/InputError';
@@ -14,16 +13,12 @@ export default function Login({ status, canResetPassword }) {
         remember: false,
     });
 
-    useEffect(() => {
-        return () => {
-            reset('password');
-        };
-    }, []);
-
     const submit = (e) => {
         e.preventDefault();
 
-        post(route('login'));
+        post(route('login'), {
+            onFinish: () => reset('password'),
+        });
     };
 
     return (

diff --git a/stubs/inertia-react/resources/js/Pages/Auth/Register.jsx b/stubs/inertia-react/resources/js/Pages/Auth/Register.jsx
@@ -1,4 +1,3 @@
-import { useEffect } from 'react';
 import GuestLayout from '@/Layouts/GuestLayout';
 import InputError from '@/Components/InputError';
 import InputLabel from '@/Components/InputLabel';
@@ -14,16 +13,12 @@ export default function Register() {
         password_confirmation: '',
     });
 
-    useEffect(() => {
-        return () => {
-            reset('password', 'password_confirmation');
-        };
-    }, []);
-
     const submit = (e) => {
         e.preventDefault();
 
-        post(route('register'));
+        post(route('register'), {
+            onFinish: () => reset('password', 'password_confirmation'),
+        });
     };
 
     return (

diff --git a/stubs/inertia-react/resources/js/Pages/Auth/ResetPassword.jsx b/stubs/inertia-react/resources/js/Pages/Auth/ResetPassword.jsx
@@ -1,4 +1,3 @@
-import { useEffect } from 'react';
 import GuestLayout from '@/Layouts/GuestLayout';
 import InputError from '@/Components/InputError';
 import InputLabel from '@/Components/InputLabel';
@@ -14,16 +13,12 @@ export default function ResetPassword({ token, email }) {
         password_confirmation: '',
     });
 
-    useEffect(() => {
-        return () => {
-            reset('password', 'password_confirmation');
-        };
-    }, []);
-
     const submit = (e) => {
         e.preventDefault();
 
-        post(route('password.store'));
+        post(route('password.store'), {
+            onFinish: () => reset('password', 'password_confirmation'),
+        });
     };
 
     return (