@skroz/frontend 0.0.2

package/src/auth/Forgot.tsx

@@ -0,0 +1,122 @@
+import React, { useCallback } from 'react';
+import { Button, Form, Input, message } from 'antd';
+import { useRouter } from 'next/router';
+import { UserOutlined } from '@ant-design/icons';
+import { useTranslation } from 'next-i18next';
+import Link from 'next/link';
+import { useExistingForm } from '@os-design/form';
+import { graphql, useMutation } from 'react-relay';
+import { setLimitExpiresAt } from '../utils/limitExpiresAt';
+import handleFormErrors from '../utils/handleFormErrors';
+import H from '../ui/H';
+import { useFrontendConfig } from '../utils/FrontendContext';
+import { RegisterInput } from '../graphql/RegisterMutation.graphql';
+import {
+    ForgotPasswordMutation,
+    ForgotPasswordMutation$data,
+} from '../graphql/ForgotPasswordMutation.graphql';
+import FormItem from '../ui/FormItem';
+
+interface ForgotProps {
+    onFinish: () => void;
+    onLoginClick?: () => void;
+}
+
+const Forgot: React.FC<ForgotProps> = ({ onFinish, onLoginClick }) => {
+    const { t } = useTranslation();
+    const router = useRouter();
+    const config = useFrontendConfig();
+
+    const { form, useValue, Field } = useExistingForm<RegisterInput>();
+    const email = useValue('email');
+
+    const [commit, loading] = useMutation<ForgotPasswordMutation>(
+        graphql`
+      mutation ForgotPasswordMutation($input: ForgotPasswordInput!) {
+        forgotPassword(input: $input) {
+          recoveryLinkIsSent
+          limitExpiresAt
+        }
+      }
+    `
+    );
+
+    const forgotPasswordHandler = useCallback(() => {
+        commit({
+            variables: {
+                input: {
+                    email,
+                },
+            },
+            onError: (error) => handleFormErrors(form, error),
+            onCompleted: (res: ForgotPasswordMutation$data) => {
+                setLimitExpiresAt(res.forgotPassword.limitExpiresAt);
+                if (!res.forgotPassword.recoveryLinkIsSent)
+                    message.error(t('common:auth.forgotSendError'));
+                router.push(`/recovery?email=${email}`);
+                onFinish();
+            },
+        });
+    }, [commit, email, form, onFinish, router, t]);
+
+    const loginButton = (
+        <Button type='link' onClick={onLoginClick} shape='round'>
+            {t('common:buttons.login')}
+        </Button>
+    );
+
+    return (
+        <div className='auth no-text-selection'>
+            <H type='h1' textAlign='center'>
+                {t('common:auth.forgotTitle')}
+            </H>
+            <div className='auth-subtitle'>
+                {t('common:auth.forgotSubtitle')}{' '}
+                {onLoginClick ? (
+                    loginButton
+                ) : (
+                    <Link href={config.loginPath || '/login'} passHref>
+                        {loginButton}
+                    </Link>
+                )}
+            </div>
+
+            <Form size='large'>
+                <Field
+                    name='email'
+                    render={({ value, onChange }: { value: string, onChange: (val: string) => void }, { error }: { error?: string }) => (
+                        <FormItem error={error}>
+                            <Input
+                                value={value}
+                                prefix={<UserOutlined />}
+                                onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
+                                placeholder='Email'
+                                size='large'
+                            />
+                        </FormItem>
+                    )}
+                />
+            </Form>
+
+            <div className='auth-button'>
+                <Button
+                    type='primary'
+                    shape='round'
+                    size='large'
+                    loading={loading}
+                    onClick={forgotPasswordHandler}
+                >
+                    {t('common:auth.forgotSendInstructions')}
+                </Button>
+            </div>
+
+            <div className='auth-footer'>
+                <div className='auth-footer-issues'>
+                    {t('common:auth.forgotIssues')}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Forgot;

package/src/auth/Login.tsx

@@ -0,0 +1,115 @@
+import React, { useCallback } from 'react';
+import { Button, message } from 'antd';
+import { useRouter } from 'next/router';
+import { useTranslation } from 'next-i18next';
+import Link from 'next/link';
+import { graphql, useMutation } from 'react-relay';
+import { useExistingForm } from '@os-design/form';
+import {
+  RegisterInput,
+  LoginMutation,
+  LoginMutation$data,
+} from '../graphql/LoginMutation.graphql';
+import handleFormErrors from '../utils/handleFormErrors';
+import AuthFooterLinks from './AuthFooterLinks';
+import H from '../ui/H';
+import { useFrontendConfig } from '../utils/FrontendContext';
+import LoginForm from './LoginForm';
+
+interface LoginProps {
+  onFinish: () => void;
+  isModal: boolean;
+  onForgotClick?: () => void;
+}
+
+const Login: React.FC<LoginProps> = ({ onFinish, onForgotClick, isModal }) => {
+  const { t } = useTranslation();
+  const router = useRouter();
+  const { form } = useExistingForm<RegisterInput>();
+  const config = useFrontendConfig();
+
+  const [commit, loading] = useMutation<LoginMutation>(
+    graphql`
+      mutation LoginMutation($input: RegisterInput!) {
+        login(input: $input) {
+          ok
+        }
+      }
+    `
+  );
+
+  const loginHandler = useCallback(() => {
+    commit({
+      variables: {
+        input: {
+          ...form.values.getAll(),
+        },
+      },
+      onError: (error) => {
+        handleFormErrors(form, error);
+      },
+      onCompleted: (res: LoginMutation$data) => {
+        if (!res.login.ok) {
+          message.error(t('common:auth.loginError'));
+          return;
+        }
+        onFinish();
+        message.success(t('common:auth.loginSuccess'));
+        router.reload();
+      },
+    });
+  }, [commit, form, router, onFinish, t]);
+
+  const forgotButton = (
+    <Button type='link' onClick={onForgotClick}>
+      {t('common:auth.forgot')}
+    </Button>
+  );
+  const registerButton = (
+    <Button type='link' shape='round' className='register-link'>
+      {t('common:buttons.register')}
+    </Button>
+  );
+
+  return (
+    <div className='auth no-text-selection'>
+      <H type='h1' textAlign='center'>
+        {t('common:auth.loginTitle')}
+      </H>
+      {!isModal && (
+        <div className='auth-subtitle'>
+          {t('common:auth.loginSubtitle')}{' '}
+          <Link href={config.registerPath || '/register'} passHref>
+            {registerButton}
+          </Link>
+        </div>
+      )}
+      <LoginForm onPressEnter={loginHandler} />
+      <div className='auth-button'>
+        <Button
+          type='primary'
+          shape='round'
+          size='large'
+          loading={loading}
+          onClick={loginHandler}
+        >
+          {t('common:buttons.login')}
+        </Button>
+      </div>
+      <div className='auth-footer'>
+        <div>
+          {onForgotClick ? (
+            forgotButton
+          ) : (
+            <Link href={config.forgotPasswordPath || '/forgot'} passHref>
+              {forgotButton}
+            </Link>
+          )}
+        </div>
+        <AuthFooterLinks />
+      </div>
+    </div>
+  );
+};
+
+export default Login;

package/src/auth/LoginForm.tsx

@@ -0,0 +1,74 @@
+import { Form, Input } from 'antd';
+import React from 'react';
+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 FormError from '../ui/FormError';
+
+interface LoginFormProps {
+  onPressEnter: () => void;
+}
+
+const LoginForm: React.FC<LoginFormProps> = ({ onPressEnter }) => {
+  const { t } = useTranslation();
+  const { Field } = useExistingForm<RegisterInput>();
+
+  return (
+    <Form size='large'>
+      <FormError />
+      <Field
+        name='email'
+        render={(
+          {
+            value,
+            onChange,
+          }: { value: string; onChange: (val: string) => void },
+          { error }: { error?: string }
+        ) => (
+          <FormItem error={error}>
+            <Input
+              prefix={<UserOutlined />}
+              value={value}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                onChange(e.target.value)
+              }
+              onKeyDown={(e: React.KeyboardEvent) => {
+                if (e.key === 'Enter') onPressEnter();
+              }}
+              placeholder='Email'
+            />
+          </FormItem>
+        )}
+      />
+
+      <Field
+        name='password'
+        render={(
+          {
+            value,
+            onChange,
+          }: { value: string; onChange: (val: string) => void },
+          { error }: { error?: string }
+        ) => (
+          <FormItem error={error}>
+            <Input.Password
+              prefix={<LockOutlined />}
+              value={value}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                onChange(e.target.value)
+              }
+              onKeyDown={(e: React.KeyboardEvent) => {
+                if (e.key === 'Enter') onPressEnter();
+              }}
+              placeholder={t('common:auth.passwordPlaceholder')}
+            />
+          </FormItem>
+        )}
+      />
+    </Form>
+  );
+};
+
+export default LoginForm;

