Merge pull request #917 from rubensworks/polish/login-logout

Polish login-logout

Author: kjetilk

default-templates/new-account/index.html

@@ -80,11 +80,15 @@ <h1>Account settings</h1>
       loggedIn = !!session;
       button.innerText = loggedIn ? 'Log out' : 'Log in';
       button.classList.remove('btn-default');
+      button.classList.remove('btn-danger');
+      button.classList.remove('btn-primary');
       button.classList.add(loggedIn ? 'btn-danger' : 'btn-primary');
       if (loggedIn) {
         var sessionOrigin = getOriginFromWebId(session.webId);
         var isOwner = sessionOrigin === location.origin;
         accountSettings.classList.toggle('hidden', !isOwner);
+      } else {
+        accountSettings.classList.toggle('hidden', true);
       }
     });
 

default-templates/server/index.html

@@ -13,7 +13,7 @@
     <div class="pull-right">
       <a href="/register" class="btn btn-primary">Register</a>
 
-      <a onclick="login()" class="btn btn-success">Login</a>
+      <button id="session-action" type="button" class="session-action btn btn-default">Loading...</button>
     </div>
 
     <h1>Welcome to the Solid Prototype</h1>
@@ -51,33 +51,35 @@ <h2>Server info</h2>
 </div>
 <script src="/common/js/solid-auth-client.bundle.js"></script>
 <script>
-  const elements = {};
-  ['loggedIn', 'profileLink'].forEach(id => {
-    elements[id] = document.getElementById(id)
-  })
+  (function () {
+    const elements = {};
+    ['loggedIn', 'profileLink'].forEach(id => {
+      elements[id] = document.getElementById(id)
+    })
+    var button = document.getElementById('session-action')
+    var loggedIn = false
 
-  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 => {
+      loggedIn = !!session;
+      button.innerText = loggedIn ? 'Log out' : 'Log in';
+      button.classList.remove('btn-default');
+      button.classList.remove('btn-danger');
+      button.classList.remove('btn-success');
+      button.classList.add(loggedIn ? 'btn-danger' : 'btn-success');
+      if (!session) {
+        elements.loggedIn.classList.add('hidden')
       }
-    }
-  }
+      else {
+        elements.loggedIn.classList.remove('hidden')
+        elements.profileLink.innerText = session.webId
+        elements.profileLink.href = session.webId
+      }
+    })
 
-  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
-    }
-  })
+    button.addEventListener('click', function () {
+      loggedIn ? solid.auth.logout() : solid.auth.popupLogin()
+    })
+  })();
 </script>
 </body>
 </html>