webix.protoUI({
  name:"recaptcha",
  $init:function(){
    this.$ready.push(function(){
      	var key = this.config.sitekey;
    	window.grecaptcha.render(this.$view, {
    		sitekey:key
    	});
    })
  }, 
  getValue:function(){
    return this.$view.querySelector("textarea").value;
  },
  setValue:function(){ /*do nothing*/ },
  focus:function(){ /*do nothing*/ },
  defaults:{
    name:"g-recaptcha-response",
    borderless:true,
    height: 85
  }
}, webix.ui.view);

webix.ready(function(){
	webix.ui({
		view:"window", 
		id:"login_window",
		position: "center",
		modal: true,
		width:340,
	    head: {
		  view: "toolbar", cols: [
			{ view:"label", label:"Hybris Demos", align: "center" },
		  ]
		},

		body: {
			view:"form", 
			id:"login_form",
			width:340,
			elements:[
				{ 
					template: 'Log in with your administrator email and password', 
					autoheight: true,
				},
				{ 
					view: "text", 
					label: "Email", 
					name: "username",
					required: true,
                    attributes: {
                        name: "username"
                    }
				},
				{ 
					view: "text", 
					type: "password", 
					label: "Password", 
					required: true,
					name: "password",
                    attributes: {
                        name: "password"
                    }
				},
				{
					view:"recaptcha",
					id:"captcha",
					sitekey: "6Le_Q54UAAAAANt-ebHpwzzI4rW3IKNRyU6TTDc2"
				},
				{ 
					view: "button", 
					value: "Login", 
					align: "center",
					width: 100,
					type: "form",
					click: submit_form
				}
			]
		}
	}).show();

	webix.UIManager.addHotKey("enter", submit_form);

});

function submit_form() {
	// If form validation fails, do nothing
	if (! $$("login_form").validate() ) {
		return;
	}
	
	webix.send(
		"/login", // URL
		$$("login_form").getValues(), // values
		"POST"  // method
	);
};