TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-12-14 07:42:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: refactor idp buttons

Browse Source
This commit is contained in:
Yordis Prieto
2024-09-27 02:12:46 -04:00
parent 4d690dd0e9
commit a6f8c9ba2b
8 changed files with 92 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
apps/login/src/components/idps/base-button.tsx Normal file
View File

@@ -0,0 +1,29 @@
"use client";
import { clsx } from "clsx";
import { ButtonHTMLAttributes, DetailedHTMLProps, forwardRef } from "react";
export type SignInWithIdentityProviderProps = DetailedHTMLProps<
ButtonHTMLAttributes<HTMLButtonElement>,
HTMLButtonElement
> & {
name?: string;
e2e?: string;
};
export const BaseButton = forwardRef<
HTMLButtonElement,
SignInWithIdentityProviderProps
>(function BaseButton(props, ref) {
return (
<button
{...props}
type="button"
ref={ref}
className={clsx(
"transition-all cursor-pointer flex flex-row items-center bg-background-light-400 text-text-light-500 dark:bg-background-dark-500 dark:text-text-dark-500 border border-divider-light hover:border-black dark:border-divider-dark hover:dark:border-white focus:border-primary-light-500 focus:dark:border-primary-dark-500 outline-none rounded-md px-4 text-sm",
props.className,
)}
/>
);
});

17
apps/login/src/components/idps/classes.tsx
View File

@@ -1,17 +0,0 @@
import { ButtonHTMLAttributes, DetailedHTMLProps, ReactNode } from "react";
export const IdpButtonClasses =
"transition-all w-full cursor-pointer flex flex-row items-center bg-background-light-400 text-text-light-500 dark:bg-background-dark-500 dark:text-text-dark-500 border border-divider-light hover:border-black dark:border-divider-dark hover:dark:border-white focus:border-primary-light-500 focus:dark:border-primary-dark-500 outline-none rounded-md px-4 text-sm";
export interface SignInWithIDPProps {
children?: ReactNode;
orgId?: string;
}
export type SignInWithIdentityProviderProps = DetailedHTMLProps<
ButtonHTMLAttributes<HTMLButtonElement>,
HTMLButtonElement
> & {
name?: string;
e2e?: string;
};

24
apps/login/src/components/idps/sign-in-with-apple.tsx
View File

@@ -1,19 +1,15 @@
"use client"; "use client";
import { ReactNode, forwardRef } from "react"; import { forwardRef } from "react";
import { IdpButtonClasses, SignInWithIdentityProviderProps } from "./classes"; import { BaseButton, SignInWithIdentityProviderProps } from "./base-button";
export const SignInWithApple = forwardRef< export const SignInWithApple = forwardRef<
HTMLButtonElement, HTMLButtonElement,
SignInWithIdentityProviderProps SignInWithIdentityProviderProps
>( >(function SignInWithApple(props, ref) {
({ children, className = "", name = "", ...props }, ref): ReactNode => ( const { children, name, ...restProps } = props;
<button return (
type="button" <BaseButton {...restProps} ref={ref}>
ref={ref}
className={`${IdpButtonClasses} ${className}`}
{...props}
>
<div className="h-12 w-12 flex items-center justify-center"> <div className="h-12 w-12 flex items-center justify-center">
<div className="h-6 w-6"> <div className="h-6 w-6">
<svg viewBox="0 0 170 170" fill="currentColor"> <svg viewBox="0 0 170 170" fill="currentColor">
@@ -27,8 +23,6 @@ export const SignInWithApple = forwardRef<
) : ( ) : (
<span className="ml-4">{name ? name : "Sign in with Apple"}</span> <span className="ml-4">{name ? name : "Sign in with Apple"}</span>
)} )}
</button> </BaseButton>
), );
); });
SignInWithApple.displayName = "SignInWithApple";

24
apps/login/src/components/idps/sign-in-with-azure-ad.tsx
View File

@@ -1,19 +1,15 @@
"use client"; "use client";
import { ReactNode, forwardRef } from "react"; import { forwardRef } from "react";
import { IdpButtonClasses, SignInWithIdentityProviderProps } from "./classes"; import { BaseButton, SignInWithIdentityProviderProps } from "./base-button";
export const SignInWithAzureAd = forwardRef< export const SignInWithAzureAd = forwardRef<
HTMLButtonElement, HTMLButtonElement,
SignInWithIdentityProviderProps SignInWithIdentityProviderProps
>( >(function SignInWithAzureAd(props, ref) {
({ children, className = "", name = "", ...props }, ref): ReactNode => ( const { children, name, ...restProps } = props;
<button return (
type="button" <BaseButton {...restProps} ref={ref}>
ref={ref}
className={`${IdpButtonClasses} ${className}`}
{...props}
>
<div className="h-12 p-[10px] w-12 flex items-center justify-center"> <div className="h-12 p-[10px] w-12 flex items-center justify-center">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -33,8 +29,6 @@ export const SignInWithAzureAd = forwardRef<
) : ( ) : (
<span className="ml-4">{name ? name : "Sign in with AzureAD"}</span> <span className="ml-4">{name ? name : "Sign in with AzureAD"}</span>
)} )}
</button> </BaseButton>
), );
); });
SignInWithAzureAd.displayName = "SignInWithAzureAD";

34
apps/login/src/components/idps/sign-in-with-generic.tsx
View File

