fix: forms close

withastro-utils · Dec 4, 2023 · 5dd2955 · 5dd2955
1 parent 537001d
commit 5dd2955
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 4 deletions.
diff --git a/examples/simple-form/src/pages/index.astro b/examples/simple-form/src/pages/index.astro
@@ -9,12 +9,17 @@ const form = Bind({age: 0, name: ''});
 let showSubmitText: string;
 
 function formSubmit(){
+    Astro.locals.session.counter ??= 0;
+    Astro.locals.session.counter++;
     showSubmitText = `You name is ${form.name}, you are ${form.age} years old. `;
 }
 ---
 <Layout title="Welcome to Astro Metro.">
     <BindForm bind={form}>
         {showSubmitText}
+        {Astro.locals.session.counter &&
+                <p>You have submitted {Astro.locals.session.counter} times.</p>
+        }
 
         <h4>What you name*</h4>
         <BInput type="text" name="name" maxlength={20} required/>

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/forms/components/WebForms.astro b/packages/forms/components/WebForms.astro
@@ -11,6 +11,7 @@ const context = {
     webFormsSettings: {haveFileUpload: false}
 };
 
+await Astro.locals.__formsInternalUtils?.onWebFormsOpen?.();
 const htmlSolt = await asyncContext(() => Astro.slots.render('default'), Astro, {name: '@astro-utils/forms', context});
 
 const {webFormsSettings, ...props} = context;
@@ -19,6 +20,7 @@ if (webFormsSettings.haveFileUpload) {
 }
 
 const formRequestToken = FORM_OPTIONS.session?.cookieOptions?.maxAge && await createFormToken(Astro);
+await Astro.locals.__formsInternalUtils?.onWebFormClose?.();
 ---
 <form method="post" {...props}>
     {formRequestToken && <input type="hidden" name={formRequestToken.filed} value={formRequestToken.token}/>}

diff --git a/packages/forms/package.json b/packages/forms/package.json
@@ -52,6 +52,7 @@
     "@types/formidable": "^2.0.5",
     "@types/jsonwebtoken": "^9.0.1",
     "@types/node": "^18.11.10",
+    "@types/promise-timeout": "^1.3.3",
     "@types/uuid": "^9.0.1",
     "semantic-release-commit-filter": "^1.0.2",
     "typescript": "^5.2.2",
@@ -66,6 +67,7 @@
     "defaults": "^3.0.0",
     "formidable": "^3.2.5",
     "jsonwebtoken": "^9.0.0",
+    "promise-timeout": "^1.3.0",
     "uuid": "^9.0.0",
     "zod": "^3.19.1"
   },

diff --git a/packages/forms/src/middleware.ts b/packages/forms/src/middleware.ts
@@ -5,6 +5,7 @@ import {FORM_OPTIONS, FormsSettings} from './settings.js';
 import {v4 as uuid} from 'uuid';
 import defaults from 'defaults';
 import {deleteFormFiles} from './form-tools/post.js';
+import {timeout} from 'promise-timeout';
 
 const DEFAULT_FORM_OPTIONS: FormsSettings = {
     csrf: DEFAULT_SETTINGS_CSRF,
@@ -21,6 +22,7 @@ const DEFAULT_FORM_OPTIONS: FormsSettings = {
             maxAge: 1000 * 60 * 60 * 24 * 7
         }
     },
+    pageLoadTimeoutMS: 1000 * 5,
     secret: uuid()
 };
 
@@ -31,11 +33,29 @@ export default function astroForms(settings: Partial<FormsSettings> = {}){
         const session = new JWTSession(cookies);
         locals.session = session.sessionData;
 
+        let response: Response;
+        let pageFinished: (data?: any) => void;
+
+        locals.__formsInternalUtils = {
+            onWebFormClose() {
+                session.setCookieHeader(response.headers);
+                deleteFormFiles(request);
+                pageFinished();
+            }
+        };
+
         await ensureValidationSecret({locals, request, cookies});
-        const response = await next();
-        deleteFormFiles(request);
+        response = await next();
+
+        if (!locals.webFormOff) {
+            try {
+                const pageFinishedPromise = new Promise(resolve => pageFinished = resolve);
+                await timeout(pageFinishedPromise, FORM_OPTIONS.pageLoadTimeoutMS);
+            } catch {
+                throw new Error('WebForms is not used in this page');
+            }
+        }
 
-        session.setCookieHeader(response.headers);
         return response;
     } as MiddlewareEndpointHandler;
 }
diff --git a/packages/forms/src/settings.ts b/packages/forms/src/settings.ts
@@ -13,7 +13,8 @@ export type FormsSettings = {
             maxAge: number
         }
     },
-    secret?: string
+    secret?: string,
+    pageLoadTimeoutMS?: number
 }
 
 /// <reference types="astro/client" />