Uitrol 30-10-2026 08:13

src/MijnBesluit.Web/Components/Onderdelen/AppDownload.razor

@@ -0,0 +1,48 @@
+@inject IConfiguration Instellingen
+@inject IWebHostEnvironment Omgeving
+
+@* De "Download in de App Store" en "Ontdek het op Google Play"-knoppen.
+
+   Elke knop verschijnt pas als er twee dingen zijn: een adres in appsettings.json (Apps:AppStoreUrl
+   en Apps:GooglePlayUrl, leeg zolang de app daar niet staat) en het officiële plaatje van de winkel
+   in wwwroot/badges. De plaatjes tekenen we niet zelf na: Apple en Google leveren ze kant-en-klaar
+   aan en eisen dat ze onaangepast worden gebruikt. Zie wwwroot/badges/LEESMIJ.txt. *@
+
+@if (_knoppen.Count > 0)
+{
+    <div class="appknoppen">
+        @foreach (var knop in _knoppen)
+        {
+            <a href="@knop.Adres" target="_blank" rel="noopener" title="@knop.Titel">
+                <img src="@knop.Plaatje" alt="@knop.Titel" />
+            </a>
+        }
+    </div>
+}
+
+@code {
+    private readonly List<(string Adres, string Plaatje, string Titel)> _knoppen = new();
+
+    protected override void OnInitialized()
+    {
+        Voeg("Apps:AppStoreUrl", "app-store", "Download in de App Store");
+        Voeg("Apps:GooglePlayUrl", "google-play", "Ontdek het op Google Play");
+    }
+
+    private void Voeg(string instelling, string bestandsnaam, string titel)
+    {
+        var adres = Instellingen[instelling];
+        if (string.IsNullOrWhiteSpace(adres)) return;
+
+        // Het plaatje mag .svg of .png zijn, wat je van de winkel hebt gekregen.
+        foreach (var extensie in new[] { "svg", "png" })
+        {
+            var pad = $"badges/{bestandsnaam}.{extensie}";
+            if (Omgeving.WebRootFileProvider.GetFileInfo(pad).Exists)
+            {
+                _knoppen.Add((adres, "/" + pad, titel));
+                return;
+            }
+        }
+    }
+}

src/MijnBesluit.Web/Components/Pages/Home.razor

@@ -216,6 +216,9 @@
                 </li>
             </ul>
         </div>
+
+        @* De knoppen voor de app in de winkels; zie AppDownload.razor. *@
+        <AppDownload />
     </Authorized>
 </AuthorizeView>
 

src/MijnBesluit.Web/Components/Pages/Inloggen.razor

@@ -93,6 +93,8 @@
     <p class="zacht"><a href="/wat-is-mijnbesluit">Wat is MijnBesluit?</a></p>
     <p class="zacht"><a href="/registreren">Ik ben nieuw en wil een account aanmaken</a></p>
     <p class="zacht"><a href="/adverteren">Ik wil adverteren op MijnBesluit</a></p>
+
+    <AppDownload />
 </div>
 
 @code {

src/MijnBesluit.Web/Components/Pages/WatIsMijnBesluit.razor

@@ -15,5 +15,7 @@
         <a class="knop rustig" href="/inloggen">Inloggen</a>
     </p>
 
+    <AppDownload />
+
     <p class="voet"><a href="/inloggen">Terug naar inloggen</a></p>
 </div>

src/MijnBesluit.Web/appsettings.json

@@ -11,6 +11,10 @@
   "Site": {
     "Url": "https://localhost:7014"
   },
+  "Apps": {
+    "GooglePlayUrl": "https://play.google.com/store/apps/details?id=nl.mijnbesluit.app",
+    "AppStoreUrl": ""
+  },
   "Smtp": {
     "Host": "localhost",
     "Port": 587,

src/MijnBesluit.Web/wwwroot/app.css

@@ -575,3 +575,9 @@ hr { border: none; border-top: 1px solid var(--rand); margin: 1.25rem 0; }
 
 .voet { text-align: center; margin-top: 2rem; font-size: .9rem; }
 .voet a { color: var(--inkt-zacht); }
+
+/* Download-knoppen van de winkels (AppDownload.razor). De plaatjes zelf blijven onaangepast;
+   we bepalen alleen de hoogte en de ruimte eromheen. */
+.appknoppen { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.25rem; }
+.appknoppen a { display: inline-block; line-height: 0; }
+.appknoppen img { height: 44px; width: auto; display: block; }

src/MijnBesluit.Web/wwwroot/badges/LEESMIJ.txt

@@ -0,0 +1,11 @@
+Hier horen de officiele knoppen van de winkels:
+
+  app-store.svg (of .png)    "Download in de App Store" - Apple
+  google-play.svg (of .png)  "Ontdek het op Google Play" - Google
+
+Haal ze zelf op bij de winkels en pas ze niet aan (kleur, vorm, tekst):
+  Apple:  developer.apple.com/app-store/marketing/guidelines (sectie "Download on the App Store", Nederlandse versie)
+  Google: play.google.com/intl/nl/badges (Nederlandse knop)
+
+Een knop verschijnt op de inlogpagina pas als zijn bestand hier staat EN het adres in
+appsettings.json is ingevuld (Apps:AppStoreUrl, Apps:GooglePlayUrl).