Login Window Xamarin.Forms UWP App With Blocking Feature If Incorrect Login

Introduction

In this article, we are going to create the login window application that will take UserId and Password as its credentials and prompt success if correct credentials are passed.

If the user clicks on the Login button three times with incorrect credentials, then it will block the UI for 30 seconds.

Note

This application will store the time in Windows.storage and if the application is closed and restarted, then it will start its delay from where it is ending.

Eg -

Suppose after 3 incorrect login attempts, if the user is requested to wait for 30 seconds and in the meantime, the user has closed the application after 5 seconds and restarted the application, then it will start from the remaining time and let the user wait for the specific remaining time.

Implementation

Open Visual Studio and select "New Project...".

Select "CrossPlatform App (Xamarin)".

Select Shared Project/PCL.

Set the minimum version and target version as given.

From the configuration window, check on the Build and Deploy for UWP.

Now, on the Shared project / PCL (LoginDemoXamarinForm ), add the Xamarin.Forms content page (eg: Page1.xaml).

Added the source code only for LoginDemoXamarinForm.

The directory structure will be as follows.

Open Page1.xaml and modify the content as below.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="LoginDemoXamarinForm.Page1">

        <ContentPage.Content>
            <StackLayout Spacing="10" VerticalOptions="CenterAndExpand" BackgroundColor="BlanchedAlmond">
                <Entry x:Name="userId" Placeholder="UserId" Text=""></Entry>
                <Entry IsPassword="True" x:Name="password" Placeholder="Password" Text=""></Entry>
                <Button x:Name="loginBtn" Text="Login"></Button>
                <Label x:Name="message" Text=""></Label>
            </StackLayout>
        </ContentPage.Content>

</ContentPage>

Open Page1.xaml.cs and modify the content as below.

using System;
using System.Threading.Tasks;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace LoginDemoXamarinForm
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class Page1 : ContentPage
    {
        private int maxCount;
        int counter;
        public Page1()
        {
            InitializeComponent();

            // check the retry time on starting
            var seconds = TimeSpan.FromSeconds(0);
            Device.StartTimer(seconds, () => {
                WaitOnStart();
                return false;
            });

            counter = 0;
            userId.Focused += (e,a) => {
                message.Text = "";
            };
            password.Focused += (e, a) => {
                message.Text = "";
            };
            loginBtn.Clicked += (e, args) =>
            {
                {
                    if (userId.Text.Equals("") || password.Text.Equals(""))
                    {
                        message.Text = "Fill the required fields";
                        return;
                    }
                    if (userId.Text.Trim().Equals("Irshad") && password.Text.Trim().Equals("Irshad"))
                    {
                        counter = 0;
                        message.Text = "";
                        DisplayAlert("Login", "Success", "Ok");
                    }
                    else
                    {
                        message.Text = "Incorrect Credentials!";
                        counter++;
                        if (counter == 3)
                        {
                            WaitTime(30);
                            counter = 0;
                        }
                    }
                };
            };
        }

        protected async void WaitTime(int wt)
        {
            Windows.Storage.ApplicationDataContainer localSetting = Windows.Storage.ApplicationData.Current.LocalSettings;
            localSetting.Values["timeDelay"] = DateTime.Now.AddSeconds(wt).ToString();
            loginBtn.IsEnabled = false;
            userId.IsEnabled = false;
            password.IsEnabled = false;
            maxCount = wt;
            while (maxCount > 0)
            {
                await Task.Delay(1000);
                message.Text = string.Format("Retry after {0} seconds!!", maxCount--);
                if (maxCount == 0)
                {
                    message.Text = "";
                    loginBtn.IsEnabled = true;
                    userId.IsEnabled = true;
                    password.IsEnabled = true;
                }
            }

        }
        public void WaitOnStart()
        {
            Windows.Storage.ApplicationDataContainer localSetting = Windows.Storage.ApplicationData.Current.LocalSettings;
            if (localSetting.Values["timeDelay"] != null)
            {
                DateTime dt = Convert.ToDateTime(localSetting.Values["timeDelay"].ToString());
                if (dt > DateTime.Now)
                {
                    userId.IsEnabled = false;
                    password.IsEnabled = false;
                    loginBtn.IsEnabled = false;
                    TimeSpan result = dt.Subtract(DateTime.Now);
                    maxCount = Convert.ToInt16(result.TotalSeconds);
                    WaitTime(maxCount);
                }
            }
        }
    }
}

Open App.xaml.cs of LoginDemoXamarinForm project and modify the below content.

Just set the MainPage to the added page name Page1.

Execute the application.

If you click Login button three times with incorrect credentials, then it will block the UI and make you wait for 30 seconds.

When you provide the correct credentials, then the below alert message will appear.

Important points

1. Use of WaitOnStart()
   This method is used on the starting of the application. This will check the required delay time for the user input. If there is any delay time available apart from the required 30 seconds then it will, first of all, let you wait for the remaining time. It will fetch the time from the Windows.Storage.ApplicationDataContainer.

2. Use of WaitTime(int wt)
   This method is responsible to enable/disable the controls of UI on the basis of the incorrect credentials provided and also it sets the value for Windows.Storage.ApplicationDataContainer for the remaining time.

3. For better understanding follow the below steps,
   
   
   1. Run the application.
   2. Provide wrong credentials.
   3. Click three times login button to Disable the functionality.
   4. Close the application after some seconds (5 or 6).
   5. Again run the application.
   6. You will see the message “Retry after n seconds”. Where n is the remaining value of the delay time.