package/src/auth/RecoverPassword.tsx

@@ -0,0 +1,185 @@
+import { Button, Form, Input, message } from 'antd';
+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 Link from 'next/link';
+import useInterval from '@os-design/use-interval';
+import handleFormErrors from '../utils/handleFormErrors';
+import { useFrontendConfig } from '../utils/FrontendContext';
+import {
+    RecoverPasswordInput,
+    recoveryMutation,
+} from '../graphql/recoveryMutation.graphql';
+import H from '../ui/H';
+import Panel from '../ui/Panel';
+import FormItem from '../ui/FormItem';
+import FormError from '../ui/FormError';
+import ResendLinkButton from './ResendLinkButton';
+import { ResendLinkButtonMutation$data } from '../graphql/ResendLinkButtonMutation.graphql';
+import { getLimitExpiresIn, setLimitExpiresAt } from '../utils/limitExpiresAt';
+
+const RecoverPassword = () => {
+    const router = useRouter();
+    const { t } = useTranslation(['common']);
+    const config = useFrontendConfig();
+
+    let { email } = router.query;
+    if (typeof email !== 'string' || !email) email = '';
+
+    const { form, Field } = useForm<RecoverPasswordInput>({
+        token: '',
+        password: '',
+    });
+
+    const [commit, loading] = useMutation<recoveryMutation>(
+        graphql`
+      mutation recoveryMutation($input: RecoverPasswordInput!) {
+        recoverPassword(input: $input) {
+          ok
+        }
+      }
+    `
+    );
+
+    const recoverPasswordHandler = useCallback(() => {
+        commit({
+            variables: {
+                input: {
+                    ...form.values.getAll(),
+                },
+            },
+            onError: (error) => handleFormErrors(form, error),
+            onCompleted: () => {
+                message.success(t('common:auth.recoverySuccess'));
+                const profilePath = config.defaultPath
+                    ? `${config.defaultPath === '/' ? '' : config.defaultPath}/profile`
+                    : '/profile';
+                router.push(profilePath);
+            },
+        });
+    }, [commit, form, router, t, config.defaultPath]);
+
+    const [limitExpiresIn, setLimitExpiresIn] = useState(0);
+
+    // Update limitExpiresIn
+    const updateLimitExpiresIn = useCallback(
+        () => setLimitExpiresIn(getLimitExpiresIn()),
+        []
+    );
+    useEffect(updateLimitExpiresIn, [updateLimitExpiresIn]); // Initial update
+    useInterval(updateLimitExpiresIn, limitExpiresIn > 0 ? 1000 : null); // Update every second
+
+    const resendIsDenied = limitExpiresIn > 0;
+
+    const getResendButtonTitle = () => {
+        if (resendIsDenied) {
+            return `${t('common:auth.openEmailResendDenied')} ${Math.ceil(
+                limitExpiresIn / 1000
+            )} ${t('common:sec')}`;
+        }
+        return t('common:auth.openEmailResend');
+    };
+
+    return (
+        <div className='recovery'>
+            <div className='recovery-header'>
+                {t('common:auth.setNewPassword')}
+            </div>
+
+            {email.length > 0 ? (
+                <>
+                    <div style={{ color: 'red', marginBottom: 15 }}>
+                        {t('common:auth.findCodeOnEmail')}
+                    </div>
+                    <FormProvider form={form}>
+                        <Form layout='vertical' size='large'>
+                            <FormError />
+                            <Field
+                                name='token'
+                                render={({ value, onChange }: { value: string, onChange: (val: string) => void }, { error }: { error?: string }) => (
+                                    <FormItem
+                                        label='Код из письма'
+                                        error={error}
+                                        style={{ marginBottom: 0 }}
+                                    >
+                                        <Input
+                                            placeholder='------'
+                                            value={value}
+                                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
+                                        />
+                                    </FormItem>
+                                )}
+                            />
+                            <div style={{ marginBottom: 25 }}>
+                                <ResendLinkButton
+                                    email={email}
+                                    type='recovery'
+                                    disabled={resendIsDenied}
+                                    onError={(error: any) => handleFormErrors(form, error)}
+                                    onCompleted={(res: ResendLinkButtonMutation$data) => {
+                                        setLimitExpiresAt(res.resendLink.limitExpiresAt);
+                                        setLimitExpiresIn(getLimitExpiresIn());
+
+                                        // Отображаем сообщение
+                                        if (res.resendLink.ok)
+                                            message.success(t('common:auth.openEmailResendOk'));
+                                        else
+                                            message.error(t('common:auth.openEmailResendError'));
+                                    }}
+                                >
+                                    {getResendButtonTitle()}
+                                </ResendLinkButton>
+                            </div>
+
+                            <Panel bg='secondary'>
+                                <Field
+                                    name='password'
+                                    render={({ value, onChange }: { value: string, onChange: (val: string) => void }, { error }: { error?: string }) => (
+                                        <FormItem
+                                            label={t('common:auth.setNewPassword')}
+                                            error={error}
+                                        >
+                                            <Input.Password
+                                                value={value}
+                                                onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
+                                                placeholder={t('common:auth.newPassword')}
+                                            />
+                                        </FormItem>
+                                    )}
+                                />
+                                <Button
+                                    loading={loading}
+                                    onClick={recoverPasswordHandler}
+                                    type='primary'
+                                >
+                                    {t('common:auth.saveNewPassword')}
+                                </Button>
+                            </Panel>
+                        </Form>
+                    </FormProvider>
+                </>
+            ) : (
+                <>
+                    <H
+                        type='h2'
+                        subHeader='Вы перешли на эту страницу с неверными параметрами, вернитесь назад, чтобы исправить ошибку'
+                        textAlign='center'
+                    >
+                        Ошибочные параметры
+                    </H>
+                    <div style={{ textAlign: 'center' }}>
+                        <Link href={config.forgotPasswordPath || '/forgot'}>
+                            <Button type='primary' shape='round' size='large'>
+                                Вернуться назад
+                            </Button>
+                        </Link>
+                    </div>
+                </>
+            )}
+        </div>
+    );
+};
+
+export default RecoverPassword;

