Gathering the User’s Credentials with the Sign-In View

The TwitterSignInView and associated viewmodel provide the UI for gathering the user’s Twitter credentials. The sample, however, does not require the user to sign in to Twitter, because we are merely retrieving the timeline for the user, and this does not require authentication.

A sign-in screen is included to provide the infrastructure to extend the app in the direction of being a fully blown Twitter app. It also provides a nice segue to demonstrate the custom INavigationService, which is discussed later in the chapter.

The TwitterSignInViewModel class contains properties for the user’s Twitter credentials and a property that causes the password to be retained by the app (see Listing 29.5).

The viewmodel relies on the ViewModelBase class for state persistency. The Username, Password, and RememberPassword properties are each decorated with the custom State attribute so that they are persisted to isolated storage. For details on the custom state preservation system, see Chapter 28, “Preserving App State and Settings.”

When executed, the viewmodel’s SignInCommand is responsible for navigating to the TwitterTimeline page and for deregistering state preservation for the Password property if the user has indicated that the app should not remember the password.

The Navigate method and the custom navigation functionality are discussed later in this chapter.

LISTING 29.5. TwitterSignInViewModel Class

Click here to view code image

public class TwitterSignInViewModel : ViewModelBase
{
    public TwitterSignInViewModel()
    {
        signInCommand = new DelegateCommand(
            obj =>
            {
                if (!rememberPassword)
                {
                    DeregisterStatefulProperty(
                            ApplicationStateType.Persistent, () => Password);
                }
                Navigate("/TwitterTimeline/" + username);
            });
    }

    string username;

    [Stateful(ApplicationStateType.Persistent)]
    public string Username
    {
        get
        {
            return username;
        }
        set
        {
            Assign(ref username, value);
        }
    }
    string password;

    [Stateful(ApplicationStateType.Persistent)]
    public string Password
    {
        get
        {
            return password;
        }
        set
        {
            Assign(ref password, value);
        }
    }
    readonly DelegateCommand signInCommand;

    public ICommand SignInCommand
    {
        get
        {
            return signInCommand;
        }
    }

    bool rememberPassword = true;

    [Stateful(ApplicationStateType.Persistent)]
    public bool RememberPassword
    {
        get
        {
            return rememberPassword;
        }
        set
        {
            Assign(ref rememberPassword, value);
        }
    }
}

Within the view’s XAML, an AppBarIconButton is bound to the SignInCommand.

A ToggleSwitch from the Windows Phone Toolkit is used to set the RememberPassword property of the viewmodel. See the following excerpt:

Click here to view code image

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <u:AppBar>
        <u:AppBarIconButton
            Command="{Binding SignInCommand}"
            Text="Sign In"
       IconUri="/Images/ApplicationBarIcons/ApplicationBar.Check.png" />
    </u:AppBar>

    <StackPanel Grid.Row="0" Style="{StaticResource PageTitlePanelStyle}">
        <TextBlock Text="Windows Phone Unleashed"
            Style="{StaticResource PhoneTextAppTitleStyle}" />
        <TextBlock Text="Twitter sign in"
            Style="{StaticResource PhoneTextPageTitleStyle}" />
    </StackPanel>

    <StackPanel x:Name="ContentPanel" Grid.Row="1"
            Margin="{StaticResource PhoneHorizontalMargin}">
        <TextBlock Text="username"
            Style="{StaticResource LabelTextIndentedStyle}" />
        <TextBox Text="{Binding Username, Mode=TwoWay}" />
        <TextBlock Text="password"
            Style="{StaticResource LabelTextIndentedStyle}" />
        <!--<PasswordBox Password="{Binding Password, Mode=TwoWay}" />-->
        <TextBox Text="not required in this example." IsReadOnly="True" />
        <toolkit:ToggleSwitch
            IsChecked="{Binding RememberPassword, Mode=TwoWay}"
                        Header="Remember Password" />
    </StackPanel>

</Grid>

Tapping the application bar button executes the SignInCommand, which causes the app to navigate to the timeline view page (see Figure 29.4).

FIGURE 29.4 Twitter sign-in page.

If the app happens to be tombstoned or exited, the state of the various controls is retained in persistent storage.

Tapping the ApplicationBarIconButton navigates the app to the timeline view page.