updated backend

package.json

@@ -23,6 +23,7 @@
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.4.5",
         "sass": "^1.56.2",
+        "tailwind-override": "^0.6.1",
         "tailwindcss": "^3.2.4",
         "typescript": "^4.9.4",
         "vite": "^4.0.0"

src/App.tsx

@@ -4,17 +4,17 @@ import { Bot } from "./pages/Bot";
 import { Bots } from "./pages/Bots";
 import { Dashboard } from "./pages/Dashboard";
 import { Layout } from "./pages/Layout";
-import { Login } from "./pages/Login";
+import { Login, Logout } from "./pages/Login";
 import { Settings } from "./pages/Settings";
 import { Token } from "./pages/Token";
 import { Tokens } from "./pages/Tokens";
 
 function App() {
     return (
-        <div className="bg-gray-900 text-gray-200 w-full h-full">
+        <div className="bg-gray-900 text-gray-200 w-full h-full overflow-y-auto">
             <BrowserRouter>
                 <Routes>
-                    <Route path="/logout" element={<Login />} />
+                    <Route path="/logout" element={<Logout />} />
                     <Route path="/login" element={<Login />} />
                     <Route path="/" element={<Layout />}>
                         <Route index element={<Dashboard />} />

src/authorization.ts

@@ -88,6 +88,34 @@ export function authorizeLogin(
         })
 }
 
