DEV Community

Cover image for Create and Validate a Login Form in .NET MAUI
Syncfusion, Inc. profile image Jollen Moyani
Jollen Moyani for Syncfusion, Inc.

Posted on • Originally published at syncfusion.com on

Create and Validate a Login Form in .NET MAUI

#netmaui #mobile #ui

A login form allows users to enter their credentials, such as an email address and password, to authenticate and gain access to a website or application.

The .NET MAUI DataForm can be used to create various data forms. In this blog, I will explain how to develop and validate a login data form using the .NET MAUI DataForm.

Initialize the data from the control

  1. Create a new .NET MAUI application in Visual Studio.
  2. Syncfusion .NET MAUI components are available at nuget.org. To add the SfDataForm to your project, open the NuGet package manager in Visual Studio, search for Syncfusion.Maui.DataForm, and then install it.
  3. To initialize the control, import the control namespace Syncfusion.Maui.DataForm in XAML or C# code and initialize the DataForm.

Refer to the following code to initialize the .NET MAUI DataForm.

MainPage.xaml

xmlns:dataForm="clr-namespace:Syncfusion.Maui.DataForm;assembly=Syncfusion.Maui.DataForm"
<dataForm:SfDataForm x:Name="loginForm"/>
Enter fullscreen mode Exit fullscreen mode

Register the ConfigureSyncfusionCore handler for Syncfusion core in the MauiProgram.cs file.

MauiProgram.cs

using Syncfusion.Maui.Core.Hosting;
public static class MauiProgram
{
   public static MauiApp CreateMauiApp()
   {
      var builder = MauiApp.CreateBuilder();
      builder.ConfigureSyncfusionCore();
      builder.ConfigureSyncfusionCore();
   }
}
Enter fullscreen mode Exit fullscreen mode

Create login data from the model

Create a login form with the following fields to get email addresses and passwords.

LoginFormModel.cs

public class LoginFormModel
{
    [Display(Prompt = "example@mail.com", Name = "Email")]
    public string Email{ get; set; }

    [Display(Name = "Password")]
    [DataType(DataType.Password)]
    public string Password { get; set; }
}
Enter fullscreen mode Exit fullscreen mode

Create login form editors

By default, the data form auto-generates the data editors based on primitive data types such as string , enumeration , DateTime , and TimeSpan in the DataObject property.

You can change the editor layout default (label and editor) and floating label layout using the LayoutType property.

Refer to the following code example. In it, we set the data form model ( LoginFormModel ) to the DataObject property from the view model class to create the data editors for the login form with a floating label layout.

Please refer to the code to bind the LoginFormModel property from the DataFormViewModel class.

MainPage.xaml

...
<ContentPage.BindingContext>
 <local:DataFormViewModel/>
</ContentPage.BindingContext>
<dataForm:SfDataForm x:Name="loginForm" DataObject="{Binding LoginFormModel}" LayoutType="TextInputLayout" />
Enter fullscreen mode Exit fullscreen mode

Refer to the code to initialize the LoginFormModel property.

DataFormViewModel.cs

public class DataFormViewModel
{
    /// <summary>
    /// Initializes a new instance of the <see cref="DataFormViewModel" /> class.
    /// </summary>
    public DataFormViewModel()
    {
       this.LoginFormModel = new LoginFormModel();
    }

    /// <summary>
    /// Gets or sets the login form model.
    /// </summary>
    public LoginFormModel LoginFormModel { get; set; }
}
Enter fullscreen mode Exit fullscreen mode

Design the login form page

Let’s design the login page with images, buttons, checkboxes, and labels.

Refer to the following code to add an image to the login form.

MainPage.xaml

<Border Grid.ColumnSpan="{OnIdiom Default=2, Desktop=1}" Stroke="Transparent" Background="{OnIdiom Phone=#83E9EE,Desktop=Transparent}" Grid.RowSpan="{OnIdiom Default=1, Desktop=2}">
 <Border.StrokeShape>
  <RoundRectangle CornerRadius="0,0,100,100"/>
 </Border.StrokeShape>
 <Image Source="login.png" Grid.Row="0" Grid.Column="0" HorizontalOptions="Center" Aspect="AspectFit"/>
</Border>
Enter fullscreen mode Exit fullscreen mode

Next, add the Remember Me checkbox and Forgot password label in the login form.

MainPage.xaml

<Grid ColumnDefinitions="0.5*,0.5*" Grid.Row="2" Padding="12,0,0,0" VerticalOptions="Start">
 <HorizontalStackLayout VerticalOptions="Center" Padding="10,0,0,0" >
  <CheckBox Color="{StaticResource Primary}"/>
  <Label Text="Remember me" FontSize="12" VerticalOptions="Center" />
 </HorizontalStackLayout>
 <Label Text="Forgot password?" Grid.Column="1" TextColor="{StaticResource Primary}" HorizontalTextAlignment="Center" Padding="10,0,0,0" FontSize="12" VerticalOptions="Center" />
</Grid>
Enter fullscreen mode Exit fullscreen mode

Then, add the LOGIN button in the login form.

MainPage.xaml

