mirror of https://github.com/usememos/memos
chore: update auth service
Steven
1 year ago
parent
1167df29d8
commit
f0abd792c7
@ -0,0 +1,125 @@
|
||||
import { Button, Checkbox, Input } from "@mui/joy";
|
||||
import { ClientError } from "nice-grpc-web";
|
||||
import { useEffect, useState } from "react";
|
||||
import { toast } from "react-hot-toast";
|
||||
import { authServiceClient } from "@/grpcweb";
|
||||
import useLoading from "@/hooks/useLoading";
|
||||
import useNavigateTo from "@/hooks/useNavigateTo";
|
||||
import { useCommonContext } from "@/layouts/CommonContextProvider";
|
||||
import { useUserStore } from "@/store/v1";
|
||||
import { useTranslate } from "@/utils/i18n";
|
||||
|
||||
const PasswordSignInForm = () => {
|
||||
const t = useTranslate();
|
||||
const navigateTo = useNavigateTo();
|
||||
const commonContext = useCommonContext();
|
||||
const userStore = useUserStore();
|
||||
const actionBtnLoadingState = useLoading(false);
|
||||
const [username, setUsername] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [remember, setRemember] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
if (commonContext.profile.mode === "demo") {
|
||||
setUsername("yourselfhosted");
|
||||
setPassword("yourselfhosted");
|
||||
}
|
||||
}, [commonContext.profile.mode]);
|
||||
|
||||
const handleUsernameInputChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const text = e.target.value as string;
|
||||
setUsername(text);
|
||||
};
|
||||
|
||||
const handlePasswordInputChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const text = e.target.value as string;
|
||||
setPassword(text);
|
||||
};
|
||||
|
||||
const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
handleSignInButtonClick();
|
||||
};
|
||||
|
||||
const handleSignInButtonClick = async () => {
|
||||
if (username === "" || password === "") {
|
||||
return;
|
||||
}
|
||||
|
||||
if (actionBtnLoadingState.isLoading) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
actionBtnLoadingState.setLoading();
|
||||
await authServiceClient.signIn({ username, password, neverExpire: remember });
|
||||
await userStore.fetchCurrentUser();
|
||||
navigateTo("/");
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
toast.error((error as ClientError).details || "Failed to sign in.");
|
||||
}
|
||||
actionBtnLoadingState.setFinish();
|
||||
};
|
||||
|
||||
return (
|
||||
<form className="w-full mt-2" onSubmit={handleFormSubmit}>
|
||||
<div className="flex flex-col justify-start items-start w-full gap-4">
|
||||
<div className="w-full flex flex-col justify-start items-start">
|
||||
<span className="leading-8 text-gray-600">{t("common.username")}</span>
|
||||
<Input
|
||||
className="w-full"
|
||||
size="lg"
|
||||
type="text"
|
||||
readOnly={actionBtnLoadingState.isLoading}
|
||||
placeholder={t("common.username")}
|
||||
value={username}
|
||||
autoComplete="username"
|
||||
autoCapitalize="off"
|
||||
spellCheck={false}
|
||||
onChange={handleUsernameInputChanged}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full flex flex-col justify-start items-start">
|
||||
<span className="leading-8 text-gray-600">{t("common.password")}</span>
|
||||
<Input
|
||||
className="w-full"
|
||||
size="lg"
|
||||
type="password"
|
||||
readOnly={actionBtnLoadingState.isLoading}
|
||||
placeholder={t("common.password")}
|
||||
value={password}
|
||||
autoComplete="password"
|
||||
autoCapitalize="off"
|
||||
spellCheck={false}
|
||||
onChange={handlePasswordInputChanged}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-row justify-start items-center w-full mt-6">
|
||||
<Checkbox
|
||||
className="dark:!text-gray-400"
|
||||
label={t("common.remember-me")}
|
||||
checked={remember}
|
||||
onChange={(e) => setRemember(e.target.checked)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-row justify-end items-center w-full mt-6">
|
||||
<Button
|
||||
className="w-full"
|
||||
size="md"
|
||||
type="submit"
|
||||
disabled={actionBtnLoadingState.isLoading}
|
||||
loading={actionBtnLoadingState.isLoading}
|
||||
onClick={handleSignInButtonClick}
|
||||
>
|
||||
{t("common.sign-in")}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default PasswordSignInForm;
|
||||
@ -0,0 +1,43 @@
|
||||
import AppearanceSelect from "@/components/AppearanceSelect";
|
||||
import LocaleSelect from "@/components/LocaleSelect";
|
||||
import PasswordSignInForm from "@/components/PasswordSignInForm";
|
||||
import { useCommonContext } from "@/layouts/CommonContextProvider";
|
||||
import { useWorkspaceSettingStore } from "@/store/v1";
|
||||
import { WorkspaceGeneralSetting } from "@/types/proto/api/v1/workspace_setting_service";
|
||||
import { WorkspaceSettingKey } from "@/types/proto/store/workspace_setting";
|
||||
|
||||
const AdminSignIn = () => {
|
||||
const commonContext = useCommonContext();
|
||||
const workspaceSettingStore = useWorkspaceSettingStore();
|
||||
const workspaceGeneralSetting =
|
||||
workspaceSettingStore.getWorkspaceSettingByKey(WorkspaceSettingKey.GENERAL).generalSetting || WorkspaceGeneralSetting.fromPartial({});
|
||||
|
||||
const handleLocaleSelectChange = (locale: Locale) => {
|
||||
commonContext.setLocale(locale);
|
||||
};
|
||||
|
||||
const handleAppearanceSelectChange = (appearance: Appearance) => {
|
||||
commonContext.setAppearance(appearance);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="py-4 sm:py-8 w-80 max-w-full min-h-[100svh] mx-auto flex flex-col justify-start items-center">
|
||||
<div className="w-full py-4 grow flex flex-col justify-center items-center">
|
||||
<div className="w-full flex flex-row justify-center items-center mb-6">
|
||||
<img className="h-14 w-auto rounded-full shadow" src={workspaceGeneralSetting.customProfile?.logoUrl || "/logo.webp"} alt="" />
|
||||
<p className="ml-2 text-5xl text-black opacity-80 dark:text-gray-200">
|
||||
{workspaceGeneralSetting.customProfile?.title || "Memos"}
|
||||
</p>
|
||||
</div>
|
||||
<p className="w-full text-xl font-medium">Sign in with admin accounts</p>
|
||||
<PasswordSignInForm />
|
||||
</div>
|
||||
<div className="mt-4 flex flex-row items-center justify-center w-full gap-2">
|
||||
<LocaleSelect value={commonContext.locale} onChange={handleLocaleSelectChange} />
|
||||
<AppearanceSelect value={commonContext.appearance as Appearance} onChange={handleAppearanceSelectChange} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AdminSignIn;
|
||||
Loading…
Reference in New Issue