In some cases, we may need to customize the usual login screen.

All we have to do is define a collection with the design we want for the login. To this collection we have to put an attribute login-coll = “true” which is the one that causes that collection to become “Login Screen”.

<!-- Note: Attribute login-coll="true" is the one who does the trick, making the collection to become the login one. -->
 
<coll name="LogonColl" title="Entrada" login-coll="true" fontsize="8" progid="ASData.CASBasicDataObj" sql="SELECT * FROM ##PREF##usuarios t1" objname="usuarios" updateobj="usuarios" autorefresh="true" notab="true" disabled-buttonok="true" nostopreplica="true" filter="" sort="">
	<group name="Login" id="1" bgcolor="#FFFFFF" scrollbar="false" />
		<prop name="MAP_IMG" group="1" type="IMG" labelwidth="0" path="##APP##\icons\logo.png" locked="true" visible="7" />
		<prop name="MAP_USUARIO" title="Usuario:" labelwidth="7" lmargin="1" type="T" size="150" onchange="Refresh" fieldsize="9" visible="7" group="1" labelshadow="false" forecolor="#CC3333" bgcolor="#FFFFFF" labelbox="false" labelfont-bold="true" text-border="true" fontsize="10" text-bgcolor-disabled="#FFFFFF" />
		<prop name="MAP_PWD" title="Contraseña:" type="X" labelwidth="7" lmargin="1" size="150" onchange="Refresh" fieldsize="9" visible="7" group="1" labelshadow="false" forecolor="#CC3333" bgcolor="#FFFFFF" labelbox="false" labelfont-bold="true" text-border="true" fontsize="10" text-bgcolor-disabled="#FFFFFF" />
		<button name="BOTONCANCELAR" group="1" caption="Cancelar" visible="true" labelwidth="8" lmargin="4" tmargin="2" method="ExecuteNode (click-cancelar)" labelfont-bold="true" bgcolor="#FFFFFF" text-bgcolor-disabled="#FFFFFF" />
		<button name="BOTONOK" group="1" caption="Entrar" visible="true" labelwidth="8" newline="false" lmargin="4" tmargin="2" method="ExecuteNode (click-entrar)" labelfont-bold="true" bgcolor="#FFFFFF" text-bgcolor-disabled="#FFFFFF" />
		<prop name="MAP_TEXTO1" title="Si olvidó su contraseña, póngase" labelwidth="22" lmargin="1" tmargin="2" type="TL" size="150" onchange="Refresh" fieldsize="8" visible="7" group="1" labelshadow="false" forecolor="#000000" bgcolor="#FFFFFF" labelfont-bold="true" text-border="true" labelbox="false" fontsize="10" text-bgcolor-disabled="#FFFFFF" />
		<prop name="MAP_TEXTO2" title="en contacto con el teléfono:" labelwidth="22" lmargin="1" type="TL" size="150" onchange="Refresh" fieldsize="8" visible="7" group="1" labelshadow="false" forecolor="#000000" bgcolor="#FFFFFF" labelfont-bold="true" text-border="true" labelbox="false" fontsize="10" text-bgcolor-disabled="#FFFFFF" />
		<prop name="MAP_TLFCONTACTO" labelwidth="0" lmargin="1.5" type="T" size="150" fieldsize="8" visible="7" phone="true" group="1" locked="true" labelshadow="false" forecolor="#000000" bgcolor="#FFFFFF" labelbox="false" labelfont-bold="true" textfont-bold="true" text-border="false" fontsize="10" text-bgcolor-disabled="#FFFFFF">000000</prop>
		<!-- Campos NO visibles, los rellenaremos nosotros de valor -->
		<prop name="MAP_FECHACAD" type="D" size="150" fieldsize="8" visible="0" group="1" />
		<prop name="MAP_IDUSUARIO" type="N" size="150" fieldsize="8" visible="0" group="1" />
 
	<create>
		<action name="runscript">
			<script language="VBScript">
				This.("MAP_TLFCONTACTO")="924252525"
			</script>
		</action>
	</create>
 
	<click-entrar>
		<action name="runscript">
			<script language="VBScript">
				'Si se pulsa el boton Entrar, comprobamos nombre de usuario y password -->
				'La función login la definimos en el fichero codigo.vbs que hemos incluido en la coll Empresas
				login()
			</script>
		</action>
	</click-entrar>
 
	<click-cancelar>
		<action name="runscript">
			<script language="VBScript">
				'Si se pulsa el botón Cancelar, salimos de la aplicación -->
				appdata.failwithmessage -11888,"##EXITAPP##"
			</script>
		</action>
	</click-cancelar>
 
	<login-ok>
		<action name="runscript">
			<script language="VBScript">
				'Aqui podemos setear una variable de entorno, por ejemplo, en principio no hay que hacer nada.
			</script>
		</action>
	</login-ok>
 
	<login-fail>
		<action name="runscript">
			<script language="VBScript">
				appdata.failwithmessage -8100, "Nombre de usuario o password incorrecto"
			</script>
		</action>
	</login-fail>
 
</coll>

.vbs code file that is included in the Empresas collection.

function login()
	Dim st_msg,ObjB,st_erraut,CollB,CollC,ObjC
	st_msg=""
	'Forzar al usuario a introducir nombre de usuario y contraseña
	if This("MAP_USUARIO")="" or This("MAP_PWD")="" then
		st_msg="Introduzca nombre de usuario y clave"
	end if
	if st_msg <> "" then
		appdata.failwithmessage -8100,st_msg
	else
		st_erraut=""
		Set CollB=appdata.GetCollection("Usuarios")
		CollB.filter="LOGIN='"+Cstr(This("MAP_USUARIO")) +"'"
		CollB.StartBrowse
		Set ObjB=CollB.CurrentItem
		if ObjB is nothing then
			st_erraut="Nombre de usuario o password incorrecto"
		end if
		Set ObjB=nothing
		CollB.EndBrowse
		CollB.Clear
		Set CollB=nothing
		'Si todo OK, intentamos el logueo
		if st_erraut="" then
			This.Variables("##LOGIN_USERCOLL##")="Usuarios"
			This.Variables("##LOGIN_NEWUSER##")="LOGIN,"+This("MAP_USUARIO")
			This.Variables("##LOGIN_NEWPASS##")="PWD,"+This("MAP_PWD")
			This.Variables("##LOGIN_NEWNOUSERIN##")=0
			appdata.failwithmessage -11888,"##LOGIN_START##"
		else
			appdata.failwithmessage -8100,st_erraut
		end if
	end if
end function

A new way to login has been defined in XOne applications.

Within the appData object , we find the following methods related to the login.

{
	userName: /*user*/,
	password: /*password*/,
	entryPoint: /*Collection entryPoint that will be opened when the login is successful.*/,
	/*Optional*/
	onLoginSuccessful: function() {
		/*Do something when login is successful.*/
	},
	/*Optional*/
	onLoginFailed: function() {
		/*Do something when login is wrong.*/
	}
};

function doLogin() {
    var params = {
        userName: self.MAP_USER,
        password: self.MAP_PASSWORD,
        entryPoint: "MenuEntrada2",
        /* Opcional */
        onLoginSuccessful: function() {
            ui.showToast("Login OK!");
        },
        /* Opcional */
        onLoginFailed: function() {
            ui.showToast("Login failed!");
        }
    };
    appData.login(params);
}

appData.logout();

appData.exit();