<Button Text="LOGIN" x:Name="loginButton" HeightRequest="40" VerticalOptions="End"
        HorizontalOptions="Fill" Margin="20,0,20,0" CornerRadius="10"
        Padding="0" FontAttributes="Bold"
        Grid.Row="3" Background="{StaticResource Primary}"/>
Enter fullscreen mode Exit fullscreen mode

Next, refer to the following code to add the Don’t have an account? Sign Up label in the login form. You can refer to this blog for how to create a signup form.

MainPage.xaml

<Label Grid.Row="4" Padding="0,12,0,0" HorizontalOptions="Center" HorizontalTextAlignment="Center" FontSize="14"> 
 <Label.FormattedText>
  <FormattedString>
    <Span Text="Don't have an account? " />
    <Span Text="Sign Up" TextDecorations="Underline" TextColor="{StaticResource Primary}"/>
  </FormattedString>
 </Label.FormattedText>
</Label>
Enter fullscreen mode Exit fullscreen mode

.NET MAUI login form on the desktop

.NET MAUI login form on the desktop

.NET MAUI login form on the phone

.NET MAUI login form on the phone

Change the keyboard for the email editor

Use the email field keyboard by updating the keyboard property in the GenerateDataFormItem event.

Refer to the following code to change the keyboard for the email editor.

MainPage.xaml

<ContentPage.Behaviors>
 <local:LoginFormBehavior/>
</ContentPage.Behaviors>
Enter fullscreen mode Exit fullscreen mode

LoginFormBehavior.cs

this.dataForm = bindable.FindByName<SfDataForm>("loginForm");

this.dataForm.GenerateDataFormItem += this.OnGenerateDataFormItem;
private void OnGenerateDataFormItem(object sender, GenerateDataFormItemEventArgs e)
{
    if (e.DataFormItem != null && e.DataFormItem.FieldName == nameof(LoginFormModel.Email) && e.DataFormItem is DataFormTextEditorItem textItem)
    {
       textItem.Keyboard = Keyboard.Email;
    }
}
Enter fullscreen mode Exit fullscreen mode

Email keyboard for the email editor

Email keyboard for the email editor

Validate the login form

The email address and password fields must not be empty. If either field is left blank or has invalid data, an error message will be displayed, and the user cannot submit the form.

Please refer to the code to add EmailAddress and Required validation attributes.

LoginFormModel.cs

public class LoginFormModel
{
   [Display(Prompt = "example@mail.com", Name = "Email")]
   [EmailAddress(ErrorMessage = "Enter your email - example@mail.com")]
   public string Email { get; set; }

   [Display(Name = "Password")]
   [DataType(DataType.Password)]
   [Required(ErrorMessage = "Enter the password")]
   public string Password { get; set; }
}
Enter fullscreen mode Exit fullscreen mode

The data form supports validating the data by using the ValidationMode property.

Refer to the following code to set the validation mode to PropertyChanged; the value will be validated immediately when changed.

MainPage.xaml

<dataForm:SfDataForm x:Name="loginForm" LayoutType="TextInputLayout" Grid.Row="1" DataObject="{Binding LoginFormModel}" ValidationMode="PropertyChanged" >
 <ContentPage.Behaviors>
  <local:LoginFormBehavior/>
 </ContentPage.Behaviors>
Enter fullscreen mode Exit fullscreen mode

Validate the login form on data being changed on the desktop

Validate the login form on data being changed on the desktop

Validate the login form on data being changed on the phone

Validate the login form on data being changed in the phone

Login form validation can be handled while submitting the login button using the Validate method.

LoginFormBehavior.cs

private async void OnLoginButtonCliked(object sender, EventArgs e)
{
   if(this.dataForm != null && App.Current?.MainPage != null)
   {
     if(this.dataForm.Validate())
     {
        await App.Current.MainPage.DisplayAlert("", "Signed in successfully", "OK");
     }
     else
     {
        await App.Current.MainPage.DisplayAlert("", "Please enter the required details", "OK");
     }
   }
}
Enter fullscreen mode Exit fullscreen mode

Validate the login form on the LOGIN button being clicked on the desktop

Validate the login form on the LOGIN button being clicked on the desktop

Validate the login form on the LOGIN button being clicked on the phone

Validate the login form on the LOGIN button being clicked on the phone

GitHub reference

Refer to the GitHub demo on this topic.

Conclusion

Thanks for reading. This blog demonstrated how to create and validate a login form using the .NET MAUI DataForm control. Try out the steps in this blog and leave your feedback in the comments section below.

For current Syncfusion customers, the newest version of Essential Studio is available from the license and downloads page. If you are not a customer, try our 30-day free trial to check out these new features. If you have questions, contact us through our support forums, feedback portal, or support portal. We are always happy to assist you!

Related Blogs

Top comments (0)

Read next

theplebdev profile image

Quick and easy custom Jetpack compose checkbox

Tristan Elliott -

rubanraghavendar profile image

Flutter - Responsive Spacing

Ruban Raghavendar K -

mukhilpadmanabhan profile image

Power of Web Components: The Future of Reusable UI Design for Beginners

Mukhil Padmanabhan -

robruf profile image

Does Flutter/React Native/Kotlin/Swift just handle the front-end side of an app?

Roberto Rufino -