diff --git a/assets/scss/application.scss b/assets/scss/application.scss index 72f3b8b8..f804ddaa 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 > * { + 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 @@ +
+ {{ 'login.qr.manual.message' | trans }} {{ 'login.qr.manual.here' | trans }}. diff --git a/templates/default/registration.html.twig b/templates/default/registration.html.twig index f04d8320..6bdf2874 100644 --- a/templates/default/registration.html.twig +++ b/templates/default/registration.html.twig @@ -55,6 +55,13 @@ + + + {{ 'enrol.download' | trans | raw }} {% endblock %} diff --git a/translations/messages.en.yml b/translations/messages.en.yml index e53609f4..0b6340ab 100644 --- 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 index 28f62d57..5b7a5352 100644 --- 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.