@datalayer/core
Version:
[](https://datalayer.io)
64 lines (63 loc) • 2.98 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*
* Copyright (c) 2023-2025 Datalayer, Inc.
* Distributed under the terms of the Modified BSD License.
*
* Datalayer License
*/
import { useState } from 'react';
import { Button, FormControl, TextInput } from '@primer/react';
import { Box } from '@datalayer/primer-addons';
import { useIAM, useNavigate, useToast } from '../../hooks';
import { useIAMStore } from '../../state';
/**
* Component for token-based authentication
* Provides a simple button that expands to show a token input form
*/
export const LoginToken = (props) => {
const { homeRoute, style } = props;
const [showForm, setShowForm] = useState(false);
const [token, setToken] = useState('');
const [loading, setLoading] = useState(false);
const { loginAndNavigate } = useIAM();
const { logout, checkIAMToken } = useIAMStore();
const { enqueueToast } = useToast();
const navigate = useNavigate();
const handleLogin = async () => {
if (!token.trim()) {
enqueueToast('Please enter a valid token', { variant: 'warning' });
return;
}
setLoading(true);
try {
await loginAndNavigate(token, logout, checkIAMToken, navigate, homeRoute);
setShowForm(false);
setToken('');
}
catch (error) {
console.error('Token login failed:', error);
enqueueToast('Failed to authenticate with provided token', {
variant: 'error',
});
}
finally {
setLoading(false);
}
};
if (!showForm) {
return (_jsx(Button, { onClick: () => setShowForm(true), style: style, children: "Login with Token" }));
}
return (_jsxs(Box, { style: style, children: [_jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Your Authentication Token" }), _jsx(TextInput, { block: true, placeholder: "Paste your authentication token here", value: token, onChange: e => setToken(e.target.value), onKeyDown: e => {
if (e.key === 'Enter') {
handleLogin();
}
else if (e.key === 'Escape') {
setShowForm(false);
setToken('');
}
} }), _jsx(FormControl.Caption, { children: "Enter your Datalayer authentication token to log in" })] }), _jsxs(Box, { mt: 3, display: "flex", justifyContent: "flex-start", children: [_jsx(Button, { variant: "primary", onClick: handleLogin, disabled: loading || !token.trim(), sx: { mr: 2 }, children: loading ? 'Authenticating...' : 'Login' }), _jsx(Button, { variant: "default", onClick: () => {
setShowForm(false);
setToken('');
}, children: "Cancel" })] })] }));
};
export default LoginToken;