+export async function authFetch<T = any>(
+    endpoint: string,
+    method: 'GET' | 'POST' | 'DELETE' | 'PATCH',
+    body?: any
+): Promise<T | null> {
+    const token = getTokenFromStorage()
+
+    if (token) {
+        return await fetch('http://localhost:8080' + endpoint, {
+            method: method,
+            headers: {
+                'Content-Type': 'application/json',
+                Authorization: 'Bearer ' + token,
+            },
+            body: JSON.stringify(body),
+        }).then(response => {
+            if (response.status === 401) {
+                clearTokenFromStorage()
+                return null
+            } else {
+                return response.json() as T
+            }
+        })
+    }
+
+    return null
+}
+
 export function useAuthFetch<T = any>(
     endpoint: string,
     method: 'GET' | 'POST' | 'DELETE' | 'PATCH',
@@ -96,31 +124,31 @@ export function useAuthFetch<T = any>(
     const [data, setData] = useState<T | null>(null)
 
     useEffect(() => {
-        const token = getTokenFromStorage()
+        authFetch(endpoint, method, body)
-
+            .then(setData)
-        if (token) {
+            .catch(err => {
-            fetch('http://localhost:8080' + endpoint, {
+                console.error(err)
-                method: method,
-                headers: {
-                    'Content-Type': 'application/json',
-                    Authorization: 'Bearer ' + token,
-                },
-                body: JSON.stringify(body),
             })
-                .then(response => {
-                    if (response.status === 401) {
-                        // clearTokenFromStorage()
-                        return null
-                    } else {
-                        return response.json() as T
-                    }
-                })
-                .then(setData)
-                .catch(err => {
-                    console.error(err)
-                })
-        }
     }, [])
 
     return data
 }
+
+export function useAuthFetchRepeat<T = any>(
+    endpoint: string,
+    method: 'GET' | 'POST' | 'DELETE' | 'PATCH',
+    body?: T
+): [T | null, () => void] {
+    const [data, setData] = useState<T | null>(null)
+
+    const run = () => {
+        authFetch(endpoint, method, body)
+            .then(setData)
+            .catch(err => {
+                console.error(err)
+            })
+    }
+    useEffect(run, [])
+
+    return [data, run]
+}

src/components/Icons.tsx

@@ -0,0 +1,45 @@
+export interface IconProps {
+    height?: string
+}
+
+export function SVGRightArrow({ height = "1rem" }: IconProps) {
+    return (
+        <svg viewBox="0 0 1000 1000" height={height}>
+            <path d="M619.5,899.5l350-350c27.3-27.3,27.3-71.7,0-99l-350-350c-27.3-27.3-71.7-27.3-99,0c-27.3,27.3-27.3,71.7,0,99L751,430H80c-38.7,0-70,31.3-70,70c0,38.7,31.3,70,70,70h671L520.5,800.5C506.8,814.2,500,832.1,500,850c0,17.9,6.8,35.8,20.5,49.5C547.8,926.8,592.2,926.8,619.5,899.5z" />
+        </svg>
+    )
+}
+
+export function SVGEye({ height = "1.5rem" }: IconProps) {
+    return (
+        <svg viewBox="0 0 128 128" height={height}>
+            <path d="M64 53.333c12.51 0 22.667 10.157 22.667 22.666C86.667 88.51 76.51 98.667 64 98.667 51.49 98.667 41.333 88.51 41.333 76 41.333 63.49 51.49 53.333 64 53.333Zm0 8c-8.095 0-14.666 6.573-14.666 14.666 0 8.096 6.571 14.667 14.667 14.667 8.093 0 14.666-6.571 14.666-14.667 0-8.093-6.573-14.666-14.666-14.666Z" /><path d="M13.524 58.564a4.002 4.002 0 0 1-5.656.059 4.002 4.002 0 0 1-.059-5.657C22.092 38.385 41.997 29.333 64 29.333s41.908 9.052 56.191 23.633a4.002 4.002 0 0 1-.059 5.657 4.002 4.002 0 0 1-5.656-.059C101.646 45.466 83.765 37.333 64 37.333s-37.646 8.133-50.476 21.231Z" />
+        </svg>
+    )
+}
+
+export function SVGHamburger({ height = "1.5em" }: IconProps) {
+    return (
+        <svg viewBox="0 0 3000 3000" height={height}>
+            <path d="M2999.992 646.808c0-110.36-89.592-199.958-199.96-199.958H199.957C89.598 446.85-.001 536.448-.001 646.808s89.599 199.957 199.957 199.957h2600.077c110.367 0 199.959-89.598 199.959-199.957ZM2999.992 1500c0-110.36-89.592-199.957-199.96-199.957H199.957C89.598 1300.043-.001 1389.641-.001 1500c0 110.36 89.599 199.958 199.957 199.958h2600.077c110.367 0 199.959-89.598 199.959-199.958ZM.01 2353.19c0 110.36 89.592 199.958 199.96 199.958h2600.076c110.358 0 199.957-89.598 199.957-199.957 0-110.36-89.599-199.958-199.957-199.958H199.97C89.602 2153.233.01 2242.831.01 2353.191Z" />
+        </svg>
+    )
+}
+
+export function SVGPlus({ height = "2em" }: IconProps) {
+    return (
+        <svg viewBox="0 0 128 128" height={height}>
+            <path d="M10.667,74C5.148,74 0.667,69.519 0.667,64C0.667,58.481 5.148,54 10.667,54L117.333,54C122.852,54 127.333,58.481 127.333,64C127.333,69.519 122.852,74 117.333,74L10.667,74Z" />
+            <path d="M54,10.667C54,5.148 58.481,0.667 64,0.667C69.519,0.667 74,5.148 74,10.667L74,117.333C74,122.852 69.519,127.333 64,127.333C58.481,127.333 54,122.852 54,117.333L54,10.667Z" />
+        </svg>
+    )
+}
+
+export function SVGx({ height = "1em" }: IconProps) {
+    return (
+        <svg viewBox="0 0 128 128" height={height}>
+            <path d="M8.882 23.024c-3.903-3.903-3.903-10.24 0-14.142 3.903-3.903 10.24-3.903 14.142 0l96.094 96.094c3.903 3.903 3.903 10.24 0 14.142-3.903 3.903-10.24 3.903-14.142 0L8.882 23.024Z" />
+            <path d="M104.976 8.882c3.903-3.903 10.24-3.903 14.142 0 3.903 3.902 3.903 10.24 0 14.142l-96.094 96.094c-3.903 3.903-10.24 3.903-14.142 0-3.903-3.903-3.903-10.24 0-14.142l96.094-96.094Z" />
+        </svg>
+    )
+}

src/components/Inputs.tsx

@@ -0,0 +1,113 @@
+import { createRef, HTMLAttributes, InputHTMLAttributes, useState } from "react"
+import { overrideTailwindClasses } from '../general'
+import { SVGEye } from "./Icons"
+
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+    altColor?: boolean
+    invalid?: boolean
+}
+
+export function InputText({ invalid, altColor, className, ...props }: InputProps) {
+    return (
+        <input type="text" {...props}
+            className={overrideTailwindClasses(`
+                inline-block
+                rounded-full
+                px-3 py-1 mx-2
+                w-64
+                ${!altColor ? `
+                    bg-gray-800 focus:bg-gray-700
+                    text-gray-400 focus:text-gray-200
+                ` : `
+                    bg-gray-700 focus:bg-gray-600
+                    text-gray-300 focus:text-gray-100
+                `}
+                shadow-glow
+                outline-none shadow-transparent 
+                ${invalid ? "outline-red-600 shadow-red-600" : ""}
+                focus:outline-blue-500 focus:shadow-blue-500
+                transition-all
+                ${className ?? ""}
+            `)} />
+    )
+}
+
+export function InputPassword({ invalid, altColor, className, ...props }: InputProps) {
+    var inputRef = createRef<HTMLInputElement>()
+    var [focused, setFocused] = useState(false)
+    var [interacting, setInteracting] = useState(false)
+    var [showPassword, setShowPassword] = useState(false)
+
+    var toggleShowPassword = () => {
+        setShowPassword(!showPassword)
+        inputRef.current?.focus()
+    }
+
+    return (
+        <span
+            onFocus={() => setFocused(true)}
+            onBlur={() => setFocused(false)}
+            className={overrideTailwindClasses(`
+                inline-flex
+                flex-row
+                rounded-full
+                px-3 py-1 mx-2
+                w-64
+                ${!altColor ? "bg-gray-800" : "bg-gray-700"}
+                shadow-glow
+                outline-none shadow-transparent
+                ${invalid ? "outline-red-600 shadow-red-600" : ""}
+                ${focused || interacting ? `outline-blue-500 shadow-blue-500 ${!altColor ? "bg-gray-800" : "bg-gray-600"}` : ""}
+                transition-all
+                ${className ?? ""}
+            `)}>
+            <input type={showPassword ? "text" : "password"}
+                ref={inputRef}
+                {...props}
+                className={overrideTailwindClasses(`
+                    w-1 flex-grow
+                    bg-transparent
+                    ${!altColor ? "text-gray-400" : "text-gray-300"}
+                    ${focused || interacting ? `${!altColor ? "text-gray-200" : "text-gray-100"}` : ""}
+                    outline-none
+                `)} />
+            <span
+                className={overrideTailwindClasses(`
+                    h-full
+                    pl-2
+                    border-l ${!altColor ? "border-gray-600" : "border-gray-500"}
+                    ${focused || interacting ? "opacity-100" : "opacity-0"}
+                    transition-all
+                    ${showPassword ? (!altColor ? "fill-blue-500" : "fill-blue-400") : (!altColor ? "fill-gray-400" : "fill-gray-300")}
+                `)}
+                onClick={() => toggleShowPassword()}
+                onMouseDown={() => setInteracting(true)}
+                onMouseUp={() => setInteracting(false)}>
+                <SVGEye />
+            </span>
+        </span>
+    )
+}
+
+interface ButtonProps extends HTMLAttributes<HTMLButtonElement> {
+    icon?: boolean
+}
+
+export function Button({ children, icon, className, ...props }: ButtonProps) {
+    return (
+        <button className={overrideTailwindClasses(`
+            rounded-full outline-none
+            bg-gray-800 focus:bg-gray-700
+            hover:bg-gray-700 active:bg-gray-800
+            fill-gray-400 focus:fill-gray-200
+            px-3 py-1 mx-2
+            shadow-glow shadow-transparent
+            focus:outline-blue-500 focus:shadow-blue-500
+            transition-all
+            ${className ?? ""}
+        `)}
+            {...props}>
+            {children}
+        </button>
+    )
+}

src/general.ts

@@ -0,0 +1,16 @@
+import { overrideTailwindClasses as otc, Options } from 'tailwind-override'
+
+export function overrideTailwindClasses(
+    classNamesString: string,
+    optionsArgs?: Partial<Options>
+) {
+    return otc(classNamesString, optionsArgs).trim()
+}
+
+export function plural(
+    n: number,
+    singular: string,
+    plural: string = singular + 's'
+) {
+    return n === 1 ? singular : plural
+}

src/pages/Bots.tsx

@@ -1,10 +1,166 @@
-import { useAuthFetch } from "../authorization"
+import { useMemo, useState } from "react"
+import { Link } from "react-router-dom"
+import { authFetch, useAuthFetchRepeat } from "../authorization"
+import { SVGPlus, SVGx } from "../components/Icons"
+import { Button, InputPassword } from "../components/Inputs"
+import { overrideTailwindClasses, plural } from "../general"
 
-export function Bots() {
+interface DiscordBot {
-    var data = useAuthFetch("/bots", "GET")
+    user: {
+        id: string
+        username: string
+        discriminator: string
+        avatar: string
+        bot: boolean
+        verified: boolean
+    }
+    token_count: number
+}
+
+function BotContainer({ children, ...props }: { children: React.ReactNode } & React.HTMLAttributes<HTMLDivElement>) {
     return (
-        <div>
+        <div {...props} className={`
-            {JSON.stringify(data)}
+            group
+            inline-block
+            w-64 h-96
+            m-4
+            rounded-xl
+            overflow-hidden
+            bg-gray-600
+            hover:bg-gray-700
+            transition-all
+            cursor-default
+        `}>
+            <div className="flex w-full h-full flex-col justify-center items-center">
+                {children}
+            </div>
+        </div>
+    )
+}
+
+function Bot({ bot }: { bot: DiscordBot }) {
+    console.log(bot)
+    const { user, token_count } = bot
+    return (
+        <Link to={`/bot/${user.id}`}>
+            <BotContainer>
+                <img
+                    src={`https://cdn.discordapp.com/avatars/${user.id}/${user.avatar}.png`}
+                    className="w-full" />
+                <div className="text-2xl flex-grow inline-flex justify-center items-center">
+                    <span className="text-gray-300">{user.username}</span>
+                    <span className="text-gray-300">#{user.discriminator}</span>
+                </div>
+                <div className="text-l flex-grow inline-flex justify-center items-center">
+                    <span className="text-gray-400">{token_count} Assigned {plural(token_count, 'Token')}</span>
+                </div>
+            </BotContainer>
+        </Link>
+    )
+}
+
+function AddBot({ onClick = () => { } }: { onClick?: () => void }) {
+    return (
+        <BotContainer onClick={() => onClick()}>
+            <div className={`
+                rounded-full
+                p-4
+                bg-gray-500
+                fill-gray-900
+                group-hover:bg-gray-400
+                transition-all
+            `}>
+                <SVGPlus />
+            </div>
+        </BotContainer>
+    )
+}
+
+function AddBotModal({ visible, onClose }: { visible: boolean, onClose: () => void }) {
+    const [token, setToken] = useState("")
+    const [invalid, setInvalid] = useState(false)
+
+    useMemo(() => {
+        setToken("")
+        setInvalid(false)
+    }, [visible])
+
+    useMemo(() => {
+        setInvalid(false)
+    }, [token])
+
+    const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault()
+        const success = await authFetch<{ success: boolean }>("/bot", "POST", { token })
+        if (success?.success) {
+            onClose()
+        } else {
+            setInvalid(true)
+        }
+    }
+
+    return (
+        <form onSubmit={onSubmit} className={`
+            fixed
+            top-0 left-0
+            w-full h-full
+            flex justify-center items-center
+            ${visible ? "opacity-100" : "pointer-events-none opacity-0"}
+            transition-all
+        `}>
+            <div className={overrideTailwindClasses(`
+                absolute
+                top-0 left-0
+                w-full h-full
+                bg-gray-900 bg-opacity-50
+                z-0
+            `)} onClick={() => onClose()} />
+            <div className={`
+                relative
+                bg-gray-800
+                rounded-xl
+                p-4
+                z-10
+            `}>
+                <Button
+                    className="absolute px-2 py-2 mx-6 my-3 top-0 right-0 fill-gray-300"
+                    onClick={(e) => {
+                        e.preventDefault()
+                        onClose()
+                    }}>
+                    <SVGx />
+                </Button>
+                <div className={`px-3 pb-3`}>
+                    Bot Token
+                </div>
+                <InputPassword invalid={invalid} altColor className="shadow-none" value={token} onChange={e => setToken(e.target.value)} />
+                <Button>
+                    Add
+                </Button>
+            </div>
+        </form>
+    )
+}
+
+export function Bots() {
+    const [bots, fetch] = useAuthFetchRepeat<DiscordBot[]>("/bots", "GET")
+    const [addingBot, setAddingBot] = useState(false)
+
+    var manyBots = useMemo(() => {
+        if (!bots) return null
+        let b = bots.slice()
+        for (let i = 0; i < 10; i++) b.push(b[0])
+        return b
+    }, [bots])
+
+    return (
+        <div>
+            {bots && bots.map((bot, i) => <Bot bot={bot} key={i} />)}
+            <AddBot onClick={() => setAddingBot(true)} />
+            <AddBotModal visible={addingBot} onClose={() => {
+                setAddingBot(false)
+                fetch()
+            }} />
         </div>
     )
 }

src/pages/Layout.tsx

@@ -1,5 +1,7 @@
 import { Outlet, Navigate, NavLink } from 'react-router-dom'
 import { isLoggedIn, LoginState, usePersistentState } from '../authorization'
+import { SVGHamburger } from '../components/Icons'
+import { Button } from '../components/Inputs'
 
 function SLink({ to, children, important }: {
     to: string,
@@ -31,26 +33,19 @@ export function Layout() {
                 isLoggedIn() === LoginState.No && <Navigate to="/login" replace={true} />
             }
             <div
-                className={
+                className={`
-                    "fixed top-0 left-0 h-full overflow-hidden bg-gray-700 text-gray-400 "
+                    fixed
-                    + (collapsed ? "w-14" : "w-48")
+                    top-0 left-0
-                }>
+                    h-full
-                <label className="inline-block rounded-full outline-none focus:bg-gray-700 hover:bg-gray-700 active:bg-gray-800 fill-gray-400 focus:fill-gray-200 px-3 py-2 mx-2 shadow-glow shadow-transparent invalid:outline-red-600 invalid:shadow-red-600 focus:outline-blue-500 focus:shadow-blue-500 transition-all">
+                    overflow-x-hidden
-                    {/* TODO I COPIED THE ABOVE FROM LOGIN */}
+                    overflow-y-auto
-                    <input className="hidden" type="checkbox" checked={collapsed} onChange={e => setCollapsed(e.target.checked)} />
+                    bg-gray-700 text-gray-400
-                    <svg height="24px" viewBox="0 0 3000 3000">
+                    ${collapsed ? "w-14" : "w-48"}
-                        <g transform="matrix(1.50981,0,0,1.2859,-338.198,86.7981)">
+                `}>
-                            <path d="M2211,435.5C2211,349.677 2151.66,280 2078.56,280L356.438,280C283.344,280 224,349.677 224,435.5C224,521.323 283.344,591 356.438,591L2078.56,591C2151.66,591 2211,521.323 2211,435.5Z" />
+                <Button className="px-3 py-2" onClick={() => setCollapsed(!collapsed)}>
-                        </g>
+                    <SVGHamburger />
-                        <g transform="matrix(1.50981,0,0,1.2859,-338.198,939.991)">
+                </Button>
-                            <path d="M2211,435.5C2211,349.677 2151.66,280 2078.56,280L356.438,280C283.344,280 224,349.677 224,435.5C224,521.323 283.344,591 356.438,591L2078.56,591C2151.66,591 2211,521.323 2211,435.5Z" />
+                <div>
-                        </g>
-                        <g transform="matrix(-1.50981,1.84899e-16,-1.57477e-16,-1.2859,3338.2,2913.2)">
-                            <path d="M2211,435.5C2211,349.677 2151.66,280 2078.56,280L356.438,280C283.344,280 224,349.677 224,435.5C224,521.323 283.344,591 356.438,591L2078.56,591C2151.66,591 2211,521.323 2211,435.5Z" />
-                        </g>
-                    </svg>
-                </label>
-                <div className="menu">
                     <SLink to="/">Dashboard</SLink>
                     <SLink to="/bots">Bots</SLink>
                     <SLink to="/tokens">Tokens</SLink>

src/pages/Login.tsx

@@ -1,14 +1,13 @@
-import { createRef, useEffect, useMemo, useState } from "react"
+import { useMemo, useState } from "react"
 import { Navigate } from "react-router-dom"
 import { authorizeLogin, isLoggedIn, LoginState, useClearToken } from "../authorization"
+import { SVGRightArrow } from "../components/Icons"
+import { Button, InputPassword, InputText } from "../components/Inputs"
 
 export function Login() {
     var [username, setUsername] = useState("")
     var [password, setPassword] = useState("")
-    var [loginState, setLoginState] = useState(isLoggedIn())
+    var [loginState, setLoginState] = useState(isLoggedIn)
-
-    var usernameRef = createRef<HTMLInputElement>()
-    var passwordRef = createRef<HTMLInputElement>()
 
     var login = (e: React.ChangeEvent<HTMLFormElement>) => {
         e.preventDefault()
@@ -25,31 +24,21 @@ export function Login() {
         }
     }, [username, password])
 
-    useEffect(() => {
-        if (loginState === LoginState.Invalid) {
-            usernameRef.current?.setCustomValidity("Invalid username or password")
-            passwordRef.current?.setCustomValidity("Invalid username or password")
-        } else {
-            usernameRef.current?.setCustomValidity("")
-            passwordRef.current?.setCustomValidity("")
-        }
-    }, [loginState])
-
     return (
         <div className="flex w-full h-full justify-center items-center align-middle">
             <form onSubmit={login}>
                 <div className="flex justify-center items-center align-middle my-2">
-                    <input type="text" ref={usernameRef} onChange={e => setUsername(e.target.value)}
+                    <InputText
-                        className="rounded-full outline-none bg-gray-800 focus:bg-gray-700 text-gray-400 focus:text-gray-200 px-3 py-1 mx-2 shadow-glow shadow-transparent invalid:outline-red-600 invalid:shadow-red-600 focus:outline-blue-500 focus:shadow-blue-500 transition-all" />
+                        invalid={loginState === LoginState.Invalid}
-                    <input type="password" ref={passwordRef} onChange={e => setPassword(e.target.value)}
+                        onChange={e => setUsername(e.target.value)} />
-                        className="rounded-full outline-none bg-gray-800 focus:bg-gray-700 text-gray-400 focus:text-gray-200 px-3 py-1 mx-2 shadow-glow shadow-transparent invalid:outline-red-600 invalid:shadow-red-600 focus:outline-blue-500 focus:shadow-blue-500 transition-all" />
+                    <InputPassword
+                        invalid={loginState === LoginState.Invalid}
+                        onChange={e => setPassword(e.target.value)} />
                 </div>
                 <div className="flex justify-center items-center align-middle my-2">
-                    <button className="rounded-full outline-none bg-gray-800 focus:bg-gray-700 hover:bg-gray-700 active:bg-gray-800 fill-gray-400 focus:fill-gray-200 px-3 py-2 shadow-glow shadow-transparent invalid:outline-red-600 invalid:shadow-red-600 focus:outline-blue-500 focus:shadow-blue-500 transition-all">
+                    <Button className="px-3 py-2">
-                        <svg viewBox="0 0 1000 1000" height="16px">
+                        <SVGRightArrow />
-                            <path d="M619.5,899.5l350-350c27.3-27.3,27.3-71.7,0-99l-350-350c-27.3-27.3-71.7-27.3-99,0c-27.3,27.3-27.3,71.7,0,99L751,430H80c-38.7,0-70,31.3-70,70c0,38.7,31.3,70,70,70h671L520.5,800.5C506.8,814.2,500,832.1,500,850c0,17.9,6.8,35.8,20.5,49.5C547.8,926.8,592.2,926.8,619.5,899.5z" />
+                    </Button>
-                        </svg>
-                    </button>
                 </div>
             </form>
             {

src/pages/Settings.tsx

@@ -1,7 +1,10 @@
+import { LoginTokensMini } from "./settings/LoginTokensMini";
+
 export function Settings() {
     return (
         <div>
             settings
+            <LoginTokensMini />
         </div>
     )
 }

src/pages/settings/LoginTokensMini.tsx

@@ -0,0 +1,32 @@
+import { useAuthFetch } from "../../authorization"
+import { plural } from "../../general"
+
+interface LoginToken {
+    id: string
+    ip: string
+    end: string
+    user_agent: UserAgent
+    created_at: string
+    last_login: string
+}
+
+interface UserAgent {
+    name: string
+    version: string
+    os: string
+    os_version: string
+    mobile: boolean
+    tablet: boolean
+    desktop: boolean
+}
+
+export function LoginTokensMini() {
+    const tokens = useAuthFetch<LoginToken[]>("/login/tokens", "GET")
+    return tokens && (
+        <div>
+            <span>
+                {tokens.length} Login {plural(tokens.length, 'Token')}
+            </span>
+        </div>
+    )
+}