Building a dialog wrapper service to prompt the user

If you recall from Chapter 1, Get Into Shape with @NgModule, recording is a feature that should only be available to authenticated users. Therefore, we will want to prompt the user with a login dialog when they tap the Record button on each track. If they are already logged in, we will want to prompt them to confirm if they want to re-record the track for good usability.

We could handle this dialog directly in the Component by importing a NativeScript dialog service that provides a consistent API across both platforms. The ui/dialogs module from the NativeScript framework (https://docs.nativescript.org/ui/dialogs) is a very convenient service, allowing you to create native alerts, confirms, prompts, actions, and basic login dialogs. However, we may want to provide custom native dialog implementations on both iOS and Android down the road for an even nicer UX experience. There are several plugins that provide very elegant native dialogs, for example, https://github.com/NathanWalker/nativescript-fancyalert.

To prepare for this enriched user experience, let's build a quick Angular service that we can inject and use everywhere, which will allow us to easily implement these niceties down the road.

Since this should be considered a core service to our app, let's create app/modules/core/services/dialog.service.ts:

// angular
import { Injectable } from '@angular/core';

// nativescript
import * as dialogs from 'ui/dialogs';

@Injectable()
export class DialogService {
 
  public alert(msg: string) {
    return dialogs.alert(msg);
  }

  public confirm(msg: string) {
    return dialogs.confirm(msg);
  }

  public prompt(msg: string, defaultText?: string) {
    return dialogs.prompt(msg, defaultText);
  }

  public login(msg: string, userName?: string, password?: string) {
    return dialogs.login(msg, userName, password);
  }

  public action(msg: string, cancelButtonText?: string, 
    actions?: string[]) {
    return dialogs.action(msg, cancelButtonText, actions);
  }
}

At first glance, this may appear incredibly wasteful! Why create a wrapper that provides the exact same API as a service that already exists from the NativeScript framework?

Yes, indeed, at this stage, it appears that way. However, we are preparing for greatness in flexibility and power with how we will handle these dialogs in the future. Stay tuned for a potential bonus chapter of material covering this fun and unique polish to the integration.

The last thing we need to do before we move on to use this service is to ensure it is added to our core service PROVIDERS collection. This will make sure Angular's DI system knows our new service is a valid token available for injection.

Open app/modules/core/services/index.ts and modify as follows:

import { AuthService } from './auth.service';
import { DatabaseService } from './database.service';
import { DialogService } from './dialog.service';
import { LogService } from './log.service';

export const PROVIDERS: any[] = [
 AuthService,
 DatabaseService,
 DialogService,
 LogService
];

export * from './auth.service';
export * from './database.service';
export * from './dialog.service';
export * from './log.service';

We are now ready to inject and use our new service.