phx-react
Version:
PHX REACT
413 lines • 21.4 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.PHXLoginPn28 = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var client_1 = require("@apollo/client");
var js_cookie_1 = tslib_1.__importDefault(require("js-cookie"));
var react_hook_form_1 = require("react-hook-form");
var Input_1 = require("../Input");
var Button_1 = require("../Button");
// import { getOTP, getUserInfo, getUserInfoPn28, insertOTP, updatePassword, verifyEmail } from '../../utils/queryLogin'
var queryLogin_1 = require("../../utils/queryLogin");
var Banner_1 = require("../Banner");
var clientQueryV2_1 = tslib_1.__importDefault(require("../Func/clientQueryV2"));
var Checkbox_1 = require("../Checkbox");
var constants_1 = require("../../utils/constants");
var read_env_config_1 = require("../../read-env-config");
var PHXLoginPn28 = function (props) {
var logo = props.logo, banner = props.banner, router = props.router, redirectPath = props.redirectPath;
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), formResetPassord = _c[0], setFormResetPassword = _c[1];
var _d = (0, react_1.useState)(false), formVerifyCode = _d[0], setFormVerifyCode = _d[1];
// const [openAlertSendMail, setOpenAlertSendMail] = useState<boolean>(false)
var _e = (0, react_1.useState)(false), formNewPassword = _e[0], setFormNewPassword = _e[1];
var _f = (0, react_1.useState)(false), loading = _f[0], setLoading = _f[1];
// const [alertUpdatePassword, setAlertUpdatePassword] = useState<boolean>(false)
// const [accountId, setAccountId] = useState<number>(0)
// const [timeOutVerifyCode, setTimeOutVerifyCode] = useState<boolean>(false)
// const [falseVerifyCode, setFalseVerifyCode] = useState<boolean>(false)
// const [notificationMail, setNotificationMail] = useState<boolean>(false)
var _g = (0, react_1.useState)(true), isDisabled = _g[0], setIsDisabled = _g[1];
var _h = (0, react_1.useState)(60), countdown = _h[0], setCountdown = _h[1];
// const [rollBackVerifyCode, setRollBackVerifyCode] = useState<boolean>(false)
var schoolLogo = (0, read_env_config_1.getEnv)('NEXT_PUBLIC_ENV_LOGIN_LOGO', process.env.NEXT_PUBLIC_ENV_LOGIN_LOGO);
var _j = (0, react_hook_form_1.useForm)(), handleSubmit = _j.handleSubmit, register = _j.register, errors = _j.formState.errors, reset = _j.reset;
// const password = watch('newPassword')
// const confirmPassword = watch('confirmPassword')
// const email = watch('verifyEmail')
// const verifyCode = watch('verify')
// const [getVerifyEmail] = useLazyQuery(verifyEmail, {
// variables: { email },
// })
// const [getOtpCode] = useLazyQuery(getOTP, {
// fetchPolicy: 'network-only',
// })
// const [updatePasswordMutation] = useMutation(updatePassword, {
// fetchPolicy: 'network-only',
// })
// const [insertOtpCode] = useMutation(insertOTP, {
// fetchPolicy: 'network-only',
// })
var loginAction = (0, client_1.useLazyQuery)(queryLogin_1.getUserInfoPn28, {
fetchPolicy: 'network-only'
})[0];
var onSubmitForm = function (values) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
var email, password;
return tslib_1.__generator(this, function (_a) {
switch (_a.label) {
case 0:
email = values.email, password = values.password;
setLoading(true);
return [4 /*yield*/, (0, clientQueryV2_1["default"])(loginAction, {
variables: {
email: email,
password: password
}
})
.then(function (res) {
var _a, _b, _c, _d, _e;
if (((_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.users) === null || _b === void 0 ? void 0 : _b.length) > 0) {
setLoginError(false);
var userObjectString = JSON.stringify((_c = res.data) === null || _c === void 0 ? void 0 : _c.users[0]);
if (remember) {
js_cookie_1["default"].set(constants_1.isLoggedCookie, userObjectString, { expires: 365 });
}
else {
setLoginError(false);
js_cookie_1["default"].set(constants_1.isLoggedCookie, userObjectString);
}
router.push(redirectPath);
}
else if (((_e = (_d = res.data) === null || _d === void 0 ? void 0 : _d.users) === null || _e === void 0 ? void 0 : _e.length) === 0) {
setLoginError(true);
}
else {
console.log('login error!');
setLoginError(true);
}
})["catch"](function (err) {
setLoading(false);
setLoginError(true);
console.log(err);
})];
case 1:
_a.sent();
setLoading(false);
reset();
return [2 /*return*/];
}
});
}); };
// const generateRandomCode = () => {
// const min = 10000
// const max = 99999
// const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min
// const randomCode = randomNumber.toString()
// return randomCode
// }
// const randomCode = generateRandomCode()
// const otp_time = new Date()
// const onSubmitVerityEmail = async () => {
// const { data } = await getVerifyEmail({ variables: { email } })
// if (data.users.length > 0) {
// localStorage.setItem('account_id', data.users[0]?.id)
// const users_id: any = localStorage.getItem('account_id')
// setAccountId(+users_id)
// await insertOtpCode({
// variables: {
// users_id: users_id,
// otp_code: randomCode,
// expiration_time: otp_time,
// },
// })
// const dataSendMail: SendMailData = {
// to: email,
// subject: `Mã xác thực tài khoản`,
// text: `Mã xác thực tài khoản của bạn là: ${randomCode},vui lòng không chia sẻ mã này cho ai`,
// }
// await emailService
// .sendEmail(dataSendMail)
// .then((res) => {
// console.log('res', res)
// })
// .catch((err) => {
// console.log(err)
// })
// setFormVerifyCode(true)
// setOpenAlertSendMail(true)
// } else {
// setNotificationMail(true)
// }
// reset()
// }
// const onSubmitOtpCode = async () => {
// const { data: user_data } = await getOtpCode({
// variables: {
// users_id: accountId,
// },
// })
// const matchedOTP = user_data?.otp_verify?.find((otp: { otp_code: number }) => {
// return otp.otp_code == verifyCode
// })
// if (matchedOTP) {
// const oneMinuteInMilliseconds = 60 * 1000
// const currentTime: any = new Date()
// const otpTime: any = new Date(matchedOTP.expiration_time)
// const timeDifference = Math.abs(currentTime - otpTime)
// if (timeDifference <= oneMinuteInMilliseconds) {
// console.log('Mã hợp lệ ')
// setFormNewPassword(true)
// } else {
// console.log('Mã đã hết thời gian sử dụng')
// setTimeOutVerifyCode(true)
// }
// } else {
// console.log('Mã xác thực không chính xác hoặc không tồn tại!')
// setFalseVerifyCode(true)
// }
// reset()
// }
// const onUpdatePassword = async () => {
// await updatePasswordMutation({
// variables: {
// id: accountId,
// password,
// },
// })
// setAlertUpdatePassword(true)
// setFormNewPassword(false)
// setFormResetPassword(false)
// setFormVerifyCode(false)
// reset()
// }
// const handleResetTimeOTP = async () => {
// setCountdown(60)
// setIsDisabled(true)
// const newRandomCode = generateRandomCode()
// await insertOtpCode({
// variables: {
// users_id: accountId,
// otp_code: newRandomCode,
// expiration_time: otp_time,
// },
// })
// const dataSendMail: SendMailData = {
// to: email,
// subject: `Mã xác thực tài khoản`,
// text: `Mã xác thực tài khoản của bạn là: ${newRandomCode},vui lòng không chia sẻ mã này cho ai`,
// }
// await emailService
// .sendEmail(dataSendMail)
// .then((res) => {
// console.log('res', res)
// })
// .catch((err) => {
// console.log(err)
// })
// setRollBackVerifyCode(true)
// reset()
// }
(0, react_1.useEffect)(function () {
var timer = setInterval(function () {
if (countdown > 0 && formVerifyCode && isDisabled === true) {
setCountdown(countdown - 1);
}
else {
setIsDisabled(false);
clearInterval(timer);
}
}, 1000);
return function () { return clearInterval(timer); };
}, [countdown, formVerifyCode, isDisabled]);
// const timeOutNotifications = 3000
// const FormNewPassowrd = () => {
// return (
// <form onSubmit={handleSubmit(onUpdatePassword)}>
// <div className='space-y-6'>
// <PHXInput
// errorType='custom-message'
// errorMessageCustom='Vui lòng nhập thông tin'
// //@ts-ignore
// error={errors.newPassword}
// register={register('newPassword', {
// required: true,
// })}
// label='Mật khẩu mới'
// id='newPassword'
// />
// <PHXInput
// errorMessageCustom='Vui lòng nhập thông tin'
// errorType='custom-message'
// //@ts-ignore
// error={errors.confirmPassword}
// register={register('confirmPassword', {
// required: true,
// })}
// label='Nhập lại mật khẩu'
// id='confirmPassword'
// />
// {password !== confirmPassword && <p className='text-xs text-red-800'>Mật khẩu không trùng nhau</p>}
// </div>
// <PHXButton
// className='mt-5 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
// submit
// size='medium'
// >
// Cập nhật mật khẩu
// </PHXButton>
// </form>
// )
// }
// const FormVerifyCode = () => {
// return (
// <form onSubmit={handleSubmit(onSubmitOtpCode)}>
// {timeOutVerifyCode && (
// <PHXBanner
// className='mb-5'
// onClose={() => setTimeOutVerifyCode(false)}
// show={timeOutVerifyCode}
// type='danger'
// title='Lỗi!'
// description='Mã đã hết hạn sử dụng!'
// />
// )}
// {falseVerifyCode && (
// <PHXBanner
// className='mb-5'
// onClose={() => setFalseVerifyCode(false)}
// show={falseVerifyCode}
// type='danger'
// title='Lỗi!'
// description='Mã xác thực không chính xác!'
// />
// )}
// <PHXInput
// maxLength={5}
// errorType='custom-message'
// //@ts-ignore
// error={errors.verify}
// register={register('verify', {
// required: true,
// pattern: {
// value: /^[1-9]\d*$/,
// message: '',
// },
// })}
// errorMessageCustom='Vui lòng nhập mã xác thực'
// name='verify'
// label='Nhập mã xác thực'
// id='verify'
// />
// <PHXButton
// disabled={verifyCode === '' || verifyCode < 10000}
// className={`mt-5 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 ${
// verifyCode === '' || verifyCode < 10000 ? 'cursor-not-allowed' : ''
// }`}
// primary
// submit
// size='medium'
// >
// Xác thực tài khoản
// </PHXButton>
// <PHXButton
// disabled={isDisabled}
// onClick={handleResetTimeOTP}
// className={`mt-5 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 ${
// isDisabled ? 'cursor-not-allowed' : ''
// }`}
// primary
// size='medium'
// >
// {`Gửi lại mã ${
// formVerifyCode && countdown > 0 ? (countdown && isDisabled === true ? formVerifyCode && countdown : '') : ''
// }`}
// </PHXButton>
// </form>
// )
// }
// const FormVerifyEmail = () => {
// return (
// <form onSubmit={handleSubmit(onSubmitVerityEmail)}>
// <div className='mt-2'>
// <PHXInput
// errorType='custom-message'
// label='Nhập email đăng ký tài khoản'
// //@ts-ignore
// error={errors.verifyEmail}
// register={register('verifyEmail', {
// required: true,
// })}
// name='verifyEmail'
// errorMessageCustom='Vui lòng nhập email'
// />
// </div>
// <PHXButton
// className='mt-5 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
// submit
// size='medium'
// >
// Xác minh email
// </PHXButton>
// </form>
// )
// }
var FormLogin = function () {
return (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("div", { className: 'flex' },
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: '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"))));
};
var handleBackPage = function () {
console.log('click vào đây');
switch (true) {
case formVerifyCode:
setFormVerifyCode(false);
break;
case formNewPassword:
setFormNewPassword(false);
break;
default:
setFormResetPassword(false);
break;
}
};
return (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: 'py-auto flex w-[40%] flex-1 flex-col justify-center px-4 sm:px-6 lg:flex-none lg:px-12' },
react_1["default"].createElement("div", { className: 'lg:w-76 w-full max-w-sm xl:w-96 ml-[5rem]' },
react_1["default"].createElement("div", { className: 'flex flex-col' },
react_1["default"].createElement("img", { className: 'max-w-[7rem] mb-3', src: logo !== null && logo !== void 0 ? logo : "".concat(schoolLogo), alt: 'logo' }),
formResetPassord && (react_1["default"].createElement("div", { className: 'flex items-center mt-2 cursor-pointer', onClick: handleBackPage },
react_1["default"].createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', className: 'w-50 h-4 cursor-pointer' },
react_1["default"].createElement("path", { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: '2', d: 'M10 19l-7-7m0 0l7-7m-7 7h18' })),
react_1["default"].createElement("p", { className: 'text-sm cursor-pointer select-none ml-2' }, "Quay l\u1EA1i"))),
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 px-3 py-1.5' },
react_1["default"].createElement(Banner_1.PHXBanner, { show: loginError, className: 'mt-10', 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("div", { className: 'mt-5' },
FormLogin(),
react_1["default"].createElement("div", { className: 'mt-10' },
react_1["default"].createElement("div", { className: 'relative' },
react_1["default"].createElement("div", { className: 'absolute inset-0 flex items-center', "aria-hidden": 'true' })))))),
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.PHXLoginPn28 = PHXLoginPn28;
exports["default"] = exports.PHXLoginPn28;
//# sourceMappingURL=LoginPn28.js.map