73 lines
5.0 KiB
Handlebars
73 lines
5.0 KiB
Handlebars
<div class="page-header">
|
|
<div>
|
|
<h2>Connect a screen</h2>
|
|
<p>Pair a player with a screen using its six-character PIN.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row justify-content-center">
|
|
<div class="col-12 col-lg-7 col-xl-6">
|
|
<div class="card card-outline card-primary admin-form-card onboarding-pairing-card" id="onboarding-pair-card">
|
|
<div class="card-header bg-body-tertiary">
|
|
<h3 class="card-title">Screen setup</h3>
|
|
</div>
|
|
<form id="onboarding-pair-form" method="post" action="/pairing" novalidate>
|
|
<div class="card-body">
|
|
<div class="onboarding-pairing-progress d-none" id="onboarding-pair-progress" role="status" aria-live="polite">
|
|
<span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
|
|
<span>Completing pairing...</span>
|
|
</div>
|
|
<div id="onboarding-pair-message" class="alert d-none" role="alert"></div>
|
|
<input type="hidden" id="onboarding-pair-client-id" name="clientId" value="{{clientId}}">
|
|
<div class="mb-3">
|
|
<label class="form-label" for="onboarding-pair-code-1">Player PIN</label>
|
|
<div class="onboarding-pin-inputs" id="onboarding-pair-code-inputs" data-pairing-code="{{pairingCode}}" role="group" aria-label="Player PIN" aria-required="true">
|
|
<input class="form-control form-control-lg text-uppercase font-weight-bold" id="onboarding-pair-code-1" data-pairing-code-input type="text" maxlength="1" inputmode="text" autocomplete="one-time-code" aria-label="Player PIN character 1">
|
|
<input class="form-control form-control-lg text-uppercase font-weight-bold" id="onboarding-pair-code-2" data-pairing-code-input type="text" maxlength="1" inputmode="text" aria-label="Player PIN character 2">
|
|
<input class="form-control form-control-lg text-uppercase font-weight-bold" id="onboarding-pair-code-3" data-pairing-code-input type="text" maxlength="1" inputmode="text" aria-label="Player PIN character 3">
|
|
<input class="form-control form-control-lg text-uppercase font-weight-bold" id="onboarding-pair-code-4" data-pairing-code-input type="text" maxlength="1" inputmode="text" aria-label="Player PIN character 4">
|
|
<input class="form-control form-control-lg text-uppercase font-weight-bold" id="onboarding-pair-code-5" data-pairing-code-input type="text" maxlength="1" inputmode="text" aria-label="Player PIN character 5">
|
|
<input class="form-control form-control-lg text-uppercase font-weight-bold" id="onboarding-pair-code-6" data-pairing-code-input type="text" maxlength="1" inputmode="text" aria-label="Player PIN character 6">
|
|
</div>
|
|
<input id="onboarding-pair-code" type="hidden" name="pairingCode">
|
|
</div>
|
|
<div class="mb-4">
|
|
<label class="form-label" for="onboarding-pair-name">Client name</label>
|
|
<input class="form-control" id="onboarding-pair-name" name="clientName" maxlength="255" required placeholder="Lobby player" autocomplete="off">
|
|
</div>
|
|
<div class="mb-2">
|
|
<label class="form-label" for="onboarding-pair-screen">Screen</label>
|
|
<select class="form-select" id="onboarding-pair-screen" name="screenSlug" required>
|
|
<option value="">Select a screen</option>
|
|
{{#each screens}}
|
|
<option value="{{slug}}">{{name}}</option>
|
|
{{/each}}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer d-flex flex-wrap align-items-center">
|
|
<button class="btn btn-outline-secondary" id="onboarding-pair-another" type="button" aria-label="Scan player QR code" title="Scan player QR code">
|
|
<i class="bi bi-camera" aria-hidden="true"></i>
|
|
<span class="d-none" id="onboarding-pair-another-label">Pair another</span>
|
|
</button>
|
|
<button class="btn btn-secondary d-none ms-auto" id="onboarding-pair-manual" type="button">Enter PIN manually</button>
|
|
<button class="btn btn-primary ms-auto" id="onboarding-pair-connect" type="submit">Connect</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="onboarding-scanner d-none" id="onboarding-scanner" aria-hidden="true">
|
|
<div class="onboarding-scanner-panel" role="dialog" aria-modal="true" aria-labelledby="onboarding-scanner-title">
|
|
<div class="d-flex align-items-center justify-content-between gap-3 mb-3">
|
|
<h2 class="h5 mb-0" id="onboarding-scanner-title">Scan player QR code</h2>
|
|
<button class="btn btn-sm btn-outline-secondary" id="onboarding-scanner-close" type="button">Close</button>
|
|
</div>
|
|
<video id="onboarding-scanner-video" class="onboarding-scanner-video" autoplay playsinline></video>
|
|
<input id="onboarding-scanner-capture" type="file" accept="image/*" capture="environment" class="d-none">
|
|
<p class="text-body-secondary small mb-0" id="onboarding-scanner-message">Point your camera at the player QR code.</p>
|
|
<pre class="d-none small mt-2 mb-0" id="onboarding-scanner-debug" aria-live="polite"></pre>
|
|
</div>
|
|
</div>
|