From 8f958ec0024c0454ec26fe8f96a6f1c55290414d Mon Sep 17 00:00:00 2001
From: Max Peintner <max@caos.ch>
Date: Thu, 27 Apr 2023 17:07:57 +0200
Subject: [PATCH] register success page

---
 .../app/(login)/register/success/page.tsx     | 23 +++++++++++++++++++
 apps/login/lib/zitadel.ts                     | 16 +++++++++----
 apps/login/ui/GlobalNav.tsx                   | 14 +++++++----
 apps/login/ui/Input.tsx                       |  2 +-
 apps/login/ui/MobileNavToggle.tsx             | 20 ++++++++--------
 apps/login/ui/RegisterForm.tsx                | 11 ++++++++-
 6 files changed, 65 insertions(+), 21 deletions(-)
 create mode 100644 apps/login/app/(login)/register/success/page.tsx

diff --git a/apps/login/app/(login)/register/success/page.tsx b/apps/login/app/(login)/register/success/page.tsx
new file mode 100644
index 00000000000..c2e582d5497
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/apps/login/lib/zitadel.ts b/apps/login/lib/zitadel.ts
index 428f63ce934..50ac2f39b93 100644
--- a/apps/login/lib/zitadel.ts
+++ b/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);
diff --git a/apps/login/ui/GlobalNav.tsx b/apps/login/ui/GlobalNav.tsx
index c94e1ecf1ec..611c4c50336 100644
--- a/apps/login/ui/GlobalNav.tsx
+++ b/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}>
diff --git a/apps/login/ui/Input.tsx b/apps/login/ui/Input.tsx
index 7a314d2b4f8..3c7de28b1f1 100644
--- a/apps/login/ui/Input.tsx
+++ b/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" : ""
           }`}
         >
diff --git a/apps/login/ui/MobileNavToggle.tsx b/apps/login/ui/MobileNavToggle.tsx
index 5e0be8518fc..e9bacd7f433 100644
--- a/apps/login/ui/MobileNavToggle.tsx
+++ b/apps/login/ui/MobileNavToggle.tsx
@@ -1,8 +1,8 @@
-'use client';
+"use client";
 
-import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/solid';
-import clsx from 'clsx';
-import React from 'react';
+import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/solid";
+import clsx from "clsx";
+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', {
-          'fixed inset-x-0 bottom-0 top-14 bg-gray-900': isOpen,
+        className={clsx("overflow-y-auto lg:static lg:block", {
+          "fixed inset-x-0 bottom-0 top-14 bg-gray-900": isOpen,
           hidden: !isOpen,
         })}
       >
diff --git a/apps/login/ui/RegisterForm.tsx b/apps/login/ui/RegisterForm.tsx
index fb1fe4dcac0..8a499780d3e 100644
--- a/apps/login/ui/RegisterForm.tsx
+++ b/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>