commit beb35e15f4429f0578f0fa05b6eda7167aac9382 · knotbin.com/airport

+1 -1

deno.json

···

       30
        
           "jsxPrecompileSkipElements": ["a", "img", "source", "body", "html", "head"],

     

       31
        
           "types": ["node"]

     

       32
        
         },

     

       33
       -
         "unstable": ["kv"]

     

       34
        
       }

···

       30
        
           "jsxPrecompileSkipElements": ["a", "img", "source", "body", "html", "head"],

     

       31
        
           "types": ["node"]

     

       32
        
         },

     

       33
       +
         "unstable": ["kv", "otel"]

     

       34
        
       }

+36 -28

islands/CredLogin.tsx

···

       1
       -
       import { useState } from 'preact/hooks'

     

       2
       -
       import { JSX } from 'preact'

     

       3
        
       

     

       4
        
       export default function CredLogin() {

     

       5
       -
         const [handle, setHandle] = useState('')

     

       6
       -
         const [password, setPassword] = useState('')

     

       7
       -
         const [error, setError] = useState<string | null>(null)

     

       8
       -
         const [isPending, setIsPending] = useState(false)

     

       9
        
       

     

       10
        
         const handleSubmit = async (e: JSX.TargetedEvent<HTMLFormElement>) => {

     

       11
       -
           e.preventDefault()

     

       12
       -
           if (!handle.trim() || !password.trim()) return

     

       13
        
       

     

       14
       -
           setError(null)

     

       15
       -
           setIsPending(true)

     

       16
        
       

     

       17
        
           try {

     

       18
       -
             const response = await fetch('/api/cred/login', {

     

       19
       -
               method: 'POST',

     

       20
        
               headers: {

     

       21
       -
                 'Content-Type': 'application/json',

     

       22
        
               },

     

       23
        
               body: JSON.stringify({ handle, password }),

     

       24
       -
             })

     

       25
        
       

     

       26
        
             if (!response.ok) {

     

       27
       -
               const errorText = await response.text()

     

       28
       -
               throw new Error(errorText || 'Login failed')

     

       29
        
             }

     

       30
        
       

     

       31
        
             // Add a small delay before redirecting for better UX

     

       32
       -
             await new Promise((resolve) => setTimeout(resolve, 500))

     

       33
        
       

     

       34
        
             // Redirect to home page after successful login

     

       35
       -
             globalThis.location.href = '/'

     

       36
        
           } catch (err) {

     

       37
       -
             const message = err instanceof Error ? err.message : 'Login failed'

     

       38
       -
             setError(message)

     

       39
        
           } finally {

     

       40
       -
             setIsPending(false)

     

       41
        
           }

     

       42
       -
         }

     

       43
        
       

     

       44
        
         return (

     

       45
        
           <form onSubmit={handleSubmit}>

     
···

       84
        
                 className="w-full p-3 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-500 transition-colors"

     

       85
        
               />

     

       86
        
               <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">

     

       87
       -
                 This is your main account password, not an app password. This is required for migrations.

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       88
        
               </p>

     

       89
        
             </div>

     

       90
        
       

     
···

       92
        
               type="submit"

     

       93
        
               disabled={isPending}

     

       94
        
               className={`w-full px-4 py-2 rounded-md bg-blue-500 dark:bg-blue-600 text-white font-medium hover:bg-blue-600 dark:hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-500 relative ${

     

       95
       -
                 isPending ? 'opacity-90 cursor-not-allowed' : ''

     

       96
        
               }`}

     

       97
        
             >

     

       98
       -
               <span className={isPending ? 'invisible' : ''}>Login with Password</span>

     

       0
        
       
     

       0
        
       
     

       99
        
               {isPending && (

     

       100
        
                 <span className="absolute inset-0 flex items-center justify-center">

     

       101
        
                   <svg

     
···

       111
        
                       r="10"

     

       112
        
                       stroke="currentColor"

     

       113
        
                       strokeWidth="4"

     

       114
       -
                     ></circle>

     

       0
        
       
     

       115
        
                     <path

     

       116
        
                       className="opacity-75"

     

       117
        
                       fill="currentColor"

     

       118
        
                       d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"

     

       119
       -
                     ></path>

     

       0
        
       
     

       120
        
                   </svg>

     

       121
        
                   <span>Logging in...</span>

     

       122
        
                 </span>

     

       123
        
               )}

     

       124
        
             </button>

     

       125
        
           </form>

     

       126
       -
         )

     

       127
        
       }

