Skip to content

C
canifa_note
Unverified Commit 11cd9b21 authored by boojack's avatar boojack Committed by GitHub
Browse files
Options

chore: update auth form (#1445)

parent 41c50e75
Hide whitespace changes
Inline Side-by-side
Showing with 99 additions and 116 deletions
web/src/less/auth.less deleted 100644 → 0
View file @ 41c50e75
.page-wrapper.auth {
@apply flex flex-row justify-center items-center w-full h-full dark:bg-zinc-800;
> .page-container {
@apply w-80 max-w-full h-full py-4 flex flex-col justify-start items-center;
> .auth-form-wrapper {
@apply w-full py-4 grow flex flex-col justify-center items-center;
> .page-header-container {
@apply flex flex-col justify-start items-start w-full mb-4;
> .title-container {
@apply w-full flex flex-row justify-start items-center mb-2;
> .logo-img {
@apply h-14 w-auto mr-1;
}
> .logo-text {
@apply text-6xl tracking-wide text-black opacity-80 dark:text-gray-200;
}
}
> .slogan-text {
@apply text-sm text-gray-700 dark:text-gray-300;
}
}
> .page-content-container {
@apply flex flex-col justify-start items-start w-full;
> .form-item-container {
@apply flex flex-col justify-start items-start relative w-full text-base mt-2;
> .normal-text {
@apply absolute top-3 left-3 px-1 leading-10 flex-shrink-0 text-base cursor-text text-gray-400 bg-transparent transition-all select-none pointer-events-none;
&.not-null {
@apply text-sm top-0 z-10 leading-4 bg-white dark:bg-zinc-800 rounded;
}
}
&.input-form-container {
@apply py-2;
> input {
@apply w-full py-3 px-3 text-base rounded-lg dark:bg-zinc-800;
}
}
}
&.requesting {
@apply opacity-80;
}
}
> .action-btns-container {
@apply flex flex-row justify-end items-center w-full mt-2;
> .requesting {
@apply cursor-wait opacity-80;
}
}
> .tip-text {
@apply w-full inline-block float-right text-sm mt-4 text-gray-500 text-right whitespace-pre-wrap;
&.host-tip {
@apply text-blue-600;
}
}
}
}
}
web/src/pages/Auth.tsx
View file @ 11cd9b21
...@@ -9,7 +9,6 @@ import useLoading from "@/hooks/useLoading"; ...@@ -9,7 +9,6 @@ import useLoading from "@/hooks/useLoading";
import Icon from "@/components/Icon"; import Icon from "@/components/Icon";
import AppearanceSelect from "@/components/AppearanceSelect"; import AppearanceSelect from "@/components/AppearanceSelect";
import LocaleSelect from "@/components/LocaleSelect"; import LocaleSelect from "@/components/LocaleSelect";
import "@/less/auth.less";
const Auth = () => { const Auth = () => {
const { t } = useTranslation(); const { t } = useTranslation();
...@@ -51,7 +50,20 @@ const Auth = () => { ...@@ -51,7 +50,20 @@ const Auth = () => {
globalStore.setAppearance(appearance); globalStore.setAppearance(appearance);
}; };
const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (systemStatus?.host) {
handleSignInBtnClick();
} else {
handleSignUpBtnsClick();
}
};
const handleSignInBtnClick = async () => { const handleSignInBtnClick = async () => {
if (username === "" || password === "") {
return;
}
if (actionBtnLoadingState.isLoading) { if (actionBtnLoadingState.isLoading) {
return; return;
} }
...@@ -73,6 +85,10 @@ const Auth = () => { ...@@ -73,6 +85,10 @@ const Auth = () => {
}; };
const handleSignUpBtnsClick = async () => { const handleSignUpBtnsClick = async () => {
if (username === "" || password === "") {
return;
}
if (actionBtnLoadingState.isLoading) { if (actionBtnLoadingState.isLoading) {
return; return;
} }
...@@ -108,50 +124,88 @@ const Auth = () => { ...@@ -108,50 +124,88 @@ const Auth = () => {
}; };
return ( return (
<div className="page-wrapper auth"> <div className="flex flex-row justify-center items-center w-full h-full dark:bg-zinc-800">
<div className="page-container"> <div className="w-80 max-w-full h-full py-4 flex flex-col justify-start items-center">
<div className="auth-form-wrapper"> <div className="w-full py-4 grow flex flex-col justify-center items-center">
<div className="page-header-container"> <div className="flex flex-col justify-start items-start w-full mb-4">
<div className="title-container"> <div className="w-full flex flex-row justify-start items-center mb-2">
<img className="h-12 w-auto rounded-lg mr-1" src={systemStatus.customizedProfile.logoUrl} alt="" /> <img className="h-12 w-auto rounded-lg mr-1" src={systemStatus.customizedProfile.logoUrl} alt="" />
<p className="logo-text">{systemStatus.customizedProfile.name}</p> <p className="text-6xl tracking-wide text-black opacity-80 dark:text-gray-200">{systemStatus.customizedProfile.name}</p>
</div> </div>
<p className="slogan-text">{systemStatus.customizedProfile.description || t("slogan")}</p> <p className="text-sm text-gray-700 dark:text-gray-300">{systemStatus.customizedProfile.description || t("slogan")}</p>
</div> </div>
<div className={`page-content-container ${actionBtnLoadingState.isLoading ? "requesting" : ""}`}> <form className="w-full" onSubmit={handleFormSubmit}>
<div className="form-item-container input-form-container"> <div className={`flex flex-col justify-start items-start w-full ${actionBtnLoadingState.isLoading && "opacity-80"}`}>
<span className={`normal-text ${username ? "not-null" : ""}`}>{t("common.username")}</span> <div className="flex flex-col justify-start items-start relative w-full text-base mt-2 py-2">
<input className="input-text" type="text" value={username} onChange={handleUsernameInputChanged} required /> <span
className={`absolute top-3 left-3 px-1 leading-10 flex-shrink-0 text-base cursor-text text-gray-400 transition-all select-none pointer-events-none ${
username ? "!text-sm !top-0 !z-10 !leading-4 bg-white dark:bg-zinc-800 rounded" : ""
}`}
>
{t("common.username")}
</span>
<input
className="input-text w-full py-3 px-3 text-base rounded-lg dark:bg-zinc-800"
type="text"
value={username}
onChange={handleUsernameInputChanged}
required
/>
</div>
<div className="flex flex-col justify-start items-start relative w-full text-base mt-2 py-2">
<span
className={`absolute top-3 left-3 px-1 leading-10 flex-shrink-0 text-base cursor-text text-gray-400 transition-all select-none pointer-events-none ${
password ? "!text-sm !top-0 !z-10 !leading-4 bg-white dark:bg-zinc-800 rounded" : ""
}`}
>
{t("common.password")}
</span>
<input
className="input-text w-full py-3 px-3 text-base rounded-lg dark:bg-zinc-800"
type="password"
value={password}
onChange={handlePasswordInputChanged}
required
/>
</div>
</div> </div>
<div className="form-item-container input-form-container"> <div className="flex flex-row justify-end items-center w-full mt-2">
<span className={`normal-text ${password ? "not-null" : ""}`}>{t("common.password")}</span> {systemStatus?.host ? (
<input className="input-text" type="password" value={password} onChange={handlePasswordInputChanged} required /> <>
{actionBtnLoadingState.isLoading && <Icon.Loader className="w-4 h-auto mr-2 animate-spin dark:text-gray-300" />}
{systemStatus?.allowSignUp && (
<>
<button
type="button"
className={`btn-text ${actionBtnLoadingState.isLoading ? "cursor-wait opacity-80" : ""}`}
onClick={handleSignUpBtnsClick}
>
{t("common.sign-up")}
</button>
<span className="mr-2 font-mono text-gray-200">/</span>
</>
)}
<button
type="submit"
className={`btn-primary ${actionBtnLoadingState.isLoading ? "cursor-wait opacity-80" : ""}`}
onClick={handleSignInBtnClick}
>
{t("common.sign-in")}
</button>
</>
) : (
<>
<button
type="submit"
className={`btn-primary ${actionBtnLoadingState.isLoading ? "cursor-wait opacity-80" : ""}`}
onClick={handleSignUpBtnsClick}
>
{t("auth.signup-as-host")}
</button>
</>
)}
</div> </div>
</div> </form>
<div className="action-btns-container">
{systemStatus?.host ? (
<>
{actionBtnLoadingState.isLoading && <Icon.Loader className="w-4 h-auto mr-2 animate-spin dark:text-gray-300" />}
{systemStatus?.allowSignUp && (
<>
<button className={`btn-text ${actionBtnLoadingState.isLoading ? "requesting" : ""}`} onClick={handleSignUpBtnsClick}>
{t("common.sign-up")}
</button>
<span className="mr-2 font-mono text-gray-200">/</span>
</>
)}
<button className={`btn-primary ${actionBtnLoadingState.isLoading ? "requesting" : ""}`} onClick={handleSignInBtnClick}>
{t("common.sign-in")}
</button>
</>
) : (
<>
<button className={`btn-primary ${actionBtnLoadingState.isLoading ? "requesting" : ""}`} onClick={handleSignUpBtnsClick}>
{t("auth.signup-as-host")}
</button>
</>
)}
</div>
{identityProviderList.length > 0 && ( {identityProviderList.length > 0 && (
<> <>
<Divider className="!my-4">or</Divider> <Divider className="!my-4">or</Divider>
...@@ -171,7 +225,11 @@ const Auth = () => { ...@@ -171,7 +225,11 @@ const Auth = () => {
</div> </div>
</> </>
)} )}
{!systemStatus?.host && <p className="tip-text">{t("auth.host-tip")}</p>} {!systemStatus?.host && (
<p className="w-full inline-block float-right text-sm mt-4 text-gray-500 text-right whitespace-pre-wrap">
{t("auth.host-tip")}
</p>
)}
</div> </div>
<div className="flex flex-row items-center justify-center w-full gap-2"> <div className="flex flex-row items-center justify-center w-full gap-2">
<LocaleSelect value={locale} onChange={handleLocaleSelectChange} /> <LocaleSelect value={locale} onChange={handleLocaleSelectChange} />
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment