<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.kiy.li/code/citrine/citrine-v1-embed.css">
<style>
body {
  text-align: center;
}

.prelogin {
  display: initial;
}

.loggedin {
  display: none;
}

.loginscreen {
  padding: 10px;
  border: 2px solid black;
  border-radius: 5px;
  width: 250px;
  margin: 0 auto;
  padding-bottom: 25px;
}
</style>

<h1>Welcome. Please log in to continue.</h1>

<div class="loginscreen">
<h2>Login</h2>
<a id="citrine-link" href="https://kiyantk.nl/dev/citrine/?url=https%3A%2F%2Fkiyantk.nl%2Fdev%2Fcitrine%2Fexample%2Ffour"><button class="citrine-button">Log in using Citrine</button></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');

// Use status
status.then(result => {
  if(result !== 'false' && result !== 'notfound' && result !== 'null') {
    console.log('User is logged in!');
    window.location.href = "https://kiyantk.nl/dev/citrine/?url=https%3A%2F%2Fkiyantk.nl%2Fdev%2Fcitrine%2Fexample%2Ffour%2Fdashboard.php";
  }
});
</script>
