YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

changes

Browse Source
This commit is contained in:
Thareek Anvar M
2023-02-28 09:38:53 +05:30
committed by GitHub
parent 51518d9009
commit 2b2084c7bd
1 changed files with 71 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
web/src/pages/Auth.tsx
View File

@@ -20,7 +20,9 @@ const Auth = () => {
const mode = systemStatus.profile.mode;
const [username, setUsername] = useState(mode === "demo" ? "demohero" : "");
const [password, setPassword] = useState(mode === "demo" ? "secret" : "");
const [identityProviderList, setIdentityProviderList] = useState<IdentityProvider[]>([]);
const [identityProviderList, setIdentityProviderList] = useState<
IdentityProvider[]
>([]);
useEffect(() => {
userStore.doSignOut().catch();
@@ -33,12 +35,16 @@ const Auth = () => {
fetchIdentityProviderList();
}, []);
const handleUsernameInputChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
const handleUsernameInputChanged = (
e: React.ChangeEvent<HTMLInputElement>
) => {
const text = e.target.value as string;
setUsername(text);
};
const handlePasswordInputChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
const handlePasswordInputChanged = (
e: React.ChangeEvent<HTMLInputElement>
) => {
const text = e.target.value as string;
setPassword(text);
};
@@ -63,11 +69,11 @@ const Auth = () => {
if (user) {
window.location.href = "/";
} else {
toastHelper.error(t("message.login-failed"),5000);
toastHelper.error(t("message.login-failed"));
}
} catch (error: any) {
console.error(error);
toastHelper.error(error.response.data.error,5000);
toastHelper.error(error.response.data.error);
}
actionBtnLoadingState.setFinish();
};
@@ -99,7 +105,9 @@ const Auth = () => {
}
};
const handleSignInWithIdentityProvider = async (identityProvider: IdentityProvider) => {
const handleSignInWithIdentityProvider = async (
identityProvider: IdentityProvider
) => {
const stateQueryParameter = `auth.signin.${identityProvider.name}-${identityProvider.id}`;
if (identityProvider.type === "OAUTH2") {
const redirectUri = absolutifyLink("/auth/callback");
@@ -119,18 +127,38 @@ const Auth = () => {
<div className="auth-form-wrapper">
<div className="page-header-container">
<div className="title-container">
<img className="logo-img" src={systemStatus.customizedProfile.logoUrl} alt="" />
<img
className="logo-img"
src={systemStatus.customizedProfile.logoUrl}
alt=""
/>
<p className="logo-text">{systemStatus.customizedProfile.name}</p>
</div>
<p className="slogan-text">{systemStatus.customizedProfile.description || t("slogan")}</p>
<p className="slogan-text">
{systemStatus.customizedProfile.description || t("slogan")}
</p>
</div>
<div className={`page-content-container ${actionBtnLoadingState.isLoading ? "requesting" : ""}`}>
<div
className={`page-content-container ${
actionBtnLoadingState.isLoading ? "requesting" : ""
}`}
>
<div className="form-item-container input-form-container">
<span className={`normal-text ${username ? "not-null" : ""}`}>{t("common.username")}</span>
<input className="input-text" type="text" value={username} onChange={handleUsernameInputChanged} required />
<span className={`normal-text ${username ? "not-null" : ""}`}>
{t("common.username")}
</span>
<input
className="input-text"
type="text"
value={username}
onChange={handleUsernameInputChanged}
required
/>
</div>
<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
className="input-text"
type="password"
@@ -144,22 +172,39 @@ const Auth = () => {
<div className="action-btns-container">
{systemStatus?.host ? (
<>
{actionBtnLoadingState.isLoading && <Icon.Loader className="w-4 h-auto mr-2 animate-spin dark:text-gray-300" />}
{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}>
<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}>
<button
className={`btn-primary ${
actionBtnLoadingState.isLoading ? "requesting" : ""
}`}
onClick={handleSignInBtnClick}
>
{t("common.sign-in")}
</button>
</>
) : (
<>
<button className={`btn-primary ${actionBtnLoadingState.isLoading ? "requesting" : ""}`} onClick={handleSignUpBtnsClick}>
<button
className={`btn-primary ${
actionBtnLoadingState.isLoading ? "requesting" : ""
}`}
onClick={handleSignUpBtnsClick}
>
{t("auth.signup-as-host")}
</button>
</>
@@ -176,7 +221,9 @@ const Auth = () => {
color="neutral"
className="w-full"
size="md"
onClick={() => handleSignInWithIdentityProvider(identityProvider)}
onClick={() =>
handleSignInWithIdentityProvider(identityProvider)
}
>
Sign in with {identityProvider.name}
</Button>
@@ -184,11 +231,16 @@ const Auth = () => {
</div>
</>
)}
{!systemStatus?.host && <p className="tip-text">{t("auth.host-tip")}</p>}
{!systemStatus?.host && (
<p className="tip-text">{t("auth.host-tip")}</p>
)}
</div>
<div className="flex flex-row items-center justify-center w-full gap-2">
<LocaleSelect value={locale} onChange={handleLocaleSelectChange} />
<AppearanceSelect value={appearance} onChange={handleAppearanceSelectChange} />
<AppearanceSelect
value={appearance}
onChange={handleAppearanceSelectChange}
/>
</div>
</div>
</div>