···

       1
       +
       import { useState } from "preact/hooks";

     

       2
       +
       import { JSX } from "preact";

     

       3
        
       

     

       4
        
       export default function CredLogin() {

     

       5
       +
         const [handle, setHandle] = useState("");

     

       6
       +
         const [password, setPassword] = useState("");

     

       7
       +
         const [error, setError] = useState<string | null>(null);

     

       8
       +
         const [isPending, setIsPending] = useState(false);

     

       9
        
       

     

       10
        
         const handleSubmit = async (e: JSX.TargetedEvent<HTMLFormElement>) => {

     

       11
       +
           e.preventDefault();

     

       12
       +
           if (!handle.trim() || !password.trim()) return;

     

       13
        
       

     

       14
       +
           setError(null);

     

       15
       +
           setIsPending(true);

     

       16
        
       

     

       17
        
           try {

     

       18
       +
             const response = await fetch("/api/cred/login", {

     

       19
       +
               method: "POST",

     

       20
        
               headers: {

     

       21
       +
                 "Content-Type": "application/json",

     

       22
        
               },

     

       23
        
               body: JSON.stringify({ handle, password }),

     

       24
       +
             });

     

       25
        
       

     

       26
        
             if (!response.ok) {

     

       27
       +
               const errorText = await response.text();

     

       28
       +
               throw new Error(errorText || "Login failed");

     

       29
        
             }

     

       30
        
       

     

       31
        
             // Add a small delay before redirecting for better UX

     

       32
       +
             await new Promise((resolve) => setTimeout(resolve, 500));

     

       33
        
       

     

       34
        
             // Redirect to home page after successful login

     

       35
       +
             globalThis.location.href = "/";

     

       36
        
           } catch (err) {

     

       37
       +
             const message = err instanceof Error ? err.message : "Login failed";

     

       38
       +
             setError(message);

     

       39
        
           } finally {

     

       40
       +
             setIsPending(false);

     

       41
        
           }

     

       42
       +
         };

     

       43
        
       

     

       44
        
         return (

     

       45
        
           <form onSubmit={handleSubmit}>

     
···

       84
        
                 className="w-full p-3 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-500 transition-colors"

     

       85
        
               />

     

       86
        
               <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">

     

       87
       +
                 This is your main account password, not an app password. This is

     

       88
       +
                 required for migrations.

     

       89
       +
                 <br />

     

       90
       +
                 Ensure that 2 Factor Authentication is turned off before proceeding.

     

       91
       +
                 You can turn it back on after the migration is complete.

     

       92
        
               </p>

     

       93
        
             </div>

     

       94
        
       

     
···

       96
        
               type="submit"

     

       97
        
               disabled={isPending}

     

       98
        
               className={`w-full px-4 py-2 rounded-md bg-blue-500 dark:bg-blue-600 text-white font-medium hover:bg-blue-600 dark:hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-500 relative ${

     

       99
       +
                 isPending ? "opacity-90 cursor-not-allowed" : ""

     

       100
        
               }`}

     

       101
        
             >

     

       102
       +
               <span className={isPending ? "invisible" : ""}>

     

       103
       +
                 Login with Password

     

       104
       +
               </span>

     

       105
        
               {isPending && (

     

       106
        
                 <span className="absolute inset-0 flex items-center justify-center">

     

       107
        
                   <svg

     
···

       117
        
                       r="10"

     

       118
        
                       stroke="currentColor"

     

       119
        
                       strokeWidth="4"

     

       120
       +
                     >

     

       121
       +
                     </circle>

     

       122
        
                     <path

     

       123
        
                       className="opacity-75"

     

       124
        
                       fill="currentColor"

     

       125
        
                       d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"

     

       126
       +
                     >

     

       127
       +
                     </path>

     

       128
        
                   </svg>

     

       129
        
                   <span>Logging in...</span>

     

       130
        
                 </span>

     

       131
        
               )}

     

       132
        
             </button>

     

       133
        
           </form>

     

       134
       +
         );

     

       135
        
       }

