feat: introduce authentication page (#1241)

* feat: introduce authentication page

* feat: update page width

* fix(saml): cover non-existing role mapping on onboarding

---------

Co-authored-by: Ali BARIN <ali.barin53@gmail.com>

packages/web/src/components/AdminSettingsLayout/index.tsx

@@ -1,6 +1,7 @@
 import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
 import GroupIcon from '@mui/icons-material/Group';
 import GroupsIcon from '@mui/icons-material/Groups';
+import LockIcon from '@mui/icons-material/LockPerson';
 import BrushIcon from '@mui/icons-material/Brush';
 import Box from '@mui/material/Box';
 import Toolbar from '@mui/material/Toolbar';
@@ -28,10 +29,12 @@ function createDrawerLinks({
   canReadRole,
   canReadUser,
   canUpdateConfig,
+  canManageSamlAuthProvider,
 }: {
   canReadRole: boolean;
   canReadUser: boolean;
   canUpdateConfig: boolean;
+  canManageSamlAuthProvider: boolean;
 }) {
   const items = [
     canReadUser
@@ -55,6 +58,13 @@ function createDrawerLinks({
           to: URLS.USER_INTERFACE,
         }
       : null,
+    canManageSamlAuthProvider
+      ? {
+          Icon: LockIcon,
+          primary: 'adminSettingsDrawer.authentication',
+          to: URLS.AUTHENTICATION,
+        }
+      : null,
   ].filter(Boolean) as DrawerLink[];
 
   return items;
@@ -82,6 +92,10 @@ export default function SettingsLayout({
     canReadUser: currentUserAbility.can('read', 'User'),
     canReadRole: currentUserAbility.can('read', 'Role'),
     canUpdateConfig: currentUserAbility.can('update', 'Config'),
+    canManageSamlAuthProvider:
+      currentUserAbility.can('read', 'SamlAuthProvider') &&
+      currentUserAbility.can('update', 'SamlAuthProvider') &&
+      currentUserAbility.can('create', 'SamlAuthProvider'),
   });
 
   return (

packages/web/src/components/SsoProviders/index.ee.tsx

@@ -28,7 +28,7 @@ function SsoProviders() {
               variant="outlined"
             >
               {formatMessage('ssoProviders.loginWithProvider', {
-                providerName: provider.name
+                providerName: provider.name,
               })}
             </Button>
           ))}

packages/web/src/components/Switch/index.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+import FormControlLabel, {
+  FormControlLabelProps,
+} from '@mui/material/FormControlLabel';
+import MuiSwitch, { SwitchProps as MuiSwitchProps } from '@mui/material/Switch';
+
+type SwitchProps = {
+  name: string;
+  label: string;
+  shouldUnregister?: boolean;
+  FormControlLabelProps?: Partial<FormControlLabelProps>;
+} & MuiSwitchProps;
+
+export default function Switch(props: SwitchProps): React.ReactElement {
+  const { control } = useFormContext();
+  const inputRef = React.useRef<HTMLInputElement | null>(null);
+  const {
+    required,
+    name,
+    defaultChecked = false,
+    shouldUnregister = false,
+    disabled = false,
+    onBlur,
+    onChange,
+    label,
+    FormControlLabelProps,
+    ...switchProps
+  } = props;
+
+  return (
+    <Controller
+      rules={{ required }}
+      name={name}
+      defaultValue={defaultChecked}
+      control={control}
+      shouldUnregister={shouldUnregister}
+      render={({
+        field: {
+          ref,
+          onChange: controllerOnChange,
+          onBlur: controllerOnBlur,
+          value,
+          ...field
+        },
+      }) => (
+        <FormControlLabel
+          {...FormControlLabelProps}
+          control={
+            <MuiSwitch
+              {...switchProps}
+              {...field}
+              checked={value}
+              disabled={disabled}
+              onChange={(...args) => {
+                controllerOnChange(...args);
+                onChange?.(...args);
+              }}
+              onBlur={(...args) => {
+                controllerOnBlur();
+                onBlur?.(...args);
+              }}
+              inputRef={(element) => {
+                inputRef.current = element;
+                ref(element);
+              }}
+            />
+          }
+          label={label}
+        />
+      )}
+    />
+  );
+}

packages/web/src/components/TextField/index.tsx

@@ -67,6 +67,7 @@ export default function TextField(props: TextFieldProps): React.ReactElement {
         <MuiTextField
           {...textFieldProps}
           {...field}
+          required={required}
           disabled={disabled}
           onChange={(...args) => {
             controllerOnChange(...args);