From a9dacd561c2e054b8bea03b3c2a7c70df74c09ab Mon Sep 17 00:00:00 2001
From: ShirokaiLon <6662937+ShirokaiLon@users.noreply.github.com>
Date: Fri, 3 Jan 2020 19:56:55 +0000
Subject: [PATCH] Change password generator to use ColoredPassword (#686)

* Change password generator to use ColoredPassword

* Change ColoredPassword from FormattedString to HTML string for improved performance

* PasswordFormatter fixes

* Correct || to && condition

* Apply password colouring to history pages
---
 .../Pages/Generator/GeneratorHistoryPage.xaml |  4 ++-
 src/App/Pages/Generator/GeneratorPage.xaml    |  3 +-
 .../Pages/Generator/GeneratorPageViewModel.cs |  2 +-
 src/App/Pages/Vault/PasswordHistoryPage.xaml  |  4 ++-
 src/App/Pages/Vault/ViewPage.xaml             |  3 +-
 src/App/Utilities/ColoredPasswordConverter.cs | 28 +++++++++++++++
 src/App/Utilities/PasswordFormatter.cs        | 36 +++++++++++++------
 7 files changed, 64 insertions(+), 16 deletions(-)
 create mode 100644 src/App/Utilities/ColoredPasswordConverter.cs

diff --git a/src/App/Pages/Generator/GeneratorHistoryPage.xaml b/src/App/Pages/Generator/GeneratorHistoryPage.xaml
index 5080fcad4..02802e4ee 100644
--- a/src/App/Pages/Generator/GeneratorHistoryPage.xaml
+++ b/src/App/Pages/Generator/GeneratorHistoryPage.xaml
@@ -19,6 +19,7 @@
         <ResourceDictionary>
             <u:InverseBoolConverter x:Key="inverseBool" />
             <u:DateTimeConverter x:Key="dateTime" />
+            <u:ColoredPasswordConverter x:Key="coloredPassword" />
             <ToolbarItem Text="{u:I18n Close}" Clicked="Close_Clicked" Order="Primary" Priority="-1"
                          x:Name="_closeItem" x:Key="closeItem" />
             <ToolbarItem Text="{u:I18n Clear}"
@@ -71,7 +72,8 @@
                                 Grid.Column="0"
                                 Grid.Row="0"
                                 StyleClass="list-title, list-title-platform"
-                                Text="{Binding Password, Mode=OneWay}" />
+                                TextType="Html"
+                                Text="{Binding Password, Mode=OneWay, Converter={StaticResource coloredPassword}}" />
                             <Label LineBreakMode="TailTruncation"
                                 Grid.Column="0"
                                 Grid.Row="1"
diff --git a/src/App/Pages/Generator/GeneratorPage.xaml b/src/App/Pages/Generator/GeneratorPage.xaml
index b179e34da..82ecf6d7a 100644
--- a/src/App/Pages/Generator/GeneratorPage.xaml
+++ b/src/App/Pages/Generator/GeneratorPage.xaml
@@ -40,7 +40,8 @@
         <StackLayout Spacing="0" Padding="0">
             <StackLayout StyleClass="box">
                 <controls:MonoLabel
-                    Text="{Binding Password}"
+                    Text="{Binding ColoredPassword, Mode=OneWay}"
+                    TextType="Html"
                     Margin="0, 20"
                     StyleClass="text-lg"
                     HorizontalTextAlignment="Center"
diff --git a/src/App/Pages/Generator/GeneratorPageViewModel.cs b/src/App/Pages/Generator/GeneratorPageViewModel.cs
index 4aeddd712..e4c6ca1c1 100644
--- a/src/App/Pages/Generator/GeneratorPageViewModel.cs
+++ b/src/App/Pages/Generator/GeneratorPageViewModel.cs
@@ -53,7 +53,7 @@ namespace Bit.App.Pages
                 });
         }
 
