Release 2025-05-19

web/src/pages/account/welcome.astro

@@ -0,0 +1,114 @@
+---
+import { Icon } from 'astro-icon/components'
+import { actions } from 'astro:actions'
+
+import Button from '../../components/Button.astro'
+import CopyButton from '../../components/CopyButton.astro'
+import { SUPPORT_EMAIL } from '../../constants/project'
+import MiniLayout from '../../layouts/MiniLayout.astro'
+import { prettifyUserSecretToken } from '../../lib/userSecretToken'
+
+const result = Astro.getActionResult(actions.account.generate)
+if (result?.error) return Astro.redirect('/account/generate')
+
+const prettyToken = result ? prettifyUserSecretToken(result.data.token) : null
+---
+
+<MiniLayout
+  pageTitle="Welcome"
+  description="New account welcome page"
+  ogImage={{ template: 'generic', title: 'Welcome' }}
+  layoutHeader={{
+    icon: 'ri:key-2-line',
+    title: 'Save your Login Key',
+    subtitle: 'You need it to login to your account',
+  }}
+  breadcrumbs={[
+    {
+      name: 'Accounts',
+      url: '/account',
+    },
+    {
+      name: 'Welcome',
+    },
+  ]}
+>
+  {
+    prettyToken ? (
+      <>
+        <div class="mb-2 flex items-center gap-3 rounded-md bg-red-900/80 p-2 text-red-200">
+          <Icon name="ri:delete-bin-line" class="size-5 flex-shrink-0" />
+          <p class="text-sm text-pretty">Won't show again and can't be recovered!</p>
+        </div>
+        <div class="border-day-800 js:pr-24 bg-night-800 relative rounded-md border p-3 font-mono break-all text-white">
+          {prettyToken}
+          <div class="absolute inset-y-0 right-2 flex items-center">
+            <CopyButton copyText={prettyToken} size="sm" color="success" />
+          </div>
+        </div>
+
+        <p class="text-day-500 mt-1 text-center text-sm text-balance">
+          Save it in a <span class="text-day-200 font-medium">password manager</span>
+          or <span class="text-day-200 font-medium">secure location</span>
+        </p>
+
+        <form method="GET" action="/" class="mt-8 space-y-4">
+          <div class="flex items-center gap-4">
+            <input type="checkbox" id="confirm-saved" required />
+            <label for="confirm-saved" class="text-day-400 text-sm text-pretty">
+              I saved my Login Key
+            </label>
+          </div>
+
+          <Button type="submit" class="w-full" color="gray" label="Continue" />
+        </form>
+      </>
+    ) : (
+      <>
+        <div class="mt-12 flex items-center justify-center gap-3 rounded-md bg-red-900/80 p-3 text-red-200">
+          <Icon name="ri:alert-line" class="size-5 flex-shrink-0" />
+          <p class="text-sm text-pretty">Your Login Key can't be shown again</p>
+        </div>
+
+        <p class="text-day-300 mt-2 text-center text-sm text-balance">
+          If you lost it, contact us at
+          <a href={`mailto:${SUPPORT_EMAIL}`} class="text-green-400 hover:underline focus-visible:underline">
+            {SUPPORT_EMAIL}
+          </a>
+        </p>
+      </>
+    )
+  }
+</MiniLayout>
+
+<script>
+  ////////////////////////////////////////////////////////////
+  // Optional script for preventing accidental navigation.  //
+  // Shows a warning if the user tries to leave without    //
+  // confirming they saved their token.                    //
+  ////////////////////////////////////////////////////////////
+
+  const beforeUnloadHandler = (event: BeforeUnloadEvent) => {
+    event.preventDefault()
+    // Included for legacy support, e.g. Chrome/Edge < 119
+    event.returnValue = true
+  }
+  window.addEventListener('beforeunload', beforeUnloadHandler)
+
+  document.addEventListener('astro:after-swap', () => {
+    window.removeEventListener('beforeunload', beforeUnloadHandler)
+  })
+
+  document.addEventListener('astro:page-load', () => {
+    const confirmSavedInput = document.querySelectorAll<HTMLInputElement>('#confirm-saved')
+    confirmSavedInput.forEach((input) => {
+      input.addEventListener('input', () => {
+        if (input.checked) {
+          window.addEventListener('beforeunload', beforeUnloadHandler)
+        } else {
+          window.removeEventListener('beforeunload', beforeUnloadHandler)
+        }
+      })
+    })
+  })
+</script>