@makersclub/brandbot-app-login

v1.0.19

Published

4 days ago

BrandBot App Login Web Component - Angular-based authentication component

0High
0Medium
0Low

makersclub

angular web-component authentication login brandbot custom-element

BrandBot Login Web Component

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

Installation

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:

<!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

<!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

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

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

Vue

<template>
  <brandbot-login></brandbot-login>
</template>

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

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

Angular

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:

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:

<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

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 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.