From f8bbfb3d572252e468a8b4dcde69e8cff2fa44e2 Mon Sep 17 00:00:00 2001
From: Max Peintner <max@caos.ch>
Date: Mon, 19 Jun 2023 16:28:29 +0200
Subject: [PATCH] passwordless prompt page

---
 apps/login/app/(login)/accounts/page.tsx    |  1 +
 apps/login/app/(login)/passkey/add/page.tsx | 18 ++++++++-----
 apps/login/ui/PasswordForm.tsx              |  5 +++-
 apps/login/ui/RegisterPasskey.tsx           | 28 +++++++++++++++------
 4 files changed, 37 insertions(+), 15 deletions(-)

diff --git a/apps/login/app/(login)/accounts/page.tsx b/apps/login/app/(login)/accounts/page.tsx
index b3b0631e162..dae5d45d86e 100644
--- a/apps/login/app/(login)/accounts/page.tsx
+++ b/apps/login/app/(login)/accounts/page.tsx
@@ -22,6 +22,7 @@ async function loadSessions(): Promise<Session[]> {
 
 export default async function Page() {
   let sessions = await loadSessions();
+  console.log(sessions);
 
   return (
     <div className="flex flex-col items-center space-y-4">
diff --git a/apps/login/app/(login)/passkey/add/page.tsx b/apps/login/app/(login)/passkey/add/page.tsx
index 8b999cbc6ad..82172580912 100644
--- a/apps/login/app/(login)/passkey/add/page.tsx
+++ b/apps/login/app/(login)/passkey/add/page.tsx
@@ -9,7 +9,7 @@ export default async function Page({
 }: {
   searchParams: Record<string | number | symbol, string | undefined>;
 }) {
-  const { loginName } = searchParams;
+  const { loginName, prompt } = searchParams;
 
   const sessionFactors = await loadSession(loginName);
 
@@ -21,10 +21,16 @@ export default async function Page({
       }
     });
   }
+  const title = !!prompt
+    ? "Authenticate with a passkey"
+    : "Use your passkey to confirm it’s really you";
+  const description = !!prompt
+    ? "When set up, you will be able to authenticate without a password."
+    : "Your device will ask for your fingerprint, face, or screen lock";
 
   return (
     <div className="flex flex-col items-center space-y-4">
-      <h1>Use your passkey to confirm it’s really you</h1>
+      <h1>{title}</h1>
 
       {sessionFactors && (
         <UserAvatar
@@ -33,9 +39,7 @@ export default async function Page({
           showDropdown
         ></UserAvatar>
       )}
-      <p className="ztdl-p mb-6 block">
-        Your device will ask for your fingerprint, face, or screen lock
-      </p>
+      <p className="ztdl-p mb-6 block">{description}</p>
 
       <Alert type={AlertType.INFO}>
         <span>
@@ -60,7 +64,9 @@ export default async function Page({
         </div>
       )}
 
-      {sessionFactors?.id && <RegisterPasskey sessionId={sessionFactors.id} />}
+      {sessionFactors?.id && (
+        <RegisterPasskey sessionId={sessionFactors.id} isPrompt={!!prompt} />
+      )}
     </div>
   );
 }
diff --git a/apps/login/ui/PasswordForm.tsx b/apps/login/ui/PasswordForm.tsx
index eb432769034..8a1d1f2f1f7 100644
--- a/apps/login/ui/PasswordForm.tsx
+++ b/apps/login/ui/PasswordForm.tsx
@@ -55,7 +55,10 @@ export default function PasswordForm({ loginName }: Props) {
       if (resp.factors && !resp.factors.passwordless) {
         return router.push(
           `/passkey/add?` +
-            new URLSearchParams({ loginName: resp.factors.user.loginName })
+            new URLSearchParams({
+              loginName: resp.factors.user.loginName,
+              prompt: "true",
+            })
         );
       } else {
         return router.push(`/accounts`);
diff --git a/apps/login/ui/RegisterPasskey.tsx b/apps/login/ui/RegisterPasskey.tsx
index efff2594d22..9a4fbb2ec52 100644
--- a/apps/login/ui/RegisterPasskey.tsx
+++ b/apps/login/ui/RegisterPasskey.tsx
@@ -12,9 +12,10 @@ type Inputs = {};
 
 type Props = {
   sessionId: string;
+  isPrompt: boolean;
 };
 
-export default function RegisterPasskey({ sessionId }: Props) {
+export default function RegisterPasskey({ sessionId, isPrompt }: Props) {
   const { register, handleSubmit, formState } = useForm<Inputs>({
     mode: "onBlur",
   });
@@ -172,13 +173,24 @@ export default function RegisterPasskey({ sessionId }: Props) {
       )}
 
       <div className="mt-8 flex w-full flex-row items-center">
-        <Button
-          type="button"
-          variant={ButtonVariants.Secondary}
-          onClick={() => router.back()}
-        >
-          back
-        </Button>
+        {isPrompt ? (
+          <Button
+            type="button"
+            variant={ButtonVariants.Secondary}
+            onClick={() => router.push("/accounts")}
+          >
+            skip
+          </Button>
+        ) : (
+          <Button
+            type="button"
+            variant={ButtonVariants.Secondary}
+            onClick={() => router.back()}
+          >
+            back
+          </Button>
+        )}
+
         <span className="flex-grow"></span>
         <Button
           type="submit"