chore: support html form (#236)

This commit is contained in:
f97
2022-09-21 13:12:16 +07:00
committed by GitHub
parent 6c1cc1d283
commit 2acd5d4af2

View File

@ -47,7 +47,9 @@ const Auth = () => {
setPassword(text); setPassword(text);
}; };
const handleSigninBtnsClick = async () => { const handleSigninBtnsClick = async (e: React.FormEvent<EventTarget>) => {
e.preventDefault();
if (actionBtnLoadingState.isLoading) { if (actionBtnLoadingState.isLoading) {
return; return;
} }
@ -80,7 +82,9 @@ const Auth = () => {
actionBtnLoadingState.setFinish(); actionBtnLoadingState.setFinish();
}; };
const handleSignUpAsHostBtnsClick = async () => { const handleSignUpAsHostBtnsClick = async (e: React.FormEvent<EventTarget>) => {
e.preventDefault();
if (actionBtnLoadingState.isLoading) { if (actionBtnLoadingState.isLoading) {
return; return;
} }
@ -120,7 +124,7 @@ const Auth = () => {
return ( return (
<div className="page-wrapper auth"> <div className="page-wrapper auth">
<div className="page-container"> <div className="page-container">
<div className="auth-form-wrapper"> <form className="auth-form-wrapper" onSubmit={(e) => (siteHost ? handleSigninBtnsClick(e) : handleSignUpAsHostBtnsClick(e))}>
<div className="page-header-container"> <div className="page-header-container">
<div className="title-container"> <div className="title-container">
<img className="logo-img" src="/logo-full.webp" alt="" /> <img className="logo-img" src="/logo-full.webp" alt="" />
@ -130,19 +134,16 @@ const Auth = () => {
<div className={`page-content-container ${actionBtnLoadingState.isLoading ? "requesting" : ""}`}> <div className={`page-content-container ${actionBtnLoadingState.isLoading ? "requesting" : ""}`}>
<div className="form-item-container input-form-container"> <div className="form-item-container input-form-container">
<span className={`normal-text ${email ? "not-null" : ""}`}>{t("common.email")}</span> <span className={`normal-text ${email ? "not-null" : ""}`}>{t("common.email")}</span>
<input type="email" value={email} onChange={handleEmailInputChanged} /> <input type="email" value={email} onChange={handleEmailInputChanged} required />
</div> </div>
<div className="form-item-container input-form-container"> <div className="form-item-container input-form-container">
<span className={`normal-text ${password ? "not-null" : ""}`}>{t("common.password")}</span> <span className={`normal-text ${password ? "not-null" : ""}`}>{t("common.password")}</span>
<input type="password" value={password} onChange={handlePasswordInputChanged} /> <input type="password" value={password} onChange={handlePasswordInputChanged} required />
</div> </div>
</div> </div>
<div className="action-btns-container"> <div className="action-btns-container">
{!pageLoadingState.isLoading && ( {!pageLoadingState.isLoading && (
<button <button className={`btn signin-btn ${actionBtnLoadingState.isLoading ? "requesting" : ""}`} type="submit">
className={`btn signin-btn ${actionBtnLoadingState.isLoading ? "requesting" : ""}`}
onClick={() => (siteHost ? handleSigninBtnsClick() : handleSignUpAsHostBtnsClick())}
>
{actionBtnLoadingState.isLoading && <Icon.Loader className="img-icon" />} {actionBtnLoadingState.isLoading && <Icon.Loader className="img-icon" />}
{siteHost ? t("common.sign-in") : t("auth.signup-as-host")} {siteHost ? t("common.sign-in") : t("auth.signup-as-host")}
</button> </button>
@ -151,7 +152,7 @@ const Auth = () => {
<p className={`tip-text ${siteHost || pageLoadingState.isLoading ? "" : "host-tip"}`}> <p className={`tip-text ${siteHost || pageLoadingState.isLoading ? "" : "host-tip"}`}>
{siteHost || pageLoadingState.isLoading ? t("auth.not-host-tip") : t("auth.host-tip")} {siteHost || pageLoadingState.isLoading ? t("auth.not-host-tip") : t("auth.host-tip")}
</p> </p>
</div> </form>
<div className="footer-container"> <div className="footer-container">
<div className="language-container"> <div className="language-container">
<span className={`locale-item ${i18n.language === "en" ? "active" : ""}`} onClick={() => handleLocaleItemClick("en")}> <span className={`locale-item ${i18n.language === "en" ? "active" : ""}`} onClick={() => handleLocaleItemClick("en")}>