phx-react
Version:
PHX REACT
99 lines • 7.82 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PHXLoginSsoV3 = void 0;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const Skeleton_1 = require("../Skeleton");
const Button_1 = require("../Button");
const Banner_1 = require("../Banner");
const read_env_config_1 = require("../../read-env-config");
const constants_1 = require("../../utils/constants");
const saveCookiesClient_1 = tslib_1.__importDefault(require("../Func/saveCookiesClient"));
const getCookieSession_1 = tslib_1.__importDefault(require("../Func/getCookieSession"));
const PHXLoginSsoV3 = (props) => {
var _a;
const { onClick, banner, dataSession, redirectPath, router, logo, login_type, children } = props;
const schoolLogo = (0, read_env_config_1.getEnv)('NEXT_PUBLIC_ENV_LOGIN_LOGO', process.env.NEXT_PUBLIC_ENV_LOGIN_LOGO);
const [loading, setLoading] = (0, react_1.useState)(false);
const [error, setError] = (0, react_1.useState)(false);
const sessionCookie = (0, react_1.useRef)((0, getCookieSession_1.default)());
const isAuthSuccess = dataSession.status === constants_1.AUTHENTICATED && ((_a = dataSession.data) === null || _a === void 0 ? void 0 : _a.session.user.email);
const handlerOnClick = () => {
setLoading(true);
onClick();
};
const saveRefreshTokenSso = async (refreshToken) => {
return await fetch('/api/authenticate/set-token', {
headers: {
'Content-Type': 'application/json',
},
method: 'post',
body: JSON.stringify({
refreshToken,
}),
credentials: 'include',
});
};
const handlerSaveCookies = async (session) => {
var _a;
const { data: { token }, } = session;
const { userInfo, token: accessToken, refreshToken } = token;
if (userInfo && ((_a = userInfo === null || userInfo === void 0 ? void 0 : userInfo.user_roles) === null || _a === void 0 ? void 0 : _a[0].role.role_code)) {
// ghi nhớ tài khoản
(0, saveCookiesClient_1.default)({ value: { ...sessionCookie.current, user_info: userInfo, access_token: accessToken } });
// save refresh token after login sso success
await saveRefreshTokenSso(refreshToken);
await dataSession.update({ name: null });
router === null || router === void 0 ? void 0 : router.push(redirectPath);
}
else {
setError(true);
setLoading(false);
}
};
const handlerCheckLogin = () => {
var _a;
if (!((_a = sessionCookie.current) === null || _a === void 0 ? void 0 : _a.access_token)) {
if (isAuthSuccess) {
setLoading(true);
handlerSaveCookies(dataSession);
}
else {
setLoading(false);
}
}
else {
router === null || router === void 0 ? void 0 : router.push(redirectPath);
}
};
(0, react_1.useEffect)(() => {
handlerCheckLogin();
}, [dataSession]);
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("main", { className: 'flex min-h-full' },
react_1.default.createElement("div", { className: 'm-auto flex h-[100vh] max-w-[100vw] flex-1 justify-center' },
react_1.default.createElement("div", { className: 'flex flex-1 flex-col justify-center px-4 py-12 sm:px-6 lg:flex-none lg:px-20 xl:px-24' },
react_1.default.createElement("div", { className: 'lg:w-76 w-full xl:w-96' },
react_1.default.createElement("div", { className: 'flex flex-col' },
react_1.default.createElement("img", { className: 'max-w-[240px] mb-3', src: logo !== null && logo !== void 0 ? logo : `${schoolLogo}`, alt: 'logo' })),
react_1.default.createElement("div", { className: 'mt-5' },
react_1.default.createElement("div", { className: 'space-y-6' }, dataSession.status === 'loading' ? (react_1.default.createElement(Skeleton_1.PHXSkeleton, { className: 'w-full', size: 'extra-large', type: 'only-header' })) : (react_1.default.createElement(react_1.default.Fragment, null, login_type === constants_1.LOGIN_TYPE.EMAIL_OTP.code ? (children) : (react_1.default.createElement(Button_1.PHXButton, { loading: loading, disabled: loading, onClick: () => handlerOnClick(), className: 'flex w-full justify-center items-center', primary: true, submit: true, size: 'medium' },
react_1.default.createElement("div", { className: 'flex gap-2 items-center' },
login_type === constants_1.LOGIN_TYPE.GOOGLE.code ? (react_1.default.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '17', height: '17', viewBox: '0 0 210 210', fill: 'none' },
react_1.default.createElement("path", { d: 'M0 105C0 47.103 47.103 0 105 0C128.383 0 150.515 7.523 169.004 21.756L144.604 53.452C133.172 44.652 119.477 40 105 40C69.159 40 40 69.159 40 105C40 140.841 69.159 170 105 170C133.867 170 158.398 151.087 166.852 125H105V85H210V105C210 162.897 162.897 210 105 210C47.103 210 0 162.897 0 105Z', fill: 'white' }))) : (react_1.default.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '14', height: '14', viewBox: '0 0 24 24', fill: 'none' },
react_1.default.createElement("g", { clipPath: 'url(#clip0_1739_10008)' },
react_1.default.createElement("path", { d: 'M12.75 11.25L24 11.25V0.75C24 0.336 23.664 0 23.25 0L12.75 0L12.75 11.25Z', fill: 'white' }),
react_1.default.createElement("path", { d: 'M11.25 11.25L11.25 0L0.75 0C0.336 0 0 0.336 0 0.75L0 11.25L11.25 11.25Z', fill: 'white' }),
react_1.default.createElement("path", { d: 'M11.25 12.75L0 12.75L0 23.25C0 23.664 0.336 24 0.75 24H11.25L11.25 12.75Z', fill: 'white' }),
react_1.default.createElement("path", { d: 'M12.75 12.75L12.75 24H23.25C23.664 24 24 23.664 24 23.25V12.75L12.75 12.75Z', fill: 'white' })),
react_1.default.createElement("defs", null,
react_1.default.createElement("clipPath", { id: 'clip0_1739_10008' },
react_1.default.createElement("rect", { width: '24', height: '24', fill: 'white' }))))),
login_type === constants_1.LOGIN_TYPE.GOOGLE.code ? constants_1.LOGIN_TYPE.GOOGLE.text : constants_1.LOGIN_TYPE.MICROSOFT.text)))))),
react_1.default.createElement(Banner_1.PHXBanner, { className: 'mt-3', onClose: () => setError(!error), description: 'T\u00E0i kho\u1EA3n ch\u01B0a \u0111\u01B0\u1EE3c \u0111\u0103ng k\u00FD, vui l\u00F2ng li\u00EAn h\u1EC7 admin \u0111\u1EC3 h\u1ED7 tr\u1EE3.', show: error, title: 'Th\u00F4ng b\u00E1o', type: 'warning' })))),
react_1.default.createElement("div", { className: 'relative hidden w-0 flex-1 lg:block lg:w-full' },
react_1.default.createElement("img", { className: 'absolute inset-0 h-full w-full object-cover', src: banner !== null && banner !== void 0 ? banner : 'https://images.unsplash.com/photo-1496917756835-20cb06e75b4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1908&q=80', alt: 'banner' }))))));
};
exports.PHXLoginSsoV3 = PHXLoginSsoV3;
exports.default = exports.PHXLoginSsoV3;
//# sourceMappingURL=login-sso-v3.js.map