index.html


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Chat</title>
    <link rel="stylesheet" href="styles/main.css">
  </head>
  <body>    
    
  <section class="section">
    <div class="container">
      <h1 class="title">
        Welcome to your chat!
      </h1>

      <section id="welcome">
        <hr>
        Do you have a Solid Pod?
        <hr>
        <button id="login" class="button button is-info is-rounded">Log in</button>
        <hr>
        No, choose from the list of Pod Providers!
        <hr>
        <a href="https://solid.inrupt.com/get-a-solid-pod" target="_blank" class="button button is-info is-rounded">I Want a Solid Pod!</a>
        <hr>
      </section>
      
      <section id="logout" style="display:none">
        <hr>
        <a id="user" target="_blank" href="#"></a>
        <hr>
        <button class="button button is-info is-rounded">Log out</button>        
      </section>
      
    </div>
  </section>

  <script src="https://lisa159.github.io/TestHelloWorld/scripts/solid-auth-client.bundle.js"></script>
  <script src="https://lisa159.github.io/TestHelloWorld/scripts/rdflib.min.js"></script>
    
  <script>
    function renderLogin(webId) {
      let logout = document.getElementById('logout')
      let welcome = document.getElementById('welcome')
      let user = document.getElementById('user')

      logout.style.display = ''             
      welcome.style.display = 'none'             
      
      user.textContent = webId
      user.setAttribute('href', webId)
    }
        
    function renderLogout() {
      let logout = document.getElementById('logout')
      let welcome = document.getElementById('welcome')

      logout.style.display = 'none'             
      welcome.style.display = ''             
    }
        
    function handleLogin() {
      // login event
      solid.auth.trackSession(session => {        
        if (session && session.webId) {
          renderLogin(session.webId)
        } else {
          renderLogout()
        }
      })                        
    }

    // Log the user in and out on click        
    function addListeners() {
      let login = document.getElementById('login')
      let logout = document.getElementById('logout')
      
      // login and logout buttons
      const popupUri = 'https://lisa159.github.io/TestHelloWorld/popup.html'
      login.addEventListener('click', () => solid.auth.popupLogin({ popupUri }))
      logout.addEventListener('click', () => solid.auth.logout())
        
      handleLogin()

    }
              
    addListeners()      
  </script>
  
  </body>
</html>