Project Overview

TopCoder is implementing a Web-based Arena by using Web Socket protocol, AngularJS Framework (http://angularjs.org, http://docs.angularjs.org/guide) and Bootstrap 3 (http://getbootstrap.com/getting-started).

The frontend application is using AngularJS Framework (http://angularjs.org, http://docs.angularjs.org/guide) and Bootstrap 3 (http://getbootstrap.com/getting-started), and using web socket protocol to exchange data with backend web socket listener.

The backend web socket listner is ready for exchanging messages over web socket protocol.

Competition Task Overview

Previously, we have run !!!FAST 72HOURS!!! TC Arena HTML5 - Phase 1 to build the Login and Logout screens, the prototype can be found at cloudspokes/arena-web

and the Module Assembly - TCC Web Socket - SSO Login which implement the SSO Login messages and provide a demo for SSO login (the code is already checked in and the demo will be provided in  forum for reference).

This contest is going to implement Login and Logout functionality from end to end.

Auth0 and Angular

For social login, we are using auth0 in our various internal system. the web arena is also expected to use that.

since the frontend is implemented by AngularJS Framework, you can reference https://github.com/auth0/auth0-angular to how to integrate them.

For the login screen,  we are using  a customized look and feel, you can learn from https://github.com/auth0/auth0-angular/tree/master/examples/custom-login

Reference

You can see the new community site (www.topcoder.com), the legacy one (www.topcoder.com/tc, social login link in the top right corner).

The following auth0 configuration is used in VM environment.

#The Auth0 related setting for the social accounts sign-in purpose.
client_id_auth0 = CMaBuwSnY0Vu68PLrWatvvu3iIiGPh7t
client_secret_auth0 = ZEEIRf_aLhvbYymAMTFefoEJ_8y7ELrUaboMTmE5fQoJXEo7sxxyg8IW6gtbyKuT
redirect_url_auth0 = /reg2/callback.action
domain_auth0 = sma.auth0.com
reg_server_name= tc.cloud.topcoder.com
bind_callback_url_auth0 = /tc?module=AddSocialLogin

the com.topcoder.reg.actions.CallbackAction in TopCoder reg2 (www.topcoder.com/reg2) is used to handle the callback from auth0, and deal with the sso cookie setup and page redirection.

Login

For the login process, we'd like to leverage auth0 at all, including standard handle/password login and social login.

That is say, all the login process will go through auth0, and the callback will set the tcsso cookie (the VM will use tcsso_vm which is configured in TC.properties file).

So you are expected to implement the following case.

When visiting the login screen,

1. if the sso cookie is not present, show the login screen, and user can login with auth0 to set the sso cookie

2. if the sso cookie is present, the page will directly try to login by sending SSO Login request, if success, redirect to the active contest screen.

Logout

If logout link is clicked, it will do

1. send logout request to web socket listener

2. once the request is proceed (get logout resposne), the client will remove the sso cookie and return back to the login screen.

Where to setup the Arena Web

A CentOS VM with root access will be assigned to each competitor, so they can setup environment to hosts the web arena, and properly test.

Another Arena VM will be allocated to provide the auth0 callback services and web socket listener.

Winner Responsibility

Winner will be responsible to create pull request in final fix phase, and help with the merge.

About Code Base

For the code under /home/apps/dev directory, some are hosted in internal svn repositories, some are hosted in private repositories in github.

You can check Source Code Management For TopCoder Competition Engine - TopCoder Wiki

For SVN Access, please send request to support@topcoder.com, For github access, please post your github account in forum to ask PM to grant you access.

Arena VM

Before asking your own VM, you need to have a public key on your profile before asking for the VM.

You can find more details on how to generate a key http://apps.topcoder.com/wiki/display/projects/Generate+SSH+Key and how to connect using it http://apps.topcoder.com/wiki/display/projects/Connect+Using+SSH+Key.

To use the Arena VM, please follow http://apps.topcoder.com/wiki/display/docs/Competition+Engine+VM+Setup

Currently, we moved several main projects to github, please check http://apps.topcoder.com/wiki/display/~fireice/Source+Code+Management+For+TopCoder+Competition+Engine

If you want to have local access to github, please create your own github account, and ask access in forum.

Specific HTML/CSS/JavaScript Requirements:
HTML/CSS Requirements:
- Your HTML code must be valid HTML5 and follow best practices
- Validate your code - reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to layout your page. Only use table tags for tables of data/information and not for page layout.
- No inline CSS styles - all styles must be placed in an external style-sheet.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.

JavaScript Requirements:
- jQuery
- AngularJS
- All custom javascript (written by the competitors) must pass jslint checks

Browsers Requirements:
- IE10
- IE11
- Latest Safari
- Latest Firefox
- Latest Chrome