API Key UI (#529)

* Improve required API Key experience
Esri · Oct 25, 2023 · 8e5bc02 · 8e5bc02
1 parent 4b28627
commit 8e5bc02
Show file tree

Hide file tree

Showing 43 changed files with 524 additions and 95 deletions.
diff --git a/src/Samples/Toolkit.SampleApp.Maui/MainPage.xaml b/src/Samples/Toolkit.SampleApp.Maui/MainPage.xaml
@@ -2,11 +2,58 @@
 <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="Toolkit.SampleApp.Maui.MainPage">
+    <Grid>
         <ListView x:Name="SamplesList" ItemSelected="SamplesList_ItemSelected">
             <ListView.ItemTemplate>
                 <DataTemplate>
                     <TextCell Text="{Binding Name}" Detail="{Binding Description}" />
                 </DataTemplate>
             </ListView.ItemTemplate>
         </ListView>
+
+        <Border  x:Name="ApiKeyWindow" Background="#ccffffff" IsVisible="false">
+            <Grid HorizontalOptions="Center" VerticalOptions="Center" Background="White">
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition />
+                </Grid.RowDefinitions>
+                <Border Background="CornflowerBlue" Padding="10" StrokeThickness="1" Stroke="CornflowerBlue">
+                    <Grid>
+                        <Label Text="API Key Required" FontSize="14" TextColor="White" />
+                        <Button Text="❌" TextColor="White" HorizontalOptions="End" FontFamily="Segoe UI Symbol"
+                                Padding="10" Margin="-10" Background="Transparent" BorderWidth="0"
+                                Clicked="CancelApiKey_Click" />
+                    </Grid>
+                </Border>
+                <Border StrokeThickness="1" Stroke="CornflowerBlue" Padding="20" Grid.Row="1" Margin="0,-1,0,0">
+                    <VerticalStackLayout>
+                        <Label Text="This functional test requires an API Key to access ArcGIS Location Services." Grid.Row="1" />
+                        <Label Text="Enter API Key:" Margin="0,10,0,5" />
+                        <Entry x:Name="ApiKeyInput" MaximumWidthRequest="475" />
+                        <Button HorizontalOptions="End" Text="Save" Padding="20,5" 
+                                Background="CornflowerBlue" TextColor="White" BorderColor="White"
+                                Clicked="SaveApiKey_Click" />
+                        <Label MaxLines="5" Margin="0,10,0,0" >
+                            <Label.FormattedText>
+                                <FormattedString>
+                                    <Span Text="You can get or create an API key from " />
+                                    <Span Text="your developer dashboard" TextDecorations="Underline" TextColor="Blue" >
+                                        <Span.GestureRecognizers>
+                                            <TapGestureRecognizer Tapped="DashboardLinkTapped" />
+                                        </Span.GestureRecognizers>
+                                    </Span>
+                                    <Span Text="." />
+                                </FormattedString>
+                            </Label.FormattedText>
+                        </Label>
+                        <Label MaxLines="5" Margin="0,10,0,0" TextDecorations="Underline" TextColor="Blue" Text="More info on API Keys">
+                            <Label.GestureRecognizers>
+                                <TapGestureRecognizer Tapped="MoreInfoLinkTapped" />
+                            </Label.GestureRecognizers>
+                        </Label>
+                    </VerticalStackLayout>
+                </Border>
+            </Grid>
+        </Border>
+    </Grid>
 </ContentPage>
diff --git a/src/Samples/Toolkit.SampleApp.Maui/MainPage.xaml.cs b/src/Samples/Toolkit.SampleApp.Maui/MainPage.xaml.cs
@@ -1,11 +1,30 @@
-namespace Toolkit.SampleApp.Maui;
+using Esri.ArcGISRuntime;
+using Esri.ArcGISRuntime.Mapping;
+
+namespace Toolkit.SampleApp.Maui;
 
 public partial class MainPage : ContentPage
 {
     public MainPage()
     {
         InitializeComponent();
         SamplesList.ItemsSource = SampleDatasource.Current.Samples;
+        CheckAPIKey();
+    }
+
+    private async void CheckAPIKey()
+    {
+        string key = Preferences.Get("APIKey", string.Empty);
+        if (!string.IsNullOrWhiteSpace(key))
+        {
+            try
+            {
+                var basemap = new Basemap(BasemapStyle.ArcGISStreets) { ApiKey = key };
+                await basemap.LoadAsync();
+                ArcGISRuntimeEnvironment.ApiKey = key;
+            }
+            catch { }
+        }
     }
 
     private async void SamplesList_ItemSelected(object? sender, SelectedItemChangedEventArgs e)
@@ -14,15 +33,69 @@ private async void SamplesList_ItemSelected(object? sender, SelectedItemChangedE
         if (sample != null)
         {
             SamplesList.SelectedItem = null;
+            ApiKeyWindow.IsVisible = false;
+            ApiKeyTask?.TrySetResult(false);
+            if (sample.ApiKeyRequired && string.IsNullOrEmpty(ArcGISRuntimeEnvironment.ApiKey))
+            {
+                bool ok = await ShowApiKeyWindow();
+                if (!ok) return;
+            }
             try
             {
                 await Navigation.PushAsync(Activator.CreateInstance(sample.Page) as Page);
             }
-            catch(Exception ex)
+            catch (Exception ex)
             {
                 System.Diagnostics.Debug.WriteLine(ex);
             }
         }
     }
-}
 
+    private TaskCompletionSource<bool>? ApiKeyTask;
+
+    private Task<bool> ShowApiKeyWindow()
+    {
+        ApiKeyTask?.TrySetResult(false);
+        ApiKeyWindow.IsVisible = true;
+        ApiKeyTask = new TaskCompletionSource<bool>();
+        return ApiKeyTask.Task;
+    }
+
+    private void CancelApiKey_Click(object sender, EventArgs e)
+    {
+        ApiKeyWindow.IsVisible = false;
+        ApiKeyTask?.TrySetResult(false);
+    }
+
+    private async void SaveApiKey_Click(object sender, EventArgs e)
+    {
+        string key = ApiKeyInput.Text;
+        if (!string.IsNullOrWhiteSpace(key))
+        {
+            // Test API Key
+            try
+            {
+                var basemap = new Basemap(BasemapStyle.ArcGISStreets) { ApiKey = key };
+                await basemap.LoadAsync();
+                ArcGISRuntimeEnvironment.ApiKey = key;
+                Preferences.Set("APIKey", key);
+                ApiKeyWindow.IsVisible = false;
+                ApiKeyTask?.TrySetResult(true);
+            }
+            catch (System.Exception ex)
+            {
+                _ = DisplayAlert("Invalid API Key", ex.Message, "OK");
+            }
+        }
+    }
+
+    private void DashboardLinkTapped(object sender, TappedEventArgs e)
+    {
+        Microsoft.Maui.ApplicationModel.Launcher.OpenAsync("https://developers.arcgis.com/api-keys/");
+    }
+
+    private void MoreInfoLinkTapped(object sender, TappedEventArgs e)
+    {
+        Microsoft.Maui.ApplicationModel.Launcher.OpenAsync("https://developers.arcgis.com/net/security-and-authentication/#api-keys");
+    }
+}
diff --git a/src/Samples/Toolkit.SampleApp.Maui/SampleDatasource.cs b/src/Samples/Toolkit.SampleApp.Maui/SampleDatasource.cs
@@ -27,26 +27,28 @@ public static SampleDatasource Current
             }
         }
     }
