Add 'Open in app' button below QR code

Prior to this change, it was not clear users could tap the qr code on mobile. This change adds a button to touch-enabled browsers to ensure an optimal UX. Fixes #342
OpenConext · Jan 30, 2025 · 6773183 · 6773183
1 parent de256fd
commit 6773183
Show file tree

Hide file tree

Showing 8 changed files with 58 additions and 0 deletions.
diff --git a/assets/scss/application.scss b/assets/scss/application.scss
@@ -145,6 +145,16 @@ div.middle {
 
 }
 
+#open-in-app {
+  text-align: center;
+  margin-bottom: 1.5rem;
+}
+
+#open-in-app > * {
+  display: inline-block;
+  margin: 0 auto;
+}
+
 #otpform {
   width: 50%;
   margin: 0 auto;

diff --git a/assets/typescript/Component/MobileOnlyComponent.ts b/assets/typescript/Component/MobileOnlyComponent.ts
@@ -0,0 +1,27 @@
+import 'jquery';
+import {Component} from './Component';
+
+export class MobileOnlyComponent implements Component {
+
+  private readonly onMobile;
+
+  constructor(private element: JQuery) {
+    this.onMobile = "ontouchstart" in document.documentElement;
+
+    if (this.onMobile) {
+      this.show();
+    } else {
+      this.hide();
+    }
+  }
+
+  public show() {
+    if (this.onMobile) {
+      this.element.show();
+    }
+  }
+
+  public hide() {
+    this.element.hide();
+  }
+}
diff --git a/assets/typescript/authentication.ts b/assets/typescript/authentication.ts
@@ -4,6 +4,7 @@ import { AuthenticationPageService } from './AuthenticationPageService';
 import { NotificationClient } from './Client/NotificationClient';
 import { SlideableComponent } from './Component/SlideableComponent';
 import { HideableComponent } from './Component/HideableComponent';
+import {MobileOnlyComponent} from "./Component/MobileOnlyComponent";
 import jQuery from 'jquery';
 
 declare global {
@@ -23,6 +24,7 @@ window.bootstrapAuthentication = (statusApiUrl: string, notificationApiUrl: stri
   const challengeExpiredComponent = new HideableComponent(jQuery('#challengeExpired'));
   const statusErrorComponent = new HideableComponent(jQuery('#status-request-error'));
   const notificationErrorComponent = new HideableComponent(jQuery('#notificationError'));
+  new MobileOnlyComponent(jQuery('#open-in-app'));
 
   const authenticationPageService = new AuthenticationPageService(
     pollingService,

diff --git a/assets/typescript/registration.ts b/assets/typescript/registration.ts
@@ -4,6 +4,7 @@ import { StatusPollService } from './StatusPollService';
 import { RegistrationStatusComponent } from './Component/RegistrationStatusComponent';
 import { SlideableComponent } from './Component/SlideableComponent';
 import jQuery from 'jquery';
+import {MobileOnlyComponent} from "./Component/MobileOnlyComponent";
 
 declare global {
   interface Window {
@@ -25,5 +26,8 @@ window.bootstrapRegistration = (statusApiUrl: string, finalizedUrl: string, corr
     finalizedUrl,
   );
   machine.start();
+
+  new MobileOnlyComponent(jQuery('#open-in-app'));
+
   return machine;
 };
diff --git a/templates/default/authentication.html.twig b/templates/default/authentication.html.twig
@@ -59,6 +59,12 @@
             <img src="{{ url('app_identity_authentication_qr') }}">
         </a>
 
+        <div id="open-in-app" style="display: none;">
+            <a class="btn btn-primary" href="{{ authenticateUrl }}">
+                {{ 'open_tiqr_app' | trans }}
+            </a>
+        </div>
+
         {{ 'login.qr.manual.message' | trans }} <a
                 onClick="authenticationPageService.switchToOtp()">{{ 'login.qr.manual.here' | trans }}</a>.
     </div>

diff --git a/templates/default/registration.html.twig b/templates/default/registration.html.twig
@@ -55,6 +55,13 @@
         <a href="{{ metadataUrl }}">
             <img src="{{ url('app_identity_registration_qr', {'enrollmentKey': enrollmentKey}) }}">
         </a>
+
+        <div id="open-in-app" style="display: none;">
+            <a class="btn btn-primary" href="{{ metadataUrl }}">
+                {{ 'open_tiqr_app' | trans }}
+            </a>
+        </div>
+
         {{ 'enrol.download' | trans | raw }}
     </div>
 {% endblock %}
diff --git a/translations/messages.en.yml b/translations/messages.en.yml
@@ -1,3 +1,4 @@
+open_tiqr_app: Open the app on this device
 login:
     title: Log in with tiqr
     challenge_expired: Login timeout. Try again or refresh this page.

diff --git a/translations/messages.nl.yml b/translations/messages.nl.yml
@@ -1,5 +1,6 @@
 en: Engels
 nl: Nederlands
+open_tiqr_app: Open de app op dit apparaat
 login:
     title: Log in met tiqr
     challenge_expired: Login timeout. Ververs de pagina om het nogmaals te proberen.