@niledatabase/react 2.5.0-alpha.0 → 3.0.0-alpha.0

package/dist/GoogleLoginButton/GoogleLoginButton.d.ts

@@ -6,5 +6,5 @@ import React from 'react';
  * @returns a JSX.Element to render
  */
 export default function GoogleSSOButton(props: {
-    newTenantName?: string;
+    callbackUrl?: string;
 }): React.JSX.Element;

package/dist/GoogleLoginButton/GoogleLoginButton.stories.d.ts

@@ -7,6 +7,5 @@ declare const meta: {
 };
 export default meta;
 export declare function Basic(): React.JSX.Element;
-export declare function BasicWithTenantNameProvider(): React.JSX.Element;
 export declare function AlphaVersionWithOutProvider(): React.JSX.Element;
 export declare function AlphaVersionWithProvider(): React.JSX.Element;

package/dist/SignInForm/SignInForm.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { Props } from './types';
+export default function SignInForm(props: Props): React.JSX.Element;

package/dist/SignInForm/index.d.ts

@@ -0,0 +1 @@
+export { default } from './SignInForm';

package/dist/{LoginForm → SignInForm}/types.d.ts

@@ -1,11 +1,10 @@
-import { LoginRequest } from '@niledatabase/browser';
 import { Attribute } from '../lib/SimpleForm/types';
 export type AllowedAny = any;
 export type LoginInfo = {
     email: string;
     password: string;
 };
