npm package: @lpti/unpam-sso
Description: Iframe embedder for UNPAM SSO login button - supports vanilla JS and React - no dependencies
Author: rochimeiji
Latest version: 0.1.6

# @lpti/unpam-sso

Embed the UNPAM SSO login button as an iframe widget. Supports both vanilla JavaScript and React (JSX/TSX) usage. No dependencies required for vanilla JS. TypeScript types included for React.

## Installation

```bash
npm install @lpti/unpam-sso
```

---

## Usage

### Vanilla JavaScript (Native, No Dependencies)

#### ES6 Modules

```js
import { embedButtonLogin } from '@lpti/unpam-sso';

// Basic usage
embedButtonLogin('login-container');

// With options
embedButtonLogin('login-container', {
  env: 'prod', // 'dev' or 'prod'
  lang: 'en',  // 'id' or 'en'
  size: 'lg',  // 'sm', 'md', or 'lg'
  theme: 'black', // 'white' or 'black'
  width: '300px',
  className: 'my-login-widget'
});
```

#### HTML Script Tag (via CDN)

```html
<script type="module">
  import { embedButtonLogin } from 'https://unpkg.com/@lpti/unpam-sso@latest/index.js';
  embedButtonLogin('login-container', {
    env: 'prod',
    lang: 'id',
    size: 'md',
    theme: 'white'
  });
</script>
<div id="login-container"></div>
```

---

### React Component (JSX/TSX)

#### Import (JSX or TypeScript)

```jsx
import { LoginButton } from '@lpti/unpam-sso/react';

function App() {
  return (
    <div>
      {/* Basic usage */}
      <LoginButton />
      {/* With options */}
      <LoginButton
        env="prod"
        lang="en"
        size="lg"
        theme="black"
        width="300px"
        className="my-login-widget"
        onLoad={() => console.log('Login button loaded')}
        onError={error => console.error('Login button error:', error)}
      />
    </div>
  );
}
```

#### React Hook Usage

```jsx
import { useLoginButton } from '@lpti/unpam-sso/react';

function CustomLoginComponent() {
  const { iframeUrl, isLoading, hasError, reload } = useLoginButton({
    env: 'prod',
    lang: 'id',
    size: 'md',
    theme: 'white'
  });

  if (isLoading) return <div>Loading login button...</div>;
  if (hasError) return <div>Error loading login button. <button onClick={reload}>Retry</button></div>;

  return (
    <iframe
      src={iframeUrl}
      width="100%"
      height="40px"
      frameBorder="0"
      scrolling="no"
    />
  );
}
```

---

## API

### Vanilla JavaScript

#### `embedButtonLogin(elementId, options)`

Embeds an iframe-based login button/widget into a target element.

**Parameters:**
- `elementId` (string): The id of the target HTML element
- `options` (object, optional):
  - `env` (string): 'dev' or 'prod'
  - `url` (string): Custom iframe src URL (overrides env)
  - `width` (string): CSS width (e.g. '300px')
  - `height` (string): CSS height (e.g. '80px')
  - `className` (string): Additional CSS class for the iframe
  - `style` (object): Inline style object for the iframe
  - `sandbox` (string): Sandbox attribute value
  - `title` (string): Title attribute for accessibility
  - `lang` (string): 'id' or 'en' (default: 'id')
  - `size` (string): 'sm', 'md', or 'lg' (default: 'md')
    - `sm`: 32px height
    - `md`: 40px height
    - `lg`: 48px height
  - `theme` (string): 'white' or 'black' (default: 'white')

### React Component

#### `<LoginButton />` Props

All the same options as the vanilla JS version, plus:
- `onLoad` (function): Callback when iframe loads successfully
- `onError` (function): Callback when iframe fails to load
- All standard iframe props are supported

#### `useLoginButton(options)` Hook

Returns an object with:
- `iframeUrl` (string): The generated iframe URL
- `isLoading` (boolean): Whether the URL is being validated
- `hasError` (boolean): Whether there was an error loading
- `reload` (function): Function to retry loading the URL

---

## Environment URLs

- **Development**: `https://devsso.unpam.ac.id/login-button`
- **Production**: `https://satu.unpam.ac.id/login-button`

---

## Features

- ✅ No dependencies for vanilla JS
- ✅ Native JavaScript ES6 modules
- ✅ React component (JSX/TSX) and TypeScript support
- ✅ React hooks for advanced usage
- ✅ Automatic domain detection
- ✅ Multiple language support (Indonesian/English)
- ✅ Theme support (white/black)
- ✅ Responsive sizing options
- ✅ URL validation before iframe creation
- ✅ Error handling and logging
- ✅ Loading states for React components

---

## File Structure (npm-package)

- `index.js` &mdash; Native JavaScript (no dependencies)
- `react.jsx` &mdash; React component (JSX, JavaScript)
- `react.tsx` &mdash; React component (TypeScript, recommended for TS/modern React)

---

## License

MIT