Skip to content

KTLoginViewController

Chris Beauchamp edited this page Mar 20, 2013 · 23 revisions

This class is specific to Kii Cloud and provides a full user management interface with only two lines of code. By initializing and presenting the KTLoginViewController, you get user authentication, user registration and 'forgot password' functionality out-of-the-box. As with all KiiToolkit classes, this can be fully customizable to match the look and feel of your application. Don't worry about building and re-building these functions yourself again!

Use the quick start guide to get the view controller in your app in a few short steps - or check out the other sections if you'd like to learn more and start to customize!

As always, you can find full documentation and edit the source within the KiiToolkit repository.

Working with KTLoginViewController


Screenshots

These are the default views for the functionality provided, to give you an idea of what this class does. Remember - all views can be fully customized to match your app!

[![Login View](images/KTLoginViewController/login.thumb.png "Login View")](images/KTLoginViewController/login.png) [![Registration View](images/KTLoginViewController/register.thumb.png "Registration View")](images/KTLoginViewController/register.png) [![Forgot Password View](images/KTLoginViewController/forgot_password.thumb.png "Forgot Password View")](images/KTLoginViewController/forgot_password.png)

Quick Start

Get the KTLoginViewController implemented in a few short minutes using the steps below:

1. Get Started with Kii Cloud (Skip this section if you already have KiiSDK in your application)

Simply follow the instructions found here to:

  • Register for Kii Cloud (don't worry, it's FREE!)
  • Create an app in the developer portal
  • Download the Kii Cloud SDK
  • Import the SDK into your application

2. Add KiiToolkit (Skip this section if you already have the latest version of KiiToolkit in your application)

Follow the steps here to import the KiiToolkit and its dependencies into your app

3. Add the KTLoginViewController Code

Enter the following code where you'd like to show the modal login view in your project:

KTLoginViewController *vc = [[KTLoginViewController alloc] init];
[self presentViewController:vc animated:TRUE completion:nil];

Which may end up looking something like:

- (void) myShowLoginViewAction:(id)sender
{
    // do some stuff here
    ....
    
    /* ADD THIS CODE */
    KTLoginViewController *vc = [[KTLoginViewController alloc] init];
    [self presentViewController:vc animated:TRUE completion:nil];
    /* END ADD CODE */
    
    // and some other stuff here
    ....
}
**That's it! The library will take care of the rest**

Next Steps

A good way to get the authenticated user (once the user is done logging in) is from your view controller which calls the presentViewController - in its viewDidAppear: method. Something like:

- (void) viewDidAppear:(BOOL)animated {
    ....
    KiiUser *user = [KiiUser currentUser];
    ....
}

Final note: The default views are Kii-branded. Read the sections for each individual view on this page to learn how to customize to match your app, or check out the full documentation within the repository.

View Customization

The KTLoginViewController and its associated views (KTRegistrationViewController and KTForgotPasswordViewController) can be fully customized to fit the feel of your application.

Other than being totally open-source, you can access all UI elements via properties of the view controller classes for easy manipulation.

We'll show a few examples below, but check out the full documentation (in the Documentation/html directory of the repository) to find all the elements that can be customized.

Customize the login view

You can customize the login view by accessing its properties directly once instantiated. Here is an example of some minor customizations.

// Create your instance
KTLoginViewController *loginView = [[KTLoginViewController alloc] init];

/* START CUSTOMIZATION */

// modify the title image (defaults to Kii logo)
loginView.titleImage.image = [UIImage imageNamed:@"my_image"];

// remove the background image (defaults to radial gradient)
[loginView.backgroundImage removeFromSuperview];

// finally, set the background to black
loginView.view.backgroundColor = [UIColor blackColor];

/* END CUSTOMIZATION */

// show the view
[self presentViewController:loginView animated:TRUE completion:nil];

Customize the registration view

You can also customize the registration view by accessing its properties. This includes the ability to choose which text fields are displayed using a simple method as shown below. To modify the registration view, you must first access the object - which is easy because it's simply a property of the login view:

// Create your login view instance
KTLoginViewController *loginView = [[KTLoginViewController alloc] init];

// get the registration view property
KTRegistrationViewController *registrationView = loginView.registrationView;

/* START CUSTOMIZATION */

// modify the title image (defaults to Kii logo)
registrationView.titleImage.image = [UIImage imageNamed:@"my_image"];

// remove the background image (defaults to radial gradient)
[registrationView.backgroundImage removeFromSuperview];

// also set the background to black
registrationView.view.backgroundColor = [UIColor blackColor];

// now we want to define which fields are shown to the user.
// in this case, ask for email address, phone number and username.
// see the documentation for the type KTRegistrationFields for all possibilities
NSUInteger options = KTRegistrationFieldEmailAddress | KTRegistrationFieldPhoneNumber | KTRegistrationFieldLoginName;
registrationView.displayFields = options;

/* END CUSTOMIZATION */

// show the view
[self presentViewController:loginView animated:TRUE completion:nil];

Customize the forgot password view

Similar to the registration view, you must first access the view via a property in the login view. Again, you can customize the view through its properties:

// Create your login view instance
KTLoginViewController *loginView = [[KTLoginViewController alloc] init];

// get the forgot password view
KTForgotPasswordViewController *forgotView = loginView.forgotPasswordView;

/* START CUSTOMIZATION */

// modify the title image (defaults to Kii logo)
forgotView.titleImage.image = [UIImage imageNamed:@"my_image"];

// remove the background image (defaults to radial gradient)
[forgotView.backgroundImage removeFromSuperview];

// also set the background to black
forgotView.view.backgroundColor = [UIColor blackColor];

/* END CUSTOMIZATION */

// show the view
[self presentViewController:loginView animated:TRUE completion:nil];