-114

islands/PostHogAnalytics.tsx

···

       1
       -
       import { useEffect } from "preact/hooks";

     

       2
       -
       

     

       3
       -
       interface PostHogConfig {

     

       4
       -
         api_host: string;

     

       5
       -
         [key: string]: unknown; // Allow additional optional properties

     

       6
       -
       }

     

       7
       -
       

     

       8
       -
       interface PostHogInstance {

     

       9
       -
         __SV?: number;

     

       10
       -
         _i: Array<[string, PostHogConfig, string?]>;

     

       11
       -
         people?: PostHogPeople;

     

       12
       -
         init: (apiKey: string, config: PostHogConfig, name?: string) => void;

     

       13
       -
         capture: (event: string, properties?: Record<string, unknown>) => void;

     

       14
       -
         identify: (distinctId: string, properties?: Record<string, unknown>) => void;

     

       15
       -
         toString: (includeStub?: number) => string;

     

       16
       -
         [key: string]: unknown;

     

       17
       -
       }

     

       18
       -
       

     

       19
       -
       interface PostHogPeople {

     

       20
       -
         toString: () => string;

     

       21
       -
         [key: string]: unknown;

     

       22
       -
       }

     

       23
       -
       

     

       24
       -
       declare global {

     

       25
       -
         var posthog: PostHogInstance | undefined;

     

       26
       -
       }

     

       27
       -
       

     

       28
       -
       interface PostHogProps {

     

       29
       -
         apiKey: string;

     

       30
       -
         apiHost?: string;

     

       31
       -
       }

     

       32
       -
       

     

       33
       -
       export default function PostHogAnalytics({

     

       34
       -
         apiKey,

     

       35
       -
         apiHost = "https://us.i.posthog.com"

     

       36
       -
       }: PostHogProps) {

     

       37
       -
         useEffect(() => {

     

       38
       -
           // PostHog initialization script

     

       39
       -
           (function(t: Document, e: PostHogInstance) {

     

       40
       -
             let o: string[];

     

       41
       -
             let n: number;

     

       42
       -
             let p: HTMLScriptElement;

     

       43
       -
             let r: HTMLScriptElement | null;

     

       44
       -
       

     

       45
       -
             if (e.__SV) return;

     

       46
       -
       

     

       47
       -
             globalThis.posthog = e;

     

       48
       -
             e._i = [];

     

       49
       -
             e.init = function(i: string, s: PostHogConfig, a?: string) {

     

       50
       -
               function g(target: Record<string, unknown>, methodName: string) {

     

       51
       -
                 const parts = methodName.split(".");

     

       52
       -
                 if (2 == parts.length) {

     

       53
       -
                   target = target[parts[0]] as Record<string, unknown>;

     

       54
       -
                   methodName = parts[1];

     

       55
       -
                 }

     

       56
       -
                 target[methodName] = function() {

     

       57
       -
                   (target as { push: (args: unknown[]) => void }).push([methodName].concat(Array.prototype.slice.call(arguments, 0)));

     

       58
       -
                 };

     

       59
       -
               }

     

       60
       -
       

     

       61
       -
               p = t.createElement("script");

     

       62
       -
               p.type = "text/javascript";

     

       63
       -
               p.crossOrigin = "anonymous";

     

       64
       -
               p.async = true;

     

       65
       -
               p.src = s.api_host.replace(".i.posthog.com", "-assets.i.posthog.com") + "/static/array.js";

     

       66
       -
               r = t.getElementsByTagName("script")[0];

     

       67
       -
               if (r && r.parentNode) {

     

       68
       -
                 r.parentNode.insertBefore(p, r);

     

       69
       -
               }

     

       70
       -
       

     

       71
       -
               let u: PostHogInstance = e;

     

       72
       -
               if (typeof a !== "undefined") {

     

       73
       -
                 u = (e as Record<string, PostHogInstance>)[a] = {} as PostHogInstance;

     

       74
       -
                 u._i = [];

     

       75
       -
               } else {

     

       76
       -
                 a = "posthog";

     

       77
       -
               }

     

       78
       -
       

     

       79
       -
               u.people = u.people || {} as PostHogPeople;

     

       80
       -
               u.toString = function(includeStub?: number) {

     

       81
       -
                 let name = "posthog";

     

       82
       -
                 if ("posthog" !== a) {

     

       83
       -
                   name += "." + a;

     

       84
       -
                 }

     

       85
       -
                 if (!includeStub) {

     

       86
       -
                   name += " (stub)";

     

       87
       -
                 }

     

       88
       -
                 return name;

     

       89
       -
               };

     

       90
       -
       

     

       91
       -
               u.people.toString = function() {

     

       92
       -
                 return u.toString(1) + ".people (stub)";

     

       93
       -
               };

     

       94
       -
       

     

       95
       -
               o = "init capture register register_once register_for_session unregister unregister_for_session getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey getNextSurveyStep identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty createPersonProfile opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing debug".split(" ");

     

       96
       -
       

     

       97
       -
               for (n = 0; n < o.length; n++) {

     

       98
       -
                 g(u as Record<string, unknown>, o[n]);

     

       99
       -
               }

     

       100
       -
       

     

       101
       -
               e._i.push([i, s, a]);

     

       102
       -
             };

     

       103
       -
       

     

       104
       -
             e.__SV = 1;

     

       105
       -
           })(document, globalThis.posthog || {} as PostHogInstance);

     

       106
       -
       

     

       107
       -
           // Initialize PostHog

     

       108
       -
           if (globalThis.posthog) {

     

       109
       -
             globalThis.posthog.init(apiKey, { api_host: apiHost });

     

       110
       -
           }

     

       111
       -
         }, [apiKey, apiHost]);

     

       112
       -
       

     

       113
       -
         return null; // This component doesn't render anything visible

     

       114
       -
       }

