register success page

apps/login/app/(login)/register/success/page.tsx

@@ -0,0 +1,23 @@
+import { Button, ButtonVariants } from "#/ui/Button";
+import { NextPage, NextPageContext } from "next";
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+
+type Props = {
+  searchParams: { [key: string]: string | string[] | undefined };
+};
+export default async function Page({ searchParams }: Props) {
+  //   const query = useSearchParams();
+  console.log(searchParams);
+  return (
+    <div className="flex flex-col items-center space-y-4">
+      <h1>Register successful</h1>
+      <p className="ztdl-p">A user has successfully been registered.</p>
+
+      {`userId: ${searchParams["userid"]}`}
+      <Link href="/register">
+        <Button variant={ButtonVariants.Primary}>go back</Button>
+      </Link>
+    </div>
+  );
+}

apps/login/lib/zitadel.ts

@@ -33,7 +33,9 @@ export function getBranding(
   return mgmt
     .getLabelPolicy(
       {},
-      { metadata: orgMetadata(process.env.ZITADEL_ORG_ID ?? "") }
+      {
+        // metadata: orgMetadata(process.env.ZITADEL_ORG_ID ?? "")
+      }
     )
     .then((resp) => resp.policy);
 }
@@ -45,7 +47,9 @@ export function getPrivacyPolicy(
   return mgmt
     .getPrivacyPolicy(
       {},
-      { metadata: orgMetadata(process.env.ZITADEL_ORG_ID ?? "") }
+      {
+        //  metadata: orgMetadata(process.env.ZITADEL_ORG_ID ?? "")
+      }
     )
     .then((resp) => resp.policy);
 }
@@ -57,7 +61,9 @@ export function getPasswordComplexityPolicy(
   return mgmt
     .getPasswordComplexityPolicy(
       {},
-      { metadata: orgMetadata(process.env.ZITADEL_ORG_ID ?? "") }
+      {
+        // metadata: orgMetadata(process.env.ZITADEL_ORG_ID ?? "")
+      }
     )
     .then((resp) => resp.policy);
 }
@@ -81,7 +87,9 @@ export function addHumanUser(
         profile: { firstName, lastName },
         initialPassword: password,
       },
-      { metadata: orgMetadata(process.env.ZITADEL_ORG_ID ?? "") }
+      {
+        // metadata: orgMetadata(process.env.ZITADEL_ORG_ID ?? "")
+      }
     )
     .then((resp) => {
       console.log("added user", resp.userId);

apps/login/ui/GlobalNav.tsx

@@ -34,24 +34,28 @@ export function GlobalNav() {
         className="group absolute right-0 top-0 flex h-14 items-center space-x-2 px-4 lg:hidden"
         onClick={() => setIsOpen(!isOpen)}
       >
-        <div className="font-medium text-gray-100 group-hover:text-gray-400">
+        <div className="font-medium text-text-light-secondary-500 group-hover:text-text-light-500 dark:text-text-dark-secondary-500 dark:group-hover:text-text-dark-500">
           Menu
         </div>
         {isOpen ? (
-          <XMarkIcon className="block w-6 text-gray-300" />
+          <XMarkIcon className="block w-6 " />
         ) : (
-          <Bars3Icon className="block w-6 text-gray-300" />
+          <Bars3Icon className="block w-6 " />
         )}
       </button>
 
       <div
         className={clsx("overflow-y-auto lg:static lg:block", {
-          "fixed inset-x-0 bottom-0 top-14 mt-px bg-white dark:bg-black":
+          "fixed inset-x-0 bottom-0 top-14 mt-px bg-background-light-500 dark:bg-background-dark-500":
             isOpen,
           hidden: !isOpen,
         })}
       >
-        <nav className="space-y-6 px-4 py-5">
+        <nav
+          className={`space-y-6 px-4 py-5 ${
+            isOpen ? "text-center lg:text-left" : ""
+          }`}
+        >
           {demos.map((section) => {
             return (
               <div key={section.name}>

apps/login/ui/Input.tsx

@@ -57,7 +57,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
     return (
       <label className="flex flex-col text-12px text-input-light-label dark:text-input-dark-label">
         <span
-          className={`leading-14.5px mb-1 ${
+          className={`leading-3 mb-1 ${
             error ? "text-warn-light-500 dark:text-warn-dark-500" : ""
           }`}
         >

apps/login/ui/MobileNavToggle.tsx

@@ -1,8 +1,8 @@
-'use client';
+"use client";
 
-import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/solid';
+import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/solid";
-import clsx from 'clsx';
+import clsx from "clsx";
-import React from 'react';
+import React from "react";
 
 const MobileNavContext = React.createContext<
   [boolean, React.Dispatch<React.SetStateAction<boolean>>] | undefined
@@ -25,7 +25,7 @@ export function useMobileNavToggle() {
   const context = React.useContext(MobileNavContext);
   if (context === undefined) {
     throw new Error(
-      'useMobileNavToggle must be used within a MobileNavContextProvider',
+      "useMobileNavToggle must be used within a MobileNavContextProvider"
     );
   }
   return context;
@@ -41,19 +41,19 @@ export function MobileNavToggle({ children }: { children: React.ReactNode }) {
         className="group absolute right-0 top-0 flex h-14 items-center space-x-2 px-4 lg:hidden"
         onClick={() => setIsOpen(!isOpen)}
       >
-        <div className="font-medium text-gray-100 group-hover:text-gray-400">
+        <div className="font-medium text-text-light-secondary-500 dark:text-text-dark-secondary-500 group-hover:text-text-light-500 dark:group-hover:text-text-dark-500">
           Menu
         </div>
         {isOpen ? (
-          <XMarkIcon className="block w-6 text-gray-300" />
+          <XMarkIcon className="block w-6" />
         ) : (
-          <Bars3Icon className="block w-6 text-gray-300" />
+          <Bars3Icon className="block w-6" />
         )}
       </button>
 
       <div
-        className={clsx('overflow-y-auto lg:static lg:block', {
+        className={clsx("overflow-y-auto lg:static lg:block", {
-          'fixed inset-x-0 bottom-0 top-14 bg-gray-900': isOpen,
+          "fixed inset-x-0 bottom-0 top-14 bg-gray-900": isOpen,
           hidden: !isOpen,
         })}
       >

apps/login/ui/RegisterForm.tsx

@@ -13,6 +13,7 @@ import {
   symbolValidator,
   upperCaseValidator,
 } from "#/utils/validators";
+import { useRouter } from "next/navigation";
 
 type Inputs =
   | {
@@ -37,6 +38,8 @@ export default function RegisterForm({
     mode: "onBlur",
   });
 
+  const router = useRouter();
+
   async function submitRegister(values: Inputs) {
     const res = await fetch("/registeruser", {
       method: "POST",
@@ -58,6 +61,12 @@ export default function RegisterForm({
     return res.json();
   }
 
+  function submitAndLink(value: Inputs): Promise<boolean | void> {
+    return submitRegister(value).then((resp: any) => {
+      return router.push(`/register/success?userid=${resp.userId}`);
+    });
+  }
+
   const { errors } = formState;
 
   const watchPassword = watch("password", "");
@@ -168,7 +177,7 @@ export default function RegisterForm({
             !tosAndPolicyAccepted ||
             watchPassword !== watchConfirmPassword
           }
-          onClick={handleSubmit(submitRegister)}
+          onClick={handleSubmit(submitAndLink)}
         >
           continue
         </Button>