web/connected.html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif; max-width: 500px; color: white; background-color: gray;}

input[type=submit] {
  background-color: #47a9e6;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #315b82;
}

.container {
  padding: 20px 5px;
}
</style>
</head>
<body>
<h2>Ring Device Addon Connected</h2>
<h3 id="systemId"></h3>
It appears that this addon is already authenticated and connected to the Ring API, no additional action is required.
If you wish to force reauthentication, for example, to change the account used by this addon, clicking the button below will restart the authentication process.
<div class="container">
  <form action="./force-token-generation" method="get">
    <input type="submit" value="Force Reauthentication">
  </form>
</div>
<script>
  function getCookie(key) {
    var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
    return keyValue ? keyValue[2] : null;
  }
  if (getCookie('systemId')) {
    document.getElementById("systemId").innerHTML = `Device Name: <span style='color:chartreuse'> ${getCookie('systemId')}</span>`
  }
</script>
</body>
</html>