Try to fix up WIC routing

Previously this worked fine in dev, but couldn't start the first step in
production. Still slightly unclear why, but this seems triggered by the
Caddy redirect, so I'm guessing some kind of prefetch or something? Very
weird but whatever.

Author: pimterry

Caddyfile

@@ -1,8 +1,4 @@
 {$DOMAIN:http://localhost} {
-    # Will-it-cors subpaths are SPA-only, fresh loads must go back to the start:
-    @will-it-cors-step path_regexp ^/will-it-cors/.+
-    redir @will-it-cors-step /will-it-cors/ 308
-
     # Redirect various old URL that have been now replaced:
     redir /toolkit / 308
     redir /toolkit/ / 308

src/app/will-it-cors/components/steps/index.tsx

@@ -30,32 +30,39 @@ const steps = new WillItCorsStore();
 export const Steps = observer(({ currentStep }: { currentStep: WillItCorsSteps }) => {
   const router = useRouter();
 
+  // If you end up directly on a step without having completed the path this session (e.g.
+  // if you refresh the page or navigate there directly), we redirect you to the root.
+  if (currentStep !== 'source-url' && !steps.sourceUrl) {
+    router.push('/will-it-cors/');
+    return null;
+  }
+
   switch (currentStep) {
     case 'source-url':
       return (
         <SourceUrlQuestion
-          value={steps.sourceUrl}
+          value={steps.sourceUrl || 'https://'}
           onChange={newValue => {
             steps.setSourceUrl(newValue);
           }}
-          onNext={() => router.push('/will-it-cors/target-url')}
+          onNext={() => router.push('/will-it-cors/target-url/')}
         />
       );
 
     case 'target-url':
       return (
         <TargetUrlQuestion
-          value={steps.targetUrl}
+          value={steps.targetUrl || 'https://'}
           onChange={newValue => {
             steps.setTargetUrl(newValue);
           }}
           onNext={() => {
             if (!steps.isCorsRequest) {
-              router.push('/will-it-cors/not-cors');
+              router.push('/will-it-cors/not-cors/');
             } else if (steps.isMixedContentRequest) {
-              router.push('/will-it-cors/mixed-content');
+              router.push('/will-it-cors/mixed-content/');
             } else {
-              router.push('/will-it-cors/method');
+              router.push('/will-it-cors/method/');
             }
           }}
         />
@@ -79,7 +86,7 @@ export const Steps = observer(({ currentStep }: { currentStep: WillItCorsSteps }
           onChange={newValue => {
             steps.setMethod(newValue);
           }}
-          onNext={() => router.push('/will-it-cors/request-extras')}
+          onNext={() => router.push('/will-it-cors/request-extras/')}
           sourceOrigin={steps.sourceOrigin ?? 'https://'}
           targetOrigin={steps.targetOrigin ?? 'http://'}
         />
@@ -102,11 +109,11 @@ export const Steps = observer(({ currentStep }: { currentStep: WillItCorsSteps }
           }}
           onNext={() => {
             if (steps.method === 'POST' && steps.contentType === undefined) {
-              router.push('/will-it-cors/content-type');
+              router.push('/will-it-cors/content-type/');
             } else if (steps.isSimpleCorsRequest) {
-              router.push('/will-it-cors/simple-cors');
+              router.push('/will-it-cors/simple-cors/');
             } else {
-              router.push('/will-it-cors/preflight');
+              router.push('/will-it-cors/preflight/');
             }
           }}
         />
@@ -125,16 +132,16 @@ export const Steps = observer(({ currentStep }: { currentStep: WillItCorsSteps }
           }}
           onNext={() => {
             if (steps.isSimpleCorsRequest) {
-              router.push('/will-it-cors/simple-cors');
+              router.push('/will-it-cors/simple-cors/');
             } else {
-              router.push('/will-it-cors/preflight');
+              router.push('/will-it-cors/preflight/');
             }
           }}
         />
       );
 
     case 'simple-cors':
-      return <SimpleCorsRequest onNext={() => router.push('/will-it-cors/server-response')} />;
+      return <SimpleCorsRequest onNext={() => router.push('/will-it-cors/server-response/')} />;
 
     case 'server-response':
       return (
@@ -151,9 +158,9 @@ export const Steps = observer(({ currentStep }: { currentStep: WillItCorsSteps }
           }}
           onNext={() => {
             if (steps.isServerResponseReadable) {
-              router.push('/will-it-cors/request-success');
+              router.push('/will-it-cors/request-success/');
             } else {
-              router.push('/will-it-cors/request-failure');
+              router.push('/will-it-cors/request-failure/');
             }
           }}
         />
@@ -174,18 +181,18 @@ export const Steps = observer(({ currentStep }: { currentStep: WillItCorsSteps }
           sourceOrigin={steps.sourceOrigin ?? 'https://'}
           responseHeaders={steps.serverResponseHeaders}
           sendCredentials={steps.sendCredentials}
-          onNext={() => router.push('/will-it-cors/show-code')}
+          onNext={() => router.push('/will-it-cors/show-code/')}
         />
       );
 
     case 'show-code':
       return <ShowCode code={steps.exampleCode} />;
 
     case 'preflight':
-      return <PreflightRequest onNext={() => router.push('/will-it-cors/preflight-response')} />;
+      return <PreflightRequest onNext={() => router.push('/will-it-cors/preflight-response/')} />;
 
     case 'preflight-success':
-      return <ServerAllowsPreflightRequest onNext={() => router.push('/will-it-cors/server-response')} />;
+      return <ServerAllowsPreflightRequest onNext={() => router.push('/will-it-cors/server-response/')} />;
 
     case 'preflight-response':
       return (
@@ -202,9 +209,9 @@ export const Steps = observer(({ currentStep }: { currentStep: WillItCorsSteps }
           }}
           onNext={() => {
             if (steps.isPreflightSuccessful) {
-              router.push('/will-it-cors/preflight-success');
+              router.push('/will-it-cors/preflight-success/');
             } else {
-              router.push('/will-it-cors/preflight-failure');
+              router.push('/will-it-cors/preflight-failure/');
             }
           }}
         />

src/app/will-it-cors/page.tsx

@@ -34,7 +34,7 @@ export default function WillItCorsPage() {
         }
         withDownload={false}
         cta={{
-          href: '/will-it-cors/source-url',
+          href: '/will-it-cors/source-url/',
           title: 'Get Started!',
           $variant: 'primary',
           $withBorder: true,

src/app/will-it-cors/store/index.ts

@@ -18,10 +18,8 @@ function isSafeContentType(contentType: string) {
 const UNSAFE_HEADER_BYTES = '"():<>?@[\\]{}'.split('');
 
 export class WillItCorsStore {
-  // The various props. They each start as undefined, become empty values (""/{}/[])
-  // when the question is ready, and then get updated with input.
-  sourceUrl = 'https://';
-  targetUrl = 'https://';
+  sourceUrl = '';
+  targetUrl = '';
   method = '';
 
   sendCredentials = false;