the loginPane design

core_statechart.js

        enterState: function() {
          console.log("entering offlineState");
          // present the login dialog box
          var _loginPane = ScaleUI.LoginPane.create();
          _loginPane.append();

        },

login_pane.js

ScaleUI.LoginPane = SC.PanelPane.design({
    layout: { width: 360, height: 125, centerX: 0, centerY: 0 },
    classNames: ['login-pane'],

    childViews: 'boxView'.w(),

    boxView: SC.View.design({
      childViews: 'username password loginButton loadingImage errorMessage'.w(),

      username: SC.View.design({
        layout: { left: 17, right: 14, top: 17, height: 26 },
        childViews: 'label field'.w(),

        label: SC.LabelView.design({
          layout: { left: 0, width: 77, height: 18, centerY: 0 },

          value: '_username',
          localize: YES,
          textAlign: SC.ALIGN_RIGHT
        }),

        field: SC.TextFieldView.design({
          layout: { width: 230, height: 22, right: 3, centerY: 0 },

          isEnabledBinding: SC.Binding.from("ScaleUI.loginController.isLoggingIn")
            .bool()
            .transform(function(value, isForward) {
            return !value;
          }),
          valueBinding: 'ScaleUI.loginController.username',
          didCreateLayer: function() { 
            sc_super(); 
            this.becomeFirstResponder(); 
          } 
        })
      }),

      password: SC.View.design({
        layout: { left: 17, right: 14, top: 45, height: 26 },
        childViews: 'label field'.w(),

        label: SC.LabelView.design({
          layout: { left: 0, width: 77, height: 18, centerY: 0 },

          value: '_password',
          localize: YES,
          textAlign: SC.ALIGN_RIGHT
        }),

        field: SC.TextFieldView.design({
          layout: { width: 230, height: 22, right: 3, centerY: 0 },

          isPassword: YES,
          isEnabledBinding: SC.Binding.from("ScaleUI.loginController.isLoggingIn")
            .bool()
            .transform(function(value, isForward) {
            return !value;
          }),
          valueBinding: 'ScaleUI.loginController.password'
        })
      }),

      loginButton: SC.ButtonView.design({
        layout: { height: 24, width: 80, bottom: 17, right: 17 },
        title: '_login',
        localize: YES,
        isDefault: YES,
        isEnabledBinding: SC.Binding.from("ScaleUI.loginController.isLoggingIn")
          .bool()
          .transform(function(value, isForward) {
          return !value;
        }),

        target: 'ScaleUI.statechart',
        action: 'login'
      }),

      loadingImage: SC.ImageView.design({
        layout: { width: 16, height: 16, bottom: 20, right: 110 },
        value: sc_static('images/loading.gif'),
        useImageQueue: NO,
        isVisibleBinding: 'ScaleUI.loginController.isLoggingIn'
      }),

      errorMessage: SC.LabelView.design({
        layout: { height: 40, width: 230, right: 120, bottom: 7 },
        classNames: ['error-message'],

        valueBinding: 'ScaleUI.loginController.errorMessage'
      })

    })  //contentView

  })  //loginPane