-        public FormattedString ColoredPassword => PasswordFormatter.FormatPassword(Password);
+        public string ColoredPassword => PasswordFormatter.FormatPassword(Password);
 
         public bool IsPassword
         {
diff --git a/src/App/Pages/Vault/PasswordHistoryPage.xaml b/src/App/Pages/Vault/PasswordHistoryPage.xaml
index b2387d7fc..6e169efaf 100644
--- a/src/App/Pages/Vault/PasswordHistoryPage.xaml
+++ b/src/App/Pages/Vault/PasswordHistoryPage.xaml
@@ -23,6 +23,7 @@
         <ResourceDictionary>
             <u:InverseBoolConverter x:Key="inverseBool" />
             <u:DateTimeConverter x:Key="dateTime" />
+            <u:ColoredPasswordConverter x:Key="coloredPassword" />
         </ResourceDictionary>
     </ContentPage.Resources>
 
@@ -62,7 +63,8 @@
                                Grid.Column="0"
                                Grid.Row="0"
                                StyleClass="list-title, list-title-platform"
-                               Text="{Binding Password, Mode=OneWay}" />
+                               TextType="Html"
+                               Text="{Binding Password, Mode=OneWay, Converter={StaticResource coloredPassword}}" />
                             <Label LineBreakMode="TailTruncation"
                                Grid.Column="0"
                                Grid.Row="1"
diff --git a/src/App/Pages/Vault/ViewPage.xaml b/src/App/Pages/Vault/ViewPage.xaml
index 932516742..d7fef2c5b 100644
--- a/src/App/Pages/Vault/ViewPage.xaml
+++ b/src/App/Pages/Vault/ViewPage.xaml
@@ -118,7 +118,8 @@
                                     Grid.Column="0"
                                     IsVisible="{Binding ShowPassword, Converter={StaticResource inverseBool}}" />
                                 <controls:MonoLabel
-                                    FormattedText="{Binding ColoredPassword, Mode=OneWay}"
+                                    Text="{Binding ColoredPassword, Mode=OneWay}"
+                                    TextType="Html"
                                     StyleClass="box-value"
                                     Grid.Row="1"
                                     Grid.Column="0"
diff --git a/src/App/Utilities/ColoredPasswordConverter.cs b/src/App/Utilities/ColoredPasswordConverter.cs
new file mode 100644
index 000000000..d87827696
--- /dev/null
+++ b/src/App/Utilities/ColoredPasswordConverter.cs
@@ -0,0 +1,28 @@
+using System;
+using Xamarin.Forms;
+
+namespace Bit.App.Utilities
+{
+    public class ColoredPasswordConverter : IValueConverter
+    {
+        public object Convert(object value, Type targetType, object parameter,
+            System.Globalization.CultureInfo culture)
+        {
+            if(targetType != typeof(string))
+            {
+                throw new InvalidOperationException("The target must be a string.");
+            }
+            if(value == null)
+            {
+                return string.Empty;
+            }
+            return PasswordFormatter.FormatPassword((string)value);
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter,
+            System.Globalization.CultureInfo culture)
+        {
+            throw new NotSupportedException();
+        }
+    }
+}
diff --git a/src/App/Utilities/PasswordFormatter.cs b/src/App/Utilities/PasswordFormatter.cs
index 857e51855..fbf868c34 100644
--- a/src/App/Utilities/PasswordFormatter.cs
+++ b/src/App/Utilities/PasswordFormatter.cs
@@ -21,17 +21,19 @@ namespace Bit.App.Utilities
             Special
         }
 
-        public static FormattedString FormatPassword(string password)
+        public static string FormatPassword(string password)
         {
             if(password == null)
             {
-                return new FormattedString();
+                return string.Empty;
             }
 
-            var result = new FormattedString();
-            // Start off with an empty span to prevent possible NPEs. Due to the way the state machine
-            // works, this will actually always be replaced by a new span anyway.
-            var currentSpan = new Span();
+            // First two digits of returned hex code contains the alpha,
+            // which is not supported in HTML color, so we need to cut those out.
+            var numberColor = $"<span style=\"color:#{((Color)Application.Current.Resources["PasswordNumberColor"]).ToHex().Substring(2)}\">";
+            var specialColor = $"<span style=\"color:#{((Color)Application.Current.Resources["PasswordSpecialColor"]).ToHex().Substring(2)}\">";
+            var result = string.Empty;
+
             // Start with an otherwise uncovered case so we will definitely enter the "something changed"
             // state.
             var currentType = CharType.None;
@@ -56,24 +58,36 @@ namespace Bit.App.Utilities
                 // If the char type changed, build a new span to append the text to.
                 if(charType != currentType)
                 {
-                    currentSpan = new Span();
-                    result.Spans.Add(currentSpan);
+                    // Close off previous span.
+                    if (currentType != CharType.None && currentType != CharType.Normal)
+                    {
+                        result += "</span>";
+                    }
+                    
                     currentType = charType;
 
                     // Switch the color if it is not a normal text. Otherwise leave the
                     // default value.
                     switch(currentType)
                     {
+                        // Apply color style to span.
                         case CharType.Number:
-                            currentSpan.TextColor = (Color)Application.Current.Resources["PasswordNumberColor"];
+                            result += numberColor;
                             break;
                         case CharType.Special:
-                            currentSpan.TextColor = (Color)Application.Current.Resources["PasswordSpecialColor"];
+                            result += specialColor;
                             break;
                     }
                 }
-                currentSpan.Text += c;
+                result += c;
             }
+
+            // Close off last span.
+            if (currentType != CharType.None && currentType != CharType.Normal)
+            {
+                result += "</span>";
+            }
+
             return result;
         }
     }