@niledatabase/react 2.4.2-alpha.4 → 3.0.0-alpha.0

package/dist/react.esm.js

@@ -8,6 +8,8 @@ import Box from '@mui/joy/Box';
 import Button from '@mui/joy/Button';
 import Stack from '@mui/joy/Stack';
 import Typography from '@mui/joy/Typography';
+import { signIn } from 'next-auth/react';
+export * from 'next-auth/react';
 import Alert from '@mui/joy/Alert';
 import { useFormContext, Controller, useForm, FormProvider } from 'react-hook-form';
 import Input from '@mui/joy/Input';
@@ -24,8 +26,6 @@ import List from '@mui/joy/List';
 import ListItem from '@mui/joy/ListItem';
 import { DataGrid } from '@mui/x-data-grid';
 import Add from '@mui/icons-material/Add';
-import CopyAll from '@mui/icons-material/CopyAll';
-import CheckCircleOutlined from '@mui/icons-material/CheckCircleOutlined';
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 function Themer({
@@ -41,7 +41,6 @@ function Themer({
   }), children);
 }
 
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 const queryClient = /*#__PURE__*/new QueryClient();
 const defaultContext = {
   api: /*#__PURE__*/new Browser({
@@ -79,7 +78,8 @@ const NileProvider = props => {
         credentials: 'include'
       }),
       tenantId: String(tenantId),
-      apiUrl
+      apiUrl,
+      appUrl
     };
   }, [api, apiUrl, appUrl, tenantId]);
   return /*#__PURE__*/React__default.createElement(QueryProvider, null, /*#__PURE__*/React__default.createElement(Themer, {
@@ -135,7 +135,6 @@ var SvgGoogle = function SvgGoogle(props) {
   }))));
 };
 
