apricote/Listory
1
0
Fork 0
mirror of https://github.com/apricote/Listory.git synced 2026-01-13 21:21:02 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(frontend): manage API tokens in Frontend

Browse source
This commit is contained in:
Julian Tölle 2023-02-20 23:50:57 +01:00
parent d0ca2b967e
commit ac0f9ff5d3
13 changed files with 484 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

67
frontend/src/components/NavBar.tsx
View file

@ -1,7 +1,9 @@
import React from "react";
import React, { useCallback, useRef, useState } from "react";
import { Link } from "react-router-dom";
import { User } from "../api/entities/user";
import { useAuth } from "../hooks/use-auth";
import { useOutsideClick } from "../hooks/useOutsideClick";
import { CogwheelIcon } from "../icons/Cogwheel";
import { SpotifyLogo } from "../icons/Spotify";
export const NavBar: React.FC = () => {
@ -56,21 +58,6 @@ export const NavBar: React.FC = () => {
);
};
const NavUserInfo: React.FC<{ user: User }> = ({ user }) => {
return (
<div className="flex items-center mr-4 mt-4 lg:mt-0">
<span className="text-green-200 text-sm">{user.displayName}</span>
{user.photo && (
<img
className="w-6 h-6 rounded-full ml-4"
src={user.photo}
alt="Profile of logged in user"
></img>
)}
</div>
);
};
const NavItem: React.FC<{ children: React.ReactNode }> = ({ children }) => {
return (
<span className="block mt-4 lg:inline-block lg:mt-0 text-green-200 hover:text-white mr-4">
@ -78,3 +65,51 @@ const NavItem: React.FC<{ children: React.ReactNode }> = ({ children }) => {
</span>
);
};
const NavUserInfo: React.FC<{ user: User }> = ({ user }) => {
const [menuOpen, setMenuOpen] = useState<boolean>(false);
const closeMenu = useCallback(() => setMenuOpen(false), [setMenuOpen]);
const wrapperRef = useRef(null);
useOutsideClick(wrapperRef, closeMenu);
return (
<div ref={wrapperRef}>
<div
className="flex items-center mr-4 mt-4 lg:mt-0 cursor-pointer"
onClick={() => setMenuOpen(!menuOpen)}
>
<span className="text-green-200 text-sm">{user.displayName}</span>
{user.photo && (
<img
className="w-6 h-6 rounded-full ml-4"
src={user.photo}
alt="Profile of logged in user"
></img>
)}
</div>
{menuOpen ? <NavUserInfoMenu closeMenu={closeMenu} /> : null}
</div>
);
};
const NavUserInfoMenu: React.FC<{ closeMenu: () => void }> = ({
closeMenu,
}) => {
return (
<div className="relative">
<div className="drop-down w-48 overflow-hidden bg-green-100 dark:bg-gray-700 text-gray-700 dark:text-green-200 rounded-md shadow absolute top-3 right-3">
<ul>
<li className="px-3 py-3 text-sm font-medium flex items-center space-x-2 hover:bg-green-200 hover:text-gray-800 dark:hover:text-white">
<span>
<CogwheelIcon className="w-5 h-5 fill-current" />
</span>
<Link to="/auth/api-tokens" onClick={closeMenu}>
API Tokens
</Link>
</li>
</ul>
</div>
</div>
);
};