Merge pull request #346 from OpenConext/feature/342-open-in-app-button

Add 'Open in app' button below QR code

assets/scss/application.scss

@@ -145,6 +145,16 @@ div.middle {
 
 }
 
+#open-in-app {
+  text-align: center;
+  margin-bottom: 1.5rem;
+}
+
+#open-in-app a {
+  display: inline-block;
+  margin: 0 auto;
+}
+
 #otpform {
   width: 50%;
   margin: 0 auto;

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();
+  }
+}

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,

assets/typescript/registration.ts

@@ -3,6 +3,7 @@ import { StatusClient } from './Client/StatusClient';
 import { StatusPollService } from './StatusPollService';
 import { RegistrationStatusComponent } from './Component/RegistrationStatusComponent';
 import { SlideableComponent } from './Component/SlideableComponent';
+import { MobileOnlyComponent } from "./Component/MobileOnlyComponent";
 import jQuery from 'jquery';
 
 declare global {
@@ -25,5 +26,8 @@ window.bootstrapRegistration = (statusApiUrl: string, finalizedUrl: string, corr
     finalizedUrl,
   );
   machine.start();
+
+  new MobileOnlyComponent(jQuery('#open-in-app'));
+
   return machine;
 };

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>

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 %}

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.

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.