toggle password

src/Android/Android.csproj

@@ -85,6 +85,7 @@
   </ItemGroup>
   <ItemGroup>
     <AndroidAsset Include="Assets\FontAwesome.ttf" />
+    <AndroidAsset Include="Assets\RobotoMono_Regular.ttf" />
     <None Include="Properties\AndroidManifest.xml" />
   </ItemGroup>
   <ItemGroup>

src/App/Controls/MonoLabel.cs

@@ -0,0 +1,20 @@
+using Xamarin.Forms;
+
+namespace Bit.App.Controls
+{
+    public class MonoLabel : Label
+    {
+        public MonoLabel()
+        {
+            switch(Device.RuntimePlatform)
+            {
+                case Device.iOS:
+                    FontFamily = "Menlo-Regular";
+                    break;
+                case Device.Android:
+                    FontFamily = "RobotoMono_Regular.ttf#Roboto Mono";
+                    break;
+            }
+        }
+    }
+}

src/App/Pages/Vault/ViewPage.xaml

@@ -45,7 +45,7 @@
                 <StackLayout IsVisible="{Binding IsLogin}" 
                              Spacing="0" 
                              Padding="0">
-                    <Grid StyleClass="box-row">
+                    <Grid StyleClass="box-row" IsVisible="{Binding ShowUsername}">
                         <Grid.RowDefinitions>
                             <RowDefinition Height="Auto" />
                             <RowDefinition Height="*" />
@@ -74,7 +74,7 @@
                             Grid.RowSpan="2" />
                     </Grid>
                     <BoxView StyleClass="box-row-separator" />
-                    <Grid StyleClass="box-row">
+                    <Grid StyleClass="box-row" IsVisible="{Binding ShowPasswordBox}">
                         <Grid.RowDefinitions>
                             <RowDefinition Height="Auto" />
                             <RowDefinition Height="*" />
@@ -82,24 +82,39 @@
                         <Grid.ColumnDefinitions>
                             <ColumnDefinition Width="*" />
                             <ColumnDefinition Width="Auto" />
+                            <ColumnDefinition Width="Auto" />
                         </Grid.ColumnDefinitions>
                         <Label
                             Text="{u:I18n Password}"
                             StyleClass="box-label"
                             Grid.Row="0"
                             Grid.Column="0" />
-                        <Label
+                        <controls:MonoLabel
                             Text="{Binding Cipher.Login.MaskedPassword, Mode=OneWay}"
                             StyleClass="box-value"
                             Grid.Row="1"
-                            Grid.Column="0" />
+                            Grid.Column="0"
+                            IsVisible="{Binding ShowPassword, Converter={StaticResource inverseBool}}" />
+                        <controls:MonoLabel
+                            Text="{Binding Cipher.Login.Password, Mode=OneWay}"
+                            StyleClass="box-value"
+                            Grid.Row="1"
+                            Grid.Column="0"
+                            IsVisible="{Binding ShowPassword}" />
+                        <controls:FaButton 
+                            StyleClass="box-row-button, box-row-button-platform"
+                            Text="{Binding ShowPasswordIcon}"
+                            Command="{Binding TogglePasswordCommand}"
+                            Grid.Row="0"
+                            Grid.Column="1"
+                            Grid.RowSpan="2" />
                         <controls:FaButton 
                             StyleClass="box-row-button, box-row-button-platform"
                             Text="&#xf0ea;"
                             Command="{Binding CopyCommand}"
                             CommandParameter="LoginPassword"
                             Grid.Row="0"
-                            Grid.Column="1"
+                            Grid.Column="2"
                             Grid.RowSpan="2" />
                     </Grid>
                     <BoxView StyleClass="box-row-separator" />
@@ -118,7 +133,7 @@
                             StyleClass="box-label"
                             Grid.Row="0"
                             Grid.Column="0" />
-                        <Label
+                        <controls:MonoLabel
                             Text="{Binding TotpCodeFormatted, Mode=OneWay}"
                             StyleClass="box-value"
                             Grid.Row="1"

src/App/Pages/Vault/ViewPageViewModel.cs

@@ -22,6 +22,8 @@ namespace Bit.App.Pages
         private CipherView _cipher;
         private List<ViewFieldViewModel> _fields;
         private bool _canAccessPremium;
