desktop-edge-win/DesktopEdge/Views/Screens/MFAScreen.xaml

<UserControl x:Class="ZitiDesktopEdge.MFAScreen"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:ZitiDesktopEdge"
             mc:Ignorable="d" 
             d:DesignHeight="570" 
             d:DesignWidth="420">
    <Grid x:Name="MFAArea" Visibility="Visible" Margin="0,0,0,0">
        <Border Margin="10,10,10,10" BorderBrush="Black" BorderThickness="8" CornerRadius="10">
            <Border.Effect>
                <DropShadowEffect BlurRadius="20" Direction="1" RenderingBias="Quality" ShadowDepth="1" Opacity="1"/>
            </Border.Effect>
        </Border>
        <Rectangle x:Name="MainBrush" Margin="10,10,10,10" RadiusX="12" RadiusY="12" ClipToBounds="True">
            <Rectangle.Fill>
                <SolidColorBrush Color="#FFFFFF" Opacity="0.97"/>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle x:Name="AuthBrush" Margin="10,10,10,10" RadiusX="12" RadiusY="12" ClipToBounds="True">
            <Rectangle.Fill>
                <SolidColorBrush Color="#131429" Opacity="0.97"/>
            </Rectangle.Fill>
            <Rectangle.Stroke>
                <SolidColorBrush Color="White" Opacity="0.4"></SolidColorBrush>
            </Rectangle.Stroke>
        </Rectangle>
        <Rectangle x:Name="SeperationColor" Margin="16,10,16,16" RadiusX="10" RadiusY="10" ClipToBounds="True" Height="160" VerticalAlignment="Bottom">
            <Rectangle.Fill>
                <SolidColorBrush Color="#131429" Opacity="0.97"/>
            </Rectangle.Fill>
        </Rectangle>

        <!-- MFA Setup Screen -->
        <Grid x:Name="MFASetupArea" Margin="20,20,20,20" Visibility="Visible">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="30"></RowDefinition>
                <RowDefinition Height="30"></RowDefinition>
                <RowDefinition Height="200"></RowDefinition>
                <RowDefinition Height="30"></RowDefinition>
                <RowDefinition Height="30"></RowDefinition>
                <RowDefinition Height="30"></RowDefinition>
                <RowDefinition Height="80"></RowDefinition>
                <RowDefinition Height="10"></RowDefinition>
                <RowDefinition Height="30"></RowDefinition>
            </Grid.RowDefinitions>
            <Label Content="Setup MFA" Grid.Row="0" FontSize="16" HorizontalAlignment="Center" FontWeight="Bold"></Label>
            <Label x:Name="IdName" Content="Identity Name" Grid.Row="1" FontSize="12" Foreground="DarkGray" HorizontalAlignment="Center"></Label>
            <Image x:Name="MFAImage" MaxWidth="200" MaxHeight="200" Width="200" Height="200" RenderOptions.BitmapScalingMode="Fant" Stretch="UniformToFill" Source="/Assets/Images/qrcode.png" Margin="50,0,50,0" Grid.Row="2" />
            <TextBox x:Name="SecretCode" TextWrapping="WrapWithOverflow" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center" IsReadOnly="True" BorderThickness="0"></TextBox>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Grid.Row="3" Grid.Column="1" VerticalAlignment="Center">
                <Label HorizontalAlignment="Center" Content="Go To Link" Foreground="#0069FF" MouseUp="GoTo" Cursor="Hand"></Label>
                <Label HorizontalAlignment="Center" Content=" or " Foreground="#000000" Cursor="Hand"></Label>
                <Label x:Name="SecretButton" HorizontalAlignment="Center" Content="Show Secret" Foreground="#0069FF" MouseUp="ShowSecret" Cursor="Hand"></Label>
            </StackPanel>
            <Label Content="enter the code below to finish setup" Grid.Row="4" FontSize="11" Foreground="DarkGray" HorizontalAlignment="Center"></Label>
            <Label Content="Authentication Code" Grid.Row="5" FontSize="18" Foreground="#FFFFFF" HorizontalAlignment="Center" FontWeight="Bold" FontFamily="/ZitiDesktopEdge;component/Assets/Fonts/#Russo One"></Label>
            <TextBox x:Name="SetupCode" MaxLength="6" Padding="0,5,0,0" Grid.Row="6" Keyboard.KeyUp="HandleKey" BorderThickness="0 0 0 0" TextAlignment="Center" FontSize="50">
                <TextBox.Resources>
                    <Style TargetType="{x:Type Border}">
                        <Setter Property="CornerRadius" Value="7"/>
                    </Style>
                </TextBox.Resources>
            </TextBox>
            <local:StyledButton x:Name="AuthSetupButton" OnClick="DoSetupAuthenticate" Label="Authenticate" Grid.Row="8"></local:StyledButton>
        </Grid>

        <!-- MFA Recovery Codes -->
        <Grid x:Name="MFARecoveryArea" Margin="20,20,20,20" Visibility="Collapsed">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="30"></RowDefinition>
                <RowDefinition Height="280"></RowDefinition>
                <RowDefinition Height="30"></RowDefinition>
            </Grid.RowDefinitions>
            <Label Content="MFA Recovery Codes" Grid.Row="0" FontSize="16" HorizontalAlignment="Center" FontWeight="Bold"></Label>
            <UniformGrid x:Name="RecoveryList" Grid.Row="1" Columns="3"></UniformGrid>
            <TextBlock TextWrapping="WrapWithOverflow" x:Name="NoRecovery" Visibility="Collapsed" Text="No Recovery Codes Available" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="20,0,20,0" FontSize="16"></TextBlock>

            <Grid Grid.Row="2">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="160"></ColumnDefinition>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Label HorizontalAlignment="Center" Content="Regenerate" Foreground="#0069FF" Cursor="Hand" Grid.Column="0" MouseUp="RegenerateCodes"></Label>
                <local:StyledButton x:Name="SaveButton" Label="Save Codes" Grid.Column="1" OnClick="SaveCodes"></local:StyledButton>
            </Grid>
        </Grid>

        <!-- MFA Authentication Area -->
        <Grid x:Name="MFAAuthArea" Margin="20,20,20,20" Visibility="Collapsed">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="30"></RowDefinition>
                <RowDefinition Height="30"></RowDefinition>
                <RowDefinition Height="80"></RowDefinition>
                <RowDefinition Height="30"></RowDefinition>
            </Grid.RowDefinitions>
            <Label Content="Authorize MFA" Foreground="White" Grid.Row="0" FontSize="16" HorizontalAlignment="Center" FontWeight="Bold"></Label>
            <Label x:Name="AuthSubTitle" Foreground="White" Opacity="0.7" Content="Enter Authorization or Recovery Code" Grid.Row="1" FontSize="12" HorizontalAlignment="Center"></Label>
            <TextBox x:Name="AuthCode" MaxLength="8" FontSize="50" Padding="0,5,0,0" Grid.Row="2" Keyboard.KeyUp="AuthCode_KeyUp" TextAlignment="Center" BorderThickness="0 0 0 0" Margin="0,0,0,5">
                <TextBox.Resources>
                    <Style TargetType="{x:Type Border}">
                        <Setter Property="CornerRadius" Value="7"/>
                    </Style>
                </TextBox.Resources>
            </TextBox>
            <local:StyledButton x:Name="AuthButton" OnClick="DoAuthenticate" Label="Authenticate" Grid.Row="7"></local:StyledButton>
        </Grid>

        <Image x:Name="CloseBlack" Source="/Assets/Images/closeBlack.png" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,40,40,0" Width="10" Height="10" Cursor="Hand" MouseUp="ExecuteClose"></Image>
        <Image x:Name="CloseWhite" Source="/Assets/Images/close.png" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,40,40,0" Width="10" Height="10" Cursor="Hand" MouseUp="ExecuteClose"></Image>
    </Grid>
</UserControl>