npm package: @makersclub/brandbot-app-login
Description: BrandBot App Login Web Component - Angular-based authentication component
Author: Makersclub Team
Latest version: 1.0.19

# BrandBot Login Web Component

A customizable Angular-based web component for authentication with Google, Microsoft, and BrandBot login options.

## Installation

```bash
npm install @makersclub/brandbot-app-login
```

## Usage

### As a Web Component (Recommended)

After installing the package, you can use it directly in any HTML page:

```html
<!DOCTYPE html>
<html>
<head>
    <script src="node_modules/@makersclub/brandbot-app-login/brandbot.login/browser/main.js"></script>
</head>
<body>
    <brandbot-login></brandbot-login>
</body>
</html>
```

### Using CDN

```html
<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/@makersclub/brandbot-app-login@latest/brandbot.login/browser/main.js"></script>
</head>
<body>
    <brandbot-login></brandbot-login>
</body>
</html>
```

### In a Framework

The component can be used in any framework that supports custom elements:

#### React
```jsx
import '@makersclub/brandbot-app-login/brandbot.login/browser/main.js';

function App() {
  return (
    <div>
      <brandbot-login></brandbot-login>
    </div>
  );
}
```

#### Vue
```vue
<template>
  <brandbot-login></brandbot-login>
</template>

<script>
import '@makersclub/brandbot-app-login/brandbot.login/browser/main.js';

export default {
  name: 'App'
}
</script>
```

#### Angular
```typescript
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@makersclub/brandbot-app-login/brandbot.login/browser/main.js';

@Component({
  selector: 'app-root',
  template: '<brandbot-login></brandbot-login>',
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppComponent { }
```

## Features

- 🔐 Multiple authentication providers (Google, Microsoft, BrandBot)
- 🌍 Multi-language support
- 🎨 Customizable styling
- 📱 Responsive design
- ⚡ Lightweight and fast
- 🔧 Framework agnostic

## Events

The component emits custom events that you can listen to:

```javascript
const loginComponent = document.querySelector('brandbot-login');

// Listen for authentication success
loginComponent.addEventListener('loginSuccess', (event) => {
  console.log('User logged in:', event.detail);
});

// Listen for authentication errors
loginComponent.addEventListener('loginError', (event) => {
  console.log('Login error:', event.detail);
});
```

## Configuration

You can configure the component using attributes:

```html
<brandbot-login 
  language="es"
  theme="dark"
  providers="google,microsoft">
</brandbot-login>
```

### Available Attributes

- `language`: Set the interface language (default: 'en')
- `theme`: Set the theme ('light' or 'dark')
- `providers`: Comma-separated list of enabled providers

## Development

This component is built with Angular and compiled as a standalone web component.

### Building from Source

```bash
git clone https://github.com/Makersclub-Team/brandbot.login.git
cd brandbot.login
npm install
npm run build:npm
```

## Browser Support

- Chrome 60+
- Firefox 63+
- Safari 10.1+
- Edge 79+

## License

MIT License - see [LICENSE](LICENSE) file for details.

## Contributing

Contributions are welcome! Please read our contributing guidelines and submit pull requests to our repository.

## Support

For support, please open an issue on our [GitHub repository](https://github.com/Makersclub-Team/brandbot.login/issues).