This commit is contained in:
root
2025-11-13 19:52:28 +03:00
parent 8aeeb05b7d
commit 807dec3b6c
4646 changed files with 163445 additions and 626017 deletions

View File

@@ -0,0 +1,6 @@
module.exports = {
input: 'src/short-qr-auth.js',
output: 'dist/short-qr-auth.bundle.js',
namespace: 'BX.UI',
browserslist: true,
};

View File

@@ -0,0 +1,18 @@
<?php
if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true)
{
die();
}
return [
'css' => 'dist/short-qr-auth.bundle.css',
'js' => 'dist/short-qr-auth.bundle.js',
'rel' => [
'main.core',
'main.qrcode',
'ui.buttons',
'pull.client',
'main.loader',
],
'skip_core' => false,
];

View File

@@ -0,0 +1,86 @@
.ui-short-qr-auth__container {
--ui-short-qr-auth__size: 185px;
--ui-short-qr-auth__padding: 16px;
--ui-short-qr-auth__border-radius: 12px;
--ui-short-qr-auth__corner-size: 25px;
--ui-short-qr-auth__qr-icon-size: 40px;
--ui-short-qr-auth__border-width: 4px;
--ui-short-qr-auth__border-color: #4A90E2;
position: relative;
width: var(--ui-short-qr-auth__size);
height: var(--ui-short-qr-auth__size);
}
.ui-short-qr-auth__container.--small {
--ui-short-qr-auth__size: 122px;
--ui-short-qr-auth__padding: 12px;
--ui-short-qr-auth__border-radius: 8px;
--ui-short-qr-auth__corner-size: 17px;
}
.ui-short-qr-auth__corner {
position: absolute;
width: var(--ui-short-qr-auth__corner-size);
height: var(--ui-short-qr-auth__corner-size);
border: var(--ui-short-qr-auth__border-width) solid var(--ui-short-qr-auth__border-color);
}
.ui-short-qr-auth__corner.--top-left {
top: 0;
left: 0;
border-right: none;
border-bottom: none;
border-top-left-radius: var(--ui-short-qr-auth__border-radius);
}
.ui-short-qr-auth__corner.--top-right {
top: 0;
right: 0;
border-left: none;
border-bottom: none;
border-top-right-radius: var(--ui-short-qr-auth__border-radius);
}
.ui-short-qr-auth__corner.--bottom-left {
bottom: 0;
left: 0;
border-right: none;
border-top: none;
border-bottom-left-radius: var(--ui-short-qr-auth__border-radius);
}
.ui-short-qr-auth__corner.--bottom-right {
bottom: 0;
right: 0;
border-left: none;
border-top: none;
border-bottom-right-radius: var(--ui-short-qr-auth__border-radius);
}
.ui-short-qr-auth__qr {
position: relative;
padding: var(--ui-short-qr-auth__padding);
width: calc(100% - var(--ui-short-qr-auth__padding) * 2);
height: calc(100% - var(--ui-short-qr-auth__padding) * 2);
}
.ui-short-qr-auth__qr-stub {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('images/qr-stub.svg') no-repeat center;
background-size: calc(100% - var(--ui-short-qr-auth__padding) * 2) calc(100% - var(--ui-short-qr-auth__padding) * 2);
}
.ui-short-qr-auth__qr-stub-icon {
width: var(--ui-short-qr-auth__qr-icon-size);
height: var(--ui-short-qr-auth__qr-icon-size);
margin-bottom: 8px;
}

View File

