Overview

• File: src/components/topBarQrCode.svelte

The TopBarQrCode component handles the generation and display of QR codes for authentication on Headsets and Mobile devices in the HVC Web application. It includes PIN verification and setup functionality.

Component Features

1. QR Code Generation

let qrCodeUrl;      // Stores the generated QR code URL
let busy = true;    // Loading state
let hasError = false;
let allowSetPin = false;  // Controls PIN setup visibility

2. State Management

The component manages several states:

• Loading state (busy)
• Error handling (hasError)
• PIN setup requirement (allowSetPin)
• QR code URL (qrCodeUrl)

Component Logic

Initialization

onMount(async () => {
  try {
    const { data, error } = await getQRCode(true);
    if (error) {
      showError(error);
    } else if (!data?.qrCode?.success) {
      // Handle unsuccessful QR code generation
    } else {
      qrCodeUrl = data.qrCode.data;
      // PIN status handling
      if (data.qrCode.code === 419) {
        allowSetPin = false;
      } else if (data.qrCode.code === 420) {
        allowSetPin = true;
      }
    }
  } catch (e) {
    // Error handling
  } finally {
    busy = false;
  }
});

Response Codes

• 419: PIN already set
• 420: PIN needs to be set

UI Components

1. Loading State

{#if busy}
  <Progress step={1} />
{/if}

2. QR Code Display

<div class="max-w-xs mx-auto w-[320px] h-[320px] shadow-md">
  {#if qrCodeUrl}
    <img src={qrCodeUrl} alt="qr-code" use:tip={{...}} />
  {/if}
</div>

3. PIN Setup Prompt

<div class="flex justify-center py-6" class:hidden={!allowSetPin}>
  <div class="flex flex-col">
    <p>Please set the PIN to generate QR Code</p>
    <div class="flex justify-center">
      <a href="/private/settings" class="...">Set PIN</a>
    </div>
  </div>
</div>

Events

Event Dispatcher

const dispatch = createEventDispatcher();

Emitted Events

• close: Dispatched when the user clicks the "Set PIN" link

Dependencies

Imported Components

import Progress from "../atoms/Progress.svelte";
import { getQRCode } from "../pages/private/settings/_cmps/qrCode.svelte";

Utilities

import { tip } from "../actions/tooltip";
import { showError } from "../lib/utils";

Error Handling

Error Cases

1. QR Code Generation Failure

if (error) {
  showError(error);
}

2. Invalid Response

if (!data?.qrCode?.success) {
  showError(data?.qrCode?.message);
}

3. Special Error Case

if ((e?.message || e) == "hasPin is not defined") {
  hasError = true;
}