auth-upgrade server landing page (#1624)

bourgeoa · web-flow · commit 11bd71ac38f8 · 2021-10-21T18:06:10.000+02:00
diff --git a/default-templates/server/index.html b/default-templates/server/index.html
@@ -1,23 +1,53 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Welcome to Solid</title>
+<!doctype html><html><head>
+  <meta charset="utf-8"/>
   <link rel="stylesheet" href="/common/css/bootstrap.min.css">
   <link rel="stylesheet" href="/common/css/solid.css">
-</head>
-<body>
-<div class="container">
-  <div class="page-header">
-    <div class="pull-right">
-      <button id="register" type="button" class="btn btn-primary">Register</button>
-      <button id="login"    type="button" class="hidden btn btn-default btn-success">Log in</button>
-      <button id="logout"   type="button" class="hidden btn btn-danger">Log out</button>
-    </div>
+  <script>
+    var keyname = 'SolidServerRootRedirectLink';
+    document.addEventListener('DOMContentLoaded', async function() {
+      if (!UI.authn.currentUser()) await UI.authn.checkUser();
+      let user = UI.authn.currentUser();
+
+// IF LOGGED IN: SET COOKIE. LOGOUT
+//
+      if( user ) {
+        window.localStorage.setItem(keyname,user.uri);
+        await UI.authn.authSession.logout();
+      }
+      else {
+        let webId = window.localStorage.getItem(keyname);
+
+// IF NOT LOGGED IN AND COOKIE EXISTS: REMOVE COOKIE, HIDE WELCOME, SHOW LINK TO PROFILE
+//
+        if( webId ) {
+          window.localStorage.removeItem(keyname);
+          document.getElementById('prototype').style.display = "none";
+          document.getElementById('loggedIn').style.display = "block";
+          document.getElementById('loggedIn').innerHTML = `<p>Your webId and profile address are</p> <p> &lt;${webId}&gt.</p><a href="${webId}">visit your profile to login</a></div>`;
+        }
+
+// IF NOT LOGGED IN AND COOKIE DOES NOT EXIST  : SHOW WELCOME, SHOW LOGIN/SIGN-UP BUTTONS
+//
+        else {
+            document.getElementById('prototype').style.display = "block";
+         document.getElementById('loginStatusArea').appendChild(UI.authn.loginStatusBox(document, null, {}))
+        }
+
+      }
+    })
+  </script>
+  <link href="/mash.css" rel="stylesheet">
+</head><body class="db-layout">
+
+<h1 style="margin:2em;padding:2em;border:8px solid green; display:none" id="loggedIn"></h1>
 
-    <h1>Welcome to the Solid Prototype</h1>
-  </div>
+<div id="prototype" class="container">
+
+  <div class="page-header">
+     <h1>Welcome to the Solid Prototype</h1>
+       <div id="loginStatusArea" class="pull-right"></div>
+     </h1>
+ </div>
 
   <p class="lead">
     This is a prototype implementation of a Solid server.
@@ -27,11 +57,6 @@ <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>
-
   <section>
     {{#if serverLogo}}
     <img src="{{serverLogo}}" />
@@ -49,7 +74,26 @@ <h2>Server info</h2>
     </dl>
   </section>
 </div>
-<script src="/common/js/solid-auth-client.bundle.js"></script>
-<script src="/common/js/auth-buttons.js"></script>
-</body>
-</html>
+  <header class="db-layout__header header" id="PageHeader"></header>
+  <div class="TabulatorOutline db-layout__content" id="DummyUUID" role="main">
+    <table id="outline"></table>
+    <div id="GlobalDashboard"></div>
+  </div><footer class="db-layout__footer" id="PageFooter"></footer>
+  <style>
+  #prototype {
+    margin : 2em;
+    padding : 1em;
+  }
+  #prototype input {
+    margin : 1em;
+    padding : 0.5em !important;
+  }
+  #loginStatusArea {
+    float:right;
+    clear:right;
+    margin-top:-5em;
+  }
+  </style>
+
+  <script src="/mashlib.js"></script>
+</body></html>