@@ -0,0 +1,204 @@
/* eslint-disable */
this.BX = this.BX || {};
(function (exports,main_core,main_qrcode,ui_buttons,pull_client,main_loader) {
'use strict';
let _ = t => t,
_t,
_t2,
_t3;
var _cache = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("cache");
var _intent = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("intent");
var _ttl = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("ttl");
var _ttlInterval = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("ttlInterval");
var _small = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("small");
var _stub = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("stub");
var _getContainer = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("getContainer");
var _getQrNode = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("getQrNode");
var _getQrStub = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("getQrStub");
var _getShowQrButton = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("getShowQrButton");
var _addQrCodeImage = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("addQrCodeImage");
var _clean = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("clean");
var _loading = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("loading");
var _createQrCodeImage = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("createQrCodeImage");
var _getQrSize = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("getQrSize");
var _subscribeEventRefresh = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("subscribeEventRefresh");
class ShortQrAuth {
constructor(options = {}) {
Object.defineProperty(this, _subscribeEventRefresh, {
value: _subscribeEventRefresh2
});
Object.defineProperty(this, _getQrSize, {
value: _getQrSize2
});
Object.defineProperty(this, _createQrCodeImage, {
value: _createQrCodeImage2
});
Object.defineProperty(this, _loading, {
value: _loading2
});
Object.defineProperty(this, _clean, {
value: _clean2
});
Object.defineProperty(this, _addQrCodeImage, {
value: _addQrCodeImage2
});
Object.defineProperty(this, _getShowQrButton, {
value: _getShowQrButton2
});
Object.defineProperty(this, _getQrStub, {
value: _getQrStub2
});
Object.defineProperty(this, _getQrNode, {
value: _getQrNode2
});
Object.defineProperty(this, _getContainer, {
value: _getContainer2
});
Object.defineProperty(this, _cache, {
writable: true,
value: new main_core.Cache.MemoryCache()
});
Object.defineProperty(this, _intent, {
writable: true,
value: void 0
});
Object.defineProperty(this, _ttl, {
writable: true,
value: void 0
});
Object.defineProperty(this, _ttlInterval, {
writable: true,
value: void 0
});
Object.defineProperty(this, _small, {
writable: true,
value: void 0
});
Object.defineProperty(this, _stub, {
writable: true,
value: void 0
});
babelHelpers.classPrivateFieldLooseBase(this, _intent)[_intent] = main_core.Type.isString(options.intent) ? options.intent : 'default';
babelHelpers.classPrivateFieldLooseBase(this, _small)[_small] = main_core.Type.isBoolean(options.small) ? options.small : false;
babelHelpers.classPrivateFieldLooseBase(this, _ttl)[_ttl] = main_core.Type.isNumber(options.ttl) ? options.ttl : 60;
babelHelpers.classPrivateFieldLooseBase(this, _stub)[_stub] = main_core.Type.isBoolean(options.stub) ? options.stub : true;
}
render() {
return babelHelpers.classPrivateFieldLooseBase(this, _getContainer)[_getContainer]();
}
}
function _getContainer2() {
return babelHelpers.classPrivateFieldLooseBase(this, _cache)[_cache].remember('container', () => {
const qrNode = babelHelpers.classPrivateFieldLooseBase(this, _getQrNode)[_getQrNode]();
if (!babelHelpers.classPrivateFieldLooseBase(this, _stub)[_stub]) {
babelHelpers.classPrivateFieldLooseBase(this, _addQrCodeImage)[_addQrCodeImage]();
}
return main_core.Tag.render(_t || (_t = _`
<div class="ui-short-qr-auth__container ${0}">
<div class="ui-short-qr-auth__corner --top-left"></div>
<div class="ui-short-qr-auth__corner --top-right"></div>
<div class="ui-short-qr-auth__corner --bottom-left"></div>
<div class="ui-short-qr-auth__corner --bottom-right"></div>
${0}
</div>
`), babelHelpers.classPrivateFieldLooseBase(this, _small)[_small] ? '--small' : '', qrNode);
});
}
function _getQrNode2() {
return babelHelpers.classPrivateFieldLooseBase(this, _cache)[_cache].remember('qrNode', () => {
return main_core.Tag.render(_t2 || (_t2 = _`
<div class="ui-short-qr-auth__qr">
${0}
</div>
`), babelHelpers.classPrivateFieldLooseBase(this, _stub)[_stub] ? babelHelpers.classPrivateFieldLooseBase(this, _getQrStub)[_getQrStub]() : null);
});
}
function _getQrStub2() {
return babelHelpers.classPrivateFieldLooseBase(this, _cache)[_cache].remember('qrStub', () => {
return main_core.Tag.render(_t3 || (_t3 = _`
<div class="ui-short-qr-auth__qr-stub">
<i class="ui-icon-set --o-qr-code ui-short-qr-auth__qr-stub-icon"></i>
${0}
</div>
`), babelHelpers.classPrivateFieldLooseBase(this, _getShowQrButton)[_getShowQrButton]().render());
});
}
function _getShowQrButton2() {
return babelHelpers.classPrivateFieldLooseBase(this, _cache)[_cache].remember('showQrButton', () => {
return new ui_buttons.Button({
size: ui_buttons.Button.Size.EXTRA_SMALL,
text: main_core.Loc.getMessage('UI_SHORT_QR_AUTH_BUTTON_TITLE'),
useAirDesign: true,
maxWidth: 117,
style: ui_buttons.AirButtonStyle.TINTED,
noCaps: true,
wide: true,
onclick: () => {
babelHelpers.classPrivateFieldLooseBase(this, _addQrCodeImage)[_addQrCodeImage]();
}
});
});
}
function _addQrCodeImage2() {
babelHelpers.classPrivateFieldLooseBase(this, _createQrCodeImage)[_createQrCodeImage]();
if (!babelHelpers.classPrivateFieldLooseBase(this, _ttlInterval)[_ttlInterval]) {
babelHelpers.classPrivateFieldLooseBase(this, _ttlInterval)[_ttlInterval] = setInterval(() => {
babelHelpers.classPrivateFieldLooseBase(this, _createQrCodeImage)[_createQrCodeImage]();
}, babelHelpers.classPrivateFieldLooseBase(this, _ttl)[_ttl] * 1000);
}
}
function _clean2() {
main_core.Dom.clean(babelHelpers.classPrivateFieldLooseBase(this, _getQrNode)[_getQrNode]());
}
function _loading2() {
babelHelpers.classPrivateFieldLooseBase(this, _clean)[_clean]();
new main_loader.Loader({
size: 60
}).show(babelHelpers.classPrivateFieldLooseBase(this, _getQrNode)[_getQrNode]());
}
function _createQrCodeImage2() {
babelHelpers.classPrivateFieldLooseBase(this, _loading)[_loading]();
main_core.ajax.runAction('mobile.deeplink.get', {
data: {
intent: babelHelpers.classPrivateFieldLooseBase(this, _intent)[_intent],
ttl: babelHelpers.classPrivateFieldLooseBase(this, _ttl)[_ttl]
}
}).then(response => {
var _response$data;
const link = (_response$data = response.data) == null ? void 0 : _response$data.link;
if (link) {
babelHelpers.classPrivateFieldLooseBase(this, _clean)[_clean]();
// eslint-disable-next-line no-undef
new QRCode(babelHelpers.classPrivateFieldLooseBase(this, _getQrNode)[_getQrNode](), {
text: link,
width: babelHelpers.classPrivateFieldLooseBase(this, _getQrSize)[_getQrSize](),
height: babelHelpers.classPrivateFieldLooseBase(this, _getQrSize)[_getQrSize]()
});
if (!this.isSubscribe) {
this.isSubscribe = true;
babelHelpers.classPrivateFieldLooseBase(this, _subscribeEventRefresh)[_subscribeEventRefresh]();
}
}
}).catch(() => {});
}
function _getQrSize2() {
return babelHelpers.classPrivateFieldLooseBase(this, _small)[_small] ? 98 : 151;
}
function _subscribeEventRefresh2() {
if (pull_client.PULL) {
pull_client.PULL.subscribe({
type: 'BX.PullClient.SubscriptionType.Server',
moduleId: 'mobile',
command: 'onDeeplinkShouldRefresh',
callback: () => {
babelHelpers.classPrivateFieldLooseBase(this, _createQrCodeImage)[_createQrCodeImage]();
}
});
}
}
exports.ShortQrAuth = ShortQrAuth;
}((this.BX.UI = this.BX.UI || {}),BX,BX,BX.UI,BX,BX));
//# sourceMappingURL=short-qr-auth.bundle.js.map

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1 @@
.ui-short-qr-auth__container{--ui-short-qr-auth__size:185px;--ui-short-qr-auth__padding:16px;--ui-short-qr-auth__border-radius:12px;--ui-short-qr-auth__corner-size:25px;--ui-short-qr-auth__qr-icon-size:40px;--ui-short-qr-auth__border-width:4px;--ui-short-qr-auth__border-color:#4a90e2;position:relative;width:var(--ui-short-qr-auth__size);height:var(--ui-short-qr-auth__size)}.ui-short-qr-auth__container.--small{--ui-short-qr-auth__size:122px;--ui-short-qr-auth__padding:12px;--ui-short-qr-auth__border-radius:8px;--ui-short-qr-auth__corner-size:17px}.ui-short-qr-auth__corner{position:absolute;width:var(--ui-short-qr-auth__corner-size);height:var(--ui-short-qr-auth__corner-size);border:var(--ui-short-qr-auth__border-width) solid var(--ui-short-qr-auth__border-color)}.ui-short-qr-auth__corner.--top-left{top:0;left:0;border-right:none;border-bottom:none;border-top-left-radius:var(--ui-short-qr-auth__border-radius)}.ui-short-qr-auth__corner.--top-right{top:0;right:0;border-left:none;border-bottom:none;border-top-right-radius:var(--ui-short-qr-auth__border-radius)}.ui-short-qr-auth__corner.--bottom-left{bottom:0;left:0;border-right:none;border-top:none;border-bottom-left-radius:var(--ui-short-qr-auth__border-radius)}.ui-short-qr-auth__corner.--bottom-right{bottom:0;right:0;border-left:none;border-top:none;border-bottom-right-radius:var(--ui-short-qr-auth__border-radius)}.ui-short-qr-auth__qr{position:relative;padding:var(--ui-short-qr-auth__padding);width:calc(100% - var(--ui-short-qr-auth__padding)*2);height:calc(100% - var(--ui-short-qr-auth__padding)*2)}.ui-short-qr-auth__qr-stub{display:flex;flex-direction:column;justify-content:center;align-items:center;position:absolute;top:0;left:0;width:100%;height:100%;background:url(images/qr-stub.svg) no-repeat 50%;background-size:calc(100% - var(--ui-short-qr-auth__padding)*2) calc(100% - var(--ui-short-qr-auth__padding)*2)}.ui-short-qr-auth__qr-stub-icon{width:var(--ui-short-qr-auth__qr-icon-size);height:var(--ui-short-qr-auth__qr-icon-size);margin-bottom:8px}

View File

@@ -0,0 +1,19 @@
this.BX=this.BX||{};(function(e,s,a,t,l,i){"use strict";let r=e=>e,o,b,c;var d=babelHelpers.classPrivateFieldLooseKey("cache");var v=babelHelpers.classPrivateFieldLooseKey("intent");var n=babelHelpers.classPrivateFieldLooseKey("ttl");var h=babelHelpers.classPrivateFieldLooseKey("ttlInterval");var u=babelHelpers.classPrivateFieldLooseKey("small");var p=babelHelpers.classPrivateFieldLooseKey("stub");var P=babelHelpers.classPrivateFieldLooseKey("getContainer");var L=babelHelpers.classPrivateFieldLooseKey("getQrNode");var B=babelHelpers.classPrivateFieldLooseKey("getQrStub");var H=babelHelpers.classPrivateFieldLooseKey("getShowQrButton");var F=babelHelpers.classPrivateFieldLooseKey("addQrCodeImage");var y=babelHelpers.classPrivateFieldLooseKey("clean");var f=babelHelpers.classPrivateFieldLooseKey("loading");var m=babelHelpers.classPrivateFieldLooseKey("createQrCodeImage");var _=babelHelpers.classPrivateFieldLooseKey("getQrSize");var g=babelHelpers.classPrivateFieldLooseKey("subscribeEventRefresh");class O{constructor(e={}){Object.defineProperty(this,g,{value:C});Object.defineProperty(this,_,{value:Q});Object.defineProperty(this,m,{value:X});Object.defineProperty(this,f,{value:I});Object.defineProperty(this,y,{value:q});Object.defineProperty(this,F,{value:S});Object.defineProperty(this,H,{value:w});Object.defineProperty(this,B,{value:K});Object.defineProperty(this,L,{value:T});Object.defineProperty(this,P,{value:j});Object.defineProperty(this,d,{writable:true,value:new s.Cache.MemoryCache});Object.defineProperty(this,v,{writable:true,value:void 0});Object.defineProperty(this,n,{writable:true,value:void 0});Object.defineProperty(this,h,{writable:true,value:void 0});Object.defineProperty(this,u,{writable:true,value:void 0});Object.defineProperty(this,p,{writable:true,value:void 0});babelHelpers.classPrivateFieldLooseBase(this,v)[v]=s.Type.isString(e.intent)?e.intent:"default";babelHelpers.classPrivateFieldLooseBase(this,u)[u]=s.Type.isBoolean(e.small)?e.small:false;babelHelpers.classPrivateFieldLooseBase(this,n)[n]=s.Type.isNumber(e.ttl)?e.ttl:60;babelHelpers.classPrivateFieldLooseBase(this,p)[p]=s.Type.isBoolean(e.stub)?e.stub:true}render(){return babelHelpers.classPrivateFieldLooseBase(this,P)[P]()}}function j(){return babelHelpers.classPrivateFieldLooseBase(this,d)[d].remember("container",(()=>{const e=babelHelpers.classPrivateFieldLooseBase(this,L)[L]();if(!babelHelpers.classPrivateFieldLooseBase(this,p)[p]){babelHelpers.classPrivateFieldLooseBase(this,F)[F]()}return s.Tag.render(o||(o=r`
<div class="ui-short-qr-auth__container ${0}">
<div class="ui-short-qr-auth__corner --top-left"></div>
<div class="ui-short-qr-auth__corner --top-right"></div>
<div class="ui-short-qr-auth__corner --bottom-left"></div>
<div class="ui-short-qr-auth__corner --bottom-right"></div>
${0}
</div>
`),babelHelpers.classPrivateFieldLooseBase(this,u)[u]?"--small":"",e)}))}function T(){return babelHelpers.classPrivateFieldLooseBase(this,d)[d].remember("qrNode",(()=>s.Tag.render(b||(b=r`
<div class="ui-short-qr-auth__qr">
${0}
</div>
`),babelHelpers.classPrivateFieldLooseBase(this,p)[p]?babelHelpers.classPrivateFieldLooseBase(this,B)[B]():null)))}function K(){return babelHelpers.classPrivateFieldLooseBase(this,d)[d].remember("qrStub",(()=>s.Tag.render(c||(c=r`
<div class="ui-short-qr-auth__qr-stub">
<i class="ui-icon-set --o-qr-code ui-short-qr-auth__qr-stub-icon"></i>
${0}
</div>
`),babelHelpers.classPrivateFieldLooseBase(this,H)[H]().render())))}function w(){return babelHelpers.classPrivateFieldLooseBase(this,d)[d].remember("showQrButton",(()=>new t.Button({size:t.Button.Size.EXTRA_SMALL,text:s.Loc.getMessage("UI_SHORT_QR_AUTH_BUTTON_TITLE"),useAirDesign:true,maxWidth:117,style:t.AirButtonStyle.TINTED,noCaps:true,wide:true,onclick:()=>{babelHelpers.classPrivateFieldLooseBase(this,F)[F]()}})))}function S(){babelHelpers.classPrivateFieldLooseBase(this,m)[m]();if(!babelHelpers.classPrivateFieldLooseBase(this,h)[h]){babelHelpers.classPrivateFieldLooseBase(this,h)[h]=setInterval((()=>{babelHelpers.classPrivateFieldLooseBase(this,m)[m]()}),babelHelpers.classPrivateFieldLooseBase(this,n)[n]*1e3)}}function q(){s.Dom.clean(babelHelpers.classPrivateFieldLooseBase(this,L)[L]())}function I(){babelHelpers.classPrivateFieldLooseBase(this,y)[y]();new i.Loader({size:60}).show(babelHelpers.classPrivateFieldLooseBase(this,L)[L]())}function X(){babelHelpers.classPrivateFieldLooseBase(this,f)[f]();s.ajax.runAction("mobile.deeplink.get",{data:{intent:babelHelpers.classPrivateFieldLooseBase(this,v)[v],ttl:babelHelpers.classPrivateFieldLooseBase(this,n)[n]}}).then((e=>{var s;const a=(s=e.data)==null?void 0:s.link;if(a){babelHelpers.classPrivateFieldLooseBase(this,y)[y]();new QRCode(babelHelpers.classPrivateFieldLooseBase(this,L)[L](),{text:a,width:babelHelpers.classPrivateFieldLooseBase(this,_)[_](),height:babelHelpers.classPrivateFieldLooseBase(this,_)[_]()});if(!this.isSubscribe){this.isSubscribe=true;babelHelpers.classPrivateFieldLooseBase(this,g)[g]()}}})).catch((()=>{}))}function Q(){return babelHelpers.classPrivateFieldLooseBase(this,u)[u]?98:151}function C(){if(l.PULL){l.PULL.subscribe({type:"BX.PullClient.SubscriptionType.Server",moduleId:"mobile",command:"onDeeplinkShouldRefresh",callback:()=>{babelHelpers.classPrivateFieldLooseBase(this,m)[m]()}})}}e.ShortQrAuth=O})(this.BX.UI=this.BX.UI||{},BX,BX,BX.UI,BX,BX);
//# sourceMappingURL=short-qr-auth.bundle.map.js

View File

@@ -0,0 +1,2 @@
<?php
$MESS["UI_SHORT_QR_AUTH_BUTTON_TITLE"] = "QR-Code anzeigen";

View File

@@ -0,0 +1,2 @@
<?php
$MESS["UI_SHORT_QR_AUTH_BUTTON_TITLE"] = "Show QR code";

View File

@@ -0,0 +1,2 @@
<?php
$MESS["UI_SHORT_QR_AUTH_BUTTON_TITLE"] = "QR-кодын көрсету";

View File

@@ -0,0 +1,2 @@
<?php
$MESS['UI_SHORT_QR_AUTH_BUTTON_TITLE'] = 'Показать QR-код';

View File

@@ -0,0 +1,171 @@
import { ajax, Cache, Dom, Tag, Type, Loc } from 'main.core';
import 'main.qrcode';
import { AirButtonStyle, Button } from 'ui.buttons';
import { PULL } from 'pull.client';
import { Loader } from 'main.loader';
import './style.css';
export type ShortQrAuthOptions = {
intent?: string;
ttl?: number;
small?: boolean;
stub?: boolean;
};
export class ShortQrAuth
{
#cache = new Cache.MemoryCache();
#intent: string;
#ttl: number;
#ttlInterval: number;
#small: boolean;
#stub: boolean;
constructor(options: ShortQrAuthOptions = {})
{
this.#intent = Type.isString(options.intent) ? options.intent : 'default';
this.#small = Type.isBoolean(options.small) ? options.small : false;
this.#ttl = Type.isNumber(options.ttl) ? options.ttl : 60;
this.#stub = Type.isBoolean(options.stub) ? options.stub : true;
}
render(): HTMLElement
{
return this.#getContainer();
}
#getContainer(): HTMLElement
{
return this.#cache.remember('container', () => {
const qrNode = this.#getQrNode();
if (!this.#stub)
{
this.#addQrCodeImage();
}
return Tag.render`
<div class="ui-short-qr-auth__container ${this.#small ? '--small' : ''}">
<div class="ui-short-qr-auth__corner --top-left"></div>
<div class="ui-short-qr-auth__corner --top-right"></div>
<div class="ui-short-qr-auth__corner --bottom-left"></div>
<div class="ui-short-qr-auth__corner --bottom-right"></div>
${qrNode}
</div>
`;
});
}
#getQrNode(): HTMLElement
{
return this.#cache.remember('qrNode', () => {
return Tag.render`
<div class="ui-short-qr-auth__qr">
${this.#stub ? this.#getQrStub() : null}
</div>
`;
});
}
#getQrStub(): HTMLElement
{
return this.#cache.remember('qrStub', () => {
return Tag.render`
<div class="ui-short-qr-auth__qr-stub">
<i class="ui-icon-set --o-qr-code ui-short-qr-auth__qr-stub-icon"></i>
${this.#getShowQrButton().render()}
</div>
`;
});
}
#getShowQrButton(): Button
{
return this.#cache.remember('showQrButton', () => {
return new Button({
size: Button.Size.EXTRA_SMALL,
text: Loc.getMessage('UI_SHORT_QR_AUTH_BUTTON_TITLE'),
useAirDesign: true,
maxWidth: 117,
style: AirButtonStyle.TINTED,
noCaps: true,
wide: true,
onclick: () => {
this.#addQrCodeImage();
},
});
});
}
#addQrCodeImage(): void
{
this.#createQrCodeImage();
if (!this.#ttlInterval)
{
this.#ttlInterval = setInterval(() => {
this.#createQrCodeImage();
}, this.#ttl * 1000);
}
}
#clean(): void
{
Dom.clean(this.#getQrNode());
}
#loading(): void
{
this.#clean();
(new Loader({ size: 60 })).show(this.#getQrNode());
}
#createQrCodeImage(): void
{
this.#loading();
ajax.runAction('mobile.deeplink.get', {
data: {
intent: this.#intent,
ttl: this.#ttl,
},
}).then((response) => {
const link = response.data?.link;
if (link)
{
this.#clean();
// eslint-disable-next-line no-undef
new QRCode(this.#getQrNode(), {
text: link,
width: this.#getQrSize(),
height: this.#getQrSize(),
});
if (!this.isSubscribe)
{
this.isSubscribe = true;
this.#subscribeEventRefresh();
}
}
}).catch(() => {});
}
#getQrSize(): number
{
return this.#small ? 98 : 151;
}
#subscribeEventRefresh()
{
if (PULL)
{
PULL.subscribe({
type: 'BX.PullClient.SubscriptionType.Server',
moduleId: 'mobile',
command: 'onDeeplinkShouldRefresh',
callback: () => {
this.#createQrCodeImage();
},
});
}
}
}

