Project Mom and Pop Login and Mobile Sidebar Front End and Services

HTML5Node.jsAngular.js (1.0)Other
Register
Submit a solution
The challenge is finished.

Challenge Overview

1.     Project Overview

1.1     System Description

The client for this project has decided to build a platform that will support the sale, exchange, and redemption of gift cards between businesses and individuals.  The goal of this platform is to help small businesses expand, using both web and mobile layouts, by giving them a simple way to raise capital and acquire new customers using gift cards.

The client needs to create a high quality platform that is easy-to-use even for business owners that don’t have a lot of technical expertise.  Many business owners are not technologically sophisticated, so creating a platform that is simple to understand and navigate is also a top priority.

The main function of the platform will be to allow business to post virtual gift cards for sale on the platform.  Individual users will be able to browse and buy these gift cards, as well as resell or trade gift cards they own.  Using the mobile layout, users will be able to redeem their gift cards at the business, and the business will be able to process gift card redemption at their point of sale.

This assembly is responsible for implementing login and profile related functionalities of the front end, related angularJS service and integrate the REST APIs, including HTML5 pages, AngularJS Service and AngularJS controllers.

1.2     Competition Task Overview

A complete list of deliverables can be found in the TopCoder Assembly competition Tutorial at:

http://apps.topcoder.com/wiki/display/tc/Assembly+Competition+Tutorials

Note: Please read the whole Application Design Specification first. All the details not mentioned in this specification are provided in that document.

1.2.1     Scope

Scope Reduced - Desktop Profile Page is removed from scope now!

This challenge is responsible for the following parts in the Front End Mobile Class Diagram:

  • app.js

  • MasterCtrl

This challenge is responsible for the following parts in the Front End Desktop Class Diagram:

  • app.js

  • MasterCtrl

  • LoginCtrl

  • RegisterCtrl

  • ForgotPasswordCtrl

  • ProfileCtrl

Implementation details are provided at TCUML class documentations.

Related pages are also in scope.

This challenge is responsible for the following parts in the Front End AngularJS Class Diagram:

  • SecurityService
  • GiftCardOfferService
  • GiftCardService
  • UserService (merge related REST APIs to codebase)
  • LookupService (merge related REST APIs to codebase)
  • BusinessService (merge related REST APIs to codebase)

Fix following issues in gift card and gift card offer APIs and use the Real APIs in this challenge:

  • Add UserService.getUserProfiles to get users of ids.
  • UserService#create - Allow user to have multiple roles in the system, so it should support to add role to the existing account and user will be notified that this e-mail already exists. The same relates the same social identity to register for the second role.
  • Please make sure the REST APIs follow the API Specification. For any other bugs not in the above list, please fix it in your submission.
  • The Entities Class Diagram just shows the objects structure, they doesn't need to be implemented.

1.2.2    General AngularJS Implementation Guide

The services are AngularJS services, they use $http service to communicate with the back end REST services.
During this assembly, a simple basic app.js may be implemented to run and test the services.

Some services require authorization, they expect a session token set in sessionStorage.sessionToken field, if not, they will call callback with error message.

Below we take the UserService.updateMyUserProfile as example, other services are implemented similarly.

angular.module('services').factory('userService',
    ['$http', '$log',
    function ($http, $log) {
        var service = {};
        service.updateMyUserProfile = function(user, callback) {
            $http({
                // it may be 'GET', 'DELETE' etc for other REST services
                method:'PUT',
                // replace this url for other REST services
                url: config.REST_SERVICE_BASE_URL + '/users/me',
                // request body may be different for other REST services
                data: JSON.stringify(user),
                // authorization header depends on REST service,
                // some needn't it,
                // some needs other authorization header, e.g. the Login
                headers: {
                    'Authorization': 'Bearer' + sessionStorage.sessionToken
                }
            }).success(function(data){
                callback(null, data);
            }).error(function(data, status, headers, config) {
                callback(data);
            });
        }

        ... // other functions

        return service;
}]);

1.2.3    Services Mapping

When implementing an AngularJS service method, see its TCUML method documentation, it provides the corresponding REST service.
Then open the REST_API_Specification.docx, locate the referred REST service. In the "Request Syntax" section, there is HTTP method and URL for the REST service. The "Request Headers" item contains authorization header details. And the Response section contains response details.
For the red methods in TCUML, these indicate new REST services, the details are just in the TCUML method documentation.
Assemblers should follow these REST contract, and follow above sample code to make the REST calls.

1.2.4     Mobile Right Side slidable profile popup

Controller: MasterCtrl

Its AngularJS controller is MasterCtrl. This controller controls its slidable profile page. Its body is rendered using "ng-view".

If sessionStorage.user is present, then it should render slidable profile page according to its role.

When logout is clicked, it triggers the logout function of MasterCtrl.

