@skroz/frontend 0.0.6 → 0.0.7

package/src/auth/LoginForm.tsx

@@ -4,7 +4,7 @@ import { LockOutlined, UserOutlined } from '@ant-design/icons';
 import { useTranslation } from 'next-i18next';
 import { useExistingForm } from '@os-design/form';
 import FormItem from '../ui/FormItem';
-import { RegisterInput } from '../graphql/LoginMutation.graphql';
+import { AuthInput } from '../graphql/LoginMutation.graphql';
 import FormError from '../ui/FormError';
 
 interface LoginFormProps {
@@ -12,8 +12,8 @@ interface LoginFormProps {
 }
 
 const LoginForm: React.FC<LoginFormProps> = ({ onPressEnter }) => {
-  const { t } = useTranslation();
-  const { Field } = useExistingForm<RegisterInput>();
+  const { t } = useTranslation('common');
+  const { Field } = useExistingForm<AuthInput>();
 
   return (
     <Form size='large'>
@@ -62,7 +62,7 @@ const LoginForm: React.FC<LoginFormProps> = ({ onPressEnter }) => {
               onKeyDown={(e: React.KeyboardEvent) => {
                 if (e.key === 'Enter') onPressEnter();
               }}
-              placeholder={t('common:auth.passwordPlaceholder')}
+              placeholder={t('auth.passwordPlaceholder')}
             />
           </FormItem>
         )}

package/src/auth/LogoutButton.tsx

@@ -0,0 +1,53 @@
+import React, { useCallback } from 'react';
+import { Button, message } from 'antd';
+import { useRouter } from 'next/router';
+import { useMutation } from 'react-relay';
+import { LogoutOutlined } from '@ant-design/icons';
+import getError from '../utils/getError';
+import LogoutButtonMutationNode, {
+  LogoutButtonMutation,
+} from '../graphql/LogoutButtonMutation.graphql';
+
+/*
+  SKROZ_PROTECTION NOTE:
+  The Relay compiler has generated artifacts for this mutation.
+  Explicit import of LogoutButtonMutationNode is used.
+  
+  Mutation definition (for reference/regeneration):
+  graphql`
+        mutation LogoutButtonMutation {
+          logout {
+            ok
+          }
+        }
+      `
+*/
+
+const LogoutButton: React.FC = () => {
+  const router = useRouter();
+
+  const [commit] = useMutation<LogoutButtonMutation>(LogoutButtonMutationNode);
+
+  const logoutHandler = useCallback(() => {
+    commit({
+      variables: {},
+      onError: (error) => {
+        message.error(getError(error).message);
+      },
+      onCompleted: () => {
+        router.reload();
+      },
+    });
+  }, [commit, router]);
+
+  return (
+    <Button
+      shape="circle"
+      onClick={logoutHandler}
+      icon={<LogoutOutlined />}
+      type="link"
+    />
+  );
+};
+
+export default LogoutButton;

package/src/auth/RecoverPassword.tsx

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
 import { FormProvider, useForm } from '@os-design/form';
-import { graphql, useMutation } from 'react-relay';
+import { useMutation } from 'react-relay';
 import Link from 'next/link';
 import useInterval from '@os-design/use-interval';
 import handleFormErrors from '../utils/handleFormErrors';
@@ -12,6 +12,7 @@ import {
   RecoverPasswordInput,
   RecoverPasswordMutation,
 } from '../graphql/RecoverPasswordMutation.graphql';
+import RecoverPasswordMutationNode from '../graphql/RecoverPasswordMutation.graphql';
 import H from '../ui/H';
 import Panel from '../ui/Panel';
 import FormItem from '../ui/FormItem';
@@ -21,7 +22,7 @@ import { getLimitExpiresIn, setLimitExpiresAt } from '../utils/limitExpiresAt';
 
 const RecoverPassword = () => {
   const router = useRouter();
-  const { t } = useTranslation(['common']);
+  const { t } = useTranslation('common');
   const config = useFrontendConfig();
 
   let { email } = router.query;
@@ -32,13 +33,22 @@ const RecoverPassword = () => {
     password: '',
   });
 
-  const [commit, loading] = useMutation<RecoverPasswordMutation>(graphql`
-    mutation RecoverPasswordMutation($input: RecoverPasswordInput!) {
-      recoverPassword(input: $input) {
-        ok
-      }
-    }
-  `);
+  /*
+    SKROZ_PROTECTION NOTE:
+    The Relay compiler has generated artifacts for this mutation.
+    Explicit import of RecoverPasswordMutationNode is used.
+    
+    Mutation definition (for reference/regeneration):
+  graphql`
+          mutation RecoverPasswordMutation($input: RecoverPasswordInput!) {
+            recoverPassword(input: $input) {
+              ok
+            }
+          }
+        `
+*/
+
+  const [commit, loading] = useMutation<RecoverPasswordMutation>(RecoverPasswordMutationNode);
 
   const recoverPasswordHandler = useCallback(() => {
     commit({
@@ -49,7 +59,7 @@ const RecoverPassword = () => {
       },
       onError: (error) => handleFormErrors(form, error),
       onCompleted: () => {
-        message.success(t('common:auth.recoverySuccess'));
+        message.success(t('auth.recoverySuccess'));
         const profilePath = config.defaultPath
           ? `${config.defaultPath === '/' ? '' : config.defaultPath}/profile`
           : '/profile';
@@ -72,21 +82,21 @@ const RecoverPassword = () => {
 
   const getResendButtonTitle = () => {
     if (resendIsDenied) {
-      return `${t('common:auth.openEmailResendDenied')} ${Math.ceil(
+      return `${t('auth.openEmailResendDenied')} ${Math.ceil(
         limitExpiresIn / 1000
-      )} ${t('common:sec')}`;
+      )} ${t('sec')}`;
     }
-    return t('common:auth.openEmailResend');
+    return t('auth.openEmailResend');
   };
 
   return (
     <div className='recovery'>
-      <div className='recovery-header'>{t('common:auth.setNewPassword')}</div>
+      <div className='recovery-header'>{t('auth.setNewPassword')}</div>
 
       {email.length > 0 ? (
         <>
           <div style={{ color: 'red', marginBottom: 15 }}>
-            {t('common:auth.findCodeOnEmail')}
+            {t('auth.findCodeOnEmail')}
           </div>
           <FormProvider form={form}>
             <Form layout='vertical' size='large'>
@@ -101,7 +111,7 @@ const RecoverPassword = () => {
                   { error }: { error?: string }
                 ) => (
                   <FormItem
-                    label={t('common:auth.setNewCodeLabel')}
+                    label={t('auth.setNewCodeLabel')}
                     error={error}
                     style={{ marginBottom: 0 }}
                   >
@@ -126,8 +136,8 @@ const RecoverPassword = () => {
 
                     // Отображаем сообщение
                     if (res.resendLink.ok)
-                      message.success(t('common:auth.openEmailResendOk'));
-                    else message.error(t('common:auth.openEmailResendError'));
+                      message.success(t('auth.openEmailResendOk'));
+                    else message.error(t('auth.openEmailResendError'));
                   }}
                 >
                   {getResendButtonTitle()}
@@ -145,7 +155,7 @@ const RecoverPassword = () => {
                     { error }: { error?: string }
                   ) => (
                     <FormItem
-                      label={t('common:auth.setNewPassword')}
+                      label={t('auth.setNewPassword')}
                       error={error}
                     >
                       <Input.Password
@@ -153,7 +163,7 @@ const RecoverPassword = () => {
                         onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                           onChange(e.target.value)
                         }
-                        placeholder={t('common:auth.newPassword')}
+                        placeholder={t('auth.newPassword')}
                       />
                     </FormItem>
                   )}
@@ -163,7 +173,7 @@ const RecoverPassword = () => {
                   onClick={recoverPasswordHandler}
                   type='primary'
                 >
-                  {t('common:auth.saveNewPassword')}
+                  {t('auth.saveNewPassword')}
                 </Button>
               </Panel>
             </Form>
@@ -173,15 +183,15 @@ const RecoverPassword = () => {
         <>
           <H
             type='h2'
-            subHeader={t('common:auth.wrongParamsSubtitle')}
+            subHeader={t('auth.wrongParamsSubtitle')}
             textAlign='center'
           >
-            {t('common:auth.wrongParamsTitle')}
+            {t('auth.wrongParamsTitle')}
           </H>
           <div style={{ textAlign: 'center' }}>
             <Link href={config.forgotPasswordPath || '/forgot'}>
               <Button type='primary' shape='round' size='large'>
-                {t('common:auth.goBack')}
+                {t('auth.goBack')}
               </Button>
             </Link>
           </div>

package/src/auth/Register.tsx

@@ -10,8 +10,8 @@ import AuthFooterLinks from './AuthFooterLinks';
 import H from '../ui/H';
 import { useFrontendConfig } from '../utils/FrontendContext';
 import RegisterMutationNode, {
-  RegisterInput,
   RegisterMutation,
+  AuthInput,
 } from '../graphql/RegisterMutation.graphql';
 import LoginForm from './LoginForm';
 import FormItem from '../ui/FormItem';
@@ -27,11 +27,27 @@ const Register: React.FC<RegisterProps> = ({
   isModal,
   onForgotClick,
 }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('common');
   const router = useRouter();
   const config = useFrontendConfig();
 
-  const { form, Field } = useExistingForm<RegisterInput>();
+  const { form, Field } = useExistingForm<AuthInput>();
+
+  /*
+    SKROZ_PROTECTION NOTE:
+    The Relay compiler has generated artifacts for this mutation.
+    Explicit import of RegisterMutationNode is used.
+    
+    Mutation definition (for reference/regeneration):
+  graphql`
+          mutation RegisterMutation($input: AuthInput!) {
+            register(input: $input) {
+              id
+              email
+            }
+          }
+        `
+*/
 
   const [commit, loading] = useMutation<RegisterMutation>(RegisterMutationNode);
 
@@ -46,30 +62,30 @@ const Register: React.FC<RegisterProps> = ({
       onCompleted: () => {
         onFinish();
         router.push(config.defaultPath || '/');
-        message.success(t('common:auth.successRegister'));
+        message.success(t('auth.successRegister'));
       },
     });
   }, [commit, form, onFinish, router, t, config.defaultPath]);
 
   const forgotButton = (
     <Button type='link' onClick={onForgotClick}>
-      {t('common:auth.forgot')}
+      {t('auth.forgot')}
     </Button>
   );
   const loginButton = (
     <Button type='link' shape='round'>
-      {t('common:buttons.login')}
+      {t('buttons.login')}
     </Button>
   );
 
   return (
     <div className='auth no-text-selection'>
       <H type='h1' textAlign='center'>
-        {t('common:auth.registerTitle')}
+        {t('auth.registerTitle')}
       </H>
       {!isModal && (
         <div className='auth-subtitle'>
-          {t('common:auth.registerSubtitle')}{' '}
+          {t('auth.registerSubtitle')}{' '}
           <Link href={config.loginPath || '/login'} passHref>
             {loginButton}
           </Link>
@@ -98,9 +114,9 @@ const Register: React.FC<RegisterProps> = ({
                 checked={value || false}
                 onChange={(e: any) => onChange(e.target.checked)}
               >
-                {t('common:auth.acceptUserAgreement')}{' '}
+                {t('auth.acceptUserAgreement')}{' '}
                 <Link href='/docs/user-agreement'>
-                  {t('common:links.userAgreement')}
+                  {t('links.userAgreement')}
                 </Link>
               </Checkbox>
             </FormItem>
@@ -125,9 +141,9 @@ const Register: React.FC<RegisterProps> = ({
                 onChange={(e: any) => onChange(e.target.checked)}
                 style={{ fontSize: '16px' }}
               >
-                {t('common:auth.acceptPrivacyPolicy')}{' '}
+                {t('auth.acceptPrivacyPolicy')}{' '}
                 <Link href='/docs/privacy-policy'>
-                  {t('common:links.privacyPolicy')}
+                  {t('links.privacyPolicy')}
                 </Link>
               </Checkbox>
             </FormItem>
@@ -143,7 +159,7 @@ const Register: React.FC<RegisterProps> = ({
           loading={loading}
           onClick={registerHandler}
         >
-          {t('common:buttons.register')}
+          {t('buttons.register')}
         </Button>
       </div>
 

package/src/auth/ResendLinkButton.tsx

@@ -1,40 +1,49 @@
 import React, { useCallback } from 'react';
-import { graphql, useMutation } from 'react-relay';
+import { useMutation } from 'react-relay';
 import { Button, message } from 'antd';
 import { useTranslation } from 'next-i18next';
-import {
+import ResendLinkButtonMutationNode, {
   ResendLinkButtonMutation,
 } from '../graphql/ResendLinkButtonMutation.graphql';
 
 interface ResendLinkButtonProps {
   email: string;
-  children: React.ReactNode;
+  onCompleted?: (res: any) => void;
+  onError?: (error: any) => void;
   disabled?: boolean;
-  onCompleted: (res: any) => void;
-  onError: (res: any) => void;
+  children: React.ReactNode;
 }
 
 const ResendLinkButton: React.FC<ResendLinkButtonProps> = ({
   email,
-  children,
-  disabled,
   onCompleted,
   onError,
+  disabled,
+  children,
 }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('common');
 
-  const [commit, loading] = useMutation<ResendLinkButtonMutation>(graphql`
-    mutation ResendLinkButtonMutation($input: SendTokenInput!) {
-      sendToken(input: $input) {
-        codeIsSent
-        limitExpiresAt
-      }
-    }
-  `);
+  /*
+    SKROZ_PROTECTION NOTE:
+    The Relay compiler has generated artifacts for this mutation.
+    Explicit import of ResendLinkButtonMutationNode is used.
+    
+    Mutation definition (for reference/regeneration):
+  graphql`
+          mutation ResendLinkButtonMutation($input: SendTokenInput!) {
+            sendToken(input: $input) {
+              codeIsSent
+              limitExpiresAt
+            }
+          }
+        `
+*/
+
+  const [commit, loading] = useMutation<ResendLinkButtonMutation>(ResendLinkButtonMutationNode);
 
   const resendLinkHandler = useCallback(() => {
     if (!email) {
-      message.error(t('common:error.emailNotProvided'));
+      message.error(t('error.emailNotProvided'));
       return;
     }
     commit({
@@ -45,12 +54,14 @@ const ResendLinkButton: React.FC<ResendLinkButtonProps> = ({
       },
       onError,
       onCompleted: (res: any) => {
-        onCompleted({
-          resendLink: {
-            ok: res.sendToken.codeIsSent,
-            limitExpiresAt: res.sendToken.limitExpiresAt,
-          },
-        });
+        if (onCompleted) {
+          onCompleted({
+            resendLink: {
+              ok: res.sendToken.codeIsSent,
+              limitExpiresAt: res.sendToken.limitExpiresAt,
+            },
+          });
+        }
       },
     });
   }, [commit, email, onCompleted, onError, t]);

package/src/auth/__tests__/Login.test.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { useRouter } from 'next/router';
+import { useMutation } from 'react-relay';
+import { useExistingForm } from '@os-design/form';
+import Login from '../Login';
+
+// Mocking dependencies with verified relative paths
+jest.mock('next/router', () => ({
+    useRouter: jest.fn(),
+}));
+
+jest.mock('next/link', () => ({
+    __esModule: true,
+    default: ({ children, href }: any) => <a href={href}>{children}</a>,
+}));
+
+jest.mock('next-i18next', () => ({
+    useTranslation: () => ({
+        t: (key: string) => key,
+    }),
+}));
+
+jest.mock('antd', () => ({
+    Button: ({ children, onClick }: any) => <button onClick={onClick}>{children}</button>,
+    message: {
+        success: jest.fn(),
+        error: jest.fn(),
+    },
+}));
+
+jest.mock('react-relay', () => ({
+    useMutation: jest.fn(),
+    graphql: jest.fn(),
+}));
+
+jest.mock('../../graphql/LoginMutation.graphql', () => ({
+    __esModule: true,
+    default: {},
+}));
+
+jest.mock('@os-design/form', () => ({
+    useExistingForm: jest.fn(),
+}));
+
+jest.mock('../../ui/H', () => ({ children }: { children: React.ReactNode }) => <h1>{children}</h1>);
+jest.mock('../LoginForm', () => () => <div data-testid="login-form" />);
+jest.mock('../AuthFooterLinks', () => () => <div data-testid="auth-footer-links" />);
+jest.mock('../../utils/FrontendContext', () => ({
+    useFrontendConfig: () => ({
+        loginPath: '/login',
+        registerPath: '/register',
+        forgotPasswordPath: '/forgot',
+        defaultPath: '/',
+    }),
+}));
+jest.mock('../../utils/handleFormErrors', () => jest.fn());
+
+describe('Login Component', () => {
+    const mockOnFinish = jest.fn();
+    const mockOnForgotClick = jest.fn();
+    const mockCommit = jest.fn();
+
+    beforeEach(() => {
+        (useRouter as jest.Mock).mockReturnValue({
+            reload: jest.fn(),
+        });
+        (useMutation as jest.Mock).mockReturnValue([mockCommit, false]);
+        (useExistingForm as jest.Mock).mockReturnValue({
+            form: {
+                values: {
+                    getAll: jest.fn().mockReturnValue({}),
+                },
+            },
+        });
+    });
+
+    it('should render the login title', () => {
+        const { getByText } = render(
+            <Login
+                onFinish={mockOnFinish}
+                onForgotClick={mockOnForgotClick}
+                isModal={false}
+            />
+        );
+        expect(getByText('common:auth.loginTitle')).toBeDefined();
+    });
+
+    it('should render the login form', () => {
+        const { getByTestId } = render(
+            <Login
+                onFinish={mockOnFinish}
+                onForgotClick={mockOnForgotClick}
+                isModal={false}
+            />
+        );
+        expect(getByTestId('login-form')).toBeDefined();
+    });
+});

package/src/auth/index.ts

@@ -6,3 +6,6 @@ export { default as RecoverPassword } from './RecoverPassword';
 export { default as AuthFooterLinks } from './AuthFooterLinks';
 export { default as LoginForm } from './LoginForm';
 export { default as ResendLinkButton } from './ResendLinkButton';
+export { default as LogoutButton } from './LogoutButton';
+export { default as AuthModal } from './AuthModal';
+export { default as AuthButtons } from './AuthButtons';