-type LoginSuccess = (response: LoginRequest, formValues: LoginInfo, ...args: AllowedAny) => void;
+type LoginSuccess = (response: AllowedAny, formValues: LoginInfo, ...args: AllowedAny) => void;
 export interface Props {
     beforeMutate?: (data: AllowedAny) => AllowedAny;
     onSuccess: LoginSuccess;

package/dist/SignUpForm/types.d.ts

@@ -1,11 +1,11 @@
-import { SignUp201Response } from '@niledatabase/browser';
+import { CreateBasicUserRequest, User } from '@niledatabase/browser';
 import { Attribute } from '../lib/SimpleForm/types';
-export type LoginInfo = SignUp201Response;
-type SignInSuccess = (response: void | SignUp201Response, formValues: LoginInfo) => void;
+export type SignUpInfo = CreateBasicUserRequest;
+type SignInSuccess = (response: void | User, formValues: SignUpInfo) => void;
 export type AllowedAny = any;
 export interface Props {
     onSuccess: SignInSuccess;
-    onError?: (e: Error, info: LoginInfo) => void;
+    onError?: (e: Error, info: SignUpInfo) => void;
     beforeMutate?: (data: AllowedAny) => AllowedAny;
     attributes?: Attribute[];
     buttonText?: string;

package/dist/UserTenantList/CreateUser.d.ts

@@ -1,9 +1,8 @@
 import React from 'react';
-import { SignUp201Response } from '@niledatabase/browser';
 type Props = {
     allowCreation: boolean;
     buttonText: string;
-    onUserCreateSuccess?: (user: SignUp201Response) => void;
+    onUserCreateSuccess?: (user: any) => void;
 };
 export default function CreateUser(props: Props): React.JSX.Element | null;
 export {};

package/dist/UserTenantList/UserList.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import { SxProps } from '@mui/system/styleFunctionSx/styleFunctionSx';
 import { Theme } from '@mui/system/createTheme';
-import { SignUp201Response, User } from '@niledatabase/browser';
+import { User } from '@niledatabase/browser';
 type ColumnNames = string;
 type Props = {
     data: void | User[];
     allowCreation?: boolean;
     buttonText?: string;
-    onUserCreateSuccess?: (user: SignUp201Response) => void;
+    onUserCreateSuccess?: (user: any) => void;
     slots?: {
         dataGrid?: SxProps<Theme>;
     };

package/dist/UserTenantList/UserModal.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
-import { SignUp201Response } from '@niledatabase/browser';
 export type UserFormProps = {
     open: boolean;
     setOpen: (open: boolean) => void;
-    refetch?: (user: SignUp201Response) => void;
+    refetch?: (user: any) => void;
 };
 export default function AddUser(props: UserFormProps): React.JSX.Element;

package/dist/index.d.ts

@@ -1,13 +1,11 @@
-export { NileProvider } from './context';
-export { default as GoogleLoginButton } from './GoogleLoginButton';
+export { NileProvider, useApi } from './context';
+export { default as Google } from './GoogleLoginButton';
 export * from './GoogleLoginButton';
 export * from './SignUpForm';
-export { default as UserSignupForm } from './SignUpForm';
-export * from './LoginForm';
-export { default as UserLoginForm } from './LoginForm';
+export { default as SignUpForm } from './SignUpForm';
+export * from './SignInForm';
+export { default as SignInForm } from './SignInForm';
 export * from './UserTenantList';
 export { default as UserTenantList } from './UserTenantList';
-export * from './SSO';
-export { default as SSOForm } from './SSO';
 export { Attribute as FormAttribute, AttributeType as FormAttributeType, } from './lib/SimpleForm/types';
 export * from 'next-auth/react';

package/dist/lib/SimpleForm/types.d.ts

@@ -1,5 +1,6 @@
 export declare enum AttributeType {
     Text = "text",
+    Email = "email",
     Password = "password",
     Select = "select",
     Number = "number",

package/dist/react.cjs.development.js

@@ -11,6 +11,7 @@ var Box = require('@mui/joy/Box');
 var Button = require('@mui/joy/Button');
 var Stack = require('@mui/joy/Stack');
 var Typography = require('@mui/joy/Typography');
+var react = require('next-auth/react');
 var Alert = require('@mui/joy/Alert');
 var reactHookForm = require('react-hook-form');
 var Input = require('@mui/joy/Input');
@@ -27,9 +28,6 @@ var List = require('@mui/joy/List');
 var ListItem = require('@mui/joy/ListItem');
 var xDataGrid = require('@mui/x-data-grid');
 var Add = require('@mui/icons-material/Add');
-var CopyAll = require('@mui/icons-material/CopyAll');
-var CheckCircleOutlined = require('@mui/icons-material/CheckCircleOutlined');
-var react = require('next-auth/react');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -64,7 +62,6 @@ function Themer({
   }), children);
 }
 
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 const queryClient = /*#__PURE__*/new reactQuery.QueryClient();
 const defaultContext = {
   api: /*#__PURE__*/new Browser({
@@ -102,7 +99,8 @@ const NileProvider = props => {
         credentials: 'include'
       }),
       tenantId: String(tenantId),
-      apiUrl
+      apiUrl,
+      appUrl
     };
   }, [api, apiUrl, appUrl, tenantId]);
   return /*#__PURE__*/React.createElement(QueryProvider, null, /*#__PURE__*/React.createElement(Themer, {
@@ -158,7 +156,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.
@@ -167,25 +164,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.createElement(Box, {
-    component: "a",
-    href: href,
     display: "flex",
     flex: 1,
     sx: {
       textDecoration: 'none'
+    },
+    onClick: () => {
+      react.signIn('google', {
+        callbackUrl
+      });
     }
   }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Button, {
     sx: {
@@ -324,6 +314,7 @@ function CheckGroup(props) {
 exports.FormAttributeType = void 0;
 (function (AttributeType) {
   AttributeType["Text"] = "text";
+  AttributeType["Email"] = "email";
   AttributeType["Password"] = "password";
   AttributeType["Select"] = "select";
   AttributeType["Number"] = "number";
@@ -427,7 +418,8 @@ function SimpleForm(props) {
           orientation: "horizontal",
           sx: {
             alignItems: 'center'
-          }
+          },
+          required: attr.required
         }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Labler, {
           error: error,
           attr: attr
@@ -470,7 +462,8 @@ function SimpleForm(props) {
       case exports.FormAttributeType.Select:
         return /*#__PURE__*/React.createElement(FormControl, {
           key: display.key,
-          id: display.id
+          id: display.id,
+          required: attr.required
         }, /*#__PURE__*/React.createElement(Labler, {
           error: error,
           attr: attr
@@ -510,7 +503,8 @@ function SimpleForm(props) {
       case exports.FormAttributeType.Password:
         return /*#__PURE__*/React.createElement(FormControl, {
           key: display.key,
-          id: display.id
+          id: display.id,
+          required: attr.required
         }, /*#__PURE__*/React.createElement(Labler, {
           error: error,
           attr: attr
@@ -524,7 +518,8 @@ function SimpleForm(props) {
       case exports.FormAttributeType.Number:
         return /*#__PURE__*/React.createElement(FormControl, {
           key: display.key,
-          id: display.id
+          id: display.id,
+          required: attr.required
         }, /*#__PURE__*/React.createElement(Labler, {
           error: error,
           attr: attr
@@ -539,7 +534,8 @@ function SimpleForm(props) {
       default:
         return /*#__PURE__*/React.createElement(FormControl, {
           key: display.key,
-          id: display.id
+          id: display.id,
+          required: attr.required
         }, /*#__PURE__*/React.createElement(Labler, {
           error: error,
           attr: attr
@@ -577,24 +573,33 @@ function SignUpForm(props) {
   const mutation = reactQuery.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
       }
     });
   }, {
@@ -608,7 +613,7 @@ function SignUpForm(props) {
     const mainAttributes = [{
       name: 'email',
       label: 'Email',
-      type: exports.FormAttributeType.Text,
+      type: exports.FormAttributeType.Email,
       defaultValue: '',
       required: true
     }, {
@@ -634,7 +639,7 @@ function SignUpForm(props) {
   }));
 }
 
-function LoginForm(props) {
+function SignInForm(props) {
   const [error, setError] = React.useState();
   const {
     attributes,
@@ -642,14 +647,11 @@ function LoginForm(props) {
     onError,
     beforeMutate
   } = props;
-  const api = useApi();
   const mutation = reactQuery.useMutation(async _data => {
     setError(undefined);
     const possibleData = beforeMutate && beforeMutate(_data);
     const data = possibleData ?? _data;
-    return await api.auth.login({
-      loginRequest: data
-    });
+    react.signIn('credentials', data);
   }, {
     onSuccess,
     onError
@@ -684,78 +686,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.useState(disableSSO ? loginButtonText : nextButtonText);
-  const mutation = reactQuery.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.useMemo(() => {
-    const mainAttributes = [{
-      name: 'email',
-      label: 'Email',
-      type: exports.FormAttributeType.Text,
-      defaultValue: '',
-      required: true
-    }];
-    if (buttonText === loginButtonText) {
-      mainAttributes.push({
-        name: 'password',
-        label: 'Password',
-        type: exports.FormAttributeType.Password,
-        defaultValue: '',
-        required: true
-      });
-    }
-    if (attributes && attributes.length > 0) {
-      return mainAttributes.concat(attributes);
-    }
-    return mainAttributes;
-  }, [attributes, buttonText, loginButtonText]);
-  return /*#__PURE__*/React.createElement(SimpleForm, {
-    mutation: mutation,
-    buttonText: buttonText,
-    attributes: completeAttributes
-  });
-}
-
+/* eslint-disable @typescript-eslint/no-explicit-any */
 function AddUser(props) {
   const {
     open,
@@ -781,7 +712,7 @@ function AddUser(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [email]);
   const mutation = reactQuery.useMutation(data => api.users.createTenantUser({
-    signUpRequest: data,
+    createBasicUserRequest: data,
     tenantId: String(tenantId)
   }), {
     onSuccess(data) {
@@ -970,7 +901,7 @@ function UserList(props) {
     buttonText = 'Add a user',
     onUserCreateSuccess,
     slots,
-    include = ['email', 'preferedName']
+    include = ['email', 'preferredName']
   } = props;
   const dataGridSx = {
     width: '100%',
@@ -992,242 +923,12 @@ function UserList(props) {
   }));
 }
 
-function BaseSSOForm(props) {
-  const {
-    config,
-    providerName,
-    onSuccess,
-    onError,
-    allowEdit = true,
-    configurationGuide
-  } = props;
-  const api = useApi();
-  const [loading, setLoading] = React.useState(false);
-  const [success, setSuccess] = React.useState(false);
-  const [optimisticConfig, setConfig] = React.useState(config);
-  const timer = React.useRef();
-  const attributes = React.useMemo(() => {
-    const attributes = [{
-      name: 'enabled',
-      label: 'Allow Okta logins',
-      type: exports.FormAttributeType.Switch,
-      defaultValue: optimisticConfig?.enabled === true,
-      options: [{
-        label: 'Enabled'
-      }, {
-        label: 'Disabled'
-      }],
-      disabled: !allowEdit
-    }, {
-      name: 'clientId',
-      label: 'Client id',
-      type: exports.FormAttributeType.Text,
-      defaultValue: optimisticConfig?.clientId ?? '',
-      required: true,
-      disabled: !allowEdit
-    }, {
-      name: 'configUrl',
-      label: 'Config url',
-      type: exports.FormAttributeType.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: exports.FormAttributeType.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: exports.FormAttributeType.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 = reactQuery.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.useEffect(() => {
-  });
-  return /*#__PURE__*/React.createElement(Stack, {
-    gap: 2,
-    position: "relative"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    level: "h4"
-  }, "Step 1"), configurationGuide, /*#__PURE__*/React.createElement(Typography, {
-    level: "h4"
-  }, "Step 2"), /*#__PURE__*/React.createElement(SimpleForm, {
-    mutation: mutation,
-    buttonText: "Update",
-    attributes: attributes,
-    loading: loading,
-    successMessage: /*#__PURE__*/React.createElement(Alert, {
-      color: "success",
-      sx: {
-        opacity: success ? 1 : 0,
-        transition: 'opacity 200ms',
-        height: '0.9rem'
-      },
-      startDecorator: /*#__PURE__*/React.createElement(CheckCircleOutlined, null)
-    }, /*#__PURE__*/React.createElement(Typography, {
-      textAlign: "center",
-      fontSize: "sm"
-    }, "Provider updated"))
-  }));
-}
-
-function ConfigGuide({
-  callbackUrl
-}) {
-  const [copied, setCopied] = React.useState(false);
-  const timer = React.useRef();
-  React.useEffect(() => {
-    if (timer.current) {
-      clearTimeout(timer.current);
-    }
-    timer.current = setTimeout(() => {
-      setCopied(false);
-    }, 3250);
-  }, [copied]);
-  return /*#__PURE__*/React.createElement(Stack, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Typography, null, "In order for Okta to redirect properly, provide the following URL as the", ' ', /*#__PURE__*/React.createElement(Box, {
-    component: "span",
-    sx: {
-      fontFamily: 'monospace'
-    }
-  }, "Sign-in redirect URIs"), ' ', "in the admin configuration of your application."), /*#__PURE__*/React.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.createElement(Tooltip, {
-      title: "Copy Okta redirect URL"
-    }, /*#__PURE__*/React.createElement(Box, {
-      position: "relative",
-      width: copied ? '82px' : '24px',
-      height: "24px"
-    }, /*#__PURE__*/React.createElement(Box, {
-      position: "absolute",
-      top: "0",
-      left: "0",
-      sx: {
-        opacity: copied ? 0 : 1,
-        transition: 'opacity 300ms'
-      }
-    }, /*#__PURE__*/React.createElement(CopyAll, null)), /*#__PURE__*/React.createElement(Box, {
-      position: "absolute",
-      top: "0",
-      left: "0",
-      sx: {
-        opacity: !copied ? 0 : 1,
-        transition: 'opacity 300ms'
-      }
-    }, /*#__PURE__*/React.createElement(Stack, {
-      direction: "row",
-      gap: 1
-    }, /*#__PURE__*/React.createElement(CheckCircleOutlined, null), /*#__PURE__*/React.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.createElement(BaseSSOForm, {
-    ...remaining,
-    config: config,
-    providerName: "Okta",
-    configurationGuide: /*#__PURE__*/React.createElement(ConfigGuide, {
-      callbackUrl: callbackUrl
-    })
-  });
-}
-
-exports.GoogleLoginButton = GoogleSSOButton;
+exports.Google = GoogleSSOButton;
 exports.NileProvider = NileProvider;
-exports.Okta = Okta;
-exports.SSOForm = BaseSSOForm;
-exports.SingleSignOnForm = SingleSignOnForm;
-exports.UserLoginForm = LoginForm;
-exports.UserSignupForm = SignUpForm;
+exports.SignInForm = SignInForm;
+exports.SignUpForm = SignUpForm;
 exports.UserTenantList = UserList;
+exports.useApi = useApi;
 Object.keys(react).forEach(function (k) {
   if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
     enumerable: true,