Initial commit

src/main/resources/templates/enroll.html

@@ -0,0 +1,85 @@
+<!--
+  ~ 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>
+
+