@skroz/frontend 0.0.5 → 0.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/auth/Auth.js +19 -36
- package/dist/auth/AuthButtons.d.ts +18 -0
- package/dist/auth/AuthButtons.js +29 -0
- package/dist/auth/AuthFooterLinks.js +9 -25
- package/dist/auth/AuthModal.d.ts +9 -0
- package/dist/auth/AuthModal.js +5 -0
- package/dist/auth/Forgot.js +48 -56
- package/dist/auth/Login.js +33 -48
- package/dist/auth/LoginForm.js +18 -47
- package/dist/auth/LogoutButton.d.ts +3 -0
- package/dist/auth/LogoutButton.js +39 -0
- package/dist/auth/RecoverPassword.js +64 -76
- package/dist/auth/Register.js +47 -55
- package/dist/auth/ResendLinkButton.d.ts +3 -4
- package/dist/auth/ResendLinkButton.js +41 -39
- package/dist/auth/__tests__/Login.test.d.ts +1 -0
- package/dist/auth/__tests__/Login.test.js +75 -0
- package/dist/auth/index.d.ts +3 -0
- package/dist/auth/index.js +11 -22
- package/dist/graphql/ForgotMutation.graphql.d.ts +24 -0
- package/dist/graphql/{ForgotPasswordMutation.graphql.js → ForgotMutation.graphql.js} +11 -13
- package/dist/graphql/LoginMutation.graphql.d.ts +5 -5
- package/dist/graphql/LoginMutation.graphql.js +6 -8
- package/dist/graphql/LogoutButtonMutation.graphql.d.ts +18 -0
- package/dist/graphql/LogoutButtonMutation.graphql.js +55 -0
- package/dist/graphql/RecoverPasswordMutation.graphql.d.ts +24 -0
- package/dist/graphql/{recoveryMutation.graphql.js → RecoverPasswordMutation.graphql.js} +13 -13
- package/dist/graphql/RegisterMutation.graphql.d.ts +7 -6
- package/dist/graphql/RegisterMutation.graphql.js +15 -10
- package/dist/graphql/ResendLinkButtonMutation.graphql.d.ts +5 -6
- package/dist/graphql/ResendLinkButtonMutation.graphql.js +9 -11
- package/dist/index.d.ts +0 -1
- package/dist/index.js +3 -20
- package/dist/ui/AreYouSure.js +9 -23
- package/dist/ui/FormError.js +9 -14
- package/dist/ui/FormItem.js +8 -22
- package/dist/ui/H.d.ts +1 -1
- package/dist/ui/H.js +15 -32
- package/dist/ui/Panel.d.ts +1 -1
- package/dist/ui/Panel.js +6 -23
- package/dist/ui/SeoHead.js +7 -13
- package/dist/ui/index.js +6 -18
- package/dist/utils/FrontendContext.js +6 -25
- package/dist/utils/getError.js +12 -20
- package/dist/utils/handleFormErrors.js +20 -29
- package/dist/utils/index.js +5 -28
- package/dist/utils/isObject.js +2 -6
- package/dist/utils/limitExpiresAt.js +9 -12
- package/package.json +8 -6
- package/src/auth/Auth.tsx +2 -2
- package/src/auth/AuthButtons.tsx +119 -0
- package/src/auth/AuthModal.tsx +28 -0
- package/src/auth/Forgot.tsx +32 -21
- package/src/auth/Login.tsx +25 -10
- package/src/auth/LoginForm.tsx +4 -4
- package/src/auth/LogoutButton.tsx +53 -0
- package/src/auth/RecoverPassword.tsx +37 -23
- package/src/auth/Register.tsx +29 -13
- package/src/auth/ResendLinkButton.tsx +34 -18
- package/src/auth/__tests__/Login.test.tsx +99 -0
- package/src/auth/index.ts +3 -0
- package/src/graphql/ForgotMutation.graphql.ts +100 -0
- package/src/graphql/LoginMutation.graphql.ts +73 -73
- package/src/graphql/LogoutButtonMutation.graphql.ts +74 -0
- package/src/graphql/RecoverPasswordMutation.graphql.ts +93 -0
- package/src/graphql/RegisterMutation.graphql.ts +81 -73
- package/src/graphql/ResendLinkButtonMutation.graphql.ts +78 -79
- package/src/index.ts +0 -1
- package/src/locales/ru/common.json +8 -190
- package/src/ui/H.tsx +1 -1
- package/src/ui/Panel.tsx +1 -1
- package/src/utils/limitExpiresAt.ts +3 -1
- package/dist/graphql/ForgotPasswordMutation.graphql.d.ts +0 -24
- package/dist/graphql/index.d.ts +0 -5
- package/dist/graphql/index.js +0 -16
- package/dist/graphql/recoveryMutation.graphql.d.ts +0 -19
- package/src/graphql/ForgotPasswordMutation.graphql.ts +0 -100
- package/src/graphql/index.ts +0 -5
- package/src/graphql/recoveryMutation.graphql.ts +0 -91
package/dist/auth/Auth.js
CHANGED
|
@@ -1,52 +1,35 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
};
|
|
13
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
-
};
|
|
16
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
18
|
-
var antd_1 = require("antd");
|
|
19
|
-
var form_1 = require("@os-design/form");
|
|
20
|
-
var router_1 = require("next/router");
|
|
21
|
-
var next_i18next_1 = require("next-i18next");
|
|
22
|
-
var Login_1 = __importDefault(require("./Login"));
|
|
23
|
-
var Register_1 = __importDefault(require("./Register"));
|
|
24
|
-
var Forgot_1 = __importDefault(require("./Forgot"));
|
|
25
|
-
var Auth = function (_a) {
|
|
26
|
-
var authType = _a.authType, setAuthType = _a.setAuthType, onFinish = _a.onFinish;
|
|
27
|
-
var router = (0, router_1.useRouter)();
|
|
28
|
-
var t = (0, next_i18next_1.useTranslation)('common').t;
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Tabs } from 'antd';
|
|
3
|
+
import { FormProvider, useForm } from "@os-design/form";
|
|
4
|
+
import { useRouter } from "next/router";
|
|
5
|
+
import { useTranslation } from 'next-i18next';
|
|
6
|
+
import Login from './Login';
|
|
7
|
+
import Register from './Register';
|
|
8
|
+
import Forgot from './Forgot';
|
|
9
|
+
const Auth = ({ authType, setAuthType, onFinish }) => {
|
|
10
|
+
const router = useRouter();
|
|
11
|
+
const { t } = useTranslation('common');
|
|
29
12
|
// если это отдельная страница восстановления пароля, то он может быть передан в строке
|
|
30
|
-
|
|
13
|
+
let initialEmail = router.query.email;
|
|
31
14
|
if (typeof initialEmail !== 'string')
|
|
32
15
|
initialEmail = '';
|
|
33
|
-
|
|
16
|
+
const { form } = useForm({
|
|
34
17
|
email: initialEmail || '',
|
|
35
18
|
password: '',
|
|
36
19
|
isPrivacyPolicyAgree: false,
|
|
37
20
|
isUserAgreementAgree: false
|
|
38
|
-
})
|
|
39
|
-
return ((
|
|
21
|
+
});
|
|
22
|
+
return (_jsxs(FormProvider, { form: form, children: [authType !== 'forgot' && (_jsx(Tabs, { activeKey: authType, centered: true, onChange: (activeKey) => setAuthType(activeKey), className: 'no-text-selection', items: [
|
|
40
23
|
{
|
|
41
24
|
label: t('buttons.login'),
|
|
42
25
|
key: 'login',
|
|
43
|
-
children: ((
|
|
26
|
+
children: (_jsx(Login, { isModal: true, onFinish: onFinish, onForgotClick: () => setAuthType('forgot') })),
|
|
44
27
|
},
|
|
45
28
|
{
|
|
46
29
|
label: t('buttons.register'),
|
|
47
30
|
key: 'register',
|
|
48
|
-
children: ((
|
|
31
|
+
children: (_jsx(Register, { isModal: true, onFinish: onFinish, onForgotClick: () => setAuthType('forgot') })),
|
|
49
32
|
},
|
|
50
|
-
] })), authType === 'forgot' && ((
|
|
33
|
+
] })), authType === 'forgot' && (_jsx(Forgot, { onFinish: onFinish, onLoginClick: () => setAuthType('login') }))] }));
|
|
51
34
|
};
|
|
52
|
-
|
|
35
|
+
export default Auth;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ButtonType } from 'antd/es/button/buttonHelpers';
|
|
3
|
+
import { SizeType } from 'antd/es/config-provider/SizeContext';
|
|
4
|
+
interface AuthButtonsProps {
|
|
5
|
+
modal: boolean;
|
|
6
|
+
showLogin: boolean;
|
|
7
|
+
loginTitle?: React.ReactNode;
|
|
8
|
+
loginIcon?: React.ReactNode;
|
|
9
|
+
registerTitle?: React.ReactNode;
|
|
10
|
+
loginButtonType: ButtonType;
|
|
11
|
+
showRegister: boolean;
|
|
12
|
+
fantastic?: boolean;
|
|
13
|
+
registerClassname?: string;
|
|
14
|
+
registerBlock?: boolean;
|
|
15
|
+
buttonSize?: SizeType;
|
|
16
|
+
}
|
|
17
|
+
declare const AuthButtons: React.FC<AuthButtonsProps>;
|
|
18
|
+
export default AuthButtons;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Button } from 'antd';
|
|
3
|
+
import { useState } from 'react';
|
|
4
|
+
import { useTranslation } from 'next-i18next';
|
|
5
|
+
import Link from 'next/link';
|
|
6
|
+
import AuthModal from './AuthModal';
|
|
7
|
+
import { useFrontendConfig } from '../utils/FrontendContext';
|
|
8
|
+
const AuthButtons = ({ modal, loginButtonType, showLogin, loginIcon, showRegister, fantastic, loginTitle, registerTitle, registerClassname = '', buttonSize = 'middle', registerBlock, }) => {
|
|
9
|
+
const { t } = useTranslation('common');
|
|
10
|
+
const config = useFrontendConfig();
|
|
11
|
+
const [visible, setVisible] = useState(false);
|
|
12
|
+
const [authType, setAuthType] = useState('login');
|
|
13
|
+
const loginButton = (_jsx("div", { className: "auth-buttons-item", children: _jsx(Button, { type: loginButtonType, shape: loginTitle !== false ? 'round' : 'circle', size: buttonSize, icon: loginIcon, onClick: modal
|
|
14
|
+
? () => {
|
|
15
|
+
setVisible(true);
|
|
16
|
+
setAuthType('login');
|
|
17
|
+
}
|
|
18
|
+
: undefined, children: loginTitle !== false ? loginTitle || t('buttons.login') : '' }) }));
|
|
19
|
+
const loginButtonContainer = modal ? (loginButton) : (_jsx(Link, { href: config.loginPath || '/login', passHref: true, legacyBehavior: true, children: loginButton }));
|
|
20
|
+
const registerButton = (_jsx("div", { className: "auth-buttons-item", children: _jsx(Button, { shape: "round", className: registerClassname, size: buttonSize, type: "primary", block: registerBlock, onClick: modal
|
|
21
|
+
? () => {
|
|
22
|
+
setVisible(true);
|
|
23
|
+
setAuthType('register');
|
|
24
|
+
}
|
|
25
|
+
: undefined, children: registerTitle || t('buttons.register') }) }));
|
|
26
|
+
const registerButtonContainer = modal ? (registerButton) : (_jsx(Link, { href: config.registerPath || '/register', passHref: true, legacyBehavior: true, children: registerButton }));
|
|
27
|
+
return (_jsxs("div", { className: `auth-buttons ${fantastic ? 'fantastic' : ''}`, children: [showLogin && loginButtonContainer, showRegister && registerButtonContainer, modal && (_jsx(AuthModal, { authType: authType, visible: visible, onClose: () => setVisible(false), setAuthType: setAuthType }))] }));
|
|
28
|
+
};
|
|
29
|
+
export default AuthButtons;
|
|
@@ -1,26 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { useTranslation } from 'next-i18next';
|
|
4
|
+
import Link from 'next/link';
|
|
5
|
+
const AuthFooterLinks = () => {
|
|
6
|
+
const { t } = useTranslation('common');
|
|
7
|
+
const docs = ['agency-agreement', 'privacy-policy'];
|
|
8
|
+
return (_jsxs("div", { className: 'auth-footer-issues', children: [t('auth.agreeLoginLabel'), ' ', docs.map((doc, index) => (_jsxs(React.Fragment, { children: [_jsx(Link, { href: `/docs/${doc}`, passHref: true, target: '_blank', children: t(`docsPage.${doc}`) }), index < docs.length - 1 && ', '] }, doc))), "."] }));
|
|
12
9
|
};
|
|
13
|
-
|
|
14
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
-
};
|
|
16
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
18
|
-
var react_1 = __importDefault(require("react"));
|
|
19
|
-
var next_i18next_1 = require("next-i18next");
|
|
20
|
-
var link_1 = __importDefault(require("next/link"));
|
|
21
|
-
var AuthFooterLinks = function () {
|
|
22
|
-
var t = (0, next_i18next_1.useTranslation)('common').t;
|
|
23
|
-
var docs = ['agency-agreement', 'privacy-policy'];
|
|
24
|
-
return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: 'auth-footer-issues' }, { children: [t('auth.agreeLoginLabel'), ' ', docs.map(function (doc, index) { return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(link_1.default, __assign({ href: "/docs/".concat(doc), passHref: true, target: '_blank' }, { children: t("docsPage.".concat(doc)) })), index < docs.length - 1 && ', '] }, doc)); }), "."] })));
|
|
25
|
-
};
|
|
26
|
-
exports.default = AuthFooterLinks;
|
|
10
|
+
export default AuthFooterLinks;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface AuthModalProps {
|
|
3
|
+
visible: boolean;
|
|
4
|
+
authType: 'login' | 'register' | 'forgot';
|
|
5
|
+
setAuthType: (type: 'login' | 'register' | 'forgot') => void;
|
|
6
|
+
onClose: () => void;
|
|
7
|
+
}
|
|
8
|
+
declare const AuthModal: React.FC<AuthModalProps>;
|
|
9
|
+
export default AuthModal;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Modal } from 'antd';
|
|
3
|
+
import Auth from './Auth';
|
|
4
|
+
const AuthModal = ({ visible, authType, onClose, setAuthType, }) => (_jsx(Modal, { open: visible, onCancel: onClose, footer: false, style: { top: 10 }, children: _jsx(Auth, { authType: authType, setAuthType: setAuthType, onFinish: onClose }) }));
|
|
5
|
+
export default AuthModal;
|
package/dist/auth/Forgot.js
CHANGED
|
@@ -1,66 +1,58 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
var _c = (0, react_relay_1.useMutation)(ForgotPasswordMutation_graphql_1.default), commit = _c[0], loading = _c[1];
|
|
40
|
-
var forgotPasswordHandler = (0, react_1.useCallback)(function () {
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback } from 'react';
|
|
3
|
+
import { Button, Form, Input, message } from 'antd';
|
|
4
|
+
import { useRouter } from 'next/router';
|
|
5
|
+
import { UserOutlined } from '@ant-design/icons';
|
|
6
|
+
import { useTranslation } from 'next-i18next';
|
|
7
|
+
import Link from 'next/link';
|
|
8
|
+
import { useExistingForm } from '@os-design/form';
|
|
9
|
+
import { useMutation } from 'react-relay';
|
|
10
|
+
import { setLimitExpiresAt } from '../utils/limitExpiresAt';
|
|
11
|
+
import handleFormErrors from '../utils/handleFormErrors';
|
|
12
|
+
import H from '../ui/H';
|
|
13
|
+
import { useFrontendConfig } from '../utils/FrontendContext';
|
|
14
|
+
import ForgotMutationNode from '../graphql/ForgotMutation.graphql';
|
|
15
|
+
import FormItem from '../ui/FormItem';
|
|
16
|
+
const Forgot = ({ onFinish, onLoginClick }) => {
|
|
17
|
+
const { t } = useTranslation('common');
|
|
18
|
+
const router = useRouter();
|
|
19
|
+
const config = useFrontendConfig();
|
|
20
|
+
const { form, useValue, Field } = useExistingForm();
|
|
21
|
+
const email = useValue('email');
|
|
22
|
+
/*
|
|
23
|
+
SKROZ_PROTECTION NOTE:
|
|
24
|
+
The Relay compiler has generated artifacts for this mutation.
|
|
25
|
+
Explicit import of ForgotMutationNode is used.
|
|
26
|
+
|
|
27
|
+
Mutation definition (for reference/regeneration):
|
|
28
|
+
graphql`
|
|
29
|
+
mutation ForgotMutation($input: SendTokenInput!) {
|
|
30
|
+
sendToken(input: $input) {
|
|
31
|
+
codeIsSent
|
|
32
|
+
limitExpiresAt
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
`
|
|
36
|
+
*/
|
|
37
|
+
const [commit, loading] = useMutation(ForgotMutationNode);
|
|
38
|
+
const forgotPasswordHandler = useCallback(() => {
|
|
41
39
|
commit({
|
|
42
40
|
variables: {
|
|
43
41
|
input: {
|
|
44
|
-
email
|
|
42
|
+
email,
|
|
45
43
|
},
|
|
46
44
|
},
|
|
47
|
-
onError:
|
|
48
|
-
onCompleted:
|
|
49
|
-
|
|
50
|
-
if (!res.
|
|
51
|
-
|
|
52
|
-
router.push(
|
|
45
|
+
onError: (error) => handleFormErrors(form, error),
|
|
46
|
+
onCompleted: (res) => {
|
|
47
|
+
setLimitExpiresAt(res.sendToken.limitExpiresAt);
|
|
48
|
+
if (!res.sendToken.codeIsSent)
|
|
49
|
+
message.error(t('auth.forgotSendError'));
|
|
50
|
+
router.push(`/recovery?email=${email}`);
|
|
53
51
|
onFinish();
|
|
54
52
|
},
|
|
55
53
|
});
|
|
56
54
|
}, [commit, email, form, onFinish, router, t]);
|
|
57
|
-
|
|
58
|
-
return ((
|
|
59
|
-
var value = _a.value, onChange = _a.onChange;
|
|
60
|
-
var error = _b.error;
|
|
61
|
-
return ((0, jsx_runtime_1.jsx)(FormItem_1.default, __assign({ error: error }, { children: (0, jsx_runtime_1.jsx)(antd_1.Input, { value: value, prefix: (0, jsx_runtime_1.jsx)(icons_1.UserOutlined, {}), onChange: function (e) {
|
|
62
|
-
return onChange(e.target.value);
|
|
63
|
-
}, placeholder: 'Email', size: 'large' }) })));
|
|
64
|
-
} }) })), (0, jsx_runtime_1.jsx)("div", __assign({ className: 'auth-button' }, { children: (0, jsx_runtime_1.jsx)(antd_1.Button, __assign({ type: 'primary', shape: 'round', size: 'large', loading: loading, onClick: forgotPasswordHandler }, { children: t('common:auth.forgotSendInstructions') })) })), (0, jsx_runtime_1.jsx)("div", __assign({ className: 'auth-footer' }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: 'auth-footer-issues' }, { children: t('common:auth.forgotIssues') })) }))] })));
|
|
55
|
+
const loginButton = (_jsx(Button, { type: 'link', onClick: onLoginClick, shape: 'round', children: t('buttons.login') }));
|
|
56
|
+
return (_jsxs("div", { className: 'auth no-text-selection', children: [_jsx(H, { type: 'h1', textAlign: 'center', children: t('auth.forgotTitle') }), _jsxs("div", { className: 'auth-subtitle', children: [t('auth.forgotSubtitle'), ' ', onLoginClick ? (loginButton) : (_jsx(Link, { href: config.loginPath || '/login', passHref: true, children: loginButton }))] }), _jsx(Form, { size: 'large', children: _jsx(Field, { name: 'email', render: ({ value, onChange, }, { error }) => (_jsx(FormItem, { error: error, children: _jsx(Input, { value: value, prefix: _jsx(UserOutlined, {}), onChange: (e) => onChange(e.target.value), placeholder: 'Email', size: 'large' }) })) }) }), _jsx("div", { className: 'auth-button', children: _jsx(Button, { type: 'primary', shape: 'round', size: 'large', loading: loading, onClick: forgotPasswordHandler, children: t('auth.forgotSendInstructions') }) }), _jsx("div", { className: 'auth-footer', children: _jsx("div", { className: 'auth-footer-issues', children: t('auth.forgotIssues') }) })] }));
|
|
65
57
|
};
|
|
66
|
-
|
|
58
|
+
export default Forgot;
|
package/dist/auth/Login.js
CHANGED
|
@@ -1,61 +1,46 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
var link_1 = __importDefault(require("next/link"));
|
|
23
|
-
var react_relay_1 = require("react-relay");
|
|
24
|
-
var form_1 = require("@os-design/form");
|
|
25
|
-
var LoginMutation_graphql_1 = __importDefault(require("../graphql/LoginMutation.graphql"));
|
|
26
|
-
var handleFormErrors_1 = __importDefault(require("../utils/handleFormErrors"));
|
|
27
|
-
var AuthFooterLinks_1 = __importDefault(require("./AuthFooterLinks"));
|
|
28
|
-
var H_1 = __importDefault(require("../ui/H"));
|
|
29
|
-
var FrontendContext_1 = require("../utils/FrontendContext");
|
|
30
|
-
var LoginForm_1 = __importDefault(require("./LoginForm"));
|
|
31
|
-
var Login = function (_a) {
|
|
32
|
-
var onFinish = _a.onFinish, onForgotClick = _a.onForgotClick, isModal = _a.isModal;
|
|
33
|
-
var t = (0, next_i18next_1.useTranslation)().t;
|
|
34
|
-
var router = (0, router_1.useRouter)();
|
|
35
|
-
var form = (0, form_1.useExistingForm)().form;
|
|
36
|
-
var config = (0, FrontendContext_1.useFrontendConfig)();
|
|
37
|
-
var _b = (0, react_relay_1.useMutation)(LoginMutation_graphql_1.default), commit = _b[0], loading = _b[1];
|
|
38
|
-
var loginHandler = (0, react_1.useCallback)(function () {
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback } from 'react';
|
|
3
|
+
import { Button, message } from 'antd';
|
|
4
|
+
import { useRouter } from 'next/router';
|
|
5
|
+
import { useTranslation } from 'next-i18next';
|
|
6
|
+
import Link from 'next/link';
|
|
7
|
+
import { useMutation } from 'react-relay';
|
|
8
|
+
import { useExistingForm } from '@os-design/form';
|
|
9
|
+
import LoginMutationNode from '../graphql/LoginMutation.graphql';
|
|
10
|
+
import handleFormErrors from '../utils/handleFormErrors';
|
|
11
|
+
import AuthFooterLinks from './AuthFooterLinks';
|
|
12
|
+
import H from '../ui/H';
|
|
13
|
+
import { useFrontendConfig } from '../utils/FrontendContext';
|
|
14
|
+
import LoginForm from './LoginForm';
|
|
15
|
+
const Login = ({ onFinish, onForgotClick, isModal }) => {
|
|
16
|
+
const { t } = useTranslation('common');
|
|
17
|
+
const router = useRouter();
|
|
18
|
+
const { form } = useExistingForm();
|
|
19
|
+
const config = useFrontendConfig();
|
|
20
|
+
const [commit, loading] = useMutation(LoginMutationNode);
|
|
21
|
+
const loginHandler = useCallback(() => {
|
|
39
22
|
commit({
|
|
40
23
|
variables: {
|
|
41
|
-
input:
|
|
24
|
+
input: {
|
|
25
|
+
...form.values.getAll(),
|
|
26
|
+
},
|
|
42
27
|
},
|
|
43
|
-
onError:
|
|
44
|
-
(
|
|
28
|
+
onError: (error) => {
|
|
29
|
+
handleFormErrors(form, error);
|
|
45
30
|
},
|
|
46
|
-
onCompleted:
|
|
31
|
+
onCompleted: (res) => {
|
|
47
32
|
if (!res.login.ok) {
|
|
48
|
-
|
|
33
|
+
message.error(t('auth.loginError'));
|
|
49
34
|
return;
|
|
50
35
|
}
|
|
51
36
|
onFinish();
|
|
52
|
-
|
|
37
|
+
message.success(t('auth.loginSuccess'));
|
|
53
38
|
router.reload();
|
|
54
39
|
},
|
|
55
40
|
});
|
|
56
41
|
}, [commit, form, router, onFinish, t]);
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
return ((
|
|
42
|
+
const forgotButton = (_jsx(Button, { type: 'link', onClick: onForgotClick, children: t('auth.forgot') }));
|
|
43
|
+
const registerButton = (_jsx(Button, { type: 'link', shape: 'round', className: 'register-link', children: t('buttons.register') }));
|
|
44
|
+
return (_jsxs("div", { className: 'auth no-text-selection', children: [_jsx(H, { type: 'h1', textAlign: 'center', children: t('auth.loginTitle') }), !isModal && (_jsxs("div", { className: 'auth-subtitle', children: [t('auth.loginSubtitle'), ' ', _jsx(Link, { href: config.registerPath || '/register', passHref: true, children: registerButton })] })), _jsx(LoginForm, { onPressEnter: loginHandler }), _jsx("div", { className: 'auth-button', children: _jsx(Button, { type: 'primary', shape: 'round', size: 'large', loading: loading, onClick: loginHandler, children: t('buttons.login') }) }), _jsxs("div", { className: 'auth-footer', children: [_jsx("div", { children: onForgotClick ? (forgotButton) : (_jsx(Link, { href: config.forgotPasswordPath || '/forgot', passHref: true, children: forgotButton })) }), _jsx(AuthFooterLinks, {})] })] }));
|
|
60
45
|
};
|
|
61
|
-
|
|
46
|
+
export default Login;
|
package/dist/auth/LoginForm.js
CHANGED
|
@@ -1,48 +1,19 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
};
|
|
11
|
-
return
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Form, Input } from 'antd';
|
|
3
|
+
import { LockOutlined, UserOutlined } from '@ant-design/icons';
|
|
4
|
+
import { useTranslation } from 'next-i18next';
|
|
5
|
+
import { useExistingForm } from '@os-design/form';
|
|
6
|
+
import FormItem from '../ui/FormItem';
|
|
7
|
+
import FormError from '../ui/FormError';
|
|
8
|
+
const LoginForm = ({ onPressEnter }) => {
|
|
9
|
+
const { t } = useTranslation('common');
|
|
10
|
+
const { Field } = useExistingForm();
|
|
11
|
+
return (_jsxs(Form, { size: 'large', children: [_jsx(FormError, {}), _jsx(Field, { name: 'email', render: ({ value, onChange, }, { error }) => (_jsx(FormItem, { error: error, children: _jsx(Input, { prefix: _jsx(UserOutlined, {}), value: value, onChange: (e) => onChange(e.target.value), onKeyDown: (e) => {
|
|
12
|
+
if (e.key === 'Enter')
|
|
13
|
+
onPressEnter();
|
|
14
|
+
}, placeholder: 'Email' }) })) }), _jsx(Field, { name: 'password', render: ({ value, onChange, }, { error }) => (_jsx(FormItem, { error: error, children: _jsx(Input.Password, { prefix: _jsx(LockOutlined, {}), value: value, onChange: (e) => onChange(e.target.value), onKeyDown: (e) => {
|
|
15
|
+
if (e.key === 'Enter')
|
|
16
|
+
onPressEnter();
|
|
17
|
+
}, placeholder: t('auth.passwordPlaceholder') }) })) })] }));
|
|
12
18
|
};
|
|
13
|
-
|
|
14
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
-
};
|
|
16
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
18
|
-
var antd_1 = require("antd");
|
|
19
|
-
var icons_1 = require("@ant-design/icons");
|
|
20
|
-
var next_i18next_1 = require("next-i18next");
|
|
21
|
-
var form_1 = require("@os-design/form");
|
|
22
|
-
var FormItem_1 = __importDefault(require("../ui/FormItem"));
|
|
23
|
-
var FormError_1 = __importDefault(require("../ui/FormError"));
|
|
24
|
-
var LoginForm = function (_a) {
|
|
25
|
-
var onPressEnter = _a.onPressEnter;
|
|
26
|
-
var t = (0, next_i18next_1.useTranslation)().t;
|
|
27
|
-
var Field = (0, form_1.useExistingForm)().Field;
|
|
28
|
-
return ((0, jsx_runtime_1.jsxs)(antd_1.Form, __assign({ size: 'large' }, { children: [(0, jsx_runtime_1.jsx)(FormError_1.default, {}), (0, jsx_runtime_1.jsx)(Field, { name: 'email', render: function (_a, _b) {
|
|
29
|
-
var value = _a.value, onChange = _a.onChange;
|
|
30
|
-
var error = _b.error;
|
|
31
|
-
return ((0, jsx_runtime_1.jsx)(FormItem_1.default, __assign({ error: error }, { children: (0, jsx_runtime_1.jsx)(antd_1.Input, { prefix: (0, jsx_runtime_1.jsx)(icons_1.UserOutlined, {}), value: value, onChange: function (e) {
|
|
32
|
-
return onChange(e.target.value);
|
|
33
|
-
}, onKeyDown: function (e) {
|
|
34
|
-
if (e.key === 'Enter')
|
|
35
|
-
onPressEnter();
|
|
36
|
-
}, placeholder: 'Email' }) })));
|
|
37
|
-
} }), (0, jsx_runtime_1.jsx)(Field, { name: 'password', render: function (_a, _b) {
|
|
38
|
-
var value = _a.value, onChange = _a.onChange;
|
|
39
|
-
var error = _b.error;
|
|
40
|
-
return ((0, jsx_runtime_1.jsx)(FormItem_1.default, __assign({ error: error }, { children: (0, jsx_runtime_1.jsx)(antd_1.Input.Password, { prefix: (0, jsx_runtime_1.jsx)(icons_1.LockOutlined, {}), value: value, onChange: function (e) {
|
|
41
|
-
return onChange(e.target.value);
|
|
42
|
-
}, onKeyDown: function (e) {
|
|
43
|
-
if (e.key === 'Enter')
|
|
44
|
-
onPressEnter();
|
|
45
|
-
}, placeholder: t('common:auth.passwordPlaceholder') }) })));
|
|
46
|
-
} })] })));
|
|
47
|
-
};
|
|
48
|
-
exports.default = LoginForm;
|
|
19
|
+
export default LoginForm;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback } from 'react';
|
|
3
|
+
import { Button, message } from 'antd';
|
|
4
|
+
import { useRouter } from 'next/router';
|
|
5
|
+
import { useMutation } from 'react-relay';
|
|
6
|
+
import { LogoutOutlined } from '@ant-design/icons';
|
|
7
|
+
import getError from '../utils/getError';
|
|
8
|
+
import LogoutButtonMutationNode from '../graphql/LogoutButtonMutation.graphql';
|
|
9
|
+
/*
|
|
10
|
+
SKROZ_PROTECTION NOTE:
|
|
11
|
+
The Relay compiler has generated artifacts for this mutation.
|
|
12
|
+
Explicit import of LogoutButtonMutationNode is used.
|
|
13
|
+
|
|
14
|
+
Mutation definition (for reference/regeneration):
|
|
15
|
+
graphql`
|
|
16
|
+
mutation LogoutButtonMutation {
|
|
17
|
+
logout {
|
|
18
|
+
ok
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
`
|
|
22
|
+
*/
|
|
23
|
+
const LogoutButton = () => {
|
|
24
|
+
const router = useRouter();
|
|
25
|
+
const [commit] = useMutation(LogoutButtonMutationNode);
|
|
26
|
+
const logoutHandler = useCallback(() => {
|
|
27
|
+
commit({
|
|
28
|
+
variables: {},
|
|
29
|
+
onError: (error) => {
|
|
30
|
+
message.error(getError(error).message);
|
|
31
|
+
},
|
|
32
|
+
onCompleted: () => {
|
|
33
|
+
router.reload();
|
|
34
|
+
},
|
|
35
|
+
});
|
|
36
|
+
}, [commit, router]);
|
|
37
|
+
return (_jsx(Button, { shape: "circle", onClick: logoutHandler, icon: _jsx(LogoutOutlined, {}), type: "link" }));
|
|
38
|
+
};
|
|
39
|
+
export default LogoutButton;
|