Login flow with shell

Question

Login flow with shell

Eduardo Gomez 3,651

the issue that I have is the fact that I need to create flyout menu based on roles or at least set Visibility to false.

Forn example this is my flyout.


    <ShellContent
        ContentTemplate="{DataTemplate view:LoginPage}"
        Route="LoginPage"
        Shell.FlyoutBehavior="Disabled"
        Shell.FlyoutItemIsVisible="False" />

    <FlyoutItem Title="Home">
        <ShellContent
            ContentTemplate="{DataTemplate view:HomePage}"
            Route="HomePage" />
    </FlyoutItem>


    <FlyoutItem Title="New lecture">
        <ShellContent
            ContentTemplate="{DataTemplate view:NewLecturePage}"
            Route="NewLecturePage" />
    </FlyoutItem>

    <FlyoutItem Title="New test">
        <ShellContent
            ContentTemplate="{DataTemplate view:NewTestPage}"
            Route="NewTestPage" />
    </FlyoutItem>


    <FlyoutItem Title="Schedule lecture">
        <ShellContent
            ContentTemplate="{DataTemplate view:ScheduleLecturePage}"
            Route="ScheduleLecturePage" />
    </FlyoutItem>

    <FlyoutItem Title="Schedule test">
        <ShellContent
            ContentTemplate="{DataTemplate view:ScheduleTestPage}"
            Route="ScheduleLecturePage" />
    </FlyoutItem>

    <FlyoutItem Title="Manage participants">
        <ShellContent
            ContentTemplate="{DataTemplate view:ContactPage}"
            Route="ContactPage" />
    </FlyoutItem>

    <FlyoutItem Title="Manage courses">
        <ShellContent
            ContentTemplate="{DataTemplate view:CoursesPage}"
            Route="CoursesPage" />
    </FlyoutItem>

The admin, only can access "Manage Participant" and "Manage Course"

but the problem that I have is that in order to do that, when I received the object in my ShellViewModel, I need to do a switch case and set Booleans to true or false depending on the case.

I received my object in my shell, when I log in.

  [RelayCommand]
  async Task Login() {

      IsBusy = true;

      //var user = await authenticationService.LoginWithEmailAndPassword(User.Email, User.Password);
      var user = await authenticationService.LoginWithEmailAndPassword("******@admin.com", "111111");
      if (user != null) {

          var currentUser = await dataService.GetByUidAsync<User>("Users", user.Uid);

          if (currentUser != null) {

              appShellViewModel.User = currentUser;
          }

          await appService.NavigateTo($"//{nameof(HomePage)}", true);
      }

      IsBusy = false;
  }

  [RelayCommand]
  async Task Register() {

      var IsFilled = await VerifyUserAsync(User);

      if (IsFilled) {
          IsBusy = true;

          var user = await authenticationService.RegisterWithEmailAndPassword(User.Email, User.Password);
          if (user != null) {

              IsPopOpen = false;
              User.Uid = user.Uid;
              User.Id = User.GenerateRandomNumberString();
              User.Name = User.Name;
              User.Email = User.Email;
              User.Password = BCrypt.Net.BCrypt.HashPassword(User.Password);
              User.Role = User.Role;

              var currentUser = await dataService.GetByUidAsync<User>("Users", user.Uid);

              if (currentUser != null) {

                  appShellViewModel.User = currentUser;
              }

              await appService.NavigateTo($"//{nameof(HomePage)}", true);
          }
      }



      IsBusy = false;
  }

the problem is that I dont know to perform the check.

public partial class AppShellViewModel(IAuthenticationService authenticationService, IAppService appService) : BaseViewModel {

    [ObservableProperty]
    User? user;

    [RelayCommand]
    async Task SignOut() {

        authenticationService.SignOut();

        await appService.NavigateTo($"//{nameof(LoginPage)}", true);

    }
}

if I bind a method to the appeared command (Using the Maui toolkit) I can't because the shell is my entry point

App

https://github.com/eduardoagr/DemyAI

Accepted answer

0 additional answers

Your answer

Answer 1

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Microsoft External Staff

Hello,

After testing, you can refer to the following code snippet to control the FlyoutItem entry based on the user role.