+        private bool _showPassword;
+        private bool _showCardCode;
         private string _totpCode;
         private string _totpCodeFormatted;
         private string _totpSec;
@@ -38,6 +40,8 @@ namespace Bit.App.Pages
             CopyCommand = new Command<string>((id) => CopyAsync(id, null));
             CopyUriCommand = new Command<LoginUriView>(CopyUriAsync);
             LaunchUriCommand = new Command<LoginUriView>(LaunchUriAsync);
+            TogglePasswordCommand = new Command(TogglePassword);
+            ToggleCardCodeCommand = new Command(ToggleCardCode);
 
             PageTitle = AppResources.ViewItem;
         }
@@ -45,6 +49,8 @@ namespace Bit.App.Pages
         public Command CopyCommand { get; set; }
         public Command CopyUriCommand { get; set; }
         public Command LaunchUriCommand { get; set; }
+        public Command TogglePasswordCommand { get; set; }
+        public Command ToggleCardCodeCommand { get; set; }
         public string CipherId { get; set; }
         public CipherView Cipher
         {
@@ -59,7 +65,9 @@ namespace Bit.App.Pages
                     nameof(ShowUris),
                     nameof(ShowFields),
                     nameof(ShowNotes),
-                    nameof(ShowTotp)
+                    nameof(ShowTotp),
+                    nameof(ShowUsername),
+                    nameof(ShowPasswordBox)
                 });
         }
         public List<ViewFieldViewModel> Fields
@@ -72,15 +80,37 @@ namespace Bit.App.Pages
             get => _canAccessPremium;
             set => SetProperty(ref _canAccessPremium, value);
         }
+        public bool ShowPassword
+        {
+            get => _showPassword;
+            set => SetProperty(ref _showPassword, value,
+                additionalPropertyNames: new string[]
+                {
+                    nameof(ShowPasswordIcon)
+                });
+        }
+        public bool ShowCardCode
+        {
+            get => _showCardCode;
+            set => SetProperty(ref _showCardCode, value,
+                additionalPropertyNames: new string[]
+                {
+                    nameof(ShowCardCodeIcon)
+                });
+        }
         public bool IsLogin => _cipher?.Type == Core.Enums.CipherType.Login;
         public bool IsIdentity => _cipher?.Type == Core.Enums.CipherType.Identity;
         public bool IsCard => _cipher?.Type == Core.Enums.CipherType.Card;
         public bool IsSecureNote => _cipher?.Type == Core.Enums.CipherType.SecureNote;
+        public bool ShowUsername => IsLogin && !string.IsNullOrWhiteSpace(_cipher.Login.Username);
+        public bool ShowPasswordBox => IsLogin && !string.IsNullOrWhiteSpace(_cipher.Login.Password);
         public bool ShowUris => IsLogin && _cipher.Login.HasUris;
         public bool ShowNotes => !string.IsNullOrWhiteSpace(_cipher.Notes);
         public bool ShowFields => _cipher.HasFields;
-        public bool ShowTotp => !string.IsNullOrWhiteSpace(_cipher.Login.Totp) &&
+        public bool ShowTotp => IsLogin && !string.IsNullOrWhiteSpace(_cipher.Login.Totp) &&
             !string.IsNullOrWhiteSpace(TotpCodeFormatted);
+        public string ShowPasswordIcon => _showPassword ? "" : "";
+        public string ShowCardCodeIcon => _showCardCode ? "" : "";
         public string TotpCodeFormatted
         {
             get => _totpCodeFormatted;
@@ -137,6 +167,16 @@ namespace Bit.App.Pages
             _totpInterval = null;
         }
 
+        public void TogglePassword()
+        {
+            ShowPassword = !ShowPassword;
+        }
+
+        public void ToggleCardCode()
+        {
+            ShowCardCode = !ShowCardCode;
+        }
+
         private async Task TotpUpdateCodeAsync()
         {
             if(Cipher == null || Cipher.Type != Core.Enums.CipherType.Login || Cipher.Login.Totp == null)

src/App/Styles/Base.xaml

@@ -140,6 +140,7 @@
                 Value="{StaticResource MutedColor}" />
     </Style>
     <Style TargetType="Label"
+           ApplyToDerivedTypes="True"
            Class="box-value">
         <Setter Property="LineBreakMode"
                 Value="CharacterWrap" />