package/src/auth/Register.tsx

@@ -0,0 +1,174 @@
+import React, { useCallback } from 'react';
+import { Button, Checkbox, message } from 'antd';
+import { useRouter } from 'next/router';
+import { useTranslation } from 'next-i18next';
+import Link from 'next/link';
+import { useExistingForm } from '@os-design/form';
+import { graphql, useMutation } from 'react-relay';
+import handleFormErrors from '../utils/handleFormErrors';
+import AuthFooterLinks from './AuthFooterLinks';
+import H from '../ui/H';
+import { useFrontendConfig } from '../utils/FrontendContext';
+import {
+  RegisterInput,
+  RegisterMutation,
+} from '../graphql/RegisterMutation.graphql';
+import LoginForm from './LoginForm';
+import FormItem from '../ui/FormItem';
+
+interface RegisterProps {
+  onFinish: () => void;
+  isModal: boolean;
+  onForgotClick?: () => void;
+}
+
+const Register: React.FC<RegisterProps> = ({
+  onFinish,
+  isModal,
+  onForgotClick,
+}) => {
+  const { t } = useTranslation();
+  const router = useRouter();
+  const config = useFrontendConfig();
+
+  const { form, Field } = useExistingForm<RegisterInput>();
+
+  const [commit, loading] = useMutation<RegisterMutation>(
+    graphql`
+      mutation RegisterMutation($input: RegisterInput!) {
+        register(input: $input) {
+          ok
+        }
+      }
+    `
+  );
+
+  const registerHandler = useCallback(() => {
+    commit({
+      variables: {
+        input: {
+          ...form.values.getAll(),
+        },
+      },
+      onError: (error) => handleFormErrors(form, error),
+      onCompleted: () => {
+        onFinish();
+        router.push(config.defaultPath || '/');
+        message.success(t('common:auth.successRegister'));
+      },
+    });
+  }, [commit, form, onFinish, router, t, config.defaultPath]);
+
+  const forgotButton = (
+    <Button type='link' onClick={onForgotClick}>
+      {t('common:auth.forgot')}
+    </Button>
+  );
+  const loginButton = (
+    <Button type='link' shape='round'>
+      {t('common:buttons.login')}
+    </Button>
+  );
+
+  return (
+    <div className='auth no-text-selection'>
+      <H type='h1' textAlign='center'>
+        {t('common:auth.registerTitle')}
+      </H>
+      {!isModal && (
+        <div className='auth-subtitle'>
+          {t('common:auth.registerSubtitle')}{' '}
+          <Link href={config.loginPath || '/login'} passHref>
+            {loginButton}
+          </Link>
+        </div>
+      )}
+
+      {/* Форма входа и регистрации одинаковые */}
+      <LoginForm onPressEnter={registerHandler} />
+
+      <div>
+        <Field
+          name='isUserAgreementAgree'
+          render={(
+            {
+              value,
+              onChange,
+            }: {
+              value: boolean | null | undefined;
+              onChange: (val: boolean | null | undefined) => void;
+            },
+            { error }: { error?: string }
+          ) => (
+            <FormItem error={error} style={{ marginBottom: 0 }}>
+              <Checkbox
+                style={{ fontSize: '16px' }}
+                checked={value || false}
+                onChange={(e: any) => onChange(e.target.checked)}
+              >
+                {t('common:auth.acceptUserAgreement')}{' '}
+                <Link href='/docs/user-agreement'>
+                  {t('common:links.userAgreement')}
+                </Link>
+              </Checkbox>
+            </FormItem>
+          )}
+        />
+
+        <Field
+          name='isPrivacyPolicyAgree'
+          render={(
+            {
+              value,
+              onChange,
+            }: {
+              value: boolean | null | undefined;
+              onChange: (val: boolean | null | undefined) => void;
+            },
+            { error }: { error?: string }
+          ) => (
+            <FormItem error={error}>
+              <Checkbox
+                checked={value || false}
+                onChange={(e: any) => onChange(e.target.checked)}
+                style={{ fontSize: '16px' }}
+              >
+                {t('common:auth.acceptPrivacyPolicy')}{' '}
+                <Link href='/docs/privacy-policy'>
+                  {t('common:links.privacyPolicy')}
+                </Link>
+              </Checkbox>
+            </FormItem>
+          )}
+        />
+      </div>
+
+      <div className='auth-button'>
+        <Button
+          type='primary'
+          shape='round'
+          size='large'
+          loading={loading}
+          onClick={registerHandler}
+        >
+          {t('common:buttons.register')}
+        </Button>
+      </div>
+
+      <div className='auth-footer'>
+        <div>
+          {onForgotClick ? (
+            forgotButton
+          ) : (
+            <Link href={config.forgotPasswordPath || '/forgot'} passHref>
+              {forgotButton}
+            </Link>
+          )}
+        </div>
+        <AuthFooterLinks />
+      </div>
+    </div>
+  );
+};
+
+export default Register;