@ttoss/react-auth 2.0.9 → 2.1.1

package/src/AuthSignIn.tsx

@@ -1,159 +0,0 @@
-import * as React from 'react';
-import { AuthCard } from './AuthCard';
-import { Button, Flex, Link, Text } from '@ttoss/ui';
-import {
-  Form,
-  FormFieldInput,
-  FormFieldPassword,
-  useForm,
-  yup,
-  yupResolver,
-} from '@ttoss/forms';
-import { NotificationsBox, useNotifications } from '@ttoss/react-notifications';
-import { PASSWORD_MINIMUM_LENGTH } from '@ttoss/cloud-auth';
-import { useI18n } from '@ttoss/react-i18n';
-import type { OnSignIn, OnSignInInput } from './types';
-
-export type AuthSignInProps = {
-  onSignIn: OnSignIn;
-  onSignUp: () => void;
-  onForgotPassword: () => void;
-  defaultValues?: Partial<OnSignInInput>;
-  urlLogo?: string;
-};
-
-export const AuthSignIn = ({
-  onSignIn,
-  onSignUp,
-  defaultValues,
-  onForgotPassword,
-}: AuthSignInProps) => {
-  const { intl } = useI18n();
-  const { setNotifications } = useNotifications();
-
-  React.useEffect(() => {
-    setNotifications(undefined);
-  }, [setNotifications]);
-
-  const schema = yup.object().shape({
-    email: yup
-      .string()
-      .required(
-        intl.formatMessage({
-          description: 'Email is a required field.',
-          defaultMessage: 'Enter your email address',
-        })
-      )
-      .email(
-        intl.formatMessage({
-          description: 'Invalid email.',
-          defaultMessage: 'Please, insert a valid e-mail',
-        })
-      ),
-    password: yup
-      .string()
-      .required(
-        intl.formatMessage({
-          description: 'Password is required.',
-          defaultMessage: 'Password field is required',
-        })
-      )
-      .min(
-        PASSWORD_MINIMUM_LENGTH,
-        intl.formatMessage(
-          {
-            description: 'Password must be at least {value} characters long.',
-            defaultMessage: 'Password requires {value} characters',
-          },
-          { value: PASSWORD_MINIMUM_LENGTH }
-        )
-      )
-      .trim(),
-    // remember: yup.boolean(),
-  });
-
-  const formMethods = useForm<OnSignInInput>({
-    defaultValues,
-    mode: 'onBlur',
-    resolver: yupResolver(schema),
-  });
-
-  const onSubmitForm = (data: OnSignInInput) => {
-    return onSignIn(data);
-  };
-
-  return (
-    <Form
-      sx={{ maxWidth: '390px', width: '100%' }}
-      {...formMethods}
-      onSubmit={onSubmitForm}
-    >
-      <AuthCard
-        title={intl.formatMessage({
-          description: 'Sign in title.',
-          defaultMessage: 'Log in',
-        })}
-        buttonLabel={intl.formatMessage({
-          description: 'Button label.',
-          defaultMessage: 'Log in',
-        })}
-        isValidForm={formMethods.formState.isValid}
-        extraButton={
-          <Button
-            type="button"
-            variant="secondary"
-            sx={{ textAlign: 'center', display: 'initial' }}
-            onClick={onSignUp}
-            aria-label="sign-up"
-          >
-            {intl.formatMessage({
-              description: 'Sign up',
-              defaultMessage: 'Sign up',
-            })}
-          </Button>
-        }
-      >
-        <Flex sx={{ flexDirection: 'column', gap: 'xl' }}>
-          <FormFieldInput
-            name="email"
-            label={intl.formatMessage({
-              description: 'Email label.',
-              defaultMessage: 'Email',
-            })}
-          />
-          <FormFieldPassword
-            name="password"
-            label={intl.formatMessage({
-              description: 'Password label.',
-              defaultMessage: 'Password',
-            })}
-          />
-        </Flex>
-
-        <Flex sx={{ justifyContent: 'space-between', marginTop: 'lg' }}>
-          {/* TODO: temporally commented */}
-          {/* <FormFieldCheckbox
-            name="remember"
-            label={intl.formatMessage({
-              description: 'Remember',
-              defaultMessage: 'Remember',
-            })}
-          /> */}
-
-          <Text
-            sx={{ marginLeft: 'auto', cursor: 'pointer' }}
-            as={Link}
-            onClick={onForgotPassword}
-          >
-            {intl.formatMessage({
-              description: 'Forgot password?',
-              defaultMessage: 'Forgot password?',
-            })}
-          </Text>
-        </Flex>
-
-        <NotificationsBox />
-      </AuthCard>
-    </Form>
-  );
-};

package/src/AuthSignUp.tsx

