449 lines
23 KiB
XML
449 lines
23 KiB
XML
<?xml version="1.0" encoding="utf-8" ?>
|
||
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
|
||
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
|
||
xmlns:viewmodels="clr-namespace:LSFE.MobApp.ViewModels.Admin"
|
||
x:Class="LSFE.MobApp.Pages.Admin.DeviceRegistrationPage"
|
||
x:DataType="viewmodels:DeviceRegistrationVM"
|
||
Title="Device Registration"
|
||
BackgroundColor="#E8F5F3">
|
||
|
||
<ContentPage.Resources>
|
||
<ResourceDictionary>
|
||
<Color x:Key="PrimaryColor">#1DB9A6</Color>
|
||
<Color x:Key="TextPrimaryColor">#2C3E50</Color>
|
||
<Color x:Key="TextSecondaryColor">#7F8C9A</Color>
|
||
<Color x:Key="CardBackgroundColor">#FFFFFF</Color>
|
||
<Color x:Key="InputBackgroundColor">#EFF3F8</Color>
|
||
<Color x:Key="ErrorColor">#E74C3C</Color>
|
||
<Color x:Key="SuccessColor">#27AE60</Color>
|
||
|
||
<Shadow x:Key="CardShadow"
|
||
Brush="#30000000"
|
||
Offset="0,4"
|
||
Radius="16"
|
||
Opacity="0.08"/>
|
||
</ResourceDictionary>
|
||
</ContentPage.Resources>
|
||
|
||
<ScrollView>
|
||
<VerticalStackLayout Padding="20" Spacing="20">
|
||
|
||
<!-- Header -->
|
||
<Border StrokeShape="RoundRectangle 20"
|
||
BackgroundColor="{StaticResource CardBackgroundColor}"
|
||
Padding="20"
|
||
Shadow="{StaticResource CardShadow}">
|
||
<VerticalStackLayout Spacing="12">
|
||
<Label Text="🔐 Secure Device Registration"
|
||
FontSize="24"
|
||
FontAttributes="Bold"
|
||
TextColor="{StaticResource TextPrimaryColor}"
|
||
HorizontalOptions="Center"/>
|
||
|
||
<Label Text="Admin authentication required"
|
||
FontSize="14"
|
||
TextColor="{StaticResource TextSecondaryColor}"
|
||
HorizontalOptions="Center"/>
|
||
</VerticalStackLayout>
|
||
</Border>
|
||
|
||
<!-- Step 1: Admin Authentication (Initially Visible) -->
|
||
<Border StrokeShape="RoundRectangle 20"
|
||
BackgroundColor="{StaticResource CardBackgroundColor}"
|
||
Padding="24"
|
||
Shadow="{StaticResource CardShadow}"
|
||
IsVisible="{Binding ShowAuthenticationForm}">
|
||
|
||
<VerticalStackLayout Spacing="20">
|
||
|
||
<Label Text="Step 1: Admin Authentication"
|
||
FontSize="18"
|
||
FontAttributes="Bold"
|
||
TextColor="{StaticResource PrimaryColor}"/>
|
||
|
||
<!-- Admin Username -->
|
||
<VerticalStackLayout Spacing="8">
|
||
<Label TextColor="{StaticResource TextPrimaryColor}">
|
||
<Label.FormattedText>
|
||
<FormattedString>
|
||
<Span Text=" "
|
||
FontFamily="FontAwesome"
|
||
FontSize="14"
|
||
TextColor="{StaticResource PrimaryColor}"/>
|
||
<Span Text="Admin Username"
|
||
FontSize="14"
|
||
FontAttributes="Bold"/>
|
||
</FormattedString>
|
||
</Label.FormattedText>
|
||
</Label>
|
||
|
||
<Border StrokeShape="RoundRectangle 12"
|
||
Stroke="Transparent"
|
||
BackgroundColor="{StaticResource InputBackgroundColor}">
|
||
<Entry Text="{Binding AdminUserName}"
|
||
Placeholder="Enter admin username"
|
||
PlaceholderColor="{StaticResource TextSecondaryColor}"
|
||
TextColor="{StaticResource TextPrimaryColor}"
|
||
BackgroundColor="Transparent"
|
||
FontSize="15"
|
||
HeightRequest="52"
|
||
Margin="16,0"/>
|
||
</Border>
|
||
</VerticalStackLayout>
|
||
|
||
<!-- Admin Password -->
|
||
<VerticalStackLayout Spacing="8">
|
||
<Label TextColor="{StaticResource TextPrimaryColor}">
|
||
<Label.FormattedText>
|
||
<FormattedString>
|
||
<Span Text=" "
|
||
FontFamily="FontAwesome"
|
||
FontSize="14"
|
||
TextColor="{StaticResource PrimaryColor}"/>
|
||
<Span Text="Admin Password"
|
||
FontSize="14"
|
||
FontAttributes="Bold"/>
|
||
</FormattedString>
|
||
</Label.FormattedText>
|
||
</Label>
|
||
|
||
<Border StrokeShape="RoundRectangle 12"
|
||
Stroke="Transparent"
|
||
BackgroundColor="{StaticResource InputBackgroundColor}">
|
||
<Grid ColumnDefinitions="*,Auto">
|
||
<Entry Grid.Column="0"
|
||
Text="{Binding AdminPassword}"
|
||
Placeholder="Enter admin password"
|
||
PlaceholderColor="{StaticResource TextSecondaryColor}"
|
||
TextColor="{StaticResource TextPrimaryColor}"
|
||
IsPassword="{Binding IsAdminPasswordHidden}"
|
||
BackgroundColor="Transparent"
|
||
FontSize="15"
|
||
HeightRequest="52"
|
||
Margin="16,0"/>
|
||
|
||
<ImageButton Grid.Column="1"
|
||
Command="{Binding ToggleAdminPasswordVisibilityCommand}"
|
||
BackgroundColor="Transparent"
|
||
WidthRequest="52"
|
||
HeightRequest="52"
|
||
Padding="14">
|
||
<ImageButton.Source>
|
||
<FontImageSource FontFamily="FontAwesome"
|
||
Glyph="{Binding AdminPasswordIcon}"
|
||
Color="{StaticResource TextSecondaryColor}"
|
||
Size="18"/>
|
||
</ImageButton.Source>
|
||
</ImageButton>
|
||
</Grid>
|
||
</Border>
|
||
</VerticalStackLayout>
|
||
|
||
<!-- Loading Indicator -->
|
||
<ActivityIndicator IsRunning="{Binding IsVerifying}"
|
||
IsVisible="{Binding IsVerifying}"
|
||
Color="{StaticResource PrimaryColor}"
|
||
HeightRequest="40"/>
|
||
|
||
<!-- Auth Error Message -->
|
||
<Border IsVisible="{Binding HasAuthError}"
|
||
StrokeShape="RoundRectangle 8"
|
||
BackgroundColor="#FFEBEE"
|
||
Stroke="#FFCDD2"
|
||
Padding="12">
|
||
<Label Text="{Binding AuthErrorMessage}"
|
||
TextColor="{StaticResource ErrorColor}"
|
||
FontSize="13"/>
|
||
</Border>
|
||
|
||
<!-- Verify Admin Button -->
|
||
<Button Text="Verify Admin Access"
|
||
Command="{Binding VerifyAdminCommand}"
|
||
BackgroundColor="{StaticResource PrimaryColor}"
|
||
TextColor="White"
|
||
FontSize="16"
|
||
FontAttributes="Bold"
|
||
CornerRadius="12"
|
||
HeightRequest="54">
|
||
<Button.Shadow>
|
||
<Shadow Brush="{StaticResource PrimaryColor}"
|
||
Offset="0,4"
|
||
Radius="16"
|
||
Opacity="0.35"/>
|
||
</Button.Shadow>
|
||
</Button>
|
||
|
||
</VerticalStackLayout>
|
||
</Border>
|
||
|
||
<!-- Step 2: Device Registration Form (Visible after authentication) -->
|
||
<Border StrokeShape="RoundRectangle 20"
|
||
BackgroundColor="{StaticResource CardBackgroundColor}"
|
||
Padding="24"
|
||
Shadow="{StaticResource CardShadow}"
|
||
IsVisible="{Binding ShowRegistrationForm}">
|
||
|
||
<VerticalStackLayout Spacing="20">
|
||
|
||
<Label Text="Step 2: Register Medical Rep Device"
|
||
FontSize="18"
|
||
FontAttributes="Bold"
|
||
TextColor="{StaticResource PrimaryColor}"/>
|
||
|
||
<!-- Med Rep Username -->
|
||
<VerticalStackLayout Spacing="8">
|
||
<Label TextColor="{StaticResource TextPrimaryColor}">
|
||
<Label.FormattedText>
|
||
<FormattedString>
|
||
<Span Text=" "
|
||
FontFamily="FontAwesome"
|
||
FontSize="14"
|
||
TextColor="{StaticResource PrimaryColor}"/>
|
||
<Span Text="Medical Rep Username"
|
||
FontSize="14"
|
||
FontAttributes="Bold"/>
|
||
</FormattedString>
|
||
</Label.FormattedText>
|
||
</Label>
|
||
|
||
<Border StrokeShape="RoundRectangle 12"
|
||
Stroke="Transparent"
|
||
BackgroundColor="{StaticResource InputBackgroundColor}">
|
||
<Entry Text="{Binding MedRepUsername}"
|
||
Placeholder="e.g. MEDREP001"
|
||
PlaceholderColor="{StaticResource TextSecondaryColor}"
|
||
TextColor="{StaticResource TextPrimaryColor}"
|
||
BackgroundColor="Transparent"
|
||
FontSize="15"
|
||
HeightRequest="52"
|
||
Margin="16,0"/>
|
||
</Border>
|
||
</VerticalStackLayout>
|
||
|
||
<!-- Med Rep Password -->
|
||
<VerticalStackLayout Spacing="8">
|
||
<Label TextColor="{StaticResource TextPrimaryColor}">
|
||
<Label.FormattedText>
|
||
<FormattedString>
|
||
<Span Text=" "
|
||
FontFamily="FontAwesome"
|
||
FontSize="14"
|
||
TextColor="{StaticResource PrimaryColor}"/>
|
||
<Span Text="Medical Rep Password"
|
||
FontSize="14"
|
||
FontAttributes="Bold"/>
|
||
</FormattedString>
|
||
</Label.FormattedText>
|
||
</Label>
|
||
|
||
<Border StrokeShape="RoundRectangle 12"
|
||
Stroke="Transparent"
|
||
BackgroundColor="{StaticResource InputBackgroundColor}">
|
||
<Grid ColumnDefinitions="*,Auto">
|
||
<Entry Grid.Column="0"
|
||
Text="{Binding MedRepPassword}"
|
||
Placeholder="Enter med rep password"
|
||
PlaceholderColor="{StaticResource TextSecondaryColor}"
|
||
TextColor="{StaticResource TextPrimaryColor}"
|
||
IsPassword="{Binding IsMedRepPasswordHidden}"
|
||
BackgroundColor="Transparent"
|
||
FontSize="15"
|
||
HeightRequest="52"
|
||
Margin="16,0"/>
|
||
<ImageButton Grid.Column="1"
|
||
Command="{Binding ToggleMedRepPasswordVisibilityCommand}"
|
||
BackgroundColor="Transparent"
|
||
WidthRequest="52"
|
||
HeightRequest="52"
|
||
Padding="14">
|
||
<ImageButton.Source>
|
||
<FontImageSource FontFamily="FontAwesome"
|
||
Glyph="{Binding MedRepPasswordIcon}"
|
||
Color="{StaticResource TextSecondaryColor}"
|
||
Size="18"/>
|
||
</ImageButton.Source>
|
||
</ImageButton>
|
||
</Grid>
|
||
</Border>
|
||
|
||
<Label Text="ℹ️ This is the password the medical rep will use to login"
|
||
FontSize="12"
|
||
TextColor="{StaticResource TextSecondaryColor}"
|
||
FontAttributes="Italic"/>
|
||
</VerticalStackLayout>
|
||
|
||
<!-- Current Device Info -->
|
||
<Border StrokeShape="RoundRectangle 12"
|
||
BackgroundColor="#E3F2FD"
|
||
Padding="16">
|
||
<VerticalStackLayout Spacing="8">
|
||
<Label Text="📱 Current Device Information"
|
||
FontSize="14"
|
||
FontAttributes="Bold"
|
||
TextColor="{StaticResource TextPrimaryColor}"/>
|
||
|
||
<Grid ColumnDefinitions="100,*"
|
||
RowDefinitions="Auto,Auto,Auto"
|
||
RowSpacing="6">
|
||
<Label Grid.Column="0" Grid.Row="0"
|
||
Text="Device ID:"
|
||
FontSize="12"
|
||
FontAttributes="Bold"
|
||
TextColor="{StaticResource TextSecondaryColor}"
|
||
VerticalOptions="Center"/>
|
||
<Label Grid.Column="1" Grid.Row="0"
|
||
Text="{Binding CurrentDeviceId}"
|
||
FontSize="12"
|
||
FontFamily="Courier"
|
||
TextColor="{StaticResource TextPrimaryColor}"
|
||
LineBreakMode="TailTruncation"
|
||
VerticalOptions="Center"/>
|
||
|
||
<Label Grid.Column="0" Grid.Row="1"
|
||
Text="Model:"
|
||
FontSize="12"
|
||
FontAttributes="Bold"
|
||
TextColor="{StaticResource TextSecondaryColor}"
|
||
VerticalOptions="Center"/>
|
||
<Label Grid.Column="1" Grid.Row="1"
|
||
Text="{Binding CurrentDeviceModel}"
|
||
FontSize="12"
|
||
TextColor="{StaticResource TextPrimaryColor}"
|
||
VerticalOptions="Center"/>
|
||
|
||
<Label Grid.Column="0" Grid.Row="2"
|
||
Text="Platform:"
|
||
FontSize="12"
|
||
FontAttributes="Bold"
|
||
TextColor="{StaticResource TextSecondaryColor}"
|
||
VerticalOptions="Center"/>
|
||
<Label Grid.Column="1" Grid.Row="2"
|
||
Text="{Binding CurrentDevicePlatform}"
|
||
FontSize="12"
|
||
TextColor="{StaticResource TextPrimaryColor}"
|
||
VerticalOptions="Center"/>
|
||
</Grid>
|
||
</VerticalStackLayout>
|
||
</Border>
|
||
|
||
<!-- Registration Error Message -->
|
||
<Border IsVisible="{Binding HasRegistrationError}"
|
||
StrokeShape="RoundRectangle 8"
|
||
BackgroundColor="#FFEBEE"
|
||
Stroke="#FFCDD2"
|
||
Padding="12">
|
||
<Label Text="{Binding RegistrationErrorMessage}"
|
||
TextColor="{StaticResource ErrorColor}"
|
||
FontSize="13"/>
|
||
</Border>
|
||
|
||
<!-- Register Device Button -->
|
||
<Button Text="Register Device"
|
||
Command="{Binding RegisterDeviceCommand}"
|
||
BackgroundColor="{StaticResource SuccessColor}"
|
||
TextColor="White"
|
||
FontSize="16"
|
||
FontAttributes="Bold"
|
||
CornerRadius="12"
|
||
HeightRequest="54">
|
||
<Button.Shadow>
|
||
<Shadow Brush="{StaticResource SuccessColor}"
|
||
Offset="0,4"
|
||
Radius="16"
|
||
Opacity="0.35"/>
|
||
</Button.Shadow>
|
||
</Button>
|
||
|
||
<!-- Loading Indicator -->
|
||
<ActivityIndicator IsRunning="{Binding IsRegistering}"
|
||
IsVisible="{Binding IsRegistering}"
|
||
Color="{StaticResource PrimaryColor}"
|
||
HeightRequest="40"/>
|
||
|
||
</VerticalStackLayout>
|
||
</Border>
|
||
|
||
<!-- Success Message -->
|
||
<Border IsVisible="{Binding ShowSuccessMessage}"
|
||
StrokeShape="RoundRectangle 20"
|
||
BackgroundColor="{StaticResource CardBackgroundColor}"
|
||
Padding="24"
|
||
Shadow="{StaticResource CardShadow}">
|
||
|
||
<VerticalStackLayout Spacing="16">
|
||
|
||
<Border StrokeShape="RoundRectangle 50"
|
||
BackgroundColor="#D4EDDA"
|
||
WidthRequest="100"
|
||
HeightRequest="100"
|
||
HorizontalOptions="Center">
|
||
<Label Text=""
|
||
FontFamily="FontAwesome"
|
||
FontSize="50"
|
||
TextColor="{StaticResource SuccessColor}"
|
||
HorizontalOptions="Center"
|
||
VerticalOptions="Center"/>
|
||
</Border>
|
||
|
||
<Label Text="✅ Device Registered Successfully!"
|
||
FontSize="20"
|
||
FontAttributes="Bold"
|
||
TextColor="{StaticResource SuccessColor}"
|
||
HorizontalOptions="Center"/>
|
||
|
||
<VerticalStackLayout Spacing="6">
|
||
<Label FontSize="14" TextColor="{StaticResource TextSecondaryColor}" HorizontalOptions="Center">
|
||
<Label.FormattedText>
|
||
<FormattedString>
|
||
<Span Text="Username: "/>
|
||
<Span Text="{Binding RegisteredUsername}" FontAttributes="Bold"/>
|
||
</FormattedString>
|
||
</Label.FormattedText>
|
||
</Label>
|
||
<Label FontSize="14" TextColor="{StaticResource TextSecondaryColor}" HorizontalOptions="Center">
|
||
<Label.FormattedText>
|
||
<FormattedString>
|
||
<Span Text="Device: "/>
|
||
<Span Text="{Binding RegisteredDeviceModel}" FontAttributes="Bold"/>
|
||
</FormattedString>
|
||
</Label.FormattedText>
|
||
</Label>
|
||
</VerticalStackLayout>
|
||
|
||
<Button Text="Back to main page"
|
||
Command="{Binding ResetFormCommand}"
|
||
BackgroundColor="{StaticResource PrimaryColor}"
|
||
TextColor="White"
|
||
FontSize="15"
|
||
CornerRadius="12"
|
||
HeightRequest="50"/>
|
||
|
||
</VerticalStackLayout>
|
||
</Border>
|
||
|
||
<!-- Instructions -->
|
||
<Border StrokeShape="RoundRectangle 16"
|
||
BackgroundColor="#FFF3E0"
|
||
Padding="16"
|
||
IsVisible="{Binding ShowAuthenticationForm}">
|
||
<VerticalStackLayout Spacing="8">
|
||
<Label Text="ℹ️ How it works:"
|
||
FontSize="14"
|
||
FontAttributes="Bold"
|
||
TextColor="#F57C00"/>
|
||
<Label FontSize="13" TextColor="#F57C00">
|
||
<Label.FormattedText>
|
||
<FormattedString>
|
||
<Span Text="1. Enter admin username and password to verify access
"/>
|
||
<Span Text="2. Enter med rep username and password
"/>
|
||
<Span Text="3. Current device will be registered
"/>
|
||
<Span Text="4. Med rep can now login on this device"/>
|
||
</FormattedString>
|
||
</Label.FormattedText>
|
||
</Label>
|
||
</VerticalStackLayout>
|
||
</Border>
|
||
|
||
</VerticalStackLayout>
|
||
</ScrollView>
|
||
</ContentPage> |