@ttoss/react-auth 1.1.0 → 1.2.0

package/dist/esm/index.js

@@ -172,6 +172,28 @@ var AuthConfirmSignUp = ({
   );
 };
 
+// src/AuthFullScreen.tsx
+import { Flex as Flex2 } from "@ttoss/ui";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var AuthFullScreen = ({ children }) => {
+  return /* @__PURE__ */ jsx4(
+    Flex2,
+    {
+      sx: {
+        height: "100vh",
+        width: "100vw",
+        justifyContent: "center",
+        alignItems: "center",
+        margin: 0,
+        backgroundPosition: "center",
+        backgroundRepeat: "no-repeat",
+        backgroundSize: "cover"
+      },
+      children
+    }
+  );
+};
+
 // src/AuthSignIn.tsx
 import { Form as Form2, FormFieldInput as FormFieldInput2, useForm as useForm2, yup as yup2, yupResolver as yupResolver2 } from "@ttoss/forms";
 
@@ -180,7 +202,7 @@ var PASSWORD_MINIMUM_LENGTH = 8;
 
 // src/AuthSignIn.tsx
 import { useI18n as useI18n2 } from "@ttoss/react-i18n";
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 var AuthSignIn = ({
   onSignIn,
   onSignUp,
@@ -222,7 +244,7 @@ var AuthSignIn = ({
   const onSubmitForm = (data) => {
     return onSignIn(data);
   };
-  return /* @__PURE__ */ jsx4(Form2, { ...formMethods, onSubmit: onSubmitForm, children: /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsx5(Form2, { ...formMethods, onSubmit: onSubmitForm, children: /* @__PURE__ */ jsxs2(
     AuthCard,
     {
       title: intl.formatMessage({
@@ -250,7 +272,7 @@ var AuthSignIn = ({
         }
       ],
       children: [
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           FormFieldInput2,
           {
             name: "email",
@@ -260,7 +282,7 @@ var AuthSignIn = ({
             })
           }
         ),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           FormFieldInput2,
           {
             name: "password",
@@ -278,7 +300,7 @@ var AuthSignIn = ({
 // src/AuthSignUp.tsx
 import { Form as Form3, FormFieldInput as FormFieldInput3, useForm as useForm3, yup as yup3, yupResolver as yupResolver3 } from "@ttoss/forms";
 import { useI18n as useI18n3 } from "@ttoss/react-i18n";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 var AuthSignUp = ({ onSignUp, onReturnToSignIn }) => {
   const { intl } = useI18n3();
   const schema = yup3.object().shape({
@@ -315,7 +337,7 @@ var AuthSignUp = ({ onSignUp, onReturnToSignIn }) => {
   const onSubmitForm = (data) => {
     return onSignUp(data);
   };
-  return /* @__PURE__ */ jsx5(Form3, { ...formMethods, onSubmit: onSubmitForm, children: /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsx6(Form3, { ...formMethods, onSubmit: onSubmitForm, children: /* @__PURE__ */ jsxs3(
     AuthCard,
     {
       buttonLabel: intl.formatMessage({
@@ -336,7 +358,7 @@ var AuthSignUp = ({ onSignUp, onReturnToSignIn }) => {
         }
       ],
       children: [
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6(
           FormFieldInput3,
           {
             name: "email",
@@ -346,7 +368,7 @@ var AuthSignUp = ({ onSignUp, onReturnToSignIn }) => {
             })
           }
         ),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6(
           FormFieldInput3,
           {
             name: "password",
@@ -365,7 +387,7 @@ var AuthSignUp = ({ onSignUp, onReturnToSignIn }) => {
 import { assign, createMachine } from "xstate";
 import { useMachine } from "@xstate/react";
 import { useNotifications as useNotifications2 } from "@ttoss/react-notifications";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var authMachine = createMachine(
   {
     predictableActionArguments: true,
@@ -409,7 +431,7 @@ var authMachine = createMachine(
     }
   }
 );
-var AuthWithoutLogo = () => {
+var AuthLogic = () => {
   const { isAuthenticated } = useAuth();
   const [state, send] = useMachine(authMachine);
   const { setLoading } = useNotifications2();
@@ -469,10 +491,10 @@ var AuthWithoutLogo = () => {
     return null;
   }
   if (state.matches("signUp")) {
-    return /* @__PURE__ */ jsx6(AuthSignUp, { onSignUp, onReturnToSignIn });
+    return /* @__PURE__ */ jsx7(AuthSignUp, { onSignUp, onReturnToSignIn });
   }
   if (state.matches("signUpConfirm")) {
-    return /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx7(
       AuthConfirmSignUp,
       {
         onConfirmSignUp,
@@ -480,7 +502,7 @@ var AuthWithoutLogo = () => {
       }
     );
   }
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     AuthSignIn,
     {
       onSignIn,
@@ -491,39 +513,17 @@ var AuthWithoutLogo = () => {
     }
   );
 };
-var withLogo = (Component) => {
-  const WithLogo = ({ logo, ...componentProps }) => {
-    return /* @__PURE__ */ jsx6(LogoProvider, { logo, children: /* @__PURE__ */ jsx6(Component, { ...componentProps }) });
-  };
-  WithLogo.displayName = "WithLogo";
-  return WithLogo;
-};
-var Auth2 = withLogo(AuthWithoutLogo);
-
-// src/AuthContainer.tsx
-import { Flex as Flex2 } from "@ttoss/ui";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var AuthContainer = ({ sx, ...props }) => {
-  return /* @__PURE__ */ jsx7(
-    Flex2,
-    {
-      ...props,
-      sx: {
-        height: "100vh",
-        justifyContent: "center",
-        alignItems: "center",
-        margin: 0,
-        backgroundPosition: "center",
-        backgroundRepeat: "no-repeat",
-        backgroundSize: "cover",
-        ...sx
-      }
-    }
-  );
+var Auth2 = ({ logo, fullScreen = true }) => {
+  const withLogoNode = React3.useMemo(() => {
+    return /* @__PURE__ */ jsx7(LogoProvider, { logo, children: /* @__PURE__ */ jsx7(AuthLogic, {}) });
+  }, [logo]);
+  if (fullScreen) {
+    return /* @__PURE__ */ jsx7(AuthFullScreen, { children: withLogoNode });
+  }
+  return withLogoNode;
 };
 export {
   Auth2 as Auth,
-  AuthContainer,
   AuthProvider_default as AuthProvider,
   useAuth
 };

package/dist/index.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { FlexProps } from '@ttoss/ui';
 
 type User = {
     id: string;
@@ -26,15 +25,10 @@ type LogoContextProps = {
     children?: React.ReactNode;
 };
 
-declare const Auth: {
-    ({ logo, ...componentProps }: Record<string, unknown> & LogoContextProps): JSX.Element;
-    displayName: string;
+type AuthProps = LogoContextProps & {
+    fullScreen?: boolean;
 };
-
-type AuthContainerProps = FlexProps & {
-    backgroundImageUrl?: string;
-};
-declare const AuthContainer: ({ sx, ...props }: AuthContainerProps) => JSX.Element;
+declare const Auth: ({ logo, fullScreen }: AuthProps) => JSX.Element;
 
 type OnSignInInput = {
     email: string;
@@ -51,4 +45,4 @@ type OnConfirmSignUp = (input: {
     code: string;
 }) => void;
 
-export { Auth, AuthContainer, AuthProvider, OnConfirmSignUp, OnSignIn, OnSignInInput, OnSignUp, OnSignUpInput, useAuth };
+export { Auth, AuthProvider, OnConfirmSignUp, OnSignIn, OnSignInInput, OnSignUp, OnSignUpInput, useAuth };

package/dist/index.js

@@ -28,7 +28,6 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   Auth: () => Auth2,
-  AuthContainer: () => AuthContainer,
   AuthProvider: () => AuthProvider_default,
   useAuth: () => useAuth
 });
@@ -206,6 +205,28 @@ var AuthConfirmSignUp = ({
   );
 };
 
+// src/AuthFullScreen.tsx
+var import_ui2 = require("@ttoss/ui");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var AuthFullScreen = ({ children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_ui2.Flex,
+    {
+      sx: {
+        height: "100vh",
+        width: "100vw",
+        justifyContent: "center",
+        alignItems: "center",
+        margin: 0,
+        backgroundPosition: "center",
+        backgroundRepeat: "no-repeat",
+        backgroundSize: "cover"
+      },
+      children
+    }
+  );
+};
+
 // src/AuthSignIn.tsx
 var import_forms2 = require("@ttoss/forms");
 
@@ -214,7 +235,7 @@ var PASSWORD_MINIMUM_LENGTH = 8;
 
 // src/AuthSignIn.tsx
 var import_react_i18n2 = require("@ttoss/react-i18n");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var AuthSignIn = ({
   onSignIn,
   onSignUp,
@@ -256,7 +277,7 @@ var AuthSignIn = ({
   const onSubmitForm = (data) => {
     return onSignIn(data);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_forms2.Form, { ...formMethods, onSubmit: onSubmitForm, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_forms2.Form, { ...formMethods, onSubmit: onSubmitForm, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     AuthCard,
     {
       title: intl.formatMessage({
@@ -284,7 +305,7 @@ var AuthSignIn = ({
         }
       ],
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           import_forms2.FormFieldInput,
           {
             name: "email",
@@ -294,7 +315,7 @@ var AuthSignIn = ({
             })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           import_forms2.FormFieldInput,
           {
             name: "password",
@@ -312,7 +333,7 @@ var AuthSignIn = ({
 // src/AuthSignUp.tsx
 var import_forms3 = require("@ttoss/forms");
 var import_react_i18n3 = require("@ttoss/react-i18n");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var AuthSignUp = ({ onSignUp, onReturnToSignIn }) => {
   const { intl } = (0, import_react_i18n3.useI18n)();
   const schema = import_forms3.yup.object().shape({
@@ -349,7 +370,7 @@ var AuthSignUp = ({ onSignUp, onReturnToSignIn }) => {
   const onSubmitForm = (data) => {
     return onSignUp(data);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_forms3.Form, { ...formMethods, onSubmit: onSubmitForm, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_forms3.Form, { ...formMethods, onSubmit: onSubmitForm, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     AuthCard,
     {
       buttonLabel: intl.formatMessage({
@@ -370,7 +391,7 @@ var AuthSignUp = ({ onSignUp, onReturnToSignIn }) => {
         }
       ],
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           import_forms3.FormFieldInput,
           {
             name: "email",
@@ -380,7 +401,7 @@ var AuthSignUp = ({ onSignUp, onReturnToSignIn }) => {
             })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           import_forms3.FormFieldInput,
           {
             name: "password",
@@ -399,7 +420,7 @@ var AuthSignUp = ({ onSignUp, onReturnToSignIn }) => {
 var import_xstate = require("xstate");
 var import_react = require("@xstate/react");
 var import_react_notifications2 = require("@ttoss/react-notifications");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var authMachine = (0, import_xstate.createMachine)(
   {
     predictableActionArguments: true,
@@ -443,7 +464,7 @@ var authMachine = (0, import_xstate.createMachine)(
     }
   }
 );
-var AuthWithoutLogo = () => {
+var AuthLogic = () => {
   const { isAuthenticated } = useAuth();
   const [state, send] = (0, import_react.useMachine)(authMachine);
   const { setLoading } = (0, import_react_notifications2.useNotifications)();
@@ -503,10 +524,10 @@ var AuthWithoutLogo = () => {
     return null;
   }
   if (state.matches("signUp")) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AuthSignUp, { onSignUp, onReturnToSignIn });
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AuthSignUp, { onSignUp, onReturnToSignIn });
   }
   if (state.matches("signUpConfirm")) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       AuthConfirmSignUp,
       {
         onConfirmSignUp,
@@ -514,7 +535,7 @@ var AuthWithoutLogo = () => {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     AuthSignIn,
     {
       onSignIn,
@@ -525,40 +546,18 @@ var AuthWithoutLogo = () => {
     }
   );
 };
-var withLogo = (Component) => {
-  const WithLogo = ({ logo, ...componentProps }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LogoProvider, { logo, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Component, { ...componentProps }) });
-  };
-  WithLogo.displayName = "WithLogo";
-  return WithLogo;
-};
-var Auth2 = withLogo(AuthWithoutLogo);
-
-// src/AuthContainer.tsx
-var import_ui2 = require("@ttoss/ui");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var AuthContainer = ({ sx, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    import_ui2.Flex,
-    {
-      ...props,
-      sx: {
-        height: "100vh",
-        justifyContent: "center",
-        alignItems: "center",
-        margin: 0,
-        backgroundPosition: "center",
-        backgroundRepeat: "no-repeat",
-        backgroundSize: "cover",
-        ...sx
-      }
-    }
-  );
+var Auth2 = ({ logo, fullScreen = true }) => {
+  const withLogoNode = React3.useMemo(() => {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LogoProvider, { logo, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AuthLogic, {}) });
+  }, [logo]);
+  if (fullScreen) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AuthFullScreen, { children: withLogoNode });
+  }
+  return withLogoNode;
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Auth,
-  AuthContainer,
   AuthProvider,
   useAuth
 });

package/i18n/lang/en.json

@@ -71,4 +71,4 @@
     "defaultMessage": "Do you forgot your password?",
     "description": "Link to retrieve password."
   }
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/react-auth",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "ttoss authentication module for React apps.",
   "license": "UNLICENSED",
   "author": "ttoss",
@@ -21,7 +21,6 @@
   },
   "typings": "./dist/index.d.ts",
   "dependencies": {
-    "@ttoss/cloud-auth": "^0.2.0",
     "@ttoss/forms": "^0.11.4",
     "@xstate/react": "^3.0.1",
     "xstate": "^4.35.0"
@@ -34,9 +33,10 @@
     "react": ">=16.8.0"
   },
   "devDependencies": {
+    "@ttoss/cloud-auth": "^0.3.0",
     "@ttoss/config": "^1.25.0",
     "@ttoss/i18n-cli": "^0.2.0",
-    "@ttoss/react-i18n": "^1.17.2",
+    "@ttoss/react-i18n": "^1.18.0",
     "@ttoss/react-notifications": "^1.19.0",
     "@ttoss/test-utils": "^1.18.3",
     "@ttoss/ui": "^1.27.0",
@@ -49,5 +49,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "01759d9c247bed2fe52ca580e87c0b21544cac49"
+  "gitHead": "b697061d84f3b079619befbfb150e587f455dd1c"
 }

package/src/Auth.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Auth as AmplifyAuth } from 'aws-amplify';
 import { AuthConfirmSignUp } from './AuthConfirmSignUp';
+import { AuthFullScreen } from './AuthFullScreen';
 import { AuthSignIn } from './AuthSignIn';
 import { AuthSignUp } from './AuthSignUp';
 import { LogoContextProps, LogoProvider } from './AuthCard';
@@ -81,7 +82,7 @@ const authMachine = createMachine<AuthContext, AuthEvent, AuthState>(
   }
 );
 
-const AuthWithoutLogo = () => {
+const AuthLogic = () => {
   const { isAuthenticated } = useAuth();
 
   const [state, send] = useMachine(authMachine);
@@ -180,20 +181,22 @@ const AuthWithoutLogo = () => {
   );
 };
 
-const withLogo = <T extends Record<string, unknown>>(
-  Component: React.ComponentType<T>
-) => {
-  const WithLogo = ({ logo, ...componentProps }: T & LogoContextProps) => {
+type AuthProps = LogoContextProps & {
+  fullScreen?: boolean;
+};
+
+export const Auth = ({ logo, fullScreen = true }: AuthProps) => {
+  const withLogoNode = React.useMemo(() => {
     return (
       <LogoProvider logo={logo}>
-        <Component {...(componentProps as T)} />
+        <AuthLogic />
       </LogoProvider>
     );
-  };
+  }, [logo]);
 
-  WithLogo.displayName = 'WithLogo';
+  if (fullScreen) {
+    return <AuthFullScreen>{withLogoNode}</AuthFullScreen>;
+  }
 
-  return WithLogo;
+  return withLogoNode;
 };
-
-export const Auth = withLogo(AuthWithoutLogo);

package/src/{AuthContainer.tsx → AuthFullScreen.tsx}

@@ -1,21 +1,25 @@
-import { Flex, FlexProps } from '@ttoss/ui';
+import { Flex } from '@ttoss/ui';
 
-export type AuthContainerProps = FlexProps & { backgroundImageUrl?: string };
+export type AuthFullScreenProps = {
+  backgroundImageUrl?: string;
+  children: React.ReactNode;
+};
 
-export const AuthContainer = ({ sx, ...props }: AuthContainerProps) => {
+export const AuthFullScreen = ({ children }: AuthFullScreenProps) => {
   return (
     <Flex
-      {...props}
       sx={{
         height: '100vh',
+        width: '100vw',
         justifyContent: 'center',
         alignItems: 'center',
         margin: 0,
         backgroundPosition: 'center',
         backgroundRepeat: 'no-repeat',
         backgroundSize: 'cover',
-        ...sx,
       }}
-    />
+    >
+      {children}
+    </Flex>
   );
 };

package/src/index.ts

@@ -1,4 +1,3 @@
 export { default as AuthProvider, useAuth } from './AuthProvider';
 export { Auth } from './Auth';
-export { AuthContainer } from './AuthContainer';
 export * from './types';