Auth Guard Component

A reusable authentication guard component that challenges users with a number sorting puzzle before granting access to protected content.

Features

• Generates 5 unique random numbers between 1-100
• Randomly selects ascending or descending order challenge
• Clean, professional UI with customizable styling
• Success and failure callbacks
• Configurable number of attempts
• Ready for NPM publishing

Installation

npm install auth-guard-component

Usage

ES6 Import

import AuthGuard from 'auth-guard-component';

const authGuard = new AuthGuard({
  onSuccess: () => {
    // Handle successful authentication
    console.log('Authentication successful!');
  },
  onFailure: () => {
    // Handle failed authentication
    console.log('Authentication failed!');
  },
  container: document.getElementById('auth-container')
});

authGuard.render();

Script Tag

Include the script directly in your HTML:

<script src="node_modules/auth-guard-component/dist/auth-guard.min.js"></script>
<script>
  const authGuard = new window.AuthGuard({
    onSuccess: () => {
      console.log('Authentication successful!');
    },
    onFailure: () => {
      console.log('Authentication failed!');
    },
    container: document.getElementById('auth-container')
  });
  
  authGuard.render();
</script>

Options

• onSuccess: Callback function called when the challenge is completed successfully
• onFailure: Callback function called when the challenge fails
• container: DOM element where the component will be rendered
• ascendingText: Text to display when sorting ascending (default: "Sort in ascending order")
• descendingText: Text to display when sorting descending (default: "Sort in descending order")
• resetText: Text for the reset button (default: "Reset")
• maxAttempts: Maximum number of attempts allowed (default: 3)

Methods

• render(): Renders the auth guard component in the specified container
• resetChallenge(): Resets the current challenge with new numbers
• resetSelection(): Resets only the user's current selection

Styling

The component comes with default professional styling that follows modern design principles, but you can customize it using CSS. The component uses the following CSS classes:

• .auth-guard-container - Main container
• .auth-guard-instructions - Instructions text
• .auth-guard-numbers - Container for number boxes
• .auth-guard-number - Individual number box
• .auth-guard-number.selected - Applied when number is selected
• .auth-guard-number.correct - Applied when number is in correct position
• .auth-guard-number.incorrect - Applied when number is in wrong position
• .auth-guard-controls - Container for control buttons
• .auth-guard-reset - Reset button

Examples

Basic Implementation

import AuthGuard from 'auth-guard-component';

const authGuard = new AuthGuard({
  container: document.getElementById('auth-container'),
  onSuccess: () => {
    // Redirect user to protected page
    window.location.href = '/dashboard';
  },
  onFailure: () => {
    alert('Authentication failed. Please try again.');
    authGuard.resetChallenge();
  }
});

authGuard.render();

Customized Implementation

const authGuard = new AuthGuard({
  container: document.getElementById('auth-container'),
  onSuccess: () => {
    console.log('Access granted!');
    // Your success logic here
  },
  onFailure: () => {
    console.log('Access denied!');
    // Your failure logic here
  },
  ascendingText: 'Arrange in ascending order',
  descendingText: 'Arrange in descending order',
  resetText: 'New Challenge',
  maxAttempts: 5
});

authGuard.render();

Development

To contribute to this project:

1. Fork and clone the repository
2. Install dependencies: npm install
3. Start development mode: npm run dev
4. Make your changes
5. Build the project: npm run build

License

MIT