Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add option for access token login #58

Merged
merged 5 commits into from
Oct 17, 2024
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Add confirmation for session destroy on accessToken logout
  • Loading branch information
beastafk committed Oct 16, 2024
commit 5a8b2116b34416a481525b5b676bd229bc61c02f
72 changes: 58 additions & 14 deletions src/components/AdminLayout.tsx
Original file line number Diff line number Diff line change
@@ -1,26 +1,70 @@
import { Layout, Menu } from 'react-admin';
import LiveHelpIcon from '@mui/icons-material/LiveHelp';
import { AppBar, Confirm, Layout, Logout, Menu, useLogout, UserMenu } from "react-admin";
import LiveHelpIcon from "@mui/icons-material/LiveHelp";
import { LoginMethod } from "../pages/LoginPage";
import { useState } from "react";

const DEFAULT_SUPPORT_LINK = "https://github.com/etkecc/synapse-admin/issues";
const supportLink = (): string => {
try {
new URL(localStorage.getItem("support_url") || ''); // Check if the URL is valid
return localStorage.getItem("support_url") || DEFAULT_SUPPORT_LINK;
} catch (e) {
return DEFAULT_SUPPORT_LINK;
try {
new URL(localStorage.getItem("support_url") || ""); // Check if the URL is valid
return localStorage.getItem("support_url") || DEFAULT_SUPPORT_LINK;
} catch (e) {
return DEFAULT_SUPPORT_LINK;
}
};

const CustomUserMenu = () => {
const [open, setOpen] = useState(false);
const logout = useLogout();
const checkLoginType = (ev: React.MouseEvent<HTMLDivElement>) => {
const loginType: LoginMethod = (localStorage.getItem("login_type") || "credentials") as LoginMethod;
if (loginType === "accessToken") {
ev.stopPropagation();
setOpen(true);
}
};

const handleConfirm = () => {
setOpen(false);
logout();
};

const handleDialogClose = () => {
setOpen(false);
localStorage.removeItem("access_token");
localStorage.removeItem("login_type");
window.location.reload();
};

return (
<UserMenu>
<div onClickCapture={checkLoginType}>
<Logout />
</div>
<Confirm
isOpen={open}
title={`You are using an access token to login.`}
content="Do you want to destroy this session completely or just logout from the admin panel?"
onConfirm={handleConfirm}
onClose={handleDialogClose}
confirm="Destroy session"
cancel="Logout from admin panel"
/>
</UserMenu>
);
};

const CustomAppBar = () => <AppBar userMenu={<CustomUserMenu />} />;

const AdminMenu = () => (
<Menu>
<Menu.ResourceItems />
<Menu.Item to={supportLink()} target="_blank" primaryText="Contact support" leftIcon={<LiveHelpIcon />} />
</Menu>
<Menu>
<Menu.ResourceItems />
<Menu.Item to={supportLink()} target="_blank" primaryText="Contact support" leftIcon={<LiveHelpIcon />} />
</Menu>
);

export const AdminLayout = ({ children }) => (
<Layout menu={AdminMenu}>
{children}
</Layout>
<Layout appBar={CustomAppBar} menu={AdminMenu}>
{children}
</Layout>
);
2 changes: 1 addition & 1 deletion src/pages/LoginPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ import {
} from "../synapse/synapse";
import storage from "../storage";

type LoginMethod = "credentials" | "accessToken";
export type LoginMethod = "credentials" | "accessToken";

const LoginPage = () => {
const login = useLogin();
Expand Down
1 change: 1 addition & 0 deletions src/synapse/authProvider.ts
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,7 @@ const authProvider: AuthProvider = {
console.log("Error logging out", err);
} finally {
storage.removeItem("access_token");
storage.removeItem("login_type");
}
}
},
Expand Down