Antoine Moreaux
0f0a7966b1
## What it does ### Backend - [x] Add a mutation to create OIDC and SAML configuration - [x] Add a mutation to delete an SSO config - [x] Add a feature flag to toggle SSO - [x] Add a mutation to activate/deactivate an SSO config - [x] Add a mutation to delete an SSO config - [x] Add strategy to use OIDC or SAML - [ ] Improve error management ### Frontend - [x] Add section "security" in settings - [x] Add page to list SSO configurations - [x] Add page and forms to create OIDC or SAML configuration - [x] Add field to "connect with SSO" in the signin/signup process - [x] Trigger auth when a user switch to a workspace with SSO enable - [x] Add an option on the security page to activate/deactivate the global invitation link - [ ] Add new Icons for SSO Identity Providers (okta, Auth0, Azure, Microsoft) --------- Co-authored-by: Félix Malfait <felix@twenty.com> Co-authored-by: Charles Bochet <charles@twenty.com>
67 lines
1.8 KiB
TypeScript
67 lines
1.8 KiB
TypeScript
import styled from '@emotion/styled';
|
|
import { Radio } from '@/ui/input/components/Radio';
|
|
import { CardContent } from '@/ui/layout/card/components/CardContent';
|
|
import { IconComponent } from 'twenty-ui';
|
|
import { useTheme } from '@emotion/react';
|
|
|
|
const StyledRadioCardContent = styled(CardContent)`
|
|
display: flex;
|
|
align-items: center;
|
|
padding: ${({ theme }) => theme.spacing(2)};
|
|
border: 1px solid ${({ theme }) => theme.border.color.light};
|
|
border-radius: ${({ theme }) => theme.border.radius.sm};
|
|
flex-grow: 1;
|
|
gap: ${({ theme }) => theme.spacing(2)};
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background: ${({ theme }) => theme.background.transparent.lighter};
|
|
}
|
|
`;
|
|
|
|
const StyledRadio = styled(Radio)`
|
|
margin-left: auto;
|
|
padding: ${({ theme }) => theme.spacing(1)};
|
|
`;
|
|
|
|
const StyledTitle = styled.div`
|
|
color: ${({ theme }) => theme.font.color.secondary};
|
|
font-weight: ${({ theme }) => theme.font.weight.medium};
|
|
`;
|
|
|
|
const StyledDescription = styled.div`
|
|
color: ${({ theme }) => theme.font.color.tertiary};
|
|
font-size: ${({ theme }) => theme.font.size.sm};
|
|
`;
|
|
|
|
type SettingsRadioCardProps = {
|
|
value: string;
|
|
handleClick: (value: string) => void;
|
|
isSelected: boolean;
|
|
title: string;
|
|
description?: string;
|
|
Icon?: IconComponent;
|
|
};
|
|
|
|
export const SettingsRadioCard = ({
|
|
value,
|
|
handleClick,
|
|
title,
|
|
description,
|
|
isSelected,
|
|
Icon,
|
|
}: SettingsRadioCardProps) => {
|
|
const theme = useTheme();
|
|
|
|
return (
|
|
<StyledRadioCardContent onClick={() => handleClick(value)}>
|
|
{Icon && <Icon size={theme.icon.size.xl} color={theme.color.gray50} />}
|
|
<span>
|
|
{title && <StyledTitle>{title}</StyledTitle>}
|
|
{description && <StyledDescription>{description}</StyledDescription>}
|
|
</span>
|
|
<StyledRadio value={value} checked={isSelected} />
|
|
</StyledRadioCardContent>
|
|
);
|
|
};
|