TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-12-10 21:22:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

google forwardref button

Browse Source
This commit is contained in:
peintnermax
2023-07-27 11:05:42 +02:00
parent 4116f99e68
commit 0471307564
10 changed files with 95 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/login/app/(login)/register/idp/page.tsx
View File

@@ -1,6 +1,5 @@
import { getLegalAndSupportSettings, server } from "#/lib/zitadel";
import { SignInWithIDP } from "@zitadel/next";
import { SignInWithIDP } from "#/ui/SignInWithIDP";
export default async function Page({
searchParams,
@@ -9,6 +8,8 @@ export default async function Page({
}) {
const legal = await getLegalAndSupportSettings(server);
console.log(server);
return (
<div className="flex flex-col items-center space-y-4">
<h1>Register</h1>

15
apps/login/lib/zitadel.ts
View File

@@ -25,6 +25,8 @@ import {
LoginSettings,
GetLoginSettingsResponse,
ListAuthenticationMethodTypesResponse,
StartIdentityProviderFlowRequest,
StartIdentityProviderFlowResponse,
} from "@zitadel/server";
export const zitadelConfig: ZitadelServerOptions = {
@@ -195,6 +197,19 @@ export async function addHumanUser(
});
}
export async function startIdentityProviderFlow(
server: ZitadelServer,
{ idpId, successUrl, failureUrl }: StartIdentityProviderFlowRequest
): Promise<StartIdentityProviderFlowResponse> {
const userService = user.getUser(server);
return userService.startIdentityProviderFlow({
idpId,
successUrl,
failureUrl,
});
}
export async function verifyEmail(
server: ZitadelServer,
userId: string,

23
apps/login/ui/Button.tsx
View File

@@ -2,6 +2,7 @@ import clsx from "clsx";
import React, {
ButtonHTMLAttributes,
DetailedHTMLProps,
ReactNode,
forwardRef,
} from "react";
@@ -65,16 +66,14 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
...props
},
ref
) => {
return (
<button
type="button"
ref={ref}
className={`${getButtonClasses(size, variant, color)} ${className}`}
{...props}
>
{children}
</button>
);
}
): ReactNode => (
<button
type="button"
ref={ref}
className={`${getButtonClasses(size, variant, color)} ${className}`}
{...props}
>
{children}
</button>
)
);

42
packages/zitadel-next/src/components/SignInWithIDP.tsx → apps/login/ui/SignInWithIDP.tsx
View File

@@ -1,4 +1,3 @@
"use server";
import { ReactNode } from "react";
import {
@@ -8,12 +7,13 @@ import {
IdentityProvider,
IdentityProviderType,
} from "@zitadel/server";
// import {
// SignInWithGitlab,
// SignInWithAzureAD,
// SignInWithGoogle,
// SignInWithGithub,
// } from "@zitadel/react";
import {
SignInWithGitlab,
SignInWithAzureAD,
SignInWithGoogle,
SignInWithGithub,
} from "@zitadel/react";
import { server, startIdentityProviderFlow } from "#/lib/zitadel";
export interface SignInWithIDPProps {
children?: ReactNode;
@@ -37,18 +37,26 @@ function getIdentityProviders(
});
}
export function SignInWithIDP(props: SignInWithIDPProps) {
export async function SignInWithIDP(props: SignInWithIDPProps) {
console.log(props.server);
// const identityProviders = await getIdentityProviders(
// props.server,
// props.orgId
// );
const identityProviders = await getIdentityProviders(
props.server,
props.orgId
);
// console.log(identityProviders);
console.log(identityProviders);
function startFlow(idp: IdentityProvider) {
return startIdentityProviderFlow(server, {
idpId: idp.id,
successUrl: "",
failureUrl: "",
}).then(() => {});
}
return (
<div className="ztdl-next-flex ztdl-next-flex-col ztdl-next-w-full ztdl-next-space-y-2 ztdl-next-text-sm">
{/* {identityProviders &&
<div className="flex flex-col w-full space-y-2 text-sm">
{identityProviders &&
identityProviders.map((idp, i) => {
switch (idp.type) {
case IdentityProviderType.IDENTITY_PROVIDER_TYPE_GITHUB:
@@ -77,6 +85,7 @@ export function SignInWithIDP(props: SignInWithIDPProps) {
<SignInWithGoogle
key={`idp-${i}`}
name={idp.name}
onClick={() => startFlow(idp)}
></SignInWithGoogle>
);
case IdentityProviderType.IDENTITY_PROVIDER_TYPE_GITLAB:
@@ -96,8 +105,7 @@ export function SignInWithIDP(props: SignInWithIDPProps) {
default:
return <div>{idp.name}</div>;
}
})} */}
{props.children}
})}
</div>
);
}

