intellisoftpr-mi-claro-user-validator-callback

v0.1.2

Published

6 months ago

Stencil Component Starter

0High
0Medium
0Low

soyalexrc

arodriguez2404

Mi Claro User Validator Callback

A web component for Mi Claro user validation with phone number verification and OTP confirmation.

Features

📱 Phone number validation with Mi Claro backend
🔐 OTP (One-Time Password) verification
🎨 Branded Mi Claro design system
🌐 Multi-environment support (production, UAT, DSS, dev)
🔄 Mock API mode for development/testing
📱 Responsive design for mobile and desktop
⚡ Framework agnostic (works with React, Angular, Vue, Vanilla JS)

Installation

npm install intellisoft-mi-claro-user-validator-callback

Quick Start

Vanilla HTML/JavaScript

<!DOCTYPE html>
<html>
<head>
  <script type="module" src="https://unpkg.com/intellisoft-mi-claro-user-validator-callback/dist/mi-claro-user-validator-callback/mi-claro-user-validator-callback.esm.js"></script>
</head>
<body>
  <mi-claro-user-validation-callback
    id="validator"
    callback-url="https://your-app.com/callback"
    options='{"environment": "production"}'
  ></mi-claro-user-validation-callback>

  <script>
    const validator = document.getElementById('validator');
    
    validator.addEventListener('validationComplete', (event) => {
      console.log('Validation successful:', event.detail);
      // Handle successful validation
      // event.detail = { success: true, token: "jwt-token-here" }
    });
    
    validator.addEventListener('validationError', (event) => {
      console.error('Validation failed:', event.detail);
      // Handle validation error
    });
  </script>
</body>
</html>

React

import React, { useRef, useEffect } from 'react';

// Import the component
import 'mi-claro-user-validator-callback/dist/mi-claro-user-validator-callback/mi-claro-user-validator-callback.esm.js';

function App() {
  const validatorRef = useRef(null);

  useEffect(() => {
    const validator = validatorRef.current;
    
    const handleValidationComplete = (event) => {
      console.log('Validation successful:', event.detail);
      // Handle successful validation
    };
    
    const handleValidationError = (event) => {
      console.error('Validation failed:', event.detail);
      // Handle validation error
    };

    validator.addEventListener('validationComplete', handleValidationComplete);
    validator.addEventListener('validationError', handleValidationError);

    return () => {
      validator.removeEventListener('validationComplete', handleValidationComplete);
      validator.removeEventListener('validationError', handleValidationError);
    };
  }, []);

  return (
    <div>
      <mi-claro-user-validation-callback
        ref={validatorRef}
        callback-url="https://your-app.com/callback"
        options={JSON.stringify({ environment: 'production' })}
      />
    </div>
  );
}

export default App;

Angular

// app.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

// Import the component
import 'mi-claro-user-validator-callback/dist/mi-claro-user-validator-callback/mi-claro-user-validator-callback.esm.js';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA] // Add this
})
export class AppModule { }

// app.component.ts
import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <mi-claro-user-validation-callback
      #validator
      [callback-url]="callbackUrl"
      [options]="options"
    ></mi-claro-user-validation-callback>
  `
})
export class AppComponent implements AfterViewInit {
  @ViewChild('validator', { static: false }) validator!: ElementRef;
  
  callbackUrl = 'https://your-app.com/callback';
  options = JSON.stringify({ environment: 'production' });

  ngAfterViewInit() {
    this.validator.nativeElement.addEventListener('validationComplete', (event: any) => {
      console.log('Validation successful:', event.detail);
    });
    
    this.validator.nativeElement.addEventListener('validationError', (event: any) => {
      console.error('Validation failed:', event.detail);
    });
  }
}

Vue.js

<template>
  <mi-claro-user-validation-callback
    ref="validator"
    :callback-url="callbackUrl"
    :options="options"
  />
</template>

<script>
// Import the component
import 'mi-claro-user-validator-callback/dist/mi-claro-user-validator-callback/mi-claro-user-validator-callback.esm.js';

export default {
  name: 'App',
  data() {
    return {
      callbackUrl: 'https://your-app.com/callback',
      options: JSON.stringify({ environment: 'production' })
    };
  },
  mounted() {
    const validator = this.$refs.validator;
    
    validator.addEventListener('validationComplete', (event) => {
      console.log('Validation successful:', event.detail);
    });
    
    validator.addEventListener('validationError', (event) => {
      console.error('Validation failed:', event.detail);
    });
  }
};
</script>

API Reference

Properties

| Property | Attribute | Type | Default | Description | |----------|-----------|------|---------|-------------| | callbackUrl | callback-url | string | - | Required. URL where the validated token will be sent | | options | options | ValidationOptions | {environment: 'uat', useMockApi: false} | Configuration options |

ValidationOptions

interface ValidationOptions {
  environment: 'production' | 'uat' | 'dss' | 'dev';
  useMockApi?: boolean;        // Enable mock API for development
  mockDelay?: number;          // Mock API delay in milliseconds (default: 2000)
}

Events

| Event | Detail Type | Description | |-------|-------------|-------------| | validationComplete | {success: boolean, token?: string} | Fired when validation succeeds | | validationError | {error: string} | Fired when validation fails |

Environment Configuration

The component supports multiple environments:

production: https://miclaro.claropr.com
uat: https://uat-miclaro.claropr.com
dss: https://dssmiclaro.claropr.com
dev: https://dev-miclaro.claropr.com

Development Mode

For development and testing, you can use mock API mode:

<mi-claro-user-validation-callback
  callback-url="https://your-app.com/callback"
  options='{"environment": "dev", "useMockApi": true, "mockDelay": 1500}'
></mi-claro-user-validation-callback>

Mock Testing Scenarios

Normal flow: Enter any valid phone number (8+ digits)
Error testing: Use OTP code 000000 to simulate validation errors
Random errors: Mock API includes ~10% chance of phone validation errors and ~5% chance of server errors

User Flow

Phone Validation: User enters their phone number
SMS Sent: System sends OTP code via SMS
OTP Entry: User enters the 6-digit code in the modal
Token Generation: On success, JWT token is generated and returned
Callback: User is redirected to callback URL with token parameter

Styling

The component uses shadow DOM with Claro's design system. It's fully responsive and includes:

Claro brand colors and fonts
Mobile-optimized layout
Loading states and animations
Error handling with user-friendly messages

Browser Support

Chrome/Edge 88+
Firefox 85+
Safari 14+
Mobile browsers (iOS Safari, Chrome Mobile)

TypeScript Support

The component includes full TypeScript definitions:

import { ValidationOptions } from 'mi-claro-user-validator-callback';

const options: ValidationOptions = {
  environment: 'production',
  useMockApi: false
};

License

MIT

Support

For issues and feature requests, please visit our GitHub repository.