Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 3 additions & 4 deletions TransactionProcessor.Mobile/App.xaml
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,11 @@
xmlns:local="clr-namespace:TransactionProcessor.Mobile"
x:Class="TransactionProcessor.Mobile.App">
<Application.Resources>
<!--<ResourceDictionary>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Resources/Styles/Colors.xaml" />
<ResourceDictionary Source="Resources/Styles/Styles.xaml" />
<ResourceDictionary Source="Resources/Styles/LightTheme.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>-->
<ResourceDictionary Source="Resources/Styles/LightTheme.xaml"/>
</ResourceDictionary>
</Application.Resources>
</Application>
127 changes: 92 additions & 35 deletions TransactionProcessor.Mobile/Pages/LoginPage.xaml
Original file line number Diff line number Diff line change
Expand Up @@ -6,54 +6,111 @@
Title="LoginPage"
Shell.NavBarIsVisible="False"
Shell.FlyoutItemIsVisible="True"
Padding="0"
x:Name="Logon">
<ContentPage.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="{StaticResource primary}" Offset="0.0"/>
<GradientStop Color="#2B4A8C" Offset="1.0"/>
</LinearGradientBrush>
</ContentPage.Background>
<ContentPage.Content>
<ScrollView>
<!-- Main structure-->
<VerticalStackLayout x:Name="MainLayout" Style="{DynamicResource Layout}">
<!--Main image-->
<Image Source="loginimage.jpg" VerticalOptions="Start" Style="{DynamicResource LoginImage}"/>

<!-- Title-->
<Label Text="Log In" FontSize="34" HorizontalOptions="Center" FontAttributes="Bold" Padding="20,0,0,20"
AutomationId="LoginLabel"
x:Name="LoginLabel"/>
<Frame Style="{DynamicResource MainFrame}">

<VerticalStackLayout x:Name="SubLayout">
<Entry x:Name="UserNameEntry"
Placeholder="User name or email address"
AutomationId="UserNameEntry"
Style="{DynamicResource UserNameEntryStyle}"
Text="{Binding UserName}">
</Entry>

<Entry x:Name="PasswordEntry"
Placeholder="******"
AutomationId="PasswordEntry"
Style="{DynamicResource PasswordEntryStyle}"
Text="{Binding Password}">
</Entry>
<HorizontalStackLayout Margin="20" Spacing="10">
<Label Text="Use Training Mode?" VerticalOptions="Center" HorizontalOptions="Start"/>

<Switch x:Name="UseTrainingMode" VerticalOptions="Center" HorizontalOptions="Start" AutomationId="UseTrainingModeSwitch"
IsToggled="{Binding UseTrainingMode}"
/>
<VerticalStackLayout Spacing="0">

<!-- Branding section -->
<VerticalStackLayout HorizontalOptions="Center" Spacing="10" Padding="20,80,20,40">
<Image Source="loginimage.jpg"
HeightRequest="120"
WidthRequest="120"
HorizontalOptions="Center"/>
<Label Text="Transaction Processor"
FontSize="24"
FontAttributes="Bold"
TextColor="White"
HorizontalOptions="Center"
AutomationId="LoginLabel"
x:Name="LoginLabel"/>
<Label Text="Sign in to your account"
FontSize="14"
TextColor="White"
Opacity="0.75"
HorizontalOptions="Center"/>
</VerticalStackLayout>

<!-- Login card -->
<Frame CornerRadius="30"
Padding="30,30,30,40"
HasShadow="True"
BackgroundColor="White"
Margin="0"
BorderColor="Transparent">
<VerticalStackLayout Spacing="8">

<!-- Username field -->
<Label Text="Email / Username" Style="{StaticResource LoginFieldLabel}"/>
<Frame Style="{StaticResource LoginEntryContainerFrame}">
<Entry x:Name="UserNameEntry"
Placeholder="Enter your email or username"
AutomationId="UserNameEntry"
Style="{StaticResource LoginEntryCardStyle}"
Text="{Binding UserName}"/>
</Frame>

<!-- Password field -->
<Label Text="Password" Style="{StaticResource LoginFieldLabel}" Margin="0,12,0,0"/>
<Frame Style="{StaticResource LoginEntryContainerFrame}">
<Entry x:Name="PasswordEntry"
Placeholder="Enter your password"
AutomationId="PasswordEntry"
IsPassword="True"
Style="{StaticResource LoginEntryCardStyle}"
Text="{Binding Password}"/>
</Frame>