if (currentUser != null) { 
    if(currentUser.Role.Equals("admin")) 
    { 
        foreach(var item in Shell.Current.Items) 
        { 
            if (item.Title != null && item.Title.Contains("Manage")) 
            { 
                item.IsVisible = true; 
            } 
            else 
            { 
                item.IsVisible = false; 
            } 
        } 

        WeakReferenceMessenger.Default.Send(currentUser, "UserLoggedIn"); 
        await appService.NavigateTo($"//{nameof(ContactPage)}", true); 
    } 
    else 
    { 
        foreach (var item in Shell.Current.Items) 
        { 
            if (item.Title != null && item.Title.Contains("Manage")) 

            { 
                item.IsVisible = false; 
            }
            else 
            { 
                item.IsVisible = true; 

            } 
        } 

        WeakReferenceMessenger.Default.Send(currentUser, "UserLoggedIn"); 
        await appService.NavigateTo($"//{nameof(HomePage)}", true); 
    }             
}

Best Regards,

Alec Liu.

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Eduardo Gomez 3,651 Reputation points

2023-12-11T15:35:04.35+00:00

There is no way to do this in the appshell, since I already have a User

Eduardo Gomez 3,651

I did this but is not working, I still see all the options.

    async Task Login() {

        IsBusy = true;

        //var user = await authenticationService.LoginWithEmailAndPassword(User.Email, User.Password);
        var user = await authenticationService.LoginWithEmailAndPassword("******@admin.com", "111111");
        if(user != null) {

            var currentUser = await dataService.GetByUidAsync<User>("Users", user.Uid);

            if(currentUser != null) {

                ManageFlyoutItemsVisibility(currentUser.Role);

                await appService.NavigateTo($"//{nameof(HomePage)}", true);
            }


        }

        IsBusy = false;
    }


    [RelayCommand]
    async Task Register() {

        var IsFilled = await VerifyUserAsync(User);

        if(IsFilled) {
            IsBusy = true;

            var user = await authenticationService.RegisterWithEmailAndPassword(User.Email, User.Password);
            if(user != null) {

                IsPopOpen = false;
                User.Uid = user.Uid;
                User.Id = User.GenerateRandomNumberString();
                User.Name = User.Name;
                User.Email = User.Email;
                User.Password = BCrypt.Net.BCrypt.HashPassword(User.Password);
                User.Role = User.Role;

                await dataService.AddAsync("Users", User);

                await appService.DisplayAlert("Congratulations", "Registration successful", "OK");

                IsPopOpen = false;

                IsBusy = false;
            }
        }
    }

    private async Task<bool> VerifyUserAsync(User user) {

        if(string.IsNullOrEmpty(user.Name)
            && string.IsNullOrEmpty(user.Email)
            && string.IsNullOrEmpty(user.Password)
            && string.IsNullOrEmpty(user.Role)) {

            await appService.DisplayAlert("Error", "Please make sure everything is filed", "OK");
            return false;
        }

        return true;
    }

    private void ManageFlyoutItemsVisibility(string role) {

        switch(role) {
            case nameof(Roles.Admin):
                appShellViewModel.IsAdmin = true;
                break;
            case nameof(Roles.Teacher):
                appShellViewModel.IsTeacher = true;
                break;
            case nameof(Roles.Student):
                appShellViewModel.IsStudent = true;
                break;
            default:
                break;
        }
    }

}

AppShellViewModel

public partial class AppShellViewModel(IAuthenticationService authenticationService, IAppService appService) : BaseViewModel {

    [ObservableProperty]
    User? user;

    [ObservableProperty]
    bool isAdmin;

    [ObservableProperty]
    bool isStudent;

    [ObservableProperty]
    bool isTeacher;

    [RelayCommand]
    async Task SignOut() {

        authenticationService.SignOut();

        await appService.NavigateTo($"//{nameof(LoginPage)}", true);

    }
}

