[SDK-513] Add appid to setup guide (#145)

## [SDK-513](https://ready-player-me.atlassian.net/browse/SDK-513) ## Description - Added app id to setup guide
readyplayerme · Nov 13, 2023 · 3a1e8a3 · 3a1e8a3
1 parent 66d76e8
commit 3a1e8a3
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 4 deletions.
diff --git a/Editor/UI/EditorWindows/SetupGuide/SetupGuide.cs b/Editor/UI/EditorWindows/SetupGuide/SetupGuide.cs
@@ -56,6 +56,9 @@ public void CreateGUI()
             StartStateMachine();
         }
 
+        private string currentSubdomain;
+        private string currentAppId;
+
         private VisualElement InitializeSubdomainPanel()
         {
             var headerLabel = rootVisualElement.Q<Label>(HEADER_LABEL);
@@ -72,8 +75,17 @@ private VisualElement InitializeSubdomainPanel()
             var subdomainTemplate = subdomainPanel.Q<SubdomainTemplate>();
             subdomainTemplate.OnSubdomainChanged += subdomain =>
             {
-                nextButton.SetEnabled(!string.IsNullOrEmpty(subdomain));
+                currentSubdomain = subdomain;
+                ToggleNextButton();
             };
+
+            var appIdTemplate = subdomainPanel.Q<AppIdTemplate>();
+            appIdTemplate.OnAppIdChanged += appId =>
+            {
+                currentAppId = appId;
+                ToggleNextButton();
+            };
+
             if (!ProjectPrefs.GetBool(USE_DEMO_SUBDOMAIN_TOGGLE) && CoreSettingsHandler.CoreSettings.Subdomain == CoreSettings.DEFAULT_SUBDOMAIN)
             {
                 subdomainTemplate.ClearSubdomain();
@@ -103,6 +115,18 @@ private VisualElement InitializeSubdomainPanel()
             return subdomainPanel;
         }
 
+        private void ToggleNextButton()
+        {
+            if (!string.IsNullOrEmpty(currentAppId) && !string.IsNullOrEmpty(currentSubdomain))
+            {
+                nextButton.SetEnabled(true);
+            }
+            else
+            {
+                nextButton.SetEnabled(false);
+            }
+        }
+
         private VisualElement InitializeAnalyticsPanel()
         {
             var analyticsPanel = rootVisualElement.Q<VisualElement>(ANALYTICS_PANEL);

diff --git a/Editor/UI/EditorWindows/SetupGuide/SetupGuide.uxml b/Editor/UI/EditorWindows/SetupGuide/SetupGuide.uxml
@@ -13,6 +13,7 @@
                 <ui:Label tabindex="-1" text="(https://studio.readyplayer.me)" display-tooltip-when-elided="true" name="StudioUrl" class="link" style="margin-left: 15px; margin-right: 15px; white-space: normal; margin-top: 0; color: rgb(0, 104, 255);" />
             </ui:VisualElement>
             <ReadyPlayerMe.Core.Editor.SubdomainTemplate class="SubdomainTemplate" style="margin-top: 15px; flex-shrink: 0;" />
+            <ReadyPlayerMe.Core.Editor.AppIdTemplate style="flex-shrink: 0;" />
             <ui:Toggle label="I don&apos;t have an account. Use demo subdomain instead." name="UseDemoSubdomainToggle" style="margin-left: 15px; margin-right: 15px; flex-direction: row-reverse; align-items: center; justify-content: space-between; align-self: flex-start; margin-top: 15px; margin-bottom: 15px; display: none;" />
         </ui:VisualElement>
         <ui:VisualElement name="AnalyticsPanel" style="flex-grow: 0; background-color: rgba(0, 0, 0, 0); margin-top: 0; height: 230px; flex-shrink: 0; display: flex; width: 500px;">

diff --git a/Editor/UI/EditorWindows/Templates/AppIdTemplate.cs b/Editor/UI/EditorWindows/Templates/AppIdTemplate.cs
@@ -1,3 +1,4 @@
+using System;
 using ReadyPlayerMe.Core.Analytics;
 using UnityEngine;
 using UnityEngine.UIElements;
@@ -7,6 +8,7 @@ namespace ReadyPlayerMe.Core.Editor
     public class AppIdTemplate : VisualElement
     {
         private const string XML_PATH = "AppIdTemplate";
+        private const string APPID_VALIDATION_ERROR = "Please enter a valid app id. Click here to read more about this issue.";
 
         public new class UxmlFactory : UxmlFactory<AppIdTemplate, UxmlTraits>
         {
@@ -16,9 +18,10 @@ public class AppIdTemplate : VisualElement
         }
 
         private readonly TextField appIdField;
-
         private readonly string appId;
 
+        public event Action<string> OnAppIdChanged;
+
         public AppIdTemplate()
         {
             var visualTree = Resources.Load<VisualTreeAsset>(XML_PATH);
@@ -30,7 +33,10 @@ public AppIdTemplate()
 
             this.Q<Button>("AppIdHelpButton").clicked += OnAppIdHelpClicked;
 
+            var errorIcon = this.Q<VisualElement>("ErrorIcon");
+            errorIcon.tooltip = APPID_VALIDATION_ERROR;
             appIdField.RegisterCallback<FocusOutEvent>(OnAppIdFocusOut);
+            appIdField.RegisterValueChangedCallback(evt => OnAppIdValueChanged(evt, errorIcon));
         }
 
         private static void OnAppIdHelpClicked()
@@ -41,13 +47,19 @@ private static void OnAppIdHelpClicked()
 
         private void OnAppIdFocusOut(FocusOutEvent _)
         {
-            if (ValidateAppId())
+            if (IsValidAppId())
             {
                 SaveAppId();
             }
         }
 
-        private bool ValidateAppId()
+        private void OnAppIdValueChanged(ChangeEvent<string> evt, VisualElement errorIcon)
+        {
+            errorIcon.visible = !IsValidAppId();
+            OnAppIdChanged?.Invoke(evt.newValue);
+        }
+
+        private bool IsValidAppId()
         {
             return !string.IsNullOrEmpty(appIdField.value);
         }

diff --git a/Editor/UI/EditorWindows/Templates/Resources/AppIdTemplate.uxml b/Editor/UI/EditorWindows/Templates/Resources/AppIdTemplate.uxml
@@ -6,5 +6,6 @@
             <ui:Button text="?" display-tooltip-when-elided="true" name="AppIdHelpButton" class="button2" style="margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0; padding-left: 0; padding-right: 0; padding-top: 0; padding-bottom: 0; width: 20px; height: 20px; border-top-left-radius: 15px; border-bottom-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 15px; -unity-text-align: middle-center; white-space: nowrap;" />
         </ui:VisualElement>
         <ui:TextField picking-mode="Ignore" name="AppIdField" style="width: 165px; margin-left: 52px; margin-right: 0; margin-top: 0; margin-bottom: 0; height: 24px;" />
+        <ui:VisualElement name="ErrorIcon" focusable="false" style="flex-grow: 0; background-color: rgba(0, 0, 0, 0); background-image: resource(&apos;rpm_error_icon&apos;); width: 17px; height: 17px; margin-left: 5px; display: flex; visibility: hidden; flex-shrink: 0;" />
     </ui:VisualElement>
 </ui:UXML>