File size: 1,986 Bytes
f52d137 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
import { Code } from "@mui/icons-material";
import { Tooltip } from "@mui/material";
import React, { useEffect } from "react";
import { UserInfo } from "../types";
import { LoginButton } from "./LoginButton";
// Mock development user data
const DEV_USER_INFO: UserInfo = {
sub: "dev-user-123",
email: "dev@example.com",
name: "Development User",
preferred_username: "devuser",
};
const DEV_ACCESS_TOKEN = "dev-mock-token-123";
interface DevModeLoginButtonProps {
userInfo: UserInfo | null;
accessToken: string | null;
loginLabel: string;
isDisabled?: boolean;
onLoginStateChange: (
userInfo: UserInfo | null,
accessToken: string | null,
loginLabel: string,
) => void;
}
export const DevModeLoginButton: React.FC<DevModeLoginButtonProps> = ({
userInfo,
accessToken,
loginLabel,
isDisabled = false,
onLoginStateChange,
}) => {
// Initialize with logout state on mount
useEffect(() => {
if (!userInfo && !accessToken) {
onLoginStateChange(null, null, "Dev Mode Login");
}
}, [userInfo, accessToken, onLoginStateChange]);
const handleLoginClick = () => {
if (userInfo) {
// Log out in dev mode
onLoginStateChange(null, null, "Dev Mode Login");
} else {
// Log in with dev credentials
const label =
DEV_USER_INFO.email ||
DEV_USER_INFO.name ||
DEV_USER_INFO.preferred_username ||
"Dev User";
onLoginStateChange(DEV_USER_INFO, DEV_ACCESS_TOKEN, label);
}
};
const displayLabel = userInfo
? `${loginLabel} (Dev Mode)`
: loginLabel === "Login with Hugging Face"
? "Dev Mode Login"
: loginLabel;
const isLoggedIn = !!userInfo?.sub;
return (
<Tooltip title={isLoggedIn ? "Log out" : ""} placement="right">
<LoginButton
icon={<Code />}
onClick={handleLoginClick}
isLoggedIn={isLoggedIn}
disabled={isDisabled}
>
{displayLabel}
</LoginButton>
</Tooltip>
);
};
|