-const LOGIN_PATH = 'users/oidc/google/login';
 /**
  * A component for a Google login button, according to their design language.
  * This works when an identity provider is configured in the admin dashboard.
@@ -144,25 +143,18 @@ const LOGIN_PATH = 'users/oidc/google/login';
  */
 function GoogleSSOButton(props) {
   const {
-    newTenantName
+    callbackUrl
   } = props;
-  const {
-    apiUrl
-  } = useNileConfig();
-  if (!apiUrl) {
-    // eslint-disable-next-line no-console
-    console.error('apiUrl is missing from <NileProvider />');
-  }
-  const contextHref = `${apiUrl}/${LOGIN_PATH}`;
-  const query = newTenantName ? '?newTenant=' + encodeURIComponent(newTenantName) : '';
-  const href = contextHref + query;
   return /*#__PURE__*/React__default.createElement(Box, {
-    component: "a",
-    href: href,
     display: "flex",
     flex: 1,
     sx: {
       textDecoration: 'none'
+    },
+    onClick: () => {
+      signIn('google', {
+        callbackUrl
+      });
     }
   }, /*#__PURE__*/React__default.createElement(Box, null, /*#__PURE__*/React__default.createElement(Button, {
     sx: {
@@ -301,6 +293,7 @@ function CheckGroup(props) {
 var AttributeType;
 (function (AttributeType) {
   AttributeType["Text"] = "text";
+  AttributeType["Email"] = "email";
   AttributeType["Password"] = "password";
   AttributeType["Select"] = "select";
   AttributeType["Number"] = "number";
@@ -404,7 +397,8 @@ function SimpleForm(props) {
           orientation: "horizontal",
           sx: {
             alignItems: 'center'
-          }
+          },
+          required: attr.required
         }, /*#__PURE__*/React__default.createElement(Box, null, /*#__PURE__*/React__default.createElement(Labler, {
           error: error,
           attr: attr
@@ -447,7 +441,8 @@ function SimpleForm(props) {
       case AttributeType.Select:
         return /*#__PURE__*/React__default.createElement(FormControl, {
           key: display.key,
-          id: display.id
+          id: display.id,
+          required: attr.required
         }, /*#__PURE__*/React__default.createElement(Labler, {
           error: error,
           attr: attr
@@ -487,7 +482,8 @@ function SimpleForm(props) {
       case AttributeType.Password:
         return /*#__PURE__*/React__default.createElement(FormControl, {
           key: display.key,
-          id: display.id
+          id: display.id,
+          required: attr.required
         }, /*#__PURE__*/React__default.createElement(Labler, {
           error: error,
           attr: attr
@@ -501,7 +497,8 @@ function SimpleForm(props) {
       case AttributeType.Number:
         return /*#__PURE__*/React__default.createElement(FormControl, {
           key: display.key,
-          id: display.id
+          id: display.id,
+          required: attr.required
         }, /*#__PURE__*/React__default.createElement(Labler, {
           error: error,
           attr: attr
@@ -516,7 +513,8 @@ function SimpleForm(props) {
       default:
         return /*#__PURE__*/React__default.createElement(FormControl, {
           key: display.key,
-          id: display.id
+          id: display.id,
+          required: attr.required
         }, /*#__PURE__*/React__default.createElement(Labler, {
           error: error,
           attr: attr
@@ -554,24 +552,33 @@ function SignUpForm(props) {
   const mutation = useMutation(async _data => {
     setError(undefined);
     const possibleData = beforeMutate && beforeMutate(_data);
-    const data = possibleData ?? _data;
+    const data = {
+      ..._data,
+      ...possibleData
+    };
     const {
+      name,
+      givenName,
+      familyName,
+      picture,
       email,
       password,
-      preferredName,
-      newTenant,
+      newTenantName,
       ...metadata
     } = data;
     if (Object.keys(metadata).length > 0) {
       // eslint-disable-next-line no-console
       console.warn('additional metadata not supported yet.');
     }
-    return api.auth.signUp({
-      signUpRequest: {
+    return await api.users.createUser({
+      createBasicUserRequest: {
         email,
         password,
-        preferredName,
-        newTenant
+        name,
+        familyName,
+        picture,
+        givenName,
+        newTenantName
       }
     });
   }, {
@@ -585,7 +592,7 @@ function SignUpForm(props) {
     const mainAttributes = [{
       name: 'email',
       label: 'Email',
-      type: AttributeType.Text,
+      type: AttributeType.Email,
       defaultValue: '',
       required: true
     }, {
@@ -611,7 +618,7 @@ function SignUpForm(props) {
   }));
 }
 
-function LoginForm(props) {
+function SignInForm(props) {
   const [error, setError] = React__default.useState();
   const {
     attributes,
@@ -619,14 +626,11 @@ function LoginForm(props) {
     onError,
     beforeMutate
   } = props;
-  const api = useApi();
   const mutation = useMutation(async _data => {
     setError(undefined);
     const possibleData = beforeMutate && beforeMutate(_data);
     const data = possibleData ?? _data;
-    return await api.auth.login({
-      loginRequest: data
-    });
+    signIn('credentials', data);
   }, {
     onSuccess,
     onError
@@ -661,78 +665,7 @@ function LoginForm(props) {
   }));
 }
 
-function SingleSignOnForm(props) {
-  const {
-    attributes,
-    onSuccess,
-    onError,
-    beforeMutate,
-    nextButtonText = 'Next',
-    loginButtonText = 'Log in',
-    disableSSO = false
-  } = props;
-  const api = useApi();
-  const [buttonText, setButtonText] = React__default.useState(disableSSO ? loginButtonText : nextButtonText);
-  const mutation = useMutation(async _data => {
-    const possibleData = beforeMutate && beforeMutate(_data);
-    const data = possibleData ?? _data;
-    return await api.auth.login({
-      loginRequest: {
-        email: data.email,
-        password: data.password
-      },
-      sso: !disableSSO
-    });
-  }, {
-    onSuccess: (token, data) => {
-      if (token) {
-        if (token?.redirectURI) {
-          window.location.href = token.redirectURI;
-        } else if (buttonText !== loginButtonText) {
-          setButtonText(loginButtonText);
-        } else {
-          onSuccess && onSuccess(token, data);
-        }
-      }
-    },
-    onError: (error, data) => {
-      // it is possible SSO failed, so only show errors on if the password is available
-      if (buttonText === loginButtonText) {
-        onError && onError(error, data);
-      } else {
-        setButtonText(loginButtonText);
-      }
-    }
-  });
-  const completeAttributes = React__default.useMemo(() => {
-    const mainAttributes = [{
-      name: 'email',
-      label: 'Email',
-      type: AttributeType.Text,
-      defaultValue: '',
-      required: true
-    }];
-    if (buttonText === loginButtonText) {
-      mainAttributes.push({
-        name: 'password',
-        label: 'Password',
-        type: AttributeType.Password,
-        defaultValue: '',
-        required: true
-      });
-    }
-    if (attributes && attributes.length > 0) {
-      return mainAttributes.concat(attributes);
-    }
-    return mainAttributes;
-  }, [attributes, buttonText, loginButtonText]);
-  return /*#__PURE__*/React__default.createElement(SimpleForm, {
-    mutation: mutation,
-    buttonText: buttonText,
-    attributes: completeAttributes
-  });
-}
-
+/* eslint-disable @typescript-eslint/no-explicit-any */
 function AddUser(props) {
   const {
     open,
@@ -758,7 +691,7 @@ function AddUser(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [email]);
   const mutation = useMutation(data => api.users.createTenantUser({
-    signUpRequest: data,
+    createBasicUserRequest: data,
     tenantId: String(tenantId)
   }), {
     onSuccess(data) {
@@ -947,7 +880,7 @@ function UserList(props) {
     buttonText = 'Add a user',
     onUserCreateSuccess,
     slots,
-    include = ['email', 'preferedName']
+    include = ['email', 'preferredName']
   } = props;
   const dataGridSx = {
     width: '100%',
@@ -969,233 +902,5 @@ function UserList(props) {
   }));
 }
 
-function BaseSSOForm(props) {
-  const {
-    config,
-    providerName,
-    onSuccess,
-    onError,
-    allowEdit = true,
-    configurationGuide
-  } = props;
-  const api = useApi();
-  const [loading, setLoading] = React__default.useState(false);
-  const [success, setSuccess] = React__default.useState(false);
-  const [optimisticConfig, setConfig] = React__default.useState(config);
-  const timer = React__default.useRef();
-  const attributes = React__default.useMemo(() => {
-    const attributes = [{
-      name: 'enabled',
-      label: 'Allow Okta logins',
-      type: AttributeType.Switch,
-      defaultValue: optimisticConfig?.enabled === true,
-      options: [{
-        label: 'Enabled'
-      }, {
-        label: 'Disabled'
-      }],
-      disabled: !allowEdit
-    }, {
-      name: 'clientId',
-      label: 'Client id',
-      type: AttributeType.Text,
-      defaultValue: optimisticConfig?.clientId ?? '',
-      required: true,
-      disabled: !allowEdit
-    }, {
-      name: 'configUrl',
-      label: 'Config url',
-      type: AttributeType.Text,
-      defaultValue: optimisticConfig?.configUrl ?? '',
-      helpText: 'The URL of the .well-known/openid-configuration for the identity provider',
-      required: true,
-      disabled: !allowEdit
-    }, {
-      name: 'emailDomains',
-      label: 'Email domains',
-      type: AttributeType.Text,
-      defaultValue: optimisticConfig?.emailDomains?.join(', ') ?? '',
-      required: true,
-      helpText: 'A comma seperated list of email domains (yourDomain.com) to be used',
-      disabled: !allowEdit
-    }];
-    if (!optimisticConfig?.clientId) {
-      attributes.splice(2, 0, {
-        name: 'clientSecret',
-        label: 'Client secret',
-        type: AttributeType.Password,
-        defaultValue: '',
-        required: true,
-        disabled: !allowEdit
-      });
-    }
-    return attributes;
-  }, [allowEdit, optimisticConfig?.clientId, optimisticConfig?.configUrl, optimisticConfig?.emailDomains, optimisticConfig?.enabled]);
-  const handleTimer = () => {
-    if (timer.current) {
-      clearTimeout(timer.current);
-    }
-    timer.current = setTimeout(() => {
-      setSuccess(false);
-    }, 3000);
-  };
-  const mutation = useMutation(ssoRequest => {
-    setLoading(true);
-    const payload = {
-      providerName: providerName.toLowerCase(),
-      updateProviderRequest: {
-        ...ssoRequest,
-        emailDomains: ssoRequest.emailDomains.split(',')
-      }
-    };
-    if (optimisticConfig != null) {
-      return api.auth.updateProvider(payload);
-    } else {
-      return api.auth.createProvider(payload);
-    }
-  }, {
-    onSuccess: (data, vars) => {
-      setConfig(data);
-      setSuccess(true);
-      onSuccess && onSuccess(data, vars);
-    },
-    onError,
-    onSettled: (data, error, vars) => {
-      setLoading(false);
-      handleTimer();
-      if (!data) {
-        if (!error || error?.message.includes('Unterminated string')) {
-          // something unexpected happened on the BE, but it's non-fatal
-          setConfig({
-            enabled: vars.enabled,
-            clientId: vars.clientId,
-            configUrl: vars.configUrl,
-            emailDomains: vars.emailDomains.split(', ')
-          });
-        }
-        setSuccess(true);
-        onSuccess && onSuccess(data, vars);
-      }
-    }
-  });
-  React__default.useEffect(() => {
-  });
-  return /*#__PURE__*/React__default.createElement(Stack, {
-    gap: 2,
-    position: "relative"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    level: "h4"
-  }, "Step 1"), configurationGuide, /*#__PURE__*/React__default.createElement(Typography, {
-    level: "h4"
-  }, "Step 2"), /*#__PURE__*/React__default.createElement(SimpleForm, {
-    mutation: mutation,
-    buttonText: "Update",
-    attributes: attributes,
-    loading: loading,
-    successMessage: /*#__PURE__*/React__default.createElement(Alert, {
-      color: "success",
-      sx: {
-        opacity: success ? 1 : 0,
-        transition: 'opacity 200ms',
-        height: '0.9rem'
-      },
-      startDecorator: /*#__PURE__*/React__default.createElement(CheckCircleOutlined, null)
-    }, /*#__PURE__*/React__default.createElement(Typography, {
-      textAlign: "center",
-      fontSize: "sm"
-    }, "Provider updated"))
-  }));
-}
-
-function ConfigGuide({
-  callbackUrl
-}) {
-  const [copied, setCopied] = React__default.useState(false);
-  const timer = React__default.useRef();
-  React__default.useEffect(() => {
-    if (timer.current) {
-      clearTimeout(timer.current);
-    }
-    timer.current = setTimeout(() => {
-      setCopied(false);
-    }, 3250);
-  }, [copied]);
-  return /*#__PURE__*/React__default.createElement(Stack, {
-    gap: 2
-  }, /*#__PURE__*/React__default.createElement(Typography, null, "In order for Okta to redirect properly, provide the following URL as the", ' ', /*#__PURE__*/React__default.createElement(Box, {
-    component: "span",
-    sx: {
-      fontFamily: 'monospace'
-    }
-  }, "Sign-in redirect URIs"), ' ', "in the admin configuration of your application."), /*#__PURE__*/React__default.createElement(Input, {
-    onClick: async () => {
-      if (callbackUrl) {
-        await navigator.clipboard.writeText(callbackUrl);
-        setCopied(true);
-      }
-    },
-    sx: theme => ({
-      input: {
-        cursor: 'pointer'
-      },
-      span: {
-        cursor: 'pointer'
-      },
-      '&:hover svg': {
-        '--Icon-color': theme.palette.primary[500]
-      }
-    }),
-    value: callbackUrl,
-    readOnly: true,
-    endDecorator: /*#__PURE__*/React__default.createElement(Tooltip, {
-      title: "Copy Okta redirect URL"
-    }, /*#__PURE__*/React__default.createElement(Box, {
-      position: "relative",
-      width: copied ? '82px' : '24px',
-      height: "24px"
-    }, /*#__PURE__*/React__default.createElement(Box, {
-      position: "absolute",
-      top: "0",
-      left: "0",
-      sx: {
-        opacity: copied ? 0 : 1,
-        transition: 'opacity 300ms'
-      }
-    }, /*#__PURE__*/React__default.createElement(CopyAll, null)), /*#__PURE__*/React__default.createElement(Box, {
-      position: "absolute",
-      top: "0",
-      left: "0",
-      sx: {
-        opacity: !copied ? 0 : 1,
-        transition: 'opacity 300ms'
-      }
-    }, /*#__PURE__*/React__default.createElement(Stack, {
-      direction: "row",
-      gap: 1
-    }, /*#__PURE__*/React__default.createElement(CheckCircleOutlined, null), /*#__PURE__*/React__default.createElement(Typography, {
-      color: "primary"
-    }, "Copied!")))))
-  }));
-}
-function Okta(props) {
-  const {
-    callbackUrl,
-    providers,
-    ...remaining
-  } = props;
-  if (!providers) {
-    return null;
-  }
-  const config = providers?.find(provider => provider.provider === 'okta');
-  return /*#__PURE__*/React__default.createElement(BaseSSOForm, {
-    ...remaining,
-    config: config,
-    providerName: "Okta",
-    configurationGuide: /*#__PURE__*/React__default.createElement(ConfigGuide, {
-      callbackUrl: callbackUrl
-    })
-  });
-}
-
-export { AttributeType as FormAttributeType, GoogleSSOButton as GoogleLoginButton, NileProvider, Okta, BaseSSOForm as SSOForm, SingleSignOnForm, LoginForm as UserLoginForm, SignUpForm as UserSignupForm, UserList as UserTenantList };
+export { AttributeType as FormAttributeType, GoogleSSOButton as Google, NileProvider, SignInForm, SignUpForm, UserList as UserTenantList, useApi };
 //# sourceMappingURL=react.esm.js.map