marechai/Marechai.App/Presentation/Views/LoginPage.xaml

<?xml version="1.0"
      encoding="utf-8"?>

<Page x:Class="Marechai.App.Presentation.Views.LoginPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:vm="using:Marechai.App.Presentation.ViewModels"
      xmlns:utu="using:Uno.Toolkit.UI"
      mc:Ignorable="d"
      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
      d:DataContext="{d:DesignInstance vm:LoginViewModel}">

    <Grid utu:SafeArea.Insets="VisibleBounds">
        <!-- Center content on screen -->
        <Grid HorizontalAlignment="Center"
              VerticalAlignment="Center"
              MaxWidth="480"
              Padding="32">

            <!-- Login Card with Mac OS 9 styling -->
            <Border Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                    BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                    BorderThickness="2"
                    CornerRadius="8"
                    Padding="0"
                    Translation="0,0,16">
                <Border.Shadow>
                    <ThemeShadow />
                </Border.Shadow>

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

                    <!-- Header with Mac OS 9 Title Bar Style -->
                    <Border Grid.Row="0"
                            Background="{ThemeResource AccentFillColorDefaultBrush}"
                            Padding="16,12"
                            CornerRadius="6,6,0,0">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>

                            <!-- Icon -->
                            <FontIcon Grid.Column="0"
                                      Glyph="&#xE77B;"
                                      FontSize="24"
                                      Foreground="White"
                                      Margin="0,0,12,0"
                                      VerticalAlignment="Center" />

                            <!-- Title -->
                            <TextBlock Grid.Column="1"
                                       x:Uid="LoginPage_Title"
                                       Text="Sign In to Marechai"
                                       Style="{StaticResource TitleTextBlockStyle}"
                                       Foreground="White"
                                       VerticalAlignment="Center" />
                        </Grid>
                    </Border>

                    <!-- Login Form Content -->
                    <ScrollViewer Grid.Row="1"
                                  VerticalScrollBarVisibility="Auto">
                        <StackPanel Padding="32"
                                    Spacing="24">

                            <!-- Welcome Message -->
                            <TextBlock x:Uid="LoginPage_WelcomeMessage"
                                       Text="Welcome back! Please sign in to continue."
                                       Style="{StaticResource BodyTextBlockStyle}"
                                       TextWrapping="Wrap"
                                       HorizontalAlignment="Center"
                                       TextAlignment="Center" />

                            <!-- Email Input -->
                            <StackPanel Spacing="8">
                                <TextBlock x:Uid="LoginPage_EmailLabel"
                                           Text="Email Address"
                                           Style="{StaticResource BodyStrongTextBlockStyle}" />
                                <TextBox x:Name="EmailTextBox"
                                         x:Uid="LoginPage_EmailTextBox"
                                         Text="{Binding Email, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                                         PlaceholderText="Enter your email"
                                         InputScope="EmailSmtpAddress"
                                         IsSpellCheckEnabled="False"
                                         AutomationProperties.Name="Email address"
                                         KeyDown="OnEmailKeyDown" />
                            </StackPanel>

                            <!-- Password Input -->
                            <StackPanel Spacing="8">
                                <TextBlock x:Uid="LoginPage_PasswordLabel"
                                           Text="Password"
                                           Style="{StaticResource BodyStrongTextBlockStyle}" />
                                <PasswordBox x:Name="PasswordBox"
                                             x:Uid="LoginPage_PasswordBox"
                                             Password="{Binding Password, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                                             PlaceholderText="Enter your password"
                                             AutomationProperties.Name="Password"
                                             KeyDown="OnPasswordKeyDown" />
                            </StackPanel>

                            <!-- Error Message -->
                            <Border x:Name="ErrorBorder"
                                    Background="#FFF4E6"
                                    BorderBrush="#FFB84D"
                                    BorderThickness="2"
                                    CornerRadius="4"
                                    Padding="12"
                                    Visibility="{Binding ErrorMessage, Converter={StaticResource NullToVisibilityConverter}}">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>

                                    <!-- Warning Icon -->
                                    <FontIcon Grid.Column="0"
                                              Glyph="&#xE7BA;"
                                              Foreground="#D97706"
                                              FontSize="20"
                                              Margin="0,0,8,0"
                                              VerticalAlignment="Top" />

                                    <!-- Error Text -->
                                    <TextBlock Grid.Column="1"
                                               Text="{Binding ErrorMessage}"
                                               Foreground="#92400E"
                                               TextWrapping="Wrap"
                                               VerticalAlignment="Center" />

                                    <!-- Close Button -->
                                    <Button Grid.Column="2"
                                            Command="{Binding ClearErrorCommand}"
                                            Background="Transparent"
                                            BorderThickness="0"
                                            Padding="8"
                                            Margin="8,0,0,0"
                                            VerticalAlignment="Center"
                                            AutomationProperties.Name="Close error message">
                                        <FontIcon Glyph="&#xE711;"
                                                  FontSize="12"
                                                  Foreground="#92400E" />
                                    </Button>
                                </Grid>
                            </Border>

                            <!-- Login Button -->
                            <Button x:Name="LoginButton"
                                    x:Uid="LoginPage_LoginButton"
                                    Command="{Binding LoginCommand}"
                                    IsEnabled="{Binding IsLoggingIn, Converter={StaticResource InvertBoolConverter}}"
                                    HorizontalAlignment="Stretch"
                                    Padding="16,12"
                                    Style="{StaticResource AccentButtonStyle}"
                                    AutomationProperties.Name="Sign in button">
                                <Button.Content>
                                    <Grid>
                                        <TextBlock x:Uid="LoginPage_LoginButtonText"
                                                   Text="Sign In"
                                                   Visibility="{Binding IsLoggingIn, Converter={StaticResource InvertBoolToVisibilityConverter}}" />
                                        <StackPanel Orientation="Horizontal"
                                                    HorizontalAlignment="Center"
                                                    Spacing="8"
                                                    Visibility="{Binding IsLoggingIn, Converter={StaticResource BoolToVisibilityConverter}}">
                                            <ProgressRing IsActive="True"
                                                          Width="20"
                                                          Height="20"
                                                          Foreground="White" />
                                            <TextBlock x:Uid="LoginPage_SigningInText"
                                                       Text="Signing in..."
                                                       Foreground="White" />
                                        </StackPanel>
                                    </Grid>
                                </Button.Content>
                            </Button>

                            <!-- Additional Options -->
                            <StackPanel Spacing="8"
                                        HorizontalAlignment="Center">
                                <HyperlinkButton x:Uid="LoginPage_ForgotPasswordLink"
                                                 Content="Forgot your password?"
                                                 HorizontalAlignment="Center"
                                                 Visibility="Collapsed" />

                                <StackPanel Orientation="Horizontal"
                                            HorizontalAlignment="Center"
                                            Spacing="4"
                                            Visibility="Collapsed">
                                    <TextBlock x:Uid="LoginPage_NoAccountText"
                                               Text="Don't have an account?"
                                               VerticalAlignment="Center" />
                                    <HyperlinkButton x:Uid="LoginPage_SignUpLink"
                                                     Content="Sign up"
                                                     Padding="4,0" />
                                </StackPanel>
                            </StackPanel>
                        </StackPanel>
                    </ScrollViewer>
                </Grid>
            </Border>
        </Grid>
    </Grid>
</Page>