TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-08-23 14:57:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

idp pages

Browse Source
This commit is contained in:
Max Peintner
2024-12-20 15:54:04 +01:00
parent 09dbaf4106
commit 14760d84e3
6 changed files with 143 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
apps/login/src/app/(login)/idp/[provider]/success/page.tsx
View File

@@ -1,6 +1,9 @@
import { Alert, AlertType } from "@/components/alert";
import { DynamicTheme } from "@/components/dynamic-theme";
import { IdpSignin } from "@/components/idp-signin";
import { linkingFailed } from "@/components/idps/pages/linking-failed";
import { linkingSuccess } from "@/components/idps/pages/linking-success";
import { loginFailed } from "@/components/idps/pages/login-failed";
import { loginSuccess } from "@/components/idps/pages/login-success";
import { idpTypeToIdentityProviderType, PROVIDER_MAPPING } from "@/lib/idp";
import {
addHuman,
@@ -15,7 +18,6 @@ import {
import { create } from "@zitadel/client";
import { AutoLinkingOption } from "@zitadel/proto/zitadel/idp/v2/idp_pb";
import { OrganizationSchema } from "@zitadel/proto/zitadel/object/v2/object_pb";
import { BrandingSettings } from "@zitadel/proto/zitadel/settings/v2/branding_settings_pb";
import {
AddHumanUserRequest,
AddHumanUserRequestSchema,
@@ -24,95 +26,6 @@ import { getLocale, getTranslations } from "next-intl/server";
const ORG_SUFFIX_REGEX = /(?<=@)(.+)/;
async function loginFailed(branding?: BrandingSettings, error: string = "") {
const locale = getLocale();
const t = await getTranslations({ locale, namespace: "idp" });
return (
<DynamicTheme branding={branding}>
<div className="flex flex-col items-center space-y-4">
<h1>{t("loginError.title")}</h1>
<p className="ztdl-p">{t("loginError.description")}</p>
{error && (
<div className="w-full">
{<Alert type={AlertType.ALERT}>{error}</Alert>}
</div>
)}
</div>
</DynamicTheme>
);
}
async function loginSuccess(
userId: string,
idpIntent: { idpIntentId: string; idpIntentToken: string },
authRequestId?: string,
branding?: BrandingSettings,
) {
const locale = getLocale();
const t = await getTranslations({ locale, namespace: "idp" });
return (
<DynamicTheme branding={branding}>
<div className="flex flex-col items-center space-y-4">
<h1>{t("loginSuccess.title")}</h1>
<p className="ztdl-p">{t("loginSuccess.description")}</p>
<IdpSignin
userId={userId}
idpIntent={idpIntent}
authRequestId={authRequestId}
/>
</div>
</DynamicTheme>
);
}
async function linkingSuccess(
userId: string,
idpIntent: { idpIntentId: string; idpIntentToken: string },
authRequestId?: string,
branding?: BrandingSettings,
) {
const locale = getLocale();
const t = await getTranslations({ locale, namespace: "idp" });
return (
<DynamicTheme branding={branding}>
<div className="flex flex-col items-center space-y-4">
<h1>{t("linkingSuccess.title")}</h1>
<p className="ztdl-p">{t("linkingSuccess.description")}</p>
<IdpSignin
userId={userId}
idpIntent={idpIntent}
authRequestId={authRequestId}
/>
</div>
</DynamicTheme>
);
}
async function linkingFailed(branding?: BrandingSettings) {
const locale = getLocale();
const t = await getTranslations({ locale, namespace: "idp" });
return (
<DynamicTheme branding={branding}>
<div className="flex flex-col items-center space-y-4">
<h1>{t("linkingError.title")}</h1>
<div className="w-full">
{
<Alert type={AlertType.ALERT}>
{t("linkingError.description")}
</Alert>
}
</div>
</div>
</DynamicTheme>
);
}
export default async function Page(props: {
searchParams: Promise<Record<string | number | symbol, string | undefined>>;
params: Promise<{ provider: string }>;
@@ -168,9 +81,13 @@ export default async function Page(props: {
userName: idpInformation.userName,
},
userId,
);
).catch((error) => {
console.error(error);
return linkingFailed(branding);
});
if (!idpLink) {
console.log("linking failed");
return linkingFailed(branding);
} else {
return linkingSuccess(
@@ -217,10 +134,12 @@ export default async function Page(props: {
},
foundUser.userId,
).catch((error) => {
console.error(error);
return linkingFailed(branding);
});
if (idpLink) {
if (!idpLink) {
return linkingFailed(branding);
} else {
return linkingSuccess(
foundUser.userId,
{ idpIntentId: id, idpIntentToken: token },

21
apps/login/src/app/error.tsx
View File

@@ -2,6 +2,7 @@
import { Boundary } from "@/components/boundary";
import { Button } from "@/components/button";
import { LanguageProvider } from "@/components/language-provider";
import { useTranslations } from "next-intl";
import { useEffect } from "react";
@@ -13,15 +14,17 @@ export default function Error({ error, reset }: any) {
const t = useTranslations("error");
return (
<Boundary labels={["Login Error"]} color="red">
<div className="space-y-4">
<div className="text-sm text-red-500 dark:text-red-500">
<strong className="font-bold">Error:</strong> {error?.message}
<LanguageProvider>
<Boundary labels={["Login Error"]} color="red">
<div className="space-y-4">
<div className="text-sm text-red-500 dark:text-red-500">
<strong className="font-bold">Error:</strong> {error?.message}
</div>
<div>
<Button onClick={() => reset()}>{t("tryagain")}</Button>
</div>
</div>
<div>
<Button onClick={() => reset()}>{t("tryagain")}</Button>
</div>
</div>
</Boundary>
</Boundary>
</LanguageProvider>
);
}

28
apps/login/src/components/idps/pages/linking-failed.tsx Normal file
View File

@@ -0,0 +1,28 @@
"use client";
import { LanguageProvider } from "@/components/language-provider";
import { BrandingSettings } from "@zitadel/proto/zitadel/settings/v2/branding_settings_pb";
import { useTranslations } from "next-intl";
import { Alert, AlertType } from "../../alert";
import { DynamicTheme } from "../../dynamic-theme";
export function linkingFailed(branding?: BrandingSettings) {
const t = useTranslations("idp");
return (
<LanguageProvider>
<DynamicTheme branding={branding}>
<div className="flex flex-col items-center space-y-4">
<h1>{t("linkingError.title")}</h1>
<div className="w-full">
{
<Alert type={AlertType.ALERT}>
{t("linkingError.description")}
</Alert>
}
</div>
</div>
</DynamicTheme>
</LanguageProvider>
);
}

30
apps/login/src/components/idps/pages/linking-success.tsx Normal file
View File

@@ -0,0 +1,30 @@
"use client";
import { BrandingSettings } from "@zitadel/proto/zitadel/settings/v2/branding_settings_pb";
import { useTranslations } from "next-intl";
import { DynamicTheme } from "../../dynamic-theme";
import { IdpSignin } from "../../idp-signin";
export function linkingSuccess(
userId: string,
idpIntent: { idpIntentId: string; idpIntentToken: string },
authRequestId?: string,
branding?: BrandingSettings,
) {
const t = useTranslations("idp");
return (
<DynamicTheme branding={branding}>
<div className="flex flex-col items-center space-y-4">
<h1>{t("linkingSuccess.title")}</h1>
<p className="ztdl-p">{t("linkingSuccess.description")}</p>
<IdpSignin
userId={userId}
idpIntent={idpIntent}
authRequestId={authRequestId}
/>
</div>
</DynamicTheme>
);
}

27
apps/login/src/components/idps/pages/login-failed.tsx Normal file
View File

@@ -0,0 +1,27 @@
"use client";
import { LanguageProvider } from "@/components/language-provider";
import { BrandingSettings } from "@zitadel/proto/zitadel/settings/v2/branding_settings_pb";
import { useTranslations } from "next-intl";
import { Alert, AlertType } from "../../alert";
import { DynamicTheme } from "../../dynamic-theme";
export function loginFailed(branding?: BrandingSettings, error: string = "") {
const t = useTranslations("idp");
return (
<LanguageProvider>
<DynamicTheme branding={branding}>
<div className="flex flex-col items-center space-y-4">
<h1>{t("loginError.title")}</h1>
<p className="ztdl-p">{t("loginError.description")}</p>
{error && (
<div className="w-full">
{<Alert type={AlertType.ALERT}>{error}</Alert>}
</div>
)}
</div>
</DynamicTheme>
</LanguageProvider>
);
}

33
apps/login/src/components/idps/pages/login-success.tsx Normal file
View File

@@ -0,0 +1,33 @@
"use client";
import { LanguageProvider } from "@/components/language-provider";
import { BrandingSettings } from "@zitadel/proto/zitadel/settings/v2/branding_settings_pb";
import { useTranslations } from "next-intl";
import { DynamicTheme } from "../../dynamic-theme";
import { IdpSignin } from "../../idp-signin";
export function loginSuccess(
userId: string,
idpIntent: { idpIntentId: string; idpIntentToken: string },
authRequestId?: string,
branding?: BrandingSettings,
) {
const t = useTranslations("idp");
return (
<LanguageProvider>
<DynamicTheme branding={branding}>
<div className="flex flex-col items-center space-y-4">
<h1>{t("loginSuccess.title")}</h1>
<p className="ztdl-p">{t("loginSuccess.description")}</p>
<IdpSignin
userId={userId}
idpIntent={idpIntent}
authRequestId={authRequestId}
/>
</div>
</DynamicTheme>
</LanguageProvider>
);
}