self service, fix checkboxes

apps/login/src/app/(login)/me/change-password/page.tsx

@@ -0,0 +1,75 @@
+import { getSessionCookieById } from "@/lib/cookies";
+import {
+  getBrandingSettings,
+  getPasswordComplexitySettings,
+} from "@/lib/zitadel";
+import Alert from "@/ui/Alert";
+import ChangePasswordForm from "@/ui/ChangePasswordForm";
+import DynamicTheme from "@/ui/DynamicTheme";
+import UserAvatar from "@/ui/UserAvatar";
+
+export default async function Page({
+  searchParams,
+}: {
+  searchParams: Record<string | number | symbol, string | undefined>;
+}) {
+  const { sessionId } = searchParams;
+
+  if (!sessionId) {
+    return (
+      <div>
+        <h1>Session ID not found</h1>
+      </div>
+    );
+  }
+
+  const session = await getSessionCookieById({
+    sessionId,
+  });
+
+  const sessionFactors = await loadMostRecentSession({
+    loginName,
+    organization,
+  });
+
+  const passwordComplexitySettings = await getPasswordComplexitySettings(
+    session.organization,
+  );
+
+  const branding = await getBrandingSettings(session.organization);
+
+  return (
+    <DynamicTheme branding={branding}>
+      <div className="flex flex-col items-center space-y-4">
+        <h1>Set Password</h1>
+        <p className="ztdl-p">Set the password for your account</p>
+
+        {(!sessionFactors || !loginName) && (
+          <div className="py-4">
+            <Alert>
+              Could not get the context of the user. Make sure to enter the
+              username first or provide a loginName as searchParam.
+            </Alert>
+          </div>
+        )}
+
+        {sessionFactors && (
+          <UserAvatar
+            loginName={loginName ?? sessionFactors.factors?.user?.loginName}
+            displayName={sessionFactors.factors?.user?.displayName}
+            showDropdown
+            searchParams={searchParams}
+          ></UserAvatar>
+        )}
+
+        {passwordComplexitySettings && (
+          <ChangePasswordForm
+            passwordComplexitySettings={passwordComplexitySettings}
+            userId={""}
+            sessionId={sessionId}
+          ></ChangePasswordForm>
+        )}
+      </div>
+    </DynamicTheme>
+  );
+}

apps/login/src/app/(login)/signedin/page.tsx

@@ -1,6 +1,7 @@
 import { getMostRecentCookieWithLoginname } from "@/lib/cookies";
 import { createCallback, getBrandingSettings, getSession } from "@/lib/zitadel";
 import DynamicTheme from "@/ui/DynamicTheme";
