phx-react
Version:
PHX REACT
135 lines • 9.35 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.PHXLoginV3 = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var react_hook_form_1 = require("react-hook-form");
var Input_1 = require("../Input");
var Button_1 = require("../Button");
var Banner_1 = require("../Banner");
var constants_1 = require("../../utils/constants");
var read_env_config_1 = require("../../read-env-config");
var saveCookiesClient_1 = tslib_1.__importDefault(require("../Func/saveCookiesClient"));
var Checkbox_1 = require("../Checkbox");
var login_style_1 = tslib_1.__importDefault(require("./login-style"));
var getLoginInfo_1 = tslib_1.__importDefault(require("../Func/getLoginInfo"));
var js_cookie_1 = tslib_1.__importDefault(require("js-cookie"));
var PHXLoginV3 = function (props) {
var logo = props.logo, banner = props.banner, router = props.router, redirectPath = props.redirectPath, buttonColor = props.buttonColor;
var _a = (0, react_1.useState)(true), remember = _a[0], setRemember = _a[1];
var _b = (0, react_1.useState)(false), loginError = _b[0], setLoginError = _b[1];
var _c = (0, react_1.useState)(false), loading = _c[0], setLoading = _c[1];
var authenCookies = (0, getLoginInfo_1["default"])();
var schoolLogo = (0, read_env_config_1.getEnv)('NEXT_PUBLIC_ENV_LOGIN_LOGO', process.env.NEXT_PUBLIC_ENV_LOGIN_LOGO);
var _d = (0, react_hook_form_1.useForm)(), handleSubmit = _d.handleSubmit, register = _d.register, errors = _d.formState.errors;
var uri = (0, read_env_config_1.getEnv)('NEXT_PUBLIC_API_GATEWAY', process.env.NEXT_PUBLIC_API_GATEWAY);
var getTokenInfo = function (email, password) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
var response, error_1;
return tslib_1.__generator(this, function (_a) {
switch (_a.label) {
case 0:
_a.trys.push([0, 3, , 4]);
return [4 /*yield*/, fetch("".concat(uri, "/authen/login"), {
headers: {
'Content-Type': 'application/json'
},
method: 'post',
body: JSON.stringify({
email: email,
password: password
})
})];
case 1:
response = _a.sent();
if (!response.ok)
return [2 /*return*/];
return [4 /*yield*/, response.json()];
case 2: return [2 /*return*/, _a.sent()];
case 3:
error_1 = _a.sent();
console.error(error_1);
return [2 /*return*/, null];
case 4: return [2 /*return*/];
}
});
}); };
var onSubmitForm = function (values) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
var email, password, tokenInfo, userInfo, userObjectString;
return tslib_1.__generator(this, function (_a) {
switch (_a.label) {
case 0:
email = values.email, password = values.password;
setLoading(true);
return [4 /*yield*/, getTokenInfo(email, password)
// sai thông tin đăng nhập
];
case 1:
tokenInfo = _a.sent();
// sai thông tin đăng nhập
if (!tokenInfo || (tokenInfo === null || tokenInfo === void 0 ? void 0 : tokenInfo.message)) {
console.log('login lỗi');
setLoginError(true);
setLoading(false);
return [2 /*return*/];
}
// ghi nhớ tài khoản
return [4 /*yield*/, (0, saveCookiesClient_1["default"])(constants_1.AUTH_TOKEN, JSON.stringify(tokenInfo), true)];
case 2:
// ghi nhớ tài khoản
_a.sent();
userInfo = tokenInfo.userInfo;
if (userInfo && userInfo.roles[0].role_code) {
userObjectString = JSON.stringify(userInfo);
localStorage.setItem(constants_1.isLoggedCookie, userObjectString);
setLoading(false);
setLoginError(false);
router.push(redirectPath);
}
else {
setLoginError(true);
setLoading(false);
}
return [2 /*return*/];
}
});
}); };
var authenToken = typeof window !== 'undefined' && js_cookie_1["default"].get('authToken');
// nếu đã có token login thì push về dasboard
(0, react_1.useEffect)(function () {
if (authenCookies && authenToken) {
window.location.replace(redirectPath);
}
js_cookie_1["default"].remove(constants_1.isLoggedCookie);
}, [authenCookies, authenToken]);
return (react_1["default"].createElement(react_1["default"].Fragment, null,
react_1["default"].createElement(login_style_1["default"], { buttonColor: buttonColor }),
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 : "".concat(schoolLogo), alt: 'logo' }),
react_1["default"].createElement("h2", { style: { fontWeight: '600' }, className: 'mt-3 text-2xl leading-9 tracking-tight text-gray-900' }, "\u0110\u0103ng nh\u1EADp h\u1EC7 th\u1ED1ng"),
loginError && (react_1["default"].createElement("div", { className: 'w-full' },
react_1["default"].createElement(Banner_1.PHXBanner, { show: loginError, className: 'mt-4 mb-2', onClose: function () { return setLoginError(false); }, type: 'danger', title: '\u0110\u0103ng nh\u1EADp th\u1EA5t b\u1EA1i', description: 'Th\u00F4ng tin t\u00E0i kho\u1EA3n kh\u00F4ng ch\u00EDnh x\u00E1c.' }))),
react_1["default"].createElement("form", { onSubmit: handleSubmit(onSubmitForm) },
react_1["default"].createElement("div", { className: 'space-y-6' },
react_1["default"].createElement("div", { className: 'mt-2' },
react_1["default"].createElement(Input_1.PHXInput, { errorType: 'custom-message', label: 'Email',
//@ts-ignore
error: errors.email, register: register('email', {
required: true
}), errorMessageCustom: 'Vui l\u00F2ng nh\u1EADp email' })),
react_1["default"].createElement(Input_1.PHXInput, { errorType: 'custom-message',
//@ts-ignore
error: errors.password, errorMessageCustom: 'Vui l\u00F2ng nh\u1EADp m\u1EADt kh\u1EA9u', register: register('password', {
required: true
}), label: 'Password', type: 'password', id: 'password' }),
react_1["default"].createElement(Checkbox_1.PHXCheckbox, { defaultChecked: remember, title: 'Ghi nh\u1EDB t\u00E0i kho\u1EA3n', onChange: function (e) { return setRemember(e.target.checked); } }),
react_1["default"].createElement(Button_1.PHXButton, { loading: loading, className: 'button-login flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600', primary: true, submit: true, size: 'large' }, "\u0110\u0103ng nh\u1EADp")))))),
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.PHXLoginV3 = PHXLoginV3;
exports["default"] = exports.PHXLoginV3;
//# sourceMappingURL=LoginV3.js.map