prs/prs.mobile/comal.timesheets/Main/PINLoginPage.xaml

<?xml version="1.0" encoding="UTF-8" ?>
<timesheets:BasePage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:material="clr-namespace:XF.Material.Forms.UI;assembly=XF.Material" 
    xmlns:timesheets="clr-namespace:comal.timesheets"
    x:Class="comal.timesheets.PinLoginPage"
    BackButtonEnabled="False">

    <timesheets:BasePage.ActionButtons>
        <ImageButton Clicked="Settings_OnClicked" Source="settings.png"/>
    </timesheets:BasePage.ActionButtons>    
    
    <timesheets:BasePage.PageContent>
        <Grid x:Name="MasterGrid" Background="White">

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="0"/>
                <ColumnDefinition Width="0"/>
                <ColumnDefinition Width="0"/>
            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <AbsoluteLayout x:Name="SplashLayout" Grid.Column="0">
                <Image Source="logo" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0.5,0.5,0.75,0.75">
                    <Image.Margin>
                        <OnPlatform x:TypeArguments="Thickness">
                            <On Platform="Android" Value="30"/>
                            <On Platform="iOS" Value="0"/>
                        </OnPlatform>
                    </Image.Margin>
                </Image>
            </AbsoluteLayout>

            <Grid x:Name="PINLayout" Background="White" Grid.Column="1" >
                
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width=".3*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width=".3*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="3*"/>
                    <RowDefinition Height="2*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height=".3*"/>
                </Grid.RowDefinitions>

                <Image Source="logo" Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="3" >
                    <Image.Margin>
                        <OnPlatform x:TypeArguments="Thickness">
                            <On Platform="Android" Value="30"/>
                            <On Platform="iOS" Value="0"/>
                        </OnPlatform>
                    </Image.Margin>
                </Image>
                
                <Label Grid.Row="1" FontAttributes="Bold" FontSize="Medium" LineBreakMode="WordWrap" Text="Enter your PIN Number below: "
                       VerticalOptions="Center" HorizontalOptions="Center" HorizontalTextAlignment="Center"/>
                
                <Grid Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="3">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>   
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                    <Frame Grid.Column="0" HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="35" BorderColor="LightSkyBlue" Padding="1">
                        <Entry x:Name="Pin0" HorizontalOptions="Center" VerticalOptions="Center" FontSize="Medium" Keyboard="Numeric"/>
                    </Frame>
                    <Frame Grid.Column="1" HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="35" BorderColor="LightSkyBlue" Padding="1">
                        <Entry x:Name="Pin1" HorizontalOptions="Center" VerticalOptions="Center" FontSize="Medium" Keyboard="Numeric"/>
                    </Frame>
                    <Frame Grid.Column="2" HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="35" BorderColor="LightSkyBlue" Padding="1">
                        <Entry x:Name="Pin2" HorizontalOptions="Center" VerticalOptions="Center" FontSize="Medium" Keyboard="Numeric"/>
                    </Frame>
                    <Frame Grid.Column="3" HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="35" BorderColor="LightSkyBlue" Padding="1">
                        <Entry x:Name="Pin3" HorizontalOptions="Center" VerticalOptions="Center" FontSize="Medium" Keyboard="Numeric"/>
                    </Frame>
                </Grid>
                
                <material:MaterialButton x:Name="PinKey1" Grid.Row="3" Grid.Column="1" Text="1" Clicked="Pin_Button_Click" IsTabStop="False" ButtonType="Elevated" />
                <material:MaterialButton x:Name="PinKey2" Grid.Row="3" Grid.Column="2" Text="2" Clicked="Pin_Button_Click" IsTabStop="False" ButtonType="Elevated" />
                <material:MaterialButton x:Name="PinKey3" Grid.Row="3" Grid.Column="3" Text="3" Clicked="Pin_Button_Click" IsTabStop="False" ButtonType="Elevated" />
                <material:MaterialButton x:Name="PinKey4" Grid.Row="4" Grid.Column="1" Text="4" Clicked="Pin_Button_Click" IsTabStop="False" ButtonType="Elevated" />
                <material:MaterialButton x:Name="PinKey5" Grid.Row="4" Grid.Column="2" Text="5" Clicked="Pin_Button_Click" IsTabStop="False" ButtonType="Elevated" />
                <material:MaterialButton x:Name="PinKey6" Grid.Row="4" Grid.Column="3" Text="6" Clicked="Pin_Button_Click" IsTabStop="False"  ButtonType="Elevated" />
                <material:MaterialButton x:Name="PinKey7" Grid.Row="5" Grid.Column="1" Text="7" Clicked="Pin_Button_Click" IsTabStop="False"  ButtonType="Elevated" />
                <material:MaterialButton x:Name="PinKey8" Grid.Row="5" Grid.Column="2" Text="8" Clicked="Pin_Button_Click" IsTabStop="False"  ButtonType="Elevated" />
                <material:MaterialButton x:Name="PinKey9" Grid.Row="5" Grid.Column="3" Text="9" Clicked="Pin_Button_Click" IsTabStop="False"  ButtonType="Elevated" />
                <material:MaterialButton x:Name="PinBack" Grid.Row="6" Grid.Column="1" Text="Clr" Clicked="Pin_Back_Click" IsEnabled="False" IsTabStop="False" ButtonType="Elevated"/>
                <material:MaterialButton x:Name="PinKey0" Grid.Row="6" Grid.Column="2" Text="0" Clicked="Pin_Button_Click" IsTabStop="False" ButtonType="Elevated" />
                <material:MaterialButton x:Name="PinOK" Grid.Row="6" Grid.Column="3" Text="OK" Clicked="Pin_OK_Click" IsEnabled="False" ButtonType="Elevated" />
                
            </Grid>
            
            <Grid x:Name="TwoFALayout" Background="White" Grid.Column="1" >
                
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width=".3*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width=".3*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="3*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height=".3*"/>
                </Grid.RowDefinitions>

                <Image Source="logo" Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="3">
                    <Image.Margin>
                        <OnPlatform x:TypeArguments="Thickness">
                            <On Platform="Android" Value="30"/>
                            <On Platform="iOS" Value="0"/>
                        </OnPlatform>
                    </Image.Margin>
                </Image>
                
                <Label 
                    Grid.Row="1" 
                    Grid.Column="1" 
                    Grid.ColumnSpan="3" 
                    FontAttributes="Bold" 
                    FontSize="Medium" 
                    LineBreakMode="WordWrap" 
                    Text="Enter your 2FA code below, from: "
                    VerticalOptions="Center" 
                    HorizontalOptions="Center" 
                    HorizontalTextAlignment="Center"/>
                
                <Label 
                    Grid.Row="2"
                    Grid.Column="1" 
                    Grid.ColumnSpan="3"
                    FontAttributes="Bold" 
                    FontSize="Medium" 
                    x:Name="TwoFASource" 
                    LineBreakMode="WordWrap" 
                    TextColor="#a2006d" 
                    Margin="3"
                    VerticalOptions="Center" 
                    HorizontalOptions="Center" 
                    HorizontalTextAlignment="Center"/>
                    
                
                <Grid Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="3">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>   
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                    <Frame Grid.Column="0" HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="35" BorderColor="LightCoral" Padding="1">
                        <Entry x:Name="TwoFA0" HorizontalOptions="Center" VerticalOptions="Center" FontSize="Medium" Keyboard="Numeric"/>
                    </Frame>
                    <Frame Grid.Column="1" HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="35" BorderColor="LightCoral" Padding="1">
                        <Entry x:Name="TwoFA1" HorizontalOptions="Center" VerticalOptions="Center" FontSize="Medium" Keyboard="Numeric"/>
                    </Frame>
                    <Frame Grid.Column="2" HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="35" BorderColor="LightCoral" Padding="1">
                        <Entry x:Name="TwoFA2" HorizontalOptions="Center" VerticalOptions="Center" FontSize="Medium" Keyboard="Numeric"/>
                    </Frame>
                    <Frame Grid.Column="3" HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="35" BorderColor="LightCoral" Padding="1">
                        <Entry x:Name="TwoFA3" HorizontalOptions="Center" VerticalOptions="Center" FontSize="Medium" Keyboard="Numeric"/>
                    </Frame>
                    <Frame Grid.Column="4" HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="35" BorderColor="LightCoral" Padding="1">
                        <Entry x:Name="TwoFA4" HorizontalOptions="Center" VerticalOptions="Center" FontSize="Medium" Keyboard="Numeric"/>
                    </Frame>
                    <Frame Grid.Column="5" HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="35" BorderColor="LightCoral" Padding="1">
                        <Entry x:Name="TwoFA5" HorizontalOptions="Center" VerticalOptions="Center" FontSize="Medium" Keyboard="Numeric"/>
                    </Frame>

                </Grid>
                
                <material:MaterialButton x:Name="TwoFAKey1" Grid.Row="4" Grid.Column="1" Text="1" Clicked="TwoFA_Button_Click" IsTabStop="False" ButtonType="Elevated" />
                <material:MaterialButton x:Name="TwoFAKey2" Grid.Row="4" Grid.Column="2" Text="2" Clicked="TwoFA_Button_Click" IsTabStop="False" ButtonType="Elevated" />
                <material:MaterialButton x:Name="TwoFAKey3" Grid.Row="4" Grid.Column="3" Text="3" Clicked="TwoFA_Button_Click" IsTabStop="False" ButtonType="Elevated" />
                <material:MaterialButton x:Name="TwoFAKey4" Grid.Row="5" Grid.Column="1" Text="4" Clicked="TwoFA_Button_Click" IsTabStop="False" ButtonType="Elevated" />
                <material:MaterialButton x:Name="TwoFAKey5" Grid.Row="5" Grid.Column="2" Text="5" Clicked="TwoFA_Button_Click" IsTabStop="False" ButtonType="Elevated" />
                <material:MaterialButton x:Name="TwoFAKey6" Grid.Row="5" Grid.Column="3" Text="6" Clicked="TwoFA_Button_Click" IsTabStop="False"  ButtonType="Elevated" />
                <material:MaterialButton x:Name="TwoFAKey7" Grid.Row="6" Grid.Column="1" Text="7" Clicked="TwoFA_Button_Click" IsTabStop="False"  ButtonType="Elevated" />
                <material:MaterialButton x:Name="TwoFAKey8" Grid.Row="6" Grid.Column="2" Text="8" Clicked="TwoFA_Button_Click" IsTabStop="False"  ButtonType="Elevated" />
                <material:MaterialButton x:Name="TwoFAKey9" Grid.Row="6" Grid.Column="3" Text="9" Clicked="TwoFA_Button_Click" IsTabStop="False"  ButtonType="Elevated" />
                <material:MaterialButton x:Name="TwoFABack" Grid.Row="7" Grid.Column="1" Text="Clr" Clicked="TwoFA_Back_Click" IsEnabled="False" IsTabStop="False" ButtonType="Elevated"/>
                <material:MaterialButton x:Name="TwoFAKey0" Grid.Row="7" Grid.Column="2" Text="0" Clicked="TwoFA_Button_Click" IsTabStop="False" ButtonType="Elevated" />
                <material:MaterialButton x:Name="TwoFAOK" Grid.Row="7" Grid.Column="3" Text="OK" Clicked="TwoFA_OK_Click" IsEnabled="False" ButtonType="Elevated" />
                
            </Grid>
            
            <StackLayout x:Name="PasswordLayout" Background="White" Grid.Column="3" Padding="10">
                
                <material:MaterialLabel Text="New Password (min 5 characters)" TypeScale="H6" HorizontalTextAlignment="Start" Margin="5"/>

                <Frame HasShadow="False" Padding="10" BorderColor="Gray" CornerRadius="10">
                    <Entry x:Name="NewPassword" TextChanged="NewPassword_OnTextChanged"/>
                </Frame>
                
                <material:MaterialLabel Text="Confirm Password" TypeScale="H6" HorizontalTextAlignment="Start" Margin="5"/>

                <Frame HasShadow="False" Padding="10" BorderColor="Gray" CornerRadius="10">
                    <Entry x:Name="NewPassword2" TextChanged="NewPassword_OnTextChanged"/>
                </Frame>
                
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" x:Name="PasswordCancelColumn"/>
                    </Grid.ColumnDefinitions>
                </Grid>
                <material:MaterialButton 
                    Grid.Column="0"
                    x:Name="ChangePasswordButton"
                    Text="Change Password"
                    Padding="10"
                    IsEnabled="False"
                    Clicked="ChangePasswordButton_OnClicked"/>
                <material:MaterialButton 
                    Grid.Column="1"
                    x:Name="CancelPasswordButton"
                    Text="Cancel"
                    Padding="10"
                    Clicked="CancelPasswordButton_OnClicked"/>

            </StackLayout>
            
            
        </Grid>
    </timesheets:BasePage.PageContent>
</timesheets:BasePage>