login_page.js

// ==========================================================================
// Project:   Admin - loginPage
// Copyright: ©2011 My Company, Inc.
// ==========================================================================
/*globals Admin */

// This page describes the main user interface for your application.  
Admin.loginPage = SC.Page.design({

  mainPane: SC.MainPane.design({
    defaultResponder: 'Admin.statechart',
    layout: {centerX: 0, centerY: 0, width: 500, height: 300},

    childViews: 'loginPanel'.w(),

    loginPanel: SC.View.design({
      childViews: 'formHeaderLabel emailInput passwordInput loginButton'.w(),

      formHeaderLabel: SC.LabelView.design({
        layout: { top: 0, left: 0, right: 0, height: 36 },
        textAlign: SC.ALIGN_CENTER,
        value: "You must login to access the application."
      }),

      emailInput: SC.TextFieldView.design({
        layout: { top: 50, height: 50, width: '75%', centerX: '50%' },
        hint: 'Email'
      }),

      passwordInput: SC.TextFieldView.design({
        layout: { top: 100, height: 50, width: '75%', centerX: '50%' },
        hint: 'Password',
        isPassword: YES
      }),

      loginButton: SC.ButtonView.design({
        layout: { top: 150, height: 50, width: '75%', centerX: '50%' },
        title: 'Login'
      })
    })
  })
});