86 lines
3.0 KiB
HTML
86 lines
3.0 KiB
HTML
<!--
|
|
~ Copyright (c) 2026. RedINTER Comunicaciones SA de CV. All rights reserved.
|
|
~
|
|
~ This source code is the property of RedINTER Comunicaciones SA de CV and constitutes
|
|
~ proprietary and confidential software.
|
|
~
|
|
~ Reproduction, modification, distribution, disclosure, or use of this
|
|
~ source code without the copyright holder's prior written authorization
|
|
~ is prohibited, except as permitted by applicable law or a valid
|
|
~ license agreement.
|
|
-->
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en"
|
|
xmlns:hx="http://www.w3.org/1999/xhtml"
|
|
xmlns:hx-on="http://www.w3.org/1999/xhtml"
|
|
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
|
layout:decorate="~{layout.html(entrypoint='enroll')}"
|
|
>
|
|
<head>
|
|
<title>Enroll</title>
|
|
</head>
|
|
<body>
|
|
|
|
<section class="layout-content" layout:fragment="content">
|
|
<div class="container xl:col-10 2xl:col-8 px-4 py-5">
|
|
<div class="row align-items-center lg:g-5 py-5">
|
|
<div layout:insert="~{fragments/panel::left(#{otpAccepted.title},#{otpAccepted.description},#{otpAccepted.description2})}"
|
|
class="lg:col-7 text-center lg:text-start">
|
|
</div>
|
|
<div class="md:col-10 mx-auto lg:col-5">
|
|
<div class="container d-flex flex-column align-items-center text-center">
|
|
<div class="md:col-10 mx-auto lg:col-5 position-relative"
|
|
hx:get="@{/enroll/invite}"
|
|
hx-swap="outerHTML"
|
|
hx-trigger="load">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</body>
|
|
|
|
<section th:fragment="invite">
|
|
<div aria-label="Invitation to enroll to Octopus Authenticator"
|
|
class="width: 240px; d-block mx-auto"
|
|
th:data-qr-data="${invitationLink}"
|
|
th:data-qr-image="@{/img/sdo-blue.svg}"
|
|
hx-on:load="window.initQrCode(this)"></div>
|
|
<!--
|
|
<div class="tick d-flex justify-content-center"
|
|
th:data-otp-expiry="180"
|
|
data-credits="false">
|
|
<div data-repeat="true"
|
|
data-layout="horizontal"
|
|
data-transform="preset(m,s) -> delay">
|
|
<div class="tick-group">
|
|
<div data-key="value" data-repeat="true" data-transform="pad(00) -> split -> delay">
|
|
<span data-view="flip"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
-->
|
|
<div th:unless="${demo != null}"
|
|
hx:get="@{/enroll/status}"
|
|
hx-trigger="every 3s [document.visibilityState === 'visible']">
|
|
</div>
|
|
<div th:if="${demo != null}"
|
|
hx:get="@{/enroll/status}"
|
|
hx-trigger="demo from:body">
|
|
</div>
|
|
</section>
|
|
|
|
<section th:fragment="waiting">
|
|
<div class="text-center">
|
|
<div class="spinner-border text-primary" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|