<!-- Training mode toggle -->
<HorizontalStackLayout Spacing="10" Margin="0,12,0,4">
<Label Text="Training Mode"
VerticalOptions="Center"
TextColor="{StaticResource labelTextColor}"
FontSize="14"/>
<Switch x:Name="UseTrainingMode"
VerticalOptions="Center"
AutomationId="UseTrainingModeSwitch"
IsToggled="{Binding UseTrainingMode}"/>
</HorizontalStackLayout>

<Button Text="Continue" Style="{StaticResource StandardButton}" AutomationId="LoginButton">
<!-- Sign in button -->
<Button Text="Sign In"
Style="{StaticResource LoginButton}"
AutomationId="LoginButton"
Margin="0,8,0,0">
<Button.Behaviors>
<toolkit:EventToCommandBehavior
EventName="Clicked"
Command="{Binding LogonCommand}" BindingContext="{Binding Source={x:Reference Logon}, Path=BindingContext}" />
Command="{Binding LogonCommand}"
BindingContext="{Binding Source={x:Reference Logon}, Path=BindingContext}" />
</Button.Behaviors>
</Button>

<Label AutomationId="DeviceSerial" VerticalOptions="Center" HorizontalOptions="Start" Text="{Binding DeviceIdentifier}"/>
<Entry x:Name="ConfigHostUrlEntry" AutomationId="ConfigHostUrlEntry" Text="{Binding ConfigHostUrl}"/>
<!-- Device info -->
<Label AutomationId="DeviceSerial"
TextColor="{StaticResource Gray400}"
FontSize="11"
HorizontalOptions="Center"
Text="{Binding DeviceIdentifier}"
Margin="0,16,0,0"/>
<Entry x:Name="ConfigHostUrlEntry"
AutomationId="ConfigHostUrlEntry"
Text="{Binding ConfigHostUrl}"
FontSize="11"
TextColor="{StaticResource Gray400}"
PlaceholderColor="{StaticResource Gray300}"
Placeholder="Configuration URL"/>

</VerticalStackLayout>
</Frame>

</VerticalStackLayout>
</ScrollView>
</ContentPage.Content>
Expand Down
39 changes: 39 additions & 0 deletions TransactionProcessor.Mobile/Resources/Styles/LightTheme.xaml
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TransactionProcessor.Mobile.Resources.Styles.LightTheme">

<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Colors.xaml" />
</ResourceDictionary.MergedDictionaries>

<!-- Colors in use -->
<Color x:Key="pageBackgroundColor">#FFFFFF</Color>
<Color x:Key="textColor">#E5E9F0</Color>
Expand Down Expand Up @@ -206,4 +210,39 @@
<Setter Property="BackgroundColor" Value="#f5f8fa"></Setter>
</Style>

<Style x:Key="LoginFieldLabel" TargetType="Label">
<Setter Property="TextColor" Value="{StaticResource labelTextColor}"/>
<Setter Property="FontFamily" Value="OpenSansRegular"/>
<Setter Property="FontSize" Value="13"/>
<Setter Property="FontAttributes" Value="Bold"/>
</Style>

<Style x:Key="LoginEntryContainerFrame" TargetType="Frame">
<Setter Property="CornerRadius" Value="12"/>
<Setter Property="Padding" Value="10,0"/>
<Setter Property="HasShadow" Value="False"/>
<Setter Property="BorderColor" Value="{StaticResource MidGray}"/>
<Setter Property="BackgroundColor" Value="{StaticResource LightGray}"/>
<Setter Property="Margin" Value="0"/>
</Style>

<Style x:Key="LoginEntryCardStyle" TargetType="Entry">
<Setter Property="PlaceholderColor" Value="{StaticResource Gray400}"/>
<Setter Property="TextColor" Value="{StaticResource DarkGray}"/>
<Setter Property="HeightRequest" Value="45"/>
<Setter Property="BackgroundColor" Value="Transparent"/>
<Setter Property="ReturnType" Value="Done"/>
</Style>

<Style x:Key="LoginButton" TargetType="Button">
<Setter Property="TextColor" Value="{StaticResource buttonTextColor}"/>
<Setter Property="FontFamily" Value="OpenSansRegular"/>
<Setter Property="BackgroundColor" Value="{StaticResource primary}"/>
<Setter Property="CornerRadius" Value="25"/>
<Setter Property="FontSize" Value="16"/>
<Setter Property="FontAttributes" Value="Bold"/>
<Setter Property="HeightRequest" Value="52"/>
<Setter Property="HorizontalOptions" Value="Fill"/>
</Style>

</ResourceDictionary>
Loading