prs/prs.mobile.new/PRS.Mobile/Main/PINLoginPage.xaml

<?xml version="1.0" encoding="UTF-8" ?>
<mobile:MobilePage
    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:mobile="clr-namespace:InABox.Mobile;assembly=InABox.Mobile.Shared"
    x:Class="PRS.Mobile.PinLoginPage"
    BackButtonEnabled="False">
    
    <mobile:MobilePage.PrimaryMenu>
        <ImageButton Clicked="Settings_OnClicked" Source="menu"/>
    </mobile:MobilePage.PrimaryMenu>
    
    <mobile:MobilePage.PageContent>
        <mobile:MobilePageStack x:Name="MasterGrid" Background="White">
        
            <mobile:MobilePageStack.Items>
                
                <mobile:MobilePageStackItem x:Name="SplashLayout">
                    
                    <mobile:MobilePageStackItem.Content>
                        
                        <StackLayout Orientation="Vertical" VerticalOptions="Center">
                        
                        <mobile:MobileCard 
                            BorderColor="Transparent"
                            BackgroundColor="White"
                            Padding="0"
                            CornerRadius="30"
                            IsClippedToBounds="True"
                            VerticalOptions="Center"
                            HorizontalOptions="Center">
                            
                            <Image 
                                x:Name="_logo"
                                Aspect="AspectFit"
                                Source="logo"
                                Margin="0">
                                <Image.HeightRequest>
                                    <OnPlatform x:TypeArguments="x:Double">
                                        <On Platform="Android" Value="200"/>
                                        <On Platform="iOS" Value="150"/>
                                    </OnPlatform>
                                </Image.HeightRequest>
                            </Image>
                            
                        </mobile:MobileCard>
                            
                            <Label 
                                x:Name="_status"
                                Text="Loading..."
                                TextColor="DimGray"
                                FontSize="Header" 
                                HorizontalOptions="Center" 
                                Margin="0,100,0,0"/>
                            
                        </StackLayout>
                        
                    </mobile:MobilePageStackItem.Content>
                    
                </mobile:MobilePageStackItem>
                                
                <mobile:MobilePageStackItem x:Name="PINLayout">
                    
                    <mobile:MobilePageStackItem.Content>
                        
                        <Grid>
                    
                            <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" Grid.Column="1" Grid.ColumnSpan="3" 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>
                                    
                    </mobile:MobilePageStackItem.Content>
                    
                </mobile:MobilePageStackItem>
                                
                <mobile:MobilePageStackItem x:Name="TwoFALayout">
                    
                    <mobile:MobilePageStackItem.Content>
                        
                        <Grid>
                    
                            <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>
                        
                    </mobile:MobilePageStackItem.Content>
                    
                </mobile:MobilePageStackItem>
                                
                <mobile:MobilePageStackItem x:Name="PasswordLayout" >
                    
                    <mobile:MobilePageStackItem.Content>
                        
                        <StackLayout 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>
                        
                    </mobile:MobilePageStackItem.Content>
                    
                </mobile:MobilePageStackItem>
                
            </mobile:MobilePageStack.Items>
            
        </mobile:MobilePageStack>
        
    </mobile:MobilePage.PageContent>
    
</mobile:MobilePage>