Logout

WebGde/WebContent/WebGde-Widgets/BPO/returnElement.js

@@ -103,7 +103,7 @@ export function createReturnWindow() {
         }
     }
     
-    createConfirmationModal(returnButtonFunction, "Return to Item List Menu?");
+    createConfirmationModal(returnButtonFunction, "Return to Item List Menu?", "Any unsubmitted inputs and items will be lost.");
 }
 
 function createButtonElem(className, buttonName, icon) {

WebGde/WebContent/WebGde-Widgets/DataInputWidget/DataInputWidget.css

@@ -264,7 +264,7 @@ input:focus, textarea:focus {
 	border-radius: 8px;
 }
 
-input[type=text], input[type=date], input[type=time] {
+input[type=text], input[type=date], input[type=time], textarea {
 	width: 100%;
 	/* height: 25px; */
 	padding: 11px 16px;

WebGde/WebContent/WebGde-Widgets/ElementListWidget/ElementListWidget.css

@@ -276,4 +276,17 @@ body {
 	margin-right: 40px;
 	white-space: normal;
 	overflow-wrap: break-word;
+}
+
+.logout-box{
+	font-size: 16px;
+	font-weight: bold;
+	background-color: white;
+	padding-top: 10px;
+	padding-bottom: 10px;
+	padding-left: 50px;
+	padding-right: 50px;
+	border-style: solid;
+	border-width: thin;
+	border-color: #E5E8EC;
 }
\ No newline at end of file

WebGde/WebContent/WebGde-Widgets/ElementListWidget/ElementListWidget.js

 import { createWebGdeInterface, removeLoadingScreen } from '../../script.js';
 import { createReturnWindow } from '../BPO/returnElement.js';
 import { populateFields } from '../DataInputWidget/generateFields.js';
+import { logoutKeycloak } from '../Logout/Logout.js';
 import { ADD_NEW_OPTION, CURRENT_NODE, BPO_URL, DISPLAYED_DETAILS } from '../config.js';
 import { DocumentControlWidget } from "../documentControlWidget/documentControlWidget.js";
 import { INDEXED_DB_STORAGE, HIGHLIGHT_OBJECT, IMAGE_VIEWER_OBJECT, INDEXED_DB_NAME, INDEXED_DB_TBL_NAME, setIndexedDBStorage, setHighlightObject, setImageViewerObject, setBPOObject, BPO_OBJECT, DISPLAY_FIELD_OBJECT, setDisplayFieldObject, activateGDE, setDocumentControlObject, DOCUMENT_CONTROL_OBJECT, IS_GDE_ACTIVATED } from "../globalVariable.js";
@@ -104,6 +105,43 @@ export class ElementListWidget {
 		const userProfileIcon = document.createElement("span");
 		userProfileIcon.classList.add("user-profile-icon");
 
+		userProfileIcon.addEventListener('click', (event) => {
+			// Check if the logout box is already present
+			const existingLogoutBox = document.querySelector(".logout-box");
+			
+			if (existingLogoutBox) {
+				// If the box exists, remove it (toggle off)
+				existingLogoutBox.remove();
+			} else {
+				// If the box doesn't exist, create and append it (toggle on)
+				const logoutBox = document.createElement("div");
+				logoutBox.classList.add("logout-box");
+				logoutBox.textContent = "Logout";
+		
+				// Append the logout box to the body or a specific container
+				document.body.appendChild(logoutBox);
+		
+				// Position the box on the lower left of the icon with 50px to the left
+				const iconRect = userProfileIcon.getBoundingClientRect();
+				logoutBox.style.position = "absolute";
+				logoutBox.style.top = iconRect.bottom + "px"; // Position below the icon
+				logoutBox.style.left = iconRect.left - 140 + "px";  // 50px to the left of the left side of the icon
+
+				logoutBox.addEventListener('click', logoutKeycloak);
+		
+				// Add an event listener to close the box when clicking outside
+				document.addEventListener("click", function (event) {
+					if (!logoutBox.contains(event.target) && event.target !== userProfileIcon) {
+						logoutBox.remove();
+					}
+				});
+		
+				// Stop the click event from propagating, to prevent immediate closure
+				event.stopPropagation();
+			}
+		});
+		
+
 		// Append user profile icon to topDiv
 		topDiv.appendChild(userProfileIcon);
 

WebGde/WebContent/WebGde-Widgets/Logout/Logout.js

+import { createConfirmationModal } from "../genericPopup/genericPopup.js";
+
+export function logoutKeycloak(){
+    createConfirmationModal(logoutAndroid, "Are you sure you want to Logout?", "Any unsaved progress will be lost.");
+}
+
+function logoutAndroid(){
+    window.LoginInterface.logoutKeycloak();
+}
\ No newline at end of file

WebGde/WebContent/WebGde-Widgets/genericPopup/genericPopup.css

@@ -51,6 +51,12 @@
   margin-bottom: 25px;
 }
 
+.warning-message {
+  font-style: italic;
+  font-size: 16px;
+  margin-bottom: 25px;
+}
+
 .modal-button-container {
   display: flex;
   justify-content: space-evenly;

WebGde/WebContent/WebGde-Widgets/genericPopup/genericPopup.js

@@ -135,7 +135,7 @@ export function createErrorModal(okButtonAction, buttonTxt, popupTitleText){
 	});
 }
 
-export function createConfirmationModal(okButtonFunction, popupTitleText) {
+export function createConfirmationModal(okButtonFunction, popupTitleText, warningMessage) {
 	var yesButton = document.createElement("button");
 	yesButton.id = "yesButtonModal";
 	yesButton.textContent = "Yes";
@@ -169,8 +169,17 @@ export function createConfirmationModal(okButtonFunction, popupTitleText) {
 	var popupTitle = document.createElement("p");
 	popupTitle.classList.add("popup-text");
 	popupTitle.textContent = popupTitleText;
-  
+
 	popupContent.appendChild(popupTitle);
+
+	if(warningMessage){
+		var warningText = document.createElement("p");
+		warningText.classList.add("warning-message");
+		warningText.textContent = ""+ warningMessage + "";
+		popupContent.appendChild(warningText);
+
+	}
+  
 	popupContent.appendChild(buttonGroup);
   
 	popupContainer.appendChild(popupContent);

WebGde/WebContent/WebGde-Widgets/sample_schema/dev_schema.json

@@ -5,7 +5,7 @@
 				"fieldLabel": "First Name",
 				"aka": "field7",
 				"validation": {
-					"fieldLength": 30,
+					"fieldLength": 50,
 					"collection": "alphanumeric",
 					"invalidchar": "`~!@#&$%^*_={}[]:;/\"|\\<>",
 					"mandatory": true
@@ -15,7 +15,7 @@
 				"fieldLabel": "Middle Name",
 				"aka": "field72",
 				"validation": {
-					"fieldLength": 30,
+					"fieldLength": 50,
 					"collection": "alphanumeric",
 					"invalidchar": "`~!@#&$%^*_={}[]:;/\"|\\<>",
 					"mandatory": true