Html logout button help

General
1

I have a logout button I’m using in a custom HTML Niagara graphic. Issue is that every time i deploy this on a JACE, I have to change the URL to whatever the JACE’s IP is. For example, https://localhost/logoutConfirm changes to https://912.168.1.140/logoutConfirm.
The JACES however have primary and secondary IP’s and if the user is logged via the wrong IP, then the logout button doesn’t work properly.

Hss anyone have a better solution to this?

<!DOCTYPE HTML>
<html>

  <head>

    <link rel="stylesheet" href="styles.css">

    <script src="javaScript.js"></script>
    

  </head>

  <body style="background-color:silver">
    
    <div class="banner" id="Banner">
        <button type="button" onclick="window.location.href='https://localhost/logoutConfirm';" style="position:absolute; right:10px; top:30%;">LogOut</button>
    </div>
      
    
    <div id="iframe-wrapper">
      <iframe id="frame" src="file:^px/Overview.px" class="iframe" scrolling="no" >
      <div id="iframe-overlay"></div>
      Your browser doesn't support iframes.
      </iframe>
      </div>
      
      
      
    </nav>
  </div>
  </body>
</html>
2

Alright. After a brief back and forth with chatGPT, here’s the working solution:

<button type="button" onclick="window.location.href='/logout';" style="position:absolute; right:10px; top:30%;">LogOut</button>
3

Sorry. I just an email about this. Don’t know I didn’t get notified before. Yes, what chatGPT showed you in a good solution.

Here’s what I usually do in my index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Building Automation System</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="app">
        <header class="top-bar">
            <button id="hamburger" class="icon-btn material-icons">menu</button>
            <div class="nav-items">
                <!-- Home button -->
                <a href="station:|slot:/Home" id="home" class="icon-btn material-icons" title="Home">home</a>
                
                <!-- Histories button -->
                <a href="history:" id="charts" class="icon-btn material-icons" title="Histories">bar_chart</a>
                
                <!-- Alarms button -->
                <a href="station:|slot:/Services/AlarmService/ConsoleRecipient" id="alarms" class="icon-btn material-icons" title="Alarms">notifications</a>
                
                <!-- Schedule button -->
                <a href="station:|slot:/Schedules/OccupancySched" id="schedule" class="icon-btn material-icons" title="Schedule">schedule</a>
                
                <!-- Holidays button -->
                <a href="station:|slot:/Schedules/Calendar" id="calendar" class="icon-btn material-icons" title="Holidays">event</a>
            </div>
            
            <!-- Weather widget -->
            <div id="weather-widget" class="weather-display">
                Loading weather...
            </div>
            
            <!-- Logout button -->
            <a href="/logout" id="logoff" class="icon-btn material-icons" title="Log Off">logout</a>
        </header>
    </div>
    <iframe id="sidebar" src="tree.html"></iframe>
    <div id="main-content">
        <h1>Welcome to the Building Automation System</h1>
        <p>Main content goes here.</p>
    </div>
    <script src="script.js"></script>
</body>
</html>
4

Cool. I’ll check out the page to see what improvements i can make to my existing one.

Thanks!

1 Like