mirror of
https://github.com/aykhans/slash-e.git
synced 2025-04-16 04:13:12 +00:00
chore: add admin sign in page
This commit is contained in:
Steven
parent
0ac2554545
commit
b64ae1399a
86
frontend/web/src/components/PasswordAuthForm.tsx
Normal file
86
frontend/web/src/components/PasswordAuthForm.tsx
Normal file
@ -0,0 +1,86 @@
|
||||
import { Button, Input } from "@mui/joy";
|
||||
import { FormEvent, useState } from "react";
|
||||
import toast from "react-hot-toast";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { authServiceClient } from "@/grpcweb";
|
||||
import useLoading from "@/hooks/useLoading";
|
||||
import useNavigateTo from "@/hooks/useNavigateTo";
|
||||
import { useUserStore } from "@/stores";
|
||||
|
||||
const PasswordAuthForm = () => {
|
||||
const { t } = useTranslation();
|
||||
const navigateTo = useNavigateTo();
|
||||
const userStore = useUserStore();
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const actionBtnLoadingState = useLoading(false);
|
||||
const allowConfirm = email.length > 0 && password.length > 0;
|
||||
|
||||
const handleEmailInputChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const text = e.target.value as string;
|
||||
setEmail(text);
|
||||
};
|
||||
|
||||
const handlePasswordInputChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const text = e.target.value as string;
|
||||
setPassword(text);
|
||||
};
|
||||
|
||||
const handleSigninBtnClick = async (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (actionBtnLoadingState.isLoading) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
actionBtnLoadingState.setLoading();
|
||||
const user = await authServiceClient.signIn({ email, password });
|
||||
if (user) {
|
||||
userStore.setCurrentUserId(user.id);
|
||||
await userStore.fetchCurrentUser();
|
||||
navigateTo("/");
|
||||
} else {
|
||||
toast.error("Signin failed");
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
toast.error(error.details);
|
||||
}
|
||||
actionBtnLoadingState.setFinish();
|
||||
};
|
||||
|
||||
return (
|
||||
<form className="w-full mt-6" onSubmit={handleSigninBtnClick}>
|
||||
<div className={`flex flex-col justify-start items-start w-full ${actionBtnLoadingState.isLoading ? "opacity-80" : ""}`}>
|
||||
<div className="w-full flex flex-col mb-2">
|
||||
<span className="leading-8 mb-1 text-gray-600">{t("common.email")}</span>
|
||||
<Input
|
||||
className="w-full py-3"
|
||||
type="email"
|
||||
value={email}
|
||||
placeholder="slash@yourselfhosted.com"
|
||||
onChange={handleEmailInputChanged}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full flex flex-col mb-2">
|
||||
<span className="leading-8 text-gray-600">{t("common.password")}</span>
|
||||
<Input className="w-full py-3" type="password" value={password} placeholder="····" onChange={handlePasswordInputChanged} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full flex flex-row justify-end items-center mt-4 space-x-2">
|
||||
<Button
|
||||
className="w-full"
|
||||
type="submit"
|
||||
color="primary"
|
||||
loading={actionBtnLoadingState.isLoading}
|
||||
disabled={actionBtnLoadingState.isLoading || !allowConfirm}
|
||||
onClick={handleSigninBtnClick}
|
||||
>
|
||||
{t("auth.sign-in")}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default PasswordAuthForm;
|
||||
22
frontend/web/src/pages/AdminSignIn.tsx
Normal file
22
frontend/web/src/pages/AdminSignIn.tsx
Normal file
@ -0,0 +1,22 @@
|
||||
import React from "react";
|
||||
import Logo from "@/components/Logo";
|
||||
import PasswordAuthForm from "@/components/PasswordAuthForm";
|
||||
|
||||
const AdminSignIn: React.FC = () => {
|
||||
return (
|
||||
<div className="flex flex-row justify-center items-center w-full h-auto pt-12 sm:pt-24 bg-white dark:bg-zinc-900">
|
||||
<div className="w-80 max-w-full h-full py-4 flex flex-col justify-start items-center">
|
||||
<div className="w-full py-4 grow flex flex-col justify-center items-center">
|
||||
<div className="flex flex-row justify-start items-center w-auto mx-auto gap-y-2 mb-4">
|
||||
<Logo className="mr-2" />
|
||||
<span className="text-3xl opacity-80 dark:text-gray-500">Slash</span>
|
||||
</div>
|
||||
<p className="w-full text-xl font-medium dark:text-gray-500">Sign in with admin accounts</p>
|
||||
<PasswordAuthForm />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AdminSignIn;
|
||||
@ -1,65 +1,17 @@
|
||||
import { Button, Divider, Input } from "@mui/joy";
|
||||
import React, { FormEvent, useEffect, useState } from "react";
|
||||
import { Button, Divider } from "@mui/joy";
|
||||
import React from "react";
|
||||
import { toast } from "react-hot-toast";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Link } from "react-router-dom";
|
||||
import Logo from "@/components/Logo";
|
||||
import { authServiceClient } from "@/grpcweb";
|
||||
import PasswordAuthForm from "@/components/PasswordAuthForm";
|
||||
import { absolutifyLink } from "@/helpers/utils";
|
||||
import useLoading from "@/hooks/useLoading";
|
||||
import useNavigateTo from "@/hooks/useNavigateTo";
|
||||
import { useUserStore, useWorkspaceStore } from "@/stores";
|
||||
import { useWorkspaceStore } from "@/stores";
|
||||
import { IdentityProvider, IdentityProvider_Type } from "@/types/proto/api/v1/workspace_service";
|
||||
|
||||
const SignIn: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const navigateTo = useNavigateTo();
|
||||
const workspaceStore = useWorkspaceStore();
|
||||
const userStore = useUserStore();
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const actionBtnLoadingState = useLoading(false);
|
||||
const allowConfirm = email.length > 0 && password.length > 0;
|
||||
|
||||
useEffect(() => {
|
||||
if (workspaceStore.profile.mode === "demo") {
|
||||
setEmail("slash@yourselfhosted.com");
|
||||
setPassword("secret");
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleEmailInputChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const text = e.target.value as string;
|
||||
setEmail(text);
|
||||
};
|
||||
|
||||
const handlePasswordInputChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const text = e.target.value as string;
|
||||
setPassword(text);
|
||||
};
|
||||
|
||||
const handleSigninBtnClick = async (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (actionBtnLoadingState.isLoading) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
actionBtnLoadingState.setLoading();
|
||||
const user = await authServiceClient.signIn({ email, password });
|
||||
if (user) {
|
||||
userStore.setCurrentUserId(user.id);
|
||||
await userStore.fetchCurrentUser();
|
||||
navigateTo("/");
|
||||
} else {
|
||||
toast.error("Signin failed");
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
toast.error(error.details);
|
||||
}
|
||||
actionBtnLoadingState.setFinish();
|
||||
};
|
||||
|
||||
const handleSignInWithIdentityProvider = async (identityProvider: IdentityProvider) => {
|
||||
const stateQueryParameter = identityProvider.id;
|
||||
@ -87,37 +39,12 @@ const SignIn: React.FC = () => {
|
||||
<Logo className="mr-2" />
|
||||
<span className="text-3xl opacity-80 dark:text-gray-500">Slash</span>
|
||||
</div>
|
||||
<form className="w-full mt-6" onSubmit={handleSigninBtnClick}>
|
||||
<div className={`flex flex-col justify-start items-start w-full ${actionBtnLoadingState.isLoading ? "opacity-80" : ""}`}>
|
||||
<div className="w-full flex flex-col mb-2">
|
||||
<span className="leading-8 mb-1 text-gray-600">{t("common.email")}</span>
|
||||
<Input
|
||||
className="w-full py-3"
|
||||
type="email"
|
||||
value={email}
|
||||
placeholder="slash@yourselfhosted.com"
|
||||
onChange={handleEmailInputChanged}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full flex flex-col mb-2">
|
||||
<span className="leading-8 text-gray-600">{t("common.password")}</span>
|
||||
<Input className="w-full py-3" type="password" value={password} placeholder="····" onChange={handlePasswordInputChanged} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full flex flex-row justify-end items-center mt-4 space-x-2">
|
||||
<Button
|
||||
className="w-full"
|
||||
type="submit"
|
||||
color="primary"
|
||||
loading={actionBtnLoadingState.isLoading}
|
||||
disabled={actionBtnLoadingState.isLoading || !allowConfirm}
|
||||
onClick={handleSigninBtnClick}
|
||||
>
|
||||
{t("auth.sign-in")}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
{!workspaceStore.setting.disallowUserRegistration && (
|
||||
{!workspaceStore.setting.disallowPasswordAuth ? (
|
||||
<PasswordAuthForm />
|
||||
) : (
|
||||
<p className="w-full text-2xl mt-2 dark:text-gray-500">Password auth is not allowed.</p>
|
||||
)}
|
||||
{!workspaceStore.setting.disallowUserRegistration && !workspaceStore.setting.disallowPasswordAuth && (
|
||||
<p className="w-full mt-4 text-sm">
|
||||
<span className="dark:text-gray-500">{"Don't have an account yet?"}</span>
|
||||
<Link className="cursor-pointer ml-2 text-blue-600 hover:underline" to="/auth/signup" unstable_viewTransition>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { createBrowserRouter } from "react-router-dom";
|
||||
import App from "@/App";
|
||||
import Root from "@/layouts/Root";
|
||||
import AdminSignIn from "@/pages/AdminSignIn";
|
||||
import AuthCallback from "@/pages/AuthCallback";
|
||||
import CollectionDashboard from "@/pages/CollectionDashboard";
|
||||
import CollectionSpace from "@/pages/CollectionSpace";
|
||||
@ -27,6 +28,10 @@ const router = createBrowserRouter([
|
||||
path: "",
|
||||
element: <SignIn />,
|
||||
},
|
||||
{
|
||||
path: "admin",
|
||||
element: <AdminSignIn />,
|
||||
},
|
||||
{
|
||||
path: "signup",
|
||||
element: <SignUp />,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user