+import SelfServiceMenu from "@/ui/SelfServiceMenu";
 import UserAvatar from "@/ui/UserAvatar";
 import { create } from "@zitadel/client";
 import {
@@ -53,6 +54,10 @@ export default async function Page({ searchParams }: { searchParams: any }) {
           showDropdown
           searchParams={searchParams}
         />
+
+        {sessionFactors?.id && (
+          <SelfServiceMenu sessionId={sessionFactors?.id} />
+        )}
       </div>
     </DynamicTheme>
   );

apps/login/src/lib/self.ts

@@ -0,0 +1,44 @@
+"use server";
+
+import {
+  createSessionServiceClient,
+  createUserServiceClient,
+} from "@zitadel/client/v2";
+import { createServerTransport } from "@zitadel/node";
+import { getSessionCookieById } from "./cookies";
+
+const transport = (token: string) =>
+  createServerTransport(token, {
+    baseUrl: process.env.ZITADEL_API_URL!,
+    httpVersion: "2",
+  });
+
+const sessionService = (sessionId: string) => {
+  return getSessionCookieById({ sessionId }).then((session) => {
+    return createSessionServiceClient(transport(session.token));
+  });
+};
+
+const userService = (sessionId: string) => {
+  return getSessionCookieById({ sessionId }).then((session) => {
+    return createUserServiceClient(transport(session.token));
+  });
+};
+
+export async function setPassword({
+  sessionId,
+  userId,
+  password,
+}: {
+  sessionId: string;
+  userId: string;
+  password: string;
+}) {
+  return (await userService(sessionId)).setPassword(
+    {
+      userId,
+      newPassword: { password, changeRequired: false },
+    },
+    {},
+  );
+}

apps/login/src/ui/ChangePasswordForm.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+import { setPassword } from "@/lib/self";
+import {
+  lowerCaseValidator,
+  numberValidator,
+  symbolValidator,
+  upperCaseValidator,
+} from "@/utils/validators";
+import { PasswordComplexitySettings } from "@zitadel/proto/zitadel/settings/v2/password_settings_pb";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { FieldValues, useForm } from "react-hook-form";
+import Alert from "./Alert";
+import { Button, ButtonVariants } from "./Button";
+import { TextInput } from "./Input";
+import PasswordComplexity from "./PasswordComplexity";
+import { Spinner } from "./Spinner";
+
+type Inputs =
+  | {
+      password: string;
+      confirmPassword: string;
+    }
+  | FieldValues;
+
+type Props = {
+  passwordComplexitySettings: PasswordComplexitySettings;
+  userId: string;
+  sessionId: string;
+};
+
+export default function ChangePasswordForm({
+  passwordComplexitySettings,
+  userId,
+  sessionId,
+}: Props) {
+  const { register, handleSubmit, watch, formState } = useForm<Inputs>({
+    mode: "onBlur",
+    defaultValues: {
+      password: "",
+      comfirmPassword: "",
+    },
+  });
+
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string>("");
+
+  const router = useRouter();
+
+  async function submitChange(values: Inputs) {
+    setLoading(true);
+    const response = await setPassword({
+      sessionId: sessionId,
+      userId: userId,
+      password: values.password,
+    }).catch((error: Error) => {
+      setError(error.message ?? "Could not register user");
+    });
+
+    setLoading(false);
+
+    if (!response) {
+      setError("Could not register user");
+      return;
+    }
+
+    return response;
+  }
+
+  const { errors } = formState;
+
+  const watchPassword = watch("password", "");
+  const watchConfirmPassword = watch("confirmPassword", "");
+
+  const hasMinLength =
+    passwordComplexitySettings &&
+    watchPassword?.length >= passwordComplexitySettings.minLength;
+  const hasSymbol = symbolValidator(watchPassword);
+  const hasNumber = numberValidator(watchPassword);
+  const hasUppercase = upperCaseValidator(watchPassword);
+  const hasLowercase = lowerCaseValidator(watchPassword);
+
+  const policyIsValid =
+    passwordComplexitySettings &&
+    (passwordComplexitySettings.requiresLowercase ? hasLowercase : true) &&
+    (passwordComplexitySettings.requiresNumber ? hasNumber : true) &&
+    (passwordComplexitySettings.requiresUppercase ? hasUppercase : true) &&
+    (passwordComplexitySettings.requiresSymbol ? hasSymbol : true) &&
+    hasMinLength;
+
+  return (
+    <form className="w-full">
+      <div className="pt-4 grid grid-cols-1 gap-4 mb-4">
+        <div className="">
+          <TextInput
+            type="password"
+            autoComplete="new-password"
+            required
+            {...register("password", {
+              required: "You have to provide a password!",
+            })}
+            label="Password"
+            error={errors.password?.message as string}
+          />
+        </div>
+        <div className="">
+          <TextInput
+            type="password"
+            required
+            autoComplete="new-password"
+            {...register("confirmPassword", {
+              required: "This field is required",
+            })}
+            label="Confirm Password"
+            error={errors.confirmPassword?.message as string}
+          />
+        </div>
+      </div>
+
+      {passwordComplexitySettings && (
+        <PasswordComplexity
+          passwordComplexitySettings={passwordComplexitySettings}
+          password={watchPassword}
+          equals={!!watchPassword && watchPassword === watchConfirmPassword}
+        />
+      )}
+
+      {error && <Alert>{error}</Alert>}
+
+      <div className="mt-8 flex w-full flex-row items-center justify-between">
+        <Button type="button" variant={ButtonVariants.Secondary}>
+          back
+        </Button>
+        <Button
+          type="submit"
+          variant={ButtonVariants.Primary}
+          disabled={
+            loading ||
+            !policyIsValid ||
+            !formState.isValid ||
+            watchPassword !== watchConfirmPassword
+          }
+          onClick={handleSubmit(submitChange)}
+        >
+          {loading && <Spinner className="h-5 w-5 mr-2" />}
+          continue
+        </Button>
+      </div>
+    </form>
+  );
+}

apps/login/src/ui/SelfServiceMenu.tsx

@@ -0,0 +1,39 @@
+import Link from "next/link";
+
+export default function SelfServiceMenu({ sessionId }: { sessionId: string }) {
+  const list = [
+    {
+      link:
+        `/me/change-password?` +
+        new URLSearchParams({
+          sessionId: sessionId,
+        }),
+      name: "Change password",
+    },
+  ];
+  return (
+    <div className="w-full flex flex-col space-y-2">
+      {list.map((menuitem, index) => {
+        return (
+          <SelfServiceItem
+            link={menuitem.link}
+            key={"self-service-" + index}
+            name={menuitem.name}
+          />
+        );
+      })}
+    </div>
+  );
+}
+
+const SelfServiceItem = ({ name, link }: { name: string; link: string }) => {
+  return (
+    <Link
+      prefetch={false}
+      href={link}
+      className="w-full group flex flex-row items-center bg-background-light-400 dark:bg-background-dark-400  border border-divider-light hover:shadow-lg dark:hover:bg-white/10 py-2 px-4 rounded-md transition-all"
+    >
+      {name}
+    </Link>
+  );
+};