mirror of
https://github.com/spacedriveapp/spacedrive
synced 2024-07-13 13:04:04 +00:00
d19ff363e1
* move things around * enable sort by/direction for list view * more machine generated translations yey + minor stuff
50 lines
1.1 KiB
TypeScript
50 lines
1.1 KiB
TypeScript
import clsx from 'clsx';
|
|
import { auth } from '@sd/client';
|
|
import { Button, ButtonProps } from '@sd/ui';
|
|
import { useLocale } from '~/hooks';
|
|
|
|
import { usePlatform } from '..';
|
|
|
|
export function LoginButton({
|
|
children,
|
|
cancelPosition = 'bottom',
|
|
...props
|
|
}: { onLogin?(): void; cancelPosition?: 'bottom' | 'left' } & ButtonProps) {
|
|
const authState = auth.useStateSnapshot();
|
|
const platform = usePlatform();
|
|
|
|
const { t } = useLocale();
|
|
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
'flex items-center justify-center gap-2',
|
|
cancelPosition === 'bottom' ? 'flex-col' : 'flex-row-reverse'
|
|
)}
|
|
>
|
|
<Button
|
|
variant="accent"
|
|
disabled={authState.status === 'loggingIn'}
|
|
onClick={async () => {
|
|
await auth.login(platform.auth);
|
|
props.onLogin?.();
|
|
}}
|
|
{...props}
|
|
>
|
|
{authState.status !== 'loggingIn' ? children || t('log_in') : t('logging_in')}
|
|
</Button>
|
|
{authState.status === 'loggingIn' && (
|
|
<button
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
auth.cancel();
|
|
}}
|
|
className="text-sm text-ink-faint"
|
|
>
|
|
{t('cancel')}
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|