view

  <ShellContent
      ContentTemplate="{DataTemplate view:LoginPage}"
      Route="LoginPage"
      Shell.FlyoutBehavior="Disabled"
      Shell.FlyoutItemIsVisible="False" />

  <FlyoutItem Title="Courses">
      <ShellContent
          ContentTemplate="{DataTemplate view:HomePage}"
          Route="HomePage"
          Shell.FlyoutItemIsVisible="{Binding IsStudent}" />
  </FlyoutItem>


  <FlyoutItem Title="New lecture">
      <ShellContent
          ContentTemplate="{DataTemplate view:NewLecturePage}"
          Route="NewLecturePage"
          Shell.FlyoutItemIsVisible="{Binding IsTeacher}" />
  </FlyoutItem>

  <FlyoutItem Title="New test">
      <ShellContent
          ContentTemplate="{DataTemplate view:NewTestPage}"
          Route="NewTestPage"
          Shell.FlyoutItemIsVisible="{Binding IsTeacher}" />
  </FlyoutItem>


  <FlyoutItem Title="Schedule lecture">
      <ShellContent
          ContentTemplate="{DataTemplate view:ScheduleLecturePage}"
          Route="ScheduleLecturePage"
          Shell.FlyoutItemIsVisible="{Binding IsTeacher}" />
  </FlyoutItem>

  <FlyoutItem Title="Schedule test">
      <ShellContent
          ContentTemplate="{DataTemplate view:ScheduleTestPage}"
          Route="ScheduleLecturePage"
          Shell.FlyoutItemIsVisible="{Binding IsTeacher}" />
  </FlyoutItem>

  <FlyoutItem Title="Manage participants">
      <ShellContent
          ContentTemplate="{DataTemplate view:ContactPage}"
          Route="ContactPage"
          Shell.FlyoutItemIsVisible="{Binding IsAdmin}" />
  </FlyoutItem>

  <FlyoutItem Title="Manage courses">
      <ShellContent
          ContentTemplate="{DataTemplate view:CoursesPage}"
          Route="CoursesPage"
          Shell.FlyoutItemIsVisible="{Binding IsAdmin}" />
  </FlyoutItem>

I also tried you solution and is says "Cannot find route for //Homepage invalid parameter URI"

is very strange because every page is registered.

public partial class AppShell : Shell {
    public AppShell(AppShellViewModel appShellViewModel, IAppService appService) {
        InitializeComponent();

        BindingContext = appShellViewModel;
        RegisterPages();       
    }


    private void RegisterPages() {
        // Get the assembly where this code is executing
        var assembly = GetType().Assembly;

        // Define the namespace where the views are located using a constant or variable
        var viewNamespace = $"{assembly.GetName()}.{Constants.VIEWS}";

        // Dictionary to hold discovered routes, mapping route names to their respective types
        var pageRoutes = new Dictionary<string, Type>();

        // Loop through types in the assembly to find view pages and map them to their routes
        foreach (var item in assembly.GetTypes()) {
            // Check if the type belongs to the specified view namespace and ends with a defined "Page" suffix
            if (item.Namespace == viewNamespace && item.Name.EndsWith(Constants.PAGE)) {
                // Get the route name from the type's name
                var routeName = item.Name;

                // Add the route name and its associated type to the dictionary
                pageRoutes.Add(routeName, item);
            }
        }

        // Register each discovered route in the application's routing system
        foreach (var kvp in pageRoutes) {
            // Register the route using its name and associated type
            Routing.RegisterRoute(kvp.Key, kvp.Value);
        }
    }

look

https://github.com/eduardoagr/DemyAI

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Reputation points Microsoft External Staff

2023-12-12T02:53:32.42+00:00

After testing, the FlyoutItem in the shell will not respond to data changes when it is data binding.

For this issue, it is more recommended that you post it to GitHub to make our development team aware of it.
Eduardo Gomez 3,651 Reputation points

2023-12-12T03:00:12.71+00:00

Is there other alternatives to do this
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Reputation points Microsoft External Staff

2023-12-12T05:43:41.26+00:00

Another possible option is to set the visibility by traversing the items in the Shell after authenticating the user's role, as shown in the answer.
Eduardo Gomez 3,651 Reputation points

2023-12-12T08:36:52.3866667+00:00
Yes, I was able to do that, but there is a tiny problem with that approach.

The problem was that since the Admin we not able, to see the Home, it was breaking.

I was able to fix it but look at this.

<FlyoutItem Title="Courses" IsVisible="{Binding IsAdmin}"> <ShellContent ContentTemplate="{DataTemplate view:HomePage}" Route="HomePage" /> </FlyoutItem>

So, I don't know if this would be the right approach? what do you think.
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Reputation points Microsoft External Staff

2023-12-13T07:04:52.85+00:00
This is because if the ShellItem in MAUI is in an invisible state, that is, if IsVisible is false, jumping to this page will cause the application to crash.

If you need to have the administrator jump to the Home page, you need to set the visibility of the Home page to true in the control conditions above.

if (item.Title != null && (item.Title.Contains("Manage")|| item.Title.Contains("Home"))) { item.IsVisible = true; }

Share via

Login flow with shell

0 additional answers

Your answer