No-dojo Login Dialog

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" dojoTheme="false" xmlns:xe="http://www.ibm.com/xsp/coreex">
	<xp:div id="dlgLogin" styleClass="hidden" style="width:500px" disableTheme="true" title="Login">
		<xp:table styleClass="lotusForm lotusFormTable">
			<xp:tr>
				<xp:td rowspan="3" style="width:80px;">
					<xp:image url="#{compositeData.image}"></xp:image>
				</xp:td>
				<xp:td style="width:100px">
					<xp:label id="label1" for="username">
						<xp:this.value>Username</xp:this.value>
					</xp:label>
				</xp:td>
				<xp:td style="width:300px;">
					<xp:inputText id="username" style="width:100%" styleClass="username">
						<xp:this.value><![CDATA[${javascript:""}]]></xp:this.value>
					</xp:inputText>
				</xp:td>
			</xp:tr>
			<xp:tr>
				<xp:td style="width:103.0px">
					<xp:label id="label2" for="password">
						<xp:this.value>Password</xp:this.value>
					</xp:label>
				</xp:td>
				<xp:td>
					<xp:inputText id="password" style="width:100%" password="true" styleClass="password">
						<xp:this.value><![CDATA[${javascript:""}]]></xp:this.value>
					</xp:inputText>
				</xp:td>
			</xp:tr>
			<xp:tr>
				<xp:td colspan="3">
					<xp:div id="loginMessage">&#160;</xp:div>
				</xp:td>
			</xp:tr>
		</xp:table>
		<xp:div style="text-align:right">
			<xp:button id="btnLogin" style="text-align:center">
				<xp:this.value>Login</xp:this.value>
				<xp:eventHandler event="onclick" submit="false">
					<xp:this.script><![CDATA[doLogin();]]></xp:this.script>
				</xp:eventHandler>
			</xp:button>
			&#160;
			<xp:button id="btnLoginCancel">
				<xp:this.value>Cancel</xp:this.value>
				<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
					<xp:this.action><![CDATA[#{javascript:doLoginCancel();}]]></xp:this.action>
				</xp:eventHandler>
			</xp:button>
		</xp:div>
	</xp:div>
	<xp:div id="dlgLogout" styleClass="hidden" style="width:500px" disableTheme="true" title="Logout">
		<xp:div>
			<xp:label id="label3">
				<xp:this.value>Do you want to logout from the system?</xp:this.value>
			</xp:label>
		</xp:div>
		<xp:div style="text-align:right">
			<xp:button id="btnLogoutOk">
				<xp:this.value>Logout</xp:this.value>
				<xp:eventHandler event="onclick" submit="false">
					<xp:this.script><![CDATA[doLogout();]]></xp:this.script>
				</xp:eventHandler>
			</xp:button>
			&#160;
			<xp:button id="btnLogoutCancel">
				<xp:this.value>Cancel</xp:this.value>
				<xp:eventHandler event="onclick" submit="false">
					<xp:this.script><![CDATA[doLogoutCancel();]]></xp:this.script>
				</xp:eventHandler>
			</xp:button>
		</xp:div>
	</xp:div>
		<xp:scriptBlock id="scriptBlock1">
			<xp:this.value><![CDATA[
	username= document.getElementById("#{id:username}");
	password= document.getElementById("#{id:password}");
	msg= document.getElementById("#{id:loginMessage}");

doLogout= function() {
	document.getElementById("#{id:dlgLogout}").classList.add("hidden");
 	if (getCookie("DomAuthSessId"))
		setCookie("DomAuthSessId", null, -1);
 	if (getCookie("LtpaToken")) 
		setCookie("LtpaToken", null, -1);
	if (getCookie("LtpaToken2")) 
		setCookie("LtpaToken2", null, -1);
	location.reload();
};
 
doLogin= async function() {
	const formData = new FormData();
	formData.append("Username", username.value);
	formData.append("Password", password.value);
	formData.append("RedirectTo", location.href);
	
	const response= await fetch("/names.nsf?login", {
		method: "POST",
		credentials: 'include',
		body: formData
	});
	console.log(response);
	if(response.redirected) {
		document.getElementById("#{id:dlgLogin}").classList.add("hidden");
		location.reload();
 	} else {
		msg.innerHTML = "Login failed. Please try again.";
		msg.className = "lotusMessage lotusWarning";
		//username.value = "";
		password.value = "";
		password.focus();
 	}
};

doLoginCancel= function() {
};

doLogoutCancel= function() {
};
 
checkCookie= function() {
	var tokenOk = false;
	if(getCookie("DomAuthSessId")) 
		tokenOk = (getCookie("DomAuthSessId").length == 32);
	if (getCookie("LtpaToken"))
		tokenOk = (getCookie("LtpaToken").length == 32);
	if (getCookie("LtpaToken2"))
		tokenOk = (getCookie("LtpaToken2").length == 32);
	return tokenOk;
};
 
dialogLogin= function() {
	if(checkCookie())
		document.getElementById("#{id:dlgLogout}").classList.remove("hidden");
	else {
		document.getElementById("#{id:dlgLogin}").classList.remove("hidden");
		username.value= "";
		password.value= "";
		msg.innerHTML= "";
		msg.className= "";
	} 
};
]]></xp:this.value>
		</xp:scriptBlock>
</xp:view>