@@ -1,25 +1,21 @@
"use client"; "use client";
import { ReactNode, forwardRef } from "react"; import { forwardRef } from "react";
import { IdpButtonClasses, SignInWithIdentityProviderProps } from "./classes"; import { BaseButton, SignInWithIdentityProviderProps } from "./base-button";
export const SignInWithGeneric = forwardRef< export const SignInWithGeneric = forwardRef<
HTMLButtonElement, HTMLButtonElement,
SignInWithIdentityProviderProps SignInWithIdentityProviderProps
>( >(function SignInWithGeneric(props, ref) {
( const {
{ children, className = "h-[50px] pl-20", name = "", ...props }, children,
ref, name = "",
): ReactNode => ( className = "h-[50px] pl-20",
<button ...restProps
type="button" } = props;
ref={ref} return (
className={`${IdpButtonClasses} ${className}`} <BaseButton {...restProps} ref={ref} className={className}>
{...props} {children ? children : <span>{name}</span>}
> </BaseButton>
{children ? children : <span className="">{name}</span>} );
</button> });
),
);
SignInWithGeneric.displayName = "SignInWithGeneric";

34
apps/login/src/components/idps/sign-in-with-github.tsx
View File

@@ -1,27 +1,21 @@
"use client"; "use client";
import { ReactNode, forwardRef } from "react"; import { forwardRef } from "react";
import { IdpButtonClasses, SignInWithIdentityProviderProps } from "./classes"; import { BaseButton, SignInWithIdentityProviderProps } from "./base-button";
export const SignInWithGithub = forwardRef< export const SignInWithGithub = forwardRef<
HTMLButtonElement, HTMLButtonElement,
SignInWithIdentityProviderProps SignInWithIdentityProviderProps
>( >(function SignInWithGithub(props, ref) {
({ children, className = "", name = "", ...props }, ref): ReactNode => ( const { children, name, ...restProps } = props;
<button return (
type="button" <BaseButton {...restProps} ref={ref}>
ref={ref} <div className="mx-2 my-2 flex items-center justify-center">
className={`${IdpButtonClasses} ${className}`}
{...props}
>
<div className="h-8 w-8 mx-2 flex items-center justify-center">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="1024"
height="1024"
fill="none" fill="none"
viewBox="0 0 1024 1024" viewBox="0 0 1024 1024"
className="hidden dark:block" className="h-8 w-8 hidden dark:block"
> >
<path <path
fill="#fafafa" fill="#fafafa"
@@ -32,11 +26,9 @@ export const SignInWithGithub = forwardRef<
</svg> </svg>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="1024"
height="1024"
fill="none" fill="none"
viewBox="0 0 1024 1024" viewBox="0 0 1024 1024"
className="block dark:hidden" className="h-8 w-8 block dark:hidden"
> >
<path <path
fill="#1B1F23" fill="#1B1F23"
@@ -51,8 +43,6 @@ export const SignInWithGithub = forwardRef<
) : ( ) : (
<span className="ml-4">{name ? name : "Sign in with GitHub"}</span> <span className="ml-4">{name ? name : "Sign in with GitHub"}</span>
)} )}
</button> </BaseButton>
), );
); });
SignInWithGithub.displayName = "SignInWithGithub";

24
apps/login/src/components/idps/sign-in-with-gitlab.tsx
View File

@@ -1,19 +1,15 @@
"use client"; "use client";
import { ReactNode, forwardRef } from "react"; import { forwardRef } from "react";
import { IdpButtonClasses, SignInWithIdentityProviderProps } from "./classes"; import { BaseButton, SignInWithIdentityProviderProps } from "./base-button";
export const SignInWithGitlab = forwardRef< export const SignInWithGitlab = forwardRef<
HTMLButtonElement, HTMLButtonElement,
SignInWithIdentityProviderProps SignInWithIdentityProviderProps
>( >(function SignInWithGitlab(props, ref) {
({ children, className = "", name = "", ...props }, ref): ReactNode => ( const { children, name, ...restProps } = props;
<button return (
type="button" <BaseButton {...restProps} ref={ref}>
ref={ref}
className={`${IdpButtonClasses} ${className}`}
{...props}
>
<div className="h-12 w-12 flex items-center justify-center"> <div className="h-12 w-12 flex items-center justify-center">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -44,8 +40,6 @@ export const SignInWithGitlab = forwardRef<
) : ( ) : (
<span className="ml-4">{name ? name : "Sign in with GitLab"}</span> <span className="ml-4">{name ? name : "Sign in with GitLab"}</span>
)} )}
</button> </BaseButton>
), );
); });
SignInWithGitlab.displayName = "SignInWithGitlab";

24
apps/login/src/components/idps/sign-in-with-google.tsx
View File

@@ -1,19 +1,15 @@
"use client"; "use client";
import { ReactNode, forwardRef } from "react"; import { forwardRef } from "react";
import { IdpButtonClasses, SignInWithIdentityProviderProps } from "./classes"; import { BaseButton, SignInWithIdentityProviderProps } from "./base-button";
export const SignInWithGoogle = forwardRef< export const SignInWithGoogle = forwardRef<
HTMLButtonElement, HTMLButtonElement,
SignInWithIdentityProviderProps SignInWithIdentityProviderProps
>( >(function SignInWithGoogle(props, ref) {
({ children, className = "", name = "", ...props }, ref): ReactNode => ( const { children, name, ...restProps } = props;
<button return (
type="button" <BaseButton {...restProps} ref={ref}>
ref={ref}
className={`${IdpButtonClasses} ${className}`}
{...props}
>
<div className="h-12 w-12 flex items-center justify-center"> <div className="h-12 w-12 flex items-center justify-center">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -57,8 +53,6 @@ export const SignInWithGoogle = forwardRef<
) : ( ) : (
<span className="ml-4">{name ? name : "Sign in with Google"}</span> <span className="ml-4">{name ? name : "Sign in with Google"}</span>
)} )}
</button> </BaseButton>
), );
); });
SignInWithGoogle.displayName = "SignInWithGoogle";