Skip to content

auth-upgrade server landing page #1624

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 21, 2021
Merged

auth-upgrade server landing page #1624

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
96 changes: 70 additions & 26 deletions default-templates/server/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
Expand All @@ -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}}" />
Expand All @@ -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>