@datalayer/core/lib/components/auth/Login.stories.js

[](https://datalayer.io)

import { jsx as _jsx } from "react/jsx-runtime";
import { BrowserRouter } from 'react-router-dom';
import { QueryClientProvider } from '@tanstack/react-query';
import { queryClient } from '../../utils/cli/query';
import { Login } from './Login';
/**
 * Login component provides a comprehensive authentication interface with multiple methods:
 * - Email/password authentication
 * - OAuth (GitHub, LinkedIn)
 * - Direct token input
 *
 * The component includes form validation, loading states, and error handling.
 */
const meta = {
    title: 'Components/Auth/Login',
    component: Login,
    parameters: {
        layout: 'fullscreen',
    },
    decorators: [
        Story => (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(BrowserRouter, { children: _jsx(Story, {}) }) })),
    ],
    tags: ['autodocs'],
};
export default meta;
/**
 * Default login form with all authentication methods enabled
 */
export const Default = {
    args: {
        heading: 'Login to Datalayer',
        homeRoute: '/home',
        loginRoute: '/login',
        showEmailLogin: true,
        showGitHubLogin: true,
        showTokenLogin: true,
    },
};
/**
 * Login form with only email/password authentication
 */
export const EmailOnly = {
    args: {
        heading: 'Login to Datalayer',
        homeRoute: '/home',
        loginRoute: '/login',
        showEmailLogin: true,
        showGitHubLogin: false,
        showTokenLogin: false,
    },
};
/**
 * Login form with only OAuth authentication
 */
export const OAuthOnly = {
    args: {
        heading: 'Login to Datalayer',
        homeRoute: '/home',
        loginRoute: '/login',
        showEmailLogin: false,
        showGitHubLogin: true,
        showTokenLogin: false,
    },
};
/**
 * Login form with only token authentication
 */
export const TokenOnly = {
    args: {
        heading: 'Login to Datalayer',
        homeRoute: '/home',
        loginRoute: '/login',
        showEmailLogin: false,
        showGitHubLogin: false,
        showTokenLogin: true,
    },
};
/**
 * Login form with custom heading
 */
export const CustomHeading = {
    args: {
        heading: 'Welcome Back!',
        homeRoute: '/home',
        loginRoute: '/login',
        showEmailLogin: true,
        showGitHubLogin: true,
        showTokenLogin: true,
    },
};
/**
 * Login form with all authentication methods including password reset link
 */
export const WithPasswordReset = {
    args: {
        heading: 'Login to Datalayer',
        homeRoute: '/home',
        loginRoute: '/login',
        passwordRoute: '/password-reset',
        showEmailLogin: true,
        showGitHubLogin: true,
        showTokenLogin: true,
    },
};