<style>
.loggedin {
  display: none;
}
</style>


<div class="loggedin" id="loggedin">
  <span id="usernameoutput"></span>
  <br><br>
  <a id="logoutbtn" href="">Logout</a>
</div>

<script>
// Get currently logged in account
let username = fetch('https://kiyantk.nl/dev/citrine/account/')
    .then((response) => response.text())
    .catch(error => console.error)

// Use account name
username.then(result => 
  console.log(result)
);

// Get status
let status = username.then(result => 

fetch('https://kiyantk.nl/dev/citrine/status/?user=' + result)
    .then((response) => response.text())
    .catch(error => console.error)

);

// Use status
status.then(result =>
  console.log(result)
);

var logoutbtn = document.getElementById('logoutbtn');
var usernameoutput = document.getElementById('usernameoutput');
var loggedinElement = document.getElementById('loggedin');

// Set logout url
username.then(result => 
  logoutbtn.href = 'https://kiyantk.nl/dev/citrine/logout/?user=' + result
);

// Use status
status.then(result => {
  if(result === 'false' || result === 'notfound') {
    window.location.href = "https://kiyantk.nl/dev/citrine/example/four";
  }
});

// Use status
username.then(result => {
  if(result !== '') {
    loggedinElement.style.display = 'initial';
  }
});


// Set logout url
username.then(result => 
  usernameoutput.innerHTML = '<b>Logged in as</b>: ' + result
);
</script>
