phx-react
Version:
PHX REACT
131 lines • 8.57 kB
JavaScript
import { __awaiter, __generator } from "tslib";
import React, { useEffect, useState } from 'react';
import { useForm } from 'react-hook-form';
import { PHXInput } from '../Input';
import { PHXButton } from '../Button';
import { PHXBanner } from '../Banner';
import { AUTH_TOKEN, isLoggedCookie } from '../../utils/constants';
import { getEnv } from '../../read-env-config';
import saveCookiesClient from '../Func/saveCookiesClient';
import { PHXCheckbox } from '../Checkbox';
import LoginStyle from './login-style';
import PHXFuncGetLoggedInfo from '../Func/getLoginInfo';
import Cookies from 'js-cookie';
export var PHXLoginV3 = function (props) {
var logo = props.logo, banner = props.banner, router = props.router, redirectPath = props.redirectPath, buttonColor = props.buttonColor;
var _a = useState(true), remember = _a[0], setRemember = _a[1];
var _b = useState(false), loginError = _b[0], setLoginError = _b[1];
var _c = useState(false), loading = _c[0], setLoading = _c[1];
var authenCookies = PHXFuncGetLoggedInfo();
var schoolLogo = getEnv('NEXT_PUBLIC_ENV_LOGIN_LOGO', process.env.NEXT_PUBLIC_ENV_LOGIN_LOGO);
var _d = useForm(), handleSubmit = _d.handleSubmit, register = _d.register, errors = _d.formState.errors;
var uri = getEnv('NEXT_PUBLIC_API_GATEWAY', process.env.NEXT_PUBLIC_API_GATEWAY);
var getTokenInfo = function (email, password) { return __awaiter(void 0, void 0, void 0, function () {
var response, error_1;
return __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 __awaiter(void 0, void 0, void 0, function () {
var email, password, tokenInfo, userInfo, userObjectString;
return __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*/, saveCookiesClient(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(isLoggedCookie, userObjectString);
setLoading(false);
setLoginError(false);
router.push(redirectPath);
}
else {
setLoginError(true);
setLoading(false);
}
return [2 /*return*/];
}
});
}); };
var authenToken = typeof window !== 'undefined' && Cookies.get('authToken');
// nếu đã có token login thì push về dasboard
useEffect(function () {
if (authenCookies && authenToken) {
window.location.replace(redirectPath);
}
Cookies.remove(isLoggedCookie);
}, [authenCookies, authenToken]);
return (React.createElement(React.Fragment, null,
React.createElement(LoginStyle, { buttonColor: buttonColor }),
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("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.createElement("div", { className: 'w-full' },
React.createElement(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.createElement("form", { onSubmit: handleSubmit(onSubmitForm) },
React.createElement("div", { className: 'space-y-6' },
React.createElement("div", { className: 'mt-2' },
React.createElement(PHXInput, { errorType: 'custom-message', label: 'Email',
//@ts-ignore
error: errors.email, register: register('email', {
required: true
}), errorMessageCustom: 'Vui l\u00F2ng nh\u1EADp email' })),
React.createElement(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.createElement(PHXCheckbox, { defaultChecked: remember, title: 'Ghi nh\u1EDB t\u00E0i kho\u1EA3n', onChange: function (e) { return setRemember(e.target.checked); } }),
React.createElement(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.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 PHXLoginV3;
//# sourceMappingURL=LoginV3.js.map