login page layout

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>
-        <bv:BoxedView HasUnevenRows="True" VerticalOptions="Start">
-            <bv:BoxedSection HeaderHeight="0">
-                <bv:EntryCell Title="{u:I18n EmailAddress}" 
-                              ValueText="{Binding Email}" />
-                <bv:EntryCell Title="{u:I18n MasterPassword}"
-                              ValueText="{Binding MasterPassword}"
-                              IsPassword="True"
-                              Button1Icon="cogs"
-                              Button1Command="{Binding ShowPasswordCommand}" />
-            </bv:BoxedSection>
-        </bv:BoxedView>
-        <Button Text="{u:I18n GetPasswordHint}" VerticalOptions="EndAndExpand"></Button>
-    </StackLayout>
+    <ScrollView>
+        <StackLayout Spacing="20">
+            <StackLayout StyleClass="box">
+                <StackLayout StyleClass="box-row">
+                    <Label
+                        Text="{u:I18n EmailAddress}"
+                        StyleClass="box-label" />
+                    <Entry
+                        Text="{Binding Email}"
+                        StyleClass="box-value" />
+                </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(() =>
-                Page.DisplayAlert("Button 1 Command", "Button 1 message", "Cancel"));
+            TogglePasswordCommand = new Command(TogglePassword);
         }
 
-        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;
+        }
     }
 }