feat(sso): allow to use OIDC and SAML (#7246)

## 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>

packages/twenty-front/src/modules/settings/components/SettingsRadioCard.tsx

@@ -0,0 +1,66 @@
+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>
+  );
+};