View File

@@ -0,0 +1,86 @@
.ui-short-qr-auth__container {
--ui-short-qr-auth__size: 185px;
--ui-short-qr-auth__padding: 16px;
--ui-short-qr-auth__border-radius: 12px;
--ui-short-qr-auth__corner-size: 25px;
--ui-short-qr-auth__qr-icon-size: 40px;
--ui-short-qr-auth__border-width: 4px;
--ui-short-qr-auth__border-color: #4A90E2;
position: relative;
width: var(--ui-short-qr-auth__size);
height: var(--ui-short-qr-auth__size);
}
.ui-short-qr-auth__container.--small {
--ui-short-qr-auth__size: 122px;
--ui-short-qr-auth__padding: 12px;
--ui-short-qr-auth__border-radius: 8px;
--ui-short-qr-auth__corner-size: 17px;
}
.ui-short-qr-auth__corner {
position: absolute;
width: var(--ui-short-qr-auth__corner-size);
height: var(--ui-short-qr-auth__corner-size);
border: var(--ui-short-qr-auth__border-width) solid var(--ui-short-qr-auth__border-color);
}
.ui-short-qr-auth__corner.--top-left {
top: 0;
left: 0;
border-right: none;
border-bottom: none;
border-top-left-radius: var(--ui-short-qr-auth__border-radius);
}
.ui-short-qr-auth__corner.--top-right {
top: 0;
right: 0;
border-left: none;
border-bottom: none;
border-top-right-radius: var(--ui-short-qr-auth__border-radius);
}
.ui-short-qr-auth__corner.--bottom-left {
bottom: 0;
left: 0;
border-right: none;
border-top: none;
border-bottom-left-radius: var(--ui-short-qr-auth__border-radius);
}
.ui-short-qr-auth__corner.--bottom-right {
bottom: 0;
right: 0;
border-left: none;
border-top: none;
border-bottom-right-radius: var(--ui-short-qr-auth__border-radius);
}
.ui-short-qr-auth__qr {
position: relative;
padding: var(--ui-short-qr-auth__padding);
width: calc(100% - var(--ui-short-qr-auth__padding) * 2);
height: calc(100% - var(--ui-short-qr-auth__padding) * 2);
}
.ui-short-qr-auth__qr-stub {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('../images/qr-stub.svg') no-repeat center;
background-size: calc(100% - var(--ui-short-qr-auth__padding) * 2) calc(100% - var(--ui-short-qr-auth__padding) * 2);
}
.ui-short-qr-auth__qr-stub-icon {
width: var(--ui-short-qr-auth__qr-icon-size);
height: var(--ui-short-qr-auth__qr-icon-size);
margin-bottom: 8px;
}