-
Notifications
You must be signed in to change notification settings - Fork 0
Template Structure
- Introduction
- Main Application Shell
- Authentication Mode Templates
- Shared Components
- Modal Templates
- Template Integration with JavaScript
- Template Extensibility and Best Practices
- Responsive Design and Accessibility
The frontend template structure of the FIDO2/WebAuthn PQC Testing Platform is organized to support multiple authentication modes while maintaining a consistent user interface. The system uses a modular template architecture with shared components across different authentication modes (simple, advanced, decoder). This documentation details the organization of templates, the role of the main application shell, mode-specific UIs, shared components, and modal templates. The templates are designed to work seamlessly with JavaScript functionality for dynamic content rendering and user interaction.
The index.html file serves as the main application shell that provides the foundational structure for all pages in the application. It establishes the document type, language, character encoding, and viewport settings for responsive design. The shell includes the application title, favicon, and CSS stylesheets that define the visual appearance across all templates.
The body element contains the primary container structure with an application loader that displays during initialization. The shell orchestrates the inclusion of various template components through server-side template directives. It includes the shared header component and manages the dynamic content areas for different authentication modes by including their respective tab templates.
The shell also handles the initialization of critical application state by embedding initial MDS (Metadata Service) bootstrap data as JSON in a hidden element. This data is then processed by JavaScript to initialize the application state before the main scripts are loaded. The shell concludes with the inclusion of essential JavaScript modules that provide core functionality for the application.
Section sources
- index.html
The application supports three primary authentication modes—simple, advanced, and decoder—each with its own dedicated template structure. These templates are organized in separate directories under the templates folder, allowing for clear separation of concerns and focused development.
The simple authentication template provides a streamlined interface for basic passkey registration and authentication with minimal configuration options. It features a clean layout with username input, registration and authentication buttons, and a credentials management section. This mode is designed for users who want to quickly test WebAuthn functionality without complex configuration.
The advanced authentication template offers comprehensive control over WebAuthn registration and authentication parameters. It includes detailed form sections for user identity, authenticator selection, extensions, and other options. The template supports complex configurations including credential protection policies, large blob storage, PRF (Pseudo-Random Function) extensions, and algorithm selection with post-quantum cryptography support.
The decoder template provides encoding and decoding functionality for WebAuthn payloads, allowing users to inspect underlying data formats. It supports multiple input formats including JSON, CBOR, binary, and X.509 certificates, with conversion between different representations. The template includes format recognition, input validation, and output display capabilities.
Section sources
- simple/tab.html
- advanced/tab.html
- decoder/tab.html
The application utilizes several shared components to maintain consistency across different templates and reduce code duplication. These components are located in the shared directory and can be included in multiple templates as needed.
The header.html template defines the application header with branding, navigation controls, and action buttons. It includes the application title, a responsive menu toggle for mobile devices, and navigation tabs that allow users to switch between different authentication modes. The header also contains utility buttons for analyzing browser capabilities and accessing the project repository on GitHub.
The navigation.html template implements the primary navigation system with tab buttons for each authentication mode. It uses semantic HTML with proper ARIA attributes to ensure accessibility. The navigation is integrated with JavaScript functions that handle tab switching and maintain the active state.
The analyze-browser.html template provides a comprehensive browser analysis panel that displays detailed information about the user's browser capabilities. It includes sections for browser identification, WebAuthn API support, platform and cross-platform authenticator availability, supported transports, and COSE algorithm support. The template is designed to be dynamically populated with data collected from JavaScript analysis functions.
Section sources
- shared/header.html
- shared/navigation.html
- shared/analyze-browser.html
The application employs a set of modal templates for displaying detailed information and results without navigating away from the current view. These modals are defined in the shared/modals directory and provide focused interfaces for specific tasks.
The credential-details.html template creates a modal dialog for displaying comprehensive information about a specific credential. It includes a header with the modal title and close button, and a body section that is dynamically populated with credential data. This modal allows users to inspect credential properties without cluttering the main interface.
The registration-result.html template defines two related modals: one for displaying registration details and another for viewing specific registration data details. These modals provide a structured way to present the results of registration operations, including credential information, attestation data, and client extension results.
The decoder-raw.html and encoder-raw.html templates provide modal interfaces for displaying raw codec output in a pre-formatted text block. These modals allow users to view the unprocessed output of encoding and decoding operations, which is particularly useful for debugging and detailed analysis of WebAuthn payloads.
Section sources
- shared/modals/credential-details.html
- shared/modals/registration-result.html
- shared/modals/decoder-raw.html
- shared/modals/encoder-raw.html
The templates are designed to work seamlessly with JavaScript functionality through various integration patterns. Event handlers are directly attached to UI elements using onclick attributes that call JavaScript functions defined in separate modules. These functions handle form submissions, state changes, and user interactions.
Data binding is implemented through a combination of DOM element IDs and JavaScript state management. Form inputs have predictable IDs that correspond to their purpose, allowing JavaScript functions to easily retrieve and update values. The application uses a global state object to maintain consistency across different components and templates.
Event delegation is used extensively to manage dynamic content and user interactions. The main.js file imports and initializes various modules that handle specific aspects of the application, such as navigation, form handling, and WebAuthn operations. These modules are exposed to the global window object, making them accessible from template event handlers.
The template system also supports dynamic content injection through JavaScript manipulation of the DOM. For example, the analyze-browser panel and MDS (Metadata Service) tables are populated with data collected at runtime, rather than being statically defined in the templates.
Section sources
- index.html
- main.js
- auth-advanced.js
The template structure follows several best practices to ensure extensibility and maintainability. The modular organization with separate directories for each authentication mode allows for independent development and testing of features. Shared components are abstracted into reusable templates that can be included across multiple views.
The use of semantic HTML elements and proper ARIA attributes ensures accessibility and improves the user experience for assistive technologies. Form elements are properly labeled and organized into logical sections with appropriate headings and grouping.
Template inheritance and inclusion patterns are used effectively to avoid code duplication. The main application shell includes shared components rather than duplicating their content, and authentication mode templates can extend base layouts when needed.
When creating new templates, developers should follow the established patterns of using descriptive class names, maintaining consistent styling through shared CSS files, and ensuring proper event handling integration with JavaScript modules. New templates should be placed in appropriate directories based on their functionality and include proper documentation.
Section sources
- index.html
- simple/tab.html
- advanced/tab.html
The templates are designed with responsive design principles to ensure usability across different device sizes and screen resolutions. The CSS framework includes responsive layouts that adapt to mobile, tablet, and desktop viewports. Media queries are used to adjust spacing, font sizes, and layout arrangements based on screen width.
Accessibility is a core consideration in the template design, with proper semantic HTML structure, keyboard navigation support, and ARIA attributes for dynamic content. Interactive elements have appropriate focus states and are accessible via keyboard navigation. Screen reader users are supported with descriptive labels, status messages, and role attributes.
The application uses relative units for sizing and spacing to ensure scalability, and touch targets are appropriately sized for mobile interaction. High contrast text and sufficient color contrast ratios are maintained throughout the interface to support users with visual impairments.
Section sources
- index.html
- shared/header.html
- shared/analyze-browser.html