From 6f8127ccbbbcb36960499088ac92d126b2626dd5 Mon Sep 17 00:00:00 2001 From: Kemal Setya Adhi Date: Sun, 27 Oct 2024 17:28:50 +0700 Subject: [PATCH] Improve Database Input UI/UX --- .../XAMLs/MainApp/Pages/SettingsPage.xaml | 249 ++++++++++++++---- .../XAMLs/MainApp/Pages/SettingsPage.xaml.cs | 97 ++++++- .../Lang/Locale/LangSettingsPage.cs | 29 +- Hi3Helper.Core/Lang/en_US.json | 9 +- 4 files changed, 304 insertions(+), 80 deletions(-) diff --git a/CollapseLauncher/XAMLs/MainApp/Pages/SettingsPage.xaml b/CollapseLauncher/XAMLs/MainApp/Pages/SettingsPage.xaml index b53b8641a..c6539bf6d 100644 --- a/CollapseLauncher/XAMLs/MainApp/Pages/SettingsPage.xaml +++ b/CollapseLauncher/XAMLs/MainApp/Pages/SettingsPage.xaml @@ -1096,91 +1096,230 @@ IsOn="{x:Bind IsDbEnabled, Mode=TwoWay}" OffContent="{x:Bind helper:Locale.Lang._Misc.Disabled}" OnContent="{x:Bind helper:Locale.Lang._Misc.Enabled}" /> - - - - + + + + + + + - - + + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/CollapseLauncher/XAMLs/MainApp/Pages/SettingsPage.xaml.cs b/CollapseLauncher/XAMLs/MainApp/Pages/SettingsPage.xaml.cs index d8dc44cf4..c4d105a4a 100644 --- a/CollapseLauncher/XAMLs/MainApp/Pages/SettingsPage.xaml.cs +++ b/CollapseLauncher/XAMLs/MainApp/Pages/SettingsPage.xaml.cs @@ -20,6 +20,7 @@ using Microsoft.UI.Input; using Microsoft.UI.Xaml; using Microsoft.UI.Xaml.Controls; + using Microsoft.UI.Xaml.Controls.Primitives; using Microsoft.UI.Xaml.Data; using Microsoft.UI.Xaml.Input; using Microsoft.UI.Xaml.Media; @@ -1377,8 +1378,8 @@ private string DbUrl DbUriTextBox.Text = value; _dbUrl = value; - - DbWarningSaveIcon.Visibility = Visibility.Visible; + + ShowDbWarningStatus(Lang._SettingsPage.Database_Warning_PropertyChanged); } } @@ -1393,8 +1394,10 @@ private string DbToken set { _dbToken = value; - - DbWarningSaveIcon.Visibility = Visibility.Visible; + if (string.IsNullOrEmpty(value)) + return; + + ShowDbWarningStatus(Lang._SettingsPage.Database_Warning_PropertyChanged); } } @@ -1426,6 +1429,12 @@ private async void DbUserIdTextBox_LostFocus(object sender, RoutedEventArgs e) var newGuid = t.Text; if (_currentDbGuid == newGuid) return; // Return if no change + if (!string.IsNullOrEmpty(newGuid) && !Guid.TryParse(newGuid, out _)) + { + ShowDbWarningStatus(Lang._SettingsPage.Database_Error_InvalidGuid); + return; + } + if (await Dialog_DbGenerateUid((UIElement)sender) != ContentDialogResult.Primary) // Send warning dialog { t.Text = _currentDbGuid; // Rollback text if user doesn't select yes @@ -1434,21 +1443,39 @@ private async void DbUserIdTextBox_LostFocus(object sender, RoutedEventArgs e) { _currentDbGuid = t.Text; _dbUserId = t.Text; // Store to temp prop - - DbWarningSaveIcon.Visibility = Visibility.Visible; + + ShowDbWarningStatus(Lang._SettingsPage.Database_Warning_PropertyChanged); } } + private void ShowDbWarningStatus(string message) + { + DatabaseWarningBox.Visibility = Visibility.Visible; + + TextBlock textBlock = DatabaseWarningBox.Children.OfType().FirstOrDefault(); + if (textBlock == null) + return; + + textBlock.Text = message; + } + [DebuggerHidden] private async void ValidateAndSaveDbButton_Click(object sender, RoutedEventArgs e) { + // Disable the validation button while the check is happening + ButtonBase senderAsButtonBase = sender as ButtonBase; + senderAsButtonBase.IsEnabled = false; + // Store current value in local vars var curUrl = DbHandler.Uri; var curToken = DbHandler.Token; var curGuid = DbHandler.UserId; - + try { + // Show checking bar status + ShowChecking(); + // Set the value from prop DbHandler.Uri = _dbUrl; DbHandler.Token = _dbToken; @@ -1460,8 +1487,9 @@ private async void ValidateAndSaveDbButton_Click(object sender, RoutedEventArgs await DbHandler.StoreKeyValue("TestKey", r.ToString(), true); // Store random number in TestKey if (Convert.ToInt32(await DbHandler.QueryKey("TestKey", true)) != r) // Query key and check if value is correct throw new InvalidDataException("Data validation failed!"); // Throw if value does not match (then catch), unlikely but maybe for really unstable db server - - DbWarningSaveIcon.Visibility = Visibility.Collapsed; + + // Show success bar status + ShowSuccess(); await SpawnDialog( Lang._Misc.EverythingIsOkay, Lang._SettingsPage.Database_ConnectionOk, @@ -1469,7 +1497,8 @@ await SpawnDialog( Lang._Misc.Close, null, null, - ContentDialogButton.Close + ContentDialogButton.Close, + CustomControls.ContentDialogTheme.Success ); // Show success dialog } catch (Exception ex) @@ -1480,8 +1509,53 @@ await SpawnDialog( DbHandler.UserId = curGuid; var newEx = new Exception(Lang._SettingsPage.Database_ConnectFail, ex); + + // Show exception + ShowFailed(ex); ErrorSender.SendException(newEx); // Send error with dialog } + finally + { + // Re-enable the validation button + senderAsButtonBase.IsEnabled = true; + } + + void ShowChecking() + { + // Reset status + DatabaseConnectivityTestTextSuccess.Visibility = Visibility.Collapsed; + DatabaseConnectivityTestTextFailed.Visibility = Visibility.Collapsed; + DatabaseWarningBox.Visibility = Visibility.Collapsed; + + // Show checking bar status + DatabaseConnectivityTestTextChecking.Visibility = Visibility.Visible; + } + + async void ShowSuccess() + { + // Show success bar status + DatabaseConnectivityTestTextChecking.Visibility = Visibility.Collapsed; + DatabaseConnectivityTestTextSuccess.Visibility = Visibility.Visible; + + // Hide success bar status after 2 seconds + await Task.Delay(TimeSpan.FromSeconds(2)); + DatabaseConnectivityTestTextSuccess.Visibility = Visibility.Collapsed; + } + + void ShowFailed(Exception ex) + { + // Show failed bar status + DatabaseConnectivityTestTextChecking.Visibility = Visibility.Collapsed; + DatabaseConnectivityTestTextFailed.Visibility = Visibility.Visible; + + // Find the text box + TextBox textBox = DatabaseConnectivityTestTextFailed.Children.OfType().FirstOrDefault(); + if (textBox == null) + return; + + // Set the exception text + textBox.Text = ex.ToString(); + } } private async void GenerateGuidButton_Click(object sender, RoutedEventArgs e) @@ -1491,7 +1565,8 @@ private async void GenerateGuidButton_Click(object sender, RoutedEventArgs e) var g = Guid.CreateVersion7(); DbUserIdTextBox.Text = g.ToString(); _dbUserId = g.ToString(); - DbWarningSaveIcon.Visibility = Visibility.Visible; + + ShowDbWarningStatus(Lang._SettingsPage.Database_Warning_PropertyChanged); } } #endregion diff --git a/Hi3Helper.Core/Lang/Locale/LangSettingsPage.cs b/Hi3Helper.Core/Lang/Locale/LangSettingsPage.cs index eca45b284..b8b89695e 100644 --- a/Hi3Helper.Core/Lang/Locale/LangSettingsPage.cs +++ b/Hi3Helper.Core/Lang/Locale/LangSettingsPage.cs @@ -200,18 +200,23 @@ public sealed partial class LangSettingsPage public string FileDownloadSettings_BurstDownloadHelp6 { get; set; } = LangFallback?._SettingsPage.FileDownloadSettings_BurstDownloadHelp6; public string FileDownloadSettings_BurstDownloadHelp7 { get; set; } = LangFallback?._SettingsPage.FileDownloadSettings_BurstDownloadHelp7; - public string Database_Title { get; set; } = LangFallback?._SettingsPage.Database_Title; - public string Database_ConnectionOk { get; set; } = LangFallback?._SettingsPage.Database_ConnectionOk; - public string Database_ConnectFail { get; set; } = LangFallback?._SettingsPage.Database_ConnectFail; - public string Database_Toggle { get; set; } = LangFallback?._SettingsPage.Database_Toggle; - public string Database_Url { get; set; } = LangFallback?._SettingsPage.Database_Url; - public string Database_Url_Example { get; set; } = LangFallback?._SettingsPage.Database_Url_Example; - public string Database_Token { get; set; } = LangFallback?._SettingsPage.Database_Token; - public string Database_UserId { get; set; } = LangFallback?._SettingsPage.Database_UserId; - public string Database_GenerateGuid { get; set; } = LangFallback?._SettingsPage.Database_GenerateGuid; - public string Database_Validate { get; set; } = LangFallback?._SettingsPage.Database_Validate; - public string Database_Error_EmptyUri { get; set; } = LangFallback?._SettingsPage.Database_Error_EmptyUri; - public string Database_Error_EmptyToken { get; set; } = LangFallback?._SettingsPage.Database_Error_EmptyToken; + public string Database_Title { get; set; } = LangFallback?._SettingsPage.Database_Title; + public string Database_ConnectionOk { get; set; } = LangFallback?._SettingsPage.Database_ConnectionOk; + public string Database_ConnectFail { get; set; } = LangFallback?._SettingsPage.Database_ConnectFail; + public string Database_Toggle { get; set; } = LangFallback?._SettingsPage.Database_Toggle; + public string Database_Url { get; set; } = LangFallback?._SettingsPage.Database_Url; + public string Database_Url_Example { get; set; } = LangFallback?._SettingsPage.Database_Url_Example; + public string Database_Token { get; set; } = LangFallback?._SettingsPage.Database_Token; + public string Database_UserId { get; set; } = LangFallback?._SettingsPage.Database_UserId; + public string Database_GenerateGuid { get; set; } = LangFallback?._SettingsPage.Database_GenerateGuid; + public string Database_Validate { get; set; } = LangFallback?._SettingsPage.Database_Validate; + public string Database_Error_EmptyUri { get; set; } = LangFallback?._SettingsPage.Database_Error_EmptyUri; + public string Database_Error_EmptyToken { get; set; } = LangFallback?._SettingsPage.Database_Error_EmptyToken; + public string Database_Error_InvalidGuid { get; set; } = LangFallback?._SettingsPage.Database_Error_InvalidGuid; + public string Database_Warning_PropertyChanged { get; set; } = LangFallback?._SettingsPage.Database_Warning_PropertyChanged; + public string Database_ValidationChecking { get; set; } = LangFallback?._SettingsPage.Database_ValidationChecking; + public string Database_Placeholder_DbUserIdTextBox { get; set; } = LangFallback?._SettingsPage.Database_Placeholder_DbUserIdTextBox; + public string Database_Placeholder_DbTokenPasswordBox { get; set; } = LangFallback?._SettingsPage.Database_Placeholder_DbTokenPasswordBox; } } #endregion diff --git a/Hi3Helper.Core/Lang/en_US.json b/Hi3Helper.Core/Lang/en_US.json index 7c300b0db..706150976 100644 --- a/Hi3Helper.Core/Lang/en_US.json +++ b/Hi3Helper.Core/Lang/en_US.json @@ -638,7 +638,7 @@ "FileDownloadSettings_BurstDownloadHelp5": "When disabled, the download process for", "FileDownloadSettings_BurstDownloadHelp6": "and", "FileDownloadSettings_BurstDownloadHelp7": "features will use a sequential download process.", - + "Database_Title": "User Synchronizable Database", "Database_ConnectionOk": "Database connected successfully!", "Database_ConnectFail": "Failed to connect to the database, see error(s) below:", @@ -650,7 +650,12 @@ "Database_GenerateGuid": "Generate UID", "Database_Validate": "Validate & Save Settings", "Database_Error_EmptyUri": "Database URL cannot be empty!", - "Database_Error_EmptyToken": "Database token cannot be empty!" + "Database_Error_EmptyToken": "Database token cannot be empty!", + "Database_Error_InvalidGuid": "User ID is not a valid GUID!", + "Database_Warning_PropertyChanged": "Database settings has changed", + "Database_ValidationChecking": "Validating Settings...", + "Database_Placeholder_DbUserIdTextBox": "GUID Example: ed6e8048-e3a0-4983-bd56-ad19956c701f", + "Database_Placeholder_DbTokenPasswordBox": "Enter your authentication token here" }, "_Misc": {