@@ -1,143 +0,0 @@
-import * as React from 'react';
-import { AuthCard } from './AuthCard';
-import { Flex, Link, Text } from '@ttoss/ui';
-import {
-  Form,
-  FormFieldInput,
-  FormFieldPassword,
-  useForm,
-  yup,
-  yupResolver,
-} from '@ttoss/forms';
-import { NotificationsBox, useNotifications } from '@ttoss/react-notifications';
-import { PASSWORD_MINIMUM_LENGTH } from '@ttoss/cloud-auth';
-import { useI18n } from '@ttoss/react-i18n';
-import type { OnSignUp, OnSignUpInput } from './types';
-
-export type AuthSignUpProps = {
-  onSignUp: OnSignUp;
-  onReturnToSignIn: () => void;
-};
-
-export const AuthSignUp = ({ onSignUp, onReturnToSignIn }: AuthSignUpProps) => {
-  const { intl } = useI18n();
-  const { setNotifications } = useNotifications();
-
-  React.useEffect(() => {
-    setNotifications(undefined);
-  }, [setNotifications]);
-
-  const schema = yup.object().shape({
-    email: yup
-      .string()
-      .required(
-        intl.formatMessage({
-          description: 'Email is a required field.',
-          defaultMessage: 'Enter your email address',
-        })
-      )
-      .email(
-        intl.formatMessage({
-          description: 'Invalid email.',
-          defaultMessage: 'Invalid email',
-        })
-      ),
-    password: yup
-      .string()
-      .required(
-        intl.formatMessage({
-          description: 'Password is required.',
-          defaultMessage: 'Password field is required',
-        })
-      )
-      .min(
-        PASSWORD_MINIMUM_LENGTH,
-        intl.formatMessage(
-          {
-            description: 'Password must be at least {value} characters long.',
-            defaultMessage: 'Password requires {value} characters',
-          },
-          { value: PASSWORD_MINIMUM_LENGTH }
-        )
-      )
-      .trim(),
-    confirmPassword: yup
-      .string()
-      .required(
-        intl.formatMessage({
-          description: 'Confirm Password is required.',
-          defaultMessage: 'Confirm password field is required',
-        })
-      )
-      .oneOf(
-        [yup.ref('password')],
-        intl.formatMessage({
-          description: 'Passwords are not the same',
-          defaultMessage: 'Passwords are not the same',
-        })
-      ),
-  });
-
-  const formMethods = useForm<OnSignUpInput>({
-    mode: 'all',
-    resolver: yupResolver(schema),
-  });
-
-  const onSubmitForm = (data: OnSignUpInput) => {
-    return onSignUp(data);
-  };
-
-  return (
-    <Form
-      sx={{ maxWidth: '390px', width: '100%' }}
-      {...formMethods}
-      onSubmit={onSubmitForm}
-    >
-      <AuthCard
-        buttonLabel={intl.formatMessage({
-          description: 'Create account.',
-          defaultMessage: 'Sign up',
-        })}
-        title={intl.formatMessage({
-          description: 'Title on sign up.',
-          defaultMessage: 'Sign up',
-        })}
-        isValidForm={formMethods.formState.isValid}
-        extraButton={
-          <Text sx={{ cursor: 'pointer' }} onClick={onReturnToSignIn} as={Link}>
-            {intl.formatMessage({
-              description: 'Link to sign in on sign up.',
-              defaultMessage: "I'm already registered",
-            })}
-          </Text>
-        }
-      >
-        <Flex sx={{ flexDirection: 'column', gap: 'xl' }}>
-          <FormFieldInput
-            name="email"
-            label={intl.formatMessage({
-              description: 'Email label.',
-              defaultMessage: 'Email',
-            })}
-          />
-          <FormFieldPassword
-            name="password"
-            label={intl.formatMessage({
-              description: 'Password label.',
-              defaultMessage: 'Password',
-            })}
-          />
-          <FormFieldPassword
-            name="confirmPassword"
-            label={intl.formatMessage({
-              description: 'Confirm Password label.',
-              defaultMessage: 'Confirm password',
-            })}
-          />
-        </Flex>
-
-        <NotificationsBox />
-      </AuthCard>
-    </Form>
-  );
-};

package/src/index.ts

@@ -1,3 +0,0 @@
-export { AuthProvider, useAuth } from './AuthProvider';
-export { Auth } from './Auth';
-export * from './types';

package/src/types.ts

@@ -1,24 +0,0 @@
-export type OnSignInInput = {
-  email: string;
-  password: string;
-};
-
-export type OnSignIn = (input: OnSignInInput) => void;
-
-export type OnSignUpInput = {
-  email: string;
-  password: string;
-  confirmPassword: string;
-};
-
-export type OnSignUp = (input: OnSignUpInput) => void;
-
-export type OnConfirmSignUp = (input: { email: string; code: string }) => void;
-
-export type OnForgotPassword = (input: { email: string }) => void;
-
-export type OnForgotPasswordResetPassword = (input: {
-  email: string;
-  code: string;
-  newPassword: string;
-}) => void;