Align landing page login experience.

Author: RubenVerborgh

default-templates/server/index.html

@@ -11,13 +11,9 @@
 <div class="container">
   <div class="page-header">
     <div class="pull-right">
-      <a href="/register" class="btn btn-primary">
-        Register
-      </a>
+      <a href="/register" class="btn btn-primary">Register</a>
 
-      <a href="/login" class="btn btn-success">
-        Login
-      </a>
+      <a onclick="login()" class="btn btn-success">Login</a>
     </div>
 
     <h1>Welcome to the Solid Prototype</h1>
@@ -30,6 +26,41 @@ <h1>Welcome to the Solid Prototype</h1>
 
     If you have not already done so, please create an account.
   </p>
+
+  <p class="lead hidden" id="loggedIn">
+    You are logged in as
+    <a href="#" id="profileLink"></a>.
+  </p>
 </div>
+<script src="/common/js/solid-auth-client.bundle.js"></script>
+<script>
+  const elements = {};
+  ['loggedIn', 'profileLink'].forEach(id => {
+    elements[id] = document.getElementById(id)
+  })
+
+  async function login () {
+    const session = await solid.auth.popupLogin()
+    if (session) {
+      // Make authenticated request to the server to establish a session cookie
+      const {status} = await solid.auth.fetch(location)
+      if (status === 401) {
+        alert(`Invalid login.`)
+        await solid.auth.logout()
+      }
+    }
+  }
+
+  solid.auth.trackSession(async session => {
+    if (!session) {
+      elements.loggedIn.classList.add('hidden')
+    }
+    else {
+      elements.loggedIn.classList.remove('hidden')
+      elements.profileLink.innerText = session.webId
+      elements.profileLink.href = session.webId
+    }
+  })
+</script>
 </body>
 </html>