Authorization.vue Component Documentation

This document provides an easy-to-understand guide to the Authorization.vue component, explaining its purpose, user flow, and core logic.

---

1. Purpose

The Authorization.vue component is the main entry point for users to authenticate themselves using their NFC card. It's the first interactive screen a user sees, designed to guide them through connecting their card to access their wallet.

2. Key Features

This component is responsible for:

• Onboarding Carousel: Displaying a slideshow that introduces the key features of the application (e.g., "Non-Custodial NFC Card," "Your Keys. Your Funds.").
• User Actions: Providing two primary actions:
  • "Connect Card": Initiates the NFC card reading process for authentication.
  • "Restore card": Navigates the user to a separate flow for recovering a wallet.
• State Management: Showing different UI states to the user, such as:
  • A loading screen while the app is processing.
  • An NFC prompt asking the user to tap their card.
  • An error panel if something goes wrong.

3. The Authorization Flow

The core responsibility of this component is to handle the card authorization process. Here is a step-by-step breakdown of what happens when a user clicks "Connect Card":

1. Start Process: A full-screen loading indicator appears to let the user know the app is working.
2. Prepare Command: The app creates a special command (CmdGetInfo) that asks the NFC card for its public information (like its unique public keys).
3. Request Card Tap: The component calls the NFCHandlerWindow, which displays a "Touch your card" overlay. This window is now actively listening for an NFC card.
4. Read Card Data: When the user taps their card, the NFCHandlerWindow reads the card's response, decodes it, and sends the data (public keys, card version) back.
5. Save Information: The card's public keys and version are saved in the application's global state (Vuex) for other parts of the app to use.
6. Check Card Status: The app checks the status of the card:
   • Is it a new card? If yes, the user is redirected to the registration page to set up their wallet.
   • Is it already registered? If yes, the app uses the public key to derive the user's wallet address and redirects them to the main dashboard.
   • Is the card broken or invalid? If the public keys are not valid, an error message is displayed.
7. Handle Errors: If any step in the process fails (e.g., an NFC communication error, an invalid card), the loading screen is dismissed and an error panel is shown with a simple explanation.

4. Key Interactions

The Authorization.vue component doesn't work in isolation. It orchestrates several other key parts of the application:

• NFCHandlerWindow.vue (The NFC Modal): This is a child component that handles the low-level NFC communication. Authorization.vue simply tells it, "Hey, please start listening for a card and let me know what you find." This keeps the complex NFC logic separate and reusable.
• Vuex (Global State): Once the card is successfully read, its public keys and the user's derived wallet address are committed to the Vuex store. This makes the user's session data available across the entire application without needing to pass props everywhere.
• Vue-router (Navigation): Based on the outcome of the authorization flow, the router is used to navigate the user to the appropriate next screen, whether it's the registration page or the main dashboard.