-15

islands/PostHogInitializer.tsx

···

       1
       -
       import { useEffect } from "preact/hooks";

     

       2
       -
       import posthog from "posthog-js";

     

       3
       -
       

     

       4
       -
       interface Props {

     

       5
       -
         apiKey: string;

     

       6
       -
         apiHost: string;

     

       7
       -
       }

     

       8
       -
       

     

       9
       -
       export default function PostHogInitializer({ apiKey, apiHost }: Props) {

     

       10
       -
         useEffect(() => {

     

       11
       -
           posthog.default.init(apiKey, { api_host: apiHost });

     

       12
       -
         }, [apiKey, apiHost]);

     

       13
       -
       

     

       14
       -
         return null;

     

       15
       -
       }

+4 -2

main.ts

···

       14
        
         const needsAuth = url.pathname.startsWith("/migrate");

     

       15
        
       

     

       16
        
         // Skip auth check if not a protected route

     

       17
       -
         if (!needsAuth || url.pathname === "/login" || url.pathname.startsWith("/api/")) {

     

       0
        
       
     

       0
        
       
     

       18
        
           return ctx.next();

     

       19
        
         }

     

       20
        
       

     

       21
        
         try {

     

       22
       -
           const session = await getSession(ctx.req)

     

       23
        
       

     

       24
        
           console.log("[auth] Session:", session);

     

       25

···

       14
        
         const needsAuth = url.pathname.startsWith("/migrate");

     

       15
        
       

     

       16
        
         // Skip auth check if not a protected route

     

       17
       +
         if (

     

       18
       +
           !needsAuth || url.pathname === "/login" || url.pathname.startsWith("/api/")

     

       19
       +
         ) {

     

       20
        
           return ctx.next();

     

       21
        
         }

     

       22
        
       

     

       23
        
         try {

     

       24
       +
           const session = await getSession(ctx.req);

     

       25
        
       

     

       26
        
           console.log("[auth] Session:", session);

     

       27

+11 -8

routes/_app.tsx

···

       1
        
       import { type PageProps } from "fresh";

     

       2
        
       import Header from "../islands/Header.tsx";

     

       3
       -
       import PostHogInitializer from "../islands/PostHogInitializer.tsx";

     

       4
        
       

     

       5
        
       export default function App({ Component }: PageProps) {

     

       6
       -
         const apiKey = Deno.env.get("PUBLIC_POSTHOG_KEY")!;

     

       7
       -
         const apiHost = Deno.env.get("PUBLIC_POSTHOG_HOST")!;

     

       8
       -
       

     

       9
        
         return (

     

       10
        
           <html>

     

       11
        
             <head>

     
···

       13
        
               <meta name="viewport" content="width=device-width, initial-scale=1.0" />

     

       14
        
               <meta name="og:image" content="/og-image.jpg" />

     

       15
        
               <meta name="og:title" content="Airport" />

     

       16
       -
               <meta name="og:description" content="

     

       0
        
       
     

       0
        
       
     

       17
        
               Airport is an AT Protocol PDS Migration Tool that allows you to seamlessly

     

       18
        
               migrate your account from one PDS to another.

     

       19
       -
               " />

     

       0
        
       
     

       20
        
               <meta name="og:locale" content="en_US" />

     

       21
        
               <title>Airport</title>

     

       22
        
               <link rel="stylesheet" href="/styles.css" />

     

       23
        
             </head>

     

       24
       -
             <script defer src="https://cloud.umami.is/script.js" data-website-id={Deno.env.get("UMAMI_ID")}></script>

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       25
        
             <body>

     

       26
       -
               <PostHogInitializer apiKey={apiKey} apiHost={apiHost} />

     

       27
        
               <Header />

     

       28
        
               <main className="pt-8">

     

       29
        
                 <Component />

···

       1
        
       import { type PageProps } from "fresh";

     

       2
        
       import Header from "../islands/Header.tsx";

     

       0
        
       
     

       3
        
       

     

       4
        
       export default function App({ Component }: PageProps) {

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       5
        
         return (

     

       6
        
           <html>

     

       7
        
             <head>

     
···

       9
        
               <meta name="viewport" content="width=device-width, initial-scale=1.0" />

     

       10
        
               <meta name="og:image" content="/og-image.jpg" />

     

       11
        
               <meta name="og:title" content="Airport" />

     

       12
       +
               <meta

     

       13
       +
                 name="og:description"

     

       14
       +
                 content="

     

       15
        
               Airport is an AT Protocol PDS Migration Tool that allows you to seamlessly

     

       16
        
               migrate your account from one PDS to another.

     

       17
       +
               "

     

       18
       +
               />

     

       19
        
               <meta name="og:locale" content="en_US" />

     

       20
        
               <title>Airport</title>

     

       21
        
               <link rel="stylesheet" href="/styles.css" />

     

       22
        
             </head>

     

       23
       +
             <script

     

       24
       +
               defer

     

       25
       +
               src="https://cloud.umami.is/script.js"

     

       26
       +
               data-website-id={Deno.env.get("UMAMI_ID")}

     

       27
       +
             >

     

       28
       +
             </script>

     

       29
        
             <body>

     

       0
        
       
     

       30
        
               <Header />

     

       31
        
               <main className="pt-8">

     

       32
        
                 <Component />