login page layout

src/Android/Resources/Resource.designer.cs

@@ -4410,44 +4410,44 @@ namespace Bit.Droid
 		public partial class Color
 		{
 			
-			// aapt resource value: 0x7f0e0067
-			public const int abc_background_cache_hint_selector_material_dark = 2131624039;
-			
 			// aapt resource value: 0x7f0e0068
-			public const int abc_background_cache_hint_selector_material_light = 2131624040;
+			public const int abc_background_cache_hint_selector_material_dark = 2131624040;
 			
 			// aapt resource value: 0x7f0e0069
-			public const int abc_btn_colored_borderless_text_material = 2131624041;
+			public const int abc_background_cache_hint_selector_material_light = 2131624041;
 			
 			// aapt resource value: 0x7f0e006a
-			public const int abc_btn_colored_text_material = 2131624042;
+			public const int abc_btn_colored_borderless_text_material = 2131624042;
 			
 			// aapt resource value: 0x7f0e006b
-			public const int abc_color_highlight_material = 2131624043;
+			public const int abc_btn_colored_text_material = 2131624043;
 			
 			// aapt resource value: 0x7f0e006c
-			public const int abc_hint_foreground_material_dark = 2131624044;
+			public const int abc_color_highlight_material = 2131624044;
 			
 			// aapt resource value: 0x7f0e006d
-			public const int abc_hint_foreground_material_light = 2131624045;
+			public const int abc_hint_foreground_material_dark = 2131624045;
+			
+			// aapt resource value: 0x7f0e006e
+			public const int abc_hint_foreground_material_light = 2131624046;
 			
 			// aapt resource value: 0x7f0e0004
 			public const int abc_input_method_navigation_guard = 2131623940;
 			
-			// aapt resource value: 0x7f0e006e
-			public const int abc_primary_text_disable_only_material_dark = 2131624046;
-			
 			// aapt resource value: 0x7f0e006f
-			public const int abc_primary_text_disable_only_material_light = 2131624047;
+			public const int abc_primary_text_disable_only_material_dark = 2131624047;
 			
 			// aapt resource value: 0x7f0e0070
-			public const int abc_primary_text_material_dark = 2131624048;
+			public const int abc_primary_text_disable_only_material_light = 2131624048;
 			
 			// aapt resource value: 0x7f0e0071
-			public const int abc_primary_text_material_light = 2131624049;
+			public const int abc_primary_text_material_dark = 2131624049;
 			
 			// aapt resource value: 0x7f0e0072
-			public const int abc_search_url_text = 2131624050;
+			public const int abc_primary_text_material_light = 2131624050;
+			
+			// aapt resource value: 0x7f0e0073
+			public const int abc_search_url_text = 2131624051;
 			
 			// aapt resource value: 0x7f0e0005
 			public const int abc_search_url_text_normal = 2131623941;
@@ -4458,29 +4458,29 @@ namespace Bit.Droid
 			// aapt resource value: 0x7f0e0007
 			public const int abc_search_url_text_selected = 2131623943;
 			
-			// aapt resource value: 0x7f0e0073
-			public const int abc_secondary_text_material_dark = 2131624051;
-			
 			// aapt resource value: 0x7f0e0074
-			public const int abc_secondary_text_material_light = 2131624052;
+			public const int abc_secondary_text_material_dark = 2131624052;
 			
 			// aapt resource value: 0x7f0e0075
-			public const int abc_tint_btn_checkable = 2131624053;
+			public const int abc_secondary_text_material_light = 2131624053;
 			
 			// aapt resource value: 0x7f0e0076
-			public const int abc_tint_default = 2131624054;
+			public const int abc_tint_btn_checkable = 2131624054;
 			
 			// aapt resource value: 0x7f0e0077
-			public const int abc_tint_edittext = 2131624055;
+			public const int abc_tint_default = 2131624055;
 			
 			// aapt resource value: 0x7f0e0078
-			public const int abc_tint_seek_thumb = 2131624056;
+			public const int abc_tint_edittext = 2131624056;
 			
 			// aapt resource value: 0x7f0e0079
-			public const int abc_tint_spinner = 2131624057;
+			public const int abc_tint_seek_thumb = 2131624057;
 			
 			// aapt resource value: 0x7f0e007a
-			public const int abc_tint_switch_track = 2131624058;
+			public const int abc_tint_spinner = 2131624058;
+			
+			// aapt resource value: 0x7f0e007b
+			public const int abc_tint_switch_track = 2131624059;
 			
 			// aapt resource value: 0x7f0e0065
 			public const int accent = 2131624037;
@@ -4506,6 +4506,9 @@ namespace Bit.Droid
 			// aapt resource value: 0x7f0e005f
 			public const int black = 2131624031;
 			
+			// aapt resource value: 0x7f0e0066
+			public const int border = 2131624038;
+			
 			// aapt resource value: 0x7f0e000e
 			public const int bright_foreground_disabled_material_dark = 2131623950;
 			
@@ -4578,8 +4581,8 @@ namespace Bit.Droid
 			// aapt resource value: 0x7f0e0043
 			public const int design_default_color_primary_dark = 2131624003;
 			
-			// aapt resource value: 0x7f0e007b
+			// aapt resource value: 0x7f0e007c
-			public const int design_error = 2131624059;
+			public const int design_error = 2131624060;
 			
 			// aapt resource value: 0x7f0e0044
 			public const int design_fab_shadow_end_color = 2131624004;
@@ -4605,8 +4608,8 @@ namespace Bit.Droid
 			// aapt resource value: 0x7f0e004b
 			public const int design_snackbar_background_color = 2131624011;
 			
-			// aapt resource value: 0x7f0e007c
+			// aapt resource value: 0x7f0e007d
-			public const int design_tint_password_toggle = 2131624060;
+			public const int design_tint_password_toggle = 2131624061;
 			
 			// aapt resource value: 0x7f0e0016
 			public const int dim_foreground_disabled_material_dark = 2131623958;
@@ -4641,8 +4644,8 @@ namespace Bit.Droid
 			// aapt resource value: 0x7f0e001f
 			public const int highlighted_text_material_light = 2131623967;
 			
-			// aapt resource value: 0x7f0e0066
+			// aapt resource value: 0x7f0e0067
-			public const int ic_launcher_background = 2131624038;
+			public const int ic_launcher_background = 2131624039;
 			
 			// aapt resource value: 0x7f0e005a
 			public const int launcher_background = 2131624026;
@@ -4686,71 +4689,71 @@ namespace Bit.Droid
 			// aapt resource value: 0x7f0e002b
 			public const int material_grey_900 = 2131623979;
 			
-			// aapt resource value: 0x7f0e007d
-			public const int mtrl_bottom_nav_colored_item_tint = 2131624061;
-			
 			// aapt resource value: 0x7f0e007e
-			public const int mtrl_bottom_nav_item_tint = 2131624062;
+			public const int mtrl_bottom_nav_colored_item_tint = 2131624062;
+			
+			// aapt resource value: 0x7f0e007f
+			public const int mtrl_bottom_nav_item_tint = 2131624063;
 			
 			// aapt resource value: 0x7f0e004c
 			public const int mtrl_btn_bg_color_disabled = 2131624012;
 			
-			// aapt resource value: 0x7f0e007f
-			public const int mtrl_btn_bg_color_selector = 2131624063;
-			
 			// aapt resource value: 0x7f0e0080
-			public const int mtrl_btn_ripple_color = 2131624064;
+			public const int mtrl_btn_bg_color_selector = 2131624064;
 			
 			// aapt resource value: 0x7f0e0081
-			public const int mtrl_btn_stroke_color_selector = 2131624065;
+			public const int mtrl_btn_ripple_color = 2131624065;
 			
 			// aapt resource value: 0x7f0e0082
-			public const int mtrl_btn_text_btn_ripple_color = 2131624066;
+			public const int mtrl_btn_stroke_color_selector = 2131624066;
+			
+			// aapt resource value: 0x7f0e0083
+			public const int mtrl_btn_text_btn_ripple_color = 2131624067;
 			
 			// aapt resource value: 0x7f0e004d
 			public const int mtrl_btn_text_color_disabled = 2131624013;
 			
-			// aapt resource value: 0x7f0e0083
+			// aapt resource value: 0x7f0e0084
-			public const int mtrl_btn_text_color_selector = 2131624067;
+			public const int mtrl_btn_text_color_selector = 2131624068;
 			
 			// aapt resource value: 0x7f0e004e
 			public const int mtrl_btn_transparent_bg_color = 2131624014;
 			
-			// aapt resource value: 0x7f0e0084
-			public const int mtrl_chip_background_color = 2131624068;
-			
 			// aapt resource value: 0x7f0e0085
-			public const int mtrl_chip_close_icon_tint = 2131624069;
+			public const int mtrl_chip_background_color = 2131624069;
 			
 			// aapt resource value: 0x7f0e0086
-			public const int mtrl_chip_ripple_color = 2131624070;
+			public const int mtrl_chip_close_icon_tint = 2131624070;
 			
 			// aapt resource value: 0x7f0e0087
-			public const int mtrl_chip_text_color = 2131624071;
+			public const int mtrl_chip_ripple_color = 2131624071;
 			
 			// aapt resource value: 0x7f0e0088
-			public const int mtrl_fab_ripple_color = 2131624072;
+			public const int mtrl_chip_text_color = 2131624072;
+			
+			// aapt resource value: 0x7f0e0089
+			public const int mtrl_fab_ripple_color = 2131624073;
 			
 			// aapt resource value: 0x7f0e004f
 			public const int mtrl_scrim_color = 2131624015;
 			
-			// aapt resource value: 0x7f0e0089
-			public const int mtrl_tabs_colored_ripple_color = 2131624073;
-			
 			// aapt resource value: 0x7f0e008a
-			public const int mtrl_tabs_icon_color_selector = 2131624074;
+			public const int mtrl_tabs_colored_ripple_color = 2131624074;
 			
 			// aapt resource value: 0x7f0e008b
-			public const int mtrl_tabs_icon_color_selector_colored = 2131624075;
+			public const int mtrl_tabs_icon_color_selector = 2131624075;
 			
 			// aapt resource value: 0x7f0e008c
-			public const int mtrl_tabs_legacy_text_color_selector = 2131624076;
+			public const int mtrl_tabs_icon_color_selector_colored = 2131624076;
 			
 			// aapt resource value: 0x7f0e008d
-			public const int mtrl_tabs_ripple_color = 2131624077;
+			public const int mtrl_tabs_legacy_text_color_selector = 2131624077;
 			
 			// aapt resource value: 0x7f0e008e
-			public const int mtrl_text_btn_text_color_selector = 2131624078;
+			public const int mtrl_tabs_ripple_color = 2131624078;
+			
+			// aapt resource value: 0x7f0e008f
+			public const int mtrl_text_btn_text_color_selector = 2131624079;
 			
 			// aapt resource value: 0x7f0e0050
 			public const int mtrl_textinput_default_box_stroke_color = 2131624016;
@@ -4824,11 +4827,11 @@ namespace Bit.Droid
 			// aapt resource value: 0x7f0e003b
 			public const int switch_thumb_disabled_material_light = 2131623995;
 			
-			// aapt resource value: 0x7f0e008f
-			public const int switch_thumb_material_dark = 2131624079;
-			
 			// aapt resource value: 0x7f0e0090
-			public const int switch_thumb_material_light = 2131624080;
+			public const int switch_thumb_material_dark = 2131624080;
+			
+			// aapt resource value: 0x7f0e0091
+			public const int switch_thumb_material_light = 2131624081;
 			
 			// aapt resource value: 0x7f0e003c
 			public const int switch_thumb_normal_material_dark = 2131623996;

src/Android/Resources/values/colors.xml

@@ -12,4 +12,5 @@
   <color name="primary">#3c8dbc</color>
   <color name="darkaccent">#222d32</color>
   <color name="accent">#3883af</color>
+  <color name="border">#dddddd</color>
 </resources>

src/Android/Resources/values/styles.xml

@@ -14,6 +14,7 @@
     <item name="colorPrimary">@color/primary</item>
     <item name="colorPrimaryDark">@color/accent</item>
     <item name="colorAccent">@color/primary</item>
+    <item name="colorControlNormal">@color/border</item>
     <item name="windowActionModeOverlay">true</item>
     <item name="android:datePickerDialogTheme">@style/AppCompatDialogStyle</item>
     <item name="android:colorActivatedHighlight">@android:color/transparent</item>

src/App/Controls/MonoEntry.cs

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

src/App/Pages/Accounts/LoginPage.xaml

@@ -4,31 +4,69 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
     x:Class="Bit.App.Pages.LoginPage"
     xmlns:pages="clr-namespace:Bit.App.Pages"
+    xmlns:controls="clr-namespace:Bit.App.Controls"
     xmlns:u="clr-namespace:Bit.App.Utilities"
-    xmlns:bv="clr-namespace:Bit.App.Controls.BoxedView"
     x:DataType="pages:LoginPageViewModel"
     Title="{Binding PageTitle}">
+    
     <ContentPage.BindingContext>
         <pages:LoginPageViewModel />
     </ContentPage.BindingContext>
 
+    <ContentPage.Resources>
+        <ResourceDictionary>
+            <u:InverseBoolConverter x:Key="inverseBool" />
+        </ResourceDictionary>
+    </ContentPage.Resources>
+
     <ContentPage.ToolbarItems>
-        <ToolbarItem Icon="cogs.png" Text="{u:I18n LogIn}" Clicked="LogIn_Clicked" />
+        <ToolbarItem Text="{u:I18n LogIn}" Clicked="LogIn_Clicked" />
     </ContentPage.ToolbarItems>
 
-    <StackLayout>
+    <ScrollView>
-        <bv:BoxedView HasUnevenRows="True" VerticalOptions="Start">
+        <StackLayout Spacing="20">
-            <bv:BoxedSection HeaderHeight="0">
+            <StackLayout StyleClass="box">
-                <bv:EntryCell Title="{u:I18n EmailAddress}" 
+                <StackLayout StyleClass="box-row">
-                              ValueText="{Binding Email}" />
+                    <Label
-                <bv:EntryCell Title="{u:I18n MasterPassword}"
+                        Text="{u:I18n EmailAddress}"
-                              ValueText="{Binding MasterPassword}"
+                        StyleClass="box-label" />
-                              IsPassword="True"
+                    <Entry
-                              Button1Icon="cogs"
+                        Text="{Binding Email}"
-                              Button1Command="{Binding ShowPasswordCommand}" />
+                        StyleClass="box-value" />
-            </bv:BoxedSection>
-        </bv:BoxedView>
-        <Button Text="{u:I18n GetPasswordHint}" VerticalOptions="EndAndExpand"></Button>
                 </StackLayout>
+                <Grid StyleClass="box-row">
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="*" />
+                    </Grid.RowDefinitions>
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="*" />
+                        <ColumnDefinition Width="Auto" />
+                    </Grid.ColumnDefinitions>
+                    <Label
+                        Text="{u:I18n MasterPassword}"
+                        StyleClass="box-label"
+                        Grid.Row="0"
+                        Grid.Column="0" />
+                    <controls:MonoEntry
+                        Text="{Binding MasterPassword}"
+                        StyleClass="box-value"
+                        IsPassword="{Binding ShowPassword, Converter={StaticResource inverseBool}}"
+                        Grid.Row="1"
+                        Grid.Column="0" />
+                    <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" />
+                </Grid>
+            </StackLayout>
+            <StackLayout Padding="10, 0">
+                <Button Text="{u:I18n GetPasswordHint}"></Button>
+            </StackLayout>
+        </StackLayout>
+    </ScrollView>
 
 </ContentPage>

src/App/Pages/Accounts/LoginPageViewModel.cs

@@ -4,7 +4,6 @@ using Bit.Core.Abstractions;
 using Bit.Core.Exceptions;
 using Bit.Core.Utilities;
 using System.Threading.Tasks;
-using System.Windows.Input;
 using Xamarin.Forms;
 
 namespace Bit.App.Pages
@@ -15,6 +14,8 @@ namespace Bit.App.Pages
         private readonly IAuthService _authService;
         private readonly ISyncService _syncService;
 
+        private bool _showPassword;
+
         public LoginPageViewModel()
         {
             _deviceActionService = ServiceContainer.Resolve<IDeviceActionService>("deviceActionService");
@@ -22,11 +23,21 @@ namespace Bit.App.Pages
             _syncService = ServiceContainer.Resolve<ISyncService>("syncService");
 
             PageTitle = AppResources.Bitwarden;
-            ShowPasswordCommand = new Command(() =>
+            TogglePasswordCommand = new Command(TogglePassword);
-                Page.DisplayAlert("Button 1 Command", "Button 1 message", "Cancel"));
         }
 
-        public ICommand ShowPasswordCommand { get; }
+        public bool ShowPassword
+        {
+            get => _showPassword;
+            set => SetProperty(ref _showPassword, value,
+                additionalPropertyNames: new string[]
+                {
+                    nameof(ShowPasswordIcon)
+                });
+        }
+
+        public Command TogglePasswordCommand { get; }
+        public string ShowPasswordIcon => ShowPassword ? "" : "";
         public string Email { get; set; }
         public string MasterPassword { get; set; }
 
@@ -74,5 +85,10 @@ namespace Bit.App.Pages
                 await Page.DisplayAlert(AppResources.AnErrorHasOccurred, e.Error.GetSingleMessage(), AppResources.Ok);
             }
         }
+
+        public void TogglePassword()
+        {
+            ShowPassword = !ShowPassword;
+        }
     }
 }

src/App/Styles/Android.xaml

@@ -2,6 +2,12 @@
 <ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms"
                     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                     x:Class="Bit.App.Styles.Android">
+    <Style TargetType="Entry"
+           ApplyToDerivedTypes="True">
+        <Setter Property="Margin"
+                Value="-4, 0" />
+    </Style>
+
     <!-- List -->
     
     <Style TargetType="ListView"

src/App/Styles/Base.xaml

@@ -207,8 +207,6 @@
            Class="box-label">
         <Setter Property="FontSize"
                 Value="Small" />
-        <Setter Property="Margin"
-                Value="0, 0, 0, 5" />
         <Setter Property="TextColor"
                 Value="{StaticResource MutedColor}" />
     </Style>
@@ -217,6 +215,8 @@
            Class="box-value">
         <Setter Property="LineBreakMode"
                 Value="CharacterWrap" />
+        <Setter Property="Margin"
+                Value="0, 5, 0, 0" />
     </Style>
     <Style TargetType="Label"
            Class="box-sub-label">