SGERP Login

Prerequisites

This component requires sgerp-frontend-lib to be installed in your project. See the Installation guide for setup instructions.

Dependencies

This component will automatically install:

shadcn/ui components: button, input, select

Usage

import { SGERPLogin } from "@/components/ui/sgerp-login"

export function MyComponent() {
  return (
    <SGERPLogin
      backends={[
        { label: "Localhost", url: "http://localhost:8000" },
        { label: "Production", url: "https://api.example.com" },
      ]}
      onSuccess={(connectionId) => console.log("Connected:", connectionId)}
      onError={(error) => console.error("Error:", error)}
    />
  )
}

Props

Prop	Type	Description
`backends`	`Array<{ label: string; url: string }>`	Optional. List of available backends. Defaults to localhost and production
`onSuccess`	`(connectionId: string) => void`	Optional. Callback when connection succeeds
`onError`	`(error: string) => void`	Optional. Callback when connection fails
`className`	`string`	Optional. Additional CSS classes
`language`	`"en" \| "ja"`	Optional. Language for UI labels and messages. Defaults to "en"

Features

Backend Selection: Dropdown to select from multiple backends
Form Validation: Ensures all fields are filled
Connection Testing: Tests credentials before saving
Auto-save: Automatically saves connection to localStorage
Success/Error States: Shows visual feedback
Auto-clear: Clears form after successful connection
Localization: Supports English and Japanese UI languages

Examples

Basic Usage

<SGERPLogin />

Custom Backends

<SGERPLogin
  backends={[
    { label: "Development", url: "http://localhost:8000" },
    { label: "Staging", url: "https://staging.example.com" },
    { label: "Production", url: "https://api.example.com" },
  ]}
/>

With Callbacks

<SGERPLogin
  onSuccess={(connectionId) => {
    console.log(`Successfully connected as: ${connectionId}`)
    // Redirect to dashboard or refresh data
    window.location.reload()
  }}
  onError={(error) => {
    console.error(`Connection failed: ${error}`)
    // Show custom error toast/notification
  }}
/>

With Localization

Use the Language Selector component to allow users to switch languages:

import { useState } from 'react';
import { LanguageSelector } from '@/components/ui/language-selector';
import { SGERPLogin } from '@/components/ui/sgerp-login';

export function MyComponent() {
  const [language, setLanguage] = useState<"en" | "ja">("en");

  return (
    <div>
      <LanguageSelector language={language} onChange={setLanguage} />
      <SGERPLogin language={language} />
    </div>
  );
}

In a Dialog/Modal

import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { SGERPLogin } from "@/components/ui/sgerp-login"

export function LoginDialog({ open, onOpenChange }: { open: boolean; onOpenChange: (open: boolean) => void }) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Connect to SGERP</DialogTitle>
        </DialogHeader>
        <SGERPLogin
          onSuccess={() => onOpenChange(false)}
        />
      </DialogContent>
    </Dialog>
  )
}

How It Works

User Input: User enters username, password, and selects a backend
Validation: Component validates all fields are filled
Connection Test: Makes a test request to /api/v2/user/profile/ with Basic Auth
Save Connection: If successful, saves connection to localStorage via ConnectionManager
Activate: Sets the new connection as the active connection
Callback: Calls onSuccess with the connection ID

Integration with ConnectionManager

The component uses ConnectionManager from sgerp-frontend-lib to:

Save connection credentials securely in localStorage
Set the active connection that other components will use
Generate connection IDs in the format: username@hostname

After successful login, all SGERP components (like SGERPAutocomplete) will automatically use this connection.

Security Notes

Credentials are stored in browser localStorage (not secure for production use with sensitive data)
Uses HTTP Basic Authentication
Test connection validates credentials before saving
Consider implementing token-based auth for production

Try It Out - Test the component live
Configuration - Learn about connection management
SGERP Autocomplete - Use autocomplete with your connection

Live Example

Connect to SGERP