Bcrypt Hash & Compare Tool#

Project Overview##

This is a client-side web application that provides bcrypt hashing and hash comparison functionality. It's a single-page HTML application with embedded CSS and JavaScript that allows users to generate bcrypt hashes from plain text and verify plain text against existing bcrypt hashes.

Technical Architecture##

File Structure###

• Single HTML file: index.html containing all code (HTML, CSS, JavaScript)
• External dependency: bcryptjs library (v2.4.3) loaded from cdn.jsdelivr.net CDN
• No server-side components: Entirely client-side application

Technology Stack###

• HTML5: Semantic markup structure
• CSS3: Custom styling with CSS variables and modern features
• Vanilla JavaScript: No frameworks, pure DOM manipulation
• bcryptjs Library: Third-party library for bcrypt operations

Functional Features##

Two Primary Functions###

1. Hash Generation: Converts plain text to bcrypt hash
2. Hash Comparison: Verifies if plain text matches a bcrypt hash

Hash Generation Capabilities###

• Salt rounds configuration: User-selectable between 4-15 (default: 10)
• Input validation: Checks for empty input and valid salt round range
• Hash output: Displays generated bcrypt hash in readonly textarea
• Copy functionality: One-click copy to clipboard with visual feedback
• Processing feedback: Button state changes and loading text during generation

Hash Comparison Capabilities###

• Dual input fields: Plain text and hash input
• Match verification: Uses bcrypt's compareSync method
• Result display: Visual success/error messages with emojis
• Error handling: Catches invalid hash format errors
• Processing feedback: Button state changes during comparison

User Interface Design##

Layout Structure###

• Centered container: Single main container with max-width 650px
• Tab-based interface: Two tabs for switching between functions
• Responsive design: Flexible layout adapting to different screen sizes
• Modern card design: White container with subtle shadow on light background

Visual Design System###

• CSS Variables: Consistent color scheme using CSS custom properties
• Color Palette:
  • Primary: #007bff (blue)
  • Secondary: #6c757d (gray)
  • Success: #28a745 (green)
  • Error: #dc3545 (red)
  • Background: #f4f7f9 (light gray)
• Typography: System font stack with fallbacks
• Border radius: Consistent 8px radius throughout
• Shadow system: Subtle box-shadows for depth

Interactive Elements###

• Tab navigation: Active tab highlighting with underline animation
• Button hover effects: Elevation and color changes
• Focus states: Blue outline for form inputs
• Copy button: Icon-based button with hover states and success feedback
• Result messages: Animated appearance with fade-in effects

Code Organization##

HTML Structure###

• Semantic markup: Proper use of labels, form groups, and containers
• Accessibility considerations: Labels associated with inputs, proper ARIA attributes
• Tab panel system: Hidden/shown content areas controlled by JavaScript

CSS Architecture###

• CSS Variables: Centralized theming system
• Component-based styling: Distinct styles for buttons, forms, results
• Animation system: CSS transitions and keyframe animations
• Responsive considerations: Flexible units and layouts

JavaScript Implementation###

• Event-driven architecture: DOM event listeners for user interactions
• Modular functions: Separate handlers for different functionalities
• Error handling: Try-catch blocks for bcrypt operations
• Async simulation: setTimeout used to prevent UI blocking during operations
• State management: Button state changes and visual feedback systems

Technical Implementation Details##

Bcrypt Integration###

• Library access: Uses dcodeIO.bcrypt global object
• Synchronous operations: Uses hashSync and compareSync methods
• Salt generation: Automatic salt generation based on specified rounds
• Error handling: Catches and displays bcrypt-specific errors

User Experience Features###

• Loading states: Buttons show "Generating..." and "Comparing..." during operations
• Input validation: Client-side validation with alert messages
• Visual feedback: Copy success indication with icon change
• Result persistence: Generated hashes remain until new generation
• Tab memory: No tab state persistence between sessions

Performance Considerations###

• Timeout usage: 50ms setTimeout to allow UI updates before heavy operations
• Disabled states: Prevents multiple simultaneous operations
• Client-side processing: All operations happen in browser without server calls

Data Flow##

1. User inputs plain text and selects salt rounds
2. JavaScript validates inputs
3. bcryptjs library generates hash synchronously
4. Result displayed in readonly textarea
5. Copy button enables clipboard functionality

For comparison:

1. User inputs plain text and existing hash
2. JavaScript validates both inputs are present
3. bcryptjs library compares using compareSync
4. Result displayed as success/error message with styling

This application provides a complete, self-contained bcrypt utility tool that operates entirely within the browser environment.