-    public class SampleInfoAttributeAttribute : Attribute
+    public class SampleInfoAttribute : Attribute
     {
-        public SampleInfoAttributeAttribute()
+        public SampleInfoAttribute()
         {
         }
         public string? Category { get; set; }
         public string? Description { get; set; }
         public string? DisplayName { get; set; }
+        public bool ApiKeyRequired { get; set; }
     }
     public class Sample
     {
         public Sample(Type page)
         {
             Page = page;
-            var attr = page.GetTypeInfo().GetCustomAttribute(typeof(SampleInfoAttributeAttribute)) as SampleInfoAttributeAttribute;
+            var attr = page.GetTypeInfo().GetCustomAttribute(typeof(SampleInfoAttribute)) as SampleInfoAttribute;
             if (attr != null)
             {
                 Name = attr.DisplayName;
                 Category = attr.Category;
                 Description = attr.Description;
+                ApiKeyRequired = attr.ApiKeyRequired;
             }
             if (string.IsNullOrEmpty(Name))
             {
@@ -71,5 +73,7 @@ public Sample(Type page)
         public string? Description { get; set; }
 
         public string? Category { get; set; }
+
+        public bool ApiKeyRequired { get; set; }
     }
 }
diff --git a/src/Samples/Toolkit.SampleApp.Maui/Samples/BasemapGalleryAppearanceSample.xaml.cs b/src/Samples/Toolkit.SampleApp.Maui/Samples/BasemapGalleryAppearanceSample.xaml.cs
@@ -4,7 +4,7 @@
 namespace Toolkit.SampleApp.Maui.Samples
 {
     [XamlCompilation(XamlCompilationOptions.Compile)]
-    [SampleInfoAttribute(Category = "BasemapGallery", Description = "Appearance customization sample")]
+    [SampleInfo(Category = "BasemapGallery", Description = "Appearance customization sample", ApiKeyRequired = true)]
     public partial class BasemapGalleryAppearanceSample : ContentPage
     {
         public BasemapGalleryAppearanceSample()

diff --git a/src/Samples/Toolkit.SampleApp.Maui/Samples/BasemapGalleryBehaviorSample.xaml.cs b/src/Samples/Toolkit.SampleApp.Maui/Samples/BasemapGalleryBehaviorSample.xaml.cs
@@ -5,7 +5,7 @@
 namespace Toolkit.SampleApp.Maui.Samples
 {
     [XamlCompilation(XamlCompilationOptions.Compile)]
-    [SampleInfoAttribute(Category = "BasemapGallery", Description = "Exercises various bindings, properties, and interaction behaviors")]
+    [SampleInfo(Category = "BasemapGallery", Description = "Exercises various bindings, properties, and interaction behaviors", ApiKeyRequired = true)]
     public partial class BasemapGalleryBehaviorSample : ContentPage
     {
         public BasemapGalleryBehaviorSample()

diff --git a/src/Samples/Toolkit.SampleApp.Maui/Samples/BookmarksViewSample.xaml.cs b/src/Samples/Toolkit.SampleApp.Maui/Samples/BookmarksViewSample.xaml.cs
@@ -6,7 +6,7 @@
 namespace Toolkit.SampleApp.Maui.Samples
 {
     [XamlCompilation(XamlCompilationOptions.Compile)]
-    [SampleInfoAttribute(Category = "BookmarksView", Description = "BookmarksView with MapView sample")]
+    [SampleInfo(Category = "BookmarksView", Description = "BookmarksView with MapView sample")]
     public partial class BookmarksViewSample : ContentPage
     {
         private const string webMapOneUrl = "https://arcgisruntime.maps.arcgis.com/home/item.html?id=e50fafe008ac4ce4ad2236de7fd149c3";

diff --git a/src/Samples/Toolkit.SampleApp.Maui/Samples/BookmarksViewTemplatedSample.xaml.cs b/src/Samples/Toolkit.SampleApp.Maui/Samples/BookmarksViewTemplatedSample.xaml.cs
@@ -3,7 +3,7 @@
 namespace Toolkit.SampleApp.Maui.Samples
 {
     [XamlCompilation(XamlCompilationOptions.Compile)]
-    [SampleInfoAttribute(Category = "BookmarksView", Description = "BookmarksView with custom item templates")]
+    [SampleInfo(Category = "BookmarksView", Description = "BookmarksView with custom item templates")]
     public partial class BookmarksViewTemplatedSample : ContentPage
     {
         public BookmarksViewTemplatedSample()

diff --git a/src/Samples/Toolkit.SampleApp.Maui/Samples/CompassMapViewSample.xaml.cs b/src/Samples/Toolkit.SampleApp.Maui/Samples/CompassMapViewSample.xaml.cs
@@ -8,7 +8,7 @@
 namespace Toolkit.SampleApp.Maui.Samples
 {
     [XamlCompilation(XamlCompilationOptions.Compile)]
-    [SampleInfoAttribute(Category = "Compass", Description = "Compass with MapView sample")]
+    [SampleInfo(Category = "Compass", Description = "Compass with MapView sample")]
     public partial class CompassMapViewSample : ContentPage
     {
         public CompassMapViewSample()

diff --git a/src/Samples/Toolkit.SampleApp.Maui/Samples/CompassSceneViewSample.xaml.cs b/src/Samples/Toolkit.SampleApp.Maui/Samples/CompassSceneViewSample.xaml.cs
@@ -3,7 +3,7 @@
 namespace Toolkit.SampleApp.Maui.Samples
 {
     [XamlCompilation(XamlCompilationOptions.Compile)]
-    [SampleInfoAttribute(Category = "Compass", Description = "Compass with SceneView sample")]
+    [SampleInfo(Category = "Compass", Description = "Compass with SceneView sample")]
     public partial class CompassSceneViewSample : ContentPage
     {
         public CompassSceneViewSample()

diff --git a/src/Samples/Toolkit.SampleApp.Maui/Samples/FloorFilterSample.xaml.cs b/src/Samples/Toolkit.SampleApp.Maui/Samples/FloorFilterSample.xaml.cs
@@ -1,7 +1,7 @@
 namespace Toolkit.SampleApp.Maui.Samples
 {
     [XamlCompilation(XamlCompilationOptions.Compile)]
-    [SampleInfoAttribute(Category = "FloorFilter", Description = "Demonstrates FloorFilter with a floor-aware map.")]
+    [SampleInfo(Category = "FloorFilter", Description = "Demonstrates FloorFilter with a floor-aware map.")]
     public partial class FloorFilterSample : ContentPage
     {
         public FloorFilterSample()

diff --git a/src/Samples/Toolkit.SampleApp.Maui/Samples/LegendSample.xaml.cs b/src/Samples/Toolkit.SampleApp.Maui/Samples/LegendSample.xaml.cs
@@ -4,7 +4,7 @@
 namespace Toolkit.SampleApp.Maui.Samples
 {
 	[XamlCompilation(XamlCompilationOptions.Compile)]
-    [SampleInfoAttribute(Category = "Legend", Description = "Legend with MapView sample")]
+    [SampleInfo(Category = "Legend", Description = "Legend with MapView sample")]
     public partial class LegendSample : ContentPage
 	{
 		public LegendSample ()

diff --git a/src/Samples/Toolkit.SampleApp.Maui/Samples/OverviewMapSample.xaml.cs b/src/Samples/Toolkit.SampleApp.Maui/Samples/OverviewMapSample.xaml.cs
@@ -5,7 +5,7 @@
 namespace Toolkit.SampleApp.Maui.Samples
 {
     [XamlCompilation(XamlCompilationOptions.Compile)]
-    [SampleInfoAttribute(Category = "OverviewMap", Description = "Demonstrates various scenarios for the OverviewMap control.")]
+    [SampleInfo(Category = "OverviewMap", Description = "Demonstrates various scenarios for the OverviewMap control.")]
     public partial class OverviewMapSample : ContentPage
     {
         private bool _symbolToggle;

diff --git a/src/Samples/Toolkit.SampleApp.Maui/Samples/PopupViewerSample.xaml.cs b/src/Samples/Toolkit.SampleApp.Maui/Samples/PopupViewerSample.xaml.cs
@@ -8,7 +8,7 @@
 namespace Toolkit.SampleApp.Maui.Samples
 {
     [XamlCompilation(XamlCompilationOptions.Compile)]
-    [SampleInfoAttribute(Category = "PopupViewer", Description = "Use PopupViewer to display detailed feature information")]
+    [SampleInfo(Category = "PopupViewer", Description = "Use PopupViewer to display detailed feature information")]
     public partial class PopupViewerSample : ContentPage
     {
         public PopupViewerSample()

diff --git a/src/Samples/Toolkit.SampleApp.Maui/Samples/ScaleLineSample.xaml.cs b/src/Samples/Toolkit.SampleApp.Maui/Samples/ScaleLineSample.xaml.cs
@@ -3,7 +3,7 @@
 namespace Toolkit.SampleApp.Maui.Samples
 {
 	[XamlCompilation(XamlCompilationOptions.Compile)]
-    [SampleInfoAttribute(Category = "ScaleLine", Description = "Demonstrates ScaleLine.")]
+    [SampleInfo(Category = "ScaleLine", Description = "Demonstrates ScaleLine.")]
     public partial class ScaleLineSample : ContentPage
 	{
 		public ScaleLineSample ()

diff --git a/src/Samples/Toolkit.SampleApp.Maui/Samples/SearchViewCustomizationSample.xaml.cs b/src/Samples/Toolkit.SampleApp.Maui/Samples/SearchViewCustomizationSample.xaml.cs
@@ -6,7 +6,7 @@
 namespace Toolkit.SampleApp.Maui.Samples
 {
     [XamlCompilation(XamlCompilationOptions.Compile)]
-    [SampleInfoAttribute(Category = "SearchView", Description = "Exercises bindings and advanced customization options.")]
+    [SampleInfo(Category = "SearchView", Description = "Exercises bindings and advanced customization options.", ApiKeyRequired = true)]
     public partial class SearchViewCustomizationSample : ContentPage
     {
         public SearchViewCustomizationSample()

diff --git a/src/Samples/Toolkit.SampleApp.Maui/Samples/SearchViewSample.xaml.cs b/src/Samples/Toolkit.SampleApp.Maui/Samples/SearchViewSample.xaml.cs
@@ -3,7 +3,7 @@
 namespace Toolkit.SampleApp.Maui.Samples
 {
     [XamlCompilation(XamlCompilationOptions.Compile)]
-    [SampleInfoAttribute(Category = "SearchView", Description = "Demonstrates SearchView used with a map.")]
+    [SampleInfo(Category = "SearchView", Description = "Demonstrates SearchView used with a map.", ApiKeyRequired = true)]
     public partial class SearchViewSample : ContentPage
     {
         public SearchViewSample()

diff --git a/src/Samples/Toolkit.SampleApp.Maui/Samples/SearchViewSceneSample.xaml.cs b/src/Samples/Toolkit.SampleApp.Maui/Samples/SearchViewSceneSample.xaml.cs
@@ -3,7 +3,7 @@
 namespace Toolkit.SampleApp.Maui.Samples
 {
     [XamlCompilation(XamlCompilationOptions.Compile)]
-    [SampleInfoAttribute(Category = "SearchView", Description = "Demonstrates SearchView used with a scene.")]
+    [SampleInfo(Category = "SearchView", Description = "Demonstrates SearchView used with a scene.", ApiKeyRequired = true)]
     public partial class SearchViewSceneSample : ContentPage
     {
         public SearchViewSceneSample()

diff --git a/src/Samples/Toolkit.SampleApp.Maui/Samples/SymbolDisplaySample.xaml.cs b/src/Samples/Toolkit.SampleApp.Maui/Samples/SymbolDisplaySample.xaml.cs
@@ -5,7 +5,7 @@
 namespace Toolkit.SampleApp.Maui.Samples
 {
     [XamlCompilation(XamlCompilationOptions.Compile)]
-    [SampleInfoAttribute(Category = "SymbolDisplay", Description = "Renders a symbol")]
+    [SampleInfo(Category = "SymbolDisplay", Description = "Renders a symbol")]
     public partial class SymbolDisplaySample : ContentPage
     {
         public SymbolDisplaySample()

diff --git a/src/Samples/Toolkit.SampleApp.Maui/Samples/SymbolEditorSample.xaml.cs b/src/Samples/Toolkit.SampleApp.Maui/Samples/SymbolEditorSample.xaml.cs
@@ -3,7 +3,7 @@
 namespace Toolkit.SampleApp.Maui.Samples
 {
     [XamlCompilation(XamlCompilationOptions.Compile)]
-    [SampleInfoAttribute(Category = "SymbolDisplay", Description = "Dynamically edit a symbol")]
+    [SampleInfo(Category = "SymbolDisplay", Description = "Dynamically edit a symbol")]
     public partial class SymbolEditorSample : ContentPage
     {
         public SymbolEditorSample()

diff --git a/src/Samples/Toolkit.SampleApp.Maui/Samples/UtilityNetworkTraceToolSample.xaml.cs b/src/Samples/Toolkit.SampleApp.Maui/Samples/UtilityNetworkTraceToolSample.xaml.cs
@@ -4,7 +4,7 @@
 namespace Toolkit.SampleApp.Maui.Samples
 {
     [XamlCompilation(XamlCompilationOptions.Compile)]
-    [SampleInfoAttribute(Category = "UtilityNetworkTraceTool", Description = "UtilityNetworkTraceTool")]
+    [SampleInfo(Category = "UtilityNetworkTraceTool", Description = "UtilityNetworkTraceTool")]
     public partial class UtilityNetworkTraceToolSample : ContentPage
     {
         private const string WebmapURL = "https://www.arcgis.com/home/item.html?id=471eb0bf37074b1fbb972b1da70fb310";