login page layout

This commit is contained in:
Kyle Spearrin 2019-05-01 15:11:54 -04:00
parent c8368a2190
commit 3b97fa0379
8 changed files with 170 additions and 85 deletions

View File

@ -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
public const int design_error = 2131624059;
// aapt resource value: 0x7f0e007c
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
public const int design_tint_password_toggle = 2131624060;
// aapt resource value: 0x7f0e007d
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
public const int ic_launcher_background = 2131624038;
// aapt resource value: 0x7f0e0067
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
public const int mtrl_btn_text_color_selector = 2131624067;
// aapt resource value: 0x7f0e0084
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;

View File

@ -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>

View File

@ -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>

View File

@ -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;
}
}
}
}

View File

@ -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>

View File

@ -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;
}
}
}

View File

@ -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"

View File

@ -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">