phx-react
Version:
PHX REACT
94 lines • 6.93 kB
JavaScript
import { __awaiter, __generator } from "tslib";
import React, { useEffect, useState } from 'react';
import Cookies from 'js-cookie';
import { PHXSkeleton } from '../Skeleton';
import { PHXButton } from '../Button';
import { PHXBanner } from '../Banner';
import { getEnv } from '../../read-env-config';
import { AUTH_TOKEN, AUTHENTICATED, isLoggedCookie } from '../../utils/constants';
import saveCookiesClient from '../Func/saveCookiesClient';
export var PHXLoginSsoV3 = function (props) {
var onClick = props.onClick, banner = props.banner, dataSession = props.dataSession, router = props.router, redirectPath = props.redirectPath, logo = props.logo;
var schoolLogo = getEnv('NEXT_PUBLIC_ENV_LOGIN_LOGO', process.env.NEXT_PUBLIC_ENV_LOGIN_LOGO);
var _a = useState(false), loading = _a[0], setLoading = _a[1];
var _b = useState(false), error = _b[0], setError = _b[1];
var dataLogin = typeof window !== 'undefined' ? localStorage.getItem(isLoggedCookie) : null;
var authToken = Cookies.get(AUTH_TOKEN);
var handlerOnClick = function () {
setLoading(true);
onClick();
};
var handlerSaveCookies = function (session) { return __awaiter(void 0, void 0, void 0, function () {
var token, userInfo, valueAuthen, valueIsLogin;
var _a;
return __generator(this, function (_b) {
switch (_b.label) {
case 0:
token = session.data.token;
userInfo = token.userInfo;
if (!(userInfo && ((_a = userInfo === null || userInfo === void 0 ? void 0 : userInfo.roles) === null || _a === void 0 ? void 0 : _a[0].role_code))) return [3 /*break*/, 2];
valueAuthen = JSON.stringify(token);
saveCookiesClient(AUTH_TOKEN, valueAuthen, true);
valueIsLogin = JSON.stringify(userInfo);
localStorage.setItem(isLoggedCookie, valueIsLogin);
return [4 /*yield*/, dataSession.update({ name: null })];
case 1:
_b.sent();
router === null || router === void 0 ? void 0 : router.push(redirectPath);
return [3 /*break*/, 3];
case 2:
setError(true);
setLoading(false);
_b.label = 3;
case 3: return [2 /*return*/];
}
});
}); };
var handlerCheckLogin = function () {
var _a, _b;
if (!dataLogin || !authToken) {
if (dataSession.status === AUTHENTICATED && ((_b = (_a = dataSession === null || dataSession === void 0 ? void 0 : dataSession.data) === null || _a === void 0 ? void 0 : _a.session.user) === null || _b === void 0 ? void 0 : _b.name)) {
setLoading(true);
handlerSaveCookies(dataSession);
}
else if (dataSession.status === 'loading') {
setLoading(true);
}
else {
setLoading(false);
}
}
else {
router === null || router === void 0 ? void 0 : router.push(redirectPath);
}
};
useEffect(function () {
Cookies.remove(isLoggedCookie);
handlerCheckLogin();
}, [dataSession]);
return (React.createElement(React.Fragment, null,
React.createElement("main", { className: 'flex min-h-full' },
React.createElement("div", { className: 'm-auto flex h-[100vh] max-w-[100vw] flex-1 justify-center' },
React.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.createElement("div", { className: 'lg:w-76 w-full xl:w-96' },
React.createElement("div", { className: 'flex flex-col' },
React.createElement("img", { className: 'max-w-[240px] mb-3', src: logo !== null && logo !== void 0 ? logo : "".concat(schoolLogo), alt: 'logo' })),
React.createElement("div", { className: 'mt-5' },
React.createElement("div", { className: 'space-y-6' }, dataSession.status === 'loading' ? (React.createElement(PHXSkeleton, { className: 'w-full', size: 'extra-large', type: 'only-header' })) : (React.createElement(PHXButton, { loading: loading, disabled: loading, onClick: function () { return handlerOnClick(); }, className: 'flex w-full justify-center items-center', primary: true, submit: true, size: 'medium' },
React.createElement("div", { className: 'flex gap-2 items-center' },
React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '14', height: '14', viewBox: '0 0 24 24', fill: 'none' },
React.createElement("g", { clipPath: 'url(#clip0_1739_10008)' },
React.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.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.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.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.createElement("defs", null,
React.createElement("clipPath", { id: 'clip0_1739_10008' },
React.createElement("rect", { width: '24', height: '24', fill: 'white' })))),
"\u0110\u0103ng nh\u1EADp b\u1EB1ng Microsoft")))),
React.createElement(PHXBanner, { className: 'mt-3', onClose: function () { return setError(!error); }, description: 'T\u00E0i kho\u1EA3n n\u00E0y ch\u01B0a \u0111\u01B0\u1EE3c \u0111\u0103ng k\u00FD tr\u00EAn h\u1EC7 th\u00F4ng vui l\u00F2ng li\u00EAn h\u1EC7 qu\u1EA3n tr\u1ECB vi\u00EAn \u0111\u1EC3 ti\u1EBFp t\u1EE5c.', show: error, title: 'Th\u00F4ng b\u00E1o', type: 'warning' })))),
React.createElement("div", { className: 'relative hidden w-0 flex-1 lg:block lg:w-full' },
React.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' }))))));
};
export default PHXLoginSsoV3;
//# sourceMappingURL=login-sso-v3.js.map