phx-react
Version:
PHX REACT
409 lines • 20.6 kB
JavaScript
import { __awaiter, __generator } from "tslib";
import React, { useEffect, useState } from 'react';
import { useLazyQuery } from '@apollo/client';
import Cookies from 'js-cookie';
import { useForm } from 'react-hook-form';
import { PHXInput } from '../Input';
import { PHXButton } from '../Button';
// import { getOTP, getUserInfo, getUserInfoPn28, insertOTP, updatePassword, verifyEmail } from '../../utils/queryLogin'
import { getUserInfoPn28 } from '../../utils/queryLogin';
import { PHXBanner } from '../Banner';
import PHXClientQuery from '../Func/clientQueryV2';
import { PHXCheckbox } from '../Checkbox';
import { isLoggedCookie } from '../../utils/constants';
import { getEnv } from '../../read-env-config';
export var PHXLoginPn28 = function (props) {
var logo = props.logo, banner = props.banner, router = props.router, redirectPath = props.redirectPath;
var _a = useState(true), remember = _a[0], setRemember = _a[1];
var _b = useState(false), loginError = _b[0], setLoginError = _b[1];
var _c = useState(false), formResetPassord = _c[0], setFormResetPassword = _c[1];
var _d = useState(false), formVerifyCode = _d[0], setFormVerifyCode = _d[1];
// const [openAlertSendMail, setOpenAlertSendMail] = useState<boolean>(false)
var _e = useState(false), formNewPassword = _e[0], setFormNewPassword = _e[1];
var _f = 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 = useState(true), isDisabled = _g[0], setIsDisabled = _g[1];
var _h = useState(60), countdown = _h[0], setCountdown = _h[1];
// const [rollBackVerifyCode, setRollBackVerifyCode] = useState<boolean>(false)
var schoolLogo = getEnv('NEXT_PUBLIC_ENV_LOGIN_LOGO', process.env.NEXT_PUBLIC_ENV_LOGIN_LOGO);
var _j = 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 = useLazyQuery(getUserInfoPn28, {
fetchPolicy: 'network-only'
})[0];
var onSubmitForm = function (values) { return __awaiter(void 0, void 0, void 0, function () {
var email, password;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
email = values.email, password = values.password;
setLoading(true);
return [4 /*yield*/, PHXClientQuery(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) {
Cookies.set(isLoggedCookie, userObjectString, { expires: 365 });
}
else {
setLoginError(false);
Cookies.set(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()
// }
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.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("div", { className: 'flex' },
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: '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.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: 'py-auto flex w-[40%] flex-1 flex-col justify-center px-4 sm:px-6 lg:flex-none lg:px-12' },
React.createElement("div", { className: 'lg:w-76 w-full max-w-sm xl:w-96 ml-[5rem]' },
React.createElement("div", { className: 'flex flex-col' },
React.createElement("img", { className: 'max-w-[7rem] mb-3', src: logo !== null && logo !== void 0 ? logo : "".concat(schoolLogo), alt: 'logo' }),
formResetPassord && (React.createElement("div", { className: 'flex items-center mt-2 cursor-pointer', onClick: handleBackPage },
React.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.createElement("path", { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: '2', d: 'M10 19l-7-7m0 0l7-7m-7 7h18' })),
React.createElement("p", { className: 'text-sm cursor-pointer select-none ml-2' }, "Quay l\u1EA1i"))),
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 px-3 py-1.5' },
React.createElement(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.createElement("div", { className: 'mt-5' },
FormLogin(),
React.createElement("div", { className: 'mt-10' },
React.createElement("div", { className: 'relative' },
React.createElement("div", { className: 'absolute inset-0 flex items-center', "aria-hidden": 'true' })))))),
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 PHXLoginPn28;
//# sourceMappingURL=LoginPn28.js.map