From 3aa8e8fbc49b30e9034f5093a8b7d52612a0630c Mon Sep 17 00:00:00 2001
From: Max Peintner <max@caos.ch>
Date: Fri, 16 Jun 2023 15:08:41 +0200
Subject: [PATCH] create session with password on register

---
 apps/login/app/(login)/passkey/add/page.tsx   |  1 -
 apps/login/app/session/route.ts               |  4 +-
 apps/login/lib/zitadel.ts                     | 10 ++++-
 apps/login/ui/AuthenticationMethodRadio.tsx   |  2 +-
 apps/login/ui/RegisterFormWithoutPassword.tsx |  6 ++-
 apps/login/ui/SessionsList.tsx                |  2 +-
 apps/login/ui/SetPasswordForm.tsx             | 37 +++++++++++++++----
 7 files changed, 47 insertions(+), 15 deletions(-)

diff --git a/apps/login/app/(login)/passkey/add/page.tsx b/apps/login/app/(login)/passkey/add/page.tsx
index da17a3ad247..8b999cbc6ad 100644
--- a/apps/login/app/(login)/passkey/add/page.tsx
+++ b/apps/login/app/(login)/passkey/add/page.tsx
@@ -22,7 +22,6 @@ export default async function Page({
     });
   }
 
-  console.log(sessionFactors);
   return (
     <div className="flex flex-col items-center space-y-4">
       <h1>Use your passkey to confirm it’s really you</h1>
diff --git a/apps/login/app/session/route.ts b/apps/login/app/session/route.ts
index e2808e6ec31..4ae026f5283 100644
--- a/apps/login/app/session/route.ts
+++ b/apps/login/app/session/route.ts
@@ -18,9 +18,9 @@ import { NextRequest, NextResponse } from "next/server";
 export async function POST(request: NextRequest) {
   const body = await request.json();
   if (body) {
-    const { loginName } = body;
+    const { loginName, password } = body;
 
-    const createdSession = await createSession(server, loginName);
+    const createdSession = await createSession(server, loginName, password);
     if (createdSession) {
       return getSession(
         server,
diff --git a/apps/login/lib/zitadel.ts b/apps/login/lib/zitadel.ts
index 0a282c46499..c771f8f2968 100644
--- a/apps/login/lib/zitadel.ts
+++ b/apps/login/lib/zitadel.ts
@@ -83,10 +83,16 @@ export async function getPasswordComplexitySettings(
 
 export async function createSession(
   server: ZitadelServer,
-  loginName: string
+  loginName: string,
+  password?: string
 ): Promise<CreateSessionResponse | undefined> {
   const sessionService = session.getSession(server);
-  return sessionService.createSession({ checks: { user: { loginName } } }, {});
+  return password
+    ? sessionService.createSession(
+        { checks: { user: { loginName } }, password: { password } },
+        {}
+      )
+    : sessionService.createSession({ checks: { user: { loginName } } }, {});
 }
 
 export async function setSession(
diff --git a/apps/login/ui/AuthenticationMethodRadio.tsx b/apps/login/ui/AuthenticationMethodRadio.tsx
index 85f93e5e053..1eb12ce6685 100644
--- a/apps/login/ui/AuthenticationMethodRadio.tsx
+++ b/apps/login/ui/AuthenticationMethodRadio.tsx
@@ -41,7 +41,7 @@ export default function AuthenticationMethodRadio({
                         ? "bg-background-light-400 dark:bg-background-dark-400"
                         : "bg-background-light-400 dark:bg-background-dark-400"
                     }
-                      relative border boder-divider-light dark:border-divider-dark flex cursor-pointer rounded-lg px-5 py-4 focus:outline-none hover:shadow-md`
+                      relative border boder-divider-light dark:border-divider-dark flex cursor-pointer rounded-lg px-5 py-4 focus:outline-none hover:shadow-lg dark:hover:bg-white/10`
                 }
               >
                 {({ active, checked }) => (
diff --git a/apps/login/ui/RegisterFormWithoutPassword.tsx b/apps/login/ui/RegisterFormWithoutPassword.tsx
index 55369f8e3a1..c2a443d0a97 100644
--- a/apps/login/ui/RegisterFormWithoutPassword.tsx
+++ b/apps/login/ui/RegisterFormWithoutPassword.tsx
@@ -141,7 +141,11 @@ export default function RegisterFormWithoutPassword({ legal }: Props) {
         />
       )}
 
-      <div className="py-4">
+      <p className="mt-4 ztdl-p mb-6 block text-text-light-secondary-500 dark:text-text-dark-secondary-500">
+        Select the method you would like to authenticate
+      </p>
+
+      <div className="pb-4">
         <AuthenticationMethodRadio
           selected={selected}
           selectionChanged={setSelected}
diff --git a/apps/login/ui/SessionsList.tsx b/apps/login/ui/SessionsList.tsx
index faf497b4b57..c3683ebfd32 100644
--- a/apps/login/ui/SessionsList.tsx
+++ b/apps/login/ui/SessionsList.tsx
@@ -13,7 +13,7 @@ export default function SessionsList({ sessions }: Props) {
   const [list, setList] = useState<Session[]>(sessions);
 
   return sessions ? (
-    <div className="flex flex-col">
+    <div className="flex flex-col space-y-2">
       {list
         .filter((session) => session?.factors?.user?.loginName)
         .map((session, index) => {
diff --git a/apps/login/ui/SetPasswordForm.tsx b/apps/login/ui/SetPasswordForm.tsx
index 6dd94c8414a..def21602686 100644
--- a/apps/login/ui/SetPasswordForm.tsx
+++ b/apps/login/ui/SetPasswordForm.tsx
@@ -1,14 +1,10 @@
 "use client";
 
-import {
-  LegalAndSupportSettings,
-  PasswordComplexitySettings,
-} from "@zitadel/server";
+import { PasswordComplexitySettings } from "@zitadel/server";
 import PasswordComplexity from "./PasswordComplexity";
 import { useState } from "react";
 import { Button, ButtonVariants } from "./Button";
 import { TextInput } from "./Input";
-import { PrivacyPolicyCheckboxes } from "./PrivacyPolicyCheckboxes";
 import { FieldValues, useForm } from "react-hook-form";
 import {
   lowerCaseValidator,
@@ -71,9 +67,36 @@ export default function SetPasswordForm({
     return res.json();
   }
 
+  async function createSessionWithLoginNameAndPassword(
+    loginName: string,
+    password: string
+  ) {
+    setLoading(true);
+    const res = await fetch("/session", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        loginName: loginName,
+        password: password,
+      }),
+    });
+
+    setLoading(false);
+    if (!res.ok) {
+      throw new Error("Failed to set user");
+    }
+    return res.json();
+  }
+
   function submitAndLink(value: Inputs): Promise<boolean | void> {
-    return submitRegister(value).then((resp: any) => {
-      return router.push(`/verify?userID=${resp.userId}`);
+    return submitRegister(value).then((humanResponse: any) => {
+      return createSessionWithLoginNameAndPassword(email, value.password).then(
+        () => {
+          return router.push(`/verify?userID=${humanResponse.userId}`);
+        }
+      );
     });
   }