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/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}
+        />
+      )}
+    />
+  );
+}