The pie chart is rendered using NVD3 http://nvd3.org/, this page contains a sample pie chart usage:

http://nvd3.org/examples/pie.html

Below is sample code to render pie chart:

nv.addGraph(function() {

  var chart = nv.models.pieChart()

      .x(function(d) { return d.label })

      .y(function(d) { return d.value })

      .showLabels(true);

    d3.select("#chart svg")

        .datum([

            {

                "label": redeemedPercentage + "% redeemed",

                "value" : redeemedPercentage

            } ,

            {

                "label": "",

                "value" : 100 - redeemedPercentage

            }

        ])

        .transition().duration(350)

        .call(chart);

  return chart;

});

1.2.5     Desktop Header and Footer

Controller: HomeCtrl

Its AngularJS controller is MasterCtrl. This controller controls its header and footer. Its body is rendered using "ng-view".

If sessionStorage.user is present, then it should render "My Profile" and "Logout" in the header; otherwise it render "Login" in the header.

When logout is clicked, it triggers the logout function of MasterCtrl. When search is clicked, it triggers the search function of MasterCtrl.

1.2.6     Desktop Login

Controller: LoginCtrl

This page handles user login. Users may login via credential or social network.

When login button is clicked, it calls the login function of the controller.

When social login is used, the page will follow social network OAuth flow (Facebook, Twitter, or LinkedIn) to obtain access token, then call the loginWithSocialNetwork function of the controller.

The OAuth callback page is defined below. After the callback gets the access token, it will store it in localStorage, then redirect to this login page, this login page will then get the access token and pass it to back end. And the access token in localStorage should be cleared.

Refer to ADS 1.3.10 for more details.

1.2.7     Desktop Register

Controller: RegisterCtrl

This page handles user registration. User registration may be via this web app or social network.

When register via this web app, it calls register function of the controller.

When register via social network, the page will follow social network OAuth flow (Facebook, Twitter, or LinkedIn) to obtain access token, then bind them to $scope.data.linkedSocialNetwork, linkedSocialNetworkUserId, linkedSocialNetworkAccessToken, then calls the register function.

The OAuth callback page is defined below. After the callback gets the access token, it will store it in localStorage, then redirect to this login page, this login page will then get the access token and pass it to back end. And the access token in localStorage should be cleared.

When clicking "Register" button, the "password" input value must be checked against "confirm password" input value, if they don't match, error message should be shown.

For founder user, this page should add a file input to upload business photo.

Refer to ADS 1.3.10 for more details.

1.2.8     oauthCallback

This is callback page for OAuth callback to accept access token, for Twitter social login/registration.

It accepts "type", "oauth_token", "oauth_token_secret" and "oauth_callback_confirmed" query parameters, "type" parameter value may be "login" or "register".

The page should do the following processing:

var accessToken = {

        token: value of query parameter oauth_token,

        tokenSecret: value of query parameter oauth_token_secret

    };

localStorage.accessToken = accessToken;

if (query parameter "type" value is "login") {

    Redirect to login page;

}

if (query parameter "type" value is "register") {

    Redirect to register page;

}

1.2.9     Desktop Forget Password

Controller: ForgotPasswordCtrl

This page recovers forgotten password. When recover password button is clicked, it will trigger the recoverPassword function of the controller.

Back end will send an email to user, the email contains a link pointing to below page to let user enter new password.

1.2.10     Desktop Reset Forgotten Password

It accepts a token query parameter.

It allows user to enter new password.

When user clicks "submit", it will call SecurityService.resetForgottenPassword(token, newPassword, …) to reset the password.

If successful, it will redirect user to the login page.

The processing is simple, the corresponding controller is left to assemblers.

1.2.11     Bug Fix

Desktop UI:

Business Owner Register -> change "Upload Profile Photo" to "Upload Logo"

Forgot Password -> After someone hits "Submit" have a confirmation modal.

Business Owner My Info -> "Business Type" should be a dropdown; Move Tax ID/SSN below Date of Birth

Champion My Info:

  • Add SSN below Date of Birth
  • Add this text "Payment info is only necessary if you intend to resell your Founder$hares." above the label "Account Payment Information" 
  • Remove all fields below routing number (Registered Business Section)

All pages: button text is fuzzy

1.2.12     Testing

The submission should provide one path for desktop and another path for mobile.

Please provide at least one account for each role. (Champion, Business Owner, Platform Employee)

1.3     Technology overview

1.4     Existing Documents

  • Class Diagrams
  • Sequence Diagrams
  • Application Design Specification
  • Assembly Specification


Final Submission Guidelines

  • Source code and configuration files.
  • Deployment guide to configure and verify the application

Review style

Final Review

Community Review Board

Approval

User Sign-Off

Challenge links

ID: 30049198