3
packages/zitadel-next/package.json
View File

@@ -32,7 +32,8 @@
"typescript": "^4.9.3",
"tailwindcss": "3.2.4",
"postcss": "8.4.21",
"zitadel-tailwind-config": "workspace:*"
"zitadel-tailwind-config": "workspace:*",
"@zitadel/server": "workspace:*"
},
"peerDependencies": {
"@zitadel/react": "workspace:*",

5
packages/zitadel-next/src/index.tsx
View File

@@ -1,10 +1,5 @@
import "./styles.css";
export {
SignInWithIDP,
type SignInWithIDPProps,
} from "./components/SignInWithIDP";
export {
ZitadelNextProvider,
type ZitadelNextProps,

48
packages/zitadel-react/src/components/SignInWithGoogle.tsx
View File

@@ -1,21 +1,37 @@
"use client";
import {
ButtonHTMLAttributes,
DetailedHTMLProps,
ReactNode,
forwardRef,
} from "react";
import { SignInWithIdentityProviderProps } from "./SignInWith";
export interface SignInWithGoogleProps
extends SignInWithIdentityProviderProps {}
type SignInWithGoogleProps = DetailedHTMLProps<
ButtonHTMLAttributes<HTMLButtonElement>,
HTMLButtonElement
> & {
name?: string;
};
export function SignInWithGoogle(props: SignInWithGoogleProps) {
return (
<div className="ztdl-w-full ztdl-cursor-pointer ztdl-flex ztdl-flex-row ztdl-items-center ztdl-bg-white ztdl-text-black dark:ztdl-bg-transparent dark:ztdl-text-white border ztdl-border-divider-light dark:ztdl-border-divider-dark rounded-md px-4 text-sm">
export const SignInWithGoogle = forwardRef<
HTMLButtonElement,
SignInWithGoogleProps
>(
({ children, className = "", name = "", ...props }, ref): ReactNode => (
<button
type="button"
ref={ref}
className={`ztdl-w-full ztdl-cursor-pointer ztdl-flex ztdl-flex-row ztdl-items-center ztdl-bg-white ztdl-text-black dark:ztdl-bg-transparent dark:ztdl-text-white border ztdl-border-divider-light dark:ztdl-border-divider-dark rounded-md px-4 text-sm ${className}`}
{...props}
>
<div className="ztdl-h-12 ztdl-w-12 ztdl-flex ztdl-items-center ztdl-justify-center">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlSpace="preserve"
id="Capa_1"
// style={{
// enableBackground: "new 0 0 150 150",
// }}
viewBox="0 0 150 150"
{...props}
>
<style>
{
@@ -48,11 +64,13 @@ export function SignInWithGoogle(props: SignInWithGoogleProps) {
/>
</svg>
</div>
<span className="ztdl-ml-4">
{props.name ? props.name : "Sign in with Google"}
</span>
</div>
);
}
{children ? (
children
) : (
<span className="ztdl-ml-4">{name ? name : "Sign in with Google"}</span>
)}
</button>
)
);
SignInWithGoogle.displayName = "SignInWithGoogle";

5
packages/zitadel-react/src/index.tsx
View File

@@ -1,9 +1,6 @@
import "./styles.css";
export {
SignInWithGoogle,
type SignInWithGoogleProps,
} from "./components/SignInWithGoogle";
export { SignInWithGoogle } from "./components/SignInWithGoogle";
export {
SignInWithGitlab,

2
packages/zitadel-server/src/index.ts
View File

@@ -57,6 +57,8 @@ export {
ListAuthenticationMethodTypesResponse,
ListAuthenticationMethodTypesRequest,
AuthenticationMethodType,
StartIdentityProviderFlowRequest,
StartIdentityProviderFlowResponse,
} from "./proto/server/zitadel/user/v2alpha/user_service";
export {
SetHumanPasswordResponse,

6
pnpm-lock.yaml generated
View File

@@ -259,9 +259,6 @@ importers:
'@zitadel/react':
specifier: workspace:*
version: link:../zitadel-react
'@zitadel/server':
specifier: workspace:*
version: link:../zitadel-server
next:
specifier: ^13.4.10
version: 13.4.10(@babel/core@7.22.1)(react-dom@18.2.0)(react@18.2.0)
@@ -275,6 +272,9 @@ importers:
'@types/react':
specifier: ^17.0.13
version: 17.0.52
'@zitadel/server':
specifier: workspace:*
version: link:../zitadel-server
'@zitadel/tsconfig':
specifier: workspace:*
version: link:../zitadel-tsconfig