diff --git a/assets/scss/application.scss b/assets/scss/application.scss
index 72f3b8b8..178ba692 100644
--- 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 a {
+ 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
new file mode 100644
index 00000000..9c82be1e
--- /dev/null
+++ 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
index e56e8751..46cdc8d6 100644
--- 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
index 9588762c..694204af 100644
--- 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
index 04a64d68..a0322273 100644
--- a/templates/default/authentication.html.twig
+++ b/templates/default/authentication.html.twig
@@ -59,6 +59,12 @@
+