btcpayserver/BTCPayServer/Views/Wallets/WalletCameraScanner.cshtml
2020-04-06 11:51:00 +02:00

50 lines
2.4 KiB
Text

@model WalletSendModel
<link href="~/vendor/vue-qrcode-reader/vue-qrcode-reader.css" rel="stylesheet"/>
<div id="wallet-camera-app" v-cloak class="only-for-js">
<div class="modal fade" data-backdrop="static" id="scanModal">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" v-on:click="close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body p-0" v-if="loaded">
<div class="text-danger p-2" v-if="errorMessage">{{errorMessage}}</div>
<qrcode-drop-zone v-on:decode="onDecode" v-on:init="logErrors">
<qrcode-stream v-on:decode="onDecode" v-on:init="onInit" v-bind:camera="camera" v-bind:track="paint">
<div v-if="data" class="pending-action">
<span class="text-muted">{{data}}</span>
<div class="w-100 btn-group">
<button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="submitData">Submit</button>
<button type="button" class="btn btn-secondary" v-on:click="retry">Retry</button>
<button type="button" class="btn btn-danger" data-dismiss="modal" v-on:click="close">Cancel</button>
</div>
</div>
</qrcode-stream>
</qrcode-drop-zone>
<qrcode-capture v-if="noStreamApiSupport" v-on:decode="onDecode" v-bind:camera="camera"/>
</div>
</div>
</div>
</div>
</div>
<style>
.pending-action {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, .8);
text-align: center;
font-weight: bold;
font-size: 1.4rem;
padding: 10px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
}
</style>