You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
505 lines
29 KiB
505 lines
29 KiB
import React, { useEffect, useState } from "react";
|
|
import { Link } from "react-router-dom";
|
|
import { useSelector, useDispatch } from "react-redux";
|
|
import {
|
|
userConstants,
|
|
configConstants,
|
|
alertConstants,
|
|
} from "../../../_constants";
|
|
import { alertActions } from "../../../_actions";
|
|
// import SocialLogin from "../../../_components/SocialLogin";
|
|
import { Alert } from "../../../_components/Alert";
|
|
// import from "../../../_components/Input";
|
|
import "./Login.scss";
|
|
import InputText from "../../../_components/Auth/InputText";
|
|
import { isEmail } from "../../../_helpers/validateEmail";
|
|
import GoogleLogin from "react-google-login";
|
|
// import FacebookLogin from "react-facebook-login/dist/facebook-login-render-props";
|
|
import AppleLogin from "react-apple-login";
|
|
import { apiCaller, history } from "../../../_helpers";
|
|
import classNames from "classnames";
|
|
import SocialLogin from "../../../_components/Auth/SocialLogin";
|
|
import { PopUpYesNo } from "../../../_components/Popup";
|
|
|
|
function Login(props) {
|
|
const alert = useSelector((state) => state.alert);
|
|
const dispatch = useDispatch();
|
|
const [dataResetEmail, setDataResetEmail] = useState({
|
|
loading: false,
|
|
msg: "Gửi lại email kích hoạt khác",
|
|
});
|
|
const [savePassword, setSavePassword] = useState(
|
|
localStorage.getItem("save_pw") === "true"
|
|
);
|
|
// fb
|
|
const [isProcessingFb, setIsProcessingFb] = useState(false);
|
|
|
|
const registerStatus = useSelector(
|
|
(state) => state.authenticationTeacherZalo.registerStatus
|
|
);
|
|
|
|
const {
|
|
email,
|
|
setEmail,
|
|
password,
|
|
setPassword,
|
|
emailError,
|
|
setEmailError,
|
|
pwError,
|
|
setPwError,
|
|
handleSubmit,
|
|
// onLoginFacebookSuccess,
|
|
onLoginGoogleSuccess,
|
|
onLoginAppleSuccess,
|
|
validateParam,
|
|
} = props;
|
|
|
|
useEffect(() => {
|
|
dispatch({ type: userConstants.RESET_REGISTER_STATUS });
|
|
dispatch({ type: userConstants.RESET_LOGIN_WHEN_NOT_VERIFY });
|
|
}, []);
|
|
|
|
const changeEmail = (value) => {
|
|
if (alert.message && alert.screen === userConstants.SCREEN_LOGIN) {
|
|
dispatch(alertActions.clear());
|
|
}
|
|
if (emailError) {
|
|
if (isEmail(value)) {
|
|
setEmailError("");
|
|
}
|
|
}
|
|
setEmail(value.trim());
|
|
};
|
|
|
|
const changePassword = (value) => {
|
|
setPwError("");
|
|
if (alert.message && alert.screen === userConstants.SCREEN_LOGIN) {
|
|
dispatch(alertActions.clear());
|
|
}
|
|
if (pwError) {
|
|
if (value.length >= 6) {
|
|
setPwError("");
|
|
}
|
|
}
|
|
setPassword(value);
|
|
};
|
|
|
|
const onBlurField = (type) => {
|
|
switch (type) {
|
|
case "email": {
|
|
if (email && !emailError && !isEmail(email)) {
|
|
setEmailError("Định dạng email không đúng");
|
|
}
|
|
return;
|
|
}
|
|
default: {
|
|
if (password.trim() === "" && !pwError) {
|
|
setPwError(
|
|
"Mật khẩu cần tối thiểu 6 kí tự và không gồm toàn dấu cách"
|
|
);
|
|
}
|
|
if (password && !pwError && password.length < 6) {
|
|
setPwError("Mật khẩu phải có từ 6 ký tự trở lên");
|
|
}
|
|
return;
|
|
}
|
|
}
|
|
};
|
|
|
|
const renderEmailIcon = () => {
|
|
return (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 24 24"><path fill="#00B9B7" fill-rule="evenodd" d="M12 1.25a4.75 4.75 0 1 0 0 9.5a4.75 4.75 0 0 0 0-9.5M8.75 6a3.25 3.25 0 1 1 6.5 0a3.25 3.25 0 0 1-6.5 0M12 12.25c-2.313 0-4.445.526-6.024 1.414C4.42 14.54 3.25 15.866 3.25 17.5v.102c-.001 1.162-.002 2.62 1.277 3.662c.629.512 1.51.877 2.7 1.117c1.192.242 2.747.369 4.773.369s3.58-.127 4.774-.369c1.19-.24 2.07-.605 2.7-1.117c1.279-1.042 1.277-2.5 1.276-3.662V17.5c0-1.634-1.17-2.96-2.725-3.836c-1.58-.888-3.711-1.414-6.025-1.414M4.75 17.5c0-.851.622-1.775 1.961-2.528c1.316-.74 3.184-1.222 5.29-1.222c2.104 0 3.972.482 5.288 1.222c1.34.753 1.961 1.677 1.961 2.528c0 1.308-.04 2.044-.724 2.6c-.37.302-.99.597-2.05.811c-1.057.214-2.502.339-4.476.339c-1.974 0-3.42-.125-4.476-.339c-1.06-.214-1.68-.509-2.05-.81c-.684-.557-.724-1.293-.724-2.601" clip-rule="evenodd"/></svg>
|
|
);
|
|
};
|
|
|
|
const renderPasswordIcon = () => {
|
|
return (
|
|
<svg
|
|
width="24"
|
|
height="30"
|
|
viewBox="0 0 24 30"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M20.7312 29.1361H3.94824C3.12902 29.1316 2.34484 28.8029 1.76715 28.222C1.18946 27.6412 0.865222 26.8552 0.865234 26.036V12.8629C0.866293 12.0456 1.1914 11.2621 1.76935 10.6842C2.34729 10.1063 3.1309 9.78097 3.94824 9.77991H4.7912V8.53601C4.7912 6.53363 5.58666 4.61329 7.00256 3.19739C8.41846 1.78149 10.3388 0.985962 12.3412 0.985962C14.3436 0.985962 16.264 1.78149 17.6799 3.19739C19.0958 4.61329 19.8912 6.53363 19.8912 8.53601V9.77991H20.7342C21.5534 9.77989 22.3393 10.1043 22.9202 10.682C23.5011 11.2597 23.8297 12.0437 23.8342 12.8629V26.036C23.8321 26.8581 23.5044 27.6457 22.9229 28.2267C22.3413 28.8077 21.5532 29.1348 20.7312 29.1361ZM3.94824 11.3361C3.54627 11.3415 3.16225 11.5035 2.87799 11.7877C2.59373 12.072 2.43164 12.4561 2.42621 12.858V26.0311C2.42381 26.4375 2.58276 26.828 2.8681 27.1173C3.15345 27.4066 3.54192 27.5709 3.94824 27.5741H20.7312C21.1403 27.5736 21.5325 27.4107 21.8217 27.1215C22.111 26.8322 22.2737 26.4402 22.2742 26.0311V12.858C22.2708 12.4518 22.1064 12.0635 21.8172 11.7782C21.528 11.4929 21.1374 11.3339 20.7312 11.3361H18.3312V8.53113C18.3312 6.94328 17.7004 5.42027 16.5776 4.29749C15.4549 3.17471 13.9321 2.54407 12.3442 2.54407C10.7564 2.54407 9.23356 3.17471 8.11078 4.29749C6.988 5.42027 6.35724 6.94328 6.35724 8.53113V11.3361H3.94824ZM13.3262 26.65H11.7182C11.4462 26.6498 11.1854 26.5416 10.993 26.3492C10.8007 26.1569 10.6925 25.8959 10.6922 25.6239V22.7511C10.1144 22.4294 9.63341 21.9585 9.29926 21.3878C8.9651 20.8171 8.79003 20.1673 8.79224 19.506C8.79224 19.0154 8.88885 18.5296 9.0766 18.0763C9.26435 17.623 9.53955 17.2113 9.88647 16.8644C10.2334 16.5175 10.6452 16.2421 11.0985 16.0543C11.5518 15.8666 12.0376 15.7699 12.5282 15.7699C13.0188 15.7699 13.5047 15.8666 13.9579 16.0543C14.4112 16.2421 14.8231 16.5175 15.17 16.8644C15.5169 17.2113 15.792 17.623 15.9798 18.0763C16.1675 18.5296 16.2642 19.0154 16.2642 19.506C16.2664 20.1673 16.0914 20.8171 15.7572 21.3878C15.423 21.9585 14.942 22.4294 14.3642 22.7511V25.6239C14.3613 25.8972 14.2507 26.1583 14.0563 26.3505C13.8619 26.5426 13.5995 26.6503 13.3262 26.65ZM12.2532 25.089H12.8122V21.724L13.3122 21.5311C13.7867 21.3492 14.1826 21.0069 14.431 20.5636C14.6795 20.1203 14.7649 19.6041 14.6724 19.1044C14.5799 18.6047 14.3154 18.153 13.9247 17.828C13.534 17.503 13.0419 17.3251 12.5337 17.3251C12.0255 17.3251 11.5334 17.503 11.1428 17.828C10.7521 18.153 10.4875 18.6047 10.395 19.1044C10.3025 19.6041 10.388 20.1203 10.6364 20.5636C10.8849 21.0069 11.2807 21.3492 11.7552 21.5311L12.2552 21.724L12.2532 25.089ZM16.8322 11.3361H7.8512V8.53113C7.8512 7.34017 8.32431 6.19797 9.16644 5.35583C10.0086 4.5137 11.1508 4.04041 12.3417 4.04041C13.5327 4.04041 14.6748 4.5137 15.517 5.35583C16.3591 6.19797 16.8322 7.34017 16.8322 8.53113V11.3361ZM9.41223 9.77502H15.2682V8.53113C15.2682 7.75418 14.9595 7.00898 14.4102 6.45959C13.8608 5.91021 13.1156 5.60144 12.3387 5.60144C11.5617 5.60144 10.8167 5.91021 10.2673 6.45959C9.71789 7.00898 9.40924 7.75418 9.40924 8.53113L9.41223 9.77502Z"
|
|
fill="#00B9B7"
|
|
/>
|
|
</svg>
|
|
);
|
|
};
|
|
|
|
const resentEmail = () => {
|
|
if (!dataResetEmail.loading) {
|
|
setDataResetEmail({
|
|
loading: true,
|
|
msg: "Đang gửi...",
|
|
});
|
|
apiCaller(`/api_register/resend_active_email?email=${email}`)
|
|
.then((res) => {
|
|
if (res.status) {
|
|
setDataResetEmail({
|
|
loading: true,
|
|
msg: "Gửi email xác nhận thành công",
|
|
});
|
|
setTimeout(() => {
|
|
dispatch(alertActions.clear());
|
|
setDataResetEmail({
|
|
loading: false,
|
|
msg: "Gửi lại email kích hoạt khác",
|
|
});
|
|
}, 5000);
|
|
} else {
|
|
setDataResetEmail({
|
|
loading: true,
|
|
msg: "Gửi email xác nhận thất bại",
|
|
});
|
|
setTimeout(() => {
|
|
setDataResetEmail({
|
|
loading: false,
|
|
msg: "Gửi lại email kích hoạt khác",
|
|
});
|
|
}, 3000);
|
|
}
|
|
})
|
|
.catch((e) => {
|
|
setDataResetEmail({
|
|
loading: true,
|
|
msg: "Gửi email xác nhận thất bại",
|
|
});
|
|
setTimeout(() => {
|
|
setDataResetEmail({
|
|
loading: false,
|
|
msg: "Gửi lại email kích hoạt khác",
|
|
});
|
|
}, 3000);
|
|
});
|
|
}
|
|
};
|
|
|
|
const rememberPassword = (e) => {
|
|
const checked = e.target.checked;
|
|
setSavePassword(checked);
|
|
localStorage.setItem("save_pw", checked);
|
|
};
|
|
|
|
function setNodeRef(provider, node) {
|
|
if (node) {
|
|
// nodes[provider] = node;
|
|
}
|
|
}
|
|
|
|
const handleToVerify = () => {
|
|
const data = {
|
|
phone: "",
|
|
email: email,
|
|
};
|
|
dispatch({ type: userConstants.LOGIN_WHEN_NOT_VERIFY });
|
|
history.push(`/register/authentication`, { data: data });
|
|
dispatch({ type: userConstants.RESET_REGISTER_STATUS });
|
|
};
|
|
|
|
return (
|
|
<div className="sunE-form-container login-form-container">
|
|
{registerStatus && (
|
|
<PopUpYesNo
|
|
message={
|
|
alert?.message
|
|
? alert?.message
|
|
: "Tài khoản chưa được xác thực. Vui lòng xác thực để có thể đăng nhập và sử dụng tài khoản."
|
|
}
|
|
hideButtonNo={true}
|
|
labelYes={"Đồng ý"}
|
|
onClickYes={handleToVerify}
|
|
/>
|
|
)}
|
|
<div className="sunE-custom-form login-form-container_content responsive_small_screen_margin_login">
|
|
<h2 className="title text-center">Đăng nhập</h2>
|
|
{alert.message &&
|
|
!registerStatus &&
|
|
alert.message !==
|
|
"Tài khoản chưa được kích hoạt, vui lòng kiểm tra email và kích hoạt tài khoản trước khi sử dụng." &&
|
|
alert.screen === userConstants.SCREEN_LOGIN && (
|
|
<Alert alert={alert} />
|
|
)}
|
|
<form
|
|
className="sunE-login-app"
|
|
onSubmit={handleSubmit}
|
|
noValidate={true}
|
|
>
|
|
{alert.message &&
|
|
alert.screen === userConstants.SCREEN_LOGIN &&
|
|
alert.message ===
|
|
"Tài khoản chưa được kích hoạt, vui lòng kiểm tra email và kích hoạt tài khoản trước khi sử dụng." ? (
|
|
<div className="login_error_server">
|
|
<p className="text-center">{alert.message}</p>
|
|
<div className="resend_email text-center" onClick={resentEmail}>
|
|
<span>{dataResetEmail.msg}</span>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
<InputText
|
|
value={email}
|
|
setValue={changeEmail}
|
|
type="text"
|
|
name="email"
|
|
placeholder="Nhập username"
|
|
required={true}
|
|
renderLabelIcon={renderEmailIcon}
|
|
errorText={emailError}
|
|
onBlur={() => {
|
|
onBlurField("email");
|
|
}}
|
|
setErrorText={setEmailError}
|
|
autoComplete={savePassword ? "on" : "new-password"}
|
|
autoFocus={true}
|
|
></InputText>
|
|
<InputText
|
|
value={password}
|
|
setValue={changePassword}
|
|
type="password"
|
|
name="password"
|
|
placeholder="Nhập mật khẩu"
|
|
required={true}
|
|
renderLabelIcon={renderPasswordIcon}
|
|
errorText={pwError}
|
|
setErrorText={setPwError}
|
|
onBlur={() => {
|
|
onBlurField("password");
|
|
}}
|
|
onFocus={() => setPassword(password.trim())}
|
|
autoComplete={savePassword ? "on" : "new-password"}
|
|
></InputText>
|
|
<div className="flex-m password_options">
|
|
{/* <div className="flex-1 save_password">
|
|
<input
|
|
className="save_password_checkbox"
|
|
type="checkbox"
|
|
id="savePassword"
|
|
name="savePassword"
|
|
onChange={rememberPassword}
|
|
checked={savePassword}
|
|
/>
|
|
<label htmlFor="savePassword" className="no_select">
|
|
Nhớ mật khẩu
|
|
</label>
|
|
</div> */}
|
|
<div className="flex-1 text-center">
|
|
<Link to="/forgot-password">Quên mật khẩu?</Link>
|
|
</div>
|
|
</div>
|
|
<div className="button_submit">
|
|
<button
|
|
type="submit"
|
|
className={
|
|
"btn-line-blue" + (!validateParam() ? " btn-disable" : "")
|
|
}
|
|
>
|
|
Đăng nhập
|
|
</button>
|
|
</div>
|
|
<div className="login_social_wrapper hide">
|
|
<div className="line_or">
|
|
<hr />
|
|
<span>hoặc</span>
|
|
</div>
|
|
<div className="social_login">
|
|
{/* <div className="social_login_item">
|
|
<FacebookLogin
|
|
appId={configConstants.APP_ID_FACEBOOK}
|
|
callback={onLoginFacebookSuccess}
|
|
onClick={componentClicked}
|
|
render={(renderProps) => (
|
|
<div
|
|
className={classNames({ fb_disabled: renderProps.isProcessing }, "facebook social_login_container")}
|
|
onClick={(data) => {
|
|
if (!renderProps.isProcessing) {
|
|
renderProps.onClick(data);
|
|
}
|
|
}}
|
|
>
|
|
{renderProps.isProcessing ? (
|
|
<div className="loading_fb">
|
|
<div class="snippet" data-title=".dot-pulse">
|
|
<div class="stage">
|
|
<div class="dot-pulse"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<svg width="14" height="28" viewBox="0 0 14 28" fill="none" xmlns="http://www.w3.org/2000/svg" className="icon">
|
|
<path
|
|
d="M0.173828 13.9739C0.173828 12.4929 0.173828 11.059 0.173828 9.62596C0.173828 9.31496 0.360826 9.25791 0.608826 9.25791C1.19783 9.25791 1.78983 9.22086 2.37283 9.27586C2.91183 9.32586 3.04784 9.11086 3.02484 8.62486C2.96465 7.45396 2.98268 6.28041 3.07883 5.11192C3.14211 3.8318 3.69629 2.6253 4.62619 1.74327C5.55609 0.861231 6.79017 0.371564 8.07184 0.375957C9.51084 0.340957 10.9508 0.344879 12.3898 0.295879C12.9238 0.277879 13.0968 0.459952 13.0798 0.995952C13.0448 2.14795 13.0488 3.30194 13.0798 4.45494C13.0918 4.92094 12.9208 5.04996 12.4798 5.02696C11.8528 4.99396 11.2228 5.0099 10.5938 5.0189C9.38084 5.0349 8.88582 5.46289 8.78082 6.65489C8.72082 7.33789 8.75783 8.02885 8.72183 8.71385C8.70083 9.12185 8.86984 9.23891 9.25684 9.23191C10.3118 9.21291 11.3668 9.24085 12.4218 9.21385C12.8878 9.20185 13.0218 9.36094 12.9758 9.81394C12.8338 11.0806 12.7122 12.3472 12.6108 13.6139C12.5758 14.0449 12.3298 14.086 11.9928 14.084C10.9618 14.077 9.93084 14.084 8.80884 14.084C8.80884 15.096 8.80884 16.0599 8.80884 17.0229C8.81417 20.3403 8.82018 23.6576 8.82684 26.975C8.82684 27.808 8.81283 27.8219 7.97083 27.8229C6.57083 27.8229 5.17084 27.8229 3.77084 27.8229C3.01484 27.8229 2.99484 27.7999 2.99484 27.0229C2.99484 22.9563 2.99484 18.8895 2.99484 14.8229C2.99484 13.9809 2.99483 14.003 2.14383 14.032C1.48711 14.0882 0.826102 14.0686 0.173828 13.9739Z"
|
|
fill="white"
|
|
/>
|
|
</svg>
|
|
<div>
|
|
<span>Facebook</span>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
/>
|
|
<div
|
|
className={"facebook social_login_container"}
|
|
onClick={() => {
|
|
if (isReady) {
|
|
FBInstance.getLoginStatus((response) => {
|
|
onLoginFacebookSuccess(response);
|
|
});
|
|
}
|
|
}}
|
|
>
|
|
<svg width="14" height="28" viewBox="0 0 14 28" fill="none" xmlns="http://www.w3.org/2000/svg" className="icon">
|
|
<path
|
|
d="M0.173828 13.9739C0.173828 12.4929 0.173828 11.059 0.173828 9.62596C0.173828 9.31496 0.360826 9.25791 0.608826 9.25791C1.19783 9.25791 1.78983 9.22086 2.37283 9.27586C2.91183 9.32586 3.04784 9.11086 3.02484 8.62486C2.96465 7.45396 2.98268 6.28041 3.07883 5.11192C3.14211 3.8318 3.69629 2.6253 4.62619 1.74327C5.55609 0.861231 6.79017 0.371564 8.07184 0.375957C9.51084 0.340957 10.9508 0.344879 12.3898 0.295879C12.9238 0.277879 13.0968 0.459952 13.0798 0.995952C13.0448 2.14795 13.0488 3.30194 13.0798 4.45494C13.0918 4.92094 12.9208 5.04996 12.4798 5.02696C11.8528 4.99396 11.2228 5.0099 10.5938 5.0189C9.38084 5.0349 8.88582 5.46289 8.78082 6.65489C8.72082 7.33789 8.75783 8.02885 8.72183 8.71385C8.70083 9.12185 8.86984 9.23891 9.25684 9.23191C10.3118 9.21291 11.3668 9.24085 12.4218 9.21385C12.8878 9.20185 13.0218 9.36094 12.9758 9.81394C12.8338 11.0806 12.7122 12.3472 12.6108 13.6139C12.5758 14.0449 12.3298 14.086 11.9928 14.084C10.9618 14.077 9.93084 14.084 8.80884 14.084C8.80884 15.096 8.80884 16.0599 8.80884 17.0229C8.81417 20.3403 8.82018 23.6576 8.82684 26.975C8.82684 27.808 8.81283 27.8219 7.97083 27.8229C6.57083 27.8229 5.17084 27.8229 3.77084 27.8229C3.01484 27.8229 2.99484 27.7999 2.99484 27.0229C2.99484 22.9563 2.99484 18.8895 2.99484 14.8229C2.99484 13.9809 2.99483 14.003 2.14383 14.032C1.48711 14.0882 0.826102 14.0686 0.173828 13.9739Z"
|
|
fill="white"
|
|
/>
|
|
</svg>
|
|
<div>
|
|
<span>Facebook</span>
|
|
</div>
|
|
</div>
|
|
</div> */}
|
|
{/* <SocialLogin
|
|
provider="facebook"
|
|
appId={configConstants.APP_ID_FACEBOOK}
|
|
onLoginSuccess={(res) => {
|
|
onLoginFacebookSuccess(res);
|
|
setIsProcessingFb(false);
|
|
}}
|
|
key={"facebook"}
|
|
onLoginFailure={(e) => {
|
|
if (e !== "Fetching user") {
|
|
setIsProcessingFb(false);
|
|
}
|
|
return true;
|
|
}}
|
|
clickprocessing={() => {
|
|
setIsProcessingFb(true);
|
|
}}
|
|
>
|
|
<div
|
|
className={classNames(
|
|
{ fb_disabled: isProcessingFb },
|
|
"facebook social_login_container"
|
|
)}
|
|
>
|
|
{isProcessingFb ? (
|
|
<div className="loading_fb">
|
|
<div className="snippet" data-title=".dot-pulse">
|
|
<div className="stage">
|
|
<div className="dot-pulse"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<svg
|
|
width="14"
|
|
height="28"
|
|
viewBox="0 0 14 28"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="icon"
|
|
>
|
|
<path
|
|
d="M0.173828 13.9739C0.173828 12.4929 0.173828 11.059 0.173828 9.62596C0.173828 9.31496 0.360826 9.25791 0.608826 9.25791C1.19783 9.25791 1.78983 9.22086 2.37283 9.27586C2.91183 9.32586 3.04784 9.11086 3.02484 8.62486C2.96465 7.45396 2.98268 6.28041 3.07883 5.11192C3.14211 3.8318 3.69629 2.6253 4.62619 1.74327C5.55609 0.861231 6.79017 0.371564 8.07184 0.375957C9.51084 0.340957 10.9508 0.344879 12.3898 0.295879C12.9238 0.277879 13.0968 0.459952 13.0798 0.995952C13.0448 2.14795 13.0488 3.30194 13.0798 4.45494C13.0918 4.92094 12.9208 5.04996 12.4798 5.02696C11.8528 4.99396 11.2228 5.0099 10.5938 5.0189C9.38084 5.0349 8.88582 5.46289 8.78082 6.65489C8.72082 7.33789 8.75783 8.02885 8.72183 8.71385C8.70083 9.12185 8.86984 9.23891 9.25684 9.23191C10.3118 9.21291 11.3668 9.24085 12.4218 9.21385C12.8878 9.20185 13.0218 9.36094 12.9758 9.81394C12.8338 11.0806 12.7122 12.3472 12.6108 13.6139C12.5758 14.0449 12.3298 14.086 11.9928 14.084C10.9618 14.077 9.93084 14.084 8.80884 14.084C8.80884 15.096 8.80884 16.0599 8.80884 17.0229C8.81417 20.3403 8.82018 23.6576 8.82684 26.975C8.82684 27.808 8.81283 27.8219 7.97083 27.8229C6.57083 27.8229 5.17084 27.8229 3.77084 27.8229C3.01484 27.8229 2.99484 27.7999 2.99484 27.0229C2.99484 22.9563 2.99484 18.8895 2.99484 14.8229C2.99484 13.9809 2.99483 14.003 2.14383 14.032C1.48711 14.0882 0.826102 14.0686 0.173828 13.9739Z"
|
|
fill="white"
|
|
/>
|
|
</svg>
|
|
<div>
|
|
<span>Facebook</span>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</SocialLogin> */}
|
|
{/* <SocialLogin
|
|
provider="facebook"
|
|
appId={configConstants.APP_ID_FACEBOOK}
|
|
onLoginSuccess={onLoginFacebookSuccess}
|
|
key={"facebook"}
|
|
onInternetFailure={() => {
|
|
return true;
|
|
}}
|
|
>
|
|
<div className="facebook social_login_container">
|
|
<svg width="14" height="28" viewBox="0 0 14 28" fill="none" xmlns="http://www.w3.org/2000/svg" className="icon">
|
|
<path
|
|
d="M0.173828 13.9739C0.173828 12.4929 0.173828 11.059 0.173828 9.62596C0.173828 9.31496 0.360826 9.25791 0.608826 9.25791C1.19783 9.25791 1.78983 9.22086 2.37283 9.27586C2.91183 9.32586 3.04784 9.11086 3.02484 8.62486C2.96465 7.45396 2.98268 6.28041 3.07883 5.11192C3.14211 3.8318 3.69629 2.6253 4.62619 1.74327C5.55609 0.861231 6.79017 0.371564 8.07184 0.375957C9.51084 0.340957 10.9508 0.344879 12.3898 0.295879C12.9238 0.277879 13.0968 0.459952 13.0798 0.995952C13.0448 2.14795 13.0488 3.30194 13.0798 4.45494C13.0918 4.92094 12.9208 5.04996 12.4798 5.02696C11.8528 4.99396 11.2228 5.0099 10.5938 5.0189C9.38084 5.0349 8.88582 5.46289 8.78082 6.65489C8.72082 7.33789 8.75783 8.02885 8.72183 8.71385C8.70083 9.12185 8.86984 9.23891 9.25684 9.23191C10.3118 9.21291 11.3668 9.24085 12.4218 9.21385C12.8878 9.20185 13.0218 9.36094 12.9758 9.81394C12.8338 11.0806 12.7122 12.3472 12.6108 13.6139C12.5758 14.0449 12.3298 14.086 11.9928 14.084C10.9618 14.077 9.93084 14.084 8.80884 14.084C8.80884 15.096 8.80884 16.0599 8.80884 17.0229C8.81417 20.3403 8.82018 23.6576 8.82684 26.975C8.82684 27.808 8.81283 27.8219 7.97083 27.8229C6.57083 27.8229 5.17084 27.8229 3.77084 27.8229C3.01484 27.8229 2.99484 27.7999 2.99484 27.0229C2.99484 22.9563 2.99484 18.8895 2.99484 14.8229C2.99484 13.9809 2.99483 14.003 2.14383 14.032C1.48711 14.0882 0.826102 14.0686 0.173828 13.9739Z"
|
|
fill="white"
|
|
/>
|
|
</svg>
|
|
<div>
|
|
<span>Facebook</span>
|
|
</div>
|
|
</div>
|
|
</SocialLogin> */}
|
|
<div className="social_login_item">
|
|
<GoogleLogin
|
|
clientId={configConstants.APP_ID_GOOGLE}
|
|
buttonText="Login"
|
|
onSuccess={onLoginGoogleSuccess}
|
|
cookiePolicy={"single_host_origin"}
|
|
render={(renderProps) => (
|
|
<div
|
|
className="google social_login_container"
|
|
onClick={() => {
|
|
if (!renderProps.disabled) {
|
|
renderProps.onClick();
|
|
}
|
|
}}
|
|
>
|
|
<svg
|
|
className="icon"
|
|
width="28"
|
|
height="28"
|
|
viewBox="0 0 28 28"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M3.77915 23.047C3.01112 22.2054 2.37888 21.2492 1.90515 20.213C0.915295 18.3129 0.398437 16.202 0.398438 14.0595C0.398437 11.917 0.915295 9.80613 1.90515 7.90601L6.47315 11.406C5.931 13.1337 5.92786 14.9855 6.46415 16.715C6.90408 18.0191 7.66095 19.1935 8.66682 20.1329C9.67269 21.0723 10.8961 21.7472 12.2271 22.097C13.3677 22.399 14.5583 22.4621 15.7243 22.2823C16.8903 22.1024 18.0066 21.6836 19.0031 21.052C20.4253 20.0488 21.3953 18.5259 21.7031 16.813H14.2851V11.515H27.2521C27.8891 16.448 27.1221 20.925 23.3411 24.515C21.4378 26.3099 18.9957 27.4269 16.3931 27.693C15.6827 27.7835 14.9673 27.8296 14.2511 27.831C12.2614 27.8517 10.2915 27.4337 8.48161 26.6069C6.67168 25.7801 5.06614 24.5646 3.77915 23.047ZM1.90615 7.90601C3.25876 5.17671 5.48082 2.97489 8.22237 1.64729C10.9639 0.319694 14.0692 -0.0582407 17.0491 0.573007C18.3932 0.813271 19.6871 1.27882 20.8761 1.95001C21.6507 2.4303 22.3933 2.96042 23.0991 3.53701C23.4451 3.80901 23.2861 4.07501 23.0351 4.32701C21.9231 5.44301 20.8151 6.56101 19.6761 7.70901C19.3401 7.50901 19.0311 7.33401 18.7361 7.14101C17.478 6.24883 15.9826 5.75169 14.4407 5.71305C12.8988 5.6744 11.3804 6.09598 10.0791 6.92401C8.37551 7.93163 7.09477 9.52252 6.47415 11.402L1.90615 7.90601Z"
|
|
fill="white"
|
|
/>
|
|
</svg>
|
|
<div>
|
|
<span>Google</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
/>
|
|
</div>
|
|
{/* <div className="social_login_item">
|
|
<AppleLogin
|
|
clientId={configConstants.APP_ID_APPLE}
|
|
onSuccess={onLoginAppleSuccess}
|
|
redirectURI={configConstants.APPLE_REDIRECT_URL}
|
|
usePopup={true}
|
|
render={(renderProps) => (
|
|
<div className="apple social_login_container" onClick={renderProps.onClick}>
|
|
<svg viewBox="0 0 170 170" width={30} height={30} fill="white" className="icon">
|
|
<path d="M150.37 130.25c-2.45 5.66-5.35 10.87-8.71 15.66-4.58 6.53-8.33 11.05-11.22 13.56-4.48 4.12-9.28 6.23-14.42 6.35-3.69 0-8.14-1.05-13.32-3.18-5.197-2.12-9.973-3.17-14.34-3.17-4.58 0-9.492 1.05-14.746 3.17-5.262 2.13-9.501 3.24-12.742 3.35-4.929.21-9.842-1.96-14.746-6.52-3.13-2.73-7.045-7.41-11.735-14.04-5.032-7.08-9.169-15.29-12.41-24.65-3.471-10.11-5.211-19.9-5.211-29.378 0-10.857 2.346-20.221 7.045-28.068 3.693-6.303 8.606-11.275 14.755-14.925s12.793-5.51 19.948-5.629c3.915 0 9.049 1.211 15.429 3.591 6.362 2.388 10.447 3.599 12.238 3.599 1.339 0 5.877-1.416 13.57-4.239 7.275-2.618 13.415-3.702 18.445-3.275 13.63 1.1 23.87 6.473 30.68 16.153-12.19 7.386-18.22 17.731-18.1 31.002.11 10.337 3.86 18.939 11.23 25.769 3.34 3.17 7.07 5.62 11.22 7.36-.9 2.61-1.85 5.11-2.86 7.51zM119.11 7.24c0 8.102-2.96 15.667-8.86 22.669-7.12 8.324-15.732 13.134-25.071 12.375a25.222 25.222 0 0 1-.188-3.07c0-7.778 3.386-16.102 9.399-22.908 3.002-3.446 6.82-6.311 11.45-8.597 4.62-2.252 8.99-3.497 13.1-3.71.12 1.083.17 2.166.17 3.24z" />
|
|
</svg>
|
|
<span>Apple</span>
|
|
</div>
|
|
)}
|
|
/>
|
|
</div> */}
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div className="register_text text-center">
|
|
<p>
|
|
<Link to="/register">Đăng ký